--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -325,17 +325,21 @@ pref("browser.urlbar.switchTabs.adoptInt
 // should be opened in new tabs by default.
 pref("browser.urlbar.openintab", false);
 
 // This is disabled until Bug 1340663 figures out the remaining requirements.
 pref("browser.urlbar.usepreloadedtopurls.enabled", false);
 pref("browser.urlbar.usepreloadedtopurls.expire_days", 14);
 
 // Whether the quantum bar displays the major design update.
-pref("browser.urlbar.megabar", false);
+#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);
 
 pref("browser.altClickSave", false);
 
 // Enable logging downloads operations to the Console.
 pref("browser.download.loglevel", "Error");

--- a/browser/base/content/test/performance/browser.ini
+++ b/browser/base/content/test/performance/browser.ini
@@ -8,16 +8,17 @@ prefs =
   # Skip migration work in BG__migrateUI for browser_startup.js since it isn't
   # representative of common startup.
   browser.migration.version=9999999
   browser.startup.record=true
   gfx.canvas.willReadFrequently.enable=true
   # 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]
 skip-if = asan || debug || (os == 'win' && bits == 32) || (os == 'win' && processor == 'aarch64') # Bug 1382809, bug 1369959, Win32 because of intermittent OOM failures, bug 1533141 for aarch64
 [browser_preferences_usage.js]
 fail-if = fission
 skip-if = !debug
 [browser_startup.js]

--- a/browser/base/content/test/performance/head.js
+++ b/browser/base/content/test/performance/head.js
@@ -753,50 +753,74 @@ async function runUrlbarTest(
         value: URLBar.value,
       });
       await waitExtra();
     }
 
     await UrlbarTestUtils.promisePopupClose(win);
   };
 
-  let dropmarkerRect = URLBar.dropmarker.getBoundingClientRect();
-  let textBoxRect = URLBar.querySelector(
-    "moz-input-box"
-  ).getBoundingClientRect();
-  let resultsRect = {
-    top: URLBar.textbox.closest("toolbar").getBoundingClientRect().bottom,
-    right: win.innerWidth,
-    bottom: win.innerHeight,
-    left: 0,
-  };
-  let expectedRects = {
-    filter: rects =>
-      rects.filter(
-        r =>
-          !// We put text into the urlbar so expect its textbox to change.
-          (
-            (r.x1 >= textBoxRect.left &&
-              r.x2 <= textBoxRect.right &&
-              r.y1 >= textBoxRect.top &&
-              r.y2 <= textBoxRect.bottom) ||
-            // The dropmarker is displayed as active during some of the test.
-            // dropmarkerRect.left isn't always an integer, hence the - 1 and + 1
-            (r.x1 >= dropmarkerRect.left - 1 &&
-              r.x2 <= dropmarkerRect.right + 1 &&
-              r.y1 >= dropmarkerRect.top &&
-              r.y2 <= dropmarkerRect.bottom) ||
-            // We expect many changes in the results view.
-            (r.x1 >= resultsRect.left &&
-              r.x2 <= resultsRect.right &&
-              r.y1 >= resultsRect.top &&
-              r.y2 <= resultsRect.bottom)
-          )
-      ),
-  };
+  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"
+    ).getBoundingClientRect();
+    let resultsRect = {
+      top: URLBar.textbox.closest("toolbar").getBoundingClientRect().bottom,
+      right: win.innerWidth,
+      bottom: win.innerHeight,
+      left: 0,
+    };
+    expectedRects = {
+      filter: rects =>
+        rects.filter(
+          r =>
+            !// We put text into the urlbar so expect its textbox to change.
+            (
+              (r.x1 >= textBoxRect.left &&
+                r.x2 <= textBoxRect.right &&
+                r.y1 >= textBoxRect.top &&
+                r.y2 <= textBoxRect.bottom) ||
+              // The dropmarker is displayed as active during some of the test.
+              // dropmarkerRect.left isn't always an integer, hence the - 1 and + 1
+              (r.x1 >= dropmarkerRect.left - 1 &&
+                r.x2 <= dropmarkerRect.right + 1 &&
+                r.y1 >= dropmarkerRect.top &&
+                r.y2 <= dropmarkerRect.bottom) ||
+              // We expect many changes in the results view.
+              (r.x1 >= resultsRect.left &&
+                r.x2 <= resultsRect.right &&
+                r.y1 >= resultsRect.top &&
+                r.y2 <= resultsRect.bottom)
+            )
+        ),
+    };
+  }
 
   info("First opening");
   await withPerfObserver(
     testFn,
     { expectedReflows: expectedReflowsFirstOpen, frames: expectedRects },
     win
   );
 

--- a/browser/components/urlbar/UrlbarInput.jsm
+++ b/browser/components/urlbar/UrlbarInput.jsm
@@ -270,16 +270,17 @@ class UrlbarInput {
     delete this.window;
     delete this.eventBufferer;
     delete this.valueFormatter;
     delete this.panel;
     delete this.view;
     delete this.controller;
     delete this.textbox;
     delete this.inputField;
+    delete this._layoutBreakoutUpdateKey;
   }
 
   /**
    * Removes the CopyCutController from the input's controllers list.  This must
    * be called when the browser's customize mode is entered.
    */
   removeCopyCutController() {
     if (this._copyCutController) {
@@ -961,39 +962,57 @@ class UrlbarInput {
     );
   }
 
   async updateLayoutBreakout() {
     if (!this.megabar) {
       return;
     }
     await this._updateLayoutBreakoutDimensions();
+    if (!this.textbox) {
+      // We may have been uninitialized while waiting for
+      // _updateLayoutBreakoutDimensions.
+      return;
+    }
     this.startLayoutExtend();
   }
 
   startLayoutExtend() {
     if (
       !this.hasAttribute("breakout") ||
       this.hasAttribute("breakout-extend") ||
       this.selectionStart != this.selectionEnd ||
       !(
         (this.getAttribute("focused") == "true" &&
           !this.textbox.classList.contains("hidden-focus")) ||
         this.view.isOpen
       )
     ) {
       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");
         });
       });
     }
   }
 
   endLayoutExtend(force) {
     if (
@@ -1030,16 +1049,21 @@ class UrlbarInput {
     let updateKey = {};
     this._layoutBreakoutUpdateKey = updateKey;
 
     this.removeAttribute("breakout");
     this.textbox.parentNode.removeAttribute("breakout");
 
     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;
         }
 
         this.textbox.parentNode.style.setProperty(
           "--urlbar-container-height",
           px(getBoundsWithoutFlushing(this.textbox.parentNode).height)

--- a/browser/components/urlbar/UrlbarPrefs.jsm
+++ b/browser/components/urlbar/UrlbarPrefs.jsm
@@ -56,16 +56,21 @@ const PREF_URLBAR_DEFAULTS = new Map([
   // readable (percent-decoded) URL on the clipboard.
   ["decodeURLsOnCopy", false],
 
   // The amount of time (ms) to wait after the user has stopped typing before
   // fetching results.  However, we ignore this for the very first result (the
   // "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.
   ["doubleClickSelectsAll", false],
 
   // Whether telemetry events should be recorded.
   ["eventTelemetry.enabled", false],
 

--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -50,17 +50,17 @@
   -moz-box-flex: 1;
   background: none;
   color: inherit;
   border: none;
   font: inherit;
   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);
 }
 
 #urlbar:-moz-lwtheme,
 #navigator-toolbox #searchbar:-moz-lwtheme {
   background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
@@ -118,24 +118,28 @@
 
 @media (prefers-reduced-motion: reduce) {
   #urlbar[breakout][breakout-extend-animate],
   #urlbar[breakout][breakout-extend-animate] > #urlbar-input-container {
     transition-duration: 0s;
   }
 }
 
-#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);
 }
 
 #urlbar[breakout][breakout-extend] > #urlbar-input-container {
   height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutVerticalExtend@ - 2px /* urlbar border */);
   padding-block: calc(@urlbarBreakoutVerticalExtend@ + (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
   padding-inline: @urlbarBreakoutHorizontalExtend@;
 }

--- a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
@@ -97,35 +97,41 @@ add_task(async function test_popup_url()
 
   Assert.equal(
     UrlbarTestUtils.getResultCount(window),
     maxResults,
     "Should get maxResults=" + maxResults + " results"
   );
 
   let popup = gURLBar.view.panel;
-  let popupCS = window.getComputedStyle(popup);
 
-  Assert.equal(
-    popupCS.backgroundColor,
-    `rgb(${hexToRGB(POPUP_COLOR).join(", ")})`,
-    `Popup background color should be set to ${POPUP_COLOR}`
-  );
+  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(
+      popupCS.backgroundColor,
+      `rgb(${hexToRGB(POPUP_COLOR).join(", ")})`,
+      `Popup background color should be set to ${POPUP_COLOR}`
+    );
 
-  Assert.equal(
-    popupCS.borderBottomColor,
-    `rgb(${hexToRGB(CHROME_CONTENT_SEPARATOR_COLOR).join(", ")})`,
-    `Popup bottom color should be set to ${CHROME_CONTENT_SEPARATOR_COLOR}`
-  );
+    Assert.equal(
+      popupCS.borderBottomColor,
+      `rgb(${hexToRGB(CHROME_CONTENT_SEPARATOR_COLOR).join(", ")})`,
+      `Popup bottom color should be set to ${CHROME_CONTENT_SEPARATOR_COLOR}`
+    );
 
-  Assert.equal(
-    popupCS.color,
-    `rgb(${hexToRGB(POPUP_TEXT_COLOR_DARK).join(", ")})`,
-    `Popup color should be set to ${POPUP_TEXT_COLOR_DARK}`
-  );
+    Assert.equal(
+      popupCS.color,
+      `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);
   let actionResult = await UrlbarTestUtils.getDetailsOfResultAt(window, 0);
   let urlResult = await UrlbarTestUtils.getDetailsOfResultAt(window, 1);
   let resultCS = window.getComputedStyle(urlResult.element.row);
 
   Assert.equal(
@@ -195,22 +201,26 @@ add_task(async function test_popup_url()
     },
     files: {
       "image1.png": BACKGROUND,
     },
   });
 
   await extension.startup();
 
-  popupCS = window.getComputedStyle(popup);
-  Assert.equal(
-    popupCS.color,
-    `rgb(${hexToRGB(POPUP_TEXT_COLOR_BRIGHT).join(", ")})`,
-    `Popup color should be set to ${POPUP_TEXT_COLOR_BRIGHT}`
-  );
+  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(
+      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,
     `rgb(${hexToRGB(POPUP_URL_COLOR_BRIGHT).join(", ")})`,
     `Urlbar popup url color should be set to ${POPUP_URL_COLOR_BRIGHT}`
   );
 
   Assert.equal(