Backed out changeset e2a0b2626fe8 (bug 1560348) for frequently failing browser-chrome at browser/components/extensions/test/browser/browser_ext_browserAction_contextMenu.js

browser/base/content/browser.css

@@ -74,7 +74,7 @@ body {
 %endif
 }
 
-:root[customizing] {
+:root[customize-entered] {
   min-width: -moz-fit-content;
 }
 

browser/components/customizableui/CustomizeMode.jsm

@@ -377,8 +377,6 @@ CustomizeMode.prototype = {
 
       this._wrapToolbarItemSync(CustomizableUI.AREA_TABSTRIP);
 
-      this.document.documentElement.setAttribute("customizing", true);
-
       let customizableToolbars = document.querySelectorAll(
         "toolbar[customizable=true]:not([autohide=true]):not([collapsed=true])"
       );
@@ -388,6 +386,8 @@ CustomizeMode.prototype = {
 
       this._updateOverflowPanelArrowOffset();
 
+      await this._doTransition(true);
+
       // Let everybody in this window know that we're about to customize.
       CustomizableUI.dispatchToolboxEvent("customizationstarting", {}, window);
 
@@ -489,6 +489,8 @@ CustomizeMode.prototype = {
     (async () => {
       await this.depopulatePalette();
 
+      await this._doTransition(false);
+
       if (this.browser.selectedTab == gTab) {
         if (gTab.linkedBrowser.currentURI.spec == "about:blank") {
           closeGlobalTab();
@@ -528,8 +530,6 @@ CustomizeMode.prototype = {
       // customization mode for a second time.
       this._customizing = false;
 
-      this.document.documentElement.removeAttribute("customizing");
-
       let customizableToolbars = document.querySelectorAll(
         "toolbar[customizable=true]:not([autohide=true])"
       );
@@ -555,6 +555,40 @@ CustomizeMode.prototype = {
     });
   },
 
+  /**
+   * The customize mode transition has 4 phases when entering:
+   * 1) Pre-customization mode
+   *    This is the starting phase of the browser.
+   * 2) LWT swapping
+   *    This is where we swap some of the lightweight theme styles in order
+   *    to make them work in customize mode. We set/unset a customization-
+   *    lwtheme attribute iff we're using a lightweight theme.
+   * 3) customize-entering
+   *    This phase is a transition, optimized for smoothness.
+   * 4) customize-entered
+   *    After the transition completes, this phase draws all of the
+   *    expensive detail that isn't necessary during the second phase.
+   *
+   * Exiting customization mode has a similar set of phases, but in reverse
+   * order - customize-entered, customize-exiting, remove LWT swapping,
+   * pre-customization mode.
+   *
+   * When in the customize-entering, customize-entered, or customize-exiting
+   * phases, there is a "customizing" attribute set on the main-window to simplify
+   * excluding certain styles while in any phase of customize mode.
+   */
+  _doTransition(aEntering) {
+    let docEl = this.document.documentElement;
+    if (aEntering) {
+      docEl.setAttribute("customizing", true);
+      docEl.setAttribute("customize-entered", true);
+    } else {
+      docEl.removeAttribute("customizing");
+      docEl.removeAttribute("customize-entered");
+    }
+    return Promise.resolve();
+  },
+
   /**
    * The overflow panel in customize mode should have its arrow pointing
    * at the overflow button. In order to do this correctly, we pass the

browser/components/customizableui/test/browser_lwt_telemetry.js

@@ -60,5 +60,10 @@ add_task(async function testCustomize() {
     "The events are recorded correctly"
   );
 
+  // Wait for customize mode to be re-entered now that the customize tab is
+  // active. This is needed for endCustomizing() to work properly.
+  await TestUtils.waitForCondition(
+    () => document.documentElement.getAttribute("customizing") == "true"
+  );
   await endCustomizing();
 });

browser/themes/osx/browser.css

@@ -126,7 +126,7 @@
 
 /* Draw the bottom border of the tabs toolbar when it's not using
    -moz-appearance: toolbar. */
-:root:-moz-any([sizemode="fullscreen"],[customizing]) #nav-bar:not([tabs-hidden="true"]),
+:root:-moz-any([sizemode="fullscreen"],[customize-entered]) #nav-bar:not([tabs-hidden="true"]),
 :root:not([tabsintitlebar]) #nav-bar:not([tabs-hidden="true"]),
 #nav-bar:not([tabs-hidden="true"]):-moz-lwtheme {
   box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-border-color);