Bug 1577541 - Enable megabar pref by default in Nightly. r=mak

Differential Revision: https://phabricator.services.mozilla.com/D46595

--HG--
extra : moz-landing-system : lando

browser/app/profile/firefox.js

@@ -330,7 +330,11 @@ pref("browser.urlbar.usepreloadedtopurls.enabled", false);
 pref("browser.urlbar.usepreloadedtopurls.expire_days", 14);
 
 // Whether the quantum bar displays the major design update.
+#ifdef NIGHTLY_BUILD
+  pref("browser.urlbar.megabar", true);
+#else
   pref("browser.urlbar.megabar", false);
+#endif
 
 pref("browser.urlbar.openViewOnFocus", false);
 pref("browser.urlbar.eventTelemetry.enabled", false);

browser/base/content/test/performance/browser.ini

@@ -13,6 +13,7 @@ prefs =
   # The form autofill framescript is only used in certain locales if this
   # pref is set to 'detect', which is the default value on non-Nightly.
   extensions.formautofill.available='on'
+  browser.urlbar.disableExtendForTests=true
 support-files =
   head.js
 [browser_appmenu.js]

browser/base/content/test/performance/head.js

@@ -758,6 +758,29 @@ async function runUrlbarTest(
     await UrlbarTestUtils.promisePopupClose(win);
   };
 
+  let expectedRects;
+  if (URLBar.megabar) {
+    let urlbarRect = URLBar.textbox.getBoundingClientRect();
+    const SHADOW_SIZE = 4;
+    expectedRects = {
+      filter: rects => {
+        // We put text into the urlbar so expect its textbox to change.
+        // The dropmarker is displayed as active during some of the test.
+        // We expect many changes in the results view.
+        // So we just whitelist the whole urlbar. We don't check the bottom of
+        // the rect because the result view height varies depending on the
+        // results.
+        return rects.filter(
+          r =>
+            !(
+              r.x1 >= urlbarRect.left - SHADOW_SIZE &&
+              r.x2 <= urlbarRect.right + SHADOW_SIZE &&
+              r.y1 >= urlbarRect.top - SHADOW_SIZE
+            )
+        );
+      },
+    };
+  } else {
     let dropmarkerRect = URLBar.dropmarker.getBoundingClientRect();
     let textBoxRect = URLBar.querySelector(
       "moz-input-box"
@@ -768,7 +791,7 @@ async function runUrlbarTest(
       bottom: win.innerHeight,
       left: 0,
     };
-  let expectedRects = {
+    expectedRects = {
       filter: rects =>
         rects.filter(
           r =>
@@ -792,6 +815,7 @@ async function runUrlbarTest(
             )
         ),
     };
+  }
 
   info("First opening");
   await withPerfObserver(

browser/components/urlbar/UrlbarInput.jsm

@@ -275,6 +275,7 @@ class UrlbarInput {
     delete this.controller;
     delete this.textbox;
     delete this.inputField;
+    delete this._layoutBreakoutUpdateKey;
   }
 
   /**
@@ -966,6 +967,11 @@ class UrlbarInput {
       return;
     }
     await this._updateLayoutBreakoutDimensions();
+    if (!this.textbox) {
+      // We may have been uninitialized while waiting for
+      // _updateLayoutBreakoutDimensions.
+      return;
+    }
     this.startLayoutExtend();
   }
 
@@ -982,13 +988,26 @@ class UrlbarInput {
     ) {
       return;
     }
+
+    if (UrlbarPrefs.get("disableExtendForTests")) {
+      this.setAttribute("breakout-extend-disabled", "true");
+      return;
+    }
+    this.removeAttribute("breakout-extend-disabled");
+
     this.setAttribute("breakout-extend", "true");
 
     // Enable the animation only after the first extend call to ensure it
     // doesn't run when opening a new window.
     if (!this.hasAttribute("breakout-extend-animate")) {
       this.window.promiseDocumentFlushed(() => {
+        if (!this.window) {
+          return;
+        }
         this.window.requestAnimationFrame(() => {
+          if (!this.textbox) {
+            return;
+          }
           this.setAttribute("breakout-extend-animate", "true");
         });
       });
@@ -1035,6 +1054,11 @@ class UrlbarInput {
 
     await this.window.promiseDocumentFlushed(() => {});
     await new Promise(resolve => {
+      if (!this.window) {
+        // We may have been uninitialized while waiting for layout.
+        resolve();
+        return;
+      }
       this.window.requestAnimationFrame(() => {
         if (this._layoutBreakoutUpdateKey != updateKey) {
           return;

browser/components/urlbar/UrlbarPrefs.jsm

@@ -61,6 +61,11 @@ const PREF_URLBAR_DEFAULTS = new Map([
   // "heuristic" result).  We fetch it as fast as possible.
   ["delay", 50],
 
+  // Some performance tests disable this because extending the urlbar needs
+  // layout information that we can't get before the first paint. (Or we could
+  // but this would mean flushing layout.)
+  ["disableExtendForTests", false],
+
   // If true, this optimizes for replacing the full URL rather than selecting a
   // portion of it. This also copies the urlbar value to the selection
   // clipboard on systems that support it.

browser/themes/shared/urlbar-searchbar.inc.css

@@ -55,7 +55,7 @@
   margin: 0 !important; /* override autocomplete.css */
 }
 
-#urlbar:hover,
+#urlbar:hover:not([open]),
 #searchbar:hover {
   border-color: @fieldHoverBorderColor@;
   box-shadow: 0 1px 6px rgba(0,0,0,.1);
@@ -123,14 +123,18 @@
   }
 }
 
-#urlbar[breakout][breakout-extend] {
+#urlbar[breakout][breakout-extend],
+#urlbar[breakout][breakout-extend-disabled][open] {
   /* The z-index needs to be big enough to trump other positioned UI pieces
      that we want to overlay. 3 is used in the tab bar. */
   z-index: 3;
+  height: auto;
+}
+
+#urlbar[breakout][breakout-extend] {
   top: -@urlbarBreakoutVerticalExtend@;
   left: -@urlbarBreakoutHorizontalExtend@;
   width: calc(100% + 2 * @urlbarBreakoutHorizontalExtend@);
-  height: auto;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 

toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js

@@ -102,6 +102,11 @@ add_task(async function test_popup_url() {
   );
 
   let popup = gURLBar.view.panel;
+
+  if (!gURLBar.megabar) {
+    // The urlbar popup supports these colors only with the legacy non-megabar
+    // design. With megabar, the popup visually extends the textbox and use its
+    // colors.
     let popupCS = window.getComputedStyle(popup);
 
     Assert.equal(
@@ -121,6 +126,7 @@ add_task(async function test_popup_url() {
       `rgb(${hexToRGB(POPUP_TEXT_COLOR_DARK).join(", ")})`,
       `Popup color should be set to ${POPUP_TEXT_COLOR_DARK}`
     );
+  }
 
   // Set the selected attribute to true to test the highlight popup properties
   UrlbarTestUtils.setSelectedRowIndex(window, 1);
@@ -200,12 +206,16 @@ add_task(async function test_popup_url() {
 
   await extension.startup();
 
-  popupCS = window.getComputedStyle(popup);
+  if (!gURLBar.megabar) {
+    // The urlbar popup supports this color only with the legacy non-megabar
+    // design. With megabar, the popup visually extends the textbox and use its
+    // colors.
     Assert.equal(
-    popupCS.color,
+      window.getComputedStyle(popup).color,
       `rgb(${hexToRGB(POPUP_TEXT_COLOR_BRIGHT).join(", ")})`,
       `Popup color should be set to ${POPUP_TEXT_COLOR_BRIGHT}`
     );
+  }
 
   Assert.equal(
     window.getComputedStyle(urlResult.element.url).color,