Bug 1443561 - Part 0: Workaround bug 1482157, set -moz-appearance:toolbox on #navigator-toolbox::after. r=dao

MozReview-Commit-ID: CuJIYn9ioPO

--HG--
extra : rebase_source : 47f0b067884cdc1b18c183f1674c473162f73343

browser/themes/osx/browser.css

@@ -47,9 +47,25 @@
 }
 
 #navigator-toolbox {
+  -moz-appearance: none;
   --tabs-border-color: rgba(0,0,0,.3);
 }
 
+/*
+  This is a workaround for Bug 1482157
+  -moz-appearance: toolbox; makes the macOS sheets attached to the element's
+  bottom border. We cannot put this property on the toolbox itself as it
+  cancels all backgrounds that are there, so we set it on the toolbox bottom
+  border.
+*/
+#navigator-toolbox::after {
+  -moz-appearance: toolbox;
+  height: 1px;
+  /* use inset box-shadow instead of border because -moz-appearance hides the border */
+  border: none;
+  box-shadow: inset 0 -1px var(--toolbox-border-bottom-color);
+}
+
 #tabbrowser-tabs {
   --tab-line-color: #0a84ff;
 }

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

@@ -10,7 +10,7 @@ add_task(async function test_sanitization_invalid() {
         "colors": {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
-          "toolbar_bottom_separator": "ntimsfavoriteblue",
+          "toolbar_text": "ntimsfavoriteblue",
         },
       },
     },
@@ -22,9 +22,9 @@ add_task(async function test_sanitization_invalid() {
   await extension.startup();
   await transitionPromise;
 
-  let toolbox = document.querySelector("#navigator-toolbox");
+  let navbar = document.querySelector("#nav-bar");
   Assert.equal(
-    window.getComputedStyle(toolbox, "::after").borderBottomColor,
+    window.getComputedStyle(navbar).color,
     "rgb(0, 0, 0)",
     "All invalid values should always compute to black."
   );
@@ -40,7 +40,7 @@ add_task(async function test_sanitization_css_variables() {
         "colors": {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
-          "toolbar_bottom_separator": "var(--arrowpanel-dimmed)",
+          "toolbar_text": "var(--arrowpanel-dimmed)",
         },
       },
     },
@@ -52,9 +52,9 @@ add_task(async function test_sanitization_css_variables() {
   await extension.startup();
   await transitionPromise;
 
-  let toolbox = document.querySelector("#navigator-toolbox");
+  let navbar = document.querySelector("#nav-bar");
   Assert.equal(
-    window.getComputedStyle(toolbox, "::after").borderBottomColor,
+    window.getComputedStyle(navbar).color,
     "rgb(0, 0, 0)",
     "All CSS variables should always compute to black."
   );
@@ -71,7 +71,6 @@ add_task(async function test_sanitization_transparent() {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
           "toolbar_top_separator": "transparent",
-          "toolbar_bottom_separator": "transparent",
         },
       },
     },
@@ -89,13 +88,6 @@ add_task(async function test_sanitization_transparent() {
     "Top separator should be transparent"
   );
 
-  let toolbox = document.querySelector("#navigator-toolbox");
-  Assert.equal(
-    window.getComputedStyle(toolbox, "::after").borderBottomColor,
-    "rgba(0, 0, 0, 0)",
-    "Bottom separator should be transparent"
-  );
-
   await extension.unload();
 });
 

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

@@ -56,11 +56,19 @@ add_task(async function test_support_separator_properties() {
   );
 
   let toolbox = document.querySelector("#navigator-toolbox");
-  Assert.equal(
-    window.getComputedStyle(toolbox, "::after").borderBottomColor,
-    `rgb(${hexToRGB(SEPARATOR_BOTTOM_COLOR).join(", ")})`,
-    "Bottom separator color properly set"
-  );
+  if (AppConstants.platform == "macosx") {
+    Assert.ok(
+      window.getComputedStyle(toolbox, "::after").boxShadow
+            .includes(`rgb(${hexToRGB(SEPARATOR_BOTTOM_COLOR).join(", ")})`),
+      "Bottom separator color properly set"
+    );
+  } else {
+    Assert.equal(
+      window.getComputedStyle(toolbox, "::after").borderBottomColor,
+      `rgb(${hexToRGB(SEPARATOR_BOTTOM_COLOR).join(", ")})`,
+      "Bottom separator color properly set"
+    );
+  }
 
   await extension.unload();
 });