skinnable sidebar

themes/modern/communicator/sidebar/MANIFEST

@@ -14,6 +14,7 @@ sbgrippy-left-hover.gif
 sbgrippy-left.gif
 sbgrippy-right-hover.gif
 sbgrippy-right.gif
+sidebarSplitterBindings.xml
 sidebar-close-hover.gif
 sidebar-close.gif
 sidebar-open-hover.gif

themes/modern/communicator/sidebar/Makefile.in

@@ -42,6 +42,7 @@ EXPORT_RESOURCE_SAMPLES = \
         list-down.gif \
         sidebar-bottomright-cap.gif \
         sidebarOverlay.css \
+        sidebarSplitterBindings.xml \
 	sbgrippy-left-hover.gif \
 	sbgrippy-left.gif \
 	sbgrippy-right-hover.gif \

themes/modern/communicator/sidebar/makefile.win

@@ -40,6 +40,7 @@ install::
 	$(MAKE_INSTALL) sidebar-topright-cap.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
 	$(MAKE_INSTALL) sidebar.css $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
 	$(MAKE_INSTALL) sidebarOverlay.css $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+	$(MAKE_INSTALL) sidebarSplitterBindings.xml $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
 	$(MAKE_INSTALL) sbgrippy-left-hover.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

themes/modern/communicator/sidebar/sidebarOverlay.css

@@ -25,9 +25,11 @@
     padding: 0px;
     border: none;
     background-color: #003366;
+    behavior: 
+        url("chrome://communicator/skin/sidebar/sidebarSplitterBindings.xml#sidebar-splitter");
 }
 
-#sidebar-topright-cap {
+.sidebar-splitter-topright-cap {
     min-height: 8px; 
     background-repeat: no-repeat;
     background-position: 100% 0%;
@@ -35,7 +37,7 @@
         url("chrome://communicator/skin/sidebar/sidebar-topright-cap.gif"); 
 }
 
-#sidebar-bottomright-cap {
+.sidebar-splitter-bottomright-cap {
     min-height: 8px; 
     background-repeat: no-repeat;
     background-position: 100% 100%;
@@ -43,7 +45,7 @@
         url("chrome://communicator/skin/sidebar/sidebar-bottomright-cap.gif"); 
 }
 
-#sidebar-splitter > grippy {
+.sidebar-splitter-grippy {
     margin: 0px;
     padding: 0px;
     border: 2px solid #003366;
@@ -54,20 +56,20 @@
     background-position: 50% 50%;
 }
 
-#sidebar-splitter > grippy:hover,
-#sidebar-splitter > grippy:active {
+.sidebar-splitter-grippy:hover,
+.sidebar-splitter-grippy:active {
     background-color: #99CCFF;
     background-image:
        url("chrome://communicator/skin/sidebar/sbgrippy-left-hover.gif"); 
 }
 
-#sidebar-splitter[collapsed="true"] > grippy {
+#sidebar-splitter[collapsed="true"] .sidebar-splitter-grippy {
     background-image:
        url("chrome://communicator/skin/sidebar/sbgrippy-right.gif"); 
 }
 
-#sidebar-splitter[collapsed="true"] > grippy:hover,
-#sidebar-splitter[collapsed="true"] > grippy:active {
+#sidebar-splitter[collapsed="true"] .sidebar-splitter-grippy:hover,
+#sidebar-splitter[collapsed="true"] .sidebar-splitter-grippy:active {
     background-image:
        url("chrome://communicator/skin/sidebar/sbgrippy-right-hover.gif"); 
 }
@@ -162,22 +164,22 @@ sidebarheader[type="splitter"] {
     display: none;
 }
 
-.texttab.texttab-sidebar {
+.texttab-sidebar {
     background-color: #CCCCCC;
     padding: 0px;
     margin: 0px;
 }
-.texttab.texttab-sidebar[top-panel="true"],
-.texttab.texttab-sidebar[first-panel-after-selected="true"] {
+.texttab-sidebar[top-panel="true"],
+.texttab-sidebar[first-panel-after-selected="true"] {
     background-color: white;
 }
-.texttab.texttab-sidebar > .remain-space {
+.texttab-sidebar > .remain-space {
     width: 30px;
     min-width: 1px;
 }
-.texttab.texttab-sidebar[last-panel="true"] > .remain-space {
+.texttab-sidebar[last-panel="true"] > .remain-space {
   border-bottom: none;
 }
-.texttab.texttab-sidebar[last-panel="true"][selected="true"] > .remain-space {
+.texttab-sidebar[last-panel="true"][selected="true"] > .remain-space {
   border-bottom: 1px solid black;
 }

themes/modern/communicator/sidebar/sidebarSplitterBindings.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+
+<bindings id="sidebarSplitterBindings.xml"
+          xmlns="http://www.mozilla.org/xbl"
+          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <binding id="sidebar-splitter" extends="xul:splitter">
+    <content excludes="observes,template">
+      <xul:box class="sidebar-splitter-topright-cap" orient="vertical">
+        <xul:spring flex="1"/>
+      </xul:box>
+      <xul:spring flex="1"/>
+      <xul:box>
+        <children/>
+      </xul:box>
+      <xul:spring flex="1"/>
+      <xul:box class="sidebar-splitter-bottomright-cap" orient="vertical">
+        <xul:spring flex="100%"/>
+      </xul:box>
+    </content>
+  </binding>
+          
+</bindings> 

xpfe/components/sidebar/resources/sidebarOverlay.xul

@@ -88,17 +88,9 @@
 
   <!-- Splitter on the right of sidebar -->
   <splitter id="sidebar-splitter" collapse="before" persist="state hidden"
-    class="chromeclass-extrachrome sidebar-splitter">
+    class="chromeclass-extrachrome sidebar-splitter"
     onmouseup="SidebarFinishDrag();">
-    <box id="sidebar-topright-cap" align="vertical">
-      <spring flex="100%"/>
-    </box>
-    <spring flex="100%"/>
-    <grippy onclick="SidebarExpandCollapse();"/>
-    <spring flex="100%"/>
-    <box id="sidebar-bottomright-cap" align="vertical">
-    <spring flex="100%"/>
-    </box>
+    <grippy class="sidebar-splitter-grippy" onclick="SidebarExpandCollapse();"/>
   </splitter>
 
   <!-- View->Sidebar toggle -->
@@ -114,7 +106,7 @@
   -->
 
   <!-- Scripts go last, because they peek at state to tweak menus -->
-  <html:script language="JavaScript"
+  <script language="JavaScript"
     src="chrome://communicator/content/sidebar/sidebarOverlay.js"/>
 
 </overlay>