Bug 1443561 - Part 0: Workaround bug 1482157, set -moz-appearance:toolbox on #navigator-toolbox::after. r=dao
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 17 Aug 2018 10:22:42 +0100
changeset 432584 7555241630ce
parent 432583 51acbb8dc501
child 432585 6086b5e84d5b
push id106794
push userntim.bugs@gmail.com
push dateTue, 21 Aug 2018 14:47:05 +0000
treeherdermozilla-inbound@6086b5e84d5b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1443561, 1482157
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1443561 - Part 0: Workaround bug 1482157, set -moz-appearance:toolbox on #navigator-toolbox::after. r=dao MozReview-Commit-ID: CuJIYn9ioPO
browser/themes/osx/browser.css
toolkit/components/extensions/test/browser/browser_ext_themes_sanitization.js
toolkit/components/extensions/test/browser/browser_ext_themes_separators.js
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -42,19 +42,35 @@
   --panel-separator-color: rgba(249,249,250,.1);
 
   --arrowpanel-dimmed: rgba(249,249,250,.1);
   --arrowpanel-dimmed-further: rgba(249,249,250,.15);
   --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
 }
 
 #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;
 }
 
 #navigator-toolbox toolbarbutton:-moz-lwtheme {
   color: inherit;
   text-shadow: inherit;
 }
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_sanitization.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_sanitization.js
@@ -5,78 +5,77 @@
 add_task(async function test_sanitization_invalid() {
   // This test checks that invalid values are sanitized
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "colors": {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
-          "toolbar_bottom_separator": "ntimsfavoriteblue",
+          "toolbar_text": "ntimsfavoriteblue",
         },
       },
     },
   });
 
   let docEl = document.documentElement;
 
   let transitionPromise = waitForTransition(docEl, "background-color");
   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."
   );
 
   await extension.unload();
 });
 
 add_task(async function test_sanitization_css_variables() {
   // This test checks that CSS variables are sanitized
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "colors": {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
-          "toolbar_bottom_separator": "var(--arrowpanel-dimmed)",
+          "toolbar_text": "var(--arrowpanel-dimmed)",
         },
       },
     },
   });
 
   let docEl = document.documentElement;
 
   let transitionPromise = waitForTransition(docEl, "background-color");
   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."
   );
 
   await extension.unload();
 });
 
 add_task(async function test_sanitization_transparent() {
   // This test checks whether transparent values are applied properly
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "colors": {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
           "toolbar_top_separator": "transparent",
-          "toolbar_bottom_separator": "transparent",
         },
       },
     },
   });
 
   let docEl = document.documentElement;
 
   let transitionPromise = waitForTransition(docEl, "background-color");
@@ -84,23 +83,16 @@ add_task(async function test_sanitizatio
   await transitionPromise;
 
   let navbar = document.querySelector("#nav-bar");
   Assert.ok(
     window.getComputedStyle(navbar).boxShadow.includes("rgba(0, 0, 0, 0)"),
     "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();
 });
 
 add_task(async function test_sanitization_transparent_accentcolor() {
   // This test checks whether transparent accentcolor falls back to white.
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_separators.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_separators.js
@@ -51,16 +51,24 @@ add_task(async function test_support_sep
   Assert.ok(
     window.getComputedStyle(panelUIButton)
           .getPropertyValue("border-image-source")
           .includes(`rgb(${hexToRGB(SEPARATOR_VERTICAL_COLOR).join(", ")})`),
     "Vertical separator color properly set"
   );
 
   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();
 });