Attachment 265758 Details for Bug 507788 – Patch contains code required to re-enable dynamically loading container themes.

Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

[patch] Patch contains code required to re-enable dynamically loading container themes.

ThemeData_ThemeSheetWriter.patch (text/plain), 59.61 KB, created by Casey Flynn

on 2016-12-07 16:35:34 EST

(hide)

Description:

Filename:

MIME Type:

Creator: Casey Flynn

Created: 2016-12-07 16:35:34 EST

Size: 59.61 KB

patch

obsolete

>diff --git a/bundles/org.eclipse.orion.client.ui/web/js-tests/ui/uiTests.html b/bundles/org.eclipse.orion.client.ui/web/js-tests/ui/uiTests.html
>index ddbfa93..b33769c 100644
>--- a/bundles/org.eclipse.orion.client.ui/web/js-tests/ui/uiTests.html
>+++ b/bundles/org.eclipse.orion.client.ui/web/js-tests/ui/uiTests.html
>@@ -39,6 +39,7 @@
> //			"js-tests/ui/commonjs-unittesting/test.html",
> //			"js-tests/ui/githubfileapi/test.html",
> //			"js-tests/ui/searchRendering/disabled-test.html", // disabled
>+			"js-tests/ui/widgets/widgetsTests",
> 		], function(){
> 			mocha.run();
> 		});
>diff --git a/bundles/org.eclipse.orion.client.ui/web/js-tests/ui/widgets/widgetsTests.js b/bundles/org.eclipse.orion.client.ui/web/js-tests/ui/widgets/widgetsTests.js
>new file mode 100644
>index 0000000..a249a88
>--- /dev/null
>+++ b/bundles/org.eclipse.orion.client.ui/web/js-tests/ui/widgets/widgetsTests.js
>@@ -0,0 +1,115 @@
>+/*******************************************************************************
>+ * @license
>+ * Copyright (c) 2016 IBM Corporation and others.
>+ * All rights reserved. This program and the accompanying materials are made 
>+ * available under the terms of the Eclipse Public License v1.0 
>+ * (http://www.eclipse.org/legal/epl-v10.html), and the Eclipse Distribution 
>+ * License v1.0 (http://www.eclipse.org/org/documents/edl-v10.html). 
>+ * 
>+ * Contributors: Casey Flynn - Google Inc. - initial API and implementation
>+ ******************************************************************************/
>+/*eslint-env browser, amd, mocha*/
>+define([
>+	'chai/chai',
>+	'orion/widgets/themes/container/ThemeSheetWriter',
>+], function(chai, ThemeSheetWriter) {
>+	var assert = chai.assert;
>+
>+	var themeSheetWriter;
>+
>+	var setUp = function() {
>+		themeSheetWriter = new ThemeSheetWriter.ThemeSheetWriter();
>+	},
>+	tearDown = function() {
>+		themeSheetWriter = null;
>+	};
>+	describe("Widgets", function() {
>+		beforeEach(setUp);
>+		afterEach(tearDown);
>+		describe("Theme Sheet Writer", function() {
>+			it("Should write a valid style string", function() {
>+				var settings = {
>+					"styles": {
>+						".selector" : {
>+							"attribute" : "value"
>+						}
>+					}
>+				};
>+				
>+				var expected = "\n"+
>+					".orionPage .selector {\n"+
>+					"\tattribute: value;\n"+
>+					"}";
>+				
>+				
>+				var actual = themeSheetWriter.getSheet("orionPage", settings);
>+				assert.equal(actual, expected);				
>+			});
>+			it("Should write a valid style string - 2", function() {
>+				var settings = {
>+					"styles": {
>+						".multi.selector" : {
>+							"attribute0" : "value0"
>+						},
>+						".selector" : {
>+							".nested.multi.selector" : {
>+								"attribute1" : "value1",
>+								"attribute2" : "value2"
>+							},
>+							"attribute3" : "value3"
>+						},
>+						"#idSelector" : {
>+							"attribute4" : "value4"
>+						}
>+					}
>+				};
>+				
>+				var expected = "\n"+
>+					".orionPage .multi.selector {\n"+
>+					"	attribute0: value0;\n"+
>+					"}\n"+
>+					".orionPage .selector .nested.multi.selector {\n"+
>+					"	attribute1: value1;\n"+
>+					"	attribute2: value2;\n"+
>+					"}\n"+
>+					".orionPage .selector {\n"+
>+					"	attribute3: value3;\n"+
>+					"}\n"+
>+					".orionPage #idSelector {\n"+
>+					"	attribute4: value4;\n"+
>+					"}";
>+				
>+				var actual = themeSheetWriter.getSheet("orionPage", settings);
>+				assert.equal(actual, expected);				
>+			});
>+			it("Should return an empty style if no className is specified", function() {
>+				var settings = {
>+					"styles": {
>+						".selector" : {
>+							"attribute" : "value"
>+						}
>+					}
>+				};
>+				
>+				var expected = "";
>+				var actual = themeSheetWriter.getSheet(null, settings);
>+				assert.equal(actual, expected);				
>+			});
>+			it ("Should return an empty style if style is invalid - 1", function() {
>+				var expected = "";
>+				var actual = themeSheetWriter.getSheet(null, null);
>+				assert.equal(expected, actual);
>+			});
>+			it ("Should return an empty style if style is invalid - 2", function() {
>+				var expected = "";
>+				var actual = themeSheetWriter.getSheet(null, "");
>+				assert.equal(expected, actual);
>+			});
>+			it ("Should return an empty style if style is invalid - 3", function() {
>+				var expected = "";
>+				var actual = themeSheetWriter.getSheet(null, []);
>+				assert.equal(expected, actual);
>+			});
>+		});
>+	});
>+});
>\ No newline at end of file
>diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeData.js b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeData.js
>index 8cfa634..726137f 100644
>--- a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeData.js
>+++ b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeData.js
>@@ -7,16 +7,16 @@
>  * License v1.0 (http://www.eclipse.org/org/documents/edl-v10.html). 
>  * 
>  * Contributors: Anton McConville - IBM Corporation - initial API and implementation
>+ * 				 Casey Flynn - Google Inc.
>  ******************************************************************************/
> /*eslint-env browser, amd*/
> 
> define([
>-	'i18n!orion/settings/nls/messages',
> 	'orion/editor/textTheme',
> 	'orion/widgets/themes/container/ThemeSheetWriter',
> 	'orion/widgets/themes/ThemeVersion'
> ],
>-	function(messages, mTextTheme, ThemeSheetWriter, THEMES_VERSION) {
>+	function(mTextTheme, ThemeSheetWriter, THEMES_VERSION) {
> 
> 	// *******************************************************************************
> 	//
>@@ -25,185 +25,830 @@ define([
> 	//
> 	// *******************************************************************************
> 
>-		function StyleSet(){
>-		    //
>-		}
>-		
>-		function multiply(a,b){
>-			var resultString = 'Result:';
>-			var result = a*b;
>-			return resultString + result;
>-		}
>-		
>-		// TODO: what are these for? They just get overridden by ThemeData constructor
>-		StyleSet.prototype.name = 'Orion';
>-		StyleSet.prototype.navbar = '#404648';
>-		StyleSet.prototype.button = '#EFEFEF';
>-		StyleSet.prototype.location = '#333';
>-		StyleSet.prototype.breadcrumb = '#3087B3';
>-		StyleSet.prototype.separator = '#333';
>-		StyleSet.prototype.selection = 'FEC';
>-		StyleSet.prototype.sidepanel = '#FBFBFB';
>-		StyleSet.prototype.mainpanel = 'white';
>-		StyleSet.prototype.toolpanel = 'white';
>-		StyleSet.prototype.navtext = '#bfbfbf';
>-		StyleSet.prototype.content = '#3087B3';
>-		StyleSet.prototype.search = '#444';
>-		StyleSet.prototype.bannerProgress = "white";
>-
> 		function ThemeData(){
> 		
> 			this.styles = [];
>+			var lightPage = {
>+				"className": "lightPage",
>+				"name": "lightPage",
>+				"styles": {
>+					"#configSection": {
>+						"background-color": "rgba(255,255,255,1) !important",
>+						"color": "rgba(0,0,0,1) !important"
>+					},
>+					"#log": {
>+						"margin": "5px",
>+						"width": "calc(100% - 17px)"
>+					},
>+					".auxpane": {
>+						"background": "rgba(196,197,200,1) !important"
>+					},
>+					".checkedRow": {
>+						"background-color": "rgba(61,114,179,1) !important",
>+						"color": "rgba(255,255,255,1) !important",
>+						".commandButton": {
>+							"border-color": "rgba(255,255,255,1)",
>+							"color": "rgba(255,255,255,1)"
>+						},
>+						".commandButton:not(.primaryButton):focus": {
>+							"background": "rgba(61,114,179,0.50)",
>+							"box-shadow": "0 1px 2px 0 rgb(61, 114, 179)",
>+							"color": "rgba(0,0,0,1)"
>+						},
>+						".commandButton:not(.primaryButton):hover": {
>+							"background": "rgba(61,114,179,0.50)",
>+							"box-shadow": "0 1px 2px 0 rgb(61, 114, 179)",
>+							"color": "rgba(0,0,0,1)"
>+						},
>+						".gitStatusIcon": {
>+							"color": "white !important"
>+						},
>+						".gitStatusTitle": {
>+							"color": "white !important"
>+						},
>+						"gitStatusIcon": {
>+							"color": "rgba(255,255,255,1)"
>+						},
>+						"gitStatusTitle": {
>+							"color": "rgba(255,255,255,1)"
>+						}
>+					},
>+					".commandButton": {
>+						"background-color": "rgba(0, 0, 0, 0)",
>+						"border-width": "1px",
>+						"border-style": "solid",
>+						"border-color": "rgba(61,114,179,1)",
>+						"color": "rgba(61,114,179,1)"
>+					},
>+					".commandButton.disabled": {
>+						"color": "#cdcdcd"
>+					},
>+					".commandButton.orionButton.dropdownTrigger:hover": {
>+						"border-color": "#ccc"
>+					},
>+					".commandButton:not(.primaryButton):focus": {
>+						"background-color": "rgba(61,114,179,0.25)",
>+						"box-shadow": "0 1px 2px 0 rgb(61, 114, 179)",
>+						"color": "rgba(0,0,0,1)"
>+					},
>+					".commandButton:not(.primaryButton):hover": {
>+						"background-color": "rgba(61,114,179,0.25)",
>+						"box-shadow": "0 1px 2px 0 rgb(61, 114, 179)",
>+						"color": "rgba(0,0,0,1)"
>+					},
>+					".content-fixedHeight": {
>+						"background": "rgba(196,197,200,1) !important"
>+					},
>+					".core-sprite-error": {
>+						"color": "red"
>+					},
>+					".dialogTitle": {
>+						"background-color": "rgba(61,114,179,1) !important",
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".dropdownButtonWithIcon": {
>+						"color": "rgba(21,41,53,1) !important"
>+					},
>+					".dropdownMenu": {
>+						".dropdownMenuItemSelected": {
>+							"background": "rgba(61,114,179,0.25)",
>+							"border-left-color": "rgba(61,114,179,1)"
>+						}
>+					},
>+					".dropdownTrigger:not(.dropdownDefaultButton)": {
>+						"color": "rgba(21,41,53,1)"
>+					},
>+					".editorViewerHeader": {
>+						"background": "rgba(245,247,250,1) !important",
>+						"border-bottom-width": "1px",
>+						"border-bottom-style": "solid",
>+						"border-bottom-color": "rgba(245,247,250,1)",
>+						"color": "rgba(0,0,0,1)"
>+					},
>+					".filesystemName": {
>+						"color": "rgba(21,41,53,1) !important"
>+					},
>+					".fixedToolbarHolder": {
>+						"background": "rgba(255,255,255,1)"
>+					},
>+					".gitCommitMessage": {
>+						"gitCommitMessageTopRow": {
>+							"border-width": "1px",
>+							"border-style": "solid",
>+							"border-color": "rgb(61, 114, 179)"
>+						},
>+						".gitCommitMessageTopRow": {
>+							"border-color": "rgba(61,114,179,1)"
>+						}
>+					},
>+					".gitCommitMessageSection": {
>+						"background-color": "rgba(61,114,179,0.25)"
>+					},
>+					".gitCommitMore": {
>+						"color": "rgba(61,114,179,1) !important"
>+					},
>+					".gitStatusIcon": {
>+						"color": "rgba(61,114,179,1) !important"
>+					},
>+					".gitStatusSection": {
>+						"background-color": "rgba(61,114,179,0.25)"
>+					},
>+					".gitStatusTitle": {
>+						"color": "rgba(61,114,179,1) !important"
>+					},
>+					".label.parameterInput": {
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".launchConfigurationMenuItem.dropdownMenuItemActive": {
>+						"background": "rgba(245,247,250,1)"
>+					},
>+					".launchConfigurationsButton": {
>+						".commandButton.orionButton.dropdownTrigger": {
>+							"color": "rgba(255,255,255,1) !important"
>+						}
>+					},
>+					".launchConfigurationsWrapper>.launchConfigurationsButton.dropdownTrigger": {
>+						"background-color": "rgba(61,114,179,1) !important",
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".launchConfsDropdown": {
>+						".dropdownDefaultButton": {
>+							"background-color": "rgba(61,114,179,1) !important",
>+							"color": "rgba(255,255,255,1) !important"
>+						}
>+					},
>+					".launchConfsLabel": {
>+						"background-color": "rgba(61,114,179,1) !important",
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".liveUpdateLabel": {
>+						"color": "rgba(61,114,179,1) !important"
>+					},
>+					".mainToolbar": {
>+						"background-color": "rgba(255,255,255,1)",
>+						"color": "rgba(21,41,53,1) !important",
>+						".commandButton.orionButton.dropdownTrigger": {
>+							"border-color": "rgba(255,255,255,1) !important",
>+							"color": "rgba(0,0,0,1) !important",
>+							".dropdownTriggerButtonLabel": {
>+								"color": "rgba(255,255,255,1)"
>+							}
>+						},
>+						".commandButton.orionButton.dropdownTrigger.dropdownTriggerOpen": {
>+							"color": "rgba(196,197,200,1) !important"
>+						},
>+						".commandButton.orionButton.dropdownTrigger.launchConfigurationsButton": {
>+							"dropdownArrowDown": {
>+								"color": "white"
>+							},
>+							".dropdownArrowDown": {
>+								"color": "rgba(255,255,255,1)"
>+							}
>+						},
>+						".commandImage.dropdownTrigger": {
>+							"color": "rgb(21, 41, 53) !important"
>+						},
>+						".gitSectionLabel": {
>+							"background-color": "rgba(61,114,179,1) !important",
>+							"color": "rgba(255,255,255,1) !important"
>+						},
>+						".sectionWrapper": {
>+							"background-color": "rgba(61,114,179,1) !important",
>+							"color": "rgba(255,255,255,1) !important"
>+						}
>+					},
>+					".mainpane": {
>+						"background": "rgba(196,197,200,1) !important"
>+					},
>+					".navbar-item-selected": {
>+						"background-color": "rgba(61,114,179,1) !important",
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".orionSwitchLabel": {
>+						"background-color": "rgba(61,114,179,1) !important",
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".outlineExplorer": {
>+						".treeIterationCursorRow_Dotted": {
>+							"background-color": "rgba(61,114,179,1) !important",
>+							"color": "rgba(255,255,255,1) !important"
>+						}
>+					},
>+					".primaryButton": {
>+						"background-color": "rgba(61,114,179,1) !important",
>+						"border-width": "1px",
>+						"border-style": "solid",
>+						"border-color": "rgba(61,114,179,1) !important",
>+						"border-radius": "0 !important",
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".primaryButton:hover,": {
>+						".primaryButton:focus": {
>+							"background": "rgb(61, 114, 179)",
>+							"border-color": "rgb(61, 114, 179)"
>+						}
>+					},
>+					".projectNavColumn": {
>+						"color": "rgba(0,0,0,1)"
>+					},
>+					".searchResultsWrapperDiv": {
>+						".selectableNavRow:hover": {
>+							"background": "rgba(61,114,179,0.25)",
>+							"border-left-color": "rgba(61,114,179,1)"
>+						}
>+					},
>+					".sectionTable": {
>+						"background-color": "rgba(255,255,255,1)"
>+					},
>+					".sideMenu": {
>+						"background-color": "rgba(255,255,255,1)"
>+					},
>+					".sideMenuItem": {
>+						"color": "rgba(21,41,53,1) !important"
>+					},
>+					".sideMenuItem>.submenu-trigger:hover": {
>+						"color": "rgba(61,114,179,1) !important"
>+					},
>+					".sideMenuItemActive": {
>+						"background-color": "rgba(61,114,179,1) !important",
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".sideMenuItemActive:hover": {
>+						"background": "rgba(61,114,179,0.25) !important",
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".sidebarWrapper": {
>+						"background": "rgba(245,247,250,1) !important",
>+						"color": "rgba(0,0,0,1)"
>+					},
>+					".slideParameters": {
>+						"background-color": "rgba(61,114,179,1) !important",
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".splash": {
>+						"background": "rgba(245,247,250,1) !important",
>+						"box-shadow": "none"
>+					},
>+					".splashAbout": {
>+						"color": "rgba(61,114,179,1) !important"
>+					},
>+					".splashDetailedMessage": {
>+						"color": "rgba(0,0,0,1)"
>+					},
>+					".splashLoader": {
>+						"background": "rgba(245,247,250,1) !important",
>+						"box-shadow": "none"
>+					},
>+					".splashLoadingImage": {
>+						"-webkit-animation": "rotateThis .5s infinite linear",
>+						"animation": "rotateThis .5s infinite linear",
>+						"background": "none",
>+						"border": "2px solid #00b299",
>+						"border-radius": "50%",
>+						"border-right-color": "transparent",
>+						"display": "inline-block",
>+						"height": "20px",
>+						"margin": "0",
>+						"opacity": ".4",
>+						"width": "20px"
>+					},
>+					".splashLoadingImage.initial": {
>+						"border-width": "4px",
>+						"height": "40px",
>+						"width": "40px"
>+					},
>+					".splashMessage": {
>+						"color": "rgba(0,0,0,1)"
>+					},
>+					".splashVerbal": {
>+						"color": "rgba(61,114,179,1) !important"
>+					},
>+					".split": {
>+						"background": "rgba(196,197,200,1)",
>+						"width": "4px"
>+					},
>+					".splitThumb": {
>+						"background": "rgba(196,197,200,1)"
>+					},
>+					".status": {
>+						"color": "rgba(0,0,0,1)"
>+					},
>+					".statusContainer": {
>+						"background": "rgba(245,247,250,1)",
>+						"color": "rgba(0,0,0,1)"
>+					},
>+					".statusLight": {
>+						"background": "lightgray"
>+					},
>+					".statusLight.statusLightAmber": {
>+						"background": "#FFE141"
>+					},
>+					".statusLight.statusLightGreen": {
>+						"background": "#13dd6d"
>+					},
>+					".statusLight.statusLightProgress": {
>+						"background": "transparent",
>+						"border-color": "lightgray",
>+						"border-top-color": "transparent"
>+					},
>+					".statusLight.statusLightRed": {
>+						"background": "#C1272D"
>+					},
>+					".textviewTooltip": {
>+						".commandButton": {
>+							"background-color": "inherit",
>+							"border": "1px solid #325C80",
>+							"border-color": "rgba(255,255,255,1)",
>+							"color": "white",
>+							"margin-bottom": "2px"
>+						},
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".titleActionContainer": {
>+						"background": "rgba(245,247,250,1) !important",
>+						"color": "rgba(0,0,0,1)"
>+					},
>+					".tooltip": {
>+						"background-color": "rgba(61,114,179,1) !important",
>+						"border-width": "1px",
>+						"border-style": "solid",
>+						"border-color": "rgba(61,114,179,1)",
>+						"color": "rgba(255,255,255,1) !important",
>+						"h2": {
>+							"color": "rgba(255,255,255,1) !important"
>+						},
>+						".navlinkonpage": {
>+							"background-color": "rgba(61,114,179,1) !important",
>+							"color": "rgba(255,255,255,1) !important"
>+						},
>+						".operationError": {
>+							"color": "rgba(255,255,255,1) !important"
>+						}
>+					},
>+					".tooltipTailFromabove:after": {
>+						"border-top-color": "rgba(61,114,179,1)"
>+					},
>+					".tooltipTailFromabove:before": {
>+						"border-top-color": "rgba(61,114,179,1)"
>+					},
>+					".tooltipTailFrombelow:after": {
>+						"border-bottom-color": "rgba(61,114,179,1)"
>+					},
>+					".tooltipTailFrombelow:before": {
>+						"border-bottom-color": "rgba(61,114,179,1)"
>+					},
>+					".tooltipTailFromleft:after": {
>+						"border-left-color": "rgba(61,114,179,1)"
>+					},
>+					".tooltipTailFromleft:before": {
>+						"border-left-color": "rgba(61,114,179,1)"
>+					},
>+					".tooltipTailFromright:after": {
>+						"border-right-color": "rgba(61,114,179,1)"
>+					},
>+					".tooltipTailFromright:before": {
>+						"border-right-color": "rgba(61,114,179,1)"
>+					},
>+					".treeIterationCursorRow": {
>+						"background-color": "rgba(61,114,179,0.25)"
>+					},
>+					".treeIterationCursorRow_Dotted": {
>+						"background-color": "rgba(61,114,179,0.25)"
>+					},
>+					".workingTarget": {
>+						"background-color": "rgba(255,255,255,1)"
>+					},
>+					".commandImage.dropdownTrigger": {
>+						"color": "rgba(21,41,53,1)"
>+					},
>+					".dropdownMenuItem": {
>+						"color": "rgba(245,247,250,1)"
>+					},
>+					".pageToolbar": {
>+						".dropdownTrigger:not(.dropdownDefaultButton)": {
>+							"color": "rgba(196,197,200,1)"
>+						}
>+					},
>+					".primaryButton:hover": {
>+						".primaryButton:focus": {
>+							"background": "rgba(61,114,179,1)",
>+							"border-color": "rgba(61,114,179,1)"
>+						}
>+					}
>+				}
>+			}
>+			this.styles.push(lightPage);
> 			
>-			var orion = new StyleSet();
>-			orion.name = 'Orion';
>-			orion.navbar = 'white'; // #404648 for dark banner
>-			orion.button = '#EFEFEF';
>-			orion.location = '#efefef';
>-			orion.selection = 'FEC';
>-			orion.sidepanel = '#FBFBFB';
>-			orion.mainpanel = 'white';
>-			orion.toolpanel = 'white';
>-			orion.navtext = '#bfbfbf';
>-			orion.content = '#3087B3';
>-			orion.search = '#444';
>-			orion.breadcrumb = '#3087B3';
>-			orion.separator = '#333';
>-			orion.bannerProgress = "whitesmoke";
>-
>-			this.styles.push( orion );		
>-			
>-			var orion2014 = new StyleSet();
>-			orion2014.name = 'Orion2014';
>-			orion2014.navbar = 'white';
>-			orion2014.button = '#EFEFEF';
>-			orion2014.location = '#EFEFEF';
>-			orion2014.selection = 'FEC';
>-			orion2014.sidepanel = '#EEEEEE';
>-			orion2014.mainpanel = '#EEEEEE';
>-			orion2014.toolpanel = '#EEEEEE';
>-			orion2014.navtext = '#BFBFBF';
>-			orion2014.content = '#333333';
>-			orion2014.search = '#444444';
>-			orion2014.breadcrumb = '#333333';
>-			orion2014.separator = '#333333';
>-			orion2014.bannerProgress = "orange";
>-
>-			this.styles.push( orion2014 );		
>-
>-			var eire = new StyleSet();
>-			
>-			eire.name = 'Green Zone';
>-			eire.navbar = 'seagreen';
>-			eire.button = 'lavender';
>-			eire.location = 'darkseagreen';
>-			eire.selection = 'moccasin';
>-			eire.sidepanel = 'aliceblue';
>-			eire.mainpanel = 'white';
>-			eire.toolpanel = 'white';
>-			eire.navtext = '#FBFBFB';
>-			eire.content = 'darkgreen';
>-			eire.search = 'darkgreen';
>-			eire.breadcrumb = '#3087B3';
>-			eire.separator = 'seagreen';
>-			eire.bannerProgress = "#F2F2F2";
>-			
>-			this.styles.push( eire );
>-			
>-			var avril = new StyleSet();
>-			
>-			avril.name = 'Pretty In Pink';
>-			avril.navbar = 'plum';
>-			avril.button = 'lavender';
>-			avril.location = 'pink';
>-			avril.selection = 'lavender';
>-			avril.sidepanel = 'seashell';
>-			avril.mainpanel = 'white';
>-			avril.toolpanel = 'white';
>-			avril.navtext = '#FBFBFB';
>-			avril.content = 'mediumorchid';
>-			avril.search = 'violet';
>-			avril.breadcrumb = '#3087B3';
>-			avril.separator = 'plum';
>-			avril.bannerProgress = "#F2F2F2";
>-			
>-			this.styles.push( avril );
>-			
>-			var blue = new StyleSet();
>-			
>-			blue.name = 'Blue Monday';
>-			blue.navbar = 'cornflowerblue';
>-			blue.button = 'lavender';
>-			blue.location = 'skyblue';
>-			blue.selection = 'lavender';
>-			blue.sidepanel = 'aliceblue';
>-			blue.mainpanel = 'white';
>-			blue.toolpanel = 'white';
>-			blue.navtext = '#FBFBFB';
>-			blue.content = 'royalblue';
>-			blue.search = 'royalblue';
>-			blue.breadcrumb = '#3087B3';
>-			blue.separator = 'cornflowerblue';
>-			blue.bannerProgress = "#F2F2F2";
>-			
>-			this.styles.push( blue );
>-			
>-			var vanilla = new StyleSet();
>-			
>-			vanilla.name = 'Vanilla Skies';
>-			vanilla.navbar = 'sandybrown';
>-			vanilla.button = 'lemmonchiffon';
>-			vanilla.location = 'cornsilk';
>-			vanilla.selection = 'lemonchiffon';
>-			vanilla.sidepanel = 'white';
>-			vanilla.mainpanel = 'white';
>-			vanilla.toolpanel = 'white';
>-			vanilla.navtext = 'lemonchiffon';
>-			vanilla.content = 'chocolate';
>-			vanilla.search = 'moccasin';
>-			vanilla.breadcrumb = '#3087B3';
>-			vanilla.separator = 'sandybrown';
>-			vanilla.bannerProgress = "#F2F2F2";
>-			
>-			this.styles.push( vanilla );
>-			
>-			var beetlejuice = new StyleSet();
>-			
>-			beetlejuice.name = 'Beetlejuice';
>-			beetlejuice.navbar = 'indigo';
>-			beetlejuice.button = 'slateblue';
>-			beetlejuice.location = 'darkslateblue';
>-			beetlejuice.selection = 'silver';
>-			beetlejuice.sidepanel = 'lavender';
>-			beetlejuice.mainpanel = 'white';
>-			beetlejuice.toolpanel = 'white';
>-			beetlejuice.navtext = '#FBFBFB';
>-			beetlejuice.content = 'mediumslateblue';
>-			beetlejuice.search = '#444';
>-			beetlejuice.breadcrumb = '#3087B3';
>-			beetlejuice.separator = 'indigo';
>-			beetlejuice.bannerProgress = "#F2F2F2";
>-			
>-			this.styles.push( beetlejuice );
>-			
>-			var red = new StyleSet();
>-			
>-			red.name = 'Red';
>-			red.navbar = '#CD2127';
>-			red.button = '#777777';
>-			red.location = '#D85F56';
>-			red.selection = 'lightcoral';
>-			red.sidepanel = '#EFDAB2';
>-			red.mainpanel = '#FDFADD';
>-			red.toolpanel = '#FDFADD';
>-			red.navtext = '#FBFBFB';
>-			red.content = 'darkred';
>-			red.search = '#D85F56';
>-			red.breadcrumb = 'darkred';
>-			red.separator = '#CD2127';
>-			red.bannerProgress = "#F2F2F2";
>-			
>-			this.styles.push( red );		
>+			var orionPage = {
>+				"className": "orionPage",
>+				"name": "orionPage",
>+				"styles": {
>+					"#configSection": {
>+						"background-color": "rgba(38,52,63,1) !important",
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					"#log": {
>+						"margin": "5px",
>+						"width": "calc(100% - 17px)"
>+					},
>+					".auxpane": {
>+						"background": "rgba(59,75,84,1) !important"
>+					},
>+					".checkedRow": {
>+						"background-color": "rgba(27,177,153,1) !important",
>+						"color": "rgba(211,211,211,1) !important",
>+						".commandButton": {
>+							"border-color": "rgba(38,52,63,1)",
>+							"color": "rgba(211,211,211,1)"
>+						},
>+						".commandButton:not(.primaryButton):focus": {
>+							"background": "rgba(27,177,153,0.50)",
>+							"box-shadow": "0 1px 2px 0 rgb(61, 114, 179)",
>+							"color": "rgba(255,255,255,1)"
>+						},
>+						".commandButton:not(.primaryButton):hover": {
>+							"background": "rgba(27,177,153,0.50)",
>+							"box-shadow": "0 1px 2px 0 rgb(61, 114, 179)",
>+							"color": "rgba(255,255,255,1)"
>+						},
>+						".gitStatusIcon": {
>+							"color": "white !important"
>+						},
>+						".gitStatusTitle": {
>+							"color": "white !important"
>+						},
>+						"gitStatusIcon": {
>+							"color": "rgba(211,211,211,1)"
>+						},
>+						"gitStatusTitle": {
>+							"color": "rgba(211,211,211,1)"
>+						}
>+					},
>+					".commandButton": {
>+						"background-color": "rgba(0, 0, 0, 0)",
>+						"border-width": "1px",
>+						"border-style": "solid",
>+						"border-color": "rgba(27,177,153,1)",
>+						"color": "rgba(27,177,153,1)"
>+					},
>+					".commandButton.disabled": {
>+						"color": "#cdcdcd"
>+					},
>+					".commandButton.orionButton.dropdownTrigger:hover": {
>+						"border-color": "#ccc"
>+					},
>+					".commandButton:not(.primaryButton):focus": {
>+						"background-color": "rgba(27,177,153,0.25)",
>+						"box-shadow": "0 1px 2px 0 rgb(61, 114, 179)",
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".commandButton:not(.primaryButton):hover": {
>+						"background-color": "rgba(27,177,153,0.25)",
>+						"box-shadow": "0 1px 2px 0 rgb(61, 114, 179)",
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".content-fixedHeight": {
>+						"background": "rgba(59,75,84,1) !important"
>+					},
>+					".core-sprite-error": {
>+						"color": "red"
>+					},
>+					".dialogTitle": {
>+						"background-color": "rgba(27,177,153,1) !important",
>+						"color": "rgba(211,211,211,1) !important"
>+					},
>+					".dropdownButtonWithIcon": {
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".dropdownMenu": {
>+						".dropdownMenuItemSelected": {
>+							"background": "rgba(27,177,153,0.25)",
>+							"border-left-color": "rgba(27,177,153,1)"
>+						}
>+					},
>+					".dropdownTrigger:not(.dropdownDefaultButton)": {
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".editorViewerHeader": {
>+						"background": "rgba(59,75,84,1) !important",
>+						"border-bottom-width": "1px",
>+						"border-bottom-style": "solid",
>+						"border-bottom-color": "rgba(59,75,84,1)",
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".filesystemName": {
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".fixedToolbarHolder": {
>+						"background": "rgba(38,52,63,1)"
>+					},
>+					".gitCommitMessage": {
>+						"gitCommitMessageTopRow": {
>+							"border-width": "1px",
>+							"border-style": "solid",
>+							"border-color": "rgb(61, 114, 179)"
>+						},
>+						".gitCommitMessageTopRow": {
>+							"border-color": "rgba(27,177,153,1)"
>+						}
>+					},
>+					".gitCommitMessageSection": {
>+						"background-color": "rgba(27,177,153,0.25)"
>+					},
>+					".gitCommitMore": {
>+						"color": "rgba(27,177,153,1) !important"
>+					},
>+					".gitStatusIcon": {
>+						"color": "rgba(27,177,153,1) !important"
>+					},
>+					".gitStatusSection": {
>+						"background-color": "rgba(27,177,153,0.25)"
>+					},
>+					".gitStatusTitle": {
>+						"color": "rgba(27,177,153,1) !important"
>+					},
>+					".label.parameterInput": {
>+						"color": "rgba(211,211,211,1) !important"
>+					},
>+					".launchConfigurationMenuItem.dropdownMenuItemActive": {
>+						"background": "rgba(59,75,84,1)"
>+					},
>+					".launchConfigurationsButton": {
>+						".commandButton.orionButton.dropdownTrigger": {
>+							"color": "rgba(211,211,211,1) !important"
>+						}
>+					},
>+					".launchConfigurationsWrapper>.launchConfigurationsButton.dropdownTrigger": {
>+						"background-color": "rgba(27,177,153,1) !important",
>+						"color": "rgba(211,211,211,1) !important"
>+					},
>+					".launchConfsDropdown": {
>+						".dropdownDefaultButton": {
>+							"background-color": "rgba(27,177,153,1) !important",
>+							"color": "rgba(211,211,211,1) !important"
>+						}
>+					},
>+					".launchConfsLabel": {
>+						"background-color": "rgba(27,177,153,1) !important",
>+						"color": "rgba(211,211,211,1) !important"
>+					},
>+					".liveUpdateLabel": {
>+						"color": "rgba(27,177,153,1) !important"
>+					},
>+					".mainToolbar": {
>+						"background-color": "rgba(38,52,63,1)",
>+						"color": "rgba(255,255,255,1) !important",
>+						".commandButton.orionButton.dropdownTrigger": {
>+							"border-color": "rgba(38,52,63,1) !important",
>+							"color": "rgba(255,255,255,1) !important",
>+							".dropdownTriggerButtonLabel": {
>+								"color": "rgba(211,211,211,1)"
>+							}
>+						},
>+						".commandButton.orionButton.dropdownTrigger.dropdownTriggerOpen": {
>+							"color": "rgba(59,75,84,1) !important"
>+						},
>+						".commandButton.orionButton.dropdownTrigger.launchConfigurationsButton": {
>+							"dropdownArrowDown": {
>+								"color": "white"
>+							},
>+							".dropdownArrowDown": {
>+								"color": "rgba(211,211,211,1)"
>+							}
>+						},
>+						".commandImage.dropdownTrigger": {
>+							"color": "rgb(21, 41, 53) !important"
>+						},
>+						".gitSectionLabel": {
>+							"background-color": "rgba(27,177,153,1) !important",
>+							"color": "rgba(211,211,211,1) !important"
>+						},
>+						".sectionWrapper": {
>+							"background-color": "rgba(27,177,153,1) !important",
>+							"color": "rgba(211,211,211,1) !important"
>+						}
>+					},
>+					".mainpane": {
>+						"background": "rgba(59,75,84,1) !important"
>+					},
>+					".navbar-item-selected": {
>+						"background-color": "rgba(27,177,153,1) !important",
>+						"color": "rgba(211,211,211,1) !important"
>+					},
>+					".orionSwitchLabel": {
>+						"background-color": "rgba(27,177,153,1) !important",
>+						"color": "rgba(211,211,211,1) !important"
>+					},
>+					".outlineExplorer": {
>+						".treeIterationCursorRow_Dotted": {
>+							"background-color": "rgba(27,177,153,1) !important",
>+							"color": "rgba(211,211,211,1) !important"
>+						}
>+					},
>+					".primaryButton": {
>+						"background-color": "rgba(27,177,153,1) !important",
>+						"border-width": "1px",
>+						"border-style": "solid",
>+						"border-color": "rgba(27,177,153,1) !important",
>+						"border-radius": "0 !important",
>+						"color": "rgba(211,211,211,1) !important"
>+					},
>+					".primaryButton:hover,": {
>+						".primaryButton:focus": {
>+							"background": "rgb(61, 114, 179)",
>+							"border-color": "rgb(61, 114, 179)"
>+						}
>+					},
>+					".projectNavColumn": {
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".searchResultsWrapperDiv": {
>+						".selectableNavRow:hover": {
>+							"background": "rgba(27,177,153,0.25)",
>+							"border-left-color": "rgba(27,177,153,1)"
>+						}
>+					},
>+					".sectionTable": {
>+						"background-color": "rgba(255,255,255,1)"
>+					},
>+					".sideMenu": {
>+						"background-color": "rgba(38,52,63,1)"
>+					},
>+					".sideMenuItem": {
>+						"color": "rgba(255,255,255,1) !important"
>+					},
>+					".sideMenuItem>.submenu-trigger:hover": {
>+						"color": "rgba(27,177,153,1) !important"
>+					},
>+					".sideMenuItemActive": {
>+						"background-color": "rgba(27,177,153,1) !important",
>+						"color": "rgba(211,211,211,1) !important"
>+					},
>+					".sideMenuItemActive:hover": {
>+						"background": "rgba(27,177,153,0.25) !important",
>+						"color": "rgba(211,211,211,1)"
>+					},
>+					".sidebarWrapper": {
>+						"background": "rgba(59,75,84,1) !important",
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".slideParameters": {
>+						"background-color": "rgba(27,177,153,1) !important",
>+						"color": "rgba(211,211,211,1) !important"
>+					},
>+					".splash": {
>+						"background": "rgba(59,75,84,1) !important",
>+						"box-shadow": "none"
>+					},
>+					".splashAbout": {
>+						"color": "rgba(27,177,153,1) !important"
>+					},
>+					".splashDetailedMessage": {
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".splashLoader": {
>+						"background": "rgba(59,75,84,1) !important",
>+						"box-shadow": "none"
>+					},
>+					".splashLoadingImage": {
>+						"-webkit-animation": "rotateThis .5s infinite linear",
>+						"animation": "rotateThis .5s infinite linear",
>+						"background": "none",
>+						"border": "2px solid #00b299",
>+						"border-radius": "50%",
>+						"border-right-color": "transparent",
>+						"display": "inline-block",
>+						"height": "20px",
>+						"margin": "0",
>+						"opacity": ".4",
>+						"width": "20px"
>+					},
>+					".splashLoadingImage.initial": {
>+						"border-width": "4px",
>+						"height": "40px",
>+						"width": "40px"
>+					},
>+					".splashMessage": {
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".splashVerbal": {
>+						"color": "rgba(27,177,153,1) !important"
>+					},
>+					".split": {
>+						"background": "rgba(59,75,84,1)",
>+						"width": "4px"
>+					},
>+					".splitThumb": {
>+						"background": "rgba(59,75,84,1)"
>+					},
>+					".status": {
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".statusContainer": {
>+						"background": "rgba(59,75,84,1)",
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".statusLight": {
>+						"background": "lightgray"
>+					},
>+					".statusLight.statusLightAmber": {
>+						"background": "#FFE141"
>+					},
>+					".statusLight.statusLightGreen": {
>+						"background": "#13dd6d"
>+					},
>+					".statusLight.statusLightProgress": {
>+						"background": "transparent",
>+						"border-color": "lightgray",
>+						"border-top-color": "transparent"
>+					},
>+					".statusLight.statusLightRed": {
>+						"background": "#C1272D"
>+					},
>+					".textviewTooltip": {
>+						".commandButton": {
>+							"background-color": "inherit",
>+							"border": "1px solid #325C80",
>+							"border-color": "rgba(38,52,63,1)",
>+							"color": "white",
>+							"margin-bottom": "2px"
>+						},
>+						"color": "rgba(211,211,211,1)"
>+					},
>+					".titleActionContainer": {
>+						"background": "rgba(59,75,84,1) !important",
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".tooltip": {
>+						"background-color": "rgba(27,177,153,1) !important",
>+						"border-width": "1px",
>+						"border-style": "solid",
>+						"border-color": "rgba(27,177,153,1)",
>+						"color": "rgba(211,211,211,1) !important",
>+						"h2": {
>+							"color": "rgba(211,211,211,1) !important"
>+						},
>+						".navlinkonpage": {
>+							"background-color": "rgba(27,177,153,1) !important",
>+							"color": "rgba(211,211,211,1) !important"
>+						},
>+						".operationError": {
>+							"color": "rgba(211,211,211,1) !important"
>+						}
>+					},
>+					".tooltipTailFromabove:after": {
>+						"border-top-color": "rgba(27,177,153,1)"
>+					},
>+					".tooltipTailFromabove:before": {
>+						"border-top-color": "rgba(27,177,153,1)"
>+					},
>+					".tooltipTailFrombelow:after": {
>+						"border-bottom-color": "rgba(27,177,153,1)"
>+					},
>+					".tooltipTailFrombelow:before": {
>+						"border-bottom-color": "rgba(27,177,153,1)"
>+					},
>+					".tooltipTailFromleft:after": {
>+						"border-left-color": "rgba(27,177,153,1)"
>+					},
>+					".tooltipTailFromleft:before": {
>+						"border-left-color": "rgba(27,177,153,1)"
>+					},
>+					".tooltipTailFromright:after": {
>+						"border-right-color": "rgba(27,177,153,1)"
>+					},
>+					".tooltipTailFromright:before": {
>+						"border-right-color": "rgba(27,177,153,1)"
>+					},
>+					".treeIterationCursorRow": {
>+						"background-color": "rgba(27,177,153,0.25)"
>+					},
>+					".treeIterationCursorRow_Dotted": {
>+						"background-color": "rgba(27,177,153,0.25)"
>+					},
>+					".workingTarget": {
>+						"background-color": "rgba(255,255,255,1)"
>+					},
>+					".commandImage.dropdownTrigger": {
>+						"color": "rgba(255,255,255,1)"
>+					},
>+					".dropdownMenuItem": {
>+						"color": "rgba(59,75,84,1)"
>+					},
>+					".pageToolbar": {
>+						".dropdownTrigger:not(.dropdownDefaultButton)": {
>+							"color": "rgba(59,75,84,1)"
>+						}
>+					},
>+					".primaryButton:hover": {
>+						".primaryButton:focus": {
>+							"background": "rgba(27,177,153,1)",
>+							"border-color": "rgba(27,177,153,1)"
>+						}
>+					}
>+				}
>+			};
>+			this.styles.push(orionPage);
> 		}
> 		
> 		function getStyles(){
>@@ -213,105 +858,37 @@ define([
> 		ThemeData.prototype.styles = [];
> 		ThemeData.prototype.getStyles = getStyles;
> 		
>+		function getProtectedThemes() {
>+			return ["lightPage", "orionPage"]; //$NON-NLS-1$ //$NON-NLS-0$
>+		}
>+
>+		ThemeData.prototype.getProtectedThemes = getProtectedThemes;
> 		
> 		function getThemeStorageInfo(){
> 			return {
> 				storage:'/themes',
>-				styleset:'styles',
>-				defaultTheme:'Orion2014',
>-				selectedKey: 'selected',
>+				styleset:'containerStyles',
>+				defaultTheme: 'lightPage',
>+				selectedKey: 'containerTheme',
> 				version: THEMES_VERSION
> 			};
> 		}
>-
>-		ThemeData.prototype.getThemeStorageInfo = getThemeStorageInfo;
>-
>-		function getViewData(){
> 		
>-			var TOP = 10;
>-			var LEFT = 10;
>-			var UI_SIZE = 350;
>-			var BANNER_HEIGHT = 32;
>-			var NAV_HEIGHT = 29;
>-			var CONTENT_TOP = TOP + BANNER_HEIGHT + NAV_HEIGHT;
>-		
>-			var dataset = {};
>-			dataset.top = TOP;
>-			dataset.left = LEFT;
>-			dataset.width = UI_SIZE;
>-			dataset.height = UI_SIZE;
>-			
>-			dataset.shapes = [ 
>-								{ type:'RECTANGLE', 	name: messages["Navigation Bar"],		x:LEFT,		y:TOP,					width:UI_SIZE,	height: BANNER_HEIGHT, family:'navbar', fill: '#333', order:1 },
>-								{ type:'TEXT',		name: messages["Navigation Text"],	 label:'UserName',	x:LEFT + UI_SIZE - 70, y:TOP + 20, family:'navtext', fill: '#bfbfbf', font: '8pt sans-serif'},
>-								{ type:'ROUNDRECTANGLE', name: messages["Search Box"],	x:LEFT + UI_SIZE - 145,	y:TOP + 10, width: 70,	height: 12, family:'search', fill: '#444', order:3 },
>-								{ type:'RECTANGLE', name: messages["Tool Panel"],	x:LEFT + UI_SIZE * 0.4, y:CONTENT_TOP, width:UI_SIZE * 0.6 -1, height:30, family:'toolpanel', fill: 'white', order:4 },
>-								{ type:'RECTANGLE', name: messages["Selection Bar"],	x:LEFT + UI_SIZE * 0.4 + 5, y:CONTENT_TOP + 62, width:UI_SIZE * 0.6 -10, height:20, family:'selection', fill: '#FEC', order:7 },
>-							   	{ type:'RECTANGLE', 	name: messages["Location"],	x:LEFT,		y:TOP + BANNER_HEIGHT, 	width:UI_SIZE,	height: NAV_HEIGHT, family:'location', fill: '#efefef', order:8 },
>-								{ type:'TEXT',		name: messages["Navigation Text"],	 label:'Navigator',	x:LEFT + 50, y: TOP + 20, family:'navtext', fill: '#bfbfbf', font: '8pt sans-serif', order:2 },
>-							  	{ type:'TEXT',		name: messages["Content"],	 label:'Breadcrumb',	x:LEFT + 5, y:TOP + BANNER_HEIGHT + 18, family:'content', fill: '#3087B3', font: '8pt sans-serif' },
>-								{ type:'TEXT',		name: messages["Content"],	 label:'/',	x:LEFT + 68, y:TOP + BANNER_HEIGHT + 18, family:'content', fill: '#3087B3', font: '8pt sans-serif', order:9 },
>-								{ type:'TEXT',		name: messages["Content"],	 label:'Location',	x:LEFT + 74, y:TOP + BANNER_HEIGHT + 18, family:'content', fill: '#3087B3', font: '8pt sans-serif' },
>-								{ type:'RECTANGLE', name: messages["Main Panel"],	x:LEFT + UI_SIZE * 0.4, y:CONTENT_TOP + 30, width:UI_SIZE * 0.6 -1, height:UI_SIZE - CONTENT_TOP + TOP -31, family:'mainpanel', fill: 'white', order:6 },
>-								{ type:'ROUNDRECTANGLE', name: messages["Button"],	x:LEFT + UI_SIZE * 0.4 + 5, y:CONTENT_TOP + 5, width:37, height:20, family:'button', fill: '#EFEFEF', order:11 },
>-								{ type:'TEXT',		name: messages["Button Text"],	 label:'Button',	x:LEFT + UI_SIZE * 0.4 + 8, y:CONTENT_TOP + 19, family:'navbar', fill: '#333', font: '8pt sans-serif' },
>-								{ type:'TRIANGLE',	name:'userMenu', x1:LEFT + UI_SIZE - 7, y1:TOP + 14, x2:LEFT + UI_SIZE - 13, y2:TOP + 14, x3:LEFT + UI_SIZE - 10, y3:TOP + 19, family:'userMenu', fill: '#BFBFBF' },
>-								{ type:'TRIANGLE',	name:'userMenu', x1:LEFT + 10, y1:CONTENT_TOP + 17, x2:LEFT + 16, y2:CONTENT_TOP + 17, x3:LEFT + 13, y3:CONTENT_TOP + 22, family:'userMenu', fill: '#BFBFBF' },
>-								{ type:'TEXT',		name: messages["Section Text"],	 label:'Section',	x:LEFT + 20, y:CONTENT_TOP + 23, family:'navbar', fill: '#333', font: '8pt sans-serif' },
>-								{ type:'LINE', 		name: messages["Line Color"], x1:LEFT + UI_SIZE * 0.4, y1:CONTENT_TOP + 30, x2:LEFT + UI_SIZE, y2:CONTENT_TOP + 30, linewidth:2, fill:'#DEDEDE' },
>-								{ type:'LINE', 		name: messages["Line Color"], x1:LEFT + UI_SIZE * 0.4, y1:CONTENT_TOP, x2:LEFT + UI_SIZE * 0.4, y2:TOP + UI_SIZE, linewidth:2, fill:'#DEDEDE'},
>-								{ type:'LINE', 		name: messages["Line Color"], x1:LEFT + 10, y1:CONTENT_TOP + 29, x2:LEFT + UI_SIZE * 0.4 - 10, y2:CONTENT_TOP + 29, linewidth:2, fill:'#DEDEDE' },
>-								{ type:'RECTANGLE', 	name: messages["Side Panel"],	x:LEFT,		y:CONTENT_TOP, 			width: UI_SIZE * 0.4,	height: UI_SIZE - CONTENT_TOP + TOP, family:'sidepanel', fill: '#FBFBFB', order:12 },
>-								{ type:'TRIANGLE',	name:'userMenu', x1:LEFT + UI_SIZE - 7, y1:TOP + 14, x2:LEFT + UI_SIZE - 13, y2:TOP + 14, x3:LEFT + UI_SIZE - 10, y3:TOP + 19, family:'userMenu', fill: '#BFBFBF' },
>-								{ type:'TRIANGLE',	name:'userMenu', x1:LEFT + 10, y1:CONTENT_TOP + 17, x2:LEFT + 16, y2:CONTENT_TOP + 17, x3:LEFT + 13, y3:CONTENT_TOP + 22, family:'userMenu', fill: '#BFBFBF' },
>-								{ type:'TEXT',		name: messages["Navigation Text"],	 label:'Navigator',	x:LEFT + 50, y: TOP + 20, family:'navtext', fill: '#bfbfbf', font: '8pt sans-serif', order:2 },
>-								{ type:'TRIANGLE',	name:'userMenu', x1:LEFT + UI_SIZE - 7, y1:TOP + 14, x2:LEFT + UI_SIZE - 13, y2:TOP + 14, x3:LEFT + UI_SIZE - 10, y3:TOP + 19, family:'userMenu', fill: '#BFBFBF' },
>-								{ type:'TRIANGLE',	name:'userMenu', x1:LEFT + 10, y1:CONTENT_TOP + 17, x2:LEFT + 16, y2:CONTENT_TOP + 17, x3:LEFT + 13, y3:CONTENT_TOP + 22, family:'userMenu', fill: '#BFBFBF' }
>-			];
>-			
>-			
>-			for( var count=0; count < 3; count++ ){
>-					
>-				/* Section Items */
>-					
>-				dataset.shapes.push( { type:'TEXT', name: messages["Content"], label:'org.eclipse.orion.content', x: LEFT + UI_SIZE * 0.4 + 20, y:CONTENT_TOP + 56 + ( 20 * count ), fill: '#3087B3', family:'content' } );
>-			}
>-			
>-			for( var count=0; count < 3; count++ ){
>-					
>-				/* Section Items */
>-					
>-				dataset.shapes.push( { type:'TEXT', name: messages["Content"], label:'Item', x:LEFT + 15, y:CONTENT_TOP + 44 + ( 20 * count ), fill: '#3087B3', family:'content' } );
>-			}
>-			
>-			for( var twisty = 0; twisty < 3; twisty++ ){
>-			
>-				dataset.shapes.push( { type:'TRIANGLE',	name:'twisty', 
>-				x1: LEFT + UI_SIZE * 0.4 + 10, y1:CONTENT_TOP + 50 + (twisty*20), 
>-				x2:LEFT + UI_SIZE * 0.4 + 15, y2: CONTENT_TOP + 53 + (twisty*20), 
>-				x3:LEFT + UI_SIZE * 0.4 + 10, y3: CONTENT_TOP + 56 + (twisty*20), 
>-				family:'navbar', fill: '#333' } );
>-			}
>-			
>-			dataset.shapes.push( { type:'IMAGE', 		name:'logo', x: LEFT + 5, y:TOP + 8, source: '../../images/orion-transparent.png', family:'logo' } );
>-			
>-			return dataset;
>-		}
>+		ThemeData.prototype.getThemeStorageInfo = getThemeStorageInfo;
> 
>-		ThemeData.prototype.getViewData = getViewData;
> 		
>-		function processSettings( settings ){
>+		function processSettings(settings){
> 			var sheetMaker = new ThemeSheetWriter.ThemeSheetWriter();
>-			var themeClass = "orionTheme";
>+			var themeClass = "orionPage";
> 			var theme = new mTextTheme.TextTheme.getTheme(themeClass);
>-			theme.setThemeClass(themeClass, sheetMaker.getSheet( settings ));
>+			theme.setThemeClass(themeClass, sheetMaker.getSheet(themeClass, settings ));
> 		}
> 		
> 		ThemeData.prototype.processSettings = processSettings;
> 
> 		return{
> 			ThemeData:ThemeData,
>-			getStyles:getStyles
>+			getStyles:getStyles,
> 		};
> 	}
>-);
>\ No newline at end of file
>+);
>diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js
>index 4d9cf53..b1f7d63 100644
>--- a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js
>+++ b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js
>@@ -7,381 +7,55 @@
>  * License v1.0 (http://www.eclipse.org/org/documents/edl-v10.html). 
>  * 
>  * Contributors: Anton McConville - IBM Corporation - initial API and implementation
>+ * 				 Casey Flynn - Google Inc - Refactor for new styles.
>  ******************************************************************************/
> /*eslint-env browser, amd*/
> 
>-define(['orion/widgets/themes/ThemeClass'], 
>-	function(ThemeClass) {
>-		
>-		// These values are used to override various themeable element -> color mappings provided by theme data.
>-		var navbar = 'white';
>-		var button = '#777777';
>-		var location = '#EFEFEF';
>-		var selection = '#cedce7';
>-		var sidepanel = '#F7F7F7';
>-		var mainpanel = 'white';
>-		var navtext = '#bfbfbf';
>-		var content = '#3087B3';
>-		var search = '#444';
>-		var toolpanel = 'white';
>-		
>-		function ThemeSheetWriter(){}
>-		
>-		ThemeSheetWriter.prototype.navbar = navbar;
>-		ThemeSheetWriter.prototype.button = button;
>-		ThemeSheetWriter.prototype.location = location;
>-		ThemeSheetWriter.prototype.selection = selection;
>-		ThemeSheetWriter.prototype.sidepanel = sidepanel;
>-		ThemeSheetWriter.prototype.mainpanel = mainpanel;
>-		ThemeSheetWriter.prototype.navtext = navtext;
>-		ThemeSheetWriter.prototype.content = content;
>-		ThemeSheetWriter.prototype.search = search;
>-		ThemeSheetWriter.prototype.toolpanel = toolpanel;
>-		
>-		function writeNavigationStyle(){
>-		
>-			var styleBlock = '';
>-		
>-			var styles = [];
>-		
>-			var orionPage = new ThemeClass.ThemeClass( 'orionPage' );
>-			orionPage.style.backgroundColor = '#fdfdfd';
>-			orionPage.style.width = '100%';
>-			orionPage.style.height = '100%';
>-			
>-			styles.push( orionPage );
>-			
>-			var topRowBanner = new ThemeClass.ThemeClass( 'topRowBanner' );
>-			topRowBanner.style.margin = '0';
>-			topRowBanner.style.border = '0';
>-			topRowBanner.style.backgroundColor = this.navbar;
>-//			topRowBanner.style.background = 'linear-gradient(to bottom, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#1b1b1b 100%)';
>-			/* topRowBanner.style.borderBottom = '1px solid #dddddd'; */
>-			topRowBanner.style.borderBottom = "none";
>-			topRowBanner.style.boxShadow = "0 2px 2px 0 rgba(0, 0, 0, 0.1),0 1px 0 0 rgba(0, 0, 0, 0.1)";
>-			topRowBanner.style.zIndex = "100";
>-			
>-			styles.push( topRowBanner );
>-			
>-			var a = new ThemeClass.ThemeClass( 'a' );
>-			a.style.textDecoration = 'none';
>-			a.style.color = this.content;
>-			
>-			styles.push( a );
>-
>-			var navlink = new ThemeClass.ThemeClass( 'navlink' );
>-			navlink.style.display = 'inline-block';
>-			navlink.style.padding = '2px';
>-			navlink.style.color = this.content;
>-			navlink.style.verticalAlign = 'bottom';
>-			
>-			styles.push( navlink );
>-
>-
>-		/*	var aVisited = new ThemeClass.ThemeClass( 'a:visited' );
>-			aVisited.style.color = this.content;
>-			
>-			styles.push( aVisited );
>-				
>-			var aActive = new ThemeClass.ThemeClass( 'a:active' );
>-			aActive.style.color = this.content;
>-			
>-			styles.push( aActive );
>-			
>-			var aHover = new ThemeClass.ThemeClass( 'a:hover' );
>-			aHover.style.textDecoration = 'underline';
>-			aHover.style.color = this.content;
>-			
>-			styles.push( aHover ); */
>-			
>-			var primaryNav = new ThemeClass.ThemeClass( 'primaryNav' );
>-			primaryNav.style.color = this.navtext;
>-			primaryNav.style.fontSize = '8pt';
>-			primaryNav.style.fontWeight = 'normal';
>-			primaryNav.style.paddingTop = '0';
>-			primaryNav.style.verticalAlign = 'baseline';
>-			
>-			styles.push( primaryNav );
>-			
>-			var primaryNavA = new ThemeClass.ThemeClass( 'primaryNav a' );
>-			primaryNavA.style.fontSize = '8pt'; 
>-			primaryNavA.style.color = this.navtext;
>-			primaryNavA.style.marginRight = '6px';
>-			primaryNavA.style.marginLeft = '6px'; 
>-			primaryNavA.style.verticalAlign = 'baseline';
>-			primaryNavA.style.textDecoration = 'none';
>-			
>-			styles.push( primaryNavA );
>-			
>-			var primaryNavAhover = new ThemeClass.ThemeClass( 'primaryNav a:hover' );
>-			primaryNavAhover.style.color = '#bfbfbf';
>-			primaryNavAhover.style.cursor = 'hand';
>-			primaryNavAhover.style.color = 'white';
>-			primaryNavAhover.style.fontWeight = 'normal';
>-
>-			styles.push( primaryNavAhover );
>-			
>-			for( var s in styles ){
>-				styleBlock = styleBlock + styles[s].toString();
>-			}
>-						     
>-			return styleBlock;
>-		}
>-		
>-		ThemeSheetWriter.prototype.writeNavigationStyle = writeNavigationStyle;
>-		
>-		function writeLocationStyle(){
>-		
>-			var styleBlock = '';
>-		
>-			var styles = [];
>-			
>-			var titleArea = new ThemeClass.ThemeClass( 'titleArea' );
>-			titleArea.style.margin = '0';
>-			titleArea.style.paddingTop = '5px';
>-		    titleArea.style.border = '0';
>-		    titleArea.style.background = this.location;
>-			titleArea.style.background = '-webkit-gradient(linear, left top, left bottom, color-stop(0%,' + this.location + '), color-stop(100%,' + this.location + '))';
>-		    titleArea.style.borderBottom = '1px solid ' + this.location ;
>-		    titleArea.style.minHeight = '20px';
>-		    
>-		    styles.push( titleArea );
>-
>-			var breadcrumb = new ThemeClass.ThemeClass( 'breadcrumb' );
>-			breadcrumb.style.fontSize = '8pt';
>-			breadcrumb.style.textDecoration = 'none';
>-			breadcrumb.style.color = '#f1f1f2;';
>-			breadcrumb.style.paddingTop = '2px';
>-			
>-			styles.push( breadcrumb );
>-			
>-			var aBreadcrumbHover = new ThemeClass.ThemeClass( 'a.breadcrumb:hover' );
>-			aBreadcrumbHover.style.textDecoration = 'none';
>-			aBreadcrumbHover.style.borderBottom = '1px dotted';
>-			aBreadcrumbHover.style.color = '#F58B0F';
>-			aBreadcrumbHover.style.cursor = 'pointer';
>-			
>-			styles.push( aBreadcrumbHover );
>-
>-			var breadcrumbSeparator = new ThemeClass.ThemeClass( 'breadcrumbSeparator' );
>-			breadcrumbSeparator.style.fontSize = '8pt';
>-			breadcrumbSeparator.style.textDecoration = 'none';
>-			breadcrumbSeparator.style.color = this.separator;
>-			breadcrumbSeparator.style.fontWeight = 'bold';
>-			
>-			styles.push( breadcrumbSeparator );
>-			
>-			var currentLocation = new ThemeClass.ThemeClass( 'currentLocation' );
>-			currentLocation.style.fontWeight = 'bold';
>-			currentLocation.style.fontSize = '8pt';
>-			currentLocation.style.color = this.breadcrumb; //this.navbar; // should be a separate themeable item but hard coded for now.
>-			currentLocation.style.textDecoration = 'none';
>-			currentLocation.style.textWrap = 'normal';
>-			currentLocation.style.lineHeight = '10pt';
>-			
>-			styles.push( currentLocation );
>-			
>-			var currentLocationHover = new ThemeClass.ThemeClass( 'a.currentLocation:hover' );
>-			currentLocationHover.style.fontWeight = 'bold';
>-			currentLocationHover.style.fontSize = '10pt';
>-			currentLocationHover.style.color = '#666666';
>-			currentLocationHover.style.textDecoration = 'none';
>-			currentLocationHover.style.borderBottom = '0';
>-			
>-			styles.push( currentLocationHover );
>-			
>-			var navlinkonpage = new ThemeClass.ThemeClass( 'navlinkonpage' );
>-			navlinkonpage.style.color = this.content;
>-			navlinkonpage.style.verticalAlign = 'middle';
>-			
>-			styles.push( navlinkonpage );
>-			
>-			if (this.bannerProgress) {
>-				var progressIndicator = new ThemeClass.ThemeClass( 'topRowBanner .progressPane_running' );
>-				progressIndicator.style.borderColor = this.bannerProgress;
>-				styles.push( progressIndicator );
>-			}	
>-			
>-			for( var s in styles ){
>-				styleBlock = styleBlock + styles[s].toString();
>+define([],
>+	function() {
>+		function writeStyleString(themeClass, settings) {
>+			if (!settings || !settings.styles) {
>+				return "";
> 			}
> 			
>-			return styleBlock;
>-		}
>-		
>-		ThemeSheetWriter.prototype.writeLocationStyle = writeLocationStyle;
>-		
>-		function writeSidePanelStyle(){
>-		
>-		}
>-		
>-		function writeButtonStyle(){
>-		
>-			var styleBlock = '';
>-			var styles = [];
>-		
>-			var commandButton = new ThemeClass.ThemeClass( 'commandButton' );
>-			commandButton.style.color = '#666';
>-			commandButton.style.border = '1px solid #dedede'; // see https://bugs.eclipse.org/bugs/show_bug.cgi?id=386702#c2 
>-			commandButton.style.backgroundColor = '#ddd';//this.button;
>-			commandButton.style.textAlign = 'center';
>-			commandButton.style.verticalAlign = 'middle';
>-			commandButton.style.cursor = 'pointer';
>-		    commandButton.style.display = 'inline-block';
>-		    commandButton.style.padding = '4px 6px';
>-		    commandButton.style.borderRadius = '3px';
>-		    commandButton.style.lineHeight = '12px';
>-			commandButton.style.fontSize = '9pt';
>-			commandButton.style.userSelect = 'none';
>-			//	-webkit-touch-callout: none;
>-			//	-webkit-user-select: none;
>-			//	-khtml-user-select: none;
>-			//	-moz-user-select: none;
>-			//	-ms-user-select: none;
>-			styles.push( commandButton );
>-			
>-			var commandButtonOver = new ThemeClass.ThemeClass( 'commandButton:over' );
>-			commandButtonOver.style.backgroundColor = '#e6e6e6';
>-			commandButtonOver.style.border = '1px solid #808080';
>-			styles.push( commandButtonOver );
>+			var parseStyles = function(object, ancestors, className, result) {
>+				if (!ancestors) {
>+					if (className) {
>+						parseStyles(object, "." + className, className, result);
>+					} 
>+					return;
>+				}
>+				var localResult = [];
>+				var keys = Object.keys(object);
>+				keys.forEach(function(key) {
>+					var value = object[key];
>+					if (typeof value === "string") {
>+						localResult.push("\t" + key + ": " + value + ";"); 
>+					} else {
>+						parseStyles(
>+							value,
>+							className === key ? ancestors : ancestors + " " +  key,
>+							className,
>+							result);
>+					}
>+				});
>+				if (localResult.length) {
>+					result.push(ancestors +  " {");
>+					result.push.apply(result, localResult);
>+					result.push("}");
>+				}
>+			};
> 
>-			var commandMenu = new ThemeClass.ThemeClass( 'commandMenu' );
>-			commandMenu.style.color = '#222';
>-			commandMenu.style.display = 'inline-block';
>-			commandMenu.style.verticalAlign = 'baseline';
>-			commandMenu.style.margin = '0';
>-			commandMenu.style.fontSize = '8pt';
>-			commandMenu.style.fontWeight = 'normal';
>-			commandMenu.style.border = '1px solid #dedede'; // see https://bugs.eclipse.org/bugs/show_bug.cgi?id=386702#c2
>-			commandMenu.style.backgroundColor = '#efefef';
>-		    commandMenu.style.cursor = 'pointer';
>-		    commandMenu.style.borderRadius = '1px';
>-			styles.push( commandMenu );
>-	
>-			var commandMenuItem = new ThemeClass.ThemeClass( 'commandMenuItem' );
>-			commandMenuItem.style.border = '0';
>-			commandMenuItem.style.padding = '0';
>-			commandMenuItem.style.margin = '0';
>-			styles.push( commandMenuItem );
>-			
>-			for( var s in styles ){
>-				styleBlock = styleBlock + styles[s].toString();
>-			}
>-			
>-			return styleBlock;
>-		}
>-		
>-		ThemeSheetWriter.prototype.writeButtonStyle = writeButtonStyle;
>-		
>-		function writeMainStyle(){
>-		
>-			var styleBlock = '';
>-		
>-			var styles = [];
>-			
>-			var searchbox = new ThemeClass.ThemeClass( 'searchbox' );
>-			searchbox.style.backgroundImage = 'url(../images/core_sprites.png)';
>-		    searchbox.style.backgroundRepeat = 'no-repeat'; 
>-		    searchbox.style.backgroundPosition = '4px -297px'; 
>-			searchbox.style.width = '12px'; 
>-			searchbox.style.height = '12px';
>-		    searchbox.style.backgroundColor = this.search;
>-			searchbox.style.border = '1px solid ' + this.search;
>-			searchbox.style.fontSize = '11px';
>-			searchbox.style.width = '15em';
>-			searchbox.style.height = '16px';
>-			searchbox.style.borderRadius = '10px'; /* 10px */
>-			searchbox.style.color = '#999';
>-			searchbox.style.padding = '0';
>-			searchbox.style.paddingLeft = '20px';
>-			searchbox.style.marginLeft = '5px';
>-			searchbox.style.marginTop = '6px !important';
>-			searchbox.style.font = '7pt Lucida Sans Unicode,Lucida Grande,Verdana,Arial,Helvetica,Myriad,Tahoma,clean,sans-serif !important';
>-			
>-			styles.push( searchbox );
>-			
>-			var searchboxFocus = new ThemeClass.ThemeClass( 'searchbox:focus' );
>-			searchboxFocus.style.color = 'white';
>-			searchboxFocus.style.outline = 'none';
>-			
>-			styles.push( searchboxFocus );
>-			
>-			var checkedRow = new ThemeClass.ThemeClass( 'checkedRow' );
>-			checkedRow.style.cssText = 'background-color:' + this.selection + ' !important;';
>-			
>-			styles.push( checkedRow );
>-			
>-			var navItemSelected = new ThemeClass.ThemeClass( 'navbar-item-selected' );
>-			navItemSelected.style.background = this.selection;
>-			navItemSelected.style.color = this.content;
>-			
>-			styles.push( navItemSelected );
>-			
>-			var auxpane = new ThemeClass.ThemeClass( 'auxpane' );
>-			auxpane.style.border = '0';
>-			auxpane.style.background = this.sidepanel;
>-			styles.push( auxpane );
>-			
>-			var mainpane = new ThemeClass.ThemeClass( 'mainpane' );
>-			mainpane.style.background = this.mainpanel;
>-			mainpane.style.border = 0;
>-			
>-			styles.push( mainpane );
>-			
>-			var mainToolbar = new ThemeClass.ThemeClass( 'mainToolbar' );
>-			mainToolbar.style.background = this.toolpanel;
>-			styles.push( mainToolbar );
>-	
>-			for( var s in styles ){
>-				styleBlock = styleBlock + styles[s].toString();
>-			}
>-			
>-			return styleBlock;
>+			var result = [""];
>+			parseStyles(settings.styles, "", themeClass, result);
>+			return result.join("\n");
> 		}
> 		
>-		ThemeSheetWriter.prototype.writeMainStyle = writeMainStyle;
>-		
>-		function render( anchor ){
>-			console.log( this.writeNavigationStyle() );
>-			console.log( this.writeLocationStyle() );
>-			console.log( this.writeMainStyle() );
>-			console.log( this.writeButtonStyle() );
>-		}
>-		
>-		ThemeSheetWriter.prototype.render = render;
>+		function ThemeSheetWriter(){}
> 		
>-		function getSheet( settings ){
>-			//TODO - temporarily disabled
>-			return "";
>-//			if( settings.navbar.value ){	
>-//				this.navbar = settings.navbar.value;
>-//				this.button = settings.button.value;
>-//				this.location = settings.location.value;
>-//				this.selection = settings.selection.value;
>-//				this.sidepanel = settings.sidepanel.value;
>-//				this.mainpanel = settings.mainpanel.value;
>-//				this.navtext = settings.navtext.value;
>-//				this.search = settings.search.value;
>-//				this.content = settings.content.value;
>-//				this.toolpanel = settings.toolpanel.value;
>-//				this.bannerProgress = settings.bannerProgress.value;
>-//			}else{
>-//				this.navbar = settings.navbar;
>-//				this.button = settings.button;
>-//				this.location = settings.location;
>-//				this.selection = settings.selection;
>-//				this.sidepanel = settings.sidepanel;
>-//				this.mainpanel = settings.mainpanel;
>-//				this.navtext = settings.navtext;
>-//				this.search = settings.search;
>-//				this.content = settings.content;
>-//				this.toolpanel = settings.toolpanel;
>-//				this.bannerProgress = settings.bannerProgress;
>-//			}
>-//			
>-//			var sheet = this.writeNavigationStyle() + this.writeLocationStyle() + this.writeMainStyle() + this.writeButtonStyle();
>-//			
>-//			return sheet;
>+		function getSheet(themeClass, settings ){
>+			var sheet = writeStyleString(themeClass, settings);
>+			return sheet;
> 		}
> 		
> 		ThemeSheetWriter.prototype.getSheet = getSheet;
>@@ -391,4 +65,4 @@ define(['orion/widgets/themes/ThemeClass'],
> 		};
> 
> 	}
>-);
>+);

Flags:

caseyflynn: review?

Actions: View | Diff

Attachments on bug 507788: 265724 | 265758