Bug 777175: fix sidebar splitter styling, r=dao

--HG--
extra : rebase_source : 67e661eb551c9da94fb023c8bfd08b1b4ad7eebd

browser/base/content/browser.xul

@@ -1056,7 +1056,7 @@
                 style="min-width: 14em; width: 18em; max-width: 36em;"/>
     </vbox>
 
-    <splitter id="sidebar-splitter" class="chromeclass-extrachrome" hidden="true"/>
+    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" hidden="true"/>
     <vbox id="appcontent" flex="1">
       <tabbrowser id="content" disablehistory="true"
                   flex="1" contenttooltip="aHTMLTooltip"
@@ -1075,7 +1075,7 @@
       <deck id="devtools-sidebar-deck" flex="1"/>
     </vbox>
     <splitter id="social-sidebar-splitter"
-              class="chromeclass-extrachrome"
+              class="chromeclass-extrachrome sidebar-splitter"
               observes="socialSidebarBroadcaster"/>
     <vbox id="social-sidebar-box"
           class="chromeclass-extrachrome"

browser/themes/pinstripe/browser.css

@@ -1651,12 +1651,22 @@ sidebarheader {
   -moz-appearance: none;
 }
 
-#sidebar-splitter {
+.sidebar-splitter {
   -moz-border-start: none;
   -moz-border-end: 1px solid #404040;
   min-width: 1px;
-  width: 1px;
+  width: 3px;
   background-image: none !important;
+  background-color: transparent;
+  -moz-margin-start: -3px;
+  position: relative;
+}
+
+#appcontent ~ .sidebar-splitter {
+  -moz-border-start: 1px solid #404040;
+  -moz-border-end: none;
+  -moz-margin-start: 0;
+  -moz-margin-end: -3px;
 }
 
 #sidebar-title {

browser/themes/winstripe/browser-aero.css

@@ -89,7 +89,7 @@
     border-color: hsla(206,100%,60%,.65) hsla(206,100%,55%,.65) hsla(206,100%,50%,.65);
   }
 
-  #sidebar-splitter {
+  .sidebar-splitter {
     border: 0;
     -moz-border-end: 1px solid #A9B7C9;
     min-width: 0;
@@ -99,6 +99,13 @@
     position: relative;
   }
 
+  #appcontent ~ .sidebar-splitter {
+    -moz-border-start: 1px solid #A9B7C9;
+    -moz-border-end: none;
+    -moz-margin-start: 0;
+    -moz-margin-end: -3px;
+  }
+
   .menu-accel,
   .menu-iconic-accel {
     color: graytext;