#46423 - modern skin sidebar, r=nbhatla

themes/modern/communicator/sidebar/MANIFEST

@@ -18,3 +18,14 @@ sidebar-close-hover.gif
 sidebar-close.gif
 sidebar-open-hover.gif
 sidebar-open.gif
+sbtab-darkondark-right.gif
+sbtab-darkondark-left.gif
+sbtab-darkonlight-right.gif
+sbtab-darkonlight-left.gif
+sbtab-lightondark-right.gif
+sbtab-lightondark-left.gif
+sbtab-dark.gif
+sbtab-light.gif
+sbsplitter-bg.gif
+sbpicker-arrow.gif
+

themes/modern/communicator/sidebar/Makefile.in

@@ -42,6 +42,16 @@ EXPORT_RESOURCE_SAMPLES = \
         list-down.gif \
         sidebar-bottomright-cap.gif \
         sidebarSplitterBindings.xml \
+        sbtab-darkondark-left.gif \
+        sbtab-darkondark-right.gif \
+        sbtab-darkonlight-left.gif \
+        sbtab-darkonlight-right.gif \
+        sbtab-lightondark-left.gif \
+        sbtab-lightondark-right.gif \
+        sbtab-dark.gif \
+        sbtab-light.gif \
+        sbsplitter-bg.gif \
+        sbpicker-arrow.gif \
 	sbgrippy-left-hover.gif \
 	sbgrippy-left.gif \
 	sbgrippy-right-hover.gif \

themes/modern/communicator/sidebar/makefile.win

@@ -35,17 +35,18 @@ install::
 	$(MAKE_INSTALL) list-up-dis.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
 	$(MAKE_INSTALL) list-up.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
 	$(MAKE_INSTALL) preview.css $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
-	$(MAKE_INSTALL) sidebar-bottomright-cap.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
-	$(MAKE_INSTALL) sidebar-icon.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
-	$(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) 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
 	$(MAKE_INSTALL) sbgrippy-right.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
-	$(MAKE_INSTALL) sidebar-close-hover.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
-	$(MAKE_INSTALL) sidebar-close.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
-	$(MAKE_INSTALL) sidebar-open-hover.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
-	$(MAKE_INSTALL) sidebar-open.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
+	$(MAKE_INSTALL) sbtab-darkonlight-left.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+	$(MAKE_INSTALL) sbtab-darkonlight-right.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+	$(MAKE_INSTALL) sbtab-light.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+	$(MAKE_INSTALL) sbtab-lightondark-left.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+	$(MAKE_INSTALL) sbtab-lightondark-right.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+	$(MAKE_INSTALL) sbsplitter-bg.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+	$(MAKE_INSTALL) sbpicker-arrow.gif $(DIST)\bin\chrome\skins\$(THEME)\communicator\skin\sidebar
+  
 

themes/modern/communicator/sidebar/sidebar.css

@@ -20,46 +20,35 @@
  */ 
 
 #sidebar-splitter {
-    margin-right: 1px;
-    margin-top: 1px;
-    padding: 0px;
+    -moz-binding: url("chrome://communicator/skin/sidebar/sidebarSplitterBindings.xml#sidebar-splitter");
     border: none;
-    background-color: #003366;
-    -moz-binding: 
-        url("chrome://communicator/skin/sidebar/sidebarSplitterBindings.xml#sidebar-splitter");
+    padding: 0px;
+    width: 10px;
+    background-image: url("chrome://communicator/skin/sidebar/sbsplitter-bg.gif");
 }
 
 .sidebar-splitter-topright-cap {
-    margin-left: 1px;
-    height: 7px; 
-    width: 7px;
-    list-style-image:
-        url("chrome://communicator/skin/sidebar/sidebar-topright-cap.gif"); 
 }
 
 .sidebar-splitter-bottomright-cap {
-    margin-left: 1px;
-    height: 7px; 
-    width: 7px;
-    list-style-image:
-        url("chrome://communicator/skin/sidebar/sidebar-bottomright-cap.gif"); 
 }
 
 .sidebar-splitter-grippy {
-    background-color: transparent;
     margin: 0px;
     padding: 0px;
-    background-image:
-       url("chrome://communicator/skin/sidebar/sbgrippy-left.gif"); 
+    width: 10px;
+    height: 110px;
+    border: none !important;
+    background-image: url("chrome://communicator/skin/sidebar/sbgrippy-right.gif"); 
+    background-color: transparent;
     background-repeat: no-repeat;
     background-position: 50% 50%;
 }
-
+/*
 .sidebar-splitter-grippy:hover,
 .sidebar-splitter-grippy:active {
     background-color: transparent;
-    background-image:
-       url("chrome://communicator/skin/sidebar/sbgrippy-left-hover.gif"); 
+    background-image: url("chrome://communicator/skin/sidebar/sbgrippy-left-hover.gif"); 
 }
 
 #sidebar-splitter[state="collapsed"] > .sidebar-splitter-grippy {
@@ -72,22 +61,23 @@
     background-image:
        url("chrome://communicator/skin/sidebar/sbgrippy-right-hover.gif"); 
 }
-
-/**/
+*/
 
 #sidebar-box {
-    margin-top: 1px;
-    border: none;
-    border-bottom: 8px solid #003366;
+    margin-top: 0px;
+    border-top: 1px solid #8C9AB2;
+    border-bottom: 4px solid #5C7794;
 }
 
 .text-panel-loading {
     margin: 5px 0px;
 }
+
 .image-panel-loading {
     margin: 5px;
     list-style-image: url("chrome://global/skin/loading.gif"); 
 }
+
 box[loadstate="stopped"] > box > box >  .image-panel-loading {
     visibility: hidden;
 }
@@ -96,31 +86,53 @@ box[loadstate="stopped"] > box > box >  .image-panel-loading {
  *    Sidebar and Panel title buttons
  */
 .sidebarheader-main {
-    color: #CCFFFF;
-    background-color: #003366;
-    border: 0px !important;
-    padding-left: 4px;
+  color: #ffffff;
+  background-color: #5C7794;
+  padding-left: 18px;
+  padding-bottom: 2px;
 }
+
 .sidebarheader-main > .sidebar-header-text {
-    font-weight: bold;
-    margin: 2px;
+  font-weight: bold;
 }
 
 .sidebarheader-main > .sidebar-header-grippy {
-    min-height: 8px;
+  min-height: 8px;
+}
+
+#sidebar-panel-picker {
+  border                  : 1px solid #5C7794;
+  margin-right            : 1px;
+  margin-top              : 1px;
+  padding                 : 2px;
+  color                   : #ffffff;
+  -moz-border-radius      : 0px;
 }
 
 #sidebar-panel-picker:hover {
-    background-color: #336699;
+  border                  : 1px outset #5C7794;
 }
+
+#sidebar-panel-picker[menuactive="true"],
+#sidebar-panel-picker[open="true"] 
+{
+  border-style                  : inset;
+}
+
 #sidebar-panel-picker > .menu-right {
-    list-style-image: url("chrome://global/skin/toolbar-menu-arrow.gif");
-    padding-right: 2px;
+  padding-right                 : 2px;
 }
+
+#sidebar-panel-picker > .menubutton-internal-box > .menubutton-single-icon
+{
+  list-style-image              : url("chrome://communicator/skin/sidebar/sbpicker-arrow.gif");
+  padding-left                  : 2px;
+}
+
 #sidebar-panel-picker > .menu-text {
-    color: #CCFFFF;
     padding-left: 4px;
 }
+
 #sidebar-panel-picker > .menu-accel {
     display: none;
 }
@@ -131,29 +143,39 @@ box[loadstate="stopped"] > box > box >  .image-panel-loading {
   .box-texttab
     {
       -moz-binding        : url("chrome://communicator/content/sidebar/sidebarBindings.xml#texttab");
-      background-color    : #CCCCCC;
+      background-color    : #5C7794;
       padding-top         : 2px;
+      border-bottom       : 3px solid #5C7794;
     }
 
   .box-texttab[selected="true"] 
     {
-      border-bottom       : 1px solid #FFFFFF;
+      border-bottom       : 3px solid #C1C8D5;
     }    
     
   .box-texttab[top-panel="true"]
     {
-      background-color    : #003366;
+      background-color    : #5C7794;
     }
   
   .box-texttab[first-panel-after-selected="true"] 
     {
-      background-color    : #FFFFFF;
+      background-color    : #C1C8D5;
     }
 
+  .box-texttab[first-panel-after-selected="true"]  > .box-texttab-left
+    {
+      list-style-image    : url("chrome://communicator/skin/sidebar/sbtab-darkonlight-left.gif");
+    }
+
+  .box-texttab[first-panel-after-selected="true"]  > .box-texttab-right
+    {
+      list-style-image    : url("chrome://communicator/skin/sidebar/sbtab-darkonlight-right.gif");
+    }
+    
   .box-texttab-right-space 
     {
-      width               : 30px;
-      border-bottom       : 1px solid #000000;
+      width               : 0px;
     }
 
   .box-texttab[last-panel="true"] > .box-texttab-right-space 
@@ -163,38 +185,40 @@ box[loadstate="stopped"] > box > box >  .image-panel-loading {
 
   .box-texttab[last-panel="true"][selected="true"] > .box-texttab-right-space 
     {
-      border-bottom       : 1px solid #000000;
     } 
 
   .box-texttab-left
     {
-      list-style-image    : url("chrome://global/skin/tab-leftedge.gif");
+      list-style-image    : url("chrome://communicator/skin/sidebar/sbtab-darkondark-left.gif");
     }
 
   .box-texttab-right
     {
-      list-style-image    : url("chrome://global/skin/tab-rightedge.gif");
+      list-style-image    : url("chrome://communicator/skin/sidebar/sbtab-darkondark-right.gif");
     }
 
   .box-texttab[selected="true"] > .box-texttab-left
     {
-      list-style-image    : url("chrome://global/skin/seltab-leftedge.gif");
+      list-style-image    : url("chrome://communicator/skin/sidebar/sbtab-lightondark-left.gif");
     }
 
   .box-texttab[selected="true"] > .box-texttab-right
     {
-      list-style-image    : url("chrome://global/skin/seltab-rightedge.gif");
+      list-style-image    : url("chrome://communicator/skin/sidebar/sbtab-lightondark-right.gif");
     }
 
   .box-texttab-text-container
     {
-      border-top          : 1px solid #000000;
-      background-color    : #CCCCCC;
+      background-color    : #5C7794;
+      background          : url("chrome://communicator/skin/sidebar/sbtab-dark.gif") repeat-x;
+      color               : #ffffff;
+      padding-top         : 2px;
     }
 
   .box-texttab[selected="true"] > .box-texttab-text-container
     {
-      background-color    : #FFFFFF;
-      font-weight         : bold;
+      background: url("chrome://communicator/skin/sidebar/sbtab-light.gif") repeat-x;
+      background-color    : #C1C8D5;
+      color               : #000000;
     }
     

themes/modern/jar.mn

@@ -134,8 +134,6 @@ skins/modern.jar:
     global/skin/scroll-up.gif                                  (global/scroll-up.gif)
     global/skin/scrollbars.css                                 (global/scrollbars.css)
     global/skin/search.gif                                     (global/search.gif)
-    global/skin/seltab-leftedge.gif                            (global/seltab-leftedge.gif)
-    global/skin/seltab-rightedge.gif                           (global/seltab-rightedge.gif)
     global/skin/sortAscending.gif                              (global/sortAscending.gif)
     global/skin/sortDescending.gif                             (global/sortDescending.gif)
     global/skin/splitter.css                                   (global/splitter.css)
@@ -144,8 +142,6 @@ skins/modern.jar:
     global/skin/stop-clicked.gif                               (global/stop-clicked.gif)
     global/skin/stop-disabled.gif                              (global/stop-disabled.gif)
     global/skin/stop-hover.gif                                 (global/stop-hover.gif)
-    global/skin/tab-leftedge.gif                               (global/tab-leftedge.gif)
-    global/skin/tab-rightedge.gif                              (global/tab-rightedge.gif)
     global/skin/taskbar-addressbook.gif                        (global/taskbar-addressbook.gif)
     global/skin/taskbar-composer.gif                           (global/taskbar-composer.gif)
     global/skin/taskbar-mail.gif                               (global/taskbar-mail.gif)
@@ -415,6 +411,16 @@ skins/modern.jar:
     communicator/skin/sidebar/sidebar-close.gif                (communicator/sidebar/sidebar-close.gif)
     communicator/skin/sidebar/sidebar-open-hover.gif           (communicator/sidebar/sidebar-open-hover.gif)
     communicator/skin/sidebar/sidebar-open.gif                 (communicator/sidebar/sidebar-open.gif)
+    communicator/skin/sidebar/sbtab-darkondark-right.gif       (communicator/sidebar/sbtab-darkondark-right.gif)
+    communicator/skin/sidebar/sbtab-darkondark-left.gif        (communicator/sidebar/sbtab-darkondark-left.gif)
+    communicator/skin/sidebar/sbtab-darkonlight-right.gif      (communicator/sidebar/sbtab-darkonlight-right.gif)
+    communicator/skin/sidebar/sbtab-darkonlight-left.gif       (communicator/sidebar/sbtab-darkonlight-left.gif)
+    communicator/skin/sidebar/sbtab-lightondark-right.gif      (communicator/sidebar/sbtab-lightondark-right.gif)
+    communicator/skin/sidebar/sbtab-lightondark-left.gif       (communicator/sidebar/sbtab-lightondark-left.gif)
+    communicator/skin/sidebar/sbtab-light.gif                  (communicator/sidebar/sbtab-light.gif)
+    communicator/skin/sidebar/sbtab-dark.gif                   (communicator/sidebar/sbtab-dark.gif)
+    communicator/skin/sidebar/sbsplitter-bg.gif                (communicator/sidebar/sbsplitter-bg.gif)
+    communicator/skin/sidebar/sbpicker-arrow.gif               (communicator/sidebar/sbpicker-arrow.gif)
     communicator/skin/xpinstall/xpinstall.css                  (communicator/xpinstall/xpinstall.css)
     editor/skin/images/Map_Copy.gif                            (editor/images/Map_Copy.gif)
     editor/skin/images/Map_Cut.gif                             (editor/images/Map_Cut.gif)