Bug 924388 - There should be small separators between the sub-edit controls and sub-zoom controls when each controls is placed in a toolbar. r=gijs

browser/base/content/browser.xul

@@ -812,7 +812,7 @@
                        command="Social:SharePage"/>
 
         <toolbaritem id="social-toolbar-item"
-                     class="chromeclass-toolbar-additional"
+                     class="chromeclass-toolbar-additional toolbaritem-with-separator"
                      removable="false"
                      title="&socialToolbar.title;"
                      hidden="true"

browser/components/customizableui/src/CustomizableWidgets.jsm

@@ -277,6 +277,7 @@ const CustomizableWidgets = [{
       // Set this as an attribute in addition to the property to make sure we can style correctly.
       node.setAttribute("removable", "true");
       node.classList.add("chromeclass-toolbar-additional");
+      node.classList.add("toolbaritem-combined-buttons");
       node.classList.add(kWidePanelItemClass);
 
       buttons.forEach(function(aButton) {
@@ -424,6 +425,7 @@ const CustomizableWidgets = [{
       // Set this as an attribute in addition to the property to make sure we can style correctly.
       node.setAttribute("removable", "true");
       node.classList.add("chromeclass-toolbar-additional");
+      node.classList.add("toolbaritem-combined-buttons");
       node.classList.add(kWidePanelItemClass);
 
       buttons.forEach(function(aButton) {

browser/themes/osx/browser.css

@@ -393,12 +393,10 @@ toolbarbutton.bookmark-item > menupopup {
 
 /**
  * Draw seperators before toolbar button dropmarkers, as well as between
- * consecutive toolbarbutton-1's within a toolbaritem. We special-case
- * the urlbar-container, since the back and forward buttons certainly do
- * not need a separator between them.
+ * consecutive toolbarbutton-1's within a toolbaritem.
  */
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker::before,
-#nav-bar toolbaritem:not(#urlbar-container) > .toolbarbutton-1 + .toolbarbutton-1::before {
+#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 + .toolbarbutton-1::before {
   content: "";
   display: -moz-box;
   position: absolute;

browser/themes/windows/browser.css

@@ -429,18 +429,19 @@ menuitem.bookmark-item {
   padding: 8px 5px 7px;
 }
 
-#nav-bar #social-toolbar-item {
+#nav-bar .toolbaritem-combined-buttons {
   margin-left: 2px;
   margin-right: 2px;
 }
 
-#nav-bar #social-toolbar-item > .toolbarbutton-1 {
+#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
   padding-left: 0;
   padding-right: 0;
 }
 
 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
-#nav-bar #social-toolbar-item > .toolbarbutton-1:not(:hover):not(:active):not([open]) + .toolbarbutton-1:not(:hover):not(:active):not([open])::before {
+#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:not([open]) + .toolbarbutton-1:not(:hover):not(:active):not([open])::before,
+#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1[disabled]:not(:active):not([open]) + .toolbarbutton-1[disabled]:not(:active):not([open])::before {
   content: "";
   display: -moz-box;
   width: 1px;