Bug 1354105 - Add zoom controls - zoom in, zoom reset, zoom out and fullscreen - buttons to the Photon app menu. r=Gijs
authorMike de Boer <mdeboer@mozilla.com>
Thu, 01 Jun 2017 19:36:04 +0200
changeset 361854 cb9964c009802b73dd7eb600cfbf7652b3663361
parent 361853 c2459c0a6ffaf894b80c1e77f7d875cc6c0824ed
child 361855 5c6f747f4ed675eae81f3fa8c309924ee9b51b66
push id43905
push usermdeboer@mozilla.com
push dateThu, 01 Jun 2017 17:56:09 +0000
treeherderautoland@cb9964c00980 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1354105
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1354105 - Add zoom controls - zoom in, zoom reset, zoom out and fullscreen - buttons to the Photon app menu. r=Gijs MozReview-Commit-ID: 8cJg4vbdYgL
browser/base/content/browser.js
browser/components/customizableui/content/panelUI.inc.xul
browser/locales/en-US/chrome/browser/browser.properties
browser/modules/FullZoomUI.jsm
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/icons/fullscreen-enter.svg
browser/themes/shared/icons/fullscreen-exit.svg
browser/themes/shared/jar.inc.mn
browser/themes/shared/menupanel.inc.css
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -5507,41 +5507,49 @@ var gHomeButton = {
 };
 
 const nodeToTooltipMap = {
   "bookmarks-menu-button": "bookmarksMenuButton.tooltip",
   "context-reload": "reloadButton.tooltip",
   "context-stop": "stopButton.tooltip",
   "downloads-button": "downloads.tooltip",
   "fullscreen-button": "fullscreenButton.tooltip",
+  "appMenu-fullscreen-button": "fullscreenButton.tooltip",
   "new-window-button": "newWindowButton.tooltip",
   "new-tab-button": "newTabButton.tooltip",
   "tabs-newtab-button": "newTabButton.tooltip",
   "reload-button": "reloadButton.tooltip",
   "stop-button": "stopButton.tooltip",
   "urlbar-zoom-button": "urlbar-zoom-button.tooltip",
   "appMenu-cut-button": "cut-button.tooltip",
   "appMenu-copy-button": "copy-button.tooltip",
   "appMenu-paste-button": "paste-button.tooltip",
+  "appMenu-zoomEnlarge-button": "zoomEnlarge-button.tooltip",
+  "appMenu-zoomReset-button": "zoomReset-button.tooltip",
+  "appMenu-zoomReduce-button": "zoomReduce-button.tooltip",
 };
 const nodeToShortcutMap = {
   "bookmarks-menu-button": "manBookmarkKb",
   "context-reload": "key_reload",
   "context-stop": "key_stop",
   "downloads-button": "key_openDownloads",
   "fullscreen-button": "key_fullScreen",
+  "appMenu-fullscreen-button": "key_fullScreen",
   "new-window-button": "key_newNavigator",
   "new-tab-button": "key_newNavigatorTab",
   "tabs-newtab-button": "key_newNavigatorTab",
   "reload-button": "key_reload",
   "stop-button": "key_stop",
   "urlbar-zoom-button": "key_fullZoomReset",
   "appMenu-cut-button": "key_cut",
   "appMenu-copy-button": "key_copy",
   "appMenu-paste-button": "key_paste",
+  "appMenu-zoomEnlarge-button": "key_fullZoomEnlarge",
+  "appMenu-zoomReset-button": "key_fullZoomReset",
+  "appMenu-zoomReduce-button": "key_fullZoomReduce",
 };
 
 if (AppConstants.platform == "macosx") {
   nodeToTooltipMap["print-button"] = "printButton.tooltip";
   nodeToShortcutMap["print-button"] = "printKb";
 }
 
 const gDynamicTooltipCache = new Map();
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -512,32 +512,32 @@
         <vbox id="appMenu-addon-banners"/>
         <toolbarbutton class="panel-banner-item"
                        label-update-available="&updateAvailable.panelUI.label;"
                        label-update-manual="&updateManual.panelUI.label;"
                        label-update-restart="&updateRestart.panelUI.label2;"
                        oncommand="PanelUI._onBannerItemSelected(event)"
                        wrap="true"
                        hidden="true"/>
-        <toolbaritem id="appMenu-fxa-container">
+        <toolbaritem id="appMenu-fxa-container" class="toolbaritem-combined-buttons">
           <hbox id="appMenu-fxa-status"
                 flex="1"
                 defaultlabel="&fxaSignIn.label;"
                 signedinTooltiptext="&fxaSignedIn.tooltip;"
                 tooltiptext="&fxaSignedIn.tooltip;"
                 errorlabel="&fxaSignInError.label;"
                 unverifiedlabel="&fxaUnverified.label;"
                 onclick="if (event.which == 1) gSync.onMenuPanelCommand();">
             <image id="appMenu-fxa-avatar"/>
             <toolbarbutton id="appMenu-fxa-label"
                            class="subviewbutton subviewbutton-iconic"
                            label="&fxaSignIn.label;"
                            fxabrandname="&syncBrand.fxAccount.label;"/>
           </hbox>
-          <toolbarseparator/>
+          <toolbarseparator orient="vertical"/>
           <toolbarbutton id="appMenu-fxa-icon"
                          class="subviewbutton subviewbutton-iconic"
                          oncommand="gSync.doSync();"
                          closemenu="none">
             <observes element="sync-status" attribute="syncstatus"/>
             <observes element="sync-status" attribute="tooltiptext"/>
           </toolbarbutton>
         </toolbaritem>
@@ -548,16 +548,38 @@
                        key="key_newNavigator"
                        command="cmd_newNavigator"/>
         <toolbarbutton id="appMenu-private-window-button"
                        class="subviewbutton subviewbutton-iconic"
                        label="&newPrivateWindow.label;"
                        key="key_privatebrowsing"
                        command="Tools:PrivateBrowsing"/>
         <toolbarseparator/>
+        <toolbaritem id="appMenu-zoom-controls" class="toolbaritem-combined-buttons" closemenu="none">
+          <label value="&fullZoom.label;"/>
+          <toolbarbutton id="appMenu-zoomReduce-button"
+                         class="subviewbutton subviewbutton-iconic"
+                         command="cmd_fullZoomReduce"
+                         tooltip="dynamic-shortcut-tooltip"/>
+          <toolbarbutton id="appMenu-zoomReset-button"
+                         class="subviewbutton"
+                         command="cmd_fullZoomReset"
+                         tooltip="dynamic-shortcut-tooltip"/>
+          <toolbarbutton id="appMenu-zoomEnlarge-button"
+                         class="subviewbutton subviewbutton-iconic"
+                         command="cmd_fullZoomEnlarge"
+                         tooltip="dynamic-shortcut-tooltip"/>
+          <toolbarseparator orient="vertical"/>
+          <toolbarbutton id="appMenu-fullscreen-button"
+                         class="subviewbutton subviewbutton-iconic"
+                         observes="View:FullScreen"
+                         type="checkbox"
+                         tooltip="dynamic-shortcut-tooltip"/>
+        </toolbaritem>
+        <toolbarseparator/>
         <toolbaritem id="appMenu-edit-controls" class="toolbaritem-combined-buttons" closemenu="none">
           <label value="&editMenu.label;"/>
           <toolbarbutton id="appMenu-cut-button"
                          class="subviewbutton subviewbutton-iconic"
                          command="cmd_cut"
                          tooltip="dynamic-shortcut-tooltip"/>
           <toolbarbutton id="appMenu-copy-button"
                          class="subviewbutton subviewbutton-iconic"
--- a/browser/locales/en-US/chrome/browser/browser.properties
+++ b/browser/locales/en-US/chrome/browser/browser.properties
@@ -485,16 +485,23 @@ pu.notifyButton.label=Details…
 pu.notifyButton.accesskey=D
 # LOCALIZATION NOTE %S will be replaced by the short name of the application.
 puNotifyText=%S has been updated
 puAlertTitle=%S Updated
 puAlertText=Click here for details
 
 # Application menu
 
+# LOCALIZATION NOTE(zoomReduce-button.tooltip): %S is the keyboard shortcut.
+zoomReduce-button.tooltip = Zoom out (%S)
+# LOCALIZATION NOTE(zoomReset-button.tooltip): %S is the keyboard shortcut.
+zoomReset-button.tooltip = Reset zoom level (%S)
+# LOCALIZATION NOTE(zoomEnlarge-button.tooltip): %S is the keyboard shortcut.
+zoomEnlarge-button.tooltip = Zoom in (%S)
+
 # LOCALIZATION NOTE (cut-button.tooltip): %S is the keyboard shortcut.
 cut-button.tooltip = Cut (%S)
 # LOCALIZATION NOTE (copy-button.tooltip): %S is the keyboard shortcut.
 copy-button.tooltip = Copy (%S)
 # LOCALIZATION NOTE (paste-button.tooltip): %S is the keyboard shortcut.
 paste-button.tooltip = Paste (%S)
 
 # Geolocation UI
--- a/browser/modules/FullZoomUI.jsm
+++ b/browser/modules/FullZoomUI.jsm
@@ -57,29 +57,33 @@ function onFullZoomChange(event) {
  *   change is related to tab switching. Optional
  */
 function updateZoomUI(aBrowser, aAnimate = false) {
   let win = aBrowser.ownerGlobal;
   if (aBrowser != win.gBrowser.selectedBrowser) {
     return;
   }
 
+  let appMenuZoomReset = win.document.getElementById("appMenu-zoomReset-button");
   let customizableZoomControls = win.document.getElementById("zoom-controls");
   let customizableZoomReset = win.document.getElementById("zoom-reset-button");
   let urlbarZoomButton = win.document.getElementById("urlbar-zoom-button");
   let zoomFactor = Math.round(win.ZoomManager.zoom * 100);
 
   // Hide urlbar zoom button if zoom is at 100% or the customizable control is
   // in the toolbar.
   urlbarZoomButton.hidden =
     (zoomFactor == 100 ||
      (customizableZoomControls &&
       customizableZoomControls.getAttribute("cui-areatype") == "toolbar"));
 
   let label = win.gNavigatorBundle.getFormattedString("zoom-button.label", [zoomFactor]);
+  if (appMenuZoomReset) {
+    appMenuZoomReset.setAttribute("label", label);
+  }
   if (customizableZoomReset) {
     customizableZoomReset.setAttribute("label", label);
   }
   if (!urlbarZoomButton.hidden) {
     if (aAnimate) {
       urlbarZoomButton.setAttribute("animate", "true");
     } else {
       urlbarZoomButton.removeAttribute("animate");
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -721,40 +721,28 @@ toolbarpaletteitem[place="palette"] > to
   padding-inline-start: 10px;
 }
 
 .panel-banner-item > .toolbarbutton-text {
   width: 0; /* Fancy cropping solution for flexbox. */
 }
 
 /* FxAccount indicator bits. */
+#appMenu-fxa-container:not([fxastatus="signedin"]) {
+  margin-inline-end: 0;
+}
+
 #appMenu-fxa-label,
 #appMenu-fxa-icon {
-  padding: 4px;
-  -moz-appearance: none;
-  box-shadow: none;
-  border-radius: 0;
-  border: 0 none;
-  -moz-box-orient: horizontal;
   -moz-image-region: rect(0, 16px, 16px, 0);
   list-style-image: url(chrome://browser/skin/sync-horizontalbar.png);
 }
 
 #appMenu-fxa-label {
   -moz-box-flex: 1;
-  padding-inline-start: 12px;
-  margin: 0;
-}
-
-#appMenu-fxa-icon {
-  margin: 0 10px;
-}
-
-#appMenu-fxa-icon > .toolbarbutton-text {
-  display: none;
 }
 
 #appMenu-fxa-icon[syncstatus="active"] {
   list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png);
 }
 
 #appMenu-fxa-status {
   -moz-box-align: center;
@@ -772,52 +760,34 @@ toolbarpaletteitem[place="palette"] > to
     -moz-image-region: rect(0, 32px, 32px, 0);
   }
 
   #appMenu-fxa-icon[syncstatus="active"] {
     list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar@2x.png);
   }
 }
 
-#appMenu-fxa-container {
-  -moz-box-orient: horizontal;
-}
-
 /* Handle different UI states. */
 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label > .toolbarbutton-icon,
 #appMenu-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
 #appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-icon,
 #appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-status > #appMenu-fxa-avatar {
   display: none;
 }
 
 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label {
   /* 12px space before the avatar, then 16px for the avatar */
   padding-inline-start: 28px;
   margin-inline-start: -28px;
 }
-#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status {
-  margin-inline-end: 10px;
-}
 
 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar {
   margin-inline-start: 12px;
 }
 
-#appMenu-fxa-container[fxastatus="signedin"] > toolbarseparator {
-  -moz-appearance: none;
-  height: 24px;
-  margin: 0;
-  border: 0 none;
-  width: 1px;
-  /* Use background: rather than background-color: to override background-image
-   * styles on OS X */
-  background: var(--arrowpanel-dimmed);
-}
-
 /* Error states */
 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status > #appMenu-fxa-label,
 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status > #appMenu-fxa-label {
   list-style-image: url(chrome://browser/skin/warning.svg);
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 #appMenu-fxa-container[fxastatus="login-failed"],
@@ -1307,20 +1277,21 @@ photonpanelmultiview .subviewbutton[chec
   list-style-image: url(chrome://browser/skin/check.svg);
 }
 
 photonpanelmultiview .subviewbutton > .menu-iconic-left {
   -moz-appearance: none;
   margin-inline-end: 0;
 }
 
-photonpanelmultiview .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) {
+photonpanelmultiview .toolbaritem-combined-buttons@inAnyPanel@ {
   -moz-box-align: center;
   -moz-box-orient: horizontal;
   border: 0;
+  border-radius: 0;
   margin-inline-end: 8px;
 }
 
 photonpanelmultiview .toolbaritem-combined-buttons > label {
   -moz-box-flex: 1;
   font: menu;
   margin: 0;
   padding-inline-start: 36px; /* 12px toolbarbutton padding + 16px icon + 8px label padding start */
@@ -1329,20 +1300,46 @@ photonpanelmultiview .toolbaritem-combin
 photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton {
   -moz-box-flex: 0;
   height: auto;
   margin-inline-start: 18px;
   min-width: auto;
   padding: 4px;
 }
 
-photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton > .toolbarbutton-text {
+#appMenu-zoom-controls > .subviewbutton {
+  margin-inline-start: 10px;
+}
+
+.toolbaritem-combined-buttons > toolbarseparator[orient="vertical"] + .subviewbutton,
+#appMenu-zoom-controls > toolbarseparator[orient="vertical"] + .subviewbutton {
+  margin-inline-start: 0;
+}
+
+photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons >
+  .subviewbutton-iconic > .toolbarbutton-text,
+photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons >
+  .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon {
   display: none;
 }
 
+/* Using this selector, because this way the hover and active selectors will apply properly. */
+photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons >
+  .subviewbutton:not(.subviewbutton-iconic) {
+  background-color: #f9f9f9;
+  border: 1px solid #e1e1e1;
+  border-radius: 10000px;
+  padding: 1px 8px;
+}
+
+photonpanelmultiview .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
+  font-size: 1em;
+  padding-inline-start: 0;
+}
+
 photonpanelmultiview .panel-banner-item::after {
   margin-inline-end: 14px;
   margin-inline-start: 10px;
 }
 
 /* END photon adjustments */
 
 panelview .toolbarbutton-1,
@@ -1462,16 +1459,25 @@ menuitem.panel-subview-footer@menuStateA
   margin-right: 5px;
 }
 
 .cui-widget-panelview menuseparator.small-separator {
   margin-left: 10px;
   margin-right: 10px;
 }
 
+.PanelUI-subView toolbarseparator[orient="vertical"] {
+  height: 24px;
+  border-inline-start: 1px solid var(--panel-separator-color);
+  border-top: none;
+  margin: 0;
+  margin-inline-start: 4px;
+  margin-inline-end: 5px;
+}
+
 .subviewbutton > .menu-accel-container {
   -moz-box-pack: start;
   margin-inline-start: 10px;
   margin-inline-end: auto;
   color: GrayText;
 }
 
 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/fullscreen-enter.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M7.707 8.293a1 1 0 0 0-1.414 0L3 11.586V9a1 1 0 0 0-2 0v5a1 1 0 0 0 1 1h5a1 1 0 1 0 0-2H4.414l3.293-3.293a1 1 0 0 0 0-1.414zM14 1H9a1 1 0 0 0 0 2h2.586L8.293 6.293a1 1 0 1 0 1.414 1.414L13 4.414V7a1 1 0 0 0 2 0V2a1 1 0 0 0-1-1z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/fullscreen-exit.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M1.3 14.7c.4.4 1 .4 1.4 0L6 11.4V14c0 .6.4 1 1 1s1-.4 1-1V9c0-.6-.4-1-1-1H2c-.6 0-1 .4-1 1s.4 1 1 1h2.6l-3.3 3.3c-.4.4-.4 1 0 1.4zM9 8h5c.6 0 1-.4 1-1s-.4-1-1-1h-2.6l3.3-3.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L10 4.6V2c0-.6-.4-1-1-1s-1 .5-1 1v5c0 .6.4 1 1 1z"/>
+</svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -115,16 +115,18 @@
   skin/classic/browser/edit-cut.svg                   (../shared/icons/edit-cut.svg)
   skin/classic/browser/edit-paste.svg                 (../shared/icons/edit-paste.svg)
   skin/classic/browser/email-link.svg                 (../shared/icons/email-link.svg)
   skin/classic/browser/feed.svg                       (../shared/icons/feed.svg)
   skin/classic/browser/find.svg                       (../shared/icons/find.svg)
   skin/classic/browser/forget.svg                     (../shared/icons/forget.svg)
   skin/classic/browser/forward.svg                    (../shared/icons/forward.svg)
   skin/classic/browser/fullscreen.svg                 (../shared/icons/fullscreen.svg)
+  skin/classic/browser/fullscreen-enter.svg           (../shared/icons/fullscreen-enter.svg)
+  skin/classic/browser/fullscreen-exit.svg            (../shared/icons/fullscreen-exit.svg)
   skin/classic/browser/help.svg                       (../shared/icons/help.svg)
   skin/classic/browser/history.svg                    (../shared/icons/history.svg)
   skin/classic/browser/home.svg                       (../shared/icons/home.svg)
   skin/classic/browser/library.svg                    (../shared/icons/library.svg)
   skin/classic/browser/link.svg                       (../shared/icons/link.svg)
   skin/classic/browser/mail.svg                       (../shared/icons/mail.svg)
   skin/classic/browser/menu.svg                       (../shared/icons/menu.svg)
   skin/classic/browser/new-tab.svg                    (../shared/icons/new-tab.svg)
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -228,8 +228,24 @@ toolbarpaletteitem[place="palette"] > #z
 
 #appMenu-paste-button {
   list-style-image: url(chrome://browser/skin/edit-paste.svg);
 }
 
 #appMenu-quit-button {
   list-style-image: url(chrome://browser/skin/quit.svg);
 }
+
+#appMenu-zoomEnlarge-button {
+  list-style-image: url(chrome://browser/skin/zoom-in.svg);
+}
+
+#appMenu-zoomReduce-button {
+  list-style-image: url(chrome://browser/skin/zoom-out.svg);
+}
+
+#appMenu-fullscreen-button {
+  list-style-image: url(chrome://browser/skin/fullscreen-enter.svg);
+}
+
+#appMenu-fullscreen-button[checked] {
+  list-style-image: url(chrome://browser/skin/fullscreen-exit.svg);
+}