Bug 1443561 - Part 0: Workaround bug 1482157, set -moz-appearance:toolbox on #navigator-toolbox::after. r=dao, a=RyanVM
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 17 Aug 2018 10:22:42 +0100
changeset 450035 2d5cc6eecb7c
parent 450034 df3fb67f0972
child 450036 4c33709c2271
push id151
push userryanvm@gmail.com
push dateThu, 23 Aug 2018 17:52:30 +0000
treeherdermozilla-esr60@b63eb86ff55a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, RyanVM
bugs1443561, 1482157
milestone60.1.1
Bug 1443561 - Part 0: Workaround bug 1482157, set -moz-appearance:toolbox on #navigator-toolbox::after. r=dao, a=RyanVM MozReview-Commit-ID: CuJIYn9ioPO
browser/themes/osx/browser.css
toolkit/components/extensions/test/browser/browser_ext_themes_separators.js
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -36,19 +36,35 @@
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
 
   --toolbox-border-bottom-color: rgba(0,0,0,.3);
 }
 
 #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_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();
 });