Merge commit '5b9d01ef4bedb4eea4803bb45e742a2e2e9a34f0'
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 a70f3c0..0cf33df 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
@@ -39,6 +39,10 @@
 			console.log( 'TextField setStorageIem' ); //$NON-NLS-0$

 		},

 		

+		width: function( value ){

+			dojo.style( this.textfield, 'width', value );

+		},

+		

 		change: function(){

 		

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

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
index 0ea91d3..104eea1 100644
--- 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
@@ -71,6 +71,7 @@
 			this.settings.selection = new Family( 'Selection', '#FEC' );

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

 			this.settings.mainpanel = new Family( 'Main', 'white' ); 

+			this.settings.toolpanel = new Family( 'Tools', 'white' ); 

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

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

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

@@ -82,7 +83,7 @@
 			this.initializeStorage();

 			

 			var revertCommand = new mCommands.Command({

-				name: 'Revert',

+				name: 'Cancel',

 				tooltip: 'Revert Theme',

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

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

@@ -111,16 +112,38 @@
 			

 			});

 			

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

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

-			

 			this.commandService.addCommand(guideCommand);

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

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

+			

+			this.commandService.addCommand(revertCommand);

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

 			

 			this.commandService.addCommand(updateCommand);

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

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

 		}

 

+		function applyColor(){

+		

+			var newcolor = document.getElementById( 'colorstring' ).value;

+			

+			if( this.themebuilder.validateHex( newcolor ) ){

+			

+				zones[SELECTED_ZONE.id].fill = newcolor;

+				this.themebuilder.updateFamily( zones[SELECTED_ZONE.id].family, newcolor );

+				OVERVIEW = false;

+				this.themebuilder.refresh();

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

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

+				

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

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

+			

+				console.log( 'apply color' );

+			}

+		}

+

+		ThemeBuilder.prototype.applyColor = applyColor;

+		

 

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

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

@@ -140,6 +163,11 @@
 													'<span class="settingsLabel">New theme name:</span>' + 

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

 												'</div>' +

+												'<div id="stringcontainer" style="position:absolute;left:425px;top:360px;display:none;">' +

+														'<span>OR HEX: </span>' + 

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

+														'<button style="margin-left:5px;height:17px;margin-top:0;" type="button" id="colorButton"}">ok</button>' + 

+													'</div>' +

 											'</div>';

 		

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

@@ -181,6 +209,22 @@
 		

 		ThemeBuilder.prototype.initializeStorage = initializeStorage;

 		

+		function validateHex(hexcode){

+		

+		     var regColorcode = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/;

+		     

+		     var validity = true;

+		

+		     if( regColorcode.test(hexcode) === false ){

+		     

+		     	validity = false;

+		     }

+		     

+		     return validity;

+		}

+		

+		ThemeBuilder.prototype.validateHex = validateHex;

+		

 		/* MOUSE EVENTS */

 

 		function clear(){

@@ -276,8 +320,8 @@
 		    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.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' ); 

@@ -300,6 +344,23 @@
 					}

 				}

 			}

+			

+			var stringcontainer = document.getElementById( 'stringcontainer' );

+				stringcontainer.style.display = '';

+				stringcontainer.zIndex = 1;

+

+				

+				var colorstring = document.getElementById( 'colorstring' );

+				

+				if( !this.colfld ){

+					this.colfld = new orion.widgets.settings.TextField({}, colorstring );

+					this.colfld.width( '100px' );

+				}

+				var colorButton = document.getElementById( 'colorButton' );

+				colorButton.themebuilder = this;

+				colorButton.onclick = this.applyColor;

+				

+

 		}

 		

 		ThemeBuilder.prototype.drawPicker = drawPicker;

@@ -308,14 +369,10 @@
 

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

 		

@@ -351,7 +408,6 @@
 						

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

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

-						

 						break;

 						

 					case 'RECTANGLE':

@@ -363,8 +419,6 @@
 						break;

 						

 					default:

-					

-						// this.refresh();

 						break;

 				

 				}

@@ -470,6 +524,11 @@
 			}

 			

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

+			Component.drawText( ctx, 'PRESS APPLY BUTTON TO', LEFT + 5 + x, labely + 65, 'bold 8pt Lucida', '#cc0000' );

+			Component.drawText( ctx, 'APPLY PREVIEW', LEFT + 5 + x, labely + 80, 'bold 8pt Lucida', '#cc0000' );

+			

+			var stringcontainer = document.getElementById( 'stringcontainer' );

+				stringcontainer.style.display = 'none';

 		}

 		

 		ThemeBuilder.prototype.overview = overview;

@@ -557,16 +616,22 @@
 				rightpanel.description = 'Main Panel';

 				rightpanel.family = settings.mainpanel.name;

 				

+				var toolpanel = Component.drawRectangle( ctx, LEFT + UI_SIZE * 0.4, CONTENT_TOP, UI_SIZE * 0.6 -1, 30, settings.toolpanel.value );

+				toolpanel.description = 'Tool Panel';

+				toolpanel.family = settings.toolpanel.name;

+				

 				zones.push( navbar );

 				zones.push( username );

 				zones.push( search );

+				zones.push( toolpanel );

 				zones.push( crumbbar );

+				

+				zones.push( selection );

+				

 				zones.push( button );

 

 				zones.push( rightpanel );

 				

-				zones.push( selection );

-				

 				zones.push( breadcrumb );

 				

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

@@ -661,6 +726,7 @@
 				newtheme.location = this.settings.location.value;

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

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

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

 				newtheme.mainpanel = this.settings.mainpanel.value;

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

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

@@ -692,6 +758,8 @@
 		ThemeBuilder.prototype.apply = apply;

 

 		function revert(data){	

+			this.initializeStorage();

+			this.guide();

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

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

 		}

@@ -725,6 +793,7 @@
 					this.settings.selection.value = this.styles[s].selection;

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

 					this.settings.mainpanel.value = this.styles[s].mainpanel;

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

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

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

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

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
index 253e88c..36d2e09 100644
--- 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
@@ -132,13 +132,15 @@
 							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 ) ){

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

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

 							this.over = true;

 						}

 					}

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
index 3a05b71..2e3392e 100644
--- 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
@@ -25,6 +25,7 @@
 		StyleSet.prototype.selection = 'FEC';

 		StyleSet.prototype.sidepanel = '#FBFBFB';

 		StyleSet.prototype.mainpanel = 'white';

+		StyleSet.prototype.toolpanel = 'white';

 		StyleSet.prototype.navtext = '#bfbfbf';

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

 		StyleSet.prototype.search = '#444';

@@ -39,6 +40,7 @@
 			orion.selection = 'FEC';

 			orion.sidepanel = '#FBFBFB';

 			orion.mainpanel = 'white';

+			orion.toolpanel = 'white';

 			orion.navtext = '#bfbfbf';

 			orion.content = '#3087B3';

 			orion.search = '#444';

@@ -54,6 +56,7 @@
 			eire.selection = 'moccasin';

 			eire.sidepanel = 'aliceblue';

 			eire.mainpanel = 'white';

+			eire.toolpanel = 'white';

 			eire.navtext = '#FBFBFB';

 			eire.content = 'darkgreen';

 			eire.search = 'darkgreen';

@@ -69,6 +72,7 @@
 			avril.selection = 'lavender';

 			avril.sidepanel = 'seashell';

 			avril.mainpanel = 'white';

+			avril.toolpanel = 'white';

 			avril.navtext = '#FBFBFB';

 			avril.content = 'mediumorchid';

 			avril.search = 'violet';

@@ -84,6 +88,7 @@
 			blue.selection = 'lavender';

 			blue.sidepanel = 'aliceblue';

 			blue.mainpanel = 'white';

+			blue.toolpanel = 'white';

 			blue.navtext = '#FBFBFB';

 			blue.content = 'royalblue';

 			blue.search = 'royalblue';

@@ -99,6 +104,7 @@
 			vanilla.selection = 'lemonchiffon';

 			vanilla.sidepanel = 'white';

 			vanilla.mainpanel = 'white';

+			vanilla.toolpanel = 'white';

 			vanilla.navtext = 'lemonchiffon';

 			vanilla.content = 'chocolate';

 			vanilla.search = 'moccasin';

@@ -114,6 +120,7 @@
 			beetlejuice.selection = 'silver';

 			beetlejuice.sidepanel = 'lavender';

 			beetlejuice.mainpanel = 'white';

+			beetlejuice.toolpanel = 'white';

 			beetlejuice.navtext = '#FBFBFB';

 			beetlejuice.content = 'mediumslateblue';

 			beetlejuice.search = '#444';

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
index 0886354..f9c1bca 100644
--- 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
@@ -23,7 +23,7 @@
 		var navtext = '#bfbfbf';

 		var content = '#3087B3';

 		var search = '#444';

-		var mainToolbar = 'green';

+		var toolpanel = 'white';

 		

 		function ThemeSheetWriter(){}

 		

@@ -36,7 +36,7 @@
 		ThemeSheetWriter.prototype.navtext = navtext;

 		ThemeSheetWriter.prototype.content = content;

 		ThemeSheetWriter.prototype.search = search;

-		ThemeSheetWriter.prototype.mainToolbar = mainToolbar;

+		ThemeSheetWriter.prototype.toolpanel = toolpanel;

 		

 		function writeNavigationStyle(){

 		

@@ -320,7 +320,7 @@
 			styles.push( mainpane );

 			

 			var mainToolbar = new ThemeClass.ThemeClass( 'mainToolbar' );

-			mainToolbar.style.background = this.mainToolbar;

+			mainToolbar.style.background = this.toolpanel;

 			mainToolbar.style.height = '31px';

 			mainToolbar.style.borderBottom = '1px solid #ebebeb';

 			

@@ -357,7 +357,7 @@
 				this.navtext = settings.navtext.value;

 				this.search = settings.search.value;

 				this.content = settings.content.value;

-				this.mainToolbar = settings.content.mainToolbar;

+				this.toolpanel = settings.toolpanel.value;

 			}else{

 				this.navbar = settings.navbar;

 				this.button = settings.button;

@@ -368,7 +368,7 @@
 				this.navtext = settings.navtext;

 				this.search = settings.search;

 				this.content = settings.content;

-				this.mainToolbar = settings.mainToolbar;

+				this.toolpanel = settings.toolpanel;

 			}

 			

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