Bug 1459066 - Overflow menu WebExtension subview header should use the default browser styling instead of the extension's styling. draft
authorJared Wein <jwein@mozilla.com>
Mon, 07 May 2018 13:06:46 -0400
changeset 792189 475d01dd9a41dab05f91820ec5df44f4f540e5f6
parent 791615 a91ca6e5ca820b53fad9bb98b256934353f5217a
push id109037
push userbmo:jaws@mozilla.com
push dateMon, 07 May 2018 20:45:51 +0000
bugs1459066
milestone61.0a1
Bug 1459066 - Overflow menu WebExtension subview header should use the default browser styling instead of the extension's styling. MozReview-Commit-ID: EtQ6VS5OH0e
browser/components/extensions/ExtensionPopups.jsm
browser/components/extensions/test/browser/browser_ext_popup_background.js
--- a/browser/components/extensions/ExtensionPopups.jsm
+++ b/browser/components/extensions/ExtensionPopups.jsm
@@ -355,17 +355,21 @@ class BasePopup {
     // Panels inherit the applied theme (light, dark, etc) and there is a high
     // likelihood that most extension authors will not have tested with a dark theme.
     // If they have not set a background-color, we force it to white to ensure visibility
     // of the extension content. Passing `null` should be treated the same as no argument,
     // which is why we can't use default parameters here.
     if (!background) {
       background = "#fff";
     }
-    this.panel.style.setProperty("--arrowpanel-background", background);
+    if (this.panel.id == "widget-overflow") {
+      this.browser.style.background = background;
+    } else {
+      this.panel.style.setProperty("--arrowpanel-background", background);
+    }
     if (background == "#fff") {
       // Set a usable default color that work with the default background-color.
       this.panel.style.setProperty("--arrowpanel-border-color", "hsla(210,4%,10%,.15)");
     }
     this.background = background;
   }
 }
 
@@ -533,16 +537,21 @@ class ViewPopup extends BasePopup {
 
     // Create a new browser in the real popup.
     let browser = this.browser;
     await this.createBrowser(this.viewNode);
 
     this.ignoreResizes = false;
 
     this.browser.swapDocShells(browser);
+    // Need to copy over inline styles since they would otherwise
+    // get lost during the swap.
+    if (browser.style.background) {
+      this.browser.style.setProperty("background", browser.style.background);
+    }
     this.destroyBrowser(browser);
 
     if (this.dimensions) {
       if (this.fixedWidth) {
         delete this.dimensions.width;
       }
       this.resizeBrowser(this.dimensions);
     }
--- a/browser/components/extensions/test/browser/browser_ext_popup_background.js
+++ b/browser/components/extensions/test/browser/browser_ext_popup_background.js
@@ -5,17 +5,25 @@
 
 async function testPanel(browser, standAlone, initial_background) {
   let panel = getPanelForNode(browser);
   let arrowContent = document.getAnonymousElementByAttribute(panel, "class", "panel-arrowcontent");
   let arrow = document.getAnonymousElementByAttribute(panel, "anonid", "arrow");
 
   let checkArrow = (background = null) => {
     if (background == null || !standAlone) {
-      ok(!arrow.style.hasOwnProperty("fill"), "Arrow fill should be the default one");
+      let default_background =
+        getComputedStyle(document.documentElement).getPropertyValue("--arrowpanel-background");
+      // Need to apply the color to a node and get the computed value
+      // to resolve CSS named colors such as -moz-field.
+      let span = document.createElementNS("http://www.w3.org/1999/xhtml", "span");
+      span.style.color = default_background;
+      let default_background_computed = getComputedStyle(span).color;
+
+      is(getComputedStyle(arrow).fill, default_background_computed, "Arrow fill should be the default one");
       return;
     }
 
     is(getComputedStyle(arrowContent).backgroundColor, background, "Arrow content should have correct background");
     is(getComputedStyle(arrow).fill, background, "Arrow should have correct background");
   };
 
   function getBackground(browser) {