Bug 1922546 - Add back the z-index for #navigator-toolbox. r=emilio,desktop-theme-reviewers,sidebar-reviewers,nsharpley

* Adds a z-index for the #navigator-toolbox (with and without sidebar.verticalTabs)
* This will regress Bug 1921811, and will need follow-up in bug Bug 1921257

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

browser/components/sidebar/tests/browser/browser.toml

@@ -50,4 +50,6 @@ run-if = ["os == 'mac'"] # Mac only feature
 
 ["browser_vertical_tabs_cui_reset.js"]
 
+["browser_vertical_tabs_stacking_context.js"]
+
 ["browser_view_sidebar_menu.js"]

browser/components/sidebar/tests/browser/browser_vertical_tabs_stacking_context.js

@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Check that when enabling vertical tabs, we can still receive a click on the urlbar results view
+ */
+add_task(async function test_click_urlbar_results() {
+  await SpecialPowers.pushPrefEnv({ set: [["sidebar.verticalTabs", true]] });
+
+  await TestUtils.waitForCondition(() => {
+    return BrowserTestUtils.isVisible(document.querySelector("sidebar-main"));
+  }, "The new sidebar is shown.");
+
+  await BrowserTestUtils.withNewTab(
+    {
+      url: "about:blank",
+      gBrowser,
+    },
+    async () => {
+      let urlbarResultsElem = document.querySelector("#urlbar .urlbarView");
+
+      EventUtils.synthesizeMouseAtCenter(
+        document.querySelector("#urlbar .urlbar-input-box"),
+        {}
+      );
+      await TestUtils.waitForCondition(() => {
+        return BrowserTestUtils.isVisible(urlbarResultsElem);
+      });
+
+      let promiseClicked = BrowserTestUtils.waitForEvent(
+        urlbarResultsElem,
+        "click",
+        true
+      );
+
+      EventUtils.synthesizeMouseAtCenter(urlbarResultsElem, {});
+
+      await promiseClicked;
+      Assert.ok(true, "urlbar results view received a click");
+    }
+  );
+});

browser/themes/shared/browser-shared.css

@@ -57,6 +57,9 @@ body {
   --browser-stack-z-index-dialog-stack: 2;
   --browser-stack-z-index-rdm-toolbar: 3;
 
+  /* z-indices that fight in the general browser / toolbox area */
+  --browser-area-z-index-toolbox: 1;
+
   --toolbarbutton-border-radius: 4px;
   --identity-box-margin-inline: 4px;
   --urlbar-min-height: max(32px, 1.4em);
@@ -116,12 +119,14 @@ body {
 
 #navigator-toolbox {
   appearance: none;
+  position: relative;
 
-  /* stylelint-disable-next-line media-query-no-invalid */
-  @media (-moz-bool-pref: "sidebar.verticalTabs") {
-    /* Should paint on top of our sibling #browser (even when preceding it in the DOM) */
-    z-index: var(--browser-area-z-index-toolbox);
-  }
+  /*
+   Should paint on top of our sibling #browser (even when preceding it in the DOM)
+   TODO(sfoster): we need a broader re-think of stacking and paint order.
+   See bug 1921257 and bug 1921811.
+   */
+  z-index: var(--browser-area-z-index-toolbox);
 
   background-color: var(--toolbox-non-lwt-bgcolor);
   color: var(--toolbox-non-lwt-textcolor);