Bug 1773155 - Ensure highlighter iframe for parent process is transpa…

…rent. r=nchevobbe By ensuring that it has color-scheme: light in both the embedder and the embedded page. Usually only the outer styling is necessary, but we generally assume that chrome pages follow the OS color-scheme, so we need to make sure both are set as light. This might be able to go away depending on the resolution of mozilla/wg-decisions#774 Differential Revision: https://phabricator.services.mozilla.com/D148585
jamienicol · Jun 8, 2022 · 3df5fea · 3df5fea
1 parent b5ea3cb
commit 3df5fea
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/devtools/server/actors/highlighters/utils/markup.js b/devtools/server/actors/highlighters/utils/markup.js
@@ -62,6 +62,7 @@ const XUL_HIGHLIGHTER_STYLES_SHEET = `data:text/css;charset=utf-8,
   width: 100%;
   height: 100%;
   z-index: 2;
+  color-scheme: light;
 }`;
 
 const STYLESHEET_URI =
@@ -295,6 +296,11 @@ CanvasFrameAnonymousContentHelper.prototype = {
 
       if (!this._iframe) {
         this._iframe = window.document.createElement("iframe");
+        // We need the color-scheme shenanigans to ensure that the iframe is
+        // transparent, see bug 1773155, bug 1738380, and
+        // https://github.com/mozilla/wg-decisions/issues/774.
+        this._iframe.srcdoc =
+          "<!doctype html><meta name=color-scheme content=light>";
         this._iframe.classList.add("devtools-highlighter-renderer");
         // If iframe is used for the first time, add ref count of one to its
         // numberOfHighlighters data attribute.