Bug 1364090 - Detach the reload and stop buttons from the location bar. r=johannh draft
authorDão Gottwald <dao@mozilla.com>
Thu, 11 May 2017 18:12:59 +0200
changeset 576338 2c5dde6b56ab94b94c7925af9d6a01e6567730f3
parent 576334 3b96f277325747fe668ca8cd896d2f581238e4ee
child 628158 3dd6b7b9b53f06a1ed295f1a0267a9bf07e42bfa
push id58320
push userdgottwald@mozilla.com
push dateThu, 11 May 2017 16:13:13 +0000
reviewersjohannh
bugs1364090
milestone55.0a1
Bug 1364090 - Detach the reload and stop buttons from the location bar. r=johannh MozReview-Commit-ID: B2ShchHbYOg
browser/base/content/browser.css
browser/base/content/browser.js
browser/base/content/browser.xul
browser/base/content/test/permissions/browser_temporary_permissions_navigation.js
browser/base/content/test/tabs/browser_navigatePinnedTab.js
browser/base/content/test/tabs/browser_reload_deleted_file.js
browser/base/content/test/urlbar/browser_locationBarCommand.js
browser/base/content/test/urlbar/browser_locationBarExternalLoad.js
browser/base/content/theme-vars.inc.css
browser/base/content/urlbarBindings.xml
browser/base/jar.mn
browser/components/extensions/test/browser/browser_ext_themes_icons.js
browser/modules/BrowserUITelemetry.jsm
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/browser.inc
browser/themes/shared/browser.inc.css
browser/themes/shared/toolbarbutton-icons.inc.css
browser/themes/windows/browser.css
testing/marionette/harness/marionette_harness/tests/unit/test_mouse_action.py
testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/browser/toolbars.py
toolkit/components/passwordmgr/test/browser/browser_formless_submit_chrome.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -428,18 +428,18 @@ toolbar:not(#TabsToolbar) > #wrapper-per
 toolbar:not(#TabsToolbar) > #personal-bookmarks {
   -moz-box-flex: 1;
 }
 
 #zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
   display: -moz-box;
 }
 
-#urlbar-reload-button:not([displaystop]) + #urlbar-stop-button,
-#urlbar-reload-button[displaystop] {
+#reload-button:not([displaystop]) + #stop-button,
+#reload-button[displaystop] {
   visibility: collapse;
 }
 
 #PanelUI-feeds > .feed-toolbarbutton:-moz-locale-dir(rtl) {
   direction: rtl;
 }
 
 #panelMenu_bookmarksMenu > .bookmark-item {
@@ -607,22 +607,24 @@ html|input.urlbar-input[textoverflow]:no
   transition: none;
 }
 
 #DateTimePickerPanel[active="true"] {
   -moz-binding: url("chrome://global/content/bindings/datetimepopup.xml#datetime-popup");
 }
 
 #urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon,
+%ifdef MOZ_PHOTON_THEME
+.urlbar-go-button[pageproxystate="valid"],
+.urlbar-go-button:not([parentfocused="true"]),
+%else
 #urlbar[pageproxystate="invalid"][focused="true"] > #urlbar-go-button ~ toolbarbutton,
 #urlbar[pageproxystate="valid"] > #urlbar-go-button,
-#urlbar:not([focused="true"]) > #urlbar-go-button {
-  visibility: collapse;
-}
-
+#urlbar:not([focused="true"]) > #urlbar-go-button,
+%endif
 #urlbar[pageproxystate="invalid"] > #identity-box > #blocked-permissions-container,
 #urlbar[pageproxystate="invalid"] > #identity-box > #notification-popup-box,
 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon-labels {
   visibility: collapse;
 }
 
 #identity-box {
   -moz-user-focus: normal;
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -4985,18 +4985,18 @@ var LinkTargetDisplay = {
   }
 };
 
 var CombinedStopReload = {
   init() {
     if (this._initialized)
       return;
 
-    let reload = document.getElementById("urlbar-reload-button");
-    let stop = document.getElementById("urlbar-stop-button");
+    let reload = document.getElementById("reload-button");
+    let stop = document.getElementById("stop-button");
     if (!stop || !reload || reload.nextSibling != stop)
       return;
 
     this._initialized = true;
     if (XULBrowserWindow.stopCommand.getAttribute("disabled") != "true")
       reload.setAttribute("displaystop", "true");
     stop.addEventListener("click", this);
     this.reload = reload;
@@ -5577,31 +5577,31 @@ const nodeToTooltipMap = {
   "bookmarks-menu-button": "bookmarksMenuButton.tooltip",
   "context-reload": "reloadButton.tooltip",
   "context-stop": "stopButton.tooltip",
   "downloads-button": "downloads.tooltip",
   "fullscreen-button": "fullscreenButton.tooltip",
   "new-window-button": "newWindowButton.tooltip",
   "new-tab-button": "newTabButton.tooltip",
   "tabs-newtab-button": "newTabButton.tooltip",
-  "urlbar-reload-button": "reloadButton.tooltip",
-  "urlbar-stop-button": "stopButton.tooltip",
+  "reload-button": "reloadButton.tooltip",
+  "stop-button": "stopButton.tooltip",
   "urlbar-zoom-button": "urlbar-zoom-button.tooltip",
 };
 const nodeToShortcutMap = {
   "bookmarks-menu-button": "manBookmarkKb",
   "context-reload": "key_reload",
   "context-stop": "key_stop",
   "downloads-button": "key_openDownloads",
   "fullscreen-button": "key_fullScreen",
   "new-window-button": "key_newNavigator",
   "new-tab-button": "key_newNavigatorTab",
   "tabs-newtab-button": "key_newNavigatorTab",
-  "urlbar-reload-button": "key_reload",
-  "urlbar-stop-button": "key_stop",
+  "reload-button": "key_reload",
+  "stop-button": "key_stop",
   "urlbar-zoom-button": "key_fullZoomReset",
 };
 
 if (AppConstants.platform == "macosx") {
   nodeToTooltipMap["print-button"] = "printButton.tooltip";
   nodeToShortcutMap["print-button"] = "printKb";
 }
 
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -670,28 +670,43 @@
              overflowpanel="widget-overflow"
              context="toolbar-context-menu">
 
       <hbox id="nav-bar-customization-target" flex="1">
         <toolbaritem id="urlbar-container" flex="400" persist="width"
                      removable="false"
                      class="chromeclass-location" overflows="false">
           <toolbarbutton id="back-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
+                         removable="false" overflows="false"
                          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"
+                         removable="false" overflows="false"
                          label="&forwardCmd.label;"
                          command="Browser:ForwardOrForwardDuplicate"
                          onclick="checkForMiddleClick(this, event);"
                          tooltip="forward-button-tooltip"
                          context="backForwardMenu"/>
+          <toolbaritem id="stop-reload-button"
+                       removable="false" overflows="false"
+                       class="chromeclass-toolbar-additional">
+            <toolbarbutton id="reload-button"
+                           class="toolbarbutton-1"
+                           command="Browser:ReloadOrDuplicate"
+                           onclick="checkForMiddleClick(this, event);"
+                           tooltip="dynamic-shortcut-tooltip"/>
+            <toolbarbutton id="stop-button"
+                           class="toolbarbutton-1"
+                           command="Browser:Stop"
+                           tooltip="dynamic-shortcut-tooltip"/>
+          </toolbaritem>
 #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"
@@ -803,31 +818,35 @@
                        onclick="FullZoom.reset();"
                        tooltip="dynamic-shortcut-tooltip"
                        hidden="true"/>
               </hbox>
               <hbox id="userContext-icons" hidden="true">
                 <label id="userContext-label"/>
                 <image id="userContext-indicator"/>
               </hbox>
+#ifndef MOZ_PHOTON_THEME
               <toolbarbutton id="urlbar-go-button"
                              class="chromeclass-toolbar-additional"
                              onclick="gURLBar.handleCommand(event);"
                              tooltiptext="&goEndCap.tooltip;"/>
-              <toolbarbutton id="urlbar-reload-button"
+              <toolbarbutton id="reload-button"
                              class="chromeclass-toolbar-additional"
                              command="Browser:ReloadOrDuplicate"
                              onclick="checkForMiddleClick(this, event);"
                              tooltip="dynamic-shortcut-tooltip"/>
-              <toolbarbutton id="urlbar-stop-button"
+              <toolbarbutton id="stop-button"
                              class="chromeclass-toolbar-additional"
                              command="Browser:Stop"
                              tooltip="dynamic-shortcut-tooltip"/>
+#endif
               <toolbarbutton id="urlbar-page-action-button"
+#ifndef MOZ_PHOTON_THEME
                              hidden="true"
+#endif
                              class="chromeclass-toolbar-additional"
                              tooltiptext="&pageActionButton.tooltip;"
                              onclick="gPageActionButton.onEvent(event);"/>
             </textbox>
           </hbox>
         </toolbaritem>
 
         <toolbaritem id="search-container" title="&searchItem.title;"
--- a/browser/base/content/test/permissions/browser_temporary_permissions_navigation.js
+++ b/browser/base/content/test/permissions/browser_temporary_permissions_navigation.js
@@ -4,17 +4,17 @@
 "use strict";
 
 // Test that temporary permissions are removed on user initiated reload only.
 add_task(function* testTempPermissionOnReload() {
   let uri = NetUtil.newURI("https://example.com");
   let id = "geo";
 
   yield BrowserTestUtils.withNewTab(uri.spec, function*(browser) {
-    let reloadButton = document.getElementById("urlbar-reload-button");
+    let reloadButton = document.getElementById("reload-button");
 
     SitePermissions.set(uri, id, SitePermissions.BLOCK, SitePermissions.SCOPE_TEMPORARY, browser);
 
     let reloaded = BrowserTestUtils.browserLoaded(browser, false, uri.spec);
 
     Assert.deepEqual(SitePermissions.get(uri, id, browser), {
       state: SitePermissions.BLOCK,
       scope: SitePermissions.SCOPE_TEMPORARY,
--- a/browser/base/content/test/tabs/browser_navigatePinnedTab.js
+++ b/browser/base/content/test/tabs/browser_navigatePinnedTab.js
@@ -13,22 +13,21 @@ add_task(function* () {
   let browser = appTab.linkedBrowser;
   yield BrowserTestUtils.browserLoaded(browser);
 
   gBrowser.pinTab(appTab);
   is(appTab.pinned, true, "Tab was successfully pinned");
 
   let initialTabsNo = gBrowser.tabs.length;
 
-  let goButton = document.getElementById("urlbar-go-button");
   gBrowser.selectedTab = appTab;
   gURLBar.focus();
   gURLBar.value = TEST_LINK_CHANGED;
 
-  goButton.click();
+  gURLBar.goButton.click();
   yield BrowserTestUtils.browserLoaded(browser);
 
   is(appTab.linkedBrowser.currentURI.spec, TEST_LINK_CHANGED,
      "New page loaded in the app tab");
   is(gBrowser.tabs.length, initialTabsNo, "No additional tabs were opened");
 
   // Now check that opening a link that does create a new tab works,
   // and also that it nulls out the opener.
--- a/browser/base/content/test/tabs/browser_reload_deleted_file.js
+++ b/browser/base/content/test/tabs/browser_reload_deleted_file.js
@@ -21,15 +21,15 @@ add_task(function* () {
   let tab = yield BrowserTestUtils.openNewForegroundTab(gBrowser, uriString);
   registerCleanupFunction(function* () {
     yield BrowserTestUtils.removeTab(tab);
   });
 
   // Delete the page, simulate a click of the reload button and check that we
   // get a neterror page.
   disappearingPage.remove(false);
-  document.getElementById("urlbar-reload-button").doCommand();
+  document.getElementById("reload-button").doCommand();
   yield BrowserTestUtils.waitForErrorPage(tab.linkedBrowser);
   yield ContentTask.spawn(tab.linkedBrowser, null, function() {
     ok(content.document.documentURI.startsWith("about:neterror"),
        "Check that a neterror page was loaded.");
   });
 });
--- a/browser/base/content/test/urlbar/browser_locationBarCommand.js
+++ b/browser/base/content/test/urlbar/browser_locationBarCommand.js
@@ -160,18 +160,17 @@ add_task(function* load_in_new_tab_test(
 function triggerCommand(shouldClick, event) {
   gURLBar.value = TEST_VALUE;
   gURLBar.focus();
 
   if (shouldClick) {
     is(gURLBar.getAttribute("pageproxystate"), "invalid",
        "page proxy state must be invalid for go button to be visible");
 
-    let goButton = document.getElementById("urlbar-go-button");
-    EventUtils.synthesizeMouseAtCenter(goButton, event);
+    EventUtils.synthesizeMouseAtCenter(gURLBar.goButton, event);
   } else {
     EventUtils.synthesizeKey("VK_RETURN", event);
   }
 }
 
 function promiseLoadStarted() {
   return new Promise(resolve => {
     gBrowser.addTabsProgressListener({
--- a/browser/base/content/test/urlbar/browser_locationBarExternalLoad.js
+++ b/browser/base/content/test/urlbar/browser_locationBarExternalLoad.js
@@ -11,18 +11,17 @@ function urlEnter(url) {
   gURLBar.value = url;
   gURLBar.focus();
   EventUtils.synthesizeKey("VK_RETURN", {});
 }
 
 function urlClick(url) {
   gURLBar.value = url;
   gURLBar.focus();
-  let goButton = document.getElementById("urlbar-go-button");
-  EventUtils.synthesizeMouseAtCenter(goButton, {});
+  EventUtils.synthesizeMouseAtCenter(gURLBar.goButton, {});
 }
 
 function promiseNewTabSwitched() {
   return new Promise(resolve => {
     gBrowser.addEventListener("TabSwitchDone", function() {
       executeSoon(resolve);
     }, {once: true});
   });
--- a/browser/base/content/theme-vars.inc.css
+++ b/browser/base/content/theme-vars.inc.css
@@ -7,21 +7,21 @@
 :root[lwthemeicons~="--back-icon"] #back-button:-moz-lwtheme {
   list-style-image: var(--back-icon) !important;
 }
 
 :root[lwthemeicons~="--forward-icon"] #forward-button:-moz-lwtheme {
   list-style-image: var(--forward-icon) !important;
 }
 
-:root[lwthemeicons~="--reload-icon"] #urlbar-reload-button:-moz-lwtheme {
+:root[lwthemeicons~="--reload-icon"] #reload-button:-moz-lwtheme {
   list-style-image: var(--reload-icon) !important;
 }
 
-:root[lwthemeicons~="--stop-icon"] #urlbar-stop-button:-moz-lwtheme {
+:root[lwthemeicons~="--stop-icon"] #stop-button:-moz-lwtheme {
   list-style-image: var(--stop-icon) !important;
 }
 
 :root[lwthemeicons~="--bookmark_star-icon"] #bookmarks-menu-button:-moz-lwtheme {
   list-style-image: var(--bookmark_star-icon) !important;
 }
 
 :root[lwthemeicons~="--bookmark_menu-icon"] #bookmarks-menu-button[cui-areatype='toolbar'] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-lwtheme {
@@ -125,16 +125,18 @@
 }
 
 :root[lwthemeicons~="--pocket-icon"] #pocket-button:-moz-lwtheme {
   list-style-image: var(--pocket-icon) !important;
 }
 
 :root[lwthemeicons~="--back-icon"] #back-button:-moz-lwtheme,
 :root[lwthemeicons~="--forward-icon"] #forward-button:-moz-lwtheme,
+:root[lwthemeicons~="--reload-icon"] #reload-button:-moz-lwtheme,
+:root[lwthemeicons~="--stop-icon"] #stop-button:-moz-lwtheme,
 :root[lwthemeicons~="--bookmark_star-icon"] #bookmarks-menu-button:-moz-lwtheme,
 :root[lwthemeicons~="--bookmark_menu-icon"] #bookmarks-menu-button[cui-areatype='toolbar'] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-lwtheme,
 :root[lwthemeicons~="--downloads-icon"] #downloads-button:-moz-lwtheme,
 :root[lwthemeicons~="--home-icon"] #home-button:-moz-lwtheme,
 :root[lwthemeicons~="--app_menu-icon"] #PanelUI-menu-button:-moz-lwtheme,
 :root[lwthemeicons~="--cut-icon"] #cut-button:-moz-lwtheme,
 :root[lwthemeicons~="--copy-icon"] #copy-button:-moz-lwtheme,
 :root[lwthemeicons~="--paste-icon"] #paste-button:-moz-lwtheme,
@@ -152,15 +154,17 @@
 :root[lwthemeicons~="--open_file-icon"] #open-file-button:-moz-lwtheme,
 :root[lwthemeicons~="--sidebars-icon"] #sidebar-button:-moz-lwtheme,
 :root[lwthemeicons~="--share_page-icon"] #social-share-button:-moz-lwtheme,
 :root[lwthemeicons~="--subscribe-icon"] #feed-button:-moz-lwtheme,
 :root[lwthemeicons~="--text_encoding-icon"] #characterencoding-button:-moz-lwtheme,
 :root[lwthemeicons~="--email_link-icon"] #email-link-button:-moz-lwtheme,
 :root[lwthemeicons~="--forget-icon"] #panic-button:-moz-lwtheme,
 :root[lwthemeicons~="--pocket-icon"] #pocket-button:-moz-lwtheme {
-  -moz-image-region: rect(0, 18px, 18px, 0) !important;
+  -moz-image-region: rect(0, 16px, 16px, 0) !important;
 }
 
-:root[lwthemeicons~="--reload-icon"] #urlbar-reload-button:-moz-lwtheme,
-:root[lwthemeicons~="--stop-icon"] #urlbar-stop-button:-moz-lwtheme {
+%ifndef MOZ_PHOTON_THEME
+:root[lwthemeicons~="--reload-icon"] #urlbar > #reload-button:-moz-lwtheme,
+:root[lwthemeicons~="--stop-icon"] #urlbar > #stop-button:-moz-lwtheme {
   -moz-image-region: rect(0, 14px, 14px, 0) !important;
 }
+%endif
--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@@ -36,16 +36,23 @@ file, You can obtain one at http://mozil
                   class="textbox-input-box urlbar-input-box"
                   flex="1" xbl:inherits="tooltiptext=inputtooltiptext">
           <children/>
           <html:input anonid="input"
                       class="autocomplete-textbox urlbar-input textbox-input uri-element-right-align"
                       allowevents="true"
                       inputmode="url"
                       xbl:inherits="tooltiptext=inputtooltiptext,value,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey,focused,textoverflow"/>
+#ifdef MOZ_PHOTON_THEME
+          <xul:image anonid="go-button"
+                     class="urlbar-go-button"
+                     onclick="gURLBar.handleCommand(event);"
+                     tooltiptext="&goEndCap.tooltip;"
+                     xbl:inherits="pageproxystate,parentfocused=focused"/>
+#endif
         </xul:hbox>
         <xul:dropmarker anonid="historydropmarker"
                         class="autocomplete-history-dropmarker urlbar-history-dropmarker"
                         tooltiptext="&urlbar.openHistoryPopup.tooltip;"
                         allowevents="true"
                         xbl:inherits="open,enablehistory,parentfocused=focused"/>
         <children includes="hbox"/>
       </xul:hbox>
@@ -127,16 +134,24 @@ file, You can obtain one at http://mozil
 
         // Null out the one-offs' popup and textbox so that it cleans up its
         // internal state for both.  Most importantly, it removes the event
         // listeners that it added to both.
         this.popup.oneOffSearchButtons.popup = null;
         this.popup.oneOffSearchButtons.textbox = null;
       ]]></destructor>
 
+      <field name="goButton">
+#ifdef MOZ_PHOTON_THEME
+        document.getAnonymousElementByAttribute(this, "anonid", "go-button");
+#else
+        document.getElementById("urlbar-go-button");
+#endif
+      </field>
+
       <field name="_value">""</field>
       <field name="gotResultForCurrentQuery">false</field>
 
       <!--
         This is set around HandleHenter so it can be used in handleCommand.
         It is also used to track whether we must handle a delayed handleEnter,
         by checking if it has been cleared.
       -->
--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@@ -138,17 +138,17 @@ browser.jar:
         content/browser/sanitize.js                   (content/sanitize.js)
         content/browser/sanitize.xul                  (content/sanitize.xul)
         content/browser/sanitizeDialog.js             (content/sanitizeDialog.js)
         content/browser/sanitizeDialog.css            (content/sanitizeDialog.css)
         content/browser/contentSearchUI.js            (content/contentSearchUI.js)
         content/browser/contentSearchUI.css           (content/contentSearchUI.css)
         content/browser/tabbrowser.css                (content/tabbrowser.css)
         content/browser/tabbrowser.xml                (content/tabbrowser.xml)
-        content/browser/urlbarBindings.xml            (content/urlbarBindings.xml)
+*       content/browser/urlbarBindings.xml            (content/urlbarBindings.xml)
         content/browser/utilityOverlay.js             (content/utilityOverlay.js)
         content/browser/usercontext.svg               (content/usercontext.svg)
         content/browser/web-panels.js                 (content/web-panels.js)
 *       content/browser/web-panels.xul                (content/web-panels.xul)
         content/browser/webext-panels.js              (content/webext-panels.js)
 *       content/browser/webext-panels.xul             (content/webext-panels.xul)
 *       content/browser/baseMenuOverlay.xul           (content/baseMenuOverlay.xul)
         content/browser/nsContextMenu.js              (content/nsContextMenu.js)
--- a/browser/components/extensions/test/browser/browser_ext_themes_icons.js
+++ b/browser/components/extensions/test/browser/browser_ext_themes_icons.js
@@ -107,18 +107,18 @@ function* runTestWithIcons(icons) {
   // Each item in this array has the following setup:
   // At position 0: The name that is used in the theme manifest.
   // At position 1: The CSS selector for the button in the DOM.
   // At position 2: The CustomizableUI name for the widget, only defined
   //                if customizable.
   const ICON_INFO = [
     ["back", "#back-button"],
     ["forward", "#forward-button"],
-    ["reload", "#urlbar-reload-button"],
-    ["stop", "#urlbar-stop-button"],
+    ["reload", "#reload-button"],
+    ["stop", "#stop-button"],
     ["bookmark_star", "#bookmarks-menu-button", "bookmarks-menu-button"],
     ["bookmark_menu", "#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon"],
     ["downloads", "#downloads-button", "downloads-button"],
     ["home", "#home-button", "home-button"],
     ["app_menu", "#PanelUI-menu-button"],
     ["cut", "#cut-button", "edit-controls"],
     ["copy", "#copy-button"],
     ["paste", "#paste-button"],
--- a/browser/modules/BrowserUITelemetry.jsm
+++ b/browser/modules/BrowserUITelemetry.jsm
@@ -124,19 +124,19 @@ XPCOMUtils.defineLazyGetter(this, "DEFAU
 });
 
 XPCOMUtils.defineLazyGetter(this, "ALL_BUILTIN_ITEMS", function() {
   // These special cases are for click events on built-in items that are
   // contained within customizable items (like the navigation widget).
   const SPECIAL_CASES = [
     "back-button",
     "forward-button",
-    "urlbar-stop-button",
+    "stop-button",
     "urlbar-go-button",
-    "urlbar-reload-button",
+    "reload-button",
     "searchbar",
     "cut-button",
     "copy-button",
     "paste-button",
     "zoom-out-button",
     "zoom-reset-button",
     "zoom-in-button",
     "BMB_bookmarksPopup",
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -758,46 +758,47 @@ html|span.ac-emphasize-text-url {
   color: GrayText;
   font-size: smaller;
 }
 
 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
   border-top: 1px solid GrayText;
 }
 
+%ifndef MOZ_PHOTON_THEME
 /* Combined go/reload/stop button in location bar */
 
 #urlbar-go-button,
-#urlbar-reload-button,
-#urlbar-stop-button {
+#reload-button,
+#stop-button {
   -moz-appearance: none;
   list-style-image: url("chrome://browser/skin/reload-stop-go.png");
   padding: 0 9px;
   margin-inline-start: 5px;
   border-inline-start: 1px solid var(--urlbar-separator-color);
   border-image: linear-gradient(transparent 15%,
                                 var(--urlbar-separator-color) 15%,
                                 var(--urlbar-separator-color) 85%,
                                 transparent 85%);
   border-image-slice: 1;
 }
 
-#urlbar-reload-button {
+#reload-button {
   -moz-image-region: rect(0, 14px, 14px, 0);
 }
 
-#urlbar-reload-button:not([disabled]):hover {
+#reload-button:not([disabled]):hover {
   -moz-image-region: rect(14px, 14px, 28px, 0);
 }
 
-#urlbar-reload-button:not([disabled]):hover:active {
+#reload-button:not([disabled]):hover:active {
   -moz-image-region: rect(28px, 14px, 42px, 0);
 }
 
-#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
 #urlbar-go-button {
   -moz-image-region: rect(0, 42px, 14px, 28px);
 }
 
 #urlbar-go-button:hover {
@@ -807,77 +808,78 @@ html|span.ac-emphasize-text-url {
 #urlbar-go-button:hover:active {
   -moz-image-region: rect(28px, 42px, 42px, 28px);
 }
 
 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
-#urlbar-stop-button {
+#stop-button {
   -moz-image-region: rect(0, 28px, 14px, 14px);
 }
 
-#urlbar-stop-button:not([disabled]):hover {
+#stop-button:not([disabled]):hover {
   -moz-image-region: rect(14px, 28px, 28px, 14px);
 }
 
-#urlbar-stop-button:hover:active {
+#stop-button:hover:active {
   -moz-image-region: rect(28px, 28px, 42px, 14px);
 }
 
 @media (min-resolution: 1.1dppx) {
   #urlbar-go-button,
-  #urlbar-reload-button,
-  #urlbar-stop-button {
+  #reload-button,
+  #stop-button {
     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
   }
 
   #urlbar-go-button > .toolbarbutton-icon,
-  #urlbar-reload-button > .toolbarbutton-icon,
-  #urlbar-stop-button > .toolbarbutton-icon {
+  #reload-button > .toolbarbutton-icon,
+  #stop-button > .toolbarbutton-icon {
     width: 14px;
   }
 
   #urlbar-go-button {
     -moz-image-region: rect(0, 84px, 28px, 56px);
   }
 
   #urlbar-go-button:hover {
     -moz-image-region: rect(28px, 84px, 56px, 56px);
   }
 
   #urlbar-go-button:hover:active {
     -moz-image-region: rect(56px, 84px, 84px, 56px);
   }
 
-  #urlbar-reload-button {
+  #reload-button {
     -moz-image-region: rect(0, 28px, 28px, 0);
   }
 
-  #urlbar-reload-button:not([disabled]):hover {
+  #reload-button:not([disabled]):hover {
     -moz-image-region: rect(28px, 28px, 56px, 0);
   }
 
-  #urlbar-reload-button:not([disabled]):hover:active {
+  #reload-button:not([disabled]):hover:active {
     -moz-image-region: rect(56px, 28px, 84px, 0);
   }
 
-  #urlbar-stop-button {
+  #stop-button {
     -moz-image-region: rect(0, 56px, 28px, 28px);
   }
 
-  #urlbar-stop-button:not([disabled]):hover {
+  #stop-button:not([disabled]):hover {
     -moz-image-region: rect(28px, 56px, 56px, 28px);
   }
 
-  #urlbar-stop-button:hover:active {
+  #stop-button:hover:active {
     -moz-image-region: rect(56px, 56px, 84px, 28px);
   }
 }
+%endif
 
 /* Popup blocker button */
 #page-report-button {
   list-style-image: url("chrome://browser/skin/Info.png");
 }
 
 /* Reader mode button */
 
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -959,21 +959,22 @@ html|span.ac-emphasize-text-url {
   font-size: smaller;
 }
 
 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
   border-top: 1px solid GrayText;
 }
 
 
+%ifndef MOZ_PHOTON_THEME
 /* ----- COMBINED GO/RELOAD/STOP BUTTON IN LOCATION BAR ----- */
 
 #urlbar-go-button,
-#urlbar-reload-button,
-#urlbar-stop-button {
+#reload-button,
+#stop-button {
   margin: 0;
   list-style-image: url("chrome://browser/skin/reload-stop-go.png");
   padding: 0 9px;
   margin-inline-start: 5px;
   border-inline-start: 1px solid var(--urlbar-separator-color);
   border-image: linear-gradient(transparent 15%,
                                 var(--urlbar-separator-color) 15%,
                                 var(--urlbar-separator-color) 85%,
@@ -988,73 +989,74 @@ html|span.ac-emphasize-text-url {
 #urlbar-go-button:hover:active {
   -moz-image-region: rect(14px, 42px, 28px, 28px);
 }
 
 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
-#urlbar-reload-button {
+#reload-button {
   -moz-image-region: rect(0, 14px, 14px, 0);
 }
 
-#urlbar-reload-button:not([disabled]):hover:active {
+#reload-button:not([disabled]):hover:active {
   -moz-image-region: rect(14px, 14px, 28px, 0);
 }
 
-#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
-#urlbar-stop-button {
+#stop-button {
   -moz-image-region: rect(0, 28px, 14px, 14px);
 }
 
-#urlbar-stop-button:hover:active {
+#stop-button:hover:active {
   -moz-image-region: rect(14px, 28px, 28px, 14px);
 }
 
 @media (min-resolution: 2dppx) {
   #urlbar-go-button,
-  #urlbar-reload-button,
-  #urlbar-stop-button {
+  #reload-button,
+  #stop-button {
     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
   }
 
   #urlbar-go-button > .toolbarbutton-icon,
-  #urlbar-reload-button > .toolbarbutton-icon,
-  #urlbar-stop-button > .toolbarbutton-icon {
+  #reload-button > .toolbarbutton-icon,
+  #stop-button > .toolbarbutton-icon {
     width: 14px;
   }
 
   #urlbar-go-button {
     -moz-image-region: rect(0, 84px, 28px, 56px);
   }
 
   #urlbar-go-button:hover:active {
     -moz-image-region: rect(28px, 84px, 56px, 56px);
   }
 
-  #urlbar-reload-button {
+  #reload-button {
     -moz-image-region: rect(0, 28px, 28px, 0);
   }
 
-  #urlbar-reload-button:not([disabled]):hover:active {
+  #reload-button:not([disabled]):hover:active {
     -moz-image-region: rect(28px, 28px, 56px, 0);
   }
 
-  #urlbar-stop-button {
+  #stop-button {
     -moz-image-region: rect(0, 56px, 28px, 28px);
   }
 
-  #urlbar-stop-button:hover:active {
+  #stop-button:hover:active {
     -moz-image-region: rect(28px, 56px, 56px, 28px);
   }
 }
+%endif
 
 #BMB_bookmarksPopup[side="top"],
 #BMB_bookmarksPopup[side="bottom"] {
   margin-left: -26px;
   margin-right: -26px;
 }
 
 #BMB_bookmarksPopup[side="left"],
--- a/browser/themes/shared/browser.inc
+++ b/browser/themes/shared/browser.inc
@@ -1,13 +1,13 @@
 %filter substitution
 
 % Note that zoom-reset-button is a bit different since it doesn't use an image and thus has the image with display: none.
 %define nestedButtons #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button
-%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, @nestedButtons@, #e10s-button, #panic-button, #webide-button, #containers-panelmenu
+%define primaryToolbarButtons #back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, @nestedButtons@, #e10s-button, #panic-button, #webide-button, #containers-panelmenu
 
 %ifdef XP_MACOSX
 % Prior to 10.7 there wasn't a native fullscreen button so we use #restore-button to exit fullscreen
 % and want it to behave like other toolbar buttons.
 %define primaryToolbarButtons @primaryToolbarButtons@, #restore-button
 %endif
 
 %define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -1,12 +1,52 @@
 /* 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/. */
 
+%ifdef MOZ_PHOTON_THEME
+/* Go button */
+.urlbar-go-button {
+  padding: 0 3px;
+  list-style-image: url("chrome://browser/skin/reload-stop-go.png");
+}
+
+.urlbar-go-button {
+  -moz-image-region: rect(0, 42px, 14px, 28px);
+}
+
+.urlbar-go-button:hover {
+  -moz-image-region: rect(14px, 42px, 28px, 28px);
+}
+
+.urlbar-go-button:hover:active {
+  -moz-image-region: rect(28px, 42px, 42px, 28px);
+}
+
+.urlbar-go-button:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+@media (min-resolution: 1.1dppx) {
+  .urlbar-go-button {
+    list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
+    -moz-image-region: rect(0, 84px, 28px, 56px);
+    width: 14px;
+  }
+
+  .urlbar-go-button:hover {
+    -moz-image-region: rect(28px, 84px, 56px, 56px);
+  }
+
+  .urlbar-go-button:hover:active {
+    -moz-image-region: rect(56px, 84px, 84px, 56px);
+  }
+}
+%endif
+
 /* Zoom button */
 #urlbar-zoom-button {
   margin: 0 3px;
   font-size: .8em;
   padding: 0 8px;
   border-radius: 1em;
   background-color: hsla(0,0%,0%,.05);
   border: 1px solid ThreeDLightShadow;
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -16,16 +16,26 @@ toolbar[brighttext] :-moz-any(@primaryTo
 #back-button {
   list-style-image: url("chrome://browser/skin/back-large.svg");
 }
 
 #forward-button {
   list-style-image: url("chrome://browser/skin/forward.svg");
 }
 
+%ifdef MOZ_PHOTON_THEME
+#reload-button {
+  list-style-image: url("chrome://browser/skin/reload.svg");
+}
+
+#stop-button {
+  list-style-image: url("chrome://browser/skin/stop.svg");
+}
+%endif
+
 #home-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/home.svg");
 }
 
 #bookmarks-menu-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
 }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1147,47 +1147,48 @@ html|span.ac-emphasize-text-url {
   color: GrayText;
   font-size: smaller;
 }
 
 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
   border-top: 1px solid GrayText;
 }
 
+%ifndef MOZ_PHOTON_THEME
 /* combined go/reload/stop button in location bar */
 
 #urlbar-go-button,
-#urlbar-reload-button,
-#urlbar-stop-button {
+#reload-button,
+#stop-button {
   -moz-appearance: none;
   border-style: none;
   list-style-image: url("chrome://browser/skin/reload-stop-go.png");
   padding: 0 9px;
   margin-inline-start: 5px;
   border-inline-start: 1px solid var(--urlbar-separator-color);
   border-image: linear-gradient(transparent 15%,
                                 var(--urlbar-separator-color) 15%,
                                 var(--urlbar-separator-color) 85%,
                                 transparent 85%);
   border-image-slice: 1;
 }
 
-#urlbar-reload-button {
+#reload-button {
   -moz-image-region: rect(0, 14px, 14px, 0);
 }
 
-#urlbar-reload-button:not([disabled]):hover {
+#reload-button:not([disabled]):hover {
   -moz-image-region: rect(14px, 14px, 28px, 0);
 }
 
-#urlbar-reload-button:not([disabled]):hover:active {
+#reload-button:not([disabled]):hover:active {
   -moz-image-region: rect(28px, 14px, 42px, 0);
 }
 
-#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
 #urlbar-go-button {
   -moz-image-region: rect(0, 42px, 14px, 28px);
 }
 
 #urlbar-go-button:hover {
@@ -1197,77 +1198,78 @@ html|span.ac-emphasize-text-url {
 #urlbar-go-button:hover:active {
   -moz-image-region: rect(28px, 42px, 42px, 28px);
 }
 
 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
-#urlbar-stop-button {
+#stop-button {
   -moz-image-region: rect(0, 28px, 14px, 14px);
 }
 
-#urlbar-stop-button:not([disabled]):hover {
+#stop-button:not([disabled]):hover {
   -moz-image-region: rect(14px, 28px, 28px, 14px);
 }
 
-#urlbar-stop-button:hover:active {
+#stop-button:hover:active {
   -moz-image-region: rect(28px, 28px, 42px, 14px);
 }
 
 @media (min-resolution: 1.1dppx) {
   #urlbar-go-button,
-  #urlbar-reload-button,
-  #urlbar-stop-button {
+  #reload-button,
+  #stop-button {
     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
   }
 
   #urlbar-go-button > .toolbarbutton-icon,
-  #urlbar-reload-button > .toolbarbutton-icon,
-  #urlbar-stop-button > .toolbarbutton-icon {
+  #reload-button > .toolbarbutton-icon,
+  #stop-button > .toolbarbutton-icon {
     width: 14px;
   }
 
   #urlbar-go-button {
     -moz-image-region: rect(0, 84px, 28px, 56px);
   }
 
   #urlbar-go-button:hover {
     -moz-image-region: rect(28px, 84px, 56px, 56px);
   }
 
   #urlbar-go-button:hover:active {
     -moz-image-region: rect(56px, 84px, 84px, 56px);
   }
 
-  #urlbar-reload-button {
+  #reload-button {
     -moz-image-region: rect(0, 28px, 28px, 0);
   }
 
-  #urlbar-reload-button:not([disabled]):hover {
+  #reload-button:not([disabled]):hover {
     -moz-image-region: rect(28px, 28px, 56px, 0);
   }
 
-  #urlbar-reload-button:not([disabled]):hover:active {
+  #reload-button:not([disabled]):hover:active {
     -moz-image-region: rect(56px, 28px, 84px, 0);
   }
 
-  #urlbar-stop-button {
+  #stop-button {
     -moz-image-region: rect(0, 56px, 28px, 28px);
   }
 
-  #urlbar-stop-button:not([disabled]):hover {
+  #stop-button:not([disabled]):hover {
     -moz-image-region: rect(28px, 56px, 56px, 28px);
   }
 
-  #urlbar-stop-button:hover:active {
+  #stop-button:hover:active {
     -moz-image-region: rect(56px, 56px, 84px, 28px);
   }
 }
+%endif
 
 /* popup blocker button */
 
 #page-report-button {
   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
--- a/testing/marionette/harness/marionette_harness/tests/unit/test_mouse_action.py
+++ b/testing/marionette/harness/marionette_harness/tests/unit/test_mouse_action.py
@@ -73,17 +73,17 @@ class TestMouseAction(MarionetteTestCase
         self.wait_for_condition(lambda _: el.get_property("innerHTML") == "1")
 
     def test_chrome_click(self):
         self.marionette.navigate("about:blank")
         data_uri = "data:text/html,<html></html>"
         with self.marionette.using_context("chrome"):
             urlbar = self.marionette.find_element(By.ID, "urlbar")
             urlbar.send_keys(data_uri)
-            go_button = self.marionette.find_element(By.ID, "urlbar-go-button")
+            go_button = self.marionette.execute_script("return gURLBar.goButton")
             self.action.click(go_button).perform()
         self.wait_for_condition(lambda mn: mn.get_url() == data_uri)
 
     def test_chrome_double_click(self):
         self.marionette.navigate("about:blank")
         test_word = "quux"
 
         with self.marionette.using_context("chrome"):
--- a/testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/browser/toolbars.py
+++ b/testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/browser/toolbars.py
@@ -243,17 +243,17 @@ class LocationBar(UIBaseLib):
             message='Identity popup has not been opened.')
 
     @property
     def reload_button(self):
         """Provides access to the DOM element reload button.
 
         :returns: Reference to the reload button.
         """
-        return self.marionette.find_element(By.ID, 'urlbar-reload-button')
+        return self.marionette.find_element(By.ID, 'reload-button')
 
     def reload_url(self, trigger='button', force=False):
         """Reload the currently open page.
 
         :param trigger: The event type to use to cause the reload (one of
                         `shortcut`, `shortcut2`, or `button`).
         :param force: Whether to cause a forced reload.
         """
@@ -269,17 +269,17 @@ class LocationBar(UIBaseLib):
             self.window.send_shortcut(keys.Keys.F5)
 
     @property
     def stop_button(self):
         """Provides access to the DOM element stop button.
 
         :returns: Reference to the stop button.
         """
-        return self.marionette.find_element(By.ID, 'urlbar-stop-button')
+        return self.marionette.find_element(By.ID, 'stop-button')
 
     @property
     def urlbar(self):
         """Provides access to the DOM element urlbar.
 
         :returns: Reference to the url bar.
         """
         return self.marionette.find_element(By.ID, 'urlbar')
--- a/toolkit/components/passwordmgr/test/browser/browser_formless_submit_chrome.js
+++ b/toolkit/components/passwordmgr/test/browser/browser_formless_submit_chrome.js
@@ -95,17 +95,17 @@ add_task(function* test_backButton_forwa
     EventUtils.synthesizeMouseAtCenter(forwardButton, {});
     yield forwardPromise;
   });
 });
 
 
 add_task(function* test_reloadButton() {
   yield withTestPage(function*(aBrowser) {
-    let reloadButton = document.getElementById("urlbar-reload-button");
+    let reloadButton = document.getElementById("reload-button");
     let loadPromise = BrowserTestUtils.browserLoaded(aBrowser, false,
                                                      "https://example.com" + DIRECTORY_PATH +
                                                      "formless_basic.html");
 
     yield BrowserTestUtils.waitForCondition(() => {
       return reloadButton.disabled == false;
     });
     EventUtils.synthesizeMouseAtCenter(reloadButton, {});