Bug 1363840 - Detach the back and forward buttons from the location bar. r?johannh draft
authorDão Gottwald <dao@mozilla.com>
Thu, 11 May 2017 00:32:12 +0200
changeset 575891 c033cc9dde704a4f608fc2f2cff4ebfc57d65448
parent 575702 20fef6e0d6820053eb168cf704dde114063275a7
child 628033 089f95374df4513220b1c66f3046411111612a29
push id58185
push userdgottwald@mozilla.com
push dateWed, 10 May 2017 22:32:26 +0000
reviewersjohannh
bugs1363840
milestone55.0a1
Bug 1363840 - Detach the back and forward buttons from the location bar. r?johannh MozReview-Commit-ID: COBrHtoC03G
browser/base/content/browser.xul
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/identity-block/identity-block.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/windows/browser.css
--- 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 {