Merge branch 'master' of ssh://git.eclipse.org/gitroot/orion/org.eclipse.orion.client
diff --git a/bundles/org.eclipse.orion.client.core/web/css/breadcrumbs.css b/bundles/org.eclipse.orion.client.core/web/css/breadcrumbs.css
index c5b1134..1e14227 100644
--- a/bundles/org.eclipse.orion.client.core/web/css/breadcrumbs.css
+++ b/bundles/org.eclipse.orion.client.core/web/css/breadcrumbs.css
@@ -19,7 +19,7 @@
 .breadcrumbSeparator {
 	font-size: 8pt;
 	text-decoration: none;
-	color: #808080;
+	color: #333;
 	font-weight: bold;
 }
 
diff --git a/bundles/org.eclipse.orion.client.core/web/css/commands.css b/bundles/org.eclipse.orion.client.core/web/css/commands.css
index bacfe2b..8e7cd97 100644
--- a/bundles/org.eclipse.orion.client.core/web/css/commands.css
+++ b/bundles/org.eclipse.orion.client.core/web/css/commands.css
@@ -51,50 +51,7 @@
 	font-weight:bold;
 }
 
-.commandButton {
-	color: #222;
-	border: 1px solid #dedede;
-	background-color: #efefef;
-	text-align: center;
-	vertical-align: baseline;
-    cursor: pointer;
-    display: inline-block;
-    padding:6px;
-    padding-top: 4px; /* To align with Command Menu */
-    border-radius:1px;
-    line-height: 12px;
-    font-size:8pt;
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
 
-.commandButtonOver {
-	background-color: #e6e6e6;
-	border: 1px solid #808080;
-}
-
-.commandMenu {
-    color: #222;
-	display: inline-block;
-	vertical-align: baseline;
-	margin: 0;
-	font-size:8pt;
-	font-weight:normal;
-	border: 1px solid #dedede;
-	background-color: #efefef;
-    cursor: pointer;
-    border-radius:1px;
-}
-
-.commandMenuItem {
-	border: 0;
-	padding: 0;
-	margin: 0;
-}
 
 .commandMenuItemAnchor {
 	padding-right: 40px;
diff --git a/bundles/org.eclipse.orion.client.core/web/css/ide.css b/bundles/org.eclipse.orion.client.core/web/css/ide.css
index 401deb6..0e8c8c2 100644
--- a/bundles/org.eclipse.orion.client.core/web/css/ide.css
+++ b/bundles/org.eclipse.orion.client.core/web/css/ide.css
@@ -1,3 +1,5 @@
+@import "./theme.css";
+
 html {
   overflow-x: hidden; /* workaround to get rid of horizontal scrollbar */
   cursor: default;
@@ -10,12 +12,6 @@
 	min-width:900px;
 }
 
-.orionPage {
-	background-color: #fdfdfd;
-	width: 100%;
-	height: 100%;
-}
-
 h1 {
 	font-size:1.5em;
 	font-weight: bold;
@@ -35,25 +31,7 @@
 	margin-bottom: 4px;
 }
 
-a {
-	cursor: hand;
-	text-decoration: none;
-	color: #3087B3;
-}
 
-a:visited {
-	color: #3087B3;
-}
-
-a:active {
-	color: #3087B3;
-}
-
-a:hover {
-	cursor: hand;
-	text-decoration: underline;
-	color: #3087B3;
-}
 
 .layoutBlock {
 	clear: both;
@@ -128,29 +106,6 @@
 	margin-right:5px;
 }
 
-.primaryNav {
-	font-size: 8pt; /* 7pt */
-	font-weight:normal;
-	color: #BFBFBF;
-	padding-top: 6px;
-	vertical-align: baseline;
-}
-
-.primaryNav a {
-	font-size: 8pt; /* 7pt */
-	color: #BFBFBF;
-	margin-right: 6px;
-	margin-left: 6px; 
-	vertical-align: baseline;
-	text-decoration: none;
-}
-
-.primaryNav a:hover {
-	color: #bfbfbf;
-	cursor: hand;
-	color: white;
-	font-weight:normal;
-}
 
 .pageNav {
 	color: #808080;
@@ -338,15 +293,6 @@
 	color: black;
 }
 
-.auxpane {
-	border: 0;
-	background: #fbfbfb;
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#fbfbfb));
-	background: -moz-linear-gradient(top, #fbfbfb 0%, #fbfbfb 100%);
-    overflow-x: auto;
-    min-width: 200px;
-    padding-top: 16px;
-}
 
 .auxPadding {
 	padding-left: 8px;
@@ -530,27 +476,7 @@
 	padding-left: 8px;
 }
 
-.topRowBanner {
-	margin: 0;
-	border: 0;
-	background: #333;
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#333));
-	background: -moz-linear-gradient(top, #333 0%, #333 100%);
-/*	background: -webkit-linear-gradient(top, #7D7E7D 0%, #0E0E0E 100%);
-	background: -moz-linear-gradient(top, #7D7E7D 0%, #0E0E0E 100%);	Not sure about gradient - Linda to advise */
-	height: 28px;
-}
 
-.titleArea {
-    margin: 0;
-    padding-top:5px;
-    border: 0;
-    background: #EFEFEF;
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EFEFEF), color-stop(100%,#EFEFEF));
-    background: -moz-linear-gradient(top, #EFEFEF 0%, #EFEFEF 100%);
-    border-bottom: 1px solid #DEDEDE;
-    min-height:20px;
-}
 
 .slideContainer {
 	height: auto;
@@ -626,35 +552,7 @@
 	border: 1px solid #808080;
 }
 
-/* Searchbox in the top navigation area seems a difficult thing to 
-   get right. I've worked with a range of colors. What I notice is that
-   if the edges are curved, then it seems to need a lighter shade. That
-   draws more attention to the search box. It is more passive and fitting
-   if drawn with straight edges and a darker background */
 
-.searchbox {
-    background-image: url(../images/core_sprites.png);
-    background-repeat: no-repeat; 
-    background-position: 4px -297px; 
-    width: 12px; height: 12px;
-    background-color: #444;
-	border: 1px solid #222;
-	font-size: 11px;
-	width: 15em;
-	height: 16px;
-	border-radius: 10px; /* 10px */
-	color:#999;
-	padding:0;
-	padding-left:20px;
-	margin-left:5px;
-	margin-top:6px;
-	font: 7pt Lucida Sans Unicode,Lucida Grande,Verdana,Arial,Helvetica,Myriad,Tahoma,clean,sans-serif !important;
-}
-
-.searchbox:focus{
-	color: white;
-	outline:none;
-}
 
 .toolbarButton {
 	border: 0;
@@ -723,10 +621,6 @@
 	font-size: 1em;
 }
 
-.checkedRow {
-	background-color: #ffeecc !important; /* was e3e3e3 */
-}
-
 .testResult {
 	background-color: #444444 !important;
 	color: white;
diff --git a/bundles/org.eclipse.orion.client.core/web/css/theme.css b/bundles/org.eclipse.orion.client.core/web/css/theme.css
new file mode 100644
index 0000000..750afba
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/css/theme.css
@@ -0,0 +1,217 @@
+/* Page color */

+

+.orionPage {

+	background-color: #fdfdfd;

+	width: 100%;

+	height: 100%;

+}

+

+/* Top row/navigation banner */

+

+.topRowBanner {

+	margin: 0;

+	border: 0;

+	background: #333;

+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#333));

+	height: 28px;

+}

+

+a {

+	cursor: hand;

+	text-decoration: none;

+	color: #3087B3;

+}

+

+a:visited {

+	color: #3087B3;

+}

+

+a:active {

+	color: #3087B3;

+}

+

+a:hover {

+	cursor: hand;

+	text-decoration: underline;

+	color: #3087B3;

+}

+

+/* Navigation text */

+

+.primaryNav {

+	font-size: 8pt; /* 7pt */

+	font-weight:normal;

+	color: #BFBFBF;

+	padding-top: 6px;

+	vertical-align: baseline;

+}

+

+.primaryNav a {

+	font-size: 8pt; /* 7pt */

+	color: #BFBFBF;

+	margin-right: 6px;

+	margin-left: 6px; 

+	vertical-align: baseline;

+	text-decoration: none;

+}

+

+.primaryNav a:hover {

+	color: #bfbfbf;

+	cursor: hand;

+	color: white;

+	font-weight:normal;

+}

+

+/* Title area - the place for location/breadcrumbs */

+

+.titleArea {

+    margin: 0;

+    padding-top:5px;

+    border: 0;

+    background: #EFEFEF;

+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EFEFEF), color-stop(100%,#EFEFEF));

+    border-bottom: 1px solid #DEDEDE;

+    min-height:20px;

+}

+

+/* Row selection */

+

+.checkedRow {

+	background-color: #ffeecc !important; /* was e3e3e3 */

+}

+

+.navbar-item-selected {

+	background: #FEC;

+	color: black;

+}

+

+

+/* Breadcrumbs */

+

+.breadcrumb {

+	font-size: 8pt;

+	text-decoration: none;

+	color: #3087B3;

+	padding-top:2px;

+}

+

+a.breadcrumb:hover {

+	text-decoration: none;

+	border-bottom: 1px dotted;

+	color: #F58B0F;

+	cursor: pointer;

+}

+

+a.breadcrumb:visited {

+	color: #3087B3;

+}

+

+.breadcrumbSeparator {

+	font-size: 8pt;

+	text-decoration: none;

+	color: #333;

+	font-weight: bold;

+}

+

+.currentLocation {

+	font-weight: bold;

+	font-size: 8pt;

+	color: #444;

+	text-decoration: none;

+	text-wrap: normal;

+	line-height:10pt;

+}

+

+a.currentLocation:hover {

+	font-weight: bold;

+	font-size: 10pt;

+	color: #666666;

+	text-decoration: none;

+	border-bottom: 0;

+}

+

+.auxpane {

+	border: 0;

+	background: #fbfbfb;

+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#fbfbfb));

+	background: -moz-linear-gradient(top, #fbfbfb 0%, #fbfbfb 100%);

+    overflow-x: auto;

+    min-width: 200px;

+    padding-top: 16px;

+}

+

+

+/* Searchbox in the top navigation area seems a difficult thing to 

+   get right. I've worked with a range of colors. What I notice is that

+   if the edges are curved, then it seems to need a lighter shade. That

+   draws more attention to the search box. It is more passive and fitting

+   if drawn with straight edges and a darker background */

+

+.searchbox {

+    background-image: url(../images/core_sprites.png);

+    background-repeat: no-repeat; 

+    background-position: 4px -297px; 

+    width: 12px; height: 12px;

+    background-color: #444;

+	border: 1px solid #222;

+	font-size: 11px;

+	width: 15em;

+	height: 16px;

+	border-radius: 10px; /* 10px */

+	color:#999;

+	padding:0;

+	padding-left:20px;

+	margin-left:5px;

+	margin-top:6px !important;

+	font: 7pt Lucida Sans Unicode,Lucida Grande,Verdana,Arial,Helvetica,Myriad,Tahoma,clean,sans-serif !important;

+}

+

+.searchbox:focus{

+	color: white;

+	outline:none;

+}

+

+.commandButton {

+	color: #222;

+	border: 1px solid #dedede;

+	background-color: #efefef;

+	text-align: center;

+	vertical-align: baseline;

+    cursor: pointer;

+    display: inline-block;

+    padding:6px;

+    padding-top: 4px; /* To align with Command Menu */

+    border-radius:1px;

+    line-height: 12px;

+    font-size:8pt;

+	-webkit-touch-callout: none;

+	-webkit-user-select: none;

+	-khtml-user-select: none;

+	-moz-user-select: none;

+	-ms-user-select: none;

+	user-select: none;

+}

+

+.commandButtonOver {

+	background-color: #e6e6e6;

+	border: 1px solid #808080;

+}

+

+.commandMenu {

+    color: #222;

+	display: inline-block;

+	vertical-align: baseline;

+	margin: 0;

+	font-size:8pt;

+	font-weight:normal;

+	border: 1px solid #dedede;

+	background-color: #efefef;

+    cursor: pointer;

+    border-radius:1px;

+}

+

+.commandMenuItem {

+	border: 0;

+	padding: 0;

+	margin: 0;

+}
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.core/web/js-tests/pluginRegistry/testPlugin.html b/bundles/org.eclipse.orion.client.core/web/js-tests/pluginRegistry/testPlugin.html
index 54a1658..99367d8 100644
--- a/bundles/org.eclipse.orion.client.core/web/js-tests/pluginRegistry/testPlugin.html
+++ b/bundles/org.eclipse.orion.client.core/web/js-tests/pluginRegistry/testPlugin.html
@@ -2,26 +2,30 @@
 <html>
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-	<script type="text/javascript" src="../../org.dojotoolkit/dojo/dojo.js.uncompressed.js"></script>
-	<script type="text/javascript" src="../../orion/plugin.js"></script>
+	<script src="../../orion/Deferred.js"></script>
+	<script src="../../orion/plugin.js"></script>
 	<script>
+	/*global window orion*/
 		window.onload = function() {
 			var provider = new orion.PluginProvider();
-			provider.registerService(["test","orion.core.event"], {
+			provider.registerService(["test"], {
 				test: function(echo) {
 					return echo;
 				},
 				testPromise: function(echo) {
-					var d = new dojo.Deferred();
+					var d = new orion.Deferred();
 					window.setTimeout(function() {
 						d.progress("progress");
 						d.resolve(echo);
-					},0)
+					},0);
 					return d;
 				},
 				testEvent: function(name) {
 					this.dispatchEvent(name, name + "test");
-				}					
+				},
+				dispatchEvent: function(eventName) {
+					// the plugin infrastructure will chain this
+				}
 			}, {name : "echotest"});
 			provider.connect();
 		};
diff --git a/bundles/org.eclipse.orion.client.core/web/js-tests/pluginRegistry/testcase.js b/bundles/org.eclipse.orion.client.core/web/js-tests/pluginRegistry/testcase.js
index faa76aa..04fca19 100644
--- a/bundles/org.eclipse.orion.client.core/web/js-tests/pluginRegistry/testcase.js
+++ b/bundles/org.eclipse.orion.client.core/web/js-tests/pluginRegistry/testcase.js
@@ -97,7 +97,7 @@
 		var promise = pluginRegistry.installPlugin("testPlugin.html").then(function(plugin) {
 			var pluginInfo = {
 				location: plugin.getLocation(),
-				data: plugin.getData()
+				data: plugin.getHeaders()
 			};
 
 			assert.equal(pluginRegistry.getPlugins().length, 1);
@@ -213,8 +213,8 @@
 			pluginRegistry.addEventListener("pluginLoaded", function(plugin) {
 				try {
 					assert.ok(!!plugin, "plugin not null");
-					assert.equal(plugin.getData().services.length, 1);
-					assert.equal(plugin.getData().services[0].properties.name, "echotest");
+					assert.equal(plugin.getServiceReferences().length, 1);
+					assert.equal(plugin.getServiceReferences()[0].getProperty("name"), "echotest");
 					promise.resolve();
 				} catch(e) {
 					promise.reject(e);
@@ -301,8 +301,8 @@
 		pluginRegistry.addEventListener("pluginLoaded", function(plugin) {
 			try {
 				assert.ok(!!plugin, "plugin not null");
-				assert.equal(plugin.getData().services.length, 1);
-				assert.equal(plugin.getData().services[0].properties.name, "echotest");
+					assert.equal(plugin.getServiceReferences().length, 1);
+					assert.equal(plugin.getServiceReferences()[0].getProperty("name"), "echotest");
 				promise.resolve();
 			} catch(e) {
 				promise.reject(e);
diff --git a/bundles/org.eclipse.orion.client.core/web/js-tests/serviceRegistry/testcase.js b/bundles/org.eclipse.orion.client.core/web/js-tests/serviceRegistry/testcase.js
index e23dcf4..42cbee3 100644
--- a/bundles/org.eclipse.orion.client.core/web/js-tests/serviceRegistry/testcase.js
+++ b/bundles/org.eclipse.orion.client.core/web/js-tests/serviceRegistry/testcase.js
@@ -11,7 +11,7 @@
 /*global define console setTimeout*/
 
 
-define(["orion/assert", "orion/serviceregistry"], function(assert, mServiceRegistry) {
+define(["orion/assert", "orion/serviceregistry", "orion/EventTarget"], function(assert, mServiceRegistry, EventTarget) {
 	var tests = {};
 	tests.testRegisterAndGetService = function() {
 		var count = 0;
@@ -129,7 +129,12 @@
 				return count + 1;
 			}
 		};
-		var registration = registry.registerService(["testEvents", "orion.core.event"], impl);
+		var eventTarget = new EventTarget();
+		impl.dispatchEvent = eventTarget.dispatchEvent.bind(eventTarget);
+		impl.addEventListener = eventTarget.addEventListener.bind(eventTarget);
+		impl.removeEventListener = eventTarget.removeEventListener.bind(eventTarget);		
+		
+		var registration = registry.registerService(["testEvents"], impl);
 		assert.equal(1, serviceAddedCount);
 		assert.equal(0, serviceRemovedCount);
 
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/EventTarget.js b/bundles/org.eclipse.orion.client.core/web/orion/EventTarget.js
new file mode 100644
index 0000000..7b6085e
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/orion/EventTarget.js
@@ -0,0 +1,89 @@
+/*******************************************************************************

+ * @license

+ * Copyright (c) 2012 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:

+ *     IBM Corporation - initial API and implementation

+ *******************************************************************************/

+/*global define console */

+

+define(function() {

+	/**

+	 * Creates an Event Target

+	 *

+	 * @name orion.EventTarget

+	 * @class Base for creating an Orion event target

+	 */

+

+	function EventTarget() {

+		this._namedlisteners = {};

+	}

+

+	EventTarget.prototype = /** @lends orion.EventTarget.prototype */

+	{

+		/**

+		 * Dispatches a named event along with an arbitrary set of arguments. Any arguments after <code>eventName</code>

+		 * will be passed to the event listener(s).

+		 * @param {String} eventName The event name

+		 */

+		dispatchEvent: function(eventName) {

+			var listeners = this._namedlisteners[eventName];

+			if (listeners) {

+				for (var i = 0; i < listeners.length; i++) {

+					try {

+						var args = Array.prototype.slice.call(arguments, 1);

+						listeners[i].apply(null, args);

+					} catch (e) {

+						console.log(e); // for now, probably should dispatch an

+						// ("error", e)

+					}

+				}

+			}

+		},

+

+		/**

+		 * Adds an event listener for a named event

+		 * @param {String} eventName The event name

+		 * @param {Function} listener The function called when an event occurs

+		 */

+		addEventListener: function(eventName, listener) {

+			this._namedlisteners[eventName] = this._namedlisteners[eventName] || [];

+			this._namedlisteners[eventName].push(listener);

+		},

+

+		/**

+		 * Removes an event listener for a named event

+		 * @param {String} eventName The event name

+		 * @param {Function} listener The function called when an event occurs

+		 */

+		removeEventListener: function(eventName, listener) {

+			var listeners = this._namedlisteners[eventName];

+			if (listeners) {

+				for (var i = 0; i < listeners.length; i++) {

+					if (listeners[i] === listener) {

+						if (listeners.length === 1) {

+							delete this._namedlisteners[eventName];

+						} else {

+							listeners.splice(i, 1);

+						}

+						break;

+					}

+				}

+			}

+		}

+	};

+	EventTarget.prototype.constructor = EventTarget;

+	

+	EventTarget.attach = function(obj) {

+		var eventTarget = new EventTarget();

+		obj.dispatchEvent = eventTarget.dispatchEvent.bind(eventTarget);

+		obj.addEventListener = eventTarget.addEventListener.bind(eventTarget);

+		obj.removeEventListener = eventTarget.removeEventListener.bind(eventTarget);

+	};

+	

+	return EventTarget;

+});
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/config.js b/bundles/org.eclipse.orion.client.core/web/orion/config.js
index ca07885..82196de 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/config.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/config.js
@@ -33,7 +33,7 @@
 	var self = this;
 	var pluginLoadedListener = function(plugin) {
 		plugin.getServiceReferences().forEach(function(serviceRef) {
-			if (serviceRef.getName() === MANAGED_SERVICE) {
+			if (serviceRef.getProperty('service.names').indexOf(MANAGED_SERVICE) !== -1) {
 				// Inject async updated() call to fulfill the guarantee
 				self.initialUpdated(serviceRef);
 			}
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/edit/dispatcher.js b/bundles/org.eclipse.orion.client.core/web/orion/edit/dispatcher.js
index a549486..ff80086 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/edit/dispatcher.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/edit/dispatcher.js
@@ -81,17 +81,17 @@
 			this._initService(service, textView);
 		},
 		_wireServiceMethod: function(serviceReference, service, serviceMethod, textView, type) {
-			//console.log("  Add listener " + type + " for " + serviceReference.getServiceId());
+			//console.log("  Add listener " + type + " for " + serviceReference.getProperty('service.id'));
 			var listener = function(event) {
 				serviceMethod(event).then(/*No return value*/);
 			};
-			var serviceId = serviceReference.getServiceId();
+			var serviceId = serviceReference.getProperty('service.id');
 			this.serviceReferences[serviceId] = this.serviceReferences[serviceId] || [];
 			this.serviceReferences[serviceId].push([textView, type, listener]);
 			textView.addEventListener(type, listener);
 		},
 		_onServiceRemoved: function(serviceReference, service) {
-			var serviceId = serviceReference.getServiceId();
+			var serviceId = serviceReference.getProperty('service.id');
 			var serviceReferences = this.serviceReferences[serviceId];
 			if (serviceReferences) {
 				for (var i=0; i < serviceReferences.length; i++) {
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/favorites.js b/bundles/org.eclipse.orion.client.core/web/orion/favorites.js
index 6d84cf6..462d598 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/favorites.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/favorites.js
@@ -12,7 +12,7 @@
  
 /*jslint forin:true*/
 
-define(['require', 'dojo', 'orion/util'], function(require, dojo, mUtil){
+define(['require', 'dojo', 'orion/util', 'orion/EventTarget'], function(require, dojo, mUtil, EventTarget){
 
 	/**
 	 * Instantiates the favorites service. Clients should obtain the 
@@ -26,13 +26,14 @@
 	 */
 	function FavoritesService(serviceRegistry) {
 		this._favorites = [];
+		EventTarget.attach(this);
 		this._init(serviceRegistry);
 		this._initializeFavorites();
 	}
 	FavoritesService.prototype = /** @lends orion.favorites.FavoritesService.prototype */ {
 		_init: function(options) {
 			this._registry = options.serviceRegistry;
-			this._serviceRegistration = this._registry.registerService(["orion.core.favorite", "orion.core.event"], this); //$NON-NLS-0$
+			this._serviceRegistration = this._registry.registerService("orion.core.favorite", this); //$NON-NLS-0$
 		},
 		
 		_notifyListeners: function() {
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/globalCommands.js b/bundles/org.eclipse.orion.client.core/web/orion/globalCommands.js
index e1a2041..5f14abe 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/globalCommands.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/globalCommands.js
@@ -13,9 +13,9 @@
 /*browser:true*/
 
 define(['i18n!orion/nls/messages', 'require', 'dojo', 'dijit', 'orion/commonHTMLFragments', 'orion/commands', 'orion/parameterCollectors', 
-	'orion/extensionCommands', 'orion/util', 'orion/textview/keyBinding', 'orion/breadcrumbs', 'orion/favorites', 'orion/contentTypes', 'orion/URITemplate', 'orion/PageUtil',
+	'orion/extensionCommands', 'orion/util', 'orion/textview/keyBinding', 'orion/breadcrumbs', 'orion/favorites', 'orion/contentTypes', 'orion/URITemplate', 'orion/PageUtil', 'orion/widgets/settings/ThemeSheetWriter',
 	'dijit/Menu', 'dijit/MenuItem', 'dijit/form/DropDownButton', 'orion/widgets/OpenResourceDialog', 'orion/widgets/LoginDialog', 'orion/widgets/UserMenu', 'orion/widgets/UserMenuDropDown'], 
-        function(messages, require, dojo, dijit, commonHTML, mCommands, mParameterCollectors, mExtensionCommands, mUtil, mKeyBinding, mBreadcrumbs, mFavorites, mContentTypes, URITemplate, PageUtil){
+        function(messages, require, dojo, dijit, commonHTML, mCommands, mParameterCollectors, mExtensionCommands, mUtil, mKeyBinding, mBreadcrumbs, mFavorites, mContentTypes, URITemplate, PageUtil, ThemeSheetWriter){
 
 	/**
 	 * This class contains static utility methods. It is not intended to be instantiated.
@@ -569,6 +569,40 @@
 		checkFavoritesButton(options.serviceRegistry, options.commandService);
 	}
 	
+	
+	function applyTheme(preferences){
+	
+		preferences.getPreferences('/themes', 2).then(function(prefs){
+			
+			var selected = prefs.get( 'selected' );
+			
+			if( selected ){
+				var ob = JSON.parse( selected );
+				
+				var styles = JSON.parse( prefs.get( 'styles' ) );
+				
+				for( var theme in styles ){
+					
+					var cssdata;
+					
+					if( styles[theme].name === ob.selected ){
+						cssdata = styles[theme];
+						var sheetMaker = new ThemeSheetWriter.ThemeSheetWriter();
+						var css = sheetMaker.getSheet( cssdata );
+				
+						var stylesheet = document.createElement("STYLE");
+						stylesheet.appendChild(document.createTextNode(css));
+							
+						var head = document.getElementsByTagName("HEAD")[0] || document.documentElement;
+						head.appendChild(stylesheet);	
+						break;
+					}	
+				}
+			}		
+		});
+	}
+	
+	
 	/**
 	 * Generates the banner at the top of a page.
 	 * @name orion.globalCommands#generateBanner
@@ -577,6 +611,8 @@
 	function generateBanner(parentId, serviceRegistry, commandService, prefsService, searcher, handler, /* optional */ editor, /* optional */ escapeProvider) {
 		var text;
 		
+		applyTheme( prefsService );
+		
 		var target = "_self"; //$NON-NLS-0$
 		
 		var parent = dojo.byId(parentId);
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/outliner.js b/bundles/org.eclipse.orion.client.core/web/orion/outliner.js
index 6461015..03df5ef 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/outliner.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/outliner.js
@@ -10,7 +10,7 @@
  ******************************************************************************/
  /*global define document window*/
 
-define(['i18n!orion/nls/messages', 'dojo', 'orion/util', 'orion/section', 'orion/commands', 'orion/URITemplate'], function(messages, dojo, mUtil, mSection, mCommands, URITemplate) {
+define(['i18n!orion/nls/messages', 'dojo', 'orion/util', 'orion/section', 'orion/commands', 'orion/URITemplate', 'orion/EventTarget'], function(messages, dojo, mUtil, mSection, mCommands, URITemplate, EventTarget) {
 
 	/**
 	 * Constructs a new Outliner with the given options.
@@ -194,7 +194,8 @@
 	function OutlineService(options) {
 		this._serviceRegistry = options.serviceRegistry;
 		this._preferences = options.preferences;
-		this._serviceRegistration = this._serviceRegistry.registerService(["orion.edit.outline", "orion.core.event"], this); //$NON-NLS-0$
+		EventTarget.attach(this);
+		this._serviceRegistration = this._serviceRegistry.registerService("orion.edit.outline", this); //$NON-NLS-0$
 		this._outlinePref = this._preferences.getPreferences("/edit/outline"); //$NON-NLS-0$
 		this._provider = new dojo.Deferred();
 	}
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/plugin.js b/bundles/org.eclipse.orion.client.core/web/orion/plugin.js
index d44b6ac..ef281fe 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/plugin.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/plugin.js
@@ -127,18 +127,21 @@
 			var serviceId = _services.length;
 			_services[serviceId] = {names: names, methods: methods, implementation: implementation, properties: properties || {}};
 	
-			// try to provide/inject a dispatchEvent method if the service provides orion.core.event
-			if (names.indexOf("orion.core.event") !== -1) {
+			// try to provide/inject a plugin enabled dispatchEvent method if the service provides one
+			if (implementation && typeof implementation.dispatchEvent === "function") {
+				var originalDispatchEvent = implementation.dispatchEvent;
 				implementation.dispatchEvent = function(eventName) {
-					if (!_connected) {
-						throw new Error("Cannot dispatchEvent. Plugin Provider not connected");
+					var args = Array.prototype.slice.call(arguments);
+					if (_connected) {
+						var message = {
+							serviceId: serviceId,
+							method: "dispatchEvent", //$NON-NLS-0$
+							params: typeof eventName === "string" ? args : [eventName.type].concat(args)
+						};
+						_publish(message);
+
 					}
-					var message = {
-						serviceId: serviceId,
-						method: "dispatchEvent", //$NON-NLS-0$
-						params: [eventName].concat(Array.prototype.slice.call(arguments, 1))
-					};
-					_publish(message);
+					originalDispatchEvent.apply(implementation, args);
 				};
 			}
 		};
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/pluginregistry.js b/bundles/org.eclipse.orion.client.core/web/orion/pluginregistry.js
index 91661ab..57ebc07 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/pluginregistry.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/pluginregistry.js
@@ -12,7 +12,7 @@
 
 /*global define setTimeout clearTimeout addEventListener document console localStorage Worker*/
 
-define(["orion/Deferred", "orion/serviceregistry", "orion/es5shim"], function(Deferred, mServiceregistry){
+define(["orion/Deferred", "orion/serviceregistry", "orion/EventTarget", "orion/es5shim"], function(Deferred, mServiceregistry, EventTarget){
 	var INSTALLED = 1;
 	var LOADED = 2;
 	var UNINSTALLED = 3;
@@ -87,6 +87,10 @@
 						}
 					};
 				});
+				
+				if (serviceProxy.dispatchEvent) {
+					EventTarget.attach(serviceProxy);
+				}
 			}
 			return serviceProxy;
 		}
@@ -381,7 +385,7 @@
 		var _storage = opt_storage || localStorage || {};
 		var _plugins = [];
 		var _channels = [];
-		var _pluginEventTarget = new mServiceregistry.EventTarget();
+		var _pluginEventTarget = new EventTarget();
 	
 		addEventListener("message", function(event) { //$NON-NLS-0$
 			var source = event.source;
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/problems.js b/bundles/org.eclipse.orion.client.core/web/orion/problems.js
index 1da4e8c..7d3770e 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/problems.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/problems.js
@@ -11,7 +11,7 @@
 
 /*global define */
 
-define([], function() {
+define(["orion/EventTarget"], function(EventTarget) {
 
 	/**
 	 * Creates a new problem service instance. Client should obtain the service
@@ -22,7 +22,8 @@
 	 */
 	function ProblemService(serviceRegistry) {
 		this._serviceRegistry = serviceRegistry;
-		this._serviceRegistration = serviceRegistry.registerService(["orion.core.marker","orion.core.event"], this); //$NON-NLS-0$
+		EventTarget.attach(this);
+		this._serviceRegistration = serviceRegistry.registerService("orion.core.marker", this); //$NON-NLS-0$
 	}
 
 	ProblemService.prototype = /** @lends orion.problems.ProblemService.prototype */ {
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/searchOutliner.js b/bundles/org.eclipse.orion.client.core/web/orion/searchOutliner.js
index 7ae3605..93bbc81 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/searchOutliner.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/searchOutliner.js
@@ -12,7 +12,7 @@
 /*global window define setTimeout */
 /*jslint forin:true*/
 
-define(['i18n!orion/search/nls/messages', 'require', 'dojo', 'orion/section', 'orion/commands', 'orion/selection', 'orion/explorer'], function(messages, require, dojo, mSection, mCommands, mSelection, mExplorer){
+define(['i18n!orion/search/nls/messages', 'require', 'dojo', 'orion/section', 'orion/commands', 'orion/selection', 'orion/explorer', 'orion/EventTarget'], function(messages, require, dojo, mSection, mCommands, mSelection, mExplorer, EventTarget){
 
 	/**
 	 * Instantiates the saved search service. This service is used internally by the
@@ -25,6 +25,7 @@
 	 */
 	function SavedSearches(serviceRegistry) {
 		this._searches = [];
+		EventTarget.attach(this);
 		this._init(serviceRegistry);
 		this._initializeSearches();
 	}
@@ -32,7 +33,7 @@
 	SavedSearches.prototype = /** @lends orion.searches.SavedSearches.prototype */ {
 		_init: function(options) {
 			this._registry = options.serviceRegistry;
-			this._serviceRegistration = this._registry.registerService(["orion.core.savedSearches","orion.core.event"], this); //$NON-NLS-0$
+			this._serviceRegistration = this._registry.registerService("orion.core.savedSearches", this); //$NON-NLS-0$
 		},
 		
 		_notifyListeners: function() {
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/selection.js b/bundles/org.eclipse.orion.client.core/web/orion/selection.js
index 4c85bed..b0ca807 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/selection.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/selection.js
@@ -10,7 +10,7 @@
  *******************************************************************************/
  /*global define */
  
-define(["dojo"], function(dojo){
+define(["dojo","orion/EventTarget"], function(dojo, EventTarget){
 
 	/**
 	 * Constructs a new selection service. Clients should obtain a selection service
@@ -28,7 +28,8 @@
 		}
 		
 		this._serviceRegistry = serviceRegistry;
-		this._serviceRegistration = serviceRegistry.registerService([selectionServiceId, "orion.core.event"], this);
+		EventTarget.attach(this);
+		this._serviceRegistration = serviceRegistry.registerService(selectionServiceId, this);
 		this._selections = [];
 	}
 	 
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/serviceTracker.js b/bundles/org.eclipse.orion.client.core/web/orion/serviceTracker.js
index e74e92f..3ea460e 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/serviceTracker.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/serviceTracker.js
@@ -16,7 +16,7 @@
 	 * @name orion.ServiceTracker
 	 * @class Simplifies the use of services within a service registry.
 	 * @description A ServiceTracker tracks matching services in the given service registry. Matching services are those
-	 * whose <em>service name</em> matches the given <code>serviceName</code>. The {@link #addingService} and 
+	 * whose <code>service.names</code> property contains the given <code>serviceName</code>. The {@link #addingService} and 
 	 * {@link #removedService} methods can be overridden to customize the service objects being tracked.
 	 * @param {orion.serviceregistry.ServiceRegistry} serviceRegistry The service registry to track services of.
 	 * @param {String} serviceName The service name of services to be tracked.
@@ -29,7 +29,7 @@
 		var addedListener, removedListener;
 
 		function add(serviceRef) {
-			var id = serviceRef.getServiceId();
+			var id = serviceRef.getProperty('service.id');
 			var serviceObject = this.addingService(serviceRef);
 			if (serviceObject) {
 				refs[id] = serviceRef;
@@ -37,14 +37,14 @@
 			}
 		}
 		function remove(serviceRef) {
-			var id = serviceRef.getServiceId();
+			var id = serviceRef.getProperty('service.id');
 			var service = services[id];
 			delete refs[id];
 			delete services[id];
 			this.removedService(serviceRef, service);
 		}
 		function isTrackable(serviceRef) {
-			return serviceName === serviceRef.getName();
+			return serviceRef.getProperty('service.names').indexOf(serviceName) !== -1; //$NON-NLS-0$
 		}
 
 		/**
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/serviceregistry.js b/bundles/org.eclipse.orion.client.core/web/orion/serviceregistry.js
index 14cf53a..e22993e 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/serviceregistry.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/serviceregistry.js
@@ -11,7 +11,7 @@
  *******************************************************************************/
 /*global define console */
 
-define(["orion/Deferred", "orion/es5shim"], function(Deferred) {
+define(["orion/Deferred", "orion/EventTarget", "orion/es5shim"], function(Deferred, EventTarget) {
 
 	/**
 	 * Creates a new service reference.
@@ -88,116 +88,38 @@
 	};
 	ServiceRegistration.prototype.constructor = ServiceRegistration;
 
-	function _createServiceCall(internalRegistry, serviceId, implementation, methodName) {
-		return function() {
-			var d;
-			if (internalRegistry.isRegistered(serviceId)) {
-				try {
-					var result = implementation[methodName].apply(implementation, Array.prototype.slice.call(arguments));
-					if (result && typeof result.then === "function") {
-						return result;
-					} else {
-						d = new Deferred();
-						d.resolve(result);
-					}
-				} catch (e) {
-						d = new Deferred();
-						d.reject(e);
-				}
-				return d.promise;
-			}
-			throw new Error("Service was unregistered");
-		};
-	}
-
-	/**
-	 * Creates a new service instance.
-	 *
-	 * @name orion.serviceregistry.Service
-	 * @class A concrete service in the Orion service registry
-	 * @param {String} serviceId The symbolic id of this service
-	 * @param {Object} implementation An object implementing the service contract
-	 * @param {orion.serviceregistry.ServiceRegistry} internalRegistry A JSON object containing the service's declarative properties
-	 */
-
 	function Service(serviceId, implementation, internalRegistry) {
 		var method;
+
+		function _createServiceCall(methodName) {
+			return function() {
+				var d;
+				if (internalRegistry.isRegistered(serviceId)) {
+					try {
+						var result = implementation[methodName].apply(implementation, Array.prototype.slice.call(arguments));
+						if (result && typeof result.then === "function") {
+							return result;
+						} else {
+							d = new Deferred();
+							d.resolve(result);
+						}
+					} catch (e) {
+							d = new Deferred();
+							d.reject(e);
+					}
+					return d.promise;
+				}
+				throw new Error("Service was unregistered");
+			};
+		}
+
 		for (method in implementation) {
 			if (typeof implementation[method] === 'function') {
-				this[method] = _createServiceCall(internalRegistry, serviceId, implementation, method);
+				this[method] = _createServiceCall(method);
 			}
 		}
 	}
 
-
-	/**
-	 * Creates an Event Target
-	 *
-	 * @name orion.serviceregistry.EventTarget
-	 * @class Base for creating an Orion event target
-	 */
-
-	function EventTarget() {
-		this._namedlisteners = {};
-	}
-
-	EventTarget.prototype = /** @lends orion.serviceregistry.EventTarget.prototype */
-	{
-		/**
-		 * Dispatches a named event along with an arbitrary set of arguments. Any arguments after <code>eventName</code>
-		 * will be passed to the event listener(s).
-		 * @param {String} eventName The event name
-		 */
-		dispatchEvent: function(eventName) {
-			var listeners = this._namedlisteners[eventName];
-			if (listeners) {
-				for (var i = 0; i < listeners.length; i++) {
-					try {
-						var args = Array.prototype.slice.call(arguments, 1);
-						listeners[i].apply(null, args);
-					} catch (e) {
-						console.log(e); // for now, probably should dispatch an
-						// ("error", e)
-					}
-				}
-			}
-		},
-
-		/**
-		 * Adds an event listener for a named event
-		 * @param {String} eventName The event name
-		 * @param {Function} listener The function called when an event occurs
-		 */
-		addEventListener: function(eventName, listener) {
-			this._namedlisteners[eventName] = this._namedlisteners[eventName] || [];
-			this._namedlisteners[eventName].push(listener);
-		},
-
-		/**
-		 * Removes an event listener for a named event
-		 * @param {String} eventName The event name
-		 * @param {Function} listener The function called when an event occurs
-		 */
-		removeEventListener: function(eventName, listener) {
-			var listeners = this._namedlisteners[eventName];
-			if (listeners) {
-				for (var i = 0; i < listeners.length; i++) {
-					if (listeners[i] === listener) {
-						if (listeners.length === 1) {
-							delete this._namedlisteners[eventName];
-						} else {
-							listeners.splice(i, 1);
-						}
-						break;
-					}
-				}
-			}
-		}
-
-	};
-	EventTarget.prototype.constructor = EventTarget;
-
-
 	/**
 	 * Creates a new service registry
 	 * 
@@ -294,14 +216,6 @@
 			
 			var reference = new ServiceReference(serviceId, names, properties);
 			var service = new Service(serviceId, implementation, this.internalRegistry);
-			
-			// try to provide/inject a dispatchEvent method if the service provides orion.core.event
-			if (names.indexOf("orion.core.event") !== -1) {
-				var eventTarget = new EventTarget();
-				implementation.dispatchEvent = eventTarget.dispatchEvent.bind(eventTarget);
-				service.addEventListener = eventTarget.addEventListener.bind(eventTarget);
-				service.removeEventListener = eventTarget.removeEventListener.bind(eventTarget);
-			}
 
 			var namedReferences = this._namedReferences;
 			names.forEach(function(name) {
@@ -341,8 +255,6 @@
 	return {
 		ServiceReference: ServiceReference,
 		ServiceRegistration: ServiceRegistration,
-		Service: Service,
-		EventTarget: EventTarget,
 		ServiceRegistry: ServiceRegistry
 	};
 });
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/test.js b/bundles/org.eclipse.orion.client.core/web/orion/test.js
index 161f147..faeef8a 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/test.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/test.js
@@ -11,7 +11,7 @@
 /*jslint regexp: true */
 /*global define window console top self orion setTimeout*/
 
-define(['dojo', 'orion/assert'], function(dojo, assert) {
+define(['dojo', 'orion/assert', 'orion/EventTarget'], function(dojo, assert, EventTarget) {
 	// Time to wait before declaring an async test failed. A test function can override this by defining a 'timeout' property.
 	var DEFAULT_TIMEOUT = 30000;
 
@@ -209,7 +209,8 @@
 							return _list("", obj);
 						}
 					};
-					var serviceProvider = provider.registerService(["orion.test.runner", "orion.core.event"], impl);
+					EventTarget.attach(impl);
+					var serviceProvider = provider.registerService("orion.test.runner", impl);
 	
 					provider.connect(function() {
 						that.addEventListener("runStart", function(name) { impl.dispatchEvent("runStart", name); });
@@ -288,4 +289,4 @@
 	var exports = new Test();
 	exports.Test = Test;
 	return exports;
-});
\ No newline at end of file
+});
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/DirectoryPrompterDialog.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/DirectoryPrompterDialog.js
index df93e74..90b8ddb 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/widgets/DirectoryPrompterDialog.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/DirectoryPrompterDialog.js
@@ -46,6 +46,22 @@
 		}
 	},
 	
+	_copyChildren : function(children) {
+		var newChildren = [];
+		for (var e in children) {
+			var child = children[e];
+			newChildren[e] = {
+				Directory: child.Directory, 
+				Length: child.Length, 
+				LocalTimeStamp: child.LocalTimeStamp,
+				Location: child.Location, 
+				ChildrenLocation: child.ChildrenLocation,
+				Name: child.Name
+			};
+		}
+		return newChildren;
+	},
+	
 	loadFolderList: function(path) {
 		path = mUtil.makeRelative(path);
 		this.treeRoot.Location = path;
@@ -55,7 +71,9 @@
 					this.treeRoot[i] = loadedWorkspace[i];
 				}
 				// we don't filter out files because there are no files at the workspace root
-				mUtil.processNavigatorParent(this.treeRoot, loadedWorkspace.Children);
+				// We alsos need to copy the children of the loaded work space. Otherwise the tree model is not getting children once you opened the dialog and reopen it.
+				//Refer to https://bugs.eclipse.org/bugs/show_bug.cgi?id=382771#c2.
+				mUtil.processNavigatorParent(this.treeRoot, this._copyChildren(loadedWorkspace.Children));
 				this.createTree();
 			})
 		);
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/Select.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/Select.js
index 6748dd4..544d7dd 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/Select.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/Select.js
@@ -35,8 +35,12 @@
 		change: function(){

 		

 			var value = this.selection.value;

-		

-		 	this.setStorageItem( this.category, this.item, this.element, value, this.ui );

+			

+			if( this.category ){

+				this.setStorageItem( this.category, this.item, this.element, value, this.ui );

+		 	}else{

+		 		this.setStorageItem( value );

+		 	}

 		},

 		

 		postCreate: function(){

diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/SettingsContainer.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/SettingsContainer.js
index c80b83c..46c74d0 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/SettingsContainer.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/SettingsContainer.js
@@ -14,7 +14,7 @@
 /* This SettingsContainer widget is a dojo border container with a left and right side. The left is for choosing a 

    category, the right shows the resulting HTML for that category. */

 

-define(['i18n!orion/settings/nls/messages', 'require', 'dojo', 'dijit', 'orion/util', 'orion/commands', 'orion/globalCommands', 'orion/PageUtil', 'dijit/TooltipDialog', 'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'orion/widgets/plugin/PluginList', 'orion/widgets/settings/SplitSelectionLayout', 'orion/widgets/settings/UserSettings', 'orion/widgets/settings/InputBuilder'], function(messages, require, dojo, dijit, mUtil, mCommands, mGlobalCommands, PageUtil) {

+define(['i18n!orion/settings/nls/messages', 'require', 'dojo', 'dijit', 'orion/util', 'orion/commands', 'orion/globalCommands', 'orion/PageUtil', 'orion/widgets/settings/ThemeBuilder', 'dijit/TooltipDialog', 'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'orion/widgets/plugin/PluginList', 'orion/widgets/settings/SplitSelectionLayout', 'orion/widgets/settings/UserSettings', 'orion/widgets/settings/InputBuilder'], function(messages, require, dojo, dijit, mUtil, mCommands, mGlobalCommands, PageUtil, mThemeBuilder) {

 

 	dojo.declare("orion.widgets.settings.SettingsContainer", [orion.widgets.settings.SplitSelectionLayout], { //$NON-NLS-0$

 

@@ -122,6 +122,55 @@
 			this.addCategory(item, this.initialSettings.length);

 		},

 		

+		addThemeBuilder: function() {

+

+			var item = {

+				id: "themeBuilder", //$NON-NLS-0$

+				innerHTML: 'Themes', // messages["Themes"],

+				"class": 'navbar-item', //$NON-NLS-1$ //$NON-NLS-0$

+				role: "tab", //$NON-NLS-0$

+				tabindex: -1,

+				"aria-selected": "false", //$NON-NLS-1$ //$NON-NLS-0$

+				onclick: dojo.hitch( this, 'showThemeBuilder', "themeBuilder" ) //$NON-NLS-1$ //$NON-NLS-0$

+			};

+

+			this.addCategory(item, this.initialSettings.length);

+		},

+		

+		

+		showThemeBuilder: function(id){

+		

+

+			if (this.selectedCategory) {

+				dojo.removeClass(this.selectedCategory, "navbar-item-selected"); //$NON-NLS-0$

+				dojo.attr(this.selectedCategory, "aria-selected", "false"); //$NON-NLS-1$ //$NON-NLS-0$

+				this.selectedCategory.tabIndex = -1;

+			}

+

+			if (id) {

+				this.selectedCategory = dojo.byId(id);

+			}

+			

+			dojo.addClass(this.selectedCategory, "navbar-item-selected"); //$NON-NLS-0$

+			dojo.attr(this.selectedCategory, "aria-selected", "true"); //$NON-NLS-1$ //$NON-NLS-0$

+			dojo.attr(this.mainNode, "aria-labelledby", id); //$NON-NLS-0$

+			this.selectedCategory.tabIndex = 0;

+			this.selectedCategory.focus();

+			

+			this.updateToolbar(id);

+		

+			if(this.themeWidget) {

+				this.themeWidget.destroy();

+			}

+		

+			this.themeWidget = new mThemeBuilder.ThemeBuilder({ commandService: this.commandService, preferences: this.preferences });

+			

+			dojo.empty(this.table);

+

+			var themeNode = dojo.create( 'div', null, this.table );

+			

+			this.themeWidget.render(themeNode, 'INITIALIZE');

+		},

 		

 		showUserSettings: function(id){

 		

@@ -235,6 +284,10 @@
 					this.showUserSettings(id);

 					break;

 					

+				case "themeBuilder":

+					this.showThemeBuilder(id);

+					break;

+					

 				default:

 					this.selectCategory(id);

 					break;

@@ -248,6 +301,7 @@
 

 

 			this.addUserSettings();

+			this.addThemeBuilder();

 			this.addPlugins();

 			this.processHash();

 

diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/TextField.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/TextField.js
index b6f49a1..a70f3c0 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/TextField.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/TextField.js
@@ -18,7 +18,7 @@
 

 	dojo.declare("orion.widgets.settings.TextField", [dijit._Widget, dijit._Templated], { //$NON-NLS-0$

 	

-		// templateString: '<input type="text" name="myname" data-dojo-attach-point="textfield" data-dojo-attach-event="onchange:change"/>',

+		 templateString: '<input type="text" style:"width:190px;" name="myname" data-dojo-attach-point="textfield" data-dojo-attach-event="onchange:change"/>',

 		

 //		templateString: '<div><div>THIS IS A PLACEHOLDER</div></div>',

 		

@@ -31,7 +31,7 @@
 		

 		constructor: function(){

 			this.inherited( arguments );

-			console.log( 'c o n s t r u c t o r: ' + this.ui ); //$NON-NLS-0$

+//			console.log( 'c o n s t r u c t o r: ' + this.ui ); //$NON-NLS-0$

 		},

 		

 		setStorageItem: function(){

@@ -41,7 +41,9 @@
 		

 		change: function(){

 		

-			var value = this.selection.value;

+			if( this.selection && this.selection.value ){

+				var value = this.selection.value;

+			}

 		

 			this.setStorageItem( this.category, this.item, this.element, value, this.ui );

 		},

@@ -49,8 +51,6 @@
 		postCreate: function(){

 			this.inherited( arguments );

 			

-			console.log( 'p o s t c r e a t e' ); //$NON-NLS-0$

-			

 //			this.textfield.name = this.ui;

 		}	

 	});

diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeBuilder.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeBuilder.js
new file mode 100644
index 0000000..0f3bf82
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeBuilder.js
@@ -0,0 +1,795 @@
+/*******************************************************************************

+ * @license

+ * Copyright (c) 2012 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: Anton McConville - IBM Corporation - initial API and implementation

+ ******************************************************************************/

+/*global dojo dijit widgets orion  window console define localStorage*/

+/*jslint browser:true*/

+

+define(['i18n!orion/settings/nls/messages', 'require', 'dojo', 'dijit', 'orion/util', 'orion/commands', 'orion/globalCommands', 'orion/PageUtil', 'orion/widgets/settings/ThemeComponent', 'orion/widgets/settings/ThemeData', 'orion/widgets/settings/ThemeSheetWriter'], 

+	function(messages, require, dojo, dijit, mUtil, mCommands, mGlobalCommands, PageUtil, Component, ThemeData, ThemeSheetWriter ) {

+

+		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 SELECTED_ZONE = null;

+		var OVERVIEW = true;

+		var INITIALIZE = true;

+		var ARCS = true;

+		

+		var zones = [];

+		var canvas = null; 

+		var position;

+		var ctx = null;

+		

+		var over = null;

+		

+		var previous;

+		

+		function init(){

+			SELECTED_ZONE = null;

+			INITIALIZE = true;

+			ARCS = true;

+		

+			zones = [];

+			canvas = null; 

+			position = null;

+			ctx = null;

+			over = null;

+		}

+		

+		function Family( familyname, familyvalue ){

+			this.name = familyname;

+			this.value = familyvalue;

+		};

+		

+		var familyname;

+		var familyvalue;

+		

+		Family.prototype.name = familyname;

+		Family.prototype.value = familyvalue;

+		

+

+		function ThemeBuilder(args){

+	

+			this.settings = [];

+		

+			init();

+			

+			this.settings.navbar = new Family( 'NavBar', '#333' );

+			this.settings.button = new Family( 'Button', '#777777' );

+			this.settings.location = new Family( 'Location', '#DEDEDE' ); 

+			this.settings.selection = new Family( 'Selection', '#FEC' );

+			this.settings.sidepanel = new Family( 'Side', '#FBFBFB' ); 

+			this.settings.navtext = new Family( 'Navtext', '#FBFBFB' );

+			this.settings.content = new Family( 'ContentText', '#3087B3' );

+			this.settings.search = new Family( 'Search', '#444' );

+			

+			this.commandService = args.commandService;

+			this.preferences = args.preferences;

+			

+			

+			this.initializeStorage();

+			

+			var revertCommand = new mCommands.Command({

+				name: 'Revert',

+				tooltip: 'Revert Theme',

+				id: "orion.reverttheme", //$NON-NLS-0$

+				callback: dojo.hitch(this, function(data){

+					this.revert(data.items);

+				})

+			

+			});

+			

+			var updateCommand = new mCommands.Command({

+				name: 'Apply',

+				tooltip: 'Apply Theme',

+				id: "orion.applytheme", //$NON-NLS-0$

+				callback: dojo.hitch(this, function(data){

+					this.apply(data.items);

+				})

+			

+			});

+			

+//			this.commandService.addCommand(revertCommand);

+//			this.commandService.registerCommandContribution('themeCommands', "orion.reverttheme", 1); //$NON-NLS-1$ //$NON-NLS-0$

+			

+			this.commandService.addCommand(updateCommand);

+			this.commandService.registerCommandContribution('themeCommands', "orion.applytheme", 2); //$NON-NLS-1$ //$NON-NLS-0$

+		}

+

+

+		ThemeBuilder.prototype.template =	'<div id="themeContainer">' +

+												'<div class="sectionWrapper toolComposite">' +

+													'<div id="General" class="sectionAnchor sectionTitle layoutLeft">Theme Builder</div>' +

+													'<div id="commandButtons">' +

+														'<div id="revertCommands" class="layoutRight sectionActions"></div>' +

+														'<div id="userCommands" class="layoutRight sectionActions"></div>' +

+													'</div>' +

+												'</div>' +

+												'<canvas id="orionui" width="800" height="380"></canvas>' +

+												'<div id="pickercontainer" style="display:show;">' +

+													'<span class="settingsLabel">Theme:</span>' + 

+													'<div id="themepicker"></div>' +

+												'</div>' +

+												'<br>' +

+												'<div id="savecontainer" style="display:none;">' +

+													'<span class="settingsLabel">New theme name:</span>' + 

+													'<div id="themesaver"></div>' +

+												'</div>' +

+											'</div>';

+		

+		var colornames = [["white", "seashell", "cornsilk", "lemonchiffon","lightyellow", "palegreen", "paleturquoise", "aliceblue", "lavender", "plum"],

+						 ["lightgray", "pink", "bisque", "moccasin", "khaki", "lightgreen", "lightseagreen", "lightcyan", "cornflowerblue", "violet"],

+						 ["silver", "lightcoral", "sandybrown", "orange", "palegoldenrod", "chartreuse", "mediumturquoise",	"skyblue", "mediumslateblue","orchid"],

+						 ["gray", "red", "orangered", "darkorange", "yellow", "limegreen","darkseagreen", "royalblue", "slateblue", "mediumorchid"],

+						 ["dimgray", "crimson",	"chocolate", "coral", "gold", "forestgreen", "seagreen", "blue", "blueviolet", "darkorchid"],

+						 ["darkslategray","firebrick","saddlebrown", "sienna", "olive", "green", "darkcyan", "mediumblue","darkslateblue", "darkmagenta" ],

+						 ["black", "darkred", "maroon", "brown", "darkolivegreen", "darkgreen", "midnightblue", "navy", "indigo","purple"]];

+

+		ThemeBuilder.prototype.colornames = colornames;

+		

+		

+		function initializeStorage(){

+		

+			var builder = this;

+		

+			this.preferences.getPreferences('/themes', 2).then(function(prefs){ //$NON-NLS-0$

+

+				/* Check to see if the Orion theme is in the themes preferences ... if it is, 

+				   then we don't need to populate again, otherwise we do need to populate. */

+

+				var cat = prefs.get( 'styles' );

+				

+				var selectedTheme = { 'selected':'Orion' };

+				

+				if( cat === undefined ){

+					var themes = new ThemeData.ThemeData();

+					var styles = themes.getStyles();

+					prefs.put( 'styles', JSON.stringify(styles) );

+					prefs.put( 'selected', JSON.stringify(selectedTheme) );

+					builder.styleset = styles;

+					builder.addThemePicker();

+				}

+				

+				

+				

+			} );

+		}

+		

+		

+		ThemeBuilder.prototype.initializeStorage = initializeStorage;

+		

+		/* MOUSE EVENTS */

+

+		function clear(){

+			if( ctx ){

+				ctx.clearRect(0, 0, canvas.width, canvas.height);

+				var w = canvas.width;

+				var h = canvas.height;

+				canvas.width = w;

+				canvas.height = h;

+			}

+		}

+		

+		ThemeBuilder.prototype.clear = clear;

+		

+		function refresh(){

+			this.clear();

+			this.drawOutline();

+		}

+		

+		ThemeBuilder.prototype.refresh = refresh;

+		

+		function getCoordinates( e ){

+		

+			var x, y;

+		

+			if( e.pageX !== undefined && e.pageY !== undefined ){

+				x = e.pageX;

+				y = e.pageY;

+		    }

+		    else {

+				x = e.screenX + document.body.scrollLeft + document.documentElement.scrollLeft;

+				y = e.screenY + document.body.scrollTop + document.documentElement.scrollTop;

+		    }

+		    

+		    x -= canvas.offsetLeft -20;

+		    y -= canvas.offsetTop -15;

+		    

+		    x = x - position.x;

+		    y = y - position.y;

+			

+		    return { x: x, y: y };

+		}

+		

+		function mouseMove( e ){

+	

+			var coordinates = getCoordinates( e );  

+			var x = coordinates.x;

+			var y = coordinates.y;

+			

+			over = [];

+		

+			for( var z = 0; z < zones.length; z++ ){ 	

+		

+				if( zones[z].mouseOver( x, y ) ){	

+					 canvas.style.cursor = 'crosshair';

+					 zones[z].id = z;

+					 over.push(zones[z]);

+					 break;

+				}else{

+					canvas.style.cursor = '';

+				}

+			}

+		}

+		

+		function mouseUp( e ){

+			canvas.style.cursor = "";

+		}

+		

+		function updateFamily( family, fill ){

+			for( var z=0;z<zones.length;z++ ){

+				if( zones[z].family ){	

+					if( zones[z].family === family ){

+						zones[z].fill = fill;

+					}

+					

+					for( var s in this.settings ){	

+						if( this.settings[s].name === family ){

+							this.settings[s].value = fill;

+							break;

+						}

+					}

+				}

+			}

+		}

+		

+		ThemeBuilder.prototype.updateFamily = updateFamily;

+		

+		function drawPicker( ctx, component ){

+

+			var x = UI_SIZE + 40;

+			

+		    Component.drawText( ctx, component.description.toUpperCase(), LEFT + x, TOP + 10, 'bold 9pt Lucida', '#333' );

+		    Component.drawLine( ctx, LEFT + x, TOP + 20, LEFT + x+190, TOP + 20, 10, '#333' );   

+		    Component.drawText( ctx, 'COLOR:', LEFT + x, TOP + 45, '8pt Lucida', '#333' ); 

+		    Component.drawRectangle( ctx, LEFT + x + 80, TOP + 36, 30, 10, component.fill, null );	    

+		    Component.drawText( ctx, 'COLOR STRING: ', LEFT + x, TOP + 65, '8pt Lucida', '#333' );    

+		    Component.drawText( ctx, component.fill, LEFT + x + 80, TOP + 65, '8pt Lucida', '#333' );     

+		    Component.drawLine( ctx, LEFT + x, TOP + 20, LEFT + x + 190, TOP + 20, 10, '#333' );       

+		    Component.drawLine( ctx, LEFT + x, TOP + 80, LEFT + x + 190, TOP + 80, 5, '#333' );    

+		    Component.drawText( ctx, 'NEW COLOR:', LEFT + x, TOP + 105, 'bold 8pt Lucida', '#333' ); 

+		    

+		    if( ARCS === true){

+			    for( var row = 0; row < 7; row ++ ){

+					for( var column = 1; column < 11; column++ ){

+						var item = column-1;

+						var arc = Component.drawArc( ctx, LEFT + UI_SIZE + ( column * 20 ) + 25, TOP + 80 + ( row * 20 ) + 50, 7, 0, 2 * Math.PI, false, null, colornames[row][item] );

+						arc.paintchip = true;

+						zones.push( arc );

+					}

+				}

+				

+				ARCS = false;

+			}else{	

+				for( var z=0; z< zones.length; z++ ){

+					if( zones[z].paintchip ){

+						zones[z].render();

+					}

+				}

+			}

+		}

+		

+		ThemeBuilder.prototype.drawPicker = drawPicker;

+		

+		function mouseDown( e ){

+

+			OVERVIEW = false;

+		

+			this.refresh();

+		

+			var coordinates = getCoordinates( e );

+			    

+			var x = coordinates.x;

+			var y = coordinates.y;

+			

+			over = [];

+		

+			for( var z = 0; z < zones.length; z++ ){	

+		

+				if( zones[z].mouseOver( x, y ) ){	

+					 zones[z].id = z;

+					 over.push(zones[z]);

+				}

+			}

+			

+			if( over.length > 0 ){

+			

+				var smallest = 0;

+				

+				for( var count = 0; count < over.length; count++ ){

+					if( over[count].width < over[smallest].width ){

+						smallest = count;

+					}

+				}

+				

+				if( over.length > 0 ){ OVERVIEW = true; }else{ OVERVIEW = false; }

+				

+				switch(  over[smallest].type ){

+				

+					case 'ELLIPSE':

+						zones[SELECTED_ZONE.id].fill = over[smallest].fill;

+						this.updateFamily( zones[SELECTED_ZONE.id].family, over[smallest].fill );

+						OVERVIEW = false;

+						this.refresh();

+						zones[SELECTED_ZONE.id].glow( UI_SIZE, TOP );

+						this.drawPicker( ctx, zones[SELECTED_ZONE.id] );

+						

+						dojo.byId( 'pickercontainer' ).style.display = 'none';

+						dojo.byId( 'savecontainer' ).style.display = '';

+						

+						break;

+						

+					case 'RECTANGLE':

+					case 'ROUNDRECTANGLE':

+					case 'TEXT':

+						over[smallest].glow( UI_SIZE, TOP );

+						this.drawPicker( ctx, over[smallest] );

+						SELECTED_ZONE = over[smallest];

+						break;

+						

+					default:

+						this.refresh();

+						break;

+				

+				}

+			}

+		}

+		

+		ThemeBuilder.prototype.mouseDown = mouseDown;

+		

+		function familyShown( families, family ){

+

+			var shown = false;

+			

+			if( family ){

+				for( var f in families ){

+					if( families[f] === family ){

+						shown = true;

+						break;

+					}

+				}

+			}

+		

+			return shown;

+		}

+		

+		ThemeBuilder.prototype.familyShown = familyShown;

+		

+		function overview( ctx, components ){

+

+			var x = UI_SIZE + 40;

+			var padding = 6;

+			var families = [];

+			

+			var count = 0;

+		

+			for( var c = 0; c < components.length; c++ ){

+			

+				var component = components[c];

+				

+				if( familyShown( families, component.family ) === false ){

+				

+					var labely = TOP + 10 + ( count * 28 );

+					

+					var originx = component.x-padding + ( component.width + (2*padding) ) * 0.5;

+					var originy = ( component.y-padding + ( component.height + (2*padding) )/2 );

+					

+					ctx.beginPath();

+					ctx.moveTo( originx, originy );

+					ctx.lineTo( originx, labely -4 );

+					ctx.lineTo( UI_SIZE + 50, labely -4 );

+					ctx.strokeStyle = '#cc0000';

+					ctx.lineWidth = 1;

+					ctx.stroke();

+					

+					Component.drawArc( ctx, originx, originy, 3, 0, 2 * Math.PI, false, null, '#cc0000' );

+					

+					ctx.closePath();

+					ctx.globalAlpha = 1; 

+					

+					Component.drawText( ctx, component.description.toUpperCase(), LEFT + 5 + x, labely, 'bold 8pt Lucida', '#333' );	

+					

+					if( component.family ){ families.push( component.family ); }

+					

+					count++;

+				}

+			}

+			

+			Component.drawText( ctx, 'CLICK DIAGRAM TO STYLE', LEFT + 5 + x, labely + 50, 'bold 8pt Lucida', '#cc0000' );

+		}

+		

+		ThemeBuilder.prototype.overview = overview;

+		

+		function getCurrentSettings(){

+			return this.settings;

+		}

+		

+		ThemeBuilder.prototype.getCurrentSettings = getCurrentSettings;

+		

+

+		function drawOutline(){

+			

+			position = dojo.position( 'themeContainer' );	

+	

+			if( !canvas ){

+				canvas = document.getElementById('orionui');

+				ctx = canvas.getContext( '2d' );

+				canvas.addEventListener( "mousedown", dojo.hitch( this, 'mouseDown' ), false );	

+				canvas.addEventListener( "mousemove", mouseMove, false );

+				canvas.addEventListener( "mouseup", mouseUp, false );

+			}

+			

+			Component.drawRectangle( ctx, LEFT, TOP, UI_SIZE - 0.5, UI_SIZE, null, '#CCC' );

+			

+			var img = new Image();  

+			

+		    img.onload = function(){  

+				ctx.drawImage(img, LEFT + 5, TOP + 8);  

+		    };

+		    

+		    img.src = 'orion-transparent.png'; 

+			

+			if( INITIALIZE === true ){

+			

+				var settings = this.getCurrentSettings();

+			

+				/* Navigation */

+			

+				var navbar = Component.drawRectangle( ctx, LEFT, TOP, UI_SIZE, BANNER_HEIGHT, settings.navbar.value );

+				navbar.description = 'Navigation Bar';	

+				navbar.family = settings.navbar.name;

+				

+				 /* Button */

+		

+				var button = Component.roundRect( ctx, LEFT + UI_SIZE * 0.4 + 5, CONTENT_TOP + 5, 37, 20, 2, '#EFEFEF', settings.button.value );

+				button.description = 'Button';

+				button.family = settings.button.name;

+				

+				/* Breadcrumb */

+				

+				var crumbbar = Component.drawRectangle( ctx, LEFT, TOP + BANNER_HEIGHT, UI_SIZE, NAV_HEIGHT, settings.location.value );

+				crumbbar.description = 'Breadcrumb Bar';

+				crumbbar.family = settings.location.name;

+				

+				/* Selection bar */

+			

+				var selection = Component.drawRectangle( ctx, LEFT + UI_SIZE * 0.4 + 5, CONTENT_TOP + 62, UI_SIZE * 0.6 -10, 20, settings.selection.value );

+				selection.description = 'Selection bar';

+				selection.family = settings.selection.name;

+				

+				/* Side panel */

+				

+				var sidepanel = Component.drawRectangle( ctx, LEFT, CONTENT_TOP, UI_SIZE * 0.4, UI_SIZE - CONTENT_TOP + TOP, settings.sidepanel.value );

+				sidepanel.description = 'Side Panel';

+				sidepanel.family = settings.sidepanel.name;

+				

+				var search = Component.roundRect( ctx, LEFT + UI_SIZE - 145, TOP + 10, 70, 12, 5, settings.search.value, '#222222' );

+				search.description = 'Search Box';

+				search.family = settings.search.name;

+				

+				var navigator =Component.drawText( ctx, 'Navigator', LEFT + 50, TOP + 20, '8pt Lucida', settings.navtext.value );   

+				navigator.description = 'Navigation Text';

+				navigator.family = settings.navtext.name;

+				

+				var username = Component.drawText( ctx, 'UserName', LEFT + UI_SIZE - 70, TOP + 20, '8pt Lucida', settings.navtext.value );

+				username.description = 'Navigation Text';

+				username.family = settings.navtext.name;

+				

+				var breadcrumb = Component.drawText( ctx, 'Orion Content', LEFT + 5, TOP + BANNER_HEIGHT + 18, '8pt Lucida', settings.content.value );

+				breadcrumb.description = 'Content Text';

+				breadcrumb.family = settings.content.name;

+				

+				zones.push( navbar );

+				zones.push( search );

+				zones.push( crumbbar );

+				zones.push( button );

+				zones.push( selection );

+				zones.push( navigator );

+				zones.push( username );

+				zones.push( breadcrumb );

+				

+				for( var count=0; count < 3; count++ ){

+					

+					/* Section Items */

+					

+					var content = Component.drawText( ctx, 'org.eclipse.orion.content', LEFT + UI_SIZE * 0.4 + 20, CONTENT_TOP + 56 + ( 20 * count ), '8pt Lucida', settings.content.value ); 

+					content.description = 'Content Text';

+					content.family = settings.content.name;

+					zones.push( content );

+				}

+				

+				zones.push( sidepanel );

+				

+				for( count=0; count < 3; count++ ){

+				

+					/* Section Items */

+					

+					var item =Component.drawText( ctx, 'Item', LEFT + 15, CONTENT_TOP + 44 + ( 20 * count ), '8pt Lucida', settings.content.value ); 

+					item.description = 'Content Text';

+					item.family = settings.content.name;

+					zones.push( item );

+				}

+				

+				INITIALIZE = false;

+				

+			}else{

+			

+				for( var z in zones ){

+					if( !zones[z].paintchip ){

+						zones[z].render();

+					}

+				}

+			}

+			/* Toolbar */

+				

+			var horizontalLine = Component.drawLine( ctx, LEFT + UI_SIZE * 0.4, CONTENT_TOP + 30, LEFT + UI_SIZE, CONTENT_TOP + 30, 2, '#DEDEDE' );   

+			var verticalLine = Component.drawLine( ctx, LEFT + UI_SIZE * 0.4, CONTENT_TOP, LEFT + UI_SIZE * 0.4, TOP + UI_SIZE, 2, '#DEDEDE' );   

+		    

+		    /* Section */

+		    

+		    var downArrow = Component.drawTriangle( ctx, LEFT + 10, CONTENT_TOP + 17, LEFT + 16, CONTENT_TOP + 17, LEFT + 13, CONTENT_TOP + 22, '#333' );

+		

+			var section = Component.drawText( ctx, 'Section', LEFT + 20, CONTENT_TOP + 23, '8pt Lucida', '#333' );        

+		

+			var sectionline = Component.drawLine( ctx, LEFT + 10, CONTENT_TOP + 29, LEFT + UI_SIZE * 0.4 - 10, CONTENT_TOP + 29, 2, '#DEDEDE' );

+		  

+		        

+			var buttonText = Component.drawText( ctx, 'Button', LEFT + UI_SIZE * 0.4 + 8, CONTENT_TOP + 19, '8pt Lucida', '#333' );        

+			

+			for( var twisty = 0; twisty < 3; twisty++ ){

+				Component.drawTriangle( ctx, LEFT + UI_SIZE * 0.4 + 10, CONTENT_TOP + 50 + (twisty*20), 

+										LEFT + UI_SIZE * 0.4 + 15, CONTENT_TOP + 53 + (twisty*20), 

+										LEFT + UI_SIZE * 0.4 + 10, CONTENT_TOP + 56 + (twisty*20), '#333' );

+			}

+		    

+			var userMenu = Component.drawTriangle( ctx, LEFT + UI_SIZE - 7, TOP + 14, LEFT + UI_SIZE - 13, TOP + 14, LEFT + UI_SIZE - 10, TOP + 19, '#BFBFBF' );

+		

+			if( OVERVIEW ){

+				overview( ctx, zones );

+			}

+		}

+		

+		

+		ThemeBuilder.prototype.drawOutline = drawOutline;

+		

+		function apply(data){

+			var sheetMaker = new ThemeSheetWriter.ThemeSheetWriter();

+			var cssdata = sheetMaker.getSheet( this.settings );

+			

+			var stylesheet = document.createElement("STYLE");

+			stylesheet.appendChild(document.createTextNode(cssdata));

+			

+			var head = document.getElementsByTagName("HEAD")[0] || document.documentElement;

+			head.appendChild(stylesheet);

+			

+			var themename = this.settings.name;

+			

+			/* New Theme defined */

+			

+			if( dojo.byId( 'themesaver' ).value.length > 0 ){

+			

+				var newtheme = {};

+				

+				newtheme.name = dojo.byId( 'themesaver' ).value;

+				newtheme.navbar = this.settings.navbar.value;

+				newtheme.button = this.settings.button.value;

+				newtheme.location = this.settings.location.value;

+				newtheme.selection = this.settings.selection.value;

+				newtheme.sidepanel = this.settings.sidepanel.value; 

+				newtheme.navtext = this.settings.navtext.value;

+				newtheme.content = this.settings.content.value;

+				newtheme.search = this.settings.search.value;

+				

+				this.styles.push( newtheme );

+				

+				themename = newtheme.name;

+				

+				if( dojo.byId( 'themesaver' ).value ){

+					dojo.byId( 'themesaver' ).value = '';

+				}

+			}

+			

+			var styles = this.styles;	

+			

+			var selectedTheme = { 'selected': themename };

+				

+			this.preferences.getPreferences('/themes', 2).then(function(prefs){ //$NON-NLS-0$

+				prefs.put( 'styles', JSON.stringify(styles) );

+				prefs.put( 'selected', JSON.stringify(selectedTheme) );

+			} );

+			

+			dojo.byId( 'savecontainer' ).style.display = 'none';

+			dojo.byId( 'pickercontainer' ).style.display = '';

+			this.updateThemePicker(themename);

+		}

+		

+		ThemeBuilder.prototype.apply = apply;

+

+		function revert(data){	

+			dojo.byId( 'pickercontainer' ).style.display = '';

+			dojo.byId( 'savecontainer' ).style.display = 'none';

+		}

+		

+		ThemeBuilder.prototype.revert = revert;

+		

+		function select( name ){

+		

+			previous = this.settings;

+		

+			for( var s in this.styles ){

+			

+				if( this.styles[s].name === name ){

+					

+					this.settings.name = name;

+					this.settings.navbar.value = this.styles[s].navbar;

+					this.settings.button.value = this.styles[s].button;

+					this.settings.location.value = this.styles[s].location;

+					this.settings.selection.value = this.styles[s].selection;

+					this.settings.sidepanel.value = this.styles[s].sidepanel;

+					this.settings.navtext.value = this.styles[s].navtext;

+					this.settings.content.value = this.styles[s].content;

+					this.settings.search.value = this.styles[s].search;

+					

+					break;

+				}

+			}

+			

+			clear();

+			

+			init();

+			

+			this.refresh();

+		}

+		

+		ThemeBuilder.prototype.select = select;

+

+		

+		

+		function addThemePicker(){

+		

+			var options = [];

+			

+			var themebuilder = this;

+			

+			var selection;

+			

+			var builder = this;

+			

+			this.preferences.getPreferences('/themes', 2).then(function(prefs){ //$NON-NLS-0$

+

+				/* Check to see if the Orion theme is in the themes preferences ... if it is, 

+				   then we don't need to populate again, otherwise we do need to populate. */

+				   

+				selection = prefs.get( 'selected' );

+				

+				if(selection){ selection = JSON.parse( selection ); }

+				

+				var styles = prefs.get( 'styles' );

+				

+				if(styles){ styles = JSON.parse( styles ); }

+

+				if(!styles){

+				

+					/* If we're in this condition, then the themes are not in local storage yet.

+					   Going to make sure */

+				

+					styles = builder.styleset; 

+				}

+			

+				if( styles ){

+				

+					for( var theme in styles ){

+					

+						var set = {

+							value: styles[theme].name,

+							innerHTML: styles[theme].name

+						};	

+						

+						if( selection ){	

+							if( styles[theme].name === selection.selected ){

+								set.selected = 'selected';

+							}

+						}

+						

+						options.push(set);

+						

+						themebuilder.styles = styles;

+					}	

+				}

+			} );	

+			

+			if( selection ){	

+				this.select( selection.selected );

+			}

+			

+			var picker = document.getElementById( 'themepicker' );

+			

+			if(!this.themeSelect){

+				this.themeSelect = new orion.widgets.settings.Select( {options:options}, picker );

+				this.themeSelect.setStorageItem = dojo.hitch( themebuilder, 'select' );

+				

+				var saver = document.getElementById( 'themesaver' );

+				new orion.widgets.settings.TextField({}, saver );	

+			}

+		}

+		

+		ThemeBuilder.prototype.addThemePicker = addThemePicker;

+		

+		

+		function updateThemePicker(selection){

+			

+			var options = [];

+			

+			for( var theme in this.styles ){

+					

+				var set = {

+					value: this.styles[theme].name,

+					innerHTML: this.styles[theme].name

+				};	

+				

+				if( selection ){	

+					if( this.styles[theme].name === selection ){

+						set.selected = 'selected';

+					}

+				}

+				

+				options.push(set);

+				

+				this.themeSelect.destroy();

+				var newdiv = document.createElement('div');

+				newdiv.id = 'themepicker';

+				document.getElementById( 'pickercontainer').appendChild(newdiv);

+				this.themeSelect = new orion.widgets.settings.Select( {options:options}, newdiv );

+				this.themeSelect.setStorageItem = dojo.hitch( this, 'select' );

+			}	

+		}

+		

+		ThemeBuilder.prototype.updateThemePicker = updateThemePicker;

+		

+		function render( anchor, state ){

+		

+			if( state && state === 'INITIALIZE' ){ INITIALIZE = true; }

+			anchor.innerHTML = this.template;	

+	

+			this.drawOutline();			

+			this.addThemePicker();

+		

+			this.commandService.renderCommands('themeCommands', document.getElementById( 'revertCommands' ), this, this, "button"); //$NON-NLS-1$ //$NON-NLS-0$		

+		}

+		

+		ThemeBuilder.prototype.render = render;

+		

+		function destroy(){

+			dijit.byId( 'themepicker' ).destroyRecursive();

+			dijit.byId( 'themesaver' ).destroyRecursive();

+		}

+		

+		ThemeBuilder.prototype.destroy = destroy;

+

+		return{

+			ThemeBuilder:ThemeBuilder,

+			destroy:destroy

+		};

+	}

+);
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeChooser.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeChooser.js
new file mode 100644
index 0000000..604e2d1
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeChooser.js
@@ -0,0 +1,82 @@
+/*******************************************************************************

+ * @license

+ * Copyright (c) 2012 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: Anton McConville - IBM Corporation - initial API and implementation

+ ******************************************************************************/

+/*global dojo dijit widgets orion  window console define localStorage*/

+/*jslint browser:true*/

+

+define(['i18n!orion/settings/nls/messages', 'require', 'dojo', 'dijit', 'orion/util', 'orion/commands', 'orion/globalCommands', 'orion/PageUtil', 'dijit/TooltipDialog', 'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'orion/widgets/plugin/PluginList', 'orion/widgets/settings/SplitSelectionLayout', 'orion/widgets/settings/UserSettings', 'orion/widgets/settings/InputBuilder'], 

+	function(messages, require, dojo, dijit, mUtil, mCommands, mGlobalCommands, PageUtil) {

+

+

+		function ThemeChooser(){

+			console.log( 'Theme Chooser' );

+		}

+		

+		ThemeChooser.prototype.template =	'<div class="themeContainer">' +

+											'<header>' +

+											'<div id="staticBanner" class="layoutBlock topRowBanner">' + 

+											'<a id="home" class="layoutLeft logo" href="../navigate/table.html" aria-label="Orion Home"></a>' +

+												'<nav id="primaryNav" class="layoutLeft primaryNav" role="navigation">' +

+													'<a href="http://orion.eclipse.org/navigate/table.html#" target="_self" class="targetSelector">Navigator</a>' + 

+//													'<a href="http://orion.eclipse.org/sites/sites.html" target="_self" class="targetSelector">Sites</a>' +

+//													'<a href="http://orion.eclipse.org/git/git-repository.html#" target="_self" class="targetSelector">Repositories</a>' +

+//													'<a href="http://orion.eclipse.org/console/consolePage.html" target="_self" class="targetSelector">Console</a>' +

+//													'<a href="http://mamacdon.github.com/#?target=http://orion.eclipse.org/settings/settings.html&amp;version=0.5&amp;OrionHome=http://orion.eclipse.org" target="_self" class="targetSelector">Get Plugins</a>' +

+												'</nav>' +

+												'<div class="layoutRight">' +

+													'<div id="globalActions" class="spacingLeft layoutLeft"></div>' +

+													'<div id="relatedLinks" class="spacingLeft layoutLeft" style="padding-top:1px;"></div>' +

+													'<input type="text" id="search" placeholder="Search Orion Content" title="Type a keyword or wild card to search in Orion Content" class="layoutLeft spacingLeft searchbox" role="search">' +

+														'<div id="userMenu" class="spacingLeft layoutLeft">' +

+														'<span class="dijit dijitReset dijitInline dijitDropDownButton" style="padding-top: 3px;" widgetid="logins">' + 

+															'<span class="primaryNav" dojoattachevent="ondijitclick:_onButtonClick" dojoattachpoint="_buttonNode">' + 

+																'<span class="dijitReset dijitStretch dijitButtonContents dijitDownArrowButton" dojoattachpoint="focusNode,titleNode,_arrowWrapperNode" role="button" aria-haspopup="true" aria-labelledby="logins_label" style="-webkit-user-select: none; " id="logins" tabindex="0">' +

+																	'<span class="dijitReset dijitInline dijitIcon" dojoattachpoint="iconNode"></span>' +

+																	'<span class="dijitReset dijitInline dijitButtonText" dojoattachpoint="containerNode,_popupStateNode" id="logins_label" style="padding-right:3px">Anton McConville</span>' +

+																	'<span class="dijitReset dijitInline dijitArrowButtonInner"></span>' + 

+																'</span>' + 

+															'</span>' + 

+														'</span>'  +

+														'</div>' +

+												'</div>' + 

+												'<div id="titleArea" class="layoutBlock titleArea">' + 

+													'<div class="layoutLeft pageTitle"></div>' + 

+														'<div class="clear" style="padding-bottom:5px;display:inline;">' + 

+															'<span id="location" class="">' + 

+																'<span id="eclipse.breadcrumbs">' + 

+																	'<a class="breadcrumb currentLocation">Settings</a>' + 

+																'</span>' + 

+															'</span>' + 

+															'<span id="dirty" class="currentLocation"></span>' + 

+														'</div>' + 

+														'<div class="layoutRight pageNav">' +

+															'<span id="pageFavorite" tabindex="0" role="button" aria-label="Add this page to the favorites list" class="spacingLeft layoutLeft imageSprite core-sprite-favorite_sml" style="visibility: hidden; "></span>' +

+														'</div>' + 

+													'</div>' +

+												'</div>'

+											'</div>';

+		

+		function render( anchor ){

+		

+			anchor.innerHTML = this.template;

+		

+			console.log( 'Theme Chooser Render' );

+		};

+		

+		

+		ThemeChooser.prototype.render = render;

+		

+

+		return{

+			ThemeChooser:ThemeChooser

+		};

+

+	}

+);
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeClass.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeClass.js
new file mode 100644
index 0000000..53470fb
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeClass.js
@@ -0,0 +1,48 @@
+/*******************************************************************************

+ * @license

+ * Copyright (c) 2012 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: Anton McConville - IBM Corporation - initial API and implementation

+ ******************************************************************************/

+/*global dojo dijit widgets orion  window console define localStorage*/

+/*jslint browser:true*/

+

+define(['i18n!orion/settings/nls/messages', 'require' ], 

+	function(messages, require) {

+

+		var className = null;

+		var attributes = [];

+		var element;

+		var style;

+		var closeString = ' }\n';

+		var classString;

+	

+		function ThemeClass( name ){

+			this.attributes = [];

+			this.element = document.createElement( 'div' );

+			this.style = this.element.style;

+			this.className = name;

+			this.classString = '.' + name + '{ ';

+		}

+		

+		ThemeClass.prototype.className = className;

+		ThemeClass.prototype.classString = classString;

+		ThemeClass.prototype.style = style;

+		ThemeClass.prototype.closeString = closeString;

+		

+		function toString(){		

+			this.classString = this.classString + this.style.cssText + this.closeString;

+			return this.classString;

+		}

+		

+		ThemeClass.prototype.toString = toString;

+	

+		return{

+			ThemeClass:ThemeClass

+		};

+

+});
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeComponent.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeComponent.js
new file mode 100644
index 0000000..253e88c
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeComponent.js
@@ -0,0 +1,291 @@
+/*******************************************************************************

+ * @license

+ * Copyright (c) 2012 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: Anton McConville - IBM Corporation - initial API and implementation

+ ******************************************************************************/

+/*global dojo dijit widgets orion  window console define localStorage*/

+/*jslint browser:true*/

+

+define(['i18n!orion/settings/nls/messages', 'require', 'dojo', 'dijit', 'orion/util', 'orion/commands', 'orion/globalCommands', 'orion/PageUtil', 'dijit/TooltipDialog', 'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'orion/widgets/plugin/PluginList', 'orion/widgets/settings/SplitSelectionLayout', 'orion/widgets/settings/UserSettings', 'orion/widgets/settings/InputBuilder'], 

+	function(messages, require, dojo, dijit, mUtil, mCommands, mGlobalCommands, PageUtil) {

+

+

+		function Component(){

+

+		}

+		

+		Component.prototype.type = null;

+		Component.prototype.fill = null;

+		Component.prototype.stroke = null;

+		Component.prototype.width = 0;

+		Component.prototype.height = 0;

+		Component.prototype.font = null;

+		Component.prototype.text = null;

+		Component.prototype.radius = null;

+		Component.prototype.x = 0;

+		Component.prototype.y = 0;

+		Component.prototype.x2 = 0;

+		Component.prototype.y2 = 0;

+		Component.prototype.x3 = 0;

+		Component.prototype.y3 = 0;

+		Component.prototype.context = null;

+		Component.prototype.description = null;

+		Component.prototype.over = false;

+		Component.prototype.family = null;

+		

+		function render( context ){

+				

+				if( context != null ){

+					this.context = context;

+				}

+				

+				switch( this.type ){

+					

+					case 'TEXT':

+						

+						this.context.beginPath();

+						this.context.font = this.font;

+					    this.context.fillStyle = this.fill;

+					    this.context.fillText(this.text, this.x, this.y );

+					    this.context.closePath();

+						break;

+					

+					case 'LINE':

+			

+						this.context.beginPath();

+						this.context.strokeStyle = this.stroke;

+						this.context.moveTo( this.x, this.y );

+						this.context.lineTo( this.x2, this.y2 );

+						this.context.lineWidth = this.width;

+						this.context.stroke();

+						this.context.closePath();

+						break;

+				

+					case 'RECTANGLE':

+						this.context.beginPath();

+						this.context.strokeStyle = this.stroke;

+						if( this.fill ){ this.context.fillStyle = this.fill; }

+						this.context.rect( this.x, this.y, this.width, this.height );

+						if( this.fill ){ this.context.fill(); }  

+						if( this.stroke ){ this.context.stroke(); }

+						this.context.closePath();

+						break;

+			

+			

+					case 'ROUNDRECTANGLE':

+						this.context.beginPath();

+						this.context.fillStyle = this.fill;

+						this.context.strokeStyle = this.stroke;

+						this.context.moveTo(this.x + this.radius, this.y);

+						this.context.lineTo(this.x + this.width - this.radius, this.y);

+						this.context.quadraticCurveTo(this.x + this.width, this.y, this.x + this.width, this.y + this.radius);

+						this.context.lineTo(this.x + this.width, this.y + this.height - this.radius);

+						this.context.quadraticCurveTo( this.x + this.width, this.y + this.height, this.x + this.width - this.radius, this.y + this.height);

+						this.context.lineTo(this.x + this.radius, this.y + this.height);

+						this.context.quadraticCurveTo(this.x, this.y + this.height, this.x, this.y + this.height - this.radius);

+						this.context.lineTo(this.x, this.y + this.radius);

+						this.context.quadraticCurveTo(this.x, this.y, this.x + this.radius, this.y);

+						this.context.closePath();

+					  

+						if( this.stroke ){ this.context.stroke(); }

+						if( this.fill ){ this.context.fill(); }   

+						break;

+						

+					case 'TRIANGLE':

+						this.context.beginPath();

+						this.context.moveTo( this.x, this.y );

+						this.context.lineTo( this.x2, this.y2 );

+						this.context.lineTo( this.x3, this.y3 );

+						this.context.lineTo( this.x, this.y );

+						this.context.fillStyle = this.fill;

+						this.context.fill();

+						this.context.closePath();

+						break;

+						

+					case 'ELLIPSE':	

+					

+						this.context.beginPath();

+						this.context.arc( this.x, this.y, this.radius, this.startangle, this.endangle, this.direction );

+						this.context.fillStyle = this.fill;

+						this.context.fill();

+						this.context.closePath();

+						break;

+				}

+		}

+

+Component.prototype.render = render;

+			

+		function mouseOver( mouseX, mouseY ){

+			this.over = false;

+		    

+			switch( this.type ){

+				case 'RECTANGLE':

+				case 'ROUNDRECTANGLE':

+				case 'TEXT':

+					if( mouseX > this.x && mouseX < ( this.x + this.width ) ){

+						if( mouseY > this.y && mouseY < ( this.y + this.height ) ){

+							this.over = true;

+						}

+					}

+		

+					break;

+					

+				case 'ELLIPSE':

+				

+					if( mouseX > this.x - this.radius  && mouseX < ( this.x + this.radius ) ){

+						if( mouseY > this.y - this.radius && mouseY < ( this.y + this.radius ) ){

+							this.over = true;

+						}

+					}

+				

+					break;

+					

+				case 'LINE':

+					break;

+			}

+		

+			return this.over;

+		}

+		

+		Component.prototype.mouseOver = mouseOver;

+

+		

+		function roundRect(context, x, y, width, height, radius, fill, stroke) {   

+			var subject = new Component();

+			subject.type = 'ROUNDRECTANGLE';

+		    subject.fill = fill;

+		    subject.stroke = stroke;

+		    subject.x = x;

+		    subject.y = y;

+		    subject.width = width;

+		    subject.height = height;

+			subject.radius = radius;

+		    subject.render(context);

+		    return subject;

+		}

+		

+		function drawTriangle( context, x, y, x2, y2, x3, y3, fill, stroke ){

+			var subject = new Component();

+		    subject.type = 'TRIANGLE';

+		    subject.fill = fill;

+		    subject.stroke = stroke;

+		    subject.x = x;

+		    subject.y = y;

+		    subject.x2 = x2;

+		    subject.y2 = y2;

+		    subject.x3 = x3;

+		    subject.y3 = y3;

+		    subject.render(context);

+		    return subject;

+		}

+		

+		function drawRectangle( context, x, y, width, height, fill, stroke ){

+			var subject = new Component();

+		    subject.type = 'RECTANGLE';

+		    subject.fill = fill;

+		    subject.stroke = stroke;

+		    subject.x = x;

+		    subject.y = y;

+		    subject.width = width;

+		    subject.height = height;

+		    subject.render(context);

+		    return subject;

+		}

+		

+		function drawText( context, text, x, y, style, color ){

+			var subject = new Component();

+		    subject.type = 'TEXT';

+		    subject.font = style;

+		    subject.fill = color;

+		    subject.text = text;

+		    subject.x = x;

+		    subject.y = y;

+		    subject.render(context);

+		    subject.width = context.measureText( text ).width;

+		    subject.height = 10;

+		    return subject;

+		}

+		

+		function drawLine( context, x1, y1, x2, y2, width, color ){

+			var line = new Component();

+		    line.type= 'LINE';

+		    line.stroke = color;

+		    line.width = width;

+		    line.x = x1;

+		    line.y = y1;

+		    line.x2 = x2;

+		    line.y2 = y2;

+		    line.render(context);

+		    return line;

+		}

+		

+		

+		function drawArc( context, x, y, radius, startAngle, endAngle, direction, width, color ){

+			var arc = new Component();

+		    arc.type= 'ELLIPSE';

+		//    arc.stroke = color;

+		    arc.fill = color;

+		    arc.width = width;

+		    arc.x = x;

+		    arc.y = y;

+		    arc.radius = radius;

+		    arc.startangle = startAngle;

+		    arc.endangle = endAngle;

+		    arc.direction = direction;

+		    arc.render(context);

+		    return arc;

+		}

+		

+		function glow( width, top ){

+

+			var padding = 6;

+			

+			switch( this.type ){

+				case 'RECTANGLE':

+				case 'ROUNDRECTANGLE':

+				case 'TEXT':

+					if( this.over ){

+						// roundRect(this.context, this.x-padding, this.y-padding, this.width + (2*padding), this.height + (2*padding), 1, null, '#cc0000');

+					}

+					

+					var originx = this.x-padding + ( this.width + (2*padding) ) * 0.5;

+					var originy = ( this.y-padding + (this.height + (2*padding) )/2 );

+					

+					this.context.beginPath();

+					this.context.moveTo( originx, originy );

+					this.context.lineTo( width + 30, originy );

+					this.context.lineTo( width + 30, top + 7 );

+					this.context.lineTo( width + 45, top + 7 );

+					this.context.strokeStyle = '#cc0000';

+					this.context.lineWidth = 1;

+					this.context.stroke();

+					

+					drawArc( this.context, originx, originy, 3, 0, 2 * Math.PI, false, null, '#cc0000' );

+					

+					this.context.closePath();

+					

+					break;

+			}

+		}	

+		

+		

+		Component.prototype.glow = glow;

+		

+

+		return{

+			Component:Component,

+			drawArc:drawArc,

+			drawLine:drawLine,

+			drawText:drawText,

+			drawRectangle:drawRectangle,

+			drawTriangle:drawTriangle,

+			roundRect:roundRect

+		};

+

+	}

+);
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeData.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeData.js
new file mode 100644
index 0000000..9d08c78
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeData.js
@@ -0,0 +1,129 @@
+/*******************************************************************************

+ * @license

+ * Copyright (c) 2012 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: Anton McConville - IBM Corporation - initial API and implementation

+ ******************************************************************************/

+/*global dojo dijit widgets orion  window console define localStorage*/

+/*jslint browser:true*/

+

+define(['i18n!orion/settings/nls/messages', 'require', 'dojo', 'dijit', 'orion/util', 'orion/commands', 'orion/globalCommands', 'orion/PageUtil'], 

+	function(messages, require, dojo, dijit, mUtil, mCommands, mGlobalCommands, PageUtil) {

+

+		function StyleSet(){

+		

+		}

+		

+		StyleSet.prototype.name = 'Orion';

+		StyleSet.prototype.navbar = '#333';

+		StyleSet.prototype.button = '#777777';

+		StyleSet.prototype.location = '#DEDEDE';

+		StyleSet.prototype.selection = 'FEC';

+		StyleSet.prototype.sidepanel = '#FBFBFB';

+		StyleSet.prototype.navtext = '#FBFBFB';

+		StyleSet.prototype.content = '#3087B3';

+		StyleSet.prototype.search = '#444';

+

+		function ThemeData(){

+

+			var orion = new StyleSet();

+			orion.name = 'Orion';

+			orion.navbar = '#333';

+			orion.button = '#777777';

+			orion.location = '#DEDEDE';

+			orion.selection = 'FEC';

+			orion.sidepanel = '#FBFBFB';

+			orion.navtext = '#FBFBFB';

+			orion.content = '#3087B3';

+			orion.search = '#444';

+

+			this.styles.push( orion );			

+

+			var eire = new StyleSet();

+			

+			eire.name = 'Green Zone';

+			eire.navbar = 'seagreen';

+			eire.button = 'lavender';

+			eire.location = 'darkseagreen';

+			eire.selection = 'moccasin';

+			eire.sidepanel = 'aliceblue';

+			eire.navtext = '#FBFBFB';

+			eire.content = 'darkgreen';

+			eire.search = 'darkgreen';

+			

+			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.navtext = '#FBFBFB';

+			avril.content = 'mediumorchid';

+			avril.search = 'violet';

+			

+			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.navtext = '#FBFBFB';

+			blue.content = 'royalblue';

+			blue.search = 'royalblue';

+			

+			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.navtext = 'lemonchiffon';

+			vanilla.content = 'chocolate';

+			vanilla.search = 'moccasin';

+			

+			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.navtext = '#FBFBFB';

+			beetlejuice.content = 'mediumslateblue';

+			beetlejuice.search = '#444';

+			

+			this.styles.push( beetlejuice );

+		}

+		

+		function getStyles(){

+			return this.styles;

+		}

+		ThemeData.prototype.styles = [];

+		ThemeData.prototype.getStyles = getStyles;

+

+		return{

+			ThemeData:ThemeData,

+			getStyles:getStyles

+		};

+

+	}

+);
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeSheetWriter.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeSheetWriter.js
new file mode 100644
index 0000000..d7c5d23
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/ThemeSheetWriter.js
@@ -0,0 +1,365 @@
+/*******************************************************************************

+ * @license

+ * Copyright (c) 2012 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: Anton McConville - IBM Corporation - initial API and implementation

+ ******************************************************************************/

+/*global dojo dijit widgets orion  window console define localStorage*/

+/*jslint browser:true*/

+

+define(['i18n!orion/settings/nls/messages', 'require', 'dojo', 'dijit', 'orion/util', 'orion/commands', 'orion/globalCommands', 'orion/PageUtil', 'orion/widgets/settings/ThemeClass'], 

+	function(messages, require, dojo, dijit, mUtil, mCommands, mGlobalCommands, PageUtil, ThemeClass) {

+		

+		var navbar = '#333';

+		var button = '#777777';

+		var location = '#DEDEDE';

+		var selection = 'FEC';

+		var sidepanel = '#FBFBFB';

+		var navtext = '#FBFBFB';

+		var content = '#3087B3';

+		var search = '#444';

+		

+		function ThemeSheetWriter(){

+		}

+		

+		ThemeSheetWriter.prototype.navbar = navbar;

+		ThemeSheetWriter.prototype.button = button;

+		ThemeSheetWriter.prototype.location = location;

+		ThemeSheetWriter.prototype.selection = selection;

+		ThemeSheetWriter.prototype.sidepanel = sidepanel;

+		ThemeSheetWriter.prototype.navtext = navtext;

+		ThemeSheetWriter.prototype.content = content;

+		ThemeSheetWriter.prototype.search = search;

+		

+		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 = '-webkit-gradient(linear, left top, left bottom, color-stop(0%,' + this.navbar + '), color-stop(100%,' + this.navbar + '))';

+			topRowBanner.style.background = '-moz-linear-gradient(top,' + this.navbar + '0%,' + this.navbar + '100%)';

+			topRowBanner.style.height = '28px';

+			

+			styles.push( topRowBanner );

+			

+			var a = new ThemeClass.ThemeClass( 'a' );

+			a.style.cursor = 'hand';

+			a.style.textDecoration = 'none';

+			a.style.color = this.navtext;

+			

+			styles.push( a );

+

+			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 = '6px';

+			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.background = '-moz-linear-gradient(top, ' + this.location + ' 0%, ' + this.location + ' 100%)';

+		    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 = this.content;

+			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 aBreadcrumbVisited = new ThemeClass.ThemeClass( 'a.breadcrumb:visited' );

+			aBreadcrumbVisited.style.color = this.content;

+			

+			styles.push( aBreadcrumbVisited );

+

+			var breadcrumbSeparator = new ThemeClass.ThemeClass( 'breadcrumbSeparator' );

+			breadcrumbSeparator.style.fontSize = '8pt';

+			breadcrumbSeparator.style.textDecoration = 'none';

+			breadcrumbSeparator.style.color = this.navbar;

+			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.content;

+			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 );

+			

+			for( var s in styles ){

+				styleBlock = styleBlock + styles[s].toString();

+			}

+			

+			return styleBlock;

+		}

+		

+		ThemeSheetWriter.prototype.writeLocationStyle = writeLocationStyle;

+		

+		function writeSidePanelStyle(){

+		

+		}

+		

+		function writeButtonStyle(){

+		

+			var styleBlock = '';

+			var styles = [];

+		

+			var commandButton = new ThemeClass.ThemeClass( 'commandButton' );

+			commandButton.style.color = '#222';

+			commandButton.style.border = '1px solid ' + this.location;

+			commandButton.style.backgroundColor = '#efefef';

+			commandButton.style.textAlign = 'center';

+			commandButton.style.verticalAlign = 'baseline';

+			commandButton.style.cursor = 'pointer';

+		    commandButton.style.display = 'inline-block';

+		    commandButton.style.padding = '6px';

+			commandButton.style.paddingTop = '4px'; /* To align with Command Menu */

+		    commandButton.style.borderRadius = '1px';

+		    commandButton.style.lineHeight = '12px';

+			commandButton.style.fontSize = '8pt';

+			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 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 ' + this.location;

+			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 #222';

+			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.background = this.selection; /* was e3e3e3 */

+			

+			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;

+			auxpane.style.background = '-webkit-gradient(linear, left top, left bottom, color-stop(0%,' + this.sidepanel + '), color-stop(100%,' + this.sidepanel + '))';

+			auxpane.style.background ='-moz-linear-gradient(top, ' + this.sidepanel + ' 0%, ' + this.sidepanel + ' 100%)';

+			auxpane.style.overflowX = 'auto';

+			auxpane.style.minWidth = '200px';

+			auxpane.style.paddingTop = '16px';

+			

+			styles.push( auxpane );

+

+			for( var s in styles ){

+				styleBlock = styleBlock + styles[s].toString();

+			}

+			

+			return styleBlock;

+		}

+		

+		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 getSheet( settings ){

+		

+			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.navtext = settings.navtext.value;

+				this.search = settings.search.value;

+				this.content = settings.content.value;

+			}else{

+				this.navbar = settings.navbar;

+				this.button = settings.button;

+				this.location = settings.location;

+				this.selection = settings.selection;

+				this.sidepanel = settings.sidepanel;

+				this.navtext = settings.navtext;

+				this.search = settings.search;

+				this.content = settings.content;

+			}

+			

+			var sheet = this.writeNavigationStyle() + this.writeLocationStyle() + this.writeMainStyle() + this.writeButtonStyle();

+			

+			return sheet;

+		}

+		

+		ThemeSheetWriter.prototype.getSheet = getSheet;

+

+		return{

+			ThemeSheetWriter:ThemeSheetWriter

+		};

+

+	}

+);
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/UserSettings.js b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/UserSettings.js
index 276f0ef..f1a8578 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/UserSettings.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/UserSettings.js
@@ -206,13 +206,9 @@
 								messageService.setProgressResult( messages['User profile data successfully reset.'] );

 								

 								if( userdata.Name ){

-								

 									var userMenu = dijit.byId( 'logins' ); //$NON-NLS-0$

-									

 									userMenu.set( 'label', userdata.Name  ); //$NON-NLS-0$

-								

-								}

-								

+								}	

 							});

 						});

 					});

@@ -257,10 +253,7 @@
 							}

 						});

 						

-						settingsWidget.setHash( settingsWidget.iframe, jsonData.Location );

-						

-						

-						

+						settingsWidget.setHash( settingsWidget.iframe, jsonData.Location );	

 					});

 				});

 			}

diff --git a/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/orion-transparent.png b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/orion-transparent.png
new file mode 100644
index 0000000..563010e
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/orion/widgets/settings/orion-transparent.png
Binary files differ
diff --git a/bundles/org.eclipse.orion.client.core/web/settings/orion-transparent.png b/bundles/org.eclipse.orion.client.core/web/settings/orion-transparent.png
new file mode 100644
index 0000000..563010e
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/settings/orion-transparent.png
Binary files differ
diff --git a/bundles/org.eclipse.orion.client.core/web/settings/settings.css b/bundles/org.eclipse.orion.client.core/web/settings/settings.css
index d5afbf8..efd55b2 100644
--- a/bundles/org.eclipse.orion.client.core/web/settings/settings.css
+++ b/bundles/org.eclipse.orion.client.core/web/settings/settings.css
@@ -478,3 +478,27 @@
 	min-width:50px;

 	text-align:center;

 }

+

+

+/* - - - - - T H E M E  C H O O S E R - - - - - */

+

+

+.themeContainer{

+	margin:20px;

+	width: 450px;

+}

+

+.settingsLabel{

+	margin: 10px;

+	min-width: 145px;

+	display: inline-block;

+}

+

+

+

+

+

+

+

+

+

diff --git a/bundles/org.eclipse.orion.client.users/web/profile/userservicePlugin.html b/bundles/org.eclipse.orion.client.users/web/profile/userservicePlugin.html
index 5e7cb94..64e059e 100644
--- a/bundles/org.eclipse.orion.client.users/web/profile/userservicePlugin.html
+++ b/bundles/org.eclipse.orion.client.users/web/profile/userservicePlugin.html
@@ -43,12 +43,11 @@
 			};
 
 			usersService.initProfile = function (userURI, pluginsEventName, dataEventName) {
-				var userService = this._serviceRegistration;
 				return this.getUserInfo(userURI, function (json) {
-					userService.dispatchEvent(pluginsEventName, {
+					usersService.dispatchEvent(pluginsEventName, {
 						"plugins": json.Plugins
 					});
-					userService.dispatchEvent(dataEventName, json);
+					usersService.dispatchEvent(dataEventName, json);
 				});
 			};
 
@@ -83,8 +82,11 @@
 					break;
 				}
 			};
+			usersService.dispatchEvent = function(){
+				// this method will get wrapped and delegated to the plugin
+			};
 
-			usersService._serviceRegistration = provider.registerService(["orion.core.user", "orion.core.event"], usersService);
+			provider.registerService("orion.core.user", usersService);
 			provider.connect();
 		};
 		</script>