Bug 1363840 - Detach the back and forward buttons from the location bar. r?johannh
MozReview-Commit-ID: COBrHtoC03G
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -675,23 +675,33 @@
removable="false"
class="chromeclass-location" overflows="false">
<toolbarbutton id="back-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
label="&backCmd.label;"
command="Browser:BackOrBackDuplicate"
onclick="checkForMiddleClick(this, event);"
tooltip="back-button-tooltip"
context="backForwardMenu"/>
+#ifdef MOZ_PHOTON_THEME
+ <toolbarbutton id="forward-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
+ label="&forwardCmd.label;"
+ command="Browser:ForwardOrForwardDuplicate"
+ onclick="checkForMiddleClick(this, event);"
+ tooltip="forward-button-tooltip"
+ context="backForwardMenu"/>
+#endif
<hbox id="urlbar-wrapper" flex="1">
+#ifndef MOZ_PHOTON_THEME
<toolbarbutton id="forward-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
label="&forwardCmd.label;"
command="Browser:ForwardOrForwardDuplicate"
onclick="checkForMiddleClick(this, event);"
tooltip="forward-button-tooltip"
context="backForwardMenu"/>
+#endif
<textbox id="urlbar" flex="1"
placeholder="&urlbar.placeholder2;"
type="autocomplete"
autocompletesearch="unifiedcomplete"
autocompletesearchparam="enable-actions"
autocompletepopup="PopupAutoCompleteRichResult"
completeselectedindex="true"
shrinkdelay="250"
@@ -1143,28 +1153,30 @@
</html:div>
<vbox id="browser-bottombox" layer="true">
<notificationbox id="global-notificationbox" notificationside="bottom"/>
</vbox>
<svg:svg height="0">
#include tab-shape.inc.svg
+#ifndef MOZ_PHOTON_THEME
<svg:clipPath id="urlbar-back-button-clip-path">
#ifndef XP_MACOSX
<svg:path d="M -9,-4 l 0,1 a 15 15 0 0,1 0,30 l 0,1 l 10000,0 l 0,-32 l -10000,0 z" />
#else
<svg:path d="M -11,-5 a 16 16 0 0 1 0,34 l 10000,0 l 0,-34 l -10000,0 z"/>
#endif
</svg:clipPath>
#ifdef XP_WIN
<svg:clipPath id="urlbar-back-button-clip-path-win10">
<svg:path d="M -6,-2 l 0,1 a 15 15 0 0,1 0,30 l 0,1 l 10000,0 l 0,-32 l -10000,0 z" />
</svg:clipPath>
#endif
+#endif
</svg:svg>
</vbox>
# <iframe id="tab-view"> is dynamically appended as the 2nd child of #tab-view-deck.
# Introducing the iframe dynamically, as needed, was found to be better than
# starting with an empty iframe here in browser.xul from a Ts standpoint.
</deck>
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -386,16 +386,17 @@ menuitem.bookmark-item {
#navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
opacity: 0;
}
#urlbar-container {
-moz-box-align: center;
}
+%ifndef MOZ_PHOTON_THEME
@conditionalForwardWithUrlbar@ > #urlbar {
border-inline-start: none;
margin-left: 0;
}
@conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(ltr) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@@ -415,16 +416,17 @@ menuitem.bookmark-item {
@conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
/* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
transform: scaleX(-1);
}
@conditionalForwardWithUrlbar@:-moz-locale-dir(rtl) {
-moz-box-direction: reverse;
}
+%endif
#urlbar-icons {
-moz-box-align: center;
}
.urlbar-icon {
padding: 0 3px;
/* 16x16 icon with border-box sizing */
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -571,28 +571,29 @@ toolbarpaletteitem[place="palette"] > #p
list-style-image: url("chrome://browser/skin/menu-back.png") !important;
}
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
}
+%ifndef MOZ_PHOTON_THEME
@media (-moz-mac-yosemite-theme) {
#forward-button > .toolbarbutton-icon {
border-top: none !important;
border-bottom: none !important;
box-shadow: 0 .5px 0 0 rgba(0,0,0,0.2) !important;
}
#forward-button:-moz-window-inactive > .toolbarbutton-icon {
box-shadow: 0 1px 0 0 rgba(0,0,0,0.2) inset,
0 -1px 0 0 rgba(0,0,0,0.2) inset !important;
}
}
-
+%endif
/* ----- FULLSCREEN WINDOW CONTROLS ----- */
#minimize-button,
#close-button,
#fullscreen-button ~ #window-controls > #restore-button {
display: none;
}
@@ -642,16 +643,17 @@ toolbarpaletteitem[place="palette"] > #p
#urlbar-container {
-moz-box-align: center;
}
#urlbar {
border-radius: var(--toolbarbutton-border-radius);
}
+%ifndef MOZ_PHOTON_THEME
@conditionalForwardWithUrlbar@ > #urlbar {
border-inline-start: none;
margin-left: 0;
}
@conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(ltr) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@@ -671,16 +673,17 @@ toolbarpaletteitem[place="palette"] > #p
@conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
/* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
transform: scaleX(-1);
}
@conditionalForwardWithUrlbar@:-moz-locale-dir(rtl) {
-moz-box-direction: reverse;
}
+%endif
%include ../shared/identity-block/identity-block.inc.css
#identity-box {
padding-top: 2px;
padding-bottom: 2px;
}
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -200,19 +200,21 @@ toolbar:-moz-lwtheme-darktext {
width: 30px !important;
}
/* the normal theme adds box-shadow: <stuff> !important when the back-button is [open]. Fix: */
#back-button[open="true"] > .toolbarbutton-icon {
box-shadow: none !important;
}
+%ifndef MOZ_PHOTON_THEME
#forward-button > .toolbarbutton-icon {
border-inline-start: none !important;
}
+%endif
/* Override a box shadow for disabled back button */
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
box-shadow: none !important;
}
/* Override !important properties for hovered back button */
#main-window #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
@@ -254,17 +256,19 @@ toolbar:-moz-lwtheme-darktext {
}
%filter substitution
%define selectorSuffix :-moz-lwtheme-brighttext
%define iconVariant -white
%include identity-block/icons.inc.css
#urlbar {
+%ifndef MOZ_PHOTON_THEME
border-inline-start: none !important;
+%endif
opacity: 1 !important;
}
window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
overflow: -moz-hidden-unscrollable;
clip-path: none;
margin-inline-start: 0;
}
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -38,31 +38,33 @@
#identity-icon-labels:-moz-locale-dir(ltr) {
padding-left: 2px;
}
#identity-icon-labels:-moz-locale-dir(rtl) {
padding-right: 2px;
}
+%ifndef MOZ_PHOTON_THEME
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #identity-box {
padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5px);
}
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
/* Forward button hiding is delayed when hovered, so we should use the same
delay for the identity box. We handle both horizontal paddings (for LTR and
RTL), the latter two delays here are for padding-left and padding-right. */
transition-delay: 100s, 100s;
}
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5.01px);
}
+%endif
/* MAIN IDENTITY ICON */
#identity-icon {
width: 16px;
height: 16px;
}
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -1,25 +1,29 @@
/* 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/. */
%filter substitution
%define toolbarShadowColor hsla(209,67%,12%,0.35)
%define forwardTransitionLength 150ms
+%ifndef MOZ_PHOTON_THEME
%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
+%endif
:root {
--toolbarbutton-vertical-inner-padding: 3px;
--toolbarbutton-disabled-opacity: 0.4;
+%ifndef MOZ_PHOTON_THEME
--backbutton-urlbar-overlap: 6px;
/* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
--forwardbutton-width: 25px;
+%endif
}
toolbar:-moz-lwtheme {
--toolbarbutton-hover-background: rgba(255,255,255,.25);
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
--toolbarbutton-active-background: rgba(70%,70%,70%,.25);
--toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
@@ -131,23 +135,25 @@ toolbar[brighttext] .toolbarbutton-1 > .
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
-moz-appearance: none;
padding-inline-start: 0;
-moz-box-align: center;
margin: 0;
}
+%ifndef MOZ_PHOTON_THEME
+@conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon,
+%endif
.findbar-button > .toolbarbutton-text,
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
-@conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
padding: var(--toolbarbutton-vertical-inner-padding) 7px;
background-origin: padding-box !important;
background-clip: padding-box !important;
border: 1px solid transparent;
border-radius: var(--toolbarbutton-border-radius);
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
}
@@ -249,17 +255,19 @@ toolbar[brighttext] .toolbarbutton-1 > .
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover,
.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
+%ifndef MOZ_PHOTON_THEME
@conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
+%endif
#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
background: var(--toolbarbutton-hover-background);
border-color: var(--toolbarbutton-hover-bordercolor);
box-shadow: var(--toolbarbutton-hover-boxshadow);
}
.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
@@ -273,16 +281,17 @@ toolbar[brighttext] .toolbarbutton-1 > .
transition-duration: 10ms;
}
#nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
transition: background-color .4s;
}
+%ifndef MOZ_PHOTON_THEME
/* unified back/forward button */
:-moz-any(#back-button, #forward-button) > .toolbarbutton-icon {
border-color: var(--backbutton-border-color) !important;
}
:-moz-any(#back-button, #forward-button):not(:hover):not(:active):not([open=true]) > .toolbarbutton-icon,
:-moz-any(#back-button, #forward-button)[disabled=true] > .toolbarbutton-icon {
@@ -318,16 +327,17 @@ toolbar[brighttext] .toolbarbutton-1 > .
/* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
transition-delay: 100s;
}
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
/* when not hovered anymore, trigger a new transition to hide the forward button immediately */
margin-left: calc(-0.01px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
}
+%endif
#back-button {
padding-top: 3px !important;
padding-bottom: 3px !important;
padding-inline-start: 5px !important;
padding-inline-end: 0 !important;
position: relative !important;
z-index: 1 !important;
@@ -338,24 +348,34 @@ toolbar[brighttext] .toolbarbutton-1 > .
border-radius: 10000px 0 0 10000px !important;
}
#back-button > menupopup {
margin-top: -1px !important;
}
#back-button > .toolbarbutton-icon {
+%ifdef MOZ_PHOTON_THEME
+ border-color: var(--backbutton-border-color) !important;
+%endif
border-radius: 10000px !important;
padding: 7px !important;
}
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
transform: scaleX(-1);
}
+%ifdef MOZ_PHOTON_THEME
+#back-button:not(:hover):not(:active):not([open=true]) > .toolbarbutton-icon,
+#back-button[disabled=true] > .toolbarbutton-icon {
+ background: var(--backbutton-background) !important;
+}
+%endif
+
/* bookmarks menu-button */
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
-moz-appearance: none !important;
}
#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
padding-top: var(--toolbarbutton-vertical-inner-padding);
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -782,16 +782,17 @@ toolbar[brighttext] #close-button {
background-color: rgba(255,255,255,.9);
}
#urlbar:-moz-lwtheme[focused]:not([readonly]),
.searchbar-textbox:-moz-lwtheme[focused] {
background-color: white;
}
+%ifndef MOZ_PHOTON_THEME
@conditionalForwardWithUrlbar@ > #urlbar {
border-inline-start: none;
padding-inline-start: 0;
margin-left: 0;
}
@conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(ltr) {
border-top-left-radius: 0;
@@ -822,16 +823,17 @@ toolbar[brighttext] #close-button {
@conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
/* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
transform: scaleX(-1);
}
@conditionalForwardWithUrlbar@:-moz-locale-dir(rtl) {
-moz-box-direction: reverse;
}
+%endif
html|*.urlbar-input:-moz-lwtheme::placeholder,
.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
opacity: 1.0;
color: #777;
}
#urlbar-container {