From 32729482844d7af9e9f307a69c96ea34f1e66011 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 11:05:21 -0400
Subject: Adds setting for controlling the outer style of the popup

---
 ext/bg/settings.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 08e56a09..cb223e72 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -252,8 +252,16 @@
                 </div>
 
                 <div class="form-group options-advanced">
-                    <label for="custom-popup-css">Custom popup CSS</label>
-                    <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
+                    <div class="row">
+                        <div class="col-xs-6">
+                            <label for="custom-popup-css">Custom popup CSS</label>
+                            <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
+                        </div>
+                        <div class="col-xs-6">
+                            <label for="custom-popup-outer-css">Custom popup outer CSS</label>
+                            <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control"></textarea></div>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="form-group ignore-form-changes" style="display: none;" id="settings-popup-preview-settings">
-- 
cgit v1.2.3


From 1b96e69ea2bfe26ded82e2f058d30500290e9d2d Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 12:10:00 -0400
Subject: Placeholder and improve consistency of stylesheet rule priorities

---
 ext/bg/js/settings-popup-preview.js | 17 +++++++++++++++++
 ext/bg/settings-popup-preview.html  |  2 +-
 ext/bg/settings.html                |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js
index 68655fc9..7ccdc7f3 100644
--- a/ext/bg/js/settings-popup-preview.js
+++ b/ext/bg/js/settings-popup-preview.js
@@ -21,6 +21,7 @@ class SettingsPopupPreview {
     constructor() {
         this.frontend = null;
         this.apiOptionsGetOld = apiOptionsGet;
+        this.popupInjectOuterStylesheetOld = Popup.injectOuterStylesheet;
         this.popupShown = false;
         this.themeChangeTimeout = null;
     }
@@ -56,6 +57,9 @@ class SettingsPopupPreview {
 
         await this.frontend.isPrepared();
 
+        // Overwrite popup
+        Popup.injectOuterStylesheet = (...args) => this.popupInjectOuterStylesheet(...args);
+
         // Update search
         this.updateSearch();
     }
@@ -76,6 +80,19 @@ class SettingsPopupPreview {
         return options;
     }
 
+    popupInjectOuterStylesheet(...args) {
+        // This simulates the stylesheet priorities when injecting using the web extension API.
+        const result = this.popupInjectOuterStylesheetOld(...args);
+
+        const outerStylesheet = Popup.outerStylesheet;
+        const node = document.querySelector('#client-css');
+        if (node !== null && outerStylesheet !== null) {
+            node.parentNode.insertBefore(outerStylesheet, node);
+        }
+
+        return result;
+    }
+
     onWindowResize() {
         if (this.frontend === null) { return; }
         const textSource = this.frontend.textSourceLast;
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html
index bfe4550c..07caa271 100644
--- a/ext/bg/settings-popup-preview.html
+++ b/ext/bg/settings-popup-preview.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Yomichan Popup Preview</title>
-        <link rel="stylesheet" type="text/css" href="/fg/css/client.css">
+        <link rel="stylesheet" type="text/css" href="/fg/css/client.css" id="client-css">
         <style>
             html {
                 transition: background-color 0.25s linear 0s, color 0.25s linear 0s;
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index cb223e72..ea3e8c18 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -259,7 +259,7 @@
                         </div>
                         <div class="col-xs-6">
                             <label for="custom-popup-outer-css">Custom popup outer CSS</label>
-                            <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control"></textarea></div>
+                            <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control" placeholder="iframe.yomichan-float { /*styles*/ }"></textarea></div>
                         </div>
                     </div>
                 </div>
-- 
cgit v1.2.3