Bug 870897: make the zoom controls customizable. r=mconley, sr=Unfocused

browser/base/content/browser.xul

@@ -1007,18 +1007,6 @@
                      label="&fullScreenCmd.label;"
                      tooltiptext="&fullScreenButton.tooltip;"/>
 
-      <toolbaritem id="zoom-controls" class="chromeclass-toolbar-additional"
-                   title="&zoomControls.label;">
-        <toolbarbutton id="zoom-out-button" class="toolbarbutton-1"
-                       label="&fullZoomReduceCmd.label;"
-                       command="cmd_fullZoomReduce"
-                       tooltiptext="&zoomOutButton.tooltip;"/>
-        <toolbarbutton id="zoom-in-button" class="toolbarbutton-1"
-                       label="&fullZoomEnlargeCmd.label;"
-                       command="cmd_fullZoomEnlarge"
-                       tooltiptext="&zoomInButton.tooltip;"/>
-      </toolbaritem>
-
       <toolbarbutton id="feed-button"
                      type="menu"
                      class="toolbarbutton-1 chromeclass-toolbar-additional"

browser/components/customizableui/content/panelUI.inc.xul

@@ -6,10 +6,11 @@
        role="group"
        type="arrow"
        level="top"
-       consumeoutsideclicks="true">
+       consumeoutsideclicks="true"
+       noautofocus="true">
   <panelmultiview id="PanelUI-multiView" mainViewId="PanelUI-mainView">
     <panelview id="PanelUI-mainView" flex="1">
-      <vbox class="PanelUI-pageControls" pack="center">
+      <vbox id="PanelUI-pageControls" pack="center">
         <hbox class="PanelUI-editControls">
           <toolbarbutton id="PanelUI-cut-btn" flex="1"
                          label="&cutCmd.label;"
@@ -27,22 +28,6 @@
                          class="panel-combined-button"
                          command="cmd_paste"/>
         </hbox>
-        <hbox class="PanelUI-zoomControls">
-          <toolbarbutton id="PanelUI-zoomOut-btn" flex="1"
-                         noautoclose="true" label="&fullZoomReduceCmd.label;"
-                         command="cmd_fullZoomReduce"
-                         class="panel-combined-button"
-                         tooltiptext="&zoomOutButton.tooltip;"/>
-          <toolbarbutton id="PanelUI-zoomReset-btn" flex="1"
-                         noautoclose="true" command="cmd_fullZoomReset"
-                         class="panel-combined-button"
-                         tooltiptext="&zoomReset.tooltip;"/>
-          <toolbarbutton id="PanelUI-zoomIn-btn" flex="1"
-                         noautoclose="true" label="&fullZoomEnlargeCmd.label;"
-                         command="cmd_fullZoomEnlarge"
-                         class="panel-combined-button"
-                         tooltiptext="&zoomInButton.tooltip;"/>
-        </hbox>
       </vbox>
 
       <vbox id="PanelUI-contents" type="grid"/>

browser/components/customizableui/content/panelUI.js

@@ -22,8 +22,7 @@ const PanelUI = {
       multiView: "PanelUI-multiView",
       helpView: "PanelUI-help",
       menuButton: "PanelUI-menu-button",
-      panel: "PanelUI-popup",
-      zoomResetButton: "PanelUI-zoomReset-btn"
+      panel: "PanelUI-popup"
     };
   },
 
@@ -42,12 +41,6 @@ const PanelUI = {
       this.panel.addEventListener(event, this);
     }
 
-    // Register ourselves with the service so we know when the zoom prefs change.
-    Services.obs.addObserver(this, "browser-fullZoom:zoomChange", false);
-    Services.obs.addObserver(this, "browser-fullZoom:zoomReset", false);
-
-    this._updateZoomResetButton();
-
     this.helpView.addEventListener("ViewShowing", this._onHelpViewShow, false);
     this.helpView.addEventListener("ViewHiding", this._onHelpViewHide, false);
   },
@@ -58,8 +51,6 @@ const PanelUI = {
     }
     this.helpView.removeEventListener("ViewShowing", this._onHelpViewShow);
     this.helpView.removeEventListener("ViewHiding", this._onHelpViewHide);
-    Services.obs.removeObserver(this, "browser-fullZoom:zoomChange");
-    Services.obs.removeObserver(this, "browser-fullZoom:zoomReset");
   },
 
   /**
@@ -118,13 +109,6 @@ const PanelUI = {
     }
   },
 
-  /**
-   * nsIObserver implementation, responding to zoom pref changes
-   */
-  observe: function (aSubject, aTopic, aData) {
-    this._updateZoomResetButton();
-  },
-
   /**
    * Registering the menu panel is done lazily for performance reasons. This
    * method is exposed so that CustomizationMode can force registration in the
@@ -213,11 +197,6 @@ const PanelUI = {
                            this.panel.state == "showing";
   },
 
-  _updateZoomResetButton: function() {
-    this.zoomResetButton.setAttribute("label", gNavigatorBundle
-      .getFormattedString("zoomReset.label", [Math.floor(ZoomManager.zoom * 100)]));
-  },
-
   _onWidgetPanelCommand: function(aEvent) {
     if (!aEvent.originalTarget.hasAttribute("noautoclose")) {
       aEvent.currentTarget.hidePopup();

browser/components/customizableui/src/CustomizableUI.jsm

@@ -62,7 +62,7 @@ let gFuturePlacements = new Map();
 
 //XXXunf Temporary. Need a nice way to abstract functions to build widgets
 //       of these types.
-let gSupportedWidgetTypes = new Set(["button", "view"]);
+let gSupportedWidgetTypes = new Set(["button", "view", "custom"]);
 
 /**
  * gSeenWidgets remembers which widgets the user has seen for the first time
@@ -76,6 +76,7 @@ let gSavedState = null;
 let gRestoring = false;
 let gDirty = false;
 let gInBatch = false;
+let gResetting = false;
 
 /**
  * gBuildAreas maps area IDs to actual area nodes within browser windows.
@@ -107,6 +108,7 @@ let CustomizableUIInternal = {
       anchor: "PanelUI-menu-button",
       type: CustomizableUI.TYPE_MENU_PANEL,
       defaultPlacements: [
+        "zoom-controls",
         "new-window-button",
         "privatebrowsing-button",
         "save-page-button",
@@ -311,6 +313,8 @@ let CustomizableUIInternal = {
       }
       this.insertWidgetBefore(node, currentNode, container, aArea);
       this._addParentFlex(node);
+      if (gResetting)
+        this.notifyListeners("onWidgetReset", id);
     }
 
     if (currentNode) {
@@ -570,8 +574,10 @@ let CustomizableUIInternal = {
       }
     }
 
-    for (let [,widget] of gPalette)
+    for (let [,widget] of gPalette) {
       widget.instances.delete(document);
+      this.notifyListeners("onWidgetInstanceRemoved", widget.id, document);
+    }
   },
 
   setLocationAttributes: function(aNode, aContainer, aArea) {
@@ -696,52 +702,66 @@ let CustomizableUIInternal = {
       throw new Error("buildWidget was passed a non-widget to build.");
     }
 
-    LOG("Building " + aWidget.id);
+    LOG("Building " + aWidget.id + " of type " + aWidget.type);
 
-    let node = aDocument.createElementNS(kNSXUL, "toolbarbutton");
-
-    node.setAttribute("id", aWidget.id);
-    node.setAttribute("widget-id", aWidget.id);
-    node.setAttribute("widget-type", aWidget.type);
-    if (aWidget.disabled) {
-      node.setAttribute("disabled", true);
-    }
-    node.setAttribute("removable", aWidget.removable);
-    node.setAttribute("label", aWidget.name);
-    node.setAttribute("tooltiptext", aWidget.description);
-    //XXXunf Need to hook this up to a <key> element or something.
-    if (aWidget.shortcut) {
-      node.setAttribute("acceltext", aWidget.shortcut);
-    }
-    node.setAttribute("class", "toolbarbutton-1 chromeclass-toolbar-additional");
-
-    let handler = this.handleWidgetClick.bind(this, aWidget, node);
-    node.addEventListener("command", handler, false);
-
-    // If the widget has a view, and has view showing / hiding listeners,
-    // hook those up to this widget.
-    if (aWidget.type == "view" &&
-        (aWidget.onViewShowing || aWidget.onViewHiding)) {
-      LOG("Widget " + aWidget.id + " has a view with showing and hiding events. Auto-registering event handlers.");
-      let viewNode = aDocument.getElementById(aWidget.viewId);
-
-      if (!viewNode) {
-        ERROR("Could not find the view node with id: " + aWidget.viewId);
-        throw new Error("Could not find the view node with id: " + aWidget.viewId);
-      }
-
-      // PanelUI relies on the .PanelUI-subView class to be able to show only
-      // one sub-view at a time.
-      viewNode.classList.add("PanelUI-subView");
-
-      for (let eventName of kSubviewEvents) {
-        let handler = "on" + eventName;
-        if (typeof aWidget[handler] == "function") {
-          viewNode.addEventListener(eventName, aWidget[handler], false);
+    let node;
+    if (aWidget.type == "custom") {
+      if (aWidget.onBuild) {
+        try {
+          node = aWidget.onBuild(aDocument);
+        } catch (ex) {
+          ERROR("Custom widget with id " + aWidget.id + " threw an error: " + ex.message);
         }
       }
+      if (!node || !(node instanceof aDocument.defaultView.XULElement))
+        ERROR("Custom widget with id " + aWidget.id + " does not return a valid node");
+    }
+    else {
+      node = aDocument.createElementNS(kNSXUL, "toolbarbutton");
 
-      LOG("Widget " + aWidget.id + " showing and hiding event handlers set.");
+      node.setAttribute("id", aWidget.id);
+      node.setAttribute("widget-id", aWidget.id);
+      node.setAttribute("widget-type", aWidget.type);
+      if (aWidget.disabled) {
+        node.setAttribute("disabled", true);
+      }
+      node.setAttribute("removable", aWidget.removable);
+      node.setAttribute("label", aWidget.name);
+      node.setAttribute("tooltiptext", aWidget.description);
+      //XXXunf Need to hook this up to a <key> element or something.
+      if (aWidget.shortcut) {
+        node.setAttribute("acceltext", aWidget.shortcut);
+      }
+      node.setAttribute("class", "toolbarbutton-1 chromeclass-toolbar-additional");
+
+      let handler = this.handleWidgetClick.bind(this, aWidget, node);
+      node.addEventListener("command", handler, false);
+
+      // If the widget has a view, and has view showing / hiding listeners,
+      // hook those up to this widget.
+      if (aWidget.type == "view" &&
+          (aWidget.onViewShowing || aWidget.onViewHiding)) {
+        LOG("Widget " + aWidget.id + " has a view with showing and hiding events. Auto-registering event handlers.");
+        let viewNode = aDocument.getElementById(aWidget.viewId);
+
+        if (!viewNode) {
+          ERROR("Could not find the view node with id: " + aWidget.viewId);
+          throw new Error("Could not find the view node with id: " + aWidget.viewId);
+        }
+
+        // PanelUI relies on the .PanelUI-subView class to be able to show only
+        // one sub-view at a time.
+        viewNode.classList.add("PanelUI-subView");
+
+        for (let eventName of kSubviewEvents) {
+          let handler = "on" + eventName;
+          if (typeof aWidget[handler] == "function") {
+            viewNode.addEventListener(eventName, aWidget[handler], false);
+          }
+        }
+
+        LOG("Widget " + aWidget.id + " showing and hiding event handlers set.");
+      }
     }
 
     aWidget.instances.set(aDocument, node);
@@ -1299,6 +1319,10 @@ let CustomizableUIInternal = {
       widget.onViewHiding = typeof aData.onViewHiding == "function" ? 
                                  aData.onViewHiding :
                                  null;
+    } else if (widget.type == "custom") {
+      widget.onBuild = typeof aData.onBuild == "function" ?
+                                 aData.onBuild :
+                                 null;
     }
 
     if (gPalette.has(widget.id)) {
@@ -1454,6 +1478,7 @@ let CustomizableUIInternal = {
   },
 
   reset: function() {
+    gResetting = true;
     Services.prefs.clearUserPref(kPrefCustomizationState);
     LOG("State reset");
 
@@ -1474,6 +1499,7 @@ let CustomizableUIInternal = {
         this.buildArea(areaId, placements, areaNode);
       }
     }
+    gResetting = false;
   },
 
   _addParentFlex: function(aElement) {

browser/components/customizableui/src/CustomizableWidgets.jsm

@@ -19,6 +19,17 @@ const kPrefCustomizationDebug = "browser.uiCustomization.debug";
 let gModuleName = "[CustomizableWidgets]";
 #include logging.js
 
+function setAttributes(aNode, aAttrs) {
+  for (let [name, value] of Iterator(aAttrs)) {
+    if (!value) {
+      if (aNode.hasAttribute(name))
+        aNode.removeAttribute(name);
+    } else {
+      aNode.setAttribute(name, value);
+    }
+  }
+}
+
 const CustomizableWidgets = [{
     id: "history-panelmenu",
     type: "view",
@@ -237,4 +248,129 @@ const CustomizableWidgets = [{
         win.openPreferences();
       }
     }
+  }, {
+    id: "zoom-controls",
+    name: "Zoom Controls",
+    type: "custom",
+    removable: true,
+    defaultArea: CustomizableUI.AREA_PANEL,
+    allowedAreas: [CustomizableUI.AREA_PANEL, CustomizableUI.AREA_NAVBAR],
+    onBuild: function(aDocument) {
+      let inPanel = (this.currentArea == CustomizableUI.AREA_PANEL);
+      let noautoclose = inPanel ? "true" : null;
+      let flex = inPanel ? "1" : null;
+      let cls = inPanel ? "panel-combined-button" : "toolbarbutton-1";
+      let buttons = [{
+        id: "zoom-out-button",
+        noautoclose: noautoclose,
+        command: "cmd_fullZoomReduce",
+        flex: flex,
+        class: cls,
+        label: "Zoom out",
+        tooltiptext: "Zoom out"
+      }, {
+        id: "zoom-reset-button",
+        noautoclose: noautoclose,
+        command: "cmd_fullZoomReset",
+        flex: flex,
+        class: cls,
+        tooltiptext: "Reset Zoom"
+      }, {
+        id: "zoom-in-button",
+        noautoclose: noautoclose,
+        command: "cmd_fullZoomEnlarge",
+        flex: flex,
+        class: cls,
+        label: "Zoom in",
+        tooltiptext: "Zoom in"
+      }];
+
+      let node = aDocument.createElementNS(kNSXUL, "toolbaritem");
+      node.setAttribute("id", "zoom-controls");
+      node.setAttribute("title", "Zoom Controls");
+      if (inPanel)
+        node.setAttribute("flex", "1");
+      node.classList.add("chromeclass-toolbar-additional");
+
+      buttons.forEach(function(aButton) {
+        let btnNode = aDocument.createElementNS(kNSXUL, "toolbarbutton");
+        setAttributes(btnNode, aButton);
+        node.appendChild(btnNode);
+      });
+
+      // The middle node is the 'Reset Zoom' button.
+      let zoomResetButton = node.childNodes[1];
+      let window = aDocument.defaultView;
+      function updateZoomResetButton() {
+        zoomResetButton.setAttribute("label", window.gNavigatorBundle
+          .getFormattedString("zoomReset.label", [Math.floor(window.ZoomManager.zoom * 100)]));
+      };
+
+      // Register ourselves with the service so we know when the zoom prefs change.
+      Services.obs.addObserver(updateZoomResetButton, "browser-fullZoom:zoomChange", false);
+      Services.obs.addObserver(updateZoomResetButton, "browser-fullZoom:zoomReset", false);
+
+      updateZoomResetButton();
+      if (!inPanel)
+        zoomResetButton.setAttribute("hidden", "true");
+
+      function updateWidgetStyle(aInPanel) {
+        let attrs = {
+          noautoclose: aInPanel ? "true" : null,
+          flex: aInPanel ? "1" : null,
+          class: aInPanel ? "panel-combined-button" : "toolbarbutton-1"
+        };
+        for (let i = 0, l = node.childNodes.length; i < l; ++i) {
+          setAttributes(node.childNodes[i], attrs);
+        }
+        zoomResetButton.setAttribute("hidden", aInPanel ? "false" : "true");
+        if (aInPanel)
+          node.setAttribute("flex", "1");
+        else if (node.hasAttribute("flex"))
+          node.removeAttribute("flex");
+      }
+
+      let listener = {
+        onWidgetAdded: function(aWidgetId, aArea, aPosition) {
+          if (aWidgetId != this.id)
+            return;
+
+          updateWidgetStyle(aArea == CustomizableUI.AREA_PANEL);
+        }.bind(this),
+
+        onWidgetRemoved: function(aWidgetId, aPrevArea) {
+          if (aWidgetId != this.id)
+            return;
+
+          // When a widget is demoted to the palette ('removed'), it's visual
+          // style should change.
+          updateWidgetStyle(false);
+          zoomResetButton.setAttribute("hidden", "true");
+        }.bind(this),
+
+        onWidgetReset: function(aWidgetId) {
+          if (aWidgetId != this.id)
+            return;
+          updateWidgetStyle(this.currentArea == CustomizableUI.AREA_PANEL);
+        }.bind(this),
+
+        onWidgetMoved: function(aWidgetId, aArea) {
+          if (aWidgetId != this.id)
+            return;
+          updateWidgetStyle(aArea == CustomizableUI.AREA_PANEL);
+        }.bind(this),
+
+        onWidgetInstanceRemoved: function(aWidgetId, aDoc) {
+          if (aWidgetId != this.id || aDoc != aDocument)
+            return;
+
+          CustomizableUI.removeListener(listener);
+          Services.obs.removeObserver(updateZoomResetButton, "browser-fullZoom:zoomChange");
+          Services.obs.removeObserver(updateZoomResetButton, "browser-fullZoom:zoomReset");
+        }.bind(this)
+      };
+      CustomizableUI.addListener(listener);
+
+      return node;
+    }
   }];

browser/locales/en-US/chrome/browser/browser.dtd

@@ -532,11 +532,6 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 
 <!ENTITY fullScreenButton.tooltip       "Display the window in full screen">
 
-<!ENTITY zoomOutButton.tooltip          "Zoom out">
-<!ENTITY zoomInButton.tooltip           "Zoom in">
-<!ENTITY zoomControls.label             "Zoom Controls">
-<!ENTITY zoomReset.tooltip              "Reset Zoom">
-
 <!ENTITY quitApplicationCmdWin.label       "Exit"> 
 <!ENTITY quitApplicationCmdWin.accesskey   "x">
 <!ENTITY goBackCmd.commandKey "[">

browser/themes/linux/browser.css

@@ -683,14 +683,6 @@ toolbar > .customization-target > toolbarpaletteitem > #history-panelmenu {
   -moz-image-region: rect(0px 120px 24px 96px);
 }
 
-/* These buttons are going to be removed in later bugs, but until then
- * we're overriding the menuPanel-icons sprites with these ones with
- * !important.
- *
- * Here are the relevant removal bugs:
- * #zoom-out-button, #zoom-in-button - Bug 870897
- */
-
 #zoom-out-button {
   list-style-image: url("moz-icon://stock/gtk-zoom-out?size=toolbar") !important;
 }

browser/themes/linux/customizableui/panelUIOverlay.css

@@ -28,13 +28,13 @@
   list-style-image: url("moz-icon://stock/gtk-paste?size=toolbar&state=disabled");
 }
 
-#PanelUI-zoomOut-btn {
+#PanelUI-contents #zoom-out-button {
   list-style-image: url("moz-icon://stock/gtk-zoom-out?size=toolbar");
   padding-left: 12px;
   padding-right: 12px;
 }
 
-#PanelUI-zoomIn-btn {
+#PanelUI-contents #zoom-in-button {
   list-style-image: url("moz-icon://stock/gtk-zoom-in?size=toolbar");
   padding-left: 12px;
   padding-right: 12px;

browser/themes/osx/customizableui/panelUIOverlay.css

@@ -18,6 +18,7 @@
     width: 20px;
   }
 
+  #PanelUI-contents #zoom-controls toolbarbutton,
   .panel-combined-button {
     list-style-image: url(chrome://browser/skin/customizableui/menuPanel-small-icons@2x.png);
   }
@@ -129,41 +130,37 @@
     -moz-image-region: rect(0 96px 32px 64px);
   }
 
-  #PanelUI-zoomOut-btn {
+  #PanelUI-contents #zoom-out-button {
     -moz-image-region: rect(0 128px 32px 96px);
   }
 
-  #PanelUI-zoomIn-btn {
+  #PanelUI-contents #zoom-in-button {
     -moz-image-region: rect(0 160px 32px 128px);
   }
 }
 
-.PanelUI-pageControls toolbarbutton:not(:first-child) {
+#PanelUI-pageControls toolbarbutton:not(:first-child),
+#PanelUI-contents #zoom-controls toolbarbutton:not(:first-child) {
   -moz-margin-start: 0;
 }
-.PanelUI-pageControls toolbarbutton:not(:last-child) {
+#PanelUI-pageControls toolbarbutton:not(:last-child),
+#PanelUI-contents #zoom-controls toolbarbutton:not(:last-child) {
   -moz-margin-end: 0;
 }
-.PanelUI-pageControls toolbarbutton:not(:first-child):not(:last-child) {
+#PanelUI-pageControls toolbarbutton:not(:first-child):not(:last-child),
+#PanelUI-contents #zoom-controls toolbarbutton:not(:first-child):not(:last-child) {
   margin-left: 0;
   margin-right: 0;
 }
 
-#PanelUI-zoomIn-btn,
-#PanelUI-zoomOut-btn {
+#PanelUI-contents #zoom-in-button,
+#PanelUI-contents #zoom-out-button {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.PanelUI-editControls #PanelUI-copy-btn,
-.PanelUI-zoomControls #PanelUI-zoomReset-btn {
-  border-left: none;
-  border-right: none;
-  border-radius: 0;
-}
-
-#PanelUI-zoomIn-btn .toolbarbutton-text,
-#PanelUI-zoomOut-btn .toolbarbutton-text,
-#PanelUI-zoomReset-btn .toolbarbutton-icon {
+#PanelUI-contents #zoom-in-button .toolbarbutton-text,
+#PanelUI-contents #zoom-out-button .toolbarbutton-text,
+#PanelUI-contents #zoom-reset-button .toolbarbutton-icon {
   display: none;
 }

browser/themes/shared/browser.inc

@@ -1,3 +1,3 @@
 %filter substitution
 
-%define primaryToolbarButtons #back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button, #social-share-button
+%define primaryToolbarButtons #back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button, #social-share-button

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -52,13 +52,30 @@
   font-size: 10px;
 }
 
-.PanelUI-pageControls {
+#PanelUI-contents #wrapper-zoom-controls {
+  margin-left: -1em;
+  margin-right: -1em;
+  width: calc(100% + 2em);
+}
+
+#PanelUI-contents #zoom-controls,
+#PanelUI-pageControls {
   padding: 1em 0 0;
 }
 
+#PanelUI-contents #zoom-controls {
+  -moz-margin-start: -1em;
+  -moz-box-align: stretch;
+  width: calc(100% + 2em);
+}
+
+#PanelUI-contents #wrapper-zoom-controls #zoom-controls {
+  -moz-margin-start: 0;
+}
+
 .PanelUI-footer,
 .PanelUI-editControls,
-.PanelUI-zoomControls,
+#PanelUI-contents #zoom-controls,
 #PanelUI-contents,
 .PanelUI-footer,
 .panel-mainview:not([panelid="PanelUI-popup"]) {
@@ -92,11 +109,8 @@ panelview:not([mainview]) .toolbarbutton-text,
   display: block;
 }
 
-.PanelUI-pageControls toolbarbutton {
-  min-width: 7em;
-}
-
-.PanelUI-pageControls toolbarbutton > .toolbarbutton-icon {
+#PanelUI-pageControls toolbarbutton > .toolbarbutton-icon,
+#PanelUI-contents #zoom-controls toolbarbutton > .toolbarbutton-icon {
   -moz-margin-end: 0;
 }
 
@@ -112,8 +126,30 @@ panelview:not([mainview]) .toolbarbutton-text,
   list-style-image: url(chrome://browser/skin/customizableui/menuPanel-icons.png);
 }
 
+#PanelUI-contents #zoom-controls toolbarbutton,
+#PanelUI-pageControls toolbarbutton {
+  -moz-box-orient: horizontal;
+  min-width: 7em;
+}
+
+#customization-palette #zoom-controls toolbarbutton,
+#PanelUI-contents #zoom-controls toolbarbutton {
+  max-width: none;
+  max-height: none;
+  height: auto;
+}
+
+#customization-palette #zoom-reset-button {
+  display: none;
+}
+
+#customization-palette #zoom-controls toolbarbutton {
+  min-width: 1em;
+}
+
 /* These smaller icons have different styling between the panel and the toolbar,
    hence not referencing toolbar.png for these icons. */
+#PanelUI-contents #zoom-controls toolbarbutton,
 .panel-combined-button {
   list-style-image: url(chrome://browser/skin/customizableui/menuPanel-small-icons.png);
 }
@@ -124,17 +160,23 @@ panelview:not([mainview]) .toolbarbutton-text,
   min-height: calc(8em / 3);
   margin: calc(5em / 12);
 }
+ 
+#PanelUI-contents #zoom-controls toolbarbutton > .toolbarbutton-icon {
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+}
 
 .PanelUI-editControls #PanelUI-copy-btn,
-.PanelUI-zoomControls #PanelUI-zoomReset-btn {
+#PanelUI-contents #zoom-controls #zoom-reset-button {
   border-left: none;
   border-right: none;
   border-radius: 0;
 }
 
-#PanelUI-zoomIn-btn .toolbarbutton-text,
-#PanelUI-zoomOut-btn .toolbarbutton-text,
-#PanelUI-zoomReset-btn .toolbarbutton-icon {
+#PanelUI-contents #zoom-in-button .toolbarbutton-text,
+#PanelUI-contents #zoom-out-button .toolbarbutton-text,
+#PanelUI-contents #zoom-reset-button .toolbarbutton-icon {
   display: none;
 }
 
@@ -179,7 +221,8 @@ panelview toolbarbutton,
 
 panelview toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
 #widget-overflow-list > toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
-#PanelUI-mainView .PanelUI-pageControls toolbarbutton,
+#PanelUI-pageControls toolbarbutton,
+#PanelUI-contents #zoom-controls toolbarbutton,
 .customizationmode-button,
 #PanelUI-mainView #PanelUI-customize-btn {
   background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
@@ -342,18 +385,39 @@ toolbarbutton.panel-multiview-anchor {
   -moz-image-region: rect(0 48px 16px 32px);
 }
 
-#PanelUI-zoomOut-btn {
+#PanelUI-contents #zoom-out-button {
   -moz-image-region: rect(0 64px 16px 48px);
 }
 
-#PanelUI-zoomReset-btn {
+#PanelUI-contents #zoom-reset-button {
   list-style-image: none;
 }
 
-#PanelUI-zoomIn-btn {
+#PanelUI-contents #zoom-in-button {
   -moz-image-region: rect(0 80px 16px 64px);
 }
 
+#PanelUI-contents #zoom-out-button {
+  -moz-margin-end: none;
+}
+
+#PanelUI-contents #zoom-in-button {
+  -moz-border-start: 1px solid;
+  -moz-margin-start: none;
+}
+
+#PanelUI-contents #zoom-out-button:-moz-locale-dir(ltr),
+#PanelUI-contents #zoom-in-button:-moz-locale-dir(rtl) {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+#PanelUI-contents #zoom-out-button:-moz-locale-dir(rtl),
+#PanelUI-contents #zoom-in-button:-moz-locale-dir(ltr) {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
 /* These icons are missing from Toolbar.png, so this is a temporary
    hack until they are added. */
 toolbar > .customization-target > #find-button,

browser/themes/windows/customizableui/panelUIOverlay.css

@@ -7,7 +7,7 @@
 
 %include ../../shared/customizableui/panelUIOverlay.inc.css
 
-.PanelUI-pageControls toolbarbutton {
+#PanelUI-pageControls toolbarbutton {
   list-style-image: url("chrome://browser/skin/Toolbar.png");
 }
 
@@ -21,12 +21,12 @@
   -moz-image-region: rect(0, 252px, 18px, 234px);
 }
 
-#PanelUI-zoomOut-btn {
+#PanelUI-contents #zoom-out-btn {
   -moz-image-region: rect(0, 288px, 18px, 270px);
   padding-left: 12px;
   padding-right: 12px;
 }
-#PanelUI-zoomIn-btn {
+#PanelUI-contents #zoom-in-btn {
   -moz-image-region: rect(0, 306px, 18px, 288px);
   padding-left: 12px;
   padding-right: 12px;