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
authorJared Wein <jwein@mozilla.com>
Tue, 08 Oct 2013 17:45:07 -0400
changeset 164869 859ff4a1af9816a71c156ccf092f7d063f3e0db0
parent 164868 d7cfe43bfada551c0fdefa5db7b9172ae7ad5f91
child 164870 530dd4a6a9496467ede60886f5511b828775bc6e
push id4703
push userakeybl@mozilla.com
push dateMon, 09 Dec 2013 20:24:19 +0000
treeherdermozilla-aurora@20af7fbd96c1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgijs
bugs924388
milestone27.0a1
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
browser/components/customizableui/src/CustomizableWidgets.jsm
browser/themes/osx/browser.css
browser/themes/windows/browser.css
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -807,17 +807,17 @@
                        hidden="true"
                        overflows="false"
                        label="&sharePageCmd.label;"
                        tooltiptext="&sharePageCmd.label;"
                        customizableui-areatype="toolbar"
                        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"
                      overflows="false"
                      customizableui-areatype="toolbar"
                      observes="socialActiveBroadcaster">
         <toolbarbutton id="social-notification-icon" class="default-notification-icon toolbarbutton-1 notification-anchor-icon"
                    oncommand="PopupNotifications._reshowNotifications(this,
--- a/browser/components/customizableui/src/CustomizableWidgets.jsm
+++ b/browser/components/customizableui/src/CustomizableWidgets.jsm
@@ -272,16 +272,17 @@ const CustomizableWidgets = [{
       }];
 
       let node = aDocument.createElementNS(kNSXUL, "toolbaritem");
       node.setAttribute("id", "zoom-controls");
       node.setAttribute("title", CustomizableUI.getLocalizedProperty(this, "tooltiptext"));
       // 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) {
         let btnNode = aDocument.createElementNS(kNSXUL, "toolbarbutton");
         setAttributes(btnNode, aButton);
         if (inPanel)
           btnNode.setAttribute("tabindex", "0");
         node.appendChild(btnNode);
@@ -419,16 +420,17 @@ const CustomizableWidgets = [{
       }];
 
       let node = aDocument.createElementNS(kNSXUL, "toolbaritem");
       node.setAttribute("id", "edit-controls");
       node.setAttribute("title", CustomizableUI.getLocalizedProperty(this, "tooltiptext"));
       // 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) {
         let btnNode = aDocument.createElementNS(kNSXUL, "toolbarbutton");
         setAttributes(btnNode, aButton);
         if (inPanel)
           btnNode.setAttribute("tabindex", "0");
         node.appendChild(btnNode);
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -388,22 +388,20 @@ toolbarbutton.bookmark-item > menupopup 
 
 .toolbarbutton-1,
 #restore-button {
   margin: 0 4px;
 }
 
 /**
  * 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;
   top: calc(50% - 9px);
   width: 1px;
   height: 18px;
   -moz-margin-end: -1px;
   background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -424,28 +424,29 @@ menuitem.bookmark-item {
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   -moz-border-end: none;
 }
 
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   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;
   height: 18px;
   -moz-margin-end: -1px;
   background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
   background-clip: padding-box;
   background-position: center;