Bug 1396624 - Hide URL bar elements and the stop button with display:none instead of visibility:collapse to prevent the icons from being loaded needlessly. r?johannh draft
authorDão Gottwald <dao@mozilla.com>
Mon, 04 Sep 2017 18:14:20 +0200
changeset 658725 4524d44b039b8856c8351943cfe96828be1dc889
parent 658578 632e42dca494ec3d90b70325d9c359f80cb3f38a
child 729733 691a401fc62358a861ace73cf6e9503b6068428e
push id77852
push userdgottwald@mozilla.com
push dateMon, 04 Sep 2017 16:14:53 +0000
reviewersjohannh
bugs1396624
milestone57.0a1
Bug 1396624 - Hide URL bar elements and the stop button with display:none instead of visibility:collapse to prevent the icons from being loaded needlessly. r?johannh MozReview-Commit-ID: 6VB57Lz2bMI
browser/base/content/browser.css
browser/base/content/test/performance/browser_startup_images.js
browser/base/content/test/urlbar/browser_page_action_menu.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -448,17 +448,17 @@ toolbar:not(#TabsToolbar) > #personal-bo
 }
 
 #zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
   display: -moz-box;
 }
 
 #reload-button:not([displaystop]) + #stop-button,
 #reload-button[displaystop] {
-  visibility: collapse;
+  display: none;
 }
 
 /* The reload-button is only disabled temporarily when it becomes visible
    to prevent users from accidentally clicking it. We don't however need
    to show this disabled state, as the flicker that it generates is short
    enough to be visible but not long enough to explain anything to users. */
 #reload-button[disabled]:not(:-moz-window-inactive) > .toolbarbutton-icon {
   opacity: 1 !important;
@@ -670,17 +670,17 @@ html|input.urlbar-input[textoverflow]:no
 #urlbar[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action,
 #identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action,
 #urlbar[usertyping] > .urlbar-textbox-container > .urlbar-history-dropmarker,
 .urlbar-go-button[pageproxystate="valid"],
 .urlbar-go-button:not([parentfocused="true"]),
 #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;
+  display: none;
 }
 
 #identity-box {
   -moz-user-focus: normal;
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box {
   pointer-events: none;
--- a/browser/base/content/test/performance/browser_startup_images.js
+++ b/browser/base/content/test/performance/browser_startup_images.js
@@ -12,42 +12,20 @@
  *  - platforms: An array of the platforms where the issue is occurring.
  *               Possible values are linux, win, macosx.
  *  - intermittentNotLoaded: an array of platforms where this image is
  *                           intermittently not loaded, e.g. because it is
  *                           loaded during the time we stop recording.
  *  - intermittentShown: An array of platforms where this image is
  *                       intermittently shown, contrary to what our
  *                       whitelist says.
- *  - photon: If true, this entry only applies for builds with the Photon theme.
- *            If false, this entry only applies for builds without the Photon theme.
- *            If undefined, this entry applies for both Photon and non-Photon builds.
  *
  * Please don't add items to this list. Please remove items from this list.
  */
 const whitelist = [
-  // Photon-only entries
-  {
-    file: "chrome://browser/skin/stop.svg",
-    platforms: ["linux", "win", "macosx"],
-  },
-  {
-    file: "chrome://browser/skin/bookmark-hollow.svg",
-    platforms: ["linux", "win", "macosx"],
-  },
-  {
-    file: "chrome://browser/skin/page-action.svg",
-    platforms: ["linux", "win", "macosx"],
-  },
-  {
-    file: "chrome://pocket-shared/skin/pocket.svg",
-    platforms: ["linux", "win", "macosx"],
-  },
-
-  // Shared entries
   {
     file: "chrome://browser/skin/arrow-left.svg",
     platforms: ["linux", "win", "macosx"],
   },
   {
     file: "chrome://browser/skin/tabbrowser/tab-overflow-indicator.png",
     platforms: ["linux", "win", "macosx"],
   },
--- a/browser/base/content/test/urlbar/browser_page_action_menu.js
+++ b/browser/base/content/test/urlbar/browser_page_action_menu.js
@@ -118,32 +118,32 @@ add_task(async function sendToDevice_non
   // Open a tab that's not sendable.  An about: page like about:home is
   // convenient.
   await BrowserTestUtils.withNewTab("about:home", async () => {
     // ... but the page actions should be hidden on about:home, including the
     // main button.  (It's not easy to load a page that's both actionable and
     // not sendable.)  So first check that that's the case, and then unhide the
     // main button so that this test can continue.
     Assert.equal(
-      window.getComputedStyle(BrowserPageActions.mainButtonNode).visibility,
-      "collapse",
+      window.getComputedStyle(BrowserPageActions.mainButtonNode).display,
+      "none",
       "Main button should be hidden on about:home"
     );
-    BrowserPageActions.mainButtonNode.style.visibility = "visible";
+    BrowserPageActions.mainButtonNode.style.display = "-moz-box";
     await promiseSyncReady();
     // Open the panel.  Send to Device should be disabled.
     await promisePageActionPanelOpen();
     let sendToDeviceButton =
       document.getElementById("pageAction-panel-sendToDevice");
     Assert.ok(sendToDeviceButton.disabled);
     let hiddenPromise = promisePageActionPanelHidden();
     BrowserPageActions.panelNode.hidePopup();
     await hiddenPromise;
-    // Remove the `visibility` style set above.
-    BrowserPageActions.mainButtonNode.style.removeProperty("visibility");
+    // Remove the `display` style set above.
+    BrowserPageActions.mainButtonNode.style.removeProperty("display");
   });
 });
 
 add_task(async function sendToDevice_syncNotReady_other_states() {
   // Open a tab that's sendable.
   await BrowserTestUtils.withNewTab("http://example.com/", async () => {
     await promiseSyncReady();
     const sandbox = sinon.sandbox.create();