From cc72514ce6260bc489b8dd9b51ea27b9fb6e3ce8 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Fri, 11 Oct 2019 22:35:59 -0400
Subject: Frontend updates

---
 ext/fg/js/float.js               |  9 ++++++---
 ext/fg/js/frontend-initialize.js | 20 ++++++++++++++++++++
 ext/fg/js/frontend.js            | 15 ++++++++++++---
 ext/fg/js/popup-nested.js        |  3 ++-
 ext/fg/js/popup.js               |  4 +++-
 5 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 ext/fg/js/frontend-initialize.js

(limited to 'ext/fg')

diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 8fdb6925..533d98e1 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -96,7 +96,7 @@ class DisplayFloat extends Display {
         }
     }
 
-    initialize(options, popupInfo, url) {
+    initialize(options, popupInfo, url, childrenSupported) {
         const css = options.general.customPopupCss;
         if (css) {
             this.setStyle(css);
@@ -105,7 +105,10 @@ class DisplayFloat extends Display {
         const {id, depth, parentFrameId} = popupInfo;
         this.optionsContext.depth = depth;
         this.optionsContext.url = url;
-        popupNestedInitialize(id, depth, parentFrameId, url);
+
+        if (childrenSupported) {
+            popupNestedInitialize(id, depth, parentFrameId, url);
+        }
     }
 
     setStyle(css) {
@@ -138,7 +141,7 @@ DisplayFloat.messageHandlers = {
     kanjiShow: (self, {definitions, options, context}) => self.kanjiShow(definitions, options, context),
     clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(),
     orphaned: (self) => self.onOrphaned(),
-    initialize: (self, {options, popupInfo, url}) => self.initialize(options, popupInfo, url)
+    initialize: (self, {options, popupInfo, url, childrenSupported}) => self.initialize(options, popupInfo, url, childrenSupported)
 };
 
 window.yomichan_display = new DisplayFloat();
diff --git a/ext/fg/js/frontend-initialize.js b/ext/fg/js/frontend-initialize.js
new file mode 100644
index 00000000..37a82faa
--- /dev/null
+++ b/ext/fg/js/frontend-initialize.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2019  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+window.yomichan_frontend = Frontend.create();
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 88cb93a9..1c41cad1 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -41,6 +41,9 @@ class Frontend {
 
         this.enabled = false;
         this.eventListeners = [];
+
+        this.isPreparedPromiseResolve = null;
+        this.isPreparedPromise = new Promise((resolve) => { this.isPreparedPromiseResolve = resolve; });
     }
 
     static create() {
@@ -59,11 +62,16 @@ class Frontend {
             await this.updateOptions();
 
             chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
+            this.isPreparedPromiseResolve();
         } catch (e) {
             this.onError(e);
         }
     }
 
+    isPrepared() {
+        return this.isPreparedPromise;
+    }
+
     onMouseOver(e) {
         if (e.target === this.popup.container && this.popupTimer !== null) {
             this.popupTimerClear();
@@ -303,6 +311,10 @@ class Frontend {
         }
 
         const textSource = docRangeFromPoint(x, y, this.options);
+        return await this.searchSource(textSource, cause);
+    }
+
+    async searchSource(textSource, cause) {
         let hideResults = textSource === null;
         let searched = false;
         let success = false;
@@ -560,6 +572,3 @@ Frontend.runtimeMessageHandlers = {
         self.popup.setVisibleOverride(visible);
     }
 };
-
-
-window.yomichan_frontend = Frontend.create();
diff --git a/ext/fg/js/popup-nested.js b/ext/fg/js/popup-nested.js
index b36de2ec..f7309466 100644
--- a/ext/fg/js/popup-nested.js
+++ b/ext/fg/js/popup-nested.js
@@ -41,7 +41,8 @@ async function popupNestedInitialize(id, depth, parentFrameId, url) {
         '/fg/js/frontend-api-sender.js',
         '/fg/js/popup.js',
         '/fg/js/popup-proxy.js',
-        '/fg/js/frontend.js'
+        '/fg/js/frontend.js',
+        '/fg/js/frontend-initialize.js'
     ];
     for (const src of scriptSrcs) {
         const script = document.createElement('script');
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 9ca91afa..7f96fe97 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -25,6 +25,7 @@ class Popup {
         this.frameId = null;
         this.parent = null;
         this.child = null;
+        this.childrenSupported = true;
         this.container = document.createElement('iframe');
         this.container.id = 'yomichan-float';
         this.container.addEventListener('mousedown', e => e.stopPropagation());
@@ -70,7 +71,8 @@ class Popup {
                         depth: this.depth,
                         parentFrameId
                     },
-                    url: this.url
+                    url: this.url,
+                    childrenSupported: this.childrenSupported
                 });
                 resolve();
             });
-- 
cgit v1.2.3


From 3e249e19ac5f5650553c6303b87adfdb2a688536 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 14:20:54 -0400
Subject: Update Display initialization process

---
 ext/bg/js/search.js     | 46 ++++++++++++++++++++++++++++++++--------------
 ext/fg/js/float.js      |  8 +++++++-
 ext/fg/js/popup.js      |  6 +-----
 ext/mixed/js/display.js | 37 +++++++++++++++++++++++++++++++------
 4 files changed, 71 insertions(+), 26 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index ead9ba6f..7a8fdf5e 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -33,23 +33,37 @@ class DisplaySearch extends Display {
         this.introAnimationTimer = null;
 
         this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract});
+    }
 
-        if (this.search !== null) {
-            this.search.addEventListener('click', (e) => this.onSearch(e), false);
-        }
-        if (this.query !== null) {
-            this.query.addEventListener('input', () => this.onSearchInput(), false);
+    static create() {
+        const instance = new DisplaySearch();
+        instance.prepare();
+        return instance;
+    }
+
+    async prepare() {
+        try {
+            await this.initialize();
 
-            const query = DisplaySearch.getSearchQueryFromLocation(window.location.href);
-            if (query !== null) {
-                this.query.value = window.wanakana.toKana(query);
-                this.onSearchQueryUpdated(query, false);
+            if (this.search !== null) {
+                this.search.addEventListener('click', (e) => this.onSearch(e), false);
             }
+            if (this.query !== null) {
+                this.query.addEventListener('input', () => this.onSearchInput(), false);
 
-            window.wanakana.bind(this.query);
-        }
+                const query = DisplaySearch.getSearchQueryFromLocation(window.location.href);
+                if (query !== null) {
+                    this.query.value = window.wanakana.toKana(query);
+                    this.onSearchQueryUpdated(query, false);
+                }
 
-        this.updateSearchButton();
+                window.wanakana.bind(this.query);
+            }
+
+            this.updateSearchButton();
+        } catch (e) {
+            this.onError(e);
+        }
     }
 
     onError(error) {
@@ -89,7 +103,7 @@ class DisplaySearch extends Display {
             this.updateSearchButton();
             if (valid) {
                 const {definitions} = await apiTermsFind(query, this.optionsContext);
-                this.termsShow(definitions, await apiOptionsGet(this.optionsContext));
+                this.termsShow(definitions, this.options);
             } else {
                 this.container.textContent = '';
             }
@@ -98,6 +112,10 @@ class DisplaySearch extends Display {
         }
     }
 
+    getOptionsContext() {
+        return this.optionsContext;
+    }
+
     setIntroVisible(visible, animate) {
         if (this.introVisible === visible) {
             return;
@@ -164,4 +182,4 @@ class DisplaySearch extends Display {
     }
 }
 
-window.yomichan_search = new DisplaySearch();
+window.yomichan_search = DisplaySearch.create();
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 533d98e1..d9b483d7 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -84,6 +84,10 @@ class DisplayFloat extends Display {
         super.onKeyDown(e);
     }
 
+    getOptionsContext() {
+        return this.optionsContext;
+    }
+
     autoPlayAudio() {
         this.clearAutoPlayTimer();
         this.autoPlayAudioTimer = window.setTimeout(() => super.autoPlayAudio(), 400);
@@ -96,7 +100,9 @@ class DisplayFloat extends Display {
         }
     }
 
-    initialize(options, popupInfo, url, childrenSupported) {
+    async initialize(options, popupInfo, url, childrenSupported) {
+        await super.initialize(options);
+
         const css = options.general.customPopupCss;
         if (css) {
             this.setStyle(css);
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 7f96fe97..0fd6a9d0 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -61,11 +61,7 @@ class Popup {
             const parentFrameId = (typeof this.frameId === 'number' ? this.frameId : null);
             this.container.addEventListener('load', () => {
                 this.invokeApi('initialize', {
-                    options: {
-                        general: {
-                            customPopupCss: options.general.customPopupCss
-                        }
-                    },
+                    options: options,
                     popupInfo: {
                         id: this.id,
                         depth: this.depth,
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index f879f5b3..0d7be355 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -29,7 +29,6 @@ class Display {
         this.audioPlaying = null;
         this.audioFallback = null;
         this.audioCache = {};
-        this.optionsContext = {};
 
         this.eventListeners = [];
         this.persistentEventListeners = [];
@@ -76,7 +75,7 @@ class Display {
                 context.source.source = this.context.source;
             }
 
-            const kanjiDefs = await apiKanjiFind(link.textContent, this.optionsContext);
+            const kanjiDefs = await apiKanjiFind(link.textContent, this.getOptionsContext());
             this.kanjiShow(kanjiDefs, this.options, context);
         } catch (e) {
             this.onError(e);
@@ -99,7 +98,7 @@ class Display {
             try {
                 textSource.setEndOffset(this.options.scanning.length);
 
-                ({definitions, length} = await apiTermsFind(textSource.text(), this.optionsContext));
+                ({definitions, length} = await apiTermsFind(textSource.text(), this.getOptionsContext()));
                 if (definitions.length === 0) {
                     return false;
                 }
@@ -175,6 +174,28 @@ class Display {
         }
     }
 
+    onRuntimeMessage({action, params}, sender, callback) {
+        const handlers = Display.runtimeMessageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            handler(this, params);
+            callback();
+        }
+    }
+
+    getOptionsContext() {
+        throw new Error('Override me');
+    }
+
+    async initialize(options=null) {
+        await this.updateOptions(options);
+        chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
+    }
+
+    async updateOptions(options) {
+        this.options = options ? options : await apiOptionsGet(this.getOptionsContext());
+    }
+
     setInteractive(interactive) {
         interactive = !!interactive;
         if (this.interactive === interactive) { return; }
@@ -314,7 +335,7 @@ class Display {
 
     async adderButtonUpdate(modes, sequence) {
         try {
-            const states = await apiDefinitionsAddable(this.definitions, modes, this.optionsContext);
+            const states = await apiDefinitionsAddable(this.definitions, modes, this.getOptionsContext());
             if (!states || sequence !== this.sequence) {
                 return;
             }
@@ -416,7 +437,7 @@ class Display {
                 }
             }
 
-            const noteId = await apiDefinitionAdd(definition, mode, context, this.optionsContext);
+            const noteId = await apiDefinitionAdd(definition, mode, context, this.getOptionsContext());
             if (noteId) {
                 const index = this.definitions.indexOf(definition);
                 const adderButton = this.adderButtonFind(index, mode);
@@ -446,7 +467,7 @@ class Display {
             }
 
             const sources = this.options.audio.sources;
-            let {audio, source} = await audioGetFromSources(expression, sources, this.optionsContext, true, this.audioCache);
+            let {audio, source} = await audioGetFromSources(expression, sources, this.getOptionsContext(), true, this.audioCache);
             let info;
             if (audio === null) {
                 if (this.audioFallback === null) {
@@ -706,3 +727,7 @@ Display.onKeyDownHandlers = {
         return false;
     }
 };
+
+Display.runtimeMessageHandlers = {
+    optionsUpdate: (self) => self.updateOptions(null)
+};
-- 
cgit v1.2.3


From 194615ef21557236cd2b9ea390b4164a4d5338c5 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 14:34:45 -0400
Subject: Make popups store options

---
 ext/fg/js/frontend.js         | 1 +
 ext/fg/js/popup-proxy-host.js | 6 ++++++
 ext/fg/js/popup-proxy.js      | 5 +++++
 ext/fg/js/popup.js            | 5 +++++
 4 files changed, 17 insertions(+)

(limited to 'ext/fg')

diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 1c41cad1..f67441af 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -287,6 +287,7 @@ class Frontend {
     async updateOptions() {
         this.options = await apiOptionsGet(this.getOptionsContext());
         this.setEnabled(this.options.general.enable);
+        await this.popup.setOptions(this.options);
     }
 
     popupTimerSet(callback) {
diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js
index f933639c..5edee8dd 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-proxy-host.js
@@ -38,6 +38,7 @@ class PopupProxyHost {
 
         this.apiReceiver = new FrontendApiReceiver(`popup-proxy-host#${frameId}`, {
             createNestedPopup: ({parentId}) => this.createNestedPopup(parentId),
+            setOptions: ({id, options}) => this.setOptions(id, options),
             show: ({id, elementRect, options}) => this.show(id, elementRect, options),
             showOrphaned: ({id, elementRect, options}) => this.show(id, elementRect, options),
             hide: ({id, changeFocus}) => this.hide(id, changeFocus),
@@ -86,6 +87,11 @@ class PopupProxyHost {
         return new DOMRect(x, y, jsonRect.width, jsonRect.height);
     }
 
+    async setOptions(id, options) {
+        const popup = this.getPopup(id);
+        return await popup.setOptions(options);
+    }
+
     async show(id, elementRect, options) {
         const popup = this.getPopup(id);
         elementRect = this.jsonRectToDOMRect(popup, elementRect);
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index efbd28b2..22b95785 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -46,6 +46,11 @@ class PopupProxy {
         return id;
     }
 
+    async setOptions(options) {
+        const id = await this.getPopupId();
+        return await this.invokeHostApi('setOptions', {id, options});
+    }
+
     async show(elementRect, options) {
         const id = await this.getPopupId();
         elementRect = PopupProxy.DOMRectToJson(elementRect);
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 0fd6a9d0..396a5be9 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -37,6 +37,7 @@ class Popup {
         this.isInjected = false;
         this.visible = false;
         this.visibleOverride = null;
+        this.options = null;
         this.updateVisibility();
     }
 
@@ -78,6 +79,10 @@ class Popup {
         });
     }
 
+    async setOptions(options) {
+        this.options = options;
+    }
+
     async show(elementRect, writingMode, options) {
         await this.inject(options);
 
-- 
cgit v1.2.3


From 8a1637f6b31719969473f1b393d46721a2398f11 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 14:38:16 -0400
Subject: Remove .show popup proxy API since it's not used

---
 ext/fg/js/popup-proxy-host.js | 9 +--------
 ext/fg/js/popup-proxy.js      | 6 ------
 2 files changed, 1 insertion(+), 14 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js
index 5edee8dd..c3acec7f 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-proxy-host.js
@@ -39,8 +39,7 @@ class PopupProxyHost {
         this.apiReceiver = new FrontendApiReceiver(`popup-proxy-host#${frameId}`, {
             createNestedPopup: ({parentId}) => this.createNestedPopup(parentId),
             setOptions: ({id, options}) => this.setOptions(id, options),
-            show: ({id, elementRect, options}) => this.show(id, elementRect, options),
-            showOrphaned: ({id, elementRect, options}) => this.show(id, elementRect, options),
+            showOrphaned: ({id, elementRect, options}) => this.showOrphaned(id, elementRect, options),
             hide: ({id, changeFocus}) => this.hide(id, changeFocus),
             setVisibleOverride: ({id, visible}) => this.setVisibleOverride(id, visible),
             containsPoint: ({id, x, y}) => this.containsPoint(id, x, y),
@@ -92,12 +91,6 @@ class PopupProxyHost {
         return await popup.setOptions(options);
     }
 
-    async show(id, elementRect, options) {
-        const popup = this.getPopup(id);
-        elementRect = this.jsonRectToDOMRect(popup, elementRect);
-        return await popup.show(elementRect, options);
-    }
-
     async showOrphaned(id, elementRect, options) {
         const popup = this.getPopup(id);
         elementRect = this.jsonRectToDOMRect(popup, elementRect);
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 22b95785..96fc8890 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -51,12 +51,6 @@ class PopupProxy {
         return await this.invokeHostApi('setOptions', {id, options});
     }
 
-    async show(elementRect, options) {
-        const id = await this.getPopupId();
-        elementRect = PopupProxy.DOMRectToJson(elementRect);
-        return await this.invokeHostApi('show', {id, elementRect, options});
-    }
-
     async showOrphaned(elementRect, options) {
         const id = await this.getPopupId();
         elementRect = PopupProxy.DOMRectToJson(elementRect);
-- 
cgit v1.2.3


From a5b208fb895d46793223910451d177dc53d9463a Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 14:41:24 -0400
Subject: Check if objects are properly initialized before showing content

---
 ext/fg/js/popup.js      | 7 +++++++
 ext/mixed/js/display.js | 8 ++++++++
 2 files changed, 15 insertions(+)

(limited to 'ext/fg')

diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 396a5be9..a9fde7b6 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -79,6 +79,10 @@ class Popup {
         });
     }
 
+    isInitialized() {
+        return this.options !== null;
+    }
+
     async setOptions(options) {
         this.options = options;
     }
@@ -212,6 +216,7 @@ class Popup {
     }
 
     async showOrphaned(elementRect, writingMode, options) {
+        if (!this.isInitialized()) { return; }
         await this.show(elementRect, writingMode, options);
         this.invokeApi('orphaned');
     }
@@ -275,11 +280,13 @@ class Popup {
     }
 
     async termsShow(elementRect, writingMode, definitions, options, context) {
+        if (!this.isInitialized()) { return; }
         await this.show(elementRect, writingMode, options);
         this.invokeApi('termsShow', {definitions, options, context});
     }
 
     async kanjiShow(elementRect, writingMode, definitions, options, context) {
+        if (!this.isInitialized()) { return; }
         await this.show(elementRect, writingMode, options);
         this.invokeApi('kanjiShow', {definitions, options, context});
     }
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 0d7be355..d5d055e0 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -187,6 +187,10 @@ class Display {
         throw new Error('Override me');
     }
 
+    isInitialized() {
+        return this.options !== null;
+    }
+
     async initialize(options=null) {
         await this.updateOptions(options);
         chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
@@ -236,6 +240,8 @@ class Display {
     }
 
     async termsShow(definitions, options, context) {
+        if (!this.isInitialized()) { return; }
+
         try {
             this.setEventListenersActive(false);
 
@@ -287,6 +293,8 @@ class Display {
     }
 
     async kanjiShow(definitions, options, context) {
+        if (!this.isInitialized()) { return; }
+
         try {
             this.setEventListenersActive(false);
 
-- 
cgit v1.2.3


From 6da76835524fbf6b95902f06822d77c54ccf735b Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 14:55:18 -0400
Subject: Don't pass options around for calls to termsShow, kanjiShow, etc.

---
 ext/bg/js/search.js           |  6 +++++-
 ext/fg/js/float.js            |  4 ++--
 ext/fg/js/frontend.js         |  5 +----
 ext/fg/js/popup-proxy-host.js | 18 +++++++++---------
 ext/fg/js/popup-proxy.js      | 12 ++++++------
 ext/fg/js/popup.js            | 30 +++++++++++++++---------------
 ext/mixed/js/display.js       | 18 ++++++++++--------
 7 files changed, 48 insertions(+), 45 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 7a8fdf5e..80519f4a 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -103,7 +103,11 @@ class DisplaySearch extends Display {
             this.updateSearchButton();
             if (valid) {
                 const {definitions} = await apiTermsFind(query, this.optionsContext);
-                this.termsShow(definitions, this.options);
+                this.termsShow(definitions, {
+                    focus: false,
+                    sentence: null,
+                    url: window.location.href
+                });
             } else {
                 this.container.textContent = '';
             }
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index d9b483d7..4a571466 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -143,8 +143,8 @@ DisplayFloat.onKeyDownHandlers = {
 };
 
 DisplayFloat.messageHandlers = {
-    termsShow: (self, {definitions, options, context}) => self.termsShow(definitions, options, context),
-    kanjiShow: (self, {definitions, options, context}) => self.kanjiShow(definitions, options, context),
+    termsShow: (self, {definitions, context}) => self.termsShow(definitions, context),
+    kanjiShow: (self, {definitions, context}) => self.kanjiShow(definitions, context),
     clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(),
     orphaned: (self) => self.onOrphaned(),
     initialize: (self, {options, popupInfo, url, childrenSupported}) => self.initialize(options, popupInfo, url, childrenSupported)
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index f67441af..52a23889 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -333,8 +333,7 @@ class Frontend {
                 if (textSource && this.options.scanning.modifier !== 'none') {
                     this.popup.showOrphaned(
                         textSource.getRect(),
-                        textSource.getWritingMode(),
-                        this.options
+                        textSource.getWritingMode()
                     );
                 }
             } else {
@@ -374,7 +373,6 @@ class Frontend {
             textSource.getRect(),
             textSource.getWritingMode(),
             definitions,
-            this.options,
             {sentence, url, focus}
         );
 
@@ -405,7 +403,6 @@ class Frontend {
             textSource.getRect(),
             textSource.getWritingMode(),
             definitions,
-            this.options,
             {sentence, url, focus}
         );
 
diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js
index c3acec7f..74a5153a 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-proxy-host.js
@@ -39,12 +39,12 @@ class PopupProxyHost {
         this.apiReceiver = new FrontendApiReceiver(`popup-proxy-host#${frameId}`, {
             createNestedPopup: ({parentId}) => this.createNestedPopup(parentId),
             setOptions: ({id, options}) => this.setOptions(id, options),
-            showOrphaned: ({id, elementRect, options}) => this.showOrphaned(id, elementRect, options),
+            showOrphaned: ({id, elementRect}) => this.showOrphaned(id, elementRect),
             hide: ({id, changeFocus}) => this.hide(id, changeFocus),
             setVisibleOverride: ({id, visible}) => this.setVisibleOverride(id, visible),
             containsPoint: ({id, x, y}) => this.containsPoint(id, x, y),
-            termsShow: ({id, elementRect, writingMode, definitions, options, context}) => this.termsShow(id, elementRect, writingMode, definitions, options, context),
-            kanjiShow: ({id, elementRect, writingMode, definitions, options, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, options, context),
+            termsShow: ({id, elementRect, writingMode, definitions, context}) => this.termsShow(id, elementRect, writingMode, definitions, context),
+            kanjiShow: ({id, elementRect, writingMode, definitions, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, context),
             clearAutoPlayTimer: ({id}) => this.clearAutoPlayTimer(id)
         });
     }
@@ -91,10 +91,10 @@ class PopupProxyHost {
         return await popup.setOptions(options);
     }
 
-    async showOrphaned(id, elementRect, options) {
+    async showOrphaned(id, elementRect) {
         const popup = this.getPopup(id);
         elementRect = this.jsonRectToDOMRect(popup, elementRect);
-        return await popup.showOrphaned(elementRect, options);
+        return await popup.showOrphaned(elementRect);
     }
 
     async hide(id, changeFocus) {
@@ -112,18 +112,18 @@ class PopupProxyHost {
         return await popup.containsPoint(x, y);
     }
 
-    async termsShow(id, elementRect, writingMode, definitions, options, context) {
+    async termsShow(id, elementRect, writingMode, definitions, context) {
         const popup = this.getPopup(id);
         elementRect = this.jsonRectToDOMRect(popup, elementRect);
         if (!PopupProxyHost.popupCanShow(popup)) { return false; }
-        return await popup.termsShow(elementRect, writingMode, definitions, options, context);
+        return await popup.termsShow(elementRect, writingMode, definitions, context);
     }
 
-    async kanjiShow(id, elementRect, writingMode, definitions, options, context) {
+    async kanjiShow(id, elementRect, writingMode, definitions, context) {
         const popup = this.getPopup(id);
         elementRect = this.jsonRectToDOMRect(popup, elementRect);
         if (!PopupProxyHost.popupCanShow(popup)) { return false; }
-        return await popup.kanjiShow(elementRect, writingMode, definitions, options, context);
+        return await popup.kanjiShow(elementRect, writingMode, definitions, context);
     }
 
     async clearAutoPlayTimer(id) {
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 96fc8890..e8d6bc98 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -51,10 +51,10 @@ class PopupProxy {
         return await this.invokeHostApi('setOptions', {id, options});
     }
 
-    async showOrphaned(elementRect, options) {
+    async showOrphaned(elementRect) {
         const id = await this.getPopupId();
         elementRect = PopupProxy.DOMRectToJson(elementRect);
-        return await this.invokeHostApi('showOrphaned', {id, elementRect, options});
+        return await this.invokeHostApi('showOrphaned', {id, elementRect});
     }
 
     async hide(changeFocus) {
@@ -76,16 +76,16 @@ class PopupProxy {
         return await this.invokeHostApi('containsPoint', {id: this.id, x, y});
     }
 
-    async termsShow(elementRect, writingMode, definitions, options, context) {
+    async termsShow(elementRect, writingMode, definitions, context) {
         const id = await this.getPopupId();
         elementRect = PopupProxy.DOMRectToJson(elementRect);
-        return await this.invokeHostApi('termsShow', {id, elementRect, writingMode, definitions, options, context});
+        return await this.invokeHostApi('termsShow', {id, elementRect, writingMode, definitions, context});
     }
 
-    async kanjiShow(elementRect, writingMode, definitions, options, context) {
+    async kanjiShow(elementRect, writingMode, definitions, context) {
         const id = await this.getPopupId();
         elementRect = PopupProxy.DOMRectToJson(elementRect);
-        return await this.invokeHostApi('kanjiShow', {id, elementRect, writingMode, definitions, options, context});
+        return await this.invokeHostApi('kanjiShow', {id, elementRect, writingMode, definitions, context});
     }
 
     async clearAutoPlayTimer() {
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index a9fde7b6..f36bb436 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -41,14 +41,14 @@ class Popup {
         this.updateVisibility();
     }
 
-    inject(options) {
+    inject() {
         if (this.injectPromise === null) {
-            this.injectPromise = this.createInjectPromise(options);
+            this.injectPromise = this.createInjectPromise();
         }
         return this.injectPromise;
     }
 
-    async createInjectPromise(options) {
+    async createInjectPromise() {
         try {
             const {frameId} = await this.frameIdPromise;
             if (typeof frameId === 'number') {
@@ -62,7 +62,7 @@ class Popup {
             const parentFrameId = (typeof this.frameId === 'number' ? this.frameId : null);
             this.container.addEventListener('load', () => {
                 this.invokeApi('initialize', {
-                    options: options,
+                    options: this.options,
                     popupInfo: {
                         id: this.id,
                         depth: this.depth,
@@ -87,10 +87,10 @@ class Popup {
         this.options = options;
     }
 
-    async show(elementRect, writingMode, options) {
-        await this.inject(options);
+    async show(elementRect, writingMode) {
+        await this.inject();
 
-        const optionsGeneral = options.general;
+        const optionsGeneral = this.options.general;
         const container = this.container;
         const containerRect = container.getBoundingClientRect();
         const getPosition = (
@@ -215,9 +215,9 @@ class Popup {
         return [position, size, after];
     }
 
-    async showOrphaned(elementRect, writingMode, options) {
+    async showOrphaned(elementRect, writingMode) {
         if (!this.isInitialized()) { return; }
-        await this.show(elementRect, writingMode, options);
+        await this.show(elementRect, writingMode);
         this.invokeApi('orphaned');
     }
 
@@ -279,16 +279,16 @@ class Popup {
         return false;
     }
 
-    async termsShow(elementRect, writingMode, definitions, options, context) {
+    async termsShow(elementRect, writingMode, definitions, context) {
         if (!this.isInitialized()) { return; }
-        await this.show(elementRect, writingMode, options);
-        this.invokeApi('termsShow', {definitions, options, context});
+        await this.show(elementRect, writingMode);
+        this.invokeApi('termsShow', {definitions, context});
     }
 
-    async kanjiShow(elementRect, writingMode, definitions, options, context) {
+    async kanjiShow(elementRect, writingMode, definitions, context) {
         if (!this.isInitialized()) { return; }
-        await this.show(elementRect, writingMode, options);
-        this.invokeApi('kanjiShow', {definitions, options, context});
+        await this.show(elementRect, writingMode);
+        this.invokeApi('kanjiShow', {definitions, context});
     }
 
     clearAutoPlayTimer() {
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index d5d055e0..b3ddae72 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -76,7 +76,7 @@ class Display {
             }
 
             const kanjiDefs = await apiKanjiFind(link.textContent, this.getOptionsContext());
-            this.kanjiShow(kanjiDefs, this.options, context);
+            this.kanjiShow(kanjiDefs, context);
         } catch (e) {
             this.onError(e);
         }
@@ -125,7 +125,7 @@ class Display {
                 context.source.source = this.context.source;
             }
 
-            this.termsShow(definitions, this.options, context);
+            this.termsShow(definitions, context);
         } catch (e) {
             this.onError(e);
         }
@@ -239,10 +239,12 @@ class Display {
         });
     }
 
-    async termsShow(definitions, options, context) {
+    async termsShow(definitions, context) {
         if (!this.isInitialized()) { return; }
 
         try {
+            const options = this.options;
+
             this.setEventListenersActive(false);
 
             if (!context || context.focus !== false) {
@@ -250,7 +252,6 @@ class Display {
             }
 
             this.definitions = definitions;
-            this.options = options;
             this.context = context;
 
             const sequence = ++this.sequence;
@@ -280,7 +281,7 @@ class Display {
             const {index, scroll} = context || {};
             this.entryScrollIntoView(index || 0, scroll);
 
-            if (this.options.audio.enabled && this.options.audio.autoPlay) {
+            if (options.audio.enabled && options.audio.autoPlay) {
                 this.autoPlayAudio();
             }
 
@@ -292,10 +293,12 @@ class Display {
         }
     }
 
-    async kanjiShow(definitions, options, context) {
+    async kanjiShow(definitions, context) {
         if (!this.isInitialized()) { return; }
 
         try {
+            const options = this.options;
+
             this.setEventListenersActive(false);
 
             if (!context || context.focus !== false) {
@@ -303,7 +306,6 @@ class Display {
             }
 
             this.definitions = definitions;
-            this.options = options;
             this.context = context;
 
             const sequence = ++this.sequence;
@@ -415,7 +417,7 @@ class Display {
                 source: this.context.source.source
             };
 
-            this.termsShow(this.context.source.definitions, this.options, context);
+            this.termsShow(this.context.source.definitions, context);
         }
     }
 
-- 
cgit v1.2.3


From 537d2ef532aa7b7498de13ab039bd23f28d32714 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 15:00:39 -0400
Subject: Remove Display.dependencies

---
 ext/bg/js/search.js     | 2 --
 ext/fg/js/float.js      | 2 --
 ext/mixed/js/display.js | 4 ----
 3 files changed, 8 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 80519f4a..1d780d70 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -31,8 +31,6 @@ class DisplaySearch extends Display {
         this.intro = document.querySelector('#intro');
         this.introVisible = true;
         this.introAnimationTimer = null;
-
-        this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract});
     }
 
     static create() {
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 4a571466..5164cd8f 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -28,8 +28,6 @@ class DisplayFloat extends Display {
             url: window.location.href
         };
 
-        this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract});
-
         window.addEventListener('message', (e) => this.onMessage(e), false);
     }
 
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index b3ddae72..cd9f41bd 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -35,8 +35,6 @@ class Display {
         this.interactive = false;
         this.eventListenersActive = false;
 
-        this.dependencies = {};
-
         this.windowScroll = new WindowScroll();
 
         this.setInteractive(true);
@@ -86,8 +84,6 @@ class Display {
         try {
             e.preventDefault();
 
-            const {docRangeFromPoint, docSentenceExtract} = this.dependencies;
-
             const clickedElement = e.target;
             const textSource = docRangeFromPoint(e.clientX, e.clientY, this.options);
             if (textSource === null) {
-- 
cgit v1.2.3


From be7fa57d5ced7f6969c5d66f0a35fafb9de3bcee Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 12:59:51 -0400
Subject: Add support for a popup preview

---
 ext/bg/css/settings.css             |   9 +++
 ext/bg/js/settings-popup-preview.js | 147 ++++++++++++++++++++++++++++++++++++
 ext/bg/js/settings.js               |  38 ++++++++++
 ext/bg/settings-popup-preview.html  | 125 ++++++++++++++++++++++++++++++
 ext/bg/settings.html                |  13 ++++
 ext/fg/js/frontend.js               |   8 +-
 6 files changed, 337 insertions(+), 3 deletions(-)
 create mode 100644 ext/bg/js/settings-popup-preview.js
 create mode 100644 ext/bg/settings-popup-preview.html

(limited to 'ext/fg')

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 100478aa..09d60b26 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -148,6 +148,15 @@ input[type=checkbox]#storage-persist-button-checkbox {
     padding: 0;
 }
 
+#settings-popup-preview-frame {
+    background-color: transparent;
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 320px;
+}
+
 [data-show-for-browser] {
     display: none;
 }
diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js
new file mode 100644
index 00000000..ec21e7e1
--- /dev/null
+++ b/ext/bg/js/settings-popup-preview.js
@@ -0,0 +1,147 @@
+/*
+ * Copyright (C) 2019  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+class SettingsPopupPreview {
+    constructor() {
+        this.frontend = null;
+        this.apiOptionsGetOld = apiOptionsGet;
+        this.popupShown = false;
+    }
+
+    static create() {
+        const instance = new SettingsPopupPreview();
+        instance.prepare();
+        return instance;
+    }
+
+    async prepare() {
+        // Setup events
+        window.addEventListener('resize', (e) => this.onWindowResize(e), false);
+        window.addEventListener('message', (e) => this.onMessage(e), false);
+
+        const themeDarkCheckbox = document.querySelector('#theme-dark-checkbox');
+        if (themeDarkCheckbox !== null) {
+            themeDarkCheckbox.addEventListener('change', () => this.onThemeDarkCheckboxChanged(themeDarkCheckbox), false);
+        }
+
+        // Overwrite API functions
+        window.apiOptionsGet = (...args) => this.apiOptionsGet(...args);
+
+        // Overwrite frontend
+        this.frontend = Frontend.create();
+        window.yomichan_frontend = this.frontend;
+
+        this.frontend.setEnabled = function () {};
+        this.frontend.searchClear = function () {};
+
+        this.frontend.popup.childrenSupported = false;
+        this.frontend.popup.interactive = false;
+
+        await this.frontend.isPrepared();
+
+        // Update search
+        this.updateSearch();
+    }
+
+    async apiOptionsGet(...args) {
+        const options = await this.apiOptionsGetOld(...args);
+        options.general.enable = true;
+        options.general.debugInfo = false;
+        options.general.popupWidth = 400;
+        options.general.popupHeight = 250;
+        options.general.popupHorizontalOffset = 0;
+        options.general.popupVerticalOffset = 10;
+        options.general.popupHorizontalOffset2 = 10;
+        options.general.popupVerticalOffset2 = 0;
+        options.general.popupHorizontalTextPosition = 'below';
+        options.general.popupVerticalTextPosition = 'before';
+        options.scanning.selectText = false;
+        return options;
+    }
+
+    onWindowResize() {
+        if (this.frontend === null) { return; }
+        const textSource = this.frontend.textSourceLast;
+        if (textSource === null) { return; }
+
+        const elementRect = textSource.getRect();
+        const writingMode = textSource.getWritingMode();
+        const options = this.frontend.options;
+        this.frontend.popup.show(elementRect, writingMode, options);
+    }
+
+    onMessage(e) {
+        const {action, params} = e.data;
+        const handlers = SettingsPopupPreview.messageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            handler(this, params);
+        }
+    }
+
+    onThemeDarkCheckboxChanged(node) {
+        document.documentElement.classList.toggle('dark', node.checked);
+    }
+
+    setText(text) {
+        const exampleText = document.querySelector('#example-text');
+        if (exampleText === null) { return; }
+
+        exampleText.textContent = text;
+        this.updateSearch();
+    }
+
+    async updateSearch() {
+        const exampleText = document.querySelector('#example-text');
+        if (exampleText === null) { return; }
+
+        const textNode = exampleText.firstChild;
+        if (textNode === null) { return; }
+
+        const range = document.createRange();
+        range.selectNode(textNode);
+        const source = new TextSourceRange(range, range.toString(), null);
+
+        this.frontend.textSourceLast = null;
+        await this.frontend.searchSource(source, 'script');
+        await this.frontend.lastShowPromise;
+
+        if (this.frontend.popup.isVisible()) {
+            this.popupShown = true;
+        }
+
+        this.setInfoVisible(!this.popupShown);
+    }
+
+    setInfoVisible(visible) {
+        const node = document.querySelector('.placeholder-info');
+        if (node === null) { return; }
+
+        node.classList.toggle('placeholder-info-visible', visible);
+    }
+}
+
+SettingsPopupPreview.messageHandlers = {
+    setText: (self, {text}) => self.setText(text)
+};
+
+SettingsPopupPreview.instance = SettingsPopupPreview.create();
+
+
+
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index bd15f5d0..5732b8ae 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -248,6 +248,7 @@ async function onReady() {
     showExtensionInformation();
 
     formSetupEventListeners();
+    appearanceInitialize();
     await audioSettingsInitialize();
     await profileOptionsSetup();
 
@@ -259,6 +260,43 @@ async function onReady() {
 $(document).ready(utilAsync(onReady));
 
 
+/*
+ * Appearance
+ */
+
+function appearanceInitialize() {
+    let previewVisible = false;
+    $('#settings-popup-preview-button').on('click', () => {
+        if (previewVisible) { return; }
+        showAppearancePreview();
+        previewVisible = true;
+    });
+}
+
+function showAppearancePreview() {
+    const container = $('#settings-popup-preview-container');
+    const buttonContainer = $('#settings-popup-preview-button-container');
+    const settings = $('#settings-popup-preview-settings');
+    const text = $('#settings-popup-preview-text');
+
+    const frame = document.createElement('iframe');
+    frame.src = '/bg/settings-popup-preview.html';
+    frame.id = 'settings-popup-preview-frame';
+
+    window.wanakana.bind(text[0]);
+
+    text.on('input', () => {
+        const action = 'setText';
+        const params = {text: text.val()};
+        frame.contentWindow.postMessage({action, params}, '*');
+    });
+
+    container.append(frame);
+    buttonContainer.remove();
+    settings.css('display', '');
+}
+
+
 /*
  * Audio
  */
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html
new file mode 100644
index 00000000..3d426f7a
--- /dev/null
+++ b/ext/bg/settings-popup-preview.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <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">
+        <style>
+            html {
+                transition: background-color 0.25s linear 0s, color 0.25s linear 0s;
+                color: #333333;
+            }
+            html.dark {
+                background-color: #1e1e1e;
+                color: #d4d4d4;
+            }
+            html, body {
+                margin: 0;
+                padding: 0;
+                border: 0;
+                overflow: hidden;
+                width: 100%;
+                height: 100%;
+                font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
+                font-size: 14px;
+            }
+            iframe#yomichan-float {
+                resize: none;
+            }
+            .vertical-align-outer {
+                width: 100%;
+                height: 100%;
+                white-space: nowrap;
+            }
+            .vertical-align-outer::before {
+                content: "";
+                display: inline-block;
+                vertical-align: middle;
+                width: 0;
+                height: 100%;
+            }
+            .vertical-align-inner {
+                display: inline-block;
+                vertical-align: middle;
+                white-space: normal;
+                width: 100%;
+            }
+            .horizontal-size {
+                max-width: 400px;
+                padding: 15px;
+                margin: 0 auto;
+            }
+            .example-text-container {
+                font-size: 24px;
+                line-height: 1.25em;
+                height: 1.25em;
+            }
+            .popup-placeholder {
+                height: 250px;
+                padding-top: 10px;
+                border: 1px solid rgba(0, 0, 0, 0);
+            }
+            .placeholder-info {
+                visibility: hidden;
+                opacity: 0;
+                transition: opacity 0.5s linear 0s, visibility 0s linear 0.5s;
+            }
+            .placeholder-info.placeholder-info-visible {
+                visibility: visible;
+                opacity: 1;
+                transition: opacity 0.5s linear 0s, visibility 0s linear 0s;
+            }
+
+            .options {
+                float: right;
+                font-size: 14px;
+                line-height: 30px;
+            }
+            .theme-button {
+                display: inline-block;
+                margin-left: 0.5em;
+                text-decoration: none;
+                cursor: pointer;
+                white-space: nowrap;
+                line-height: 0;
+            }
+            .theme-button>input {
+                vertical-align: middle;
+                margin: 0 0.25em 0 0;
+                padding: 0;
+            }
+            .theme-button>span {
+                vertical-align: middle;
+            }
+            .theme-button:hover>span {
+                text-decoration: underline;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="vertical-align-outer"><div class="vertical-align-inner"><div class="horizontal-size">
+            <div class="example-text-container">
+                <div class="options"><label class="theme-button"><input type="checkbox" id="theme-dark-checkbox" /><span>dark</span></label></div>
+                <span id="example-text">読め</span>
+            </div>
+            <div class="popup-placeholder">
+                <div class="vertical-align-outer"><div class="vertical-align-inner placeholder-info">
+                    This page uses the dictionaries you have installed in order to show a preview.
+                    If you see this message, make sure you have a dictionary installed.
+                </div></div>
+            </div>
+        </div></div></div>
+
+        <script src="/mixed/js/extension.js"></script>
+        <script src="/fg/js/api.js"></script>
+        <script src="/fg/js/document.js"></script>
+        <script src="/fg/js/frontend-api-receiver.js"></script>
+        <script src="/fg/js/popup.js"></script>
+        <script src="/fg/js/source.js"></script>
+        <script src="/fg/js/util.js"></script>
+        <script src="/fg/js/popup-proxy-host.js"></script>
+        <script src="/fg/js/frontend.js"></script>
+        <script src="/bg/js/settings-popup-preview.js"></script>
+    </body>
+</html>
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 76955b2c..9dd71490 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -235,6 +235,18 @@
                     <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="form-group ignore-form-changes" style="display: none;" id="settings-popup-preview-settings">
+                    <label for="settings-popup-preview-text">Popup preview text</label>
+                    <input type="text" id="settings-popup-preview-text" class="form-control" value="読め">
+                </div>
+
+                <div class="form-group ignore-form-changes">
+                    <div id="settings-popup-preview-button-container">
+                        <button class="btn btn-default" id="settings-popup-preview-button">Show popup preview</button>
+                    </div>
+                    <div id="settings-popup-preview-container"></div>
+                </div>
             </div>
 
             <div>
@@ -603,6 +615,7 @@
         <script src="/mixed/lib/jquery.min.js"></script>
         <script src="/mixed/lib/bootstrap/js/bootstrap.min.js"></script>
         <script src="/mixed/lib/handlebars.min.js"></script>
+        <script src="/mixed/lib/wanakana.min.js"></script>
 
         <script src="/mixed/js/extension.js"></script>
 
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 52a23889..3ddeae78 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -44,6 +44,8 @@ class Frontend {
 
         this.isPreparedPromiseResolve = null;
         this.isPreparedPromise = new Promise((resolve) => { this.isPreparedPromiseResolve = resolve; });
+
+        this.lastShowPromise = Promise.resolve();
     }
 
     static create() {
@@ -331,7 +333,7 @@ class Frontend {
         } catch (e) {
             if (window.yomichan_orphaned) {
                 if (textSource && this.options.scanning.modifier !== 'none') {
-                    this.popup.showOrphaned(
+                    this.lastShowPromise = this.popup.showOrphaned(
                         textSource.getRect(),
                         textSource.getWritingMode()
                     );
@@ -369,7 +371,7 @@ class Frontend {
 
         const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
         const url = window.location.href;
-        this.popup.termsShow(
+        this.lastShowPromise = this.popup.termsShow(
             textSource.getRect(),
             textSource.getWritingMode(),
             definitions,
@@ -399,7 +401,7 @@ class Frontend {
 
         const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
         const url = window.location.href;
-        this.popup.kanjiShow(
+        this.lastShowPromise = this.popup.kanjiShow(
             textSource.getRect(),
             textSource.getWritingMode(),
             definitions,
-- 
cgit v1.2.3


From ceaeeb32dd23403c516f5aa5cb5527c40f2f21aa Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 16:27:49 -0400
Subject: Remove bootstrap styles from float.html

---
 ext/bg/search.html        |  2 +-
 ext/fg/float.html         | 10 +---------
 ext/mixed/css/display.css | 40 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 41 insertions(+), 11 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/search.html b/ext/bg/search.html
index 3284ed43..e63b4ac1 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="yomichan-search">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1" />
diff --git a/ext/fg/float.html b/ext/fg/float.html
index fe1aee8f..ac443c01 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -1,18 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="yomichan-float">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title></title>
-        <link rel="stylesheet" href="/mixed/lib/bootstrap/css/bootstrap.min.css">
-        <link rel="stylesheet" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
         <link rel="stylesheet" href="/mixed/css/display.css">
-        <style type="text/css">
-            .entry, .note {
-                padding-left: 10px;
-                padding-right: 10px;
-            }
-        </style>
     </head>
     <body>
         <div id="spinner">
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 8a4cf4a7..e88372bb 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -30,9 +30,27 @@
  * General
  */
 
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #333;
+    background-color: #fff;
+    margin: 0;
+    border: 0;
+    padding: 0;
+}
+
 hr {
     padding: 0px;
     margin: 0px;
+    border: 0;
+    border-top: 1px solid #eee;
+}
+
+ol, ul {
+    margin-top: 0;
+    margin-bottom: 10px;
 }
 
 #spinner {
@@ -60,6 +78,12 @@ hr {
     padding-bottom: 10px;
 }
 
+html:root.yomichan-float .entry,
+html:root.yomichan-float .note {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
 .tag-default {
     background-color: #8a8a91;
 }
@@ -103,6 +127,7 @@ hr {
 
 .actions .disabled img {
     -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
     opacity: 0.25;
 }
 
@@ -111,7 +136,7 @@ hr {
 }
 
 .actions {
-    display: inline-block;
+    display: block;
     float: right;
 }
 
@@ -234,3 +259,16 @@ div.glossary-item.compact-glossary {
 .entry:not(.entry-current) .current {
     display: none;
 }
+
+.label {
+    display: inline;
+    padding: 0.2em 0.6em 0.3em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25em;
+}
-- 
cgit v1.2.3


From c90bc75eb89f5a731f6e3366f6388b594a27b2aa Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 17:06:03 -0400
Subject: Create themes

---
 ext/bg/search.html                |  2 ++
 ext/fg/css/client.css             |  8 ++++-
 ext/fg/float.html                 |  2 ++
 ext/fg/js/popup.js                |  1 +
 ext/mixed/css/display-dark.css    | 51 +++++++++++++++++++++++++++++
 ext/mixed/css/display-default.css | 51 +++++++++++++++++++++++++++++
 ext/mixed/css/display.css         | 68 ++++++---------------------------------
 ext/mixed/js/display.js           | 11 +++++++
 8 files changed, 134 insertions(+), 60 deletions(-)
 create mode 100644 ext/mixed/css/display-dark.css
 create mode 100644 ext/mixed/css/display-default.css

(limited to 'ext/fg')

diff --git a/ext/bg/search.html b/ext/bg/search.html
index e63b4ac1..12b62797 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -7,6 +7,8 @@
         <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
         <link rel="stylesheet" type="text/css" href="/mixed/css/display.css">
+        <link rel="stylesheet alternate" type="text/css" href="/mixed/css/display-default.css" data-yomichan-theme-name="default">
+        <link rel="stylesheet alternate" type="text/css" href="/mixed/css/display-dark.css" data-yomichan-theme-name="dark">
     </head>
     <body>
         <div class="container">
diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css
index a2b06d0f..84098653 100644
--- a/ext/fg/css/client.css
+++ b/ext/fg/css/client.css
@@ -21,7 +21,7 @@ iframe#yomichan-float {
     all: initial;
     background-color: #fff;
     border: 1px solid #999;
-    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     position: fixed;
     resize: both;
     visibility: hidden;
@@ -29,6 +29,12 @@ iframe#yomichan-float {
     box-sizing: border-box;
 }
 
+iframe#yomichan-float[data-yomichan-theme=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 {
     border-left: none;
     border-right: none;
diff --git a/ext/fg/float.html b/ext/fg/float.html
index ac443c01..01bc4250 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -5,6 +5,8 @@
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title></title>
         <link rel="stylesheet" href="/mixed/css/display.css">
+        <link rel="stylesheet alternate" type="text/css" href="/mixed/css/display-default.css" data-yomichan-theme-name="default">
+        <link rel="stylesheet alternate" type="text/css" href="/mixed/css/display-dark.css" data-yomichan-theme-name="dark">
     </head>
     <body>
         <div id="spinner">
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index f36bb436..3556a52e 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -85,6 +85,7 @@ class Popup {
 
     async setOptions(options) {
         this.options = options;
+        this.container.dataset.yomichanTheme = options.general.popupTheme;
     }
 
     async show(elementRect, writingMode) {
diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css
new file mode 100644
index 00000000..75e42565
--- /dev/null
+++ b/ext/mixed/css/display-dark.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2019  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the entrys of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+body,
+html.yomichan-float body { background-color: #1e1e1e; color: #d4d4d4; }
+
+hr { border-top-color: #2f2f2f; }
+
+.tag-default      { background-color: #69696e; }
+.tag-name         { background-color: #489148; }
+.tag-expression   { background-color: #b07f39; }
+.tag-popular      { background-color: #025caa; }
+.tag-frequent     { background-color: #4490a7; }
+.tag-archaism     { background-color: #b04340; }
+.tag-dictionary   { background-color: #9057ad; }
+.tag-frequency    { background-color: #489148; }
+.tag-partOfSpeech { background-color: #565656; }
+
+.reasons       { color: #888888; }
+.glossary li   { color: #888888; }
+.glossary-item { color: #d4d4d4; }
+.label         { color: #e1e1e1; }
+
+.expression .kanji-link {
+    border-bottom-color: #888888;
+    color: #CCCCCC;
+}
+
+.expression-popular, .expression-popular .kanji-link {
+    color: #0275d8;
+}
+
+.expression-rare, .expression-rare .kanji-link {
+    color: #666666;
+}
diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css
new file mode 100644
index 00000000..ce1008a8
--- /dev/null
+++ b/ext/mixed/css/display-default.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2019  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the entrys of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+body,
+html.yomichan-float body { background-color: #ffffff; color: #333333; }
+
+hr { border-top-color: #eeeeee; }
+
+.tag-default      { background-color: #8a8a91; }
+.tag-name         { background-color: #5cb85c; }
+.tag-expression   { background-color: #f0ad4e; }
+.tag-popular      { background-color: #0275d8; }
+.tag-frequent     { background-color: #5bc0de; }
+.tag-archaism     { background-color: #d9534f; }
+.tag-dictionary   { background-color: #aa66cc; }
+.tag-frequency    { background-color: #5cb85c; }
+.tag-partOfSpeech { background-color: #565656; }
+
+.reasons       { color: #777777; }
+.glossary li   { color: #777777; }
+.glossary-item { color: #000000; }
+.label         { color: #ffffff; }
+
+.expression .kanji-link {
+    border-bottom-color: #777777;
+    color: #333333;
+}
+
+.expression-popular, .expression-popular .kanji-link {
+    color: #0275d8;
+}
+
+.expression-rare, .expression-rare .kanji-link {
+    color: #999999;
+}
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index e88372bb..d899e9fc 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -30,12 +30,15 @@
  * General
  */
 
+html.yomichan-float,
+html.yomichan-float body {
+    background-color: transparent;
+}
+
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 14px;
     line-height: 1.42857143;
-    color: #333;
-    background-color: #fff;
     margin: 0;
     border: 0;
     padding: 0;
@@ -45,7 +48,8 @@ hr {
     padding: 0px;
     margin: 0px;
     border: 0;
-    border-top: 1px solid #eee;
+    border-top-width: 1px;
+    border-top-style: solid;
 }
 
 ol, ul {
@@ -84,42 +88,6 @@ html:root.yomichan-float .note {
     padding-right: 10px;
 }
 
-.tag-default {
-    background-color: #8a8a91;
-}
-
-.tag-name {
-    background-color: #5cb85c;
-}
-
-.tag-expression {
-    background-color: #f0ad4e;
-}
-
-.tag-popular {
-    background-color: #0275d8;
-}
-
-.tag-frequent {
-    background-color: #5bc0de;
-}
-
-.tag-archaism {
-    background-color: #d9534f;
-}
-
-.tag-dictionary {
-    background-color: #aa66cc;
-}
-
-.tag-frequency {
-    background-color: #5cb85c;
-}
-
-.tag-partOfSpeech {
-    background-color: #565656;
-}
-
 .actions .disabled {
     pointer-events: none;
     cursor: default;
@@ -152,19 +120,11 @@ html:root.yomichan-float .note {
 }
 
 .expression .kanji-link {
-    border-bottom: 1px #777 dashed;
-    color: #333;
+    border-bottom-width: 1px;
+    border-bottom-style: dashed;
     text-decoration: none;
 }
 
-.expression-popular, .expression-popular .kanji-link {
-    color: #0275d8;
-}
-
-.expression-rare, .expression-rare .kanji-link {
-    color: #999;
-}
-
 .expression .peek-wrapper {
     font-size: 14px;
     white-space: nowrap;
@@ -198,7 +158,6 @@ html:root.yomichan-float .note {
 }
 
 .reasons {
-    color: #777;
     display: inline-block;
 }
 
@@ -224,14 +183,6 @@ html:root.yomichan-float .note {
     content: " | ";
 }
 
-.glossary li {
-    color: #777;
-}
-
-.glossary-item {
-    color: #000;
-}
-
 div.glossary-item.compact-glossary {
     display: inline;
 }
@@ -266,7 +217,6 @@ div.glossary-item.compact-glossary {
     font-size: 75%;
     font-weight: 700;
     line-height: 1;
-    color: #fff;
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index cd9f41bd..2bf917aa 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -194,6 +194,17 @@ class Display {
 
     async updateOptions(options) {
         this.options = options ? options : await apiOptionsGet(this.getOptionsContext());
+        this.updateTheme(this.options.general.popupTheme);
+    }
+
+    updateTheme(themeName) {
+        document.documentElement.dataset.yomichanTheme = themeName;
+
+        const stylesheets = document.querySelectorAll('link[data-yomichan-theme-name]');
+        for (const stylesheet of stylesheets) {
+            const match = (stylesheet.dataset.yomichanThemeName === themeName);
+            stylesheet.rel = (match ? 'stylesheet' : 'stylesheet alternate');
+        }
     }
 
     setInteractive(interactive) {
-- 
cgit v1.2.3


From 883226b0451350a0c01841e6c9a192bbb76dd8b6 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 17:12:34 -0400
Subject: Update how custom CSS is applied

---
 ext/bg/js/search.js           |  4 ++++
 ext/fg/js/float.js            | 21 +--------------------
 ext/fg/js/popup-proxy-host.js |  6 ++++++
 ext/fg/js/popup-proxy.js      |  5 +++++
 ext/fg/js/popup.js            |  4 ++++
 ext/mixed/js/display.js       | 16 ++++++++++++++++
 6 files changed, 36 insertions(+), 20 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 1d780d70..68afe47e 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -118,6 +118,10 @@ class DisplaySearch extends Display {
         return this.optionsContext;
     }
 
+    setCustomCss() {
+        // No custom CSS
+    }
+
     setIntroVisible(visible, animate) {
         if (this.introVisible === visible) {
             return;
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 5164cd8f..4b3cd848 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -21,7 +21,6 @@ class DisplayFloat extends Display {
     constructor() {
         super(document.querySelector('#spinner'), document.querySelector('#definitions'));
         this.autoPlayAudioTimer = null;
-        this.styleNode = null;
 
         this.optionsContext = {
             depth: 0,
@@ -101,11 +100,6 @@ class DisplayFloat extends Display {
     async initialize(options, popupInfo, url, childrenSupported) {
         await super.initialize(options);
 
-        const css = options.general.customPopupCss;
-        if (css) {
-            this.setStyle(css);
-        }
-
         const {id, depth, parentFrameId} = popupInfo;
         this.optionsContext.depth = depth;
         this.optionsContext.url = url;
@@ -114,20 +108,6 @@ class DisplayFloat extends Display {
             popupNestedInitialize(id, depth, parentFrameId, url);
         }
     }
-
-    setStyle(css) {
-        const parent = document.head;
-
-        if (this.styleNode === null) {
-            this.styleNode = document.createElement('style');
-        }
-
-        this.styleNode.textContent = css;
-
-        if (this.styleNode.parentNode !== parent) {
-            parent.appendChild(this.styleNode);
-        }
-    }
 }
 
 DisplayFloat.onKeyDownHandlers = {
@@ -145,6 +125,7 @@ DisplayFloat.messageHandlers = {
     kanjiShow: (self, {definitions, context}) => self.kanjiShow(definitions, context),
     clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(),
     orphaned: (self) => self.onOrphaned(),
+    setCustomCss: (self, {css}) => self.setCustomCss(css),
     initialize: (self, {options, popupInfo, url, childrenSupported}) => self.initialize(options, popupInfo, url, childrenSupported)
 };
 
diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js
index 74a5153a..bb323f64 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-proxy-host.js
@@ -45,6 +45,7 @@ class PopupProxyHost {
             containsPoint: ({id, x, y}) => this.containsPoint(id, x, y),
             termsShow: ({id, elementRect, writingMode, definitions, context}) => this.termsShow(id, elementRect, writingMode, definitions, context),
             kanjiShow: ({id, elementRect, writingMode, definitions, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, context),
+            setCustomCss: ({id, css}) => this.setCustomCss(id, css),
             clearAutoPlayTimer: ({id}) => this.clearAutoPlayTimer(id)
         });
     }
@@ -126,6 +127,11 @@ class PopupProxyHost {
         return await popup.kanjiShow(elementRect, writingMode, definitions, context);
     }
 
+    async setCustomCss(id, css) {
+        const popup = this.getPopup(id);
+        return popup.setCustomCss(css);
+    }
+
     async clearAutoPlayTimer(id) {
         const popup = this.getPopup(id);
         return popup.clearAutoPlayTimer();
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index e8d6bc98..6ea94b6a 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -88,6 +88,11 @@ class PopupProxy {
         return await this.invokeHostApi('kanjiShow', {id, elementRect, writingMode, definitions, context});
     }
 
+    async setCustomCss(css) {
+        const id = await this.getPopupId();
+        return await this.invokeHostApi('setCustomCss', {id, css});
+    }
+
     async clearAutoPlayTimer() {
         if (this.id === null) {
             return;
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 3556a52e..5ca8643f 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -292,6 +292,10 @@ class Popup {
         this.invokeApi('kanjiShow', {definitions, context});
     }
 
+    async setCustomCss(css) {
+        this.invokeApi('setCustomCss', {css});
+    }
+
     clearAutoPlayTimer() {
         if (this.isInjected) {
             this.invokeApi('clearAutoPlayTimer');
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 2bf917aa..51a3dc22 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -29,6 +29,7 @@ class Display {
         this.audioPlaying = null;
         this.audioFallback = null;
         this.audioCache = {};
+        this.styleNode = null;
 
         this.eventListeners = [];
         this.persistentEventListeners = [];
@@ -195,6 +196,7 @@ class Display {
     async updateOptions(options) {
         this.options = options ? options : await apiOptionsGet(this.getOptionsContext());
         this.updateTheme(this.options.general.popupTheme);
+        this.setCustomCss(this.options.general.customPopupCss);
     }
 
     updateTheme(themeName) {
@@ -207,6 +209,20 @@ class Display {
         }
     }
 
+    setCustomCss(css) {
+        if (this.styleNode === null) {
+            if (css.length === 0) { return; }
+            this.styleNode = document.createElement('style');
+        }
+
+        this.styleNode.textContent = css;
+
+        const parent = document.head;
+        if (this.styleNode.parentNode !== parent) {
+            parent.appendChild(this.styleNode);
+        }
+    }
+
     setInteractive(interactive) {
         interactive = !!interactive;
         if (this.interactive === interactive) { return; }
-- 
cgit v1.2.3


From b086fca69fdbc74a44d31a06203b302493656151 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 17:59:56 -0400
Subject: Add separate theme option for outer popup style

---
 ext/bg/js/options.js                |  1 +
 ext/bg/js/settings-popup-preview.js |  8 +++++++
 ext/bg/js/settings.js               |  2 ++
 ext/bg/settings.html                | 22 ++++++++++++++-----
 ext/fg/js/popup.js                  | 43 ++++++++++++++++++++++++++++++++++++-
 5 files changed, 70 insertions(+), 6 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 088945c0..cadc4443 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -277,6 +277,7 @@ function profileOptionsCreateDefaults() {
             compactGlossaries: false,
             mainDictionary: '',
             popupTheme: 'default',
+            popupOuterTheme: 'default',
             customPopupCss: ''
         },
 
diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js
index 6f64c240..53a5f1d0 100644
--- a/ext/bg/js/settings-popup-preview.js
+++ b/ext/bg/js/settings-popup-preview.js
@@ -22,6 +22,7 @@ class SettingsPopupPreview {
         this.frontend = null;
         this.apiOptionsGetOld = apiOptionsGet;
         this.popupShown = false;
+        this.themeChangeTimeout = null;
     }
 
     static create() {
@@ -97,6 +98,13 @@ class SettingsPopupPreview {
 
     onThemeDarkCheckboxChanged(node) {
         document.documentElement.classList.toggle('dark', node.checked);
+        if (this.themeChangeTimeout !== null) {
+            clearTimeout(this.themeChangeTimeout);
+        }
+        this.themeChangeTimeout = setTimeout(() => {
+            this.themeChangeTimeout = null;
+            this.frontend.popup.updateTheme();
+        }, 300);
     }
 
     setText(text) {
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index b98754ab..900b89bb 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -40,6 +40,7 @@ async function formRead(options) {
     options.general.popupHorizontalOffset2 = parseInt($('#popup-horizontal-offset2').val(), 0);
     options.general.popupVerticalOffset2 = parseInt($('#popup-vertical-offset2').val(), 10);
     options.general.popupTheme = $('#popup-theme').val();
+    options.general.popupOuterTheme = $('#popup-outer-theme').val();
     options.general.customPopupCss = $('#custom-popup-css').val();
 
     options.audio.enabled = $('#audio-playback-enabled').prop('checked');
@@ -109,6 +110,7 @@ async function formWrite(options) {
     $('#popup-horizontal-offset2').val(options.general.popupHorizontalOffset2);
     $('#popup-vertical-offset2').val(options.general.popupVerticalOffset2);
     $('#popup-theme').val(options.general.popupTheme);
+    $('#popup-outer-theme').val(options.general.popupOuterTheme);
     $('#custom-popup-css').val(options.general.customPopupCss);
 
     $('#audio-playback-enabled').prop('checked', options.audio.enabled);
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 531c0e86..08e56a09 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -232,11 +232,23 @@
                 </div>
 
                 <div class="form-group">
-                    <label for="popup-theme">Theme</label>
-                    <select class="form-control" id="popup-theme">
-                        <option value="default">Light</option>
-                        <option value="dark">Dark</option>
-                    </select>
+                    <div class="row">
+                        <div class="col-xs-6">
+                            <label for="popup-theme">Popup theme</label>
+                            <select class="form-control" id="popup-theme">
+                                <option value="default">Light</option>
+                                <option value="dark">Dark</option>
+                            </select>
+                        </div>
+                        <div class="col-xs-6">
+                            <label for="popup-outer-theme">Popup shadow theme</label>
+                            <select class="form-control" id="popup-outer-theme">
+                                <option value="auto">Auto-detect</option>
+                                <option value="default">Light</option>
+                                <option value="dark">Dark</option>
+                            </select>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="form-group options-advanced">
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 5ca8643f..ef4cdb67 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -85,7 +85,7 @@ class Popup {
 
     async setOptions(options) {
         this.options = options;
-        this.container.dataset.yomichanTheme = options.general.popupTheme;
+        this.updateTheme();
     }
 
     async show(elementRect, writingMode) {
@@ -270,6 +270,47 @@ class Popup {
         }
     }
 
+    updateTheme() {
+        this.container.dataset.yomichanTheme = this.getTheme(this.options.general.popupOuterTheme);
+    }
+
+    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;
+    }
+
+    static addColor(target, color) {
+        if (color === null) { return; }
+
+        const a = color[3];
+        if (a <= 0.0) { return; }
+
+        const aInv = 1.0 - a;
+        for (let i = 0; i < 3; ++i) {
+            target[i] = target[i] * aInv + color[i] * a;
+        }
+    }
+
+    static getColorInfo(cssColor) {
+        const m = /^\s*rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d\.]+)\s*)?\)\s*$/.exec(cssColor);
+        if (m === null) { return null; }
+
+        const m4 = m[4];
+        return [
+            Number.parseInt(m[1], 10),
+            Number.parseInt(m[2], 10),
+            Number.parseInt(m[3], 10),
+            m4 ? Math.max(0.0, Math.min(1.0, Number.parseFloat(m4))) : 1.0
+        ];
+    }
+
     async containsPoint(x, y) {
         for (let popup = this; popup !== null && popup.isVisible(); popup = popup.child) {
             const rect = popup.container.getBoundingClientRect();
-- 
cgit v1.2.3


From 57db18c31b117591982795c930cc9f07efc28641 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 18:10:01 -0400
Subject: Leave default stylesheet enabled by default

---
 ext/bg/search.html                | 2 +-
 ext/fg/float.html                 | 2 +-
 ext/mixed/css/display-dark.css    | 3 +--
 ext/mixed/css/display-default.css | 3 +--
 ext/mixed/css/display.css         | 4 ++--
 5 files changed, 6 insertions(+), 8 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/search.html b/ext/bg/search.html
index 12b62797..6930830a 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -7,7 +7,7 @@
         <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
         <link rel="stylesheet" type="text/css" href="/mixed/css/display.css">
-        <link rel="stylesheet alternate" type="text/css" href="/mixed/css/display-default.css" data-yomichan-theme-name="default">
+        <link rel="stylesheet" type="text/css" href="/mixed/css/display-default.css" data-yomichan-theme-name="default">
         <link rel="stylesheet alternate" type="text/css" href="/mixed/css/display-dark.css" data-yomichan-theme-name="dark">
     </head>
     <body>
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 01bc4250..2504f448 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title></title>
         <link rel="stylesheet" href="/mixed/css/display.css">
-        <link rel="stylesheet alternate" type="text/css" href="/mixed/css/display-default.css" data-yomichan-theme-name="default">
+        <link rel="stylesheet" type="text/css" href="/mixed/css/display-default.css" data-yomichan-theme-name="default">
         <link rel="stylesheet alternate" type="text/css" href="/mixed/css/display-dark.css" data-yomichan-theme-name="dark">
     </head>
     <body>
diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css
index 75e42565..34a0ccd1 100644
--- a/ext/mixed/css/display-dark.css
+++ b/ext/mixed/css/display-dark.css
@@ -17,8 +17,7 @@
  */
 
 
-body,
-html.yomichan-float body { background-color: #1e1e1e; color: #d4d4d4; }
+body { background-color: #1e1e1e; color: #d4d4d4; }
 
 hr { border-top-color: #2f2f2f; }
 
diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css
index ce1008a8..176c5387 100644
--- a/ext/mixed/css/display-default.css
+++ b/ext/mixed/css/display-default.css
@@ -17,8 +17,7 @@
  */
 
 
-body,
-html.yomichan-float body { background-color: #ffffff; color: #333333; }
+body { background-color: #ffffff; color: #333333; }
 
 hr { border-top-color: #eeeeee; }
 
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index d899e9fc..7ebad090 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -30,8 +30,8 @@
  * General
  */
 
-html.yomichan-float,
-html.yomichan-float body {
+html.yomichan-float:not([data-yomichan-theme]),
+html.yomichan-float:not([data-yomichan-theme]) body {
     background-color: transparent;
 }
 
-- 
cgit v1.2.3


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(-)

(limited to 'ext/fg')

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 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(+)

(limited to 'ext/fg')

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 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(-)

(limited to 'ext/fg')

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 c92fc11fcdad294059931a0927ec7f7701eb5be5 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 16:43:26 -0400
Subject: Fix getElementWritingMode returning deprecated values on Edge

---
 ext/fg/js/source.js | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js
index ee4f58e2..a483952e 100644
--- a/ext/fg/js/source.js
+++ b/ext/fg/js/source.js
@@ -229,13 +229,29 @@ class TextSourceRange {
     }
 
     static getElementWritingMode(element) {
-        if (element === null) {
-            return 'horizontal-tb';
+        if (element !== null) {
+            const style = window.getComputedStyle(element);
+            const writingMode = style.writingMode;
+            if (typeof writingMode === 'string') {
+                TextSourceRange.normalizeWritingMode(writingMode);
+            }
         }
+        return 'horizontal-tb';
+    }
 
-        const style = window.getComputedStyle(element);
-        const writingMode = style.writingMode;
-        return typeof writingMode === 'string' ? writingMode : 'horizontal-tb';
+    static normalizeWritingMode(writingMode) {
+        switch (writingMode) {
+            case 'lr':
+            case 'lr-tb':
+            case 'rl':
+                return 'horizontal-tb';
+            case 'tb':
+                return 'vertical-lr';
+            case 'tb-rl':
+                return 'vertical-rl';
+            default:
+                return writingMode;
+        }
     }
 
     static getNodesInRange(range) {
-- 
cgit v1.2.3


From cb236a743081e8ea4809a8a559abf9f0f22e771c Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 17:20:55 -0400
Subject: Add apiGetEnvironmentInfo function

---
 ext/bg/js/api.js      | 28 ++++++++++++++++++++++++++++
 ext/bg/js/backend.js  |  3 ++-
 ext/bg/js/settings.js | 19 +------------------
 ext/fg/js/api.js      |  4 ++++
 4 files changed, 35 insertions(+), 19 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index 9fefadca..da5ae4fe 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -270,3 +270,31 @@ function apiInjectStylesheet(css, sender) {
         });
     });
 }
+
+async function apiGetEnvironmentInfo() {
+    const browser = await apiGetBrowser();
+    const platform = await new Promise((resolve) => chrome.runtime.getPlatformInfo(resolve));
+    return {
+        browser,
+        platform: {
+            os: platform.os
+        }
+    };
+}
+
+async function apiGetBrowser() {
+    if (EXTENSION_IS_BROWSER_EDGE) {
+        return 'edge';
+    }
+    if (typeof browser !== 'undefined') {
+        try {
+            const info = await browser.runtime.getBrowserInfo();
+            if (info.name === 'Fennec') {
+                return 'firefox-mobile';
+            }
+        } catch (e) { }
+        return 'firefox';
+    } else {
+        return 'chrome';
+    }
+}
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 32ff1bef..7560f39e 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -186,7 +186,8 @@ 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)
+    injectStylesheet: ({css}, sender) => apiInjectStylesheet(css, sender),
+    getEnvironmentInfo: () => apiGetEnvironmentInfo()
 };
 
 window.yomichan_backend = new Backend();
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index acc47f69..ba02641b 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -819,23 +819,6 @@ async function onAnkiFieldTemplatesReset(e) {
  * Storage
  */
 
-async function getBrowser() {
-    if (EXTENSION_IS_BROWSER_EDGE) {
-        return 'edge';
-    }
-    if (typeof browser !== 'undefined') {
-        try {
-            const info = await browser.runtime.getBrowserInfo();
-            if (info.name === 'Fennec') {
-                return 'firefox-mobile';
-            }
-        } catch (e) { }
-        return 'firefox';
-    } else {
-        return 'chrome';
-    }
-}
-
 function storageBytesToLabeledString(size) {
     const base = 1000;
     const labels = [' bytes', 'KB', 'MB', 'GB'];
@@ -865,7 +848,7 @@ async function isStoragePeristent() {
 
 async function storageInfoInitialize() {
     storagePersistInitialize();
-    const browser = await getBrowser();
+    const {browser} = await apiGetEnvironmentInfo();
     const container = document.querySelector('#storage-info');
     container.setAttribute('data-browser', browser);
 
diff --git a/ext/fg/js/api.js b/ext/fg/js/api.js
index dcfb2a09..2294cb8b 100644
--- a/ext/fg/js/api.js
+++ b/ext/fg/js/api.js
@@ -68,3 +68,7 @@ function apiFrameInformationGet() {
 function apiInjectStylesheet(css) {
     return utilInvoke('injectStylesheet', {css});
 }
+
+function apiGetEnvironmentInfo() {
+    return utilInvoke('getEnvironmentInfo');
+}
-- 
cgit v1.2.3


From 16521fec935845828b7e08baf1668657bb5a7cef Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Tue, 15 Oct 2019 20:23:25 -0400
Subject: Assign first popup on the search page as a depth of 1

---
 ext/bg/js/search-frontend.js  | 2 ++
 ext/fg/js/frontend.js         | 7 +++----
 ext/fg/js/popup-nested.js     | 2 +-
 ext/fg/js/popup-proxy-host.js | 8 +++++---
 4 files changed, 11 insertions(+), 8 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/search-frontend.js b/ext/bg/js/search-frontend.js
index f55f06e6..b21dac17 100644
--- a/ext/bg/js/search-frontend.js
+++ b/ext/bg/js/search-frontend.js
@@ -25,6 +25,8 @@ async function searchFrontendSetup() {
     const options = await apiOptionsGet(optionsContext);
     if (!options.scanning.enableOnSearchPage) { return; }
 
+    window.frontendInitializationData = {depth: 1, proxy: false};
+
     const scriptSrcs = [
         '/fg/js/frontend-api-receiver.js',
         '/fg/js/popup.js',
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 3ddeae78..7ea737d7 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -49,11 +49,10 @@ class Frontend {
     }
 
     static create() {
-        const initializationData = window.frontendInitializationData;
-        const isNested = (initializationData !== null && typeof initializationData === 'object');
-        const {id, depth, parentFrameId, ignoreNodes, url} = isNested ? initializationData : {};
+        const data = window.frontendInitializationData || {};
+        const {id, depth=0, parentFrameId, ignoreNodes, url, proxy=false} = data;
 
-        const popup = isNested ? new PopupProxy(depth + 1, id, parentFrameId, url) : PopupProxyHost.instance.createPopup(null);
+        const popup = proxy ? new PopupProxy(depth + 1, id, parentFrameId, url) : PopupProxyHost.instance.createPopup(null, depth);
         const frontend = new Frontend(popup, ignoreNodes);
         frontend.prepare();
         return frontend;
diff --git a/ext/fg/js/popup-nested.js b/ext/fg/js/popup-nested.js
index f7309466..cec95aea 100644
--- a/ext/fg/js/popup-nested.js
+++ b/ext/fg/js/popup-nested.js
@@ -35,7 +35,7 @@ async function popupNestedInitialize(id, depth, parentFrameId, url) {
 
     const ignoreNodes = options.scanning.enableOnPopupExpressions ? [] : [ '.expression', '.expression *' ];
 
-    window.frontendInitializationData = {id, depth, parentFrameId, ignoreNodes, url};
+    window.frontendInitializationData = {id, depth, parentFrameId, ignoreNodes, url, proxy: true};
 
     const scriptSrcs = [
         '/fg/js/frontend-api-sender.js',
diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js
index bb323f64..f97d44ac 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-proxy-host.js
@@ -50,10 +50,12 @@ class PopupProxyHost {
         });
     }
 
-    createPopup(parentId) {
+    createPopup(parentId, depth) {
         const parent = (typeof parentId === 'string' && this.popups.hasOwnProperty(parentId) ? this.popups[parentId] : null);
-        const depth = (parent !== null ? parent.depth + 1 : 0);
         const id = `${this.nextId}`;
+        if (parent !== null) {
+            depth = parent.depth + 1;
+        }
         ++this.nextId;
         const popup = new Popup(id, depth, this.frameIdPromise);
         if (parent !== null) {
@@ -65,7 +67,7 @@ class PopupProxyHost {
     }
 
     async createNestedPopup(parentId) {
-        return this.createPopup(parentId).id;
+        return this.createPopup(parentId, 0).id;
     }
 
     getPopup(id) {
-- 
cgit v1.2.3


From 5b98f3ea6ed31e3f2edc2912ab06598964253fac Mon Sep 17 00:00:00 2001
From: siikamiika <siikamiika@users.noreply.github.com>
Date: Wed, 16 Oct 2019 23:49:40 +0300
Subject: add missing return to fix vertical text mode

---
 ext/fg/js/source.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ext/fg')

diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js
index a483952e..c3da9f46 100644
--- a/ext/fg/js/source.js
+++ b/ext/fg/js/source.js
@@ -233,7 +233,7 @@ class TextSourceRange {
             const style = window.getComputedStyle(element);
             const writingMode = style.writingMode;
             if (typeof writingMode === 'string') {
-                TextSourceRange.normalizeWritingMode(writingMode);
+                return TextSourceRange.normalizeWritingMode(writingMode);
             }
         }
         return 'horizontal-tb';
-- 
cgit v1.2.3


From 598cd32946c8e10e5aa3fcec26e3fc40af44bddf Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Wed, 16 Oct 2019 21:36:10 -0400
Subject: Update *show* APIs to unified showContent and setContent

---
 ext/bg/js/search.js                 |  2 +-
 ext/bg/js/settings-popup-preview.js |  3 +--
 ext/fg/js/float.js                  | 19 ++-----------------
 ext/fg/js/frontend.js               | 17 +++++++++--------
 ext/fg/js/popup-proxy-host.js       | 23 ++++------------------
 ext/fg/js/popup-proxy.js            | 16 ++--------------
 ext/fg/js/popup.js                  | 25 +++++++-----------------
 ext/mixed/js/display.js             | 38 +++++++++++++++++++++++++++++++------
 8 files changed, 58 insertions(+), 85 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 68afe47e..a5a815cf 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -101,7 +101,7 @@ class DisplaySearch extends Display {
             this.updateSearchButton();
             if (valid) {
                 const {definitions} = await apiTermsFind(query, this.optionsContext);
-                this.termsShow(definitions, {
+                this.setContentTerms(definitions, {
                     focus: false,
                     sentence: null,
                     url: window.location.href
diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js
index 7ccdc7f3..b12fb726 100644
--- a/ext/bg/js/settings-popup-preview.js
+++ b/ext/bg/js/settings-popup-preview.js
@@ -100,8 +100,7 @@ class SettingsPopupPreview {
 
         const elementRect = textSource.getRect();
         const writingMode = textSource.getWritingMode();
-        const options = this.frontend.options;
-        this.frontend.popup.show(elementRect, writingMode, options);
+        this.frontend.popup.showContent(elementRect, writingMode);
     }
 
     onMessage(e) {
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 4b3cd848..089c9422 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -32,25 +32,12 @@ class DisplayFloat extends Display {
 
     onError(error) {
         if (window.yomichan_orphaned) {
-            this.onOrphaned();
+            this.setContentOrphaned();
         } else {
             logError(error, true);
         }
     }
 
-    onOrphaned() {
-        const definitions = document.querySelector('#definitions');
-        const errorOrphaned = document.querySelector('#error-orphaned');
-
-        if (definitions !== null) {
-            definitions.style.setProperty('display', 'none', 'important');
-        }
-
-        if (errorOrphaned !== null) {
-            errorOrphaned.style.setProperty('display', 'block', 'important');
-        }
-    }
-
     onSearchClear() {
         window.parent.postMessage('popupClose', '*');
     }
@@ -121,10 +108,8 @@ DisplayFloat.onKeyDownHandlers = {
 };
 
 DisplayFloat.messageHandlers = {
-    termsShow: (self, {definitions, context}) => self.termsShow(definitions, context),
-    kanjiShow: (self, {definitions, context}) => self.kanjiShow(definitions, context),
+    setContent: (self, {type, details}) => self.setContent(type, details),
     clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(),
-    orphaned: (self) => self.onOrphaned(),
     setCustomCss: (self, {css}) => self.setCustomCss(css),
     initialize: (self, {options, popupInfo, url, childrenSupported}) => self.initialize(options, popupInfo, url, childrenSupported)
 };
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 7ea737d7..eddbf9cc 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -332,9 +332,10 @@ class Frontend {
         } catch (e) {
             if (window.yomichan_orphaned) {
                 if (textSource && this.options.scanning.modifier !== 'none') {
-                    this.lastShowPromise = this.popup.showOrphaned(
+                    this.lastShowPromise = this.popup.showContent(
                         textSource.getRect(),
-                        textSource.getWritingMode()
+                        textSource.getWritingMode(),
+                        'orphaned'
                     );
                 }
             } else {
@@ -370,11 +371,11 @@ class Frontend {
 
         const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
         const url = window.location.href;
-        this.lastShowPromise = this.popup.termsShow(
+        this.lastShowPromise = this.popup.showContent(
             textSource.getRect(),
             textSource.getWritingMode(),
-            definitions,
-            {sentence, url, focus}
+            'terms',
+            {definitions, context: {sentence, url, focus}}
         );
 
         this.textSourceLast = textSource;
@@ -400,11 +401,11 @@ class Frontend {
 
         const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
         const url = window.location.href;
-        this.lastShowPromise = this.popup.kanjiShow(
+        this.lastShowPromise = this.popup.showContent(
             textSource.getRect(),
             textSource.getWritingMode(),
-            definitions,
-            {sentence, url, focus}
+            'kanji',
+            {definitions, context: {sentence, url, focus}}
         );
 
         this.textSourceLast = textSource;
diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js
index f97d44ac..dcdce604 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-proxy-host.js
@@ -39,12 +39,10 @@ class PopupProxyHost {
         this.apiReceiver = new FrontendApiReceiver(`popup-proxy-host#${frameId}`, {
             createNestedPopup: ({parentId}) => this.createNestedPopup(parentId),
             setOptions: ({id, options}) => this.setOptions(id, options),
-            showOrphaned: ({id, elementRect}) => this.showOrphaned(id, elementRect),
             hide: ({id, changeFocus}) => this.hide(id, changeFocus),
             setVisibleOverride: ({id, visible}) => this.setVisibleOverride(id, visible),
             containsPoint: ({id, x, y}) => this.containsPoint(id, x, y),
-            termsShow: ({id, elementRect, writingMode, definitions, context}) => this.termsShow(id, elementRect, writingMode, definitions, context),
-            kanjiShow: ({id, elementRect, writingMode, definitions, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, context),
+            showContent: ({id, elementRect, writingMode, type, details}) => this.showContent(id, elementRect, writingMode, type, details),
             setCustomCss: ({id, css}) => this.setCustomCss(id, css),
             clearAutoPlayTimer: ({id}) => this.clearAutoPlayTimer(id)
         });
@@ -94,12 +92,6 @@ class PopupProxyHost {
         return await popup.setOptions(options);
     }
 
-    async showOrphaned(id, elementRect) {
-        const popup = this.getPopup(id);
-        elementRect = this.jsonRectToDOMRect(popup, elementRect);
-        return await popup.showOrphaned(elementRect);
-    }
-
     async hide(id, changeFocus) {
         const popup = this.getPopup(id);
         return popup.hide(changeFocus);
@@ -115,18 +107,11 @@ class PopupProxyHost {
         return await popup.containsPoint(x, y);
     }
 
-    async termsShow(id, elementRect, writingMode, definitions, context) {
-        const popup = this.getPopup(id);
-        elementRect = this.jsonRectToDOMRect(popup, elementRect);
-        if (!PopupProxyHost.popupCanShow(popup)) { return false; }
-        return await popup.termsShow(elementRect, writingMode, definitions, context);
-    }
-
-    async kanjiShow(id, elementRect, writingMode, definitions, context) {
+    async showContent(id, elementRect, writingMode, type, details) {
         const popup = this.getPopup(id);
         elementRect = this.jsonRectToDOMRect(popup, elementRect);
-        if (!PopupProxyHost.popupCanShow(popup)) { return false; }
-        return await popup.kanjiShow(elementRect, writingMode, definitions, context);
+        if (!PopupProxyHost.popupCanShow(popup)) { return Promise.resolve(false); }
+        return await popup.showContent(elementRect, writingMode, type, details);
     }
 
     async setCustomCss(id, css) {
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 6ea94b6a..53b68872 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -51,12 +51,6 @@ class PopupProxy {
         return await this.invokeHostApi('setOptions', {id, options});
     }
 
-    async showOrphaned(elementRect) {
-        const id = await this.getPopupId();
-        elementRect = PopupProxy.DOMRectToJson(elementRect);
-        return await this.invokeHostApi('showOrphaned', {id, elementRect});
-    }
-
     async hide(changeFocus) {
         if (this.id === null) {
             return;
@@ -76,16 +70,10 @@ class PopupProxy {
         return await this.invokeHostApi('containsPoint', {id: this.id, x, y});
     }
 
-    async termsShow(elementRect, writingMode, definitions, context) {
-        const id = await this.getPopupId();
-        elementRect = PopupProxy.DOMRectToJson(elementRect);
-        return await this.invokeHostApi('termsShow', {id, elementRect, writingMode, definitions, context});
-    }
-
-    async kanjiShow(elementRect, writingMode, definitions, context) {
+    async showContent(elementRect, writingMode, type=null, details=null) {
         const id = await this.getPopupId();
         elementRect = PopupProxy.DOMRectToJson(elementRect);
-        return await this.invokeHostApi('kanjiShow', {id, elementRect, writingMode, definitions, context});
+        return await this.invokeHostApi('showContent', {id, elementRect, writingMode, type, details});
     }
 
     async setCustomCss(css) {
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 2a9670fc..6c24c0ce 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -90,6 +90,13 @@ class Popup {
         this.updateTheme();
     }
 
+    async showContent(elementRect, writingMode, type=null, details=null) {
+        if (!this.isInitialized()) { return; }
+        await this.show(elementRect, writingMode);
+        if (type === null) { return; }
+        this.invokeApi('setContent', {type, details});
+    }
+
     async show(elementRect, writingMode) {
         await this.inject();
 
@@ -218,12 +225,6 @@ class Popup {
         return [position, size, after];
     }
 
-    async showOrphaned(elementRect, writingMode) {
-        if (!this.isInitialized()) { return; }
-        await this.show(elementRect, writingMode);
-        this.invokeApi('orphaned');
-    }
-
     hide(changeFocus) {
         if (!this.isVisible()) {
             return;
@@ -320,18 +321,6 @@ class Popup {
         return false;
     }
 
-    async termsShow(elementRect, writingMode, definitions, context) {
-        if (!this.isInitialized()) { return; }
-        await this.show(elementRect, writingMode);
-        this.invokeApi('termsShow', {definitions, context});
-    }
-
-    async kanjiShow(elementRect, writingMode, definitions, context) {
-        if (!this.isInitialized()) { return; }
-        await this.show(elementRect, writingMode);
-        this.invokeApi('kanjiShow', {definitions, context});
-    }
-
     async setCustomCss(css) {
         this.invokeApi('setCustomCss', {css});
     }
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index e0994f8a..bab82015 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -74,8 +74,8 @@ class Display {
                 context.source.source = this.context.source;
             }
 
-            const kanjiDefs = await apiKanjiFind(link.textContent, this.getOptionsContext());
-            this.kanjiShow(kanjiDefs, context);
+            const definitions = await apiKanjiFind(link.textContent, this.getOptionsContext());
+            this.setContentKanji(definitions, context);
         } catch (e) {
             this.onError(e);
         }
@@ -122,7 +122,7 @@ class Display {
                 context.source.source = this.context.source;
             }
 
-            this.termsShow(definitions, context);
+            this.setContentTerms(definitions, context);
         } catch (e) {
             this.onError(e);
         }
@@ -263,7 +263,20 @@ class Display {
         });
     }
 
-    async termsShow(definitions, context) {
+    setContent(type, details) {
+        switch (type) {
+            case 'terms':
+                return this.setContentTerms(details.definitions, details.context);
+            case 'kanji':
+                return this.setContentKanji(details.definitions, details.context);
+            case 'orphaned':
+                return this.setContentOrphaned();
+            default:
+                return Promise.resolve();
+        }
+    }
+
+    async setContentTerms(definitions, context) {
         if (!this.isInitialized()) { return; }
 
         try {
@@ -317,7 +330,7 @@ class Display {
         }
     }
 
-    async kanjiShow(definitions, context) {
+    async setContentKanji(definitions, context) {
         if (!this.isInitialized()) { return; }
 
         try {
@@ -363,6 +376,19 @@ class Display {
         }
     }
 
+    async setContentOrphaned() {
+        const definitions = document.querySelector('#definitions');
+        const errorOrphaned = document.querySelector('#error-orphaned');
+
+        if (definitions !== null) {
+            definitions.style.setProperty('display', 'none', 'important');
+        }
+
+        if (errorOrphaned !== null) {
+            errorOrphaned.style.setProperty('display', 'block', 'important');
+        }
+    }
+
     autoPlayAudio() {
         this.audioPlay(this.definitions[0], this.firstExpressionIndex, 0);
     }
@@ -441,7 +467,7 @@ class Display {
                 source: this.context.source.source
             };
 
-            this.termsShow(this.context.source.definitions, context);
+            this.setContentTerms(this.context.source.definitions, context);
         }
     }
 
-- 
cgit v1.2.3


From 8f918c63dcf82bfcdba47100194b34e4be2dd531 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Thu, 17 Oct 2019 18:39:12 -0400
Subject: Reposition popup on window resize rather than clear the search

Fixes #107
---
 ext/fg/js/frontend.js         | 10 ++++++++--
 ext/fg/js/popup-proxy-host.js |  8 +++++++-
 ext/fg/js/popup-proxy.js      |  5 +++++
 ext/fg/js/popup.js            |  4 ++++
 4 files changed, 24 insertions(+), 3 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index eddbf9cc..45d24329 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -139,8 +139,14 @@ class Frontend {
         }
     }
 
-    onResize() {
-        this.searchClear(false);
+    async onResize() {
+        if (this.textSourceLast !== null && await this.popup.isVisibleAsync()) {
+            const textSource = this.textSourceLast;
+            this.lastShowPromise = this.popup.showContent(
+                textSource.getRect(),
+                textSource.getWritingMode()
+            );
+        }
     }
 
     onClick(e) {
diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js
index dcdce604..d8dec4df 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-proxy-host.js
@@ -40,6 +40,7 @@ class PopupProxyHost {
             createNestedPopup: ({parentId}) => this.createNestedPopup(parentId),
             setOptions: ({id, options}) => this.setOptions(id, options),
             hide: ({id, changeFocus}) => this.hide(id, changeFocus),
+            isVisibleAsync: ({id}) => this.isVisibleAsync(id),
             setVisibleOverride: ({id, visible}) => this.setVisibleOverride(id, visible),
             containsPoint: ({id, x, y}) => this.containsPoint(id, x, y),
             showContent: ({id, elementRect, writingMode, type, details}) => this.showContent(id, elementRect, writingMode, type, details),
@@ -97,9 +98,14 @@ class PopupProxyHost {
         return popup.hide(changeFocus);
     }
 
+    async isVisibleAsync(id) {
+        const popup = this.getPopup(id);
+        return await popup.isVisibleAsync();
+    }
+
     async setVisibleOverride(id, visible) {
         const popup = this.getPopup(id);
-        return popup.setVisibleOverride(visible);
+        return await popup.setVisibleOverride(visible);
     }
 
     async containsPoint(id, x, y) {
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 53b68872..e62a4868 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -58,6 +58,11 @@ class PopupProxy {
         return await this.invokeHostApi('hide', {id: this.id, changeFocus});
     }
 
+    async isVisibleAsync() {
+        const id = await this.getPopupId();
+        return await this.invokeHostApi('isVisibleAsync', {id});
+    }
+
     async setVisibleOverride(visible) {
         const id = await this.getPopupId();
         return await this.invokeHostApi('setVisibleOverride', {id, visible});
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 6c24c0ce..b5eb9fe2 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -239,6 +239,10 @@ class Popup {
         }
     }
 
+    async isVisibleAsync() {
+        return this.isVisible();
+    }
+
     isVisible() {
         return this.isInjected && (this.visibleOverride !== null ? this.visibleOverride : this.visible);
     }
-- 
cgit v1.2.3


From a5d7de8e97400f63c328ccde9b313a127cef0611 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Thu, 17 Oct 2019 19:30:54 -0400
Subject: Add correction to offset of imposter rect

Necessary when dealing with CSS transforms
---
 ext/fg/js/document.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/fg/js/document.js b/ext/fg/js/document.js
index 94a68e6c..a168705e 100644
--- a/ext/fg/js/document.js
+++ b/ext/fg/js/document.js
@@ -27,8 +27,8 @@ function docImposterCreate(element, isTextarea) {
     const elementStyle = window.getComputedStyle(element);
     const elementRect = element.getBoundingClientRect();
     const documentRect = document.documentElement.getBoundingClientRect();
-    const left = elementRect.left - documentRect.left;
-    const top = elementRect.top - documentRect.top;
+    let left = elementRect.left - documentRect.left;
+    let top = elementRect.top - documentRect.top;
 
     // Container
     const container = document.createElement('div');
@@ -82,6 +82,12 @@ function docImposterCreate(element, isTextarea) {
         docSetImposterStyle(imposterStyle, 'width', `${width}px`);
         docSetImposterStyle(imposterStyle, 'height', `${height}px`);
     }
+    if (imposterRect.x !== elementRect.x || imposterRect.y !== elementRect.y) {
+        left += (elementRect.left - imposterRect.left);
+        top += (elementRect.top - imposterRect.top);
+        docSetImposterStyle(imposterStyle, 'left', `${left}px`);
+        docSetImposterStyle(imposterStyle, 'top', `${top}px`);
+    }
 
     imposter.scrollTop = element.scrollTop;
     imposter.scrollLeft = element.scrollLeft;
-- 
cgit v1.2.3


From dbec4bffda00615fe768f66c1eb5d895aea05585 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 19 Oct 2019 22:28:23 -0400
Subject: Make the search button reuse an open search tab if it exists

---
 ext/bg/js/api.js        | 89 +++++++++++++++++++++++++++++++++++++++++++++++--
 ext/bg/js/search.js     | 17 ++++++++++
 ext/bg/js/settings.js   | 11 ++++--
 ext/fg/js/frontend.js   |  8 +++--
 ext/mixed/js/display.js |  4 +--
 5 files changed, 120 insertions(+), 9 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index da5ae4fe..a33ff94f 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -152,8 +152,22 @@ async function apiCommandExec(command) {
     }
 }
 apiCommandExec.handlers = {
-    search: () => {
-        chrome.tabs.create({url: chrome.extension.getURL('/bg/search.html')});
+    search: async () => {
+        const url = chrome.extension.getURL('/bg/search.html');
+        try {
+            const tab = await apiFindTab(1000, (url2) => (
+                url2 !== null &&
+                url2.startsWith(url) &&
+                (url2.length === url.length || url2[url.length] === '?' || url2[url.length] === '#')
+            ));
+            if (tab !== null) {
+                await apiFocusTab(tab);
+                return;
+            }
+        } catch (e) {
+            // NOP
+        }
+        chrome.tabs.create({url});
     },
 
     help: () => {
@@ -298,3 +312,74 @@ async function apiGetBrowser() {
         return 'chrome';
     }
 }
+
+function apiGetTabUrl(tab) {
+    return new Promise((resolve) => {
+        chrome.tabs.sendMessage(tab.id, {action: 'getUrl'}, {frameId: 0}, (response) => {
+            let url = null;
+            if (!chrome.runtime.lastError) {
+                url = (response !== null && typeof response === 'object' && !Array.isArray(response) ? response.url : null);
+                if (url !== null && typeof url !== 'string') {
+                    url = null;
+                }
+            }
+            resolve({tab, url});
+        });
+    });
+}
+
+async function apiFindTab(timeout, checkUrl) {
+    // This function works around the need to have the "tabs" permission to access tab.url.
+    const tabs = await new Promise((resolve) => chrome.tabs.query({}, resolve));
+    let matchPromiseResolve = null;
+    const matchPromise = new Promise((resolve) => { matchPromiseResolve = resolve; });
+
+    const checkTabUrl = ({tab, url}) => {
+        if (checkUrl(url, tab)) {
+            matchPromiseResolve(tab);
+        }
+    };
+
+    const promises = [];
+    for (const tab of tabs) {
+        const promise = apiGetTabUrl(tab);
+        promise.then(checkTabUrl);
+        promises.push(promise);
+    }
+
+    const racePromises = [
+        matchPromise,
+        Promise.all(promises).then(() => null)
+    ];
+    if (typeof timeout === 'number') {
+        racePromises.push(new Promise((resolve) => setTimeout(() => resolve(null), timeout)));
+    }
+
+    return await Promise.race(racePromises);
+}
+
+async function apiFocusTab(tab) {
+    const tabWindow = await new Promise((resolve) => {
+        chrome.windows.get(tab.windowId, {}, (tabWindow) => {
+            const e = chrome.runtime.lastError;
+            if (e) { reject(e); }
+            else { resolve(tabWindow); }
+        });
+    });
+    if (!tabWindow.focused) {
+        await new Promise((resolve, reject) => {
+            chrome.windows.update(tab.windowId, {focused: true}, () => {
+                const e = chrome.runtime.lastError;
+                if (e) { reject(e); }
+                else { resolve(); }
+            });
+        });
+    }
+    await new Promise((resolve, reject) => {
+        chrome.tabs.update(tab.id, {active: true}, () => {
+            const e = chrome.runtime.lastError;
+            if (e) { reject(e); }
+            else { resolve(); }
+        });
+    });
+}
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index a5a815cf..431478c9 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -114,6 +114,17 @@ class DisplaySearch extends Display {
         }
     }
 
+    onRuntimeMessage({action, params}, sender, callback) {
+        const handlers = DisplaySearch.runtimeMessageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            const result = handler(this, params);
+            callback(result);
+        } else {
+            return super.onRuntimeMessage({action, params}, sender, callback);
+        }
+    }
+
     getOptionsContext() {
         return this.optionsContext;
     }
@@ -188,4 +199,10 @@ class DisplaySearch extends Display {
     }
 }
 
+DisplaySearch.runtimeMessageHandlers = {
+    getUrl: () => {
+        return {url: window.location.href};
+    }
+};
+
 window.yomichan_search = DisplaySearch.create();
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 2c77a0ed..05a0604a 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -430,9 +430,14 @@ async function onOptionsUpdate({source}) {
     await formWrite(options);
 }
 
-function onMessage({action, params}) {
-    if (action === 'optionsUpdate') {
-        onOptionsUpdate(params);
+function onMessage({action, params}, sender, callback) {
+    switch (action) {
+        case 'optionsUpdate':
+            onOptionsUpdate(params);
+            break;
+        case 'getUrl':
+            callback({url: window.location.href});
+            break;
     }
 }
 
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 45d24329..e854f74e 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -237,8 +237,8 @@ class Frontend {
         const handlers = Frontend.runtimeMessageHandlers;
         if (handlers.hasOwnProperty(action)) {
             const handler = handlers[action];
-            handler(this, params);
-            callback();
+            const result = handler(this, params);
+            callback(result);
         }
     }
 
@@ -576,5 +576,9 @@ Frontend.runtimeMessageHandlers = {
 
     popupSetVisibleOverride: (self, {visible}) => {
         self.popup.setVisibleOverride(visible);
+    },
+
+    getUrl: () => {
+        return {url: window.location.href};
     }
 };
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index bab82015..b40228b0 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -175,8 +175,8 @@ class Display {
         const handlers = Display.runtimeMessageHandlers;
         if (handlers.hasOwnProperty(action)) {
             const handler = handlers[action];
-            handler(this, params);
-            callback();
+            const result = handler(this, params);
+            callback(result);
         }
     }
 
-- 
cgit v1.2.3


From d9ae34821ca5e0189248c015c2f30b88a8a6a7b2 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 19 Oct 2019 22:30:16 -0400
Subject: Add support for middle clicks opening new tabs on the context buttons

---
 ext/bg/js/api.js     | 30 ++++++++++++++++--------------
 ext/bg/js/backend.js |  2 +-
 ext/bg/js/context.js | 20 +++++++++++++++++---
 ext/fg/js/api.js     |  4 ++--
 4 files changed, 36 insertions(+), 20 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index a33ff94f..7b806e27 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -144,28 +144,30 @@ async function apiTemplateRender(template, data, dynamic) {
     }
 }
 
-async function apiCommandExec(command) {
+async function apiCommandExec(command, params) {
     const handlers = apiCommandExec.handlers;
     if (handlers.hasOwnProperty(command)) {
         const handler = handlers[command];
-        handler();
+        handler(params);
     }
 }
 apiCommandExec.handlers = {
-    search: async () => {
+    search: async (params) => {
         const url = chrome.extension.getURL('/bg/search.html');
-        try {
-            const tab = await apiFindTab(1000, (url2) => (
-                url2 !== null &&
-                url2.startsWith(url) &&
-                (url2.length === url.length || url2[url.length] === '?' || url2[url.length] === '#')
-            ));
-            if (tab !== null) {
-                await apiFocusTab(tab);
-                return;
+        if (!(params && params.newTab)) {
+            try {
+                const tab = await apiFindTab(1000, (url2) => (
+                    url2 !== null &&
+                    url2.startsWith(url) &&
+                    (url2.length === url.length || url2[url.length] === '?' || url2[url.length] === '#')
+                ));
+                if (tab !== null) {
+                    await apiFocusTab(tab);
+                    return;
+                }
+            } catch (e) {
+                // NOP
             }
-        } catch (e) {
-            // NOP
         }
         chrome.tabs.create({url});
     },
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 7560f39e..f29230a2 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -181,7 +181,7 @@ Backend.messageHandlers = {
     definitionsAddable: ({definitions, modes, optionsContext}) => apiDefinitionsAddable(definitions, modes, optionsContext),
     noteView: ({noteId}) => apiNoteView(noteId),
     templateRender: ({template, data, dynamic}) => apiTemplateRender(template, data, dynamic),
-    commandExec: ({command}) => apiCommandExec(command),
+    commandExec: ({command, params}) => apiCommandExec(command, params),
     audioGetUrl: ({definition, source, optionsContext}) => apiAudioGetUrl(definition, source, optionsContext),
     screenshotGet: ({options}, sender) => apiScreenshotGet(options, sender),
     forward: ({action, params}, sender) => apiForward(action, params, sender),
diff --git a/ext/bg/js/context.js b/ext/bg/js/context.js
index a29f7aa7..a16c8769 100644
--- a/ext/bg/js/context.js
+++ b/ext/bg/js/context.js
@@ -25,6 +25,20 @@ function showExtensionInfo() {
     node.textContent = `${manifest.name} v${manifest.version}`;
 }
 
+function setupButtonEvents(selector, command) {
+    $(selector)
+    .on('click', (e) => {
+        if (e.button !== 0) { return; }
+        apiCommandExec(command, {newTab: e.ctrlKey});
+        e.preventDefault();
+    })
+    .on('auxclick', (e) => {
+        if (e.button !== 1) { return; }
+        apiCommandExec(command, {newTab: true});
+        e.preventDefault();
+    });
+}
+
 $(document).ready(utilAsync(() => {
     showExtensionInfo();
 
@@ -33,9 +47,9 @@ $(document).ready(utilAsync(() => {
         document.documentElement.dataset.mode = (browser === 'firefox-mobile' ? 'full' : 'mini');
     });
 
-    $('.action-open-search').click(() => apiCommandExec('search'));
-    $('.action-open-options').click(() => apiCommandExec('options'));
-    $('.action-open-help').click(() => apiCommandExec('help'));
+    setupButtonEvents('.action-open-search', 'search');
+    setupButtonEvents('.action-open-options', 'options');
+    setupButtonEvents('.action-open-help', 'help');
 
     const optionsContext = {
         depth: 0,
diff --git a/ext/fg/js/api.js b/ext/fg/js/api.js
index 2294cb8b..b0746b85 100644
--- a/ext/fg/js/api.js
+++ b/ext/fg/js/api.js
@@ -49,8 +49,8 @@ function apiAudioGetUrl(definition, source, optionsContext) {
     return utilInvoke('audioGetUrl', {definition, source, optionsContext});
 }
 
-function apiCommandExec(command) {
-    return utilInvoke('commandExec', {command});
+function apiCommandExec(command, params) {
+    return utilInvoke('commandExec', {command, params});
 }
 
 function apiScreenshotGet(options) {
-- 
cgit v1.2.3