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
--- 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
@@ -509,32 +509,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>
@@ -545,16 +545,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);
+}