From 118f200500b3a27afc873a896b8304387456e2e7 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 10:50:56 -0400
Subject: Simplified how the auto theme works

---
 ext/fg/css/client.css |  3 ++-
 ext/fg/js/popup.js    | 19 ++++++++-----------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css
index 84098653..4b824da3 100644
--- a/ext/fg/css/client.css
+++ b/ext/fg/css/client.css
@@ -29,7 +29,8 @@ iframe#yomichan-float {
     box-sizing: border-box;
 }
 
-iframe#yomichan-float[data-yomichan-theme=dark] {
+iframe#yomichan-float[data-yomichan-theme=dark],
+iframe#yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] {
     background-color: #1e1e1e;
     border: 1px solid #666;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index ef4cdb67..880e3efe 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -271,19 +271,16 @@ class Popup {
     }
 
     updateTheme() {
-        this.container.dataset.yomichanTheme = this.getTheme(this.options.general.popupOuterTheme);
+        this.container.dataset.yomichanTheme = this.options.general.popupOuterTheme;
+        this.container.dataset.yomichanSiteColor = this.getSiteColor();
     }
 
-    getTheme(themeName) {
-        if (themeName === 'auto') {
-            const color = [255, 255, 255];
-            Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor));
-            Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.body).backgroundColor));
-            const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128);
-            themeName = dark ? 'dark' : 'default';
-        }
-
-        return themeName;
+    getSiteColor() {
+        const color = [255, 255, 255];
+        Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor));
+        Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.body).backgroundColor));
+        const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128);
+        return dark ? 'dark' : 'light';
     }
 
     static addColor(target, color) {
-- 
cgit v1.2.3


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/css/settings.css |  3 ++-
 ext/bg/js/options.js    |  3 ++-
 ext/bg/js/settings.js   |  2 ++
 ext/bg/settings.html    | 12 ++++++++++--
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 09d60b26..21cbe256 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -128,7 +128,8 @@
     content: counter(audio-source-id);
 }
 
-#custom-popup-css {
+#custom-popup-css,
+#custom-popup-outer-css {
     width: 100%;
     min-height: 34px;
     height: 96px;
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index cadc4443..fac17d68 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -278,7 +278,8 @@ function profileOptionsCreateDefaults() {
             mainDictionary: '',
             popupTheme: 'default',
             popupOuterTheme: 'default',
-            customPopupCss: ''
+            customPopupCss: '',
+            customPopupOuterCss: ''
         },
 
         audio: {
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 900b89bb..7eee7bce 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -42,6 +42,7 @@ async function formRead(options) {
     options.general.popupTheme = $('#popup-theme').val();
     options.general.popupOuterTheme = $('#popup-outer-theme').val();
     options.general.customPopupCss = $('#custom-popup-css').val();
+    options.general.customPopupOuterCss = $('#custom-popup-outer-css').val();
 
     options.audio.enabled = $('#audio-playback-enabled').prop('checked');
     options.audio.autoPlay = $('#auto-play-audio').prop('checked');
@@ -112,6 +113,7 @@ async function formWrite(options) {
     $('#popup-theme').val(options.general.popupTheme);
     $('#popup-outer-theme').val(options.general.popupOuterTheme);
     $('#custom-popup-css').val(options.general.customPopupCss);
+    $('#custom-popup-outer-css').val(options.general.customPopupOuterCss);
 
     $('#audio-playback-enabled').prop('checked', options.audio.enabled);
     $('#auto-play-audio').prop('checked', options.audio.autoPlay);
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 c9158a37b509ba58cd1e364e3d7a31cd43de5789 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 11:46:27 -0400
Subject: Allow outer popup stylesheets to be injected

---
 ext/bg/js/api.js     | 29 +++++++++++++++++++++++++++++
 ext/bg/js/backend.js |  1 +
 ext/fg/js/api.js     |  4 ++++
 ext/fg/js/popup.js   | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 84 insertions(+)

diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index f768e6f9..94a70c34 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -241,3 +241,32 @@ function apiFrameInformationGet(sender) {
     const frameId = sender.frameId;
     return Promise.resolve({frameId});
 }
+
+function apiInjectStylesheet(css, sender) {
+    if (!sender.tab) {
+        return Promise.reject(new Error('Invalid tab'));
+    }
+
+    const tabId = sender.tab.id;
+    const frameId = sender.frameId;
+    const details = {
+        code: css,
+        runAt: 'document_start',
+        cssOrigin: 'user',
+        allFrames: false
+    };
+    if (typeof frameId === 'number') {
+        details.frameId = frameId;
+    }
+
+    return new Promise((resolve, reject) => {
+        chrome.tabs.insertCSS(tabId, details, () => {
+            const e = chrome.runtime.lastError;
+            if (e) {
+                reject(new Error(e.message));
+            } else {
+                resolve();
+            }
+        });
+    });
+}
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 453f4282..c1216d95 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -185,6 +185,7 @@ Backend.messageHandlers = {
     screenshotGet: ({options}, sender) => apiScreenshotGet(options, sender),
     forward: ({action, params}, sender) => apiForward(action, params, sender),
     frameInformationGet: (params, sender) => apiFrameInformationGet(sender),
+    injectStylesheet: ({css}, sender) => apiInjectStylesheet(css, sender)
 };
 
 window.yomichan_backend = new Backend();
diff --git a/ext/fg/js/api.js b/ext/fg/js/api.js
index a553e514..dcfb2a09 100644
--- a/ext/fg/js/api.js
+++ b/ext/fg/js/api.js
@@ -64,3 +64,7 @@ function apiForward(action, params) {
 function apiFrameInformationGet() {
     return utilInvoke('frameInformationGet');
 }
+
+function apiInjectStylesheet(css) {
+    return utilInvoke('injectStylesheet', {css});
+}
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 880e3efe..73ed37e0 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -38,6 +38,7 @@ class Popup {
         this.visible = false;
         this.visibleOverride = null;
         this.options = null;
+        this.stylesheetInjectedViaApi = false;
         this.updateVisibility();
     }
 
@@ -75,6 +76,7 @@ class Popup {
             });
             this.observeFullscreen();
             this.onFullscreenChanged();
+            this.setCustomOuterCss(this.options.general.customPopupOuterCss, false);
             this.isInjected = true;
         });
     }
@@ -334,6 +336,23 @@ class Popup {
         this.invokeApi('setCustomCss', {css});
     }
 
+    async setCustomOuterCss(css, injectDirectly) {
+        // Cannot repeatedly inject stylesheets using web extension APIs since there is no way to remove them.
+        if (this.stylesheetInjectedViaApi) { return; }
+
+        if (injectDirectly || Popup.isOnExtensionPage()) {
+            Popup.injectOuterStylesheet(css);
+        } else {
+            if (!css) { return; }
+            try {
+                await apiInjectStylesheet(css);
+                this.stylesheetInjectedViaApi = true;
+            } catch (e) {
+                // NOP
+            }
+        }
+    }
+
     clearAutoPlayTimer() {
         if (this.isInjected) {
             this.invokeApi('clearAutoPlayTimer');
@@ -375,4 +394,35 @@ class Popup {
     get url() {
         return window.location.href;
     }
+
+    static isOnExtensionPage() {
+        try {
+            const url = chrome.runtime.getURL('/');
+            return window.location.href.substr(0, url.length) === url;
+        } catch (e) {
+            // NOP
+        }
+    }
+
+    static injectOuterStylesheet(css) {
+        if (Popup.outerStylesheet === null) {
+            if (!css) { return; }
+            Popup.outerStylesheet = document.createElement('style');
+            Popup.outerStylesheet.id = "yomichan-popup-outer-stylesheet";
+        }
+
+        const outerStylesheet = Popup.outerStylesheet;
+        if (css) {
+            outerStylesheet.textContent = css;
+
+            const par = document.head;
+            if (par && outerStylesheet.parentNode !== par) {
+                par.appendChild(outerStylesheet);
+            }
+        } else {
+            outerStylesheet.textContent = '';
+        }
+    }
 }
+
+Popup.outerStylesheet = null;
-- 
cgit v1.2.3


From 42d67249c9d912cbb39700f55bb33051f69055c7 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 11:51:59 -0400
Subject: Update the popup preview to show live updates to outer CSS changes

---
 ext/bg/js/settings-popup-preview.js | 8 +++++++-
 ext/bg/js/settings.js               | 6 ++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js
index 53a5f1d0..68655fc9 100644
--- a/ext/bg/js/settings-popup-preview.js
+++ b/ext/bg/js/settings-popup-preview.js
@@ -127,6 +127,11 @@ class SettingsPopupPreview {
         this.frontend.popup.setCustomCss(css);
     }
 
+    setCustomOuterCss(css) {
+        if (this.frontend === null) { return; }
+        this.frontend.popup.setCustomOuterCss(css, true);
+    }
+
     async updateSearch() {
         const exampleText = document.querySelector('#example-text');
         if (exampleText === null) { return; }
@@ -152,7 +157,8 @@ class SettingsPopupPreview {
 
 SettingsPopupPreview.messageHandlers = {
     setText: (self, {text}) => self.setText(text),
-    setCustomCss: (self, {css}) => self.setCustomCss(css)
+    setCustomCss: (self, {css}) => self.setCustomCss(css),
+    setCustomOuterCss: (self, {css}) => self.setCustomOuterCss(css)
 };
 
 SettingsPopupPreview.instance = SettingsPopupPreview.create();
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 7eee7bce..77815955 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -285,6 +285,7 @@ function showAppearancePreview() {
     const settings = $('#settings-popup-preview-settings');
     const text = $('#settings-popup-preview-text');
     const customCss = $('#custom-popup-css');
+    const customOuterCss = $('#custom-popup-outer-css');
 
     const frame = document.createElement('iframe');
     frame.src = '/bg/settings-popup-preview.html';
@@ -302,6 +303,11 @@ function showAppearancePreview() {
         const params = {css: customCss.val()};
         frame.contentWindow.postMessage({action, params}, '*');
     });
+    customOuterCss.on('input', () => {
+        const action = 'setCustomOuterCss';
+        const params = {css: customOuterCss.val()};
+        frame.contentWindow.postMessage({action, params}, '*');
+    });
 
     container.append(frame);
     buttonContainer.remove();
-- 
cgit v1.2.3


From b34ff7ebe9004d85140cced007c67ca2c9f59396 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 11:57:40 -0400
Subject: Change #yomichan-float to .yomichan-float

Since there can be more than one popup, using a class makes more sense than an ID.
---
 ext/bg/search.html                 |  2 +-
 ext/bg/settings-popup-preview.html |  2 +-
 ext/fg/css/client.css              | 12 ++++++------
 ext/fg/float.html                  |  2 +-
 ext/fg/js/popup.js                 |  2 +-
 ext/mixed/css/display.css          |  8 ++++----
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/ext/bg/search.html b/ext/bg/search.html
index 6930830a..9d28b358 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="yomichan-search">
+<html lang="en" data-yomichan-page="search">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1" />
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html
index 3d426f7a..bfe4550c 100644
--- a/ext/bg/settings-popup-preview.html
+++ b/ext/bg/settings-popup-preview.html
@@ -24,7 +24,7 @@
                 font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
                 font-size: 14px;
             }
-            iframe#yomichan-float {
+            iframe.yomichan-float {
                 resize: none;
             }
             .vertical-align-outer {
diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css
index 4b824da3..633c88ef 100644
--- a/ext/fg/css/client.css
+++ b/ext/fg/css/client.css
@@ -17,7 +17,7 @@
  */
 
 
-iframe#yomichan-float {
+iframe.yomichan-float {
     all: initial;
     background-color: #fff;
     border: 1px solid #999;
@@ -29,14 +29,14 @@ iframe#yomichan-float {
     box-sizing: border-box;
 }
 
-iframe#yomichan-float[data-yomichan-theme=dark],
-iframe#yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] {
+iframe.yomichan-float[data-yomichan-theme=dark],
+iframe.yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] {
     background-color: #1e1e1e;
     border: 1px solid #666;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
 }
 
-iframe#yomichan-float.yomichan-float-full-width {
+iframe.yomichan-float.yomichan-float-full-width {
     border-left: none;
     border-right: none;
     left: 0 !important;
@@ -46,13 +46,13 @@ iframe#yomichan-float.yomichan-float-full-width {
     resize: none;
 }
 
-iframe#yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) {
+iframe.yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) {
     border-bottom: none;
     top: auto !important;
     bottom: 0 !important;
 }
 
-iframe#yomichan-float.yomichan-float-full-width.yomichan-float-above {
+iframe.yomichan-float.yomichan-float-full-width.yomichan-float-above {
     border-top: none;
     top: 0 !important;
     bottom: auto !important;
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 2504f448..580a7963 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="yomichan-float">
+<html lang="en" data-yomichan-page="float">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1" />
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 73ed37e0..2a9670fc 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -27,7 +27,7 @@ class Popup {
         this.child = null;
         this.childrenSupported = true;
         this.container = document.createElement('iframe');
-        this.container.id = 'yomichan-float';
+        this.container.className = 'yomichan-float';
         this.container.addEventListener('mousedown', e => e.stopPropagation());
         this.container.addEventListener('scroll', e => e.stopPropagation());
         this.container.setAttribute('src', chrome.extension.getURL('/fg/float.html'));
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 7ebad090..7793ddeb 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -30,8 +30,8 @@
  * General
  */
 
-html.yomichan-float:not([data-yomichan-theme]),
-html.yomichan-float:not([data-yomichan-theme]) body {
+html:root[data-yomichan-page=float]:not([data-yomichan-theme]),
+html:root[data-yomichan-page=float]:not([data-yomichan-theme]) body {
     background-color: transparent;
 }
 
@@ -82,8 +82,8 @@ ol, ul {
     padding-bottom: 10px;
 }
 
-html:root.yomichan-float .entry,
-html:root.yomichan-float .note {
+html:root[data-yomichan-page=float] .entry,
+html:root[data-yomichan-page=float] .note {
     padding-left: 10px;
     padding-right: 10px;
 }
-- 
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(-)

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