#46423 - modern skin splitters, r=nbhatla

themes/modern/communicator/communicator.css

@@ -14,7 +14,6 @@
 @import url(chrome://communicator/skin/brand.css);
 @import url(chrome://communicator/skin/menu.css);
 @import url(chrome://communicator/skin/menubutton.css);
-@import url(chrome://communicator/skin/splitter.css);
 @import url(chrome://communicator/skin/formatting.css);
 @import	url(chrome://communicator/skin/prefpanels.css);
 

themes/modern/communicator/sidebar/makefile.win

@@ -38,6 +38,9 @@ install::
 	$(MAKE_INSTALL) sidebar.css $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
 	$(MAKE_INSTALL) sidebarSplitterBindings.xml $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
 	$(MAKE_INSTALL) sbgrippy-right.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+	$(MAKE_INSTALL) sbgrippy-left.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+	$(MAKE_INSTALL) sbgrippy-right-hover.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+	$(MAKE_INSTALL) sbgrippy-left-hover.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
 	$(MAKE_INSTALL) sbtab-dark.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
 	$(MAKE_INSTALL) sbtab-darkondark-left.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
 	$(MAKE_INSTALL) sbtab-darkondark-right.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar

themes/modern/global/MANIFEST

@@ -33,6 +33,7 @@ closedtwisty.gif
 columnselect-hover.gif
 columnselect.gif
 commonDialog.css
+colorpicker.css
 console.css
 dir-closed.gif
 dir-open.gif
@@ -109,8 +110,16 @@ scroll-up-hover.gif
 scroll-up.gif
 scrollbars.css
 search.gif
-seltab-leftedge.gif
-seltab-rightedge.gif
+grippy-horizontal-after-h.gif
+grippy-horizontal-after.gif
+grippy-horizontal-before-h.gif
+grippy-horizontal-before.gif
+grippy-vertical-after-h.gif
+grippy-vertical-after.gif
+grippy-vertical-before-h.gif
+grippy-vertical-before.gif
+splitter-horizontal-bg.gif
+splitter-vertical-bg.gif
 sortAscending.gif
 sortDescending.gif
 splitter.css
@@ -118,8 +127,6 @@ stop.gif
 stop-clicked.gif
 stop-disabled.gif
 stop-hover.gif
-tab-leftedge.gif
-tab-rightedge.gif
 tabcontrol.css
 taskbar-addressbook-clicked.gif
 taskbar-addressbook.gif

themes/modern/global/Makefile.in

@@ -57,6 +57,7 @@ EXPORT_RESOURCE_SAMPLES_1 = \
 	columnselect-hover.gif \
 	columnselect.gif \
 	commonDialog.css \
+	colorpicker.css \
 	console.css \
 	dir-closed.gif \
 	dir-open.gif \
@@ -128,17 +129,23 @@ EXPORT_RESOURCE_SAMPLES_2 = \
 	scroll-up.gif \
 	scrollbars.css \
 	search.gif \
-	seltab-leftedge.gif \
-	seltab-rightedge.gif \
 	sortAscending.gif \
 	sortDescending.gif \
+	grippy-horizontal-after-h.gif \
+	grippy-horizontal-after.gif \
+	grippy-horizontal-before-h.gif \
+	grippy-horizontal-before.gif \
+	grippy-vertical-after-h.gif \
+	grippy-vertical-after.gif \
+	grippy-vertical-before-h.gif \
+	grippy-vertical-before.gif \
+	splitter-horizontal-bg.gif \
+	splitter-vertical-bg.gif \
 	splitter.css \
 	stop.gif \
 	stop-clicked.gif \
 	stop-disabled.gif \
 	stop-hover.gif \
-	tab-leftedge.gif \
-	tab-rightedge.gif \
 	tabcontrol.css \
 	taskbar-addressbook.gif \
 	taskbar-bg-left.gif \

themes/modern/global/makefile.win

@@ -63,6 +63,7 @@ install::
 	$(MAKE_INSTALL) columnselect-hover.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) columnselect.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) commonDialog.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
+	$(MAKE_INSTALL) colorpicker.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) console.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) dir-closed.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) dir-open.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
@@ -78,6 +79,10 @@ install::
 	$(MAKE_INSTALL) grippy-horizontal-before.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) grippy-vertical-after.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) grippy-vertical-before.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
+	$(MAKE_INSTALL) grippy-horizontal-after-h.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
+	$(MAKE_INSTALL) grippy-horizontal-before-h.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
+	$(MAKE_INSTALL) grippy-vertical-after-h.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
+	$(MAKE_INSTALL) grippy-vertical-before-h.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) lessCOls_dis.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) lessCols.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) lessCols_mo.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
@@ -139,17 +144,15 @@ install::
 	$(MAKE_INSTALL) scroll-up.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) scrollbars.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) search.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
-	$(MAKE_INSTALL) seltab-leftedge.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
-	$(MAKE_INSTALL) seltab-rightedge.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) sortAscending.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) sortDescending.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) splitter.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
+	$(MAKE_INSTALL) splitter-horizontal-bg.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
+	$(MAKE_INSTALL) splitter-vertical-bg.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) stop.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) stop-clicked.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) stop-disabled.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) stop-hover.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
-	$(MAKE_INSTALL) tab-leftedge.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
-	$(MAKE_INSTALL) tab-rightedge.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) tabcontrol.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) taskbar-addressbook-clicked.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) taskbar-addressbook.gif $(DIST)\bin\chrome\skins\$(THEME)\global\skin

themes/modern/global/splitter.css

@@ -1,55 +1,144 @@
 /******* Splitters *******/
 
-splitter 
-  {
-    cursor                : e-resize;
-    background-color      : #CCCCCC;
-  }
-
-splitter[state="dragging"]
-  {
-    background-color      : #999999;
-  }
-
-grippy, grippy[collapse="before"]
-  {
-	  margin                : 0px;
-    border                : 1px outset #CCCCCC;
-	  padding               : 0px;
-	  list-style-image      : url("chrome://global/skin/grippy-vertical-before.gif");
-	  cursor                : pointer;
-  }
-
-grippy:hover
-  {
-	  background-color      : #CCCCFF;
-  }
-
-grippy:hover:active
-  {
-	  border                : 1px inset #CCCCCC;
-  }
-
 /* vertical splitters */
   window > splitter, box > splitter 
     {
-    	width               : 8px;
-      border-left         : 1px outset #CCCCCC;
-      border-right        : 1px outset #CCCCCC;
+      min-width             : 10px;
+      border: none;
+      background-image      : url("chrome://global/skin/splitter-horizontal-bg.gif");
+      text-align            : center;
+      cursor                : e-resize;
     }
   
 /* horizontal splitters */  
-  /* XXX we should comment out the 'align' support to force people to migrate 
-         to 'orient' */
   rows > splitter,
   window[orient="vertical"] > splitter,
-  box[orient="vertical"] > splitter,
-  window[align="vertical"] > splitter,
-  box[align="vertical"] > splitter
+  box[orient="vertical"] > splitter
     {
-      cursor              : n-resize;
-      border-top          : 1px outset #CCCCCC;
-      border-right        : 1px outset #CCCCCC;
+      cursor                : n-resize;
+      background-image      : url("chrome://global/skin/splitter-vertical-bg.gif");
+      min-height            : 10px;
     }
 
+/******* Grippies *******/
+    
+  grippy
+    {
+  	  margin                : 0px;
+  	  padding               : 0px;
+  	  cursor                : pointer;
+      width             : 10px;
+      height            : 110px;
+      background-color      : transparent;
+      background-repeat     : no-repeat;
+      background-position   : 50% 50%;
+    }
 
+  window[orient="vertical"] > splitter > grippy,
+  box[orient="vertical"] > splitter > grippy
+    {
+      width             : 110px;
+      height            : 10px;
+    }
+    
+  /* ................. Normal state ................ */
+
+  /* vertical grippies */
+  splitter[collapse="before"] > grippy
+    {
+      background-image      : url("chrome://global/skin/grippy-horizontal-before.gif");
+    }
+
+  splitter[collapse="after"] > grippy
+    {
+      background-image      : url("chrome://global/skin/grippy-horizontal-after.gif");
+    }
+
+  /* horizontal grippies */
+  window[orient="vertical"] > splitter[collapse="before"] > grippy,
+  box[orient="vertical"] > splitter[collapse="before"] > grippy
+    {
+      background-image    : url("chrome://global/skin/grippy-vertical-before.gif");
+    }  
+
+  window[orient="vertical"] > splitter[collapse="after"] > grippy,
+  box[orient="vertical"] > splitter[collapse="after"] > grippy
+    {
+      background-image    : url("chrome://global/skin/grippy-vertical-after.gif");
+    }  
+    
+  /* ................. Hover state ................ */
+
+  splitter[collapse="before"] > grippy:hover
+    {
+      background-image      : url("chrome://global/skin/grippy-horizontal-before-h.gif");
+    }
+
+  splitter[collapse="after"] > grippy:hover
+    {
+      background-image      : url("chrome://global/skin/grippy-horizontal-after-h.gif");
+    }
+
+  window[orient="vertical"] > splitter[collapse="before"] > grippy:hover,
+  box[orient="vertical"] > splitter[collapse="before"] > grippy:hover
+    {
+      background-image    : url("chrome://global/skin/grippy-vertical-before-h.gif");
+    }  
+
+  window[orient="vertical"] > splitter[collapse="after"] > grippy:hover,
+  box[orient="vertical"] > splitter[collapse="after"] > grippy:hover
+    {
+      background-image    : url("chrome://global/skin/grippy-vertical-after-h.gif");
+    }  
+
+  /* ................. Collapsed state ................ */
+
+
+  splitter[collapse="before"][state="collapsed"] > grippy
+    {
+      background-image      : url("chrome://global/skin/grippy-horizontal-after.gif");
+    }
+
+  splitter[collapse="after"][state="collapsed"] > grippy
+    {
+      background-image      : url("chrome://global/skin/grippy-horizontal-before.gif");
+    }
+
+  window[orient="vertical"] > splitter[collapse="before"][state="collapsed"] > grippy,
+  box[orient="vertical"] > splitter[collapse="before"][state="collapsed"] > grippy
+    {
+      background-image    : url("chrome://global/skin/grippy-vertical-after.gif");
+    }  
+
+  window[orient="vertical"] > splitter[collapse="after"][state="collapsed"] > grippy,
+  box[orient="vertical"] > splitter[collapse="after"][state="collapsed"] > grippy
+    {
+      background-image    : url("chrome://global/skin/grippy-vertical-before.gif");
+    }  
+
+   /* ................. Collapsed Hover state ................ */
+
+
+  splitter[collapse="before"][state="collapsed"] > grippy:hover
+    {
+      background-image      : url("chrome://global/skin/grippy-horizontal-after-h.gif");
+    }
+
+  splitter[collapse="after"][state="collapsed"] > grippy:hover
+    {
+      background-image      : url("chrome://global/skin/grippy-horizontal-before-h.gif");
+    }
+
+  window[orient="vertical"] > splitter[collapse="before"][state="collapsed"] > grippy:hover,
+  box[orient="vertical"] > splitter[collapse="before"][state="collapsed"] > grippy:hover
+    {
+      background-image    : url("chrome://global/skin/grippy-vertical-after-h.gif");
+    }  
+
+  window[orient="vertical"] > splitter[collapse="after"][state="collapsed"] > grippy:hover,
+  box[orient="vertical"] > splitter[collapse="after"][state="collapsed"] > grippy:hover
+    {
+      background-image    : url("chrome://global/skin/grippy-vertical-before-h.gif");
+    }  
+    
+