Shadow DOM container for popup iframes (#623)

* Add support for injecting stylesheets into a custom parent node

* Add api.getStylesheetContent

* Add support for injecting a CSS file's content

* Add usePopupShadowDom option

* Use a per-parentNode cache

* Add support for using a shadow DOM wrapper around popup iframes

* Ignore the popup container instead of the frame

4 files changed, 20 insertions, 2 deletions

diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json
index f8791433..b56017bc 100644
--- a/ext/bg/data/options-schema.json
+++ b/ext/bg/data/options-schema.json
@@ -110,7 +110,8 @@
                                     "showPitchAccentPositionNotation",
                                     "showPitchAccentGraph",
                                     "showIframePopupsInRootFrame",
-                                    "useSecurePopupFrameUrl"
+                                    "useSecurePopupFrameUrl",
+                                    "usePopupShadowDom"
                                 ],
                                 "properties": {
                                     "enable": {
@@ -252,6 +253,10 @@
                                     "useSecurePopupFrameUrl": {
                                         "type": "boolean",
                                         "default": true
+                                    },
+                                    "usePopupShadowDom": {
+                                        "type": "boolean",
+                                        "default": true
                                     }
                                 }
                             },
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index b89cb641..344706d1 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -108,6 +108,7 @@ class Backend {
             ['broadcastTab',                 {async: false, contentScript: true,  handler: this._onApiBroadcastTab.bind(this)}],
             ['frameInformationGet',          {async: true,  contentScript: true,  handler: this._onApiFrameInformationGet.bind(this)}],
             ['injectStylesheet',             {async: true,  contentScript: true,  handler: this._onApiInjectStylesheet.bind(this)}],
+            ['getStylesheetContent',         {async: true,  contentScript: true,  handler: this._onApiGetStylesheetContent.bind(this)}],
             ['getEnvironmentInfo',           {async: false, contentScript: true,  handler: this._onApiGetEnvironmentInfo.bind(this)}],
             ['clipboardGet',                 {async: true,  contentScript: true,  handler: this._onApiClipboardGet.bind(this)}],
             ['getDisplayTemplatesHtml',      {async: true,  contentScript: true,  handler: this._onApiGetDisplayTemplatesHtml.bind(this)}],
@@ -719,6 +720,13 @@ class Backend {
         });
     }
 
+    async _onApiGetStylesheetContent({url}) {
+        if (!url.startsWith('/') || url.startsWith('//') || !url.endsWith('.css')) {
+            throw new Error('Invalid URL');
+        }
+        return await requestText(url, 'GET');
+    }
+
     _onApiGetEnvironmentInfo() {
         return this.environment.getInfo();
     }
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 151c945b..ccc56848 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -177,7 +177,8 @@ function profileOptionsCreateDefaults() {
             showPitchAccentPositionNotation: true,
             showPitchAccentGraph: false,
             showIframePopupsInRootFrame: false,
-            useSecurePopupFrameUrl: true
+            useSecurePopupFrameUrl: true,
+            usePopupShadowDom: true
         },
 
         audio: {
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 4de70b7e..51cb14e7 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -187,6 +187,10 @@
                 </div>
 
                 <div class="checkbox options-advanced">
+                    <label><input type="checkbox" data-setting="general.usePopupShadowDom"> Use shadow DOM container for popup</label>
+                </div>
+
+                <div class="checkbox options-advanced">
                     <label><input type="checkbox" id="show-debug-info" data-setting="general.debugInfo" data-transform-pre="setDocumentAttribute" data-transform-post="setDocumentAttribute" data-document-attribute="data-options-general-debug-info"> Show debug information</label>
                 </div>