Bug 670476 - Add zoom controls to status bar. r=frg a=IanN
authorFelix Haernstroem <filleeeh@gmail.com>
Sat, 13 Oct 2018 10:39:58 +0200
changeset 28301 5879f7bb3e5e
parent 28300 76b95caa256a
child 28302 15ca33ba27e7
push id2126
push userfrgrahl@gmx.net
push dateSun, 11 Nov 2018 19:36:20 +0000
treeherdercomm-esr52@5879f7bb3e5e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfrg, IanN
bugs670476
Bug 670476 - Add zoom controls to status bar. r=frg a=IanN
suite/browser/browser-prefs.js
suite/browser/navigator.js
suite/browser/navigator.xul
suite/browser/nsBrowserStatusHandler.js
suite/common/viewZoomOverlay.js
suite/common/viewZoomOverlay.xul
suite/themes/classic/mac/navigator/navigator.css
suite/themes/classic/navigator/navigator.css
suite/themes/modern/navigator/navigator.css
--- a/suite/browser/browser-prefs.js
+++ b/suite/browser/browser-prefs.js
@@ -310,16 +310,19 @@ pref("browser.zoom.full", true);
 
 // Whether or not to save and restore zoom levels on a per-site basis.
 pref("browser.zoom.siteSpecific", true);
 
 // Whether or not to update background tabs to the current zoom level
 // once they come to the foreground (i.e. get activated).
 pref("browser.zoom.updateBackgroundTabs", true);
 
+// Whether to show the zoom status and controls in status panel
+pref("browser.zoom.showZoomStatusPanel", false);
+
 // Zoom levels for View > Zoom and Ctrl +/- keyboard shortcuts
 pref("toolkit.zoomManager.zoomValues", "0.2,0.3,0.5,0.67,0.8,0.9,1,1.1,1.2,1.33,1.5,1.7,2,2.4,3,4,5,6,7,8");
 
 pref("javascript.options.showInConsole",    true);
 
 pref("suite.manager.addons.openAsDialog", false);
 pref("suite.manager.dataman.openAsDialog", true);
 
--- a/suite/browser/navigator.js
+++ b/suite/browser/navigator.js
@@ -31,16 +31,93 @@ var gNavigatorRegionBundle;
 var gLastValidURLStr = "";
 var gLastValidURL = null;
 var gClickSelectsAll = false;
 var gClickAtEndSelects = false;
 var gIgnoreFocus = false;
 var gIgnoreClick = false;
 var gURIFixup = null;
 
+// Listeners for updating zoom value in status bar
+const ZoomListeners =
+{
+
+  // Identifies the setting in the content prefs database.
+  name: "browser.content.full-zoom",
+
+  QueryInterface:
+  XPCOMUtils.generateQI([Components.interfaces.nsIObserver,
+                         Components.interfaces.nsIContentPrefObserver,
+                         Components.interfaces.nsIContentPrefCallback2,
+                         Components.interfaces.nsISupportsWeakReference,
+                         Components.interfaces.nsISupports]),
+
+  init: function ()
+  {
+    Components.classes["@mozilla.org/content-pref/service;1"]
+      .getService(Components.interfaces.nsIContentPrefService2)
+      .addObserverForName(this.name, this);
+
+    Services.prefs.addObserver("browser.zoom.", this, true);
+    this.updateVisibility();
+  },
+
+  destroy: function ()
+  {
+    Components.classes["@mozilla.org/content-pref/service;1"]
+      .getService(Components.interfaces.nsIContentPrefService2)
+      .removeObserverForName(this.name, this);
+
+    Services.prefs.removeObserver("browser.zoom.", this);
+  },
+
+  observe: function (aSubject, aTopic, aData)
+  {
+    if (aTopic == "nsPref:changed"){
+      switch (aData) {
+        case "browser.zoom.siteSpecific":
+          updateZoomStatus();
+          break;
+        case "browser.zoom.showZoomStatusPanel":
+          this.updateVisibility();
+          break;
+      }
+    }
+  },
+
+  updateVisibility: function()
+  {
+    let hidden = !Services.prefs.getBoolPref("browser.zoom.showZoomStatusPanel");
+    document.getElementById("zoomOut-button").setAttribute('hidden', hidden);
+    document.getElementById("zoomIn-button").setAttribute('hidden', hidden);
+    document.getElementById("zoomLevel-display").setAttribute('hidden', hidden);
+  },
+
+  onContentPrefSet: function (aGroup, aName, aValue)
+  {
+    updateZoomStatus();
+  },
+
+  onContentPrefRemoved: function (aGroup, aName)
+  {
+    updateZoomStatus();
+  },
+
+  handleResult: function(aPref)
+  {
+    updateZoomStatus();
+  },
+
+  onLocationChange: function(aURI)
+  {
+    // Make sure zoom values loaded before updating
+    window.setTimeout(updateZoomStatus(), 0);
+  }
+};
+
 var gInitialPages = new Set([
   "about:blank",
   "about:privatebrowsing",
   "about:sessionrestore"
 ]);
 
 //cached elements
 var gBrowser = null;
@@ -696,16 +773,19 @@ function Startup()
 
     // initialize the sync UI
     gSyncUI.init();
 
     // initialize the session-restore service
     setTimeout(InitSessionStoreCallback, 0);
   }
 
+  ZoomListeners.init();
+  gBrowser.addTabsProgressListener(ZoomListeners);
+
   window.addEventListener("MozAfterPaint", DelayedStartup, false);
 }
 
 // Minimal gBrowserInit shim to keep the Addon-SDK happy.
 var gBrowserInit = {
   delayedStartupFinished: false,
 }
 
@@ -2549,16 +2629,34 @@ function isClosingLastBrowser() {
     let win = e.getNext();
     if (win != window && win.toolbar.visible)
       return false;
   }
 
   return true;
 }
 
+function updateZoomStatus() {
+  let newLabel = Math.round(ZoomManager.zoom * 100) + " %";
+  let zoomStatusElement = document.getElementById("zoomLevel-display");
+  if (zoomStatusElement.getAttribute('label') != newLabel){
+    zoomStatusElement.setAttribute('label', newLabel);
+  }
+}
+
+function zoomIn() {
+  FullZoom.enlarge();
+  updateZoomStatus();
+}
+
+function zoomOut() {
+  FullZoom.reduce();
+  updateZoomStatus();
+}
+
 /**
  * file upload support
  */
 
 /* This function returns the URI of the currently focused content frame
  * or frameset.
  */
 function getCurrentURI()
--- a/suite/browser/navigator.xul
+++ b/suite/browser/navigator.xul
@@ -507,16 +507,21 @@
   <panel id="customizeToolbarSheetPopup"/>
 
   <statusbar id="status-bar" class="chromeclass-status">
     <statusbarpanel id="component-bar"/>
     <statusbarpanel id="statusbar-display" label="&statusText.label;" flex="1"/>
     <statusbarpanel class="statusbarpanel-progress" id="statusbar-progresspanel" collapsed="true">
       <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/>
     </statusbarpanel>
+    <statusbarpanel class="statusbarpanel-iconic-text zoom-button-align" id="zoomOut-button" label="[-]"
+                    oncommand="zoomOut();"/>
+    <statusbarpanel class="statusbarpanel-iconic-text" id="zoomLevel-display" label="" oncommand="zoomReset();"/>
+    <statusbarpanel class="statusbarpanel-iconic-text zoom-button-align" id="zoomIn-button" label="[+]"
+                    oncommand="zoomIn();"/>
     <statusbarpanel id="popupIcon" class="statusbarpanel-iconic" hidden="true"
                     oncommand="StatusbarViewPopupManager()"
                     tooltiptext="&popupIcon.tooltiptext;"
                     context="popupBlockerMenu"/>
     <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/>
     <statusbarpanel class="statusbarpanel-backgroundbox"
                     id="security-button" dir="reverse"
                     context="security-context-menu"
--- a/suite/browser/nsBrowserStatusHandler.js
+++ b/suite/browser/nsBrowserStatusHandler.js
@@ -255,16 +255,18 @@ nsBrowserStatusHandler.prototype =
       this.statusMeter.value = 0;  // be sure to clear the progress bar
       this.throbberElement.removeAttribute("busy");
 
       // XXX: These need to be based on window activity...
       // XXXjag: <command id="cmd_stop"/> ?
       this.stopButton.disabled = true;
       this.stopMenu.setAttribute('disabled', 'true');
       this.stopContext.setAttribute('disabled', 'true');
+
+      ZoomListeners.onLocationChange(getBrowser().currentURI);
     }
   },
 
   onLocationChange : function(aWebProgress, aRequest, aLocation, aFlags)
   {
     const nsIWebProgressListener = Components.interfaces.nsIWebProgressListener;
     if (gContextMenu) {
       // Optimise for the common case
@@ -336,18 +338,20 @@ nsBrowserStatusHandler.prototype =
       PlacesStarButton.updateState();
 
       this.feedsMenu.setAttribute("disabled", "true");
       this.feedsButton.hidden = true;
       this.feeds = [];
 
       // When background tab comes into foreground or loading a new page
       // (aRequest set), might want to update zoom.
-      if (FullZoom.updateBackgroundTabs || aRequest)
+      if (FullZoom.updateBackgroundTabs || aRequest){
         FullZoom.onLocationChange(getBrowser().currentURI, !aRequest, browser);
+        ZoomListeners.onLocationChange(getBrowser().currentURI);
+      }
     }
     UpdateBackForwardButtons();
 
     UpdateStatusBarPopupIcon();
 
     BrowserSearch.updateSearchButton();
   },
 
--- a/suite/common/viewZoomOverlay.js
+++ b/suite/common/viewZoomOverlay.js
@@ -445,8 +445,38 @@ function openZoomDialog() {
   window.openDialog("chrome://communicator/content/askViewZoom.xul",
                     "", "chrome,modal,centerscreen", o);
   if (o.zoomOK) {
     zoomOther.setAttribute("value", o.value);
     ZoomManager.zoom = o.value / 100;
   }
   return o.zoomOK;
 }
+
+function zoomEnlarge() {
+  FullZoom.enlarge();
+  updateZoomStatus();
+}
+
+function zoomReduce() {
+  FullZoom.reduce();
+  updateZoomStatus();
+}
+
+function zoomReset() {
+  FullZoom.reset();
+  updateZoomStatus();
+}
+
+function zoomSetOther() {
+  FullZoom.setOther();
+  updateZoomStatus();
+}
+
+function zoomToggle() {
+  ZoomManager.toggleZoom();
+  updateZoomStatus();
+}
+
+function zoomSet(aValue) {
+  FullZoom.zoom(aValue)
+  updateZoomStatus();
+}
--- a/suite/common/viewZoomOverlay.xul
+++ b/suite/common/viewZoomOverlay.xul
@@ -19,25 +19,25 @@
     <key id="key_zoomReduce"  key="&zoomReduceCmd.commandkey;"   command="cmd_zoomReduce"  modifiers="accel"/>
     <key id="key_zoomEnlarge" key="&zoomEnlargeCmd.commandkey;"  command="cmd_zoomEnlarge" modifiers="accel"/>
     <key                      key="&zoomEnlargeCmd.commandkey;"  command="cmd_zoomEnlarge" modifiers="accel,shift"/>
     <key                      key="&zoomEnlargeCmd.commandkey2;" command="cmd_zoomEnlarge" modifiers="accel"/>
     <key id="key_zoomReset"   key="&zoomResetCmd.commandkey;"    command="cmd_zoomReset"   modifiers="accel"/>
   </keyset>
 
   <commandset id="viewZoomCommands">
-    <command id="cmd_zoomReduce"  oncommand="FullZoom.reduce();"/>
-    <command id="cmd_zoomEnlarge" oncommand="FullZoom.enlarge();"/>
-    <command id="cmd_zoomReset"   oncommand="FullZoom.reset();"/>
-    <command id="cmd_zoomOther"   oncommand="FullZoom.setOther();"/>
-    <command id="cmd_fullZoomToggle" oncommand="ZoomManager.toggleZoom();"/>
+    <command id="cmd_zoomReduce"  oncommand="zoomReduce();"/>
+    <command id="cmd_zoomEnlarge" oncommand="zoomEnlarge();"/>
+    <command id="cmd_zoomReset"   oncommand="zoomReset();"/>
+    <command id="cmd_zoomOther"   oncommand="zoomSetOther();"/>
+    <command id="cmd_fullZoomToggle" oncommand="zoomToggle();"/>
   </commandset>
 
   <menu id="menu_zoom">
-    <menupopup id="menu_zoomPopup" onpopupshowing="updateZoomMenu();" oncommand="FullZoom.zoom(event.target.value / 100);">
+    <menupopup id="menu_zoomPopup" onpopupshowing="updateZoomMenu();" oncommand="zoomSet(event.target.value / 100);">
       <menuitem id="menu_zoomReduce"
                 key="key_zoomReduce"
                 label="&zoomReduceCmd.label;"
                 accesskey="&zoomReduceCmd.accesskey;"
                 command="cmd_zoomReduce"/>
       <menuitem id="menu_zoomEnlarge"
                 key="key_zoomEnlarge"
                 label="&zoomEnlargeCmd.label;"
--- a/suite/themes/classic/mac/navigator/navigator.css
+++ b/suite/themes/classic/mac/navigator/navigator.css
@@ -1012,8 +1012,16 @@ toolbar[mode="text"] toolbarbutton.chevr
 #feedsButton {
   list-style-image: url("chrome://navigator/skin/btn1/feeds.png");
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
 #feedsButton[open="true"] {
   -moz-image-region: rect(48px 32px 64px 16px) !important;
 }
+
+/* Need to set fixed width to stop the zoom display from changing size and moving around the zoom buttons */
+#zoomLevel-display {
+  width: 60px;
+  max-width: 60px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
--- a/suite/themes/classic/navigator/navigator.css
+++ b/suite/themes/classic/navigator/navigator.css
@@ -799,8 +799,16 @@ toolbar[mode="text"] toolbarbutton.chevr
 #feedsButton {
   list-style-image: url("chrome://navigator/skin/btn1/feeds.png");
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
 #feedsButton:hover {
   -moz-image-region: rect(16px 32px 32px 16px);
 }
+
+/* Need to set fixed width to stop the zoom display from changing size and moving around the zoom buttons */
+#zoomLevel-display {
+  width: 60px;
+  max-width: 60px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
--- a/suite/themes/modern/navigator/navigator.css
+++ b/suite/themes/modern/navigator/navigator.css
@@ -962,8 +962,20 @@ toolbar[mode="text"] toolbarbutton.chevr
 #feedsButton {
   list-style-image: url("chrome://navigator/skin/btn1/feeds.png");
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
 #feedsButton:hover {
   -moz-image-region: rect(16px 32px 32px 16px);
 }
+
+/* Need to set fixed width to stop the zoom display from changing size and moving around the zoom buttons */
+#zoomLevel-display {
+  width: 60px;
+  max-width: 60px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.zoom-button-align{
+  padding-bottom: 3px;
+}