From c61a87b152b91bdebe01eefdbc3fa00670a3071d Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 24 May 2020 13:30:40 -0400 Subject: API refactor (#532) * Convert api.js into a class instance * Use new api.* functions * Fix missing binds * Group functions with progress callbacks together * Change style * Fix API override not working --- ext/fg/js/content-script-main.js | 13 +++++-------- ext/fg/js/float-main.js | 7 +++---- ext/fg/js/float.js | 11 +++++------ ext/fg/js/frame-offset-forwarder.js | 4 ++-- ext/fg/js/frontend.js | 18 +++++++----------- ext/fg/js/popup.js | 4 ++-- 6 files changed, 24 insertions(+), 33 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/content-script-main.js b/ext/fg/js/content-script-main.js index 57386b85..b057ae3d 100644 --- a/ext/fg/js/content-script-main.js +++ b/ext/fg/js/content-script-main.js @@ -21,10 +21,7 @@ * Frontend * PopupFactory * PopupProxy - * apiBroadcastTab - * apiForwardLogsToBackend - * apiFrameInformationGet - * apiOptionsGet + * api */ async function createIframePopupProxy(frameOffsetForwarder, setDisabled) { @@ -36,7 +33,7 @@ async function createIframePopupProxy(frameOffsetForwarder, setDisabled) { } } ); - apiBroadcastTab('rootPopupRequestInformationBroadcast'); + api.broadcastTab('rootPopupRequestInformationBroadcast'); const {popupId, frameId: parentFrameId} = await rootPopupInformationPromise; const getFrameOffset = frameOffsetForwarder.getOffset.bind(frameOffsetForwarder); @@ -48,7 +45,7 @@ async function createIframePopupProxy(frameOffsetForwarder, setDisabled) { } async function getOrCreatePopup(depth) { - const {frameId} = await apiFrameInformationGet(); + const {frameId} = await api.frameInformationGet(); if (typeof frameId !== 'number') { const error = new Error('Failed to get frameId'); yomichan.logError(error); @@ -71,7 +68,7 @@ async function createPopupProxy(depth, id, parentFrameId) { } (async () => { - apiForwardLogsToBackend(); + api.forwardLogsToBackend(); await yomichan.prepare(); const data = window.frontendInitializationData || {}; @@ -112,7 +109,7 @@ async function createPopupProxy(depth, id, parentFrameId) { depth: isSearchPage ? 0 : depth, url: proxy ? await getPopupProxyUrl() : window.location.href }; - const options = await apiOptionsGet(optionsContext); + const options = await api.optionsGet(optionsContext); if (!proxy && frameOffsetForwarder === null) { frameOffsetForwarder = new FrameOffsetForwarder(); diff --git a/ext/fg/js/float-main.js b/ext/fg/js/float-main.js index 20771910..249b4dbe 100644 --- a/ext/fg/js/float-main.js +++ b/ext/fg/js/float-main.js @@ -17,8 +17,7 @@ /* global * DisplayFloat - * apiForwardLogsToBackend - * apiOptionsGet + * api * dynamicLoader */ @@ -38,7 +37,7 @@ async function popupNestedInitialize(id, depth, parentFrameId, url) { const applyOptions = async () => { const optionsContext = {depth, url}; - const options = await apiOptionsGet(optionsContext); + const options = await api.optionsGet(optionsContext); const maxPopupDepthExceeded = !(typeof depth === 'number' && depth < options.scanning.popupNestingMaxDepth); if (maxPopupDepthExceeded || optionsApplied) { return; } @@ -55,7 +54,7 @@ async function popupNestedInitialize(id, depth, parentFrameId, url) { } (async () => { - apiForwardLogsToBackend(); + api.forwardLogsToBackend(); const display = new DisplayFloat(); await display.prepare(); })(); diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 845bf7f6..12d27a9f 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -17,8 +17,7 @@ /* global * Display - * apiBroadcastTab - * apiSendMessageToFrame + * api * popupNestedInitialize */ @@ -61,7 +60,7 @@ class DisplayFloat extends Display { yomichan.on('orphaned', this.onOrphaned.bind(this)); window.addEventListener('message', this.onMessage.bind(this), false); - apiBroadcastTab('popupPrepared', {secret: this._secret}); + api.broadcastTab('popupPrepared', {secret: this._secret}); } onError(error) { @@ -153,7 +152,7 @@ class DisplayFloat extends Display { }, 2000 ); - apiBroadcastTab('requestDocumentInformationBroadcast', {uniqueId}); + api.broadcastTab('requestDocumentInformationBroadcast', {uniqueId}); const {title} = await promise; return title; @@ -176,7 +175,7 @@ class DisplayFloat extends Display { const {token, frameId} = params; this._token = token; - apiSendMessageToFrame(frameId, 'popupInitialized', {secret, token}); + api.sendMessageToFrame(frameId, 'popupInitialized', {secret, token}); } async _configure({messageId, frameId, popupId, optionsContext, childrenSupported, scale}) { @@ -192,7 +191,7 @@ class DisplayFloat extends Display { this.setContentScale(scale); - apiSendMessageToFrame(frameId, 'popupConfigured', {messageId}); + api.sendMessageToFrame(frameId, 'popupConfigured', {messageId}); } _isMessageAuthenticated(message) { diff --git a/ext/fg/js/frame-offset-forwarder.js b/ext/fg/js/frame-offset-forwarder.js index 9b68d34e..10e3b5be 100644 --- a/ext/fg/js/frame-offset-forwarder.js +++ b/ext/fg/js/frame-offset-forwarder.js @@ -16,7 +16,7 @@ */ /* global - * apiBroadcastTab + * api */ class FrameOffsetForwarder { @@ -161,6 +161,6 @@ class FrameOffsetForwarder { } _forwardFrameOffsetOrigin(offset, uniqueId) { - apiBroadcastTab('frameOffset', {offset, uniqueId}); + api.broadcastTab('frameOffset', {offset, uniqueId}); } } diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index 575dc413..a263f3e6 100644 --- a/ext/fg/js/frontend.js +++ b/ext/fg/js/frontend.js @@ -17,11 +17,7 @@ /* global * TextScanner - * apiBroadcastTab - * apiGetZoom - * apiKanjiFind - * apiOptionsGet - * apiTermsFind + * api * docSentenceExtract */ @@ -69,7 +65,7 @@ class Frontend { async prepare() { try { await this.updateOptions(); - const {zoomFactor} = await apiGetZoom(); + const {zoomFactor} = await api.getZoom(); this._pageZoomFactor = zoomFactor; window.addEventListener('resize', this._onResize.bind(this), false); @@ -120,7 +116,7 @@ class Frontend { async updateOptions() { const optionsContext = await this.getOptionsContext(); - this._options = await apiOptionsGet(optionsContext); + this._options = await api.optionsGet(optionsContext); this._textScanner.setOptions(this._options); this._updateTextScannerEnabled(); @@ -261,7 +257,7 @@ class Frontend { const searchText = this._textScanner.getTextSourceContent(textSource, this._options.scanning.length); if (searchText.length === 0) { return null; } - const {definitions, length} = await apiTermsFind(searchText, {}, optionsContext); + const {definitions, length} = await api.termsFind(searchText, {}, optionsContext); if (definitions.length === 0) { return null; } textSource.setEndOffset(length); @@ -273,7 +269,7 @@ class Frontend { const searchText = this._textScanner.getTextSourceContent(textSource, 1); if (searchText.length === 0) { return null; } - const definitions = await apiKanjiFind(searchText, optionsContext); + const definitions = await api.kanjiFind(searchText, optionsContext); if (definitions.length === 0) { return null; } textSource.setEndOffset(1); @@ -351,12 +347,12 @@ class Frontend { _broadcastRootPopupInformation() { if (!this._popup.isProxy() && this._popup.depth === 0 && this._popup.frameId === 0) { - apiBroadcastTab('rootPopupInformation', {popupId: this._popup.id, frameId: this._popup.frameId}); + api.broadcastTab('rootPopupInformation', {popupId: this._popup.id, frameId: this._popup.frameId}); } } _broadcastDocumentInformation(uniqueId) { - apiBroadcastTab('documentInformationBroadcast', { + api.broadcastTab('documentInformationBroadcast', { uniqueId, frameId: this._popup.frameId, title: document.title diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index b7d4b57e..a8188143 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -17,7 +17,7 @@ /* global * DOM - * apiOptionsGet + * api * dynamicLoader */ @@ -89,7 +89,7 @@ class Popup { this._optionsContext = optionsContext; this._previousOptionsContextSource = source; - this._options = await apiOptionsGet(optionsContext); + this._options = await api.optionsGet(optionsContext); this.updateTheme(); this._invokeApi('setOptionsContext', {optionsContext}); -- cgit v1.2.3 From 4d2e5b93f4634bd5dfe55c305e441f75f0e0690e Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 24 May 2020 13:37:23 -0400 Subject: Style adjustments (#537) * Remove newlines for term-definition-item-template * Update how action button icons are styled * Fix spacing * Group text colors together * Correct image styles * Fix missing --- ext/bg/search.html | 4 ++-- ext/fg/float.html | 4 ++-- ext/mixed/css/display.css | 46 ++++++++++++++++++++++++++++------------ ext/mixed/display-templates.html | 26 ++++++++++------------- 4 files changed, 48 insertions(+), 32 deletions(-) (limited to 'ext/fg') diff --git a/ext/bg/search.html b/ext/bg/search.html index f3f156d8..c0721e5c 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -54,8 +54,8 @@
diff --git a/ext/fg/float.html b/ext/fg/float.html index 89952524..e9f5acae 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -17,8 +17,8 @@
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index 8b567173..a92775b8 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -27,13 +27,12 @@ --default-text-color: #333333; --light-text-color: #777777; --very-light-text-color: #999999; + --popuplar-kanji-text-color: #0275d8; --light-border-color: #eeeeee; --medium-border-color: #dddddd; --dark-border-color: #777777; - --popuplar-kanji-text-color: #0275d8; - --pitch-accent-annotation-color: #000000; --tag-text-color: #ffffff; @@ -58,13 +57,12 @@ --default-text-color: #d4d4d4; --light-text-color: #888888; --very-light-text-color: #666666; + --popuplar-kanji-text-color: #0275d8; --light-border-color: #2f2f2f; --medium-border-color: #3f3f3f; --dark-border-color: #888888; - --popuplar-kanji-text-color: #0275d8; - --pitch-accent-annotation-color: #ffffff; --tag-text-color: #e1e1e1; @@ -173,14 +171,14 @@ h2 { display: flex; } -.navigation-header:not([data-has-previous=true]) .navigation-header-actions .action-previous>img, -.navigation-header:not([data-has-next=true]) .navigation-header-actions .action-next>img { +.navigation-header:not([data-has-previous=true]) .navigation-header-actions .action-button.action-previous:before, +.navigation-header:not([data-has-next=true]) .navigation-header-actions .action-button.action-next:before { opacity: 0.25; -webkit-filter: grayscale(100%); filter: grayscale(100%); } -.action-next>img { +.action-button.action-next:before { transform: scaleX(-1); } @@ -234,18 +232,18 @@ h2 { padding-right: 0.72em; } -.actions .disabled { +.action-button.disabled { pointer-events: none; cursor: default; } -.actions .disabled img { +.action-button.disabled:before { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.25; } -.actions .pending { +.action-button.pending { visibility: hidden; } @@ -274,10 +272,32 @@ button.action-button { cursor: pointer; } -.icon-image { +.action-button[data-icon]:before { + content: ""; width: 1.14285714em; /* 14px => 16px */ height: 1.14285714em; /* 14px => 16px */ display: block; + background-color: transparent; + background-repeat: no-repeat; +} + +.action-button[data-icon=entry-current]:before { + background-image: url("/mixed/img/entry-current.svg"); +} +.action-button[data-icon=view-note]:before { + background-image: url("/mixed/img/view-note.svg"); +} +.action-button[data-icon=add-term-kanji]:before { + background-image: url("/mixed/img/add-term-kanji.svg"); +} +.action-button[data-icon=add-term-kana]:before { + background-image: url("/mixed/img/add-term-kana.svg"); +} +.action-button[data-icon=play-audio]:before { + background-image: url("/mixed/img/play-audio.svg"); +} +.action-button[data-icon=source-term]:before { + background-image: url("/mixed/img/source-term.svg"); } .term-expression .kanji-link { @@ -358,7 +378,7 @@ button.action-button { display: block; } -.tag-list>.tag:not(:last-child) { +.tag-list>.tag { margin-right: 0.375em; } @@ -505,7 +525,7 @@ button.action-button { } .term-definition-disambiguation-list:after { - content: " only)"; + content: " only) "; } .term-definition-disambiguation+.term-definition-disambiguation:before { diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html index fc0558a9..fed252a1 100644 --- a/ext/mixed/display-templates.html +++ b/ext/mixed/display-templates.html @@ -5,11 +5,11 @@
- - - - - + + + + +
@@ -24,15 +24,11 @@ 

 

 
-
+
 
 
 
@@ -55,9 +51,9 @@
         

             

                 

-                    
-                    
-                    
+                    
+                    
+                    
                 

                 

             

@@ -92,7 +88,7 @@
 
 
 
-
+
 
 
 
-- 
cgit v1.2.3


From 3c4c82dcfc66a1b24a3df3d4b15283235c72cf66 Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Sun, 24 May 2020 14:00:32 -0400
Subject: Ensure single popup factory (#554)

* Add createPopupFactory

* Ensure only a single PopupFactory is generated
---
 ext/fg/js/content-script-main.js | 42 +++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 16 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/fg/js/content-script-main.js b/ext/fg/js/content-script-main.js
index b057ae3d..cebda2d7 100644
--- a/ext/fg/js/content-script-main.js
+++ b/ext/fg/js/content-script-main.js
@@ -24,6 +24,19 @@
  * api
  */
 
+async function createPopupFactory() {
+    const {frameId} = await api.frameInformationGet();
+    if (typeof frameId !== 'number') {
+        const error = new Error('Failed to get frameId');
+        yomichan.logError(error);
+        throw error;
+    }
+
+    const popupFactory = new PopupFactory(frameId);
+    await popupFactory.prepare();
+    return popupFactory;
+}
+
 async function createIframePopupProxy(frameOffsetForwarder, setDisabled) {
     const rootPopupInformationPromise = yomichan.getTemporaryListenerResult(
         chrome.runtime.onMessage,
@@ -44,20 +57,8 @@ async function createIframePopupProxy(frameOffsetForwarder, setDisabled) {
     return popup;
 }
 
-async function getOrCreatePopup(depth) {
-    const {frameId} = await api.frameInformationGet();
-    if (typeof frameId !== 'number') {
-        const error = new Error('Failed to get frameId');
-        yomichan.logError(error);
-        throw error;
-    }
-
-    const popupFactory = new PopupFactory(frameId);
-    await popupFactory.prepare();
-
-    const popup = popupFactory.getOrCreatePopup(null, null, depth);
-
-    return popup;
+async function getOrCreatePopup(depth, popupFactory) {
+    return popupFactory.getOrCreatePopup(null, null, depth);
 }
 
 async function createPopupProxy(depth, id, parentFrameId) {
@@ -85,6 +86,7 @@ async function createPopupProxy(depth, id, parentFrameId) {
     let frontend = null;
     let frontendPreparePromise = null;
     let frameOffsetForwarder = null;
+    let popupFactoryPromise = null;
 
     let iframePopupsInRootFrameAvailable = true;
 
@@ -124,8 +126,16 @@ async function createPopupProxy(depth, id, parentFrameId) {
             popup = popups.proxy || await createPopupProxy(depth, id, parentFrameId);
             popups.proxy = popup;
         } else {
-            popup = popups.normal || await getOrCreatePopup(depth);
-            popups.normal = popup;
+            popup = popups.normal;
+            if (!popup) {
+                if (popupFactoryPromise === null) {
+                    popupFactoryPromise = createPopupFactory();
+                }
+                const popupFactory = await popupFactoryPromise;
+                const popupNormal = await getOrCreatePopup(depth, popupFactory);
+                popups.normal = popupNormal;
+                popup = popupNormal;
+            }
         }
 
         if (frontend === null) {
-- 
cgit v1.2.3


From 9767b765536279023045ed4280b12d297ec78f0a Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Sun, 7 Jun 2020 21:40:11 -0400
Subject: Use cross frame API (#553)

* Use new CrossFrameAPI for popup proxy communication

* Remove use of old cross-frame communication classes

* Remove use of old cross-frame communication files

* Make the crossFrame object a member of the api object
---
 ext/bg/background.html             |   1 -
 ext/bg/context.html                |   1 +
 ext/bg/js/backend-api-forwarder.js |  44 -------------
 ext/bg/js/backend.js               |   4 --
 ext/bg/js/search-main.js           |   1 -
 ext/bg/search.html                 |   1 +
 ext/bg/settings-popup-preview.html |   2 +-
 ext/bg/settings.html               |   1 +
 ext/fg/float.html                  |   1 +
 ext/fg/js/float-main.js            |   1 -
 ext/fg/js/frontend-api-receiver.js |  76 ----------------------
 ext/fg/js/frontend-api-sender.js   | 128 -------------------------------------
 ext/fg/js/popup-factory.js         |   7 +-
 ext/fg/js/popup-proxy.js           |   6 +-
 ext/manifest.json                  |   3 +-
 ext/mixed/js/api.js                |  18 +++++-
 16 files changed, 29 insertions(+), 266 deletions(-)
 delete mode 100644 ext/bg/js/backend-api-forwarder.js
 delete mode 100644 ext/fg/js/frontend-api-receiver.js
 delete mode 100644 ext/fg/js/frontend-api-sender.js

(limited to 'ext/fg')

diff --git a/ext/bg/background.html b/ext/bg/background.html
index 53e8b140..d51858a7 100644
--- a/ext/bg/background.html
+++ b/ext/bg/background.html
@@ -28,7 +28,6 @@
         
         
         
-        
         
         
         
diff --git a/ext/bg/context.html b/ext/bg/context.html
index 93012d70..89695d0e 100644
--- a/ext/bg/context.html
+++ b/ext/bg/context.html
@@ -180,6 +180,7 @@
         

 
         
+        
         
         
 
diff --git a/ext/bg/js/backend-api-forwarder.js b/ext/bg/js/backend-api-forwarder.js
deleted file mode 100644
index 4ac12730..00000000
--- a/ext/bg/js/backend-api-forwarder.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * Copyright (C) 2019-2020  Yomichan Authors
- *
- * 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 .
- */
-
-
-class BackendApiForwarder {
-    prepare() {
-        chrome.runtime.onConnect.addListener(this._onConnect.bind(this));
-    }
-
-    _onConnect(port) {
-        if (port.name !== 'backend-api-forwarder') { return; }
-
-        let tabId;
-        if (!(
-            port.sender &&
-            port.sender.tab &&
-            (typeof (tabId = port.sender.tab.id)) === 'number'
-        )) {
-            port.disconnect();
-            return;
-        }
-
-        const forwardPort = chrome.tabs.connect(tabId, {name: 'frontend-api-receiver'});
-
-        port.onMessage.addListener((message) => forwardPort.postMessage(message));
-        forwardPort.onMessage.addListener((message) => port.postMessage(message));
-        port.onDisconnect.addListener(() => forwardPort.disconnect());
-        forwardPort.onDisconnect.addListener(() => port.disconnect());
-    }
-}
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 5eb7982d..7971d16f 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -20,7 +20,6 @@
  * AnkiNoteBuilder
  * AudioSystem
  * AudioUriBuilder
- * BackendApiForwarder
  * ClipboardMonitor
  * Database
  * DictionaryImporter
@@ -76,9 +75,6 @@ class Backend {
 
         this.popupWindow = null;
 
-        const apiForwarder = new BackendApiForwarder();
-        apiForwarder.prepare();
-
         this._defaultBrowserActionTitle = null;
         this._isPrepared = false;
         this._prepareError = false;
diff --git a/ext/bg/js/search-main.js b/ext/bg/js/search-main.js
index 3e089594..f18d6d88 100644
--- a/ext/bg/js/search-main.js
+++ b/ext/bg/js/search-main.js
@@ -24,7 +24,6 @@
 async function injectSearchFrontend() {
     await dynamicLoader.loadScripts([
         '/mixed/js/text-scanner.js',
-        '/fg/js/frontend-api-receiver.js',
         '/fg/js/frame-offset-forwarder.js',
         '/fg/js/popup.js',
         '/fg/js/popup-factory.js',
diff --git a/ext/bg/search.html b/ext/bg/search.html
index c0721e5c..de08cdae 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -71,6 +71,7 @@
         
 
         
+        
         
         
         
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html
index 2f0b841b..fe92f24f 100644
--- a/ext/bg/settings-popup-preview.html
+++ b/ext/bg/settings-popup-preview.html
@@ -119,13 +119,13 @@
         
 
         
+        
         
         
         
         
 
         
-        
         
         
         
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 7c295f0d..a530534c 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -1121,6 +1121,7 @@
         
 
         
+        
         
         
         
diff --git a/ext/fg/float.html b/ext/fg/float.html
index e9f5acae..17dbcc6d 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -40,6 +40,7 @@
         
 
         
+        
         
         
         
diff --git a/ext/fg/js/float-main.js b/ext/fg/js/float-main.js
index 249b4dbe..2ec334c8 100644
--- a/ext/fg/js/float-main.js
+++ b/ext/fg/js/float-main.js
@@ -24,7 +24,6 @@
 async function injectPopupNested() {
     await dynamicLoader.loadScripts([
         '/mixed/js/text-scanner.js',
-        '/fg/js/frontend-api-sender.js',
         '/fg/js/popup.js',
         '/fg/js/popup-proxy.js',
         '/fg/js/frontend.js',
diff --git a/ext/fg/js/frontend-api-receiver.js b/ext/fg/js/frontend-api-receiver.js
deleted file mode 100644
index 3fa9e8b6..00000000
--- a/ext/fg/js/frontend-api-receiver.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * Copyright (C) 2019-2020  Yomichan Authors
- *
- * 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 .
- */
-
-
-class FrontendApiReceiver {
-    constructor(source, messageHandlers) {
-        this._source = source;
-        this._messageHandlers = messageHandlers;
-    }
-
-    prepare() {
-        chrome.runtime.onConnect.addListener(this._onConnect.bind(this));
-    }
-
-    _onConnect(port) {
-        if (port.name !== 'frontend-api-receiver') { return; }
-
-        port.onMessage.addListener(this._onMessage.bind(this, port));
-    }
-
-    _onMessage(port, {id, action, params, target, senderId}) {
-        if (target !== this._source) { return; }
-
-        const messageHandler = this._messageHandlers.get(action);
-        if (typeof messageHandler === 'undefined') { return; }
-
-        const {handler, async} = messageHandler;
-
-        this._sendAck(port, id, senderId);
-        if (async) {
-            this._invokeHandlerAsync(handler, params, port, id, senderId);
-        } else {
-            this._invokeHandler(handler, params, port, id, senderId);
-        }
-    }
-
-    _invokeHandler(handler, params, port, id, senderId) {
-        try {
-            const result = handler(params);
-            this._sendResult(port, id, senderId, {result});
-        } catch (error) {
-            this._sendResult(port, id, senderId, {error: errorToJson(error)});
-        }
-    }
-
-    async _invokeHandlerAsync(handler, params, port, id, senderId) {
-        try {
-            const result = await handler(params);
-            this._sendResult(port, id, senderId, {result});
-        } catch (error) {
-            this._sendResult(port, id, senderId, {error: errorToJson(error)});
-        }
-    }
-
-    _sendAck(port, id, senderId) {
-        port.postMessage({type: 'ack', id, senderId});
-    }
-
-    _sendResult(port, id, senderId, data) {
-        port.postMessage({type: 'result', id, senderId, data});
-    }
-}
diff --git a/ext/fg/js/frontend-api-sender.js b/ext/fg/js/frontend-api-sender.js
deleted file mode 100644
index 4dcde638..00000000
--- a/ext/fg/js/frontend-api-sender.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/*
- * Copyright (C) 2019-2020  Yomichan Authors
- *
- * 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 .
- */
-
-
-class FrontendApiSender {
-    constructor(target) {
-        this._target = target;
-        this._senderId = yomichan.generateId(16);
-        this._ackTimeout = 3000; // 3 seconds
-        this._responseTimeout = 10000; // 10 seconds
-        this._callbacks = new Map();
-        this._disconnected = false;
-        this._nextId = 0;
-        this._port = null;
-    }
-
-    invoke(action, params) {
-        if (this._disconnected) {
-            // attempt to reconnect the next time
-            this._disconnected = false;
-            return Promise.reject(new Error('Disconnected'));
-        }
-
-        if (this._port === null) {
-            this._createPort();
-        }
-
-        const id = `${this._nextId}`;
-        ++this._nextId;
-
-        return new Promise((resolve, reject) => {
-            const info = {id, resolve, reject, ack: false, timer: null};
-            this._callbacks.set(id, info);
-            info.timer = setTimeout(() => this._onError(id, 'Timeout (ack)'), this._ackTimeout);
-
-            this._port.postMessage({id, action, params, target: this._target, senderId: this._senderId});
-        });
-    }
-
-    _createPort() {
-        this._port = chrome.runtime.connect(null, {name: 'backend-api-forwarder'});
-        this._port.onDisconnect.addListener(this._onDisconnect.bind(this));
-        this._port.onMessage.addListener(this._onMessage.bind(this));
-    }
-
-    _onMessage({type, id, data, senderId}) {
-        if (senderId !== this._senderId) { return; }
-        switch (type) {
-            case 'ack':
-                this._onAck(id);
-                break;
-            case 'result':
-                this._onResult(id, data);
-                break;
-        }
-    }
-
-    _onDisconnect() {
-        this._disconnected = true;
-        this._port = null;
-
-        for (const id of this._callbacks.keys()) {
-            this._onError(id, 'Disconnected');
-        }
-    }
-
-    _onAck(id) {
-        const info = this._callbacks.get(id);
-        if (typeof info === 'undefined') {
-            yomichan.logWarning(new Error(`ID ${id} not found for ack`));
-            return;
-        }
-
-        if (info.ack) {
-            yomichan.logWarning(new Error(`Request ${id} already ack'd`));
-            return;
-        }
-
-        info.ack = true;
-        clearTimeout(info.timer);
-        info.timer = setTimeout(() => this._onError(id, 'Timeout (response)'), this._responseTimeout);
-    }
-
-    _onResult(id, data) {
-        const info = this._callbacks.get(id);
-        if (typeof info === 'undefined') {
-            yomichan.logWarning(new Error(`ID ${id} not found`));
-            return;
-        }
-
-        if (!info.ack) {
-            yomichan.logWarning(new Error(`Request ${id} not ack'd`));
-            return;
-        }
-
-        this._callbacks.delete(id);
-        clearTimeout(info.timer);
-        info.timer = null;
-
-        if (typeof data.error !== 'undefined') {
-            info.reject(jsonToError(data.error));
-        } else {
-            info.resolve(data.result);
-        }
-    }
-
-    _onError(id, reason) {
-        const info = this._callbacks.get(id);
-        if (typeof info === 'undefined') { return; }
-        this._callbacks.delete(id);
-        info.timer = null;
-        info.reject(new Error(reason));
-    }
-}
diff --git a/ext/fg/js/popup-factory.js b/ext/fg/js/popup-factory.js
index b10acbaf..b5997253 100644
--- a/ext/fg/js/popup-factory.js
+++ b/ext/fg/js/popup-factory.js
@@ -16,8 +16,8 @@
  */
 
 /* global
- * FrontendApiReceiver
  * Popup
+ * api
  */
 
 class PopupFactory {
@@ -29,7 +29,7 @@ class PopupFactory {
     // Public functions
 
     async prepare() {
-        const apiReceiver = new FrontendApiReceiver(`popup-factory#${this._frameId}`, new Map([
+        api.crossFrame.registerHandlers([
             ['getOrCreatePopup',   {async: false, handler: this._onApiGetOrCreatePopup.bind(this)}],
             ['setOptionsContext',  {async: true,  handler: this._onApiSetOptionsContext.bind(this)}],
             ['hide',               {async: false, handler: this._onApiHide.bind(this)}],
@@ -41,8 +41,7 @@ class PopupFactory {
             ['clearAutoPlayTimer', {async: false, handler: this._onApiClearAutoPlayTimer.bind(this)}],
             ['setContentScale',    {async: false, handler: this._onApiSetContentScale.bind(this)}],
             ['getUrl',             {async: false, handler: this._onApiGetUrl.bind(this)}]
-        ]));
-        apiReceiver.prepare();
+        ]);
     }
 
     getOrCreatePopup(id=null, parentId=null, depth=null) {
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 82da839a..3387d941 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -16,7 +16,7 @@
  */
 
 /* global
- * FrontendApiSender
+ * api
  */
 
 class PopupProxy {
@@ -24,7 +24,7 @@ class PopupProxy {
         this._id = id;
         this._depth = depth;
         this._parentPopupId = parentPopupId;
-        this._apiSender = new FrontendApiSender(`popup-factory#${parentFrameId}`);
+        this._parentFrameId = parentFrameId;
         this._getFrameOffset = getFrameOffset;
         this._setDisabled = setDisabled;
 
@@ -111,7 +111,7 @@ class PopupProxy {
     // Private
 
     _invoke(action, params={}) {
-        return this._apiSender.invoke(action, params);
+        return api.crossFrame.invoke(this._parentFrameId, action, params);
     }
 
     async _updateFrameOffset() {
diff --git a/ext/manifest.json b/ext/manifest.json
index 6db257d7..75334675 100644
--- a/ext/manifest.json
+++ b/ext/manifest.json
@@ -36,13 +36,12 @@
         "matches": ["http://*/*", "https://*/*", "file://*/*"],
         "js": [
             "mixed/js/core.js",
+            "mixed/js/comm.js",
             "mixed/js/dom.js",
             "mixed/js/api.js",
             "mixed/js/dynamic-loader.js",
             "mixed/js/text-scanner.js",
             "fg/js/document.js",
-            "fg/js/frontend-api-sender.js",
-            "fg/js/frontend-api-receiver.js",
             "fg/js/popup.js",
             "fg/js/source.js",
             "fg/js/popup-factory.js",
diff --git a/ext/mixed/js/api.js b/ext/mixed/js/api.js
index 5e3195d6..c54196e2 100644
--- a/ext/mixed/js/api.js
+++ b/ext/mixed/js/api.js
@@ -15,10 +15,23 @@
  * along with this program.  If not, see .
  */
 
+/* global
+ * CrossFrameAPI
+ */
+
 const api = (() => {
     class API {
         constructor() {
             this._forwardLogsToBackendEnabled = false;
+            this._crossFrame = new CrossFrameAPI();
+        }
+
+        get crossFrame() {
+            return this._crossFrame;
+        }
+
+        prepare() {
+            this._crossFrame.prepare();
         }
 
         forwardLogsToBackend() {
@@ -331,5 +344,8 @@ const api = (() => {
         }
     }
 
-    return new API();
+    // eslint-disable-next-line no-shadow
+    const api = new API();
+    api.prepare();
+    return api;
 })();
-- 
cgit v1.2.3


From b612bd8b8dc62a83e6800b052cc5f673a287dbe8 Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Sun, 14 Jun 2020 14:06:52 -0400
Subject: PopupProxy refactor (#609)

* Remove setDisabled member; replace with an event

* Pass frameOffsetForwarder directly to PopupProxy

* Replace .start with .prepare

* Make onMessage private

* Make message safer and handle unexpected inputs
---
 ext/fg/js/content-script-main.js    |  7 +++----
 ext/fg/js/frame-offset-forwarder.js | 30 +++++++++++++++++++-----------
 ext/fg/js/popup-proxy.js            | 18 +++++++++---------
 3 files changed, 31 insertions(+), 24 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/fg/js/content-script-main.js b/ext/fg/js/content-script-main.js
index cebda2d7..c31cde3f 100644
--- a/ext/fg/js/content-script-main.js
+++ b/ext/fg/js/content-script-main.js
@@ -49,9 +49,8 @@ async function createIframePopupProxy(frameOffsetForwarder, setDisabled) {
     api.broadcastTab('rootPopupRequestInformationBroadcast');
     const {popupId, frameId: parentFrameId} = await rootPopupInformationPromise;
 
-    const getFrameOffset = frameOffsetForwarder.getOffset.bind(frameOffsetForwarder);
-
-    const popup = new PopupProxy(popupId, 0, null, parentFrameId, getFrameOffset, setDisabled);
+    const popup = new PopupProxy(popupId, 0, null, parentFrameId, frameOffsetForwarder);
+    popup.on('offsetNotFound', setDisabled);
     await popup.prepare();
 
     return popup;
@@ -115,7 +114,7 @@ async function createPopupProxy(depth, id, parentFrameId) {
 
         if (!proxy && frameOffsetForwarder === null) {
             frameOffsetForwarder = new FrameOffsetForwarder();
-            frameOffsetForwarder.start();
+            frameOffsetForwarder.prepare();
         }
 
         let popup;
diff --git a/ext/fg/js/frame-offset-forwarder.js b/ext/fg/js/frame-offset-forwarder.js
index 10e3b5be..f692364a 100644
--- a/ext/fg/js/frame-offset-forwarder.js
+++ b/ext/fg/js/frame-offset-forwarder.js
@@ -21,8 +21,7 @@
 
 class FrameOffsetForwarder {
     constructor() {
-        this._started = false;
-
+        this._isPrepared = false;
         this._cacheMaxSize = 1000;
         this._frameCache = new Set();
         this._unreachableContentWindowCache = new Set();
@@ -38,10 +37,10 @@ class FrameOffsetForwarder {
         ]);
     }
 
-    start() {
-        if (this._started) { return; }
-        window.addEventListener('message', this.onMessage.bind(this), false);
-        this._started = true;
+    prepare() {
+        if (this._isPrepared) { return; }
+        window.addEventListener('message', this._onMessage.bind(this), false);
+        this._isPrepared = true;
     }
 
     async getOffset() {
@@ -69,11 +68,20 @@ class FrameOffsetForwarder {
         return offset;
     }
 
-    onMessage(e) {
-        const {action, params} = e.data;
-        const handler = this._windowMessageHandlers.get(action);
-        if (typeof handler !== 'function') { return; }
-        handler(params, e);
+    // Private
+
+    _onMessage(event) {
+        const data = event.data;
+        if (data === null || typeof data !== 'object') { return; }
+
+        try {
+            const {action, params} = event.data;
+            const handler = this._windowMessageHandlers.get(action);
+            if (typeof handler !== 'function') { return; }
+            handler(params, event);
+        } catch (e) {
+            // NOP
+        }
     }
 
     _onGetFrameOffset(offset, uniqueId, e) {
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 3387d941..14ddcafb 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -19,14 +19,14 @@
  * api
  */
 
-class PopupProxy {
-    constructor(id, depth, parentPopupId, parentFrameId, getFrameOffset=null, setDisabled=null) {
+class PopupProxy extends EventDispatcher {
+    constructor(id, depth, parentPopupId, parentFrameId, frameOffsetForwarder=null) {
+        super();
         this._id = id;
         this._depth = depth;
         this._parentPopupId = parentPopupId;
         this._parentFrameId = parentFrameId;
-        this._getFrameOffset = getFrameOffset;
-        this._setDisabled = setDisabled;
+        this._frameOffsetForwarder = frameOffsetForwarder;
 
         this._frameOffset = null;
         this._frameOffsetPromise = null;
@@ -75,7 +75,7 @@ class PopupProxy {
     }
 
     async containsPoint(x, y) {
-        if (this._getFrameOffset !== null) {
+        if (this._frameOffsetForwarder !== null) {
             await this._updateFrameOffset();
             [x, y] = this._applyFrameOffset(x, y);
         }
@@ -84,7 +84,7 @@ class PopupProxy {
 
     async showContent(elementRect, writingMode, type, details, context) {
         let {x, y, width, height} = elementRect;
-        if (this._getFrameOffset !== null) {
+        if (this._frameOffsetForwarder !== null) {
             await this._updateFrameOffset();
             [x, y] = this._applyFrameOffset(x, y);
         }
@@ -134,12 +134,12 @@ class PopupProxy {
     }
 
     async _updateFrameOffsetInner(now) {
-        this._frameOffsetPromise = this._getFrameOffset();
+        this._frameOffsetPromise = this._frameOffsetForwarder.getOffset();
         try {
             const offset = await this._frameOffsetPromise;
             this._frameOffset = offset !== null ? offset : [0, 0];
-            if (offset === null && this._setDisabled !== null) {
-                this._setDisabled();
+            if (offset === null) {
+                this.trigger('offsetNotFound');
                 return;
             }
             this._frameOffsetUpdatedAt = now;
-- 
cgit v1.2.3


From b4a617cac3dea5f5efcd95514fa680fbcd7dd9fb Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Sun, 14 Jun 2020 15:14:47 -0400
Subject: Ignore getZoom errors (#604)

---
 ext/fg/js/frontend.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index a263f3e6..70bd8a48 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -65,8 +65,12 @@ class Frontend {
     async prepare() {
         try {
             await this.updateOptions();
-            const {zoomFactor} = await api.getZoom();
-            this._pageZoomFactor = zoomFactor;
+            try {
+                const {zoomFactor} = await api.getZoom();
+                this._pageZoomFactor = zoomFactor;
+            } catch (e) {
+                // Ignore exceptions which may occur due to being on an unsupported page (e.g. about:blank)
+            }
 
             window.addEventListener('resize', this._onResize.bind(this), false);
 
-- 
cgit v1.2.3


From 3db7b3a92569e2789776480e776f454d084091d9 Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Sun, 21 Jun 2020 15:52:43 -0400
Subject: Add option to use the unsecure frame URL (#618)

---
 ext/bg/data/options-schema.json | 7 ++++++-
 ext/bg/js/options.js            | 3 ++-
 ext/bg/settings.html            | 4 ++++
 ext/fg/js/popup.js              | 8 +++++++-
 4 files changed, 19 insertions(+), 3 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json
index 656da989..0379fa75 100644
--- a/ext/bg/data/options-schema.json
+++ b/ext/bg/data/options-schema.json
@@ -109,7 +109,8 @@
                                     "showPitchAccentDownstepNotation",
                                     "showPitchAccentPositionNotation",
                                     "showPitchAccentGraph",
-                                    "showIframePopupsInRootFrame"
+                                    "showIframePopupsInRootFrame",
+                                    "unsecurePopupFrameUrl"
                                 ],
                                 "properties": {
                                     "enable": {
@@ -247,6 +248,10 @@
                                     "showIframePopupsInRootFrame": {
                                         "type": "boolean",
                                         "default": false
+                                    },
+                                    "unsecurePopupFrameUrl": {
+                                        "type": "boolean",
+                                        "default": false
                                     }
                                 }
                             },
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 35fdde82..97368a0b 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -176,7 +176,8 @@ function profileOptionsCreateDefaults() {
             showPitchAccentDownstepNotation: true,
             showPitchAccentPositionNotation: true,
             showPitchAccentGraph: false,
-            showIframePopupsInRootFrame: false
+            showIframePopupsInRootFrame: false,
+            unsecurePopupFrameUrl: false
         },
 
         audio: {
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index a530534c..118a13b9 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -182,6 +182,10 @@
                     
                 
 
+                

+                    
+                

+
                 

                     
                 

diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index a8188143..af24989f 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -328,12 +328,18 @@ class Popup {
     async _createInjectPromise() {
         this._injectStyles();
 
+        const unsecurePopupFrameUrl = (this._options !== null && this._options.general.unsecurePopupFrameUrl);
         const {secret, token} = await this._initializeFrame(this._frame, this._targetOrigin, this._frameId, (frame) => {
             frame.removeAttribute('src');
             frame.removeAttribute('srcdoc');
             this._observeFullscreen(true);
             this._onFullscreenChanged();
-            frame.contentDocument.location.href = chrome.runtime.getURL('/fg/float.html');
+            const url = chrome.runtime.getURL('/fg/float.html');
+            if (unsecurePopupFrameUrl) {
+                frame.setAttribute('src', url);
+            } else {
+                frame.contentDocument.location.href = url;
+            }
         });
         this._frameSecret = secret;
         this._frameToken = token;
-- 
cgit v1.2.3


From e23504613f8526b90a497512c086ed48e66cde95 Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Sun, 21 Jun 2020 16:07:51 -0400
Subject: Use DOMTextScanner (#536)

* Use DOMTextScanner instead of TextSourceRange.seek*

* Move getNodesInRange to dom.js

* Move anyNodeMatchesSelector to dom.js

* Remove unused functions

* Update tests

* Add layoutAwareScan option

* Use layoutAwareScan for source and sentence scanning

* Remove unused IGNORE_TEXT_PATTERN
---
 ext/bg/data/options-schema.json    |   7 +-
 ext/bg/js/options.js               |   3 +-
 ext/bg/js/search-query-parser.js   |   8 +-
 ext/bg/search.html                 |   1 +
 ext/bg/settings-popup-preview.html |   1 +
 ext/bg/settings.html               |   4 +
 ext/fg/float.html                  |   1 +
 ext/fg/js/document.js              |  11 +-
 ext/fg/js/frontend.js              |  14 ++-
 ext/fg/js/source.js                | 224 ++-----------------------------------
 ext/manifest.json                  |   1 +
 ext/mixed/js/display.js            |  11 +-
 ext/mixed/js/dom.js                |  38 +++++++
 ext/mixed/js/text-scanner.js       |  11 +-
 test/test-document.js              |  14 ++-
 15 files changed, 102 insertions(+), 247 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json
index 0379fa75..5885e036 100644
--- a/ext/bg/data/options-schema.json
+++ b/ext/bg/data/options-schema.json
@@ -321,7 +321,8 @@
                                     "enablePopupSearch",
                                     "enableOnPopupExpressions",
                                     "enableOnSearchPage",
-                                    "enableSearchTags"
+                                    "enableSearchTags",
+                                    "layoutAwareScan"
                                 ],
                                 "properties": {
                                     "middleMouse": {
@@ -383,6 +384,10 @@
                                     "enableSearchTags": {
                                         "type": "boolean",
                                         "default": false
+                                    },
+                                    "layoutAwareScan": {
+                                        "type": "boolean",
+                                        "default": false
                                     }
                                 }
                             },
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 97368a0b..170e4799 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -203,7 +203,8 @@ function profileOptionsCreateDefaults() {
             enablePopupSearch: false,
             enableOnPopupExpressions: false,
             enableOnSearchPage: true,
-            enableSearchTags: false
+            enableSearchTags: false,
+            layoutAwareScan: false
         },
 
         translation: {
diff --git a/ext/bg/js/search-query-parser.js b/ext/bg/js/search-query-parser.js
index addfc686..97e98b40 100644
--- a/ext/bg/js/search-query-parser.js
+++ b/ext/bg/js/search-query-parser.js
@@ -75,15 +75,17 @@ class QueryParser {
     async _search(textSource, cause) {
         if (textSource === null) { return null; }
 
-        const searchText = this._textScanner.getTextSourceContent(textSource, this._options.scanning.length);
+        const {length: scanLength, layoutAwareScan} = this._options.scanning;
+        const searchText = this._textScanner.getTextSourceContent(textSource, scanLength, layoutAwareScan);
         if (searchText.length === 0) { return null; }
 
         const {definitions, length} = await api.termsFind(searchText, {}, this._getOptionsContext());
         if (definitions.length === 0) { return null; }
 
-        const sentence = docSentenceExtract(textSource, this._options.anki.sentenceExt);
+        const sentenceExtent = this._options.anki.sentenceExt;
+        const sentence = docSentenceExtract(textSource, sentenceExtent, layoutAwareScan);
 
-        textSource.setEndOffset(length);
+        textSource.setEndOffset(length, layoutAwareScan);
 
         this._setContent('terms', {definitions, context: {
             focus: false,
diff --git a/ext/bg/search.html b/ext/bg/search.html
index de08cdae..4a28dd88 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -79,6 +79,7 @@
         
         
         
+        
         
         
         
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html
index fe92f24f..5eecd005 100644
--- a/ext/bg/settings-popup-preview.html
+++ b/ext/bg/settings-popup-preview.html
@@ -126,6 +126,7 @@
         
 
         
+        
         
         
         
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 118a13b9..77b61aef 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -400,6 +400,10 @@
                     
                 
 
+                

+                    
+                

+
                 

                     
                 

diff --git a/ext/fg/float.html b/ext/fg/float.html
index 17dbcc6d..3e41cde5 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -46,6 +46,7 @@
         
 
         
+        
         
         
         
diff --git a/ext/fg/js/document.js b/ext/fg/js/document.js
index d639bc86..c288502c 100644
--- a/ext/fg/js/document.js
+++ b/ext/fg/js/document.js
@@ -17,6 +17,7 @@
 
 /* global
  * DOM
+ * DOMTextScanner
  * TextSourceElement
  * TextSourceRange
  */
@@ -152,14 +153,14 @@ function docRangeFromPoint(x, y, deepDomScan) {
     }
 }
 
-function docSentenceExtract(source, extent) {
+function docSentenceExtract(source, extent, layoutAwareScan) {
     const quotesFwd = {'「': '」', '『': '』', "'": "'", '"': '"'};
     const quotesBwd = {'」': '「', '』': '『', "'": "'", '"': '"'};
     const terminators = '…。．.？?！!';
 
     const sourceLocal = source.clone();
-    const position = sourceLocal.setStartOffset(extent);
-    sourceLocal.setEndOffset(extent * 2 - position, true);
+    const position = sourceLocal.setStartOffset(extent, layoutAwareScan);
+    sourceLocal.setEndOffset(extent * 2 - position, layoutAwareScan, true);
     const content = sourceLocal.text();
 
     let quoteStack = [];
@@ -232,7 +233,7 @@ function isPointInRange(x, y, range) {
     const nodePre = range.endContainer;
     const offsetPre = range.endOffset;
     try {
-        const {node, offset, content} = TextSourceRange.seekForward(range.endContainer, range.endOffset, 1);
+        const {node, offset, content} = new DOMTextScanner(range.endContainer, range.endOffset, true, false).seek(1);
         range.setEnd(node, offset);
 
         if (!isWhitespace(content) && DOM.isPointInAnyRect(x, y, range.getClientRects())) {
@@ -243,7 +244,7 @@ function isPointInRange(x, y, range) {
     }
 
     // Scan backward
-    const {node, offset, content} = TextSourceRange.seekBackward(range.startContainer, range.startOffset, 1);
+    const {node, offset, content} = new DOMTextScanner(range.startContainer, range.startOffset, true, false).seek(-1);
     range.setStart(node, offset);
 
     if (!isWhitespace(content) && DOM.isPointInAnyRect(x, y, range.getClientRects())) {
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 70bd8a48..ab455c09 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -258,32 +258,36 @@ class Frontend {
     }
 
     async _findTerms(textSource, optionsContext) {
-        const searchText = this._textScanner.getTextSourceContent(textSource, this._options.scanning.length);
+        const {length: scanLength, layoutAwareScan} = this._options.scanning;
+        const searchText = this._textScanner.getTextSourceContent(textSource, scanLength, layoutAwareScan);
         if (searchText.length === 0) { return null; }
 
         const {definitions, length} = await api.termsFind(searchText, {}, optionsContext);
         if (definitions.length === 0) { return null; }
 
-        textSource.setEndOffset(length);
+        textSource.setEndOffset(length, layoutAwareScan);
 
         return {definitions, type: 'terms'};
     }
 
     async _findKanji(textSource, optionsContext) {
-        const searchText = this._textScanner.getTextSourceContent(textSource, 1);
+        const layoutAwareScan = this._options.scanning.layoutAwareScan;
+        const searchText = this._textScanner.getTextSourceContent(textSource, 1, layoutAwareScan);
         if (searchText.length === 0) { return null; }
 
         const definitions = await api.kanjiFind(searchText, optionsContext);
         if (definitions.length === 0) { return null; }
 
-        textSource.setEndOffset(1);
+        textSource.setEndOffset(1, layoutAwareScan);
 
         return {definitions, type: 'kanji'};
     }
 
     _showContent(textSource, focus, definitions, type, optionsContext) {
         const {url} = optionsContext;
-        const sentence = docSentenceExtract(textSource, this._options.anki.sentenceExt);
+        const sentenceExtent = this._options.anki.sentenceExt;
+        const layoutAwareScan = this._options.scanning.layoutAwareScan;
+        const sentence = docSentenceExtract(textSource, sentenceExtent, layoutAwareScan);
         this._showPopupContent(
             textSource,
             optionsContext,
diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js
index fa4706f2..38810f07 100644
--- a/ext/fg/js/source.js
+++ b/ext/fg/js/source.js
@@ -15,9 +15,9 @@
  * along with this program.  If not, see .
  */
 
-// \u200c (Zero-width non-joiner) appears on Google Docs from Chrome 76 onwards
-const IGNORE_TEXT_PATTERN = /\u200c/;
-
+/* global
+ * DOMTextScanner
+ */
 
 /*
  * TextSourceRange
@@ -46,19 +46,19 @@ class TextSourceRange {
         return this.content;
     }
 
-    setEndOffset(length, fromEnd=false) {
+    setEndOffset(length, layoutAwareScan, fromEnd=false) {
         const state = (
             fromEnd ?
-            TextSourceRange.seekForward(this.range.endContainer, this.range.endOffset, length) :
-            TextSourceRange.seekForward(this.range.startContainer, this.range.startOffset, length)
+            new DOMTextScanner(this.range.endContainer, this.range.endOffset, !layoutAwareScan, layoutAwareScan).seek(length) :
+            new DOMTextScanner(this.range.startContainer, this.range.startOffset, !layoutAwareScan, layoutAwareScan).seek(length)
         );
         this.range.setEnd(state.node, state.offset);
         this.content = (fromEnd ? this.content + state.content : state.content);
         return length - state.remainder;
     }
 
-    setStartOffset(length) {
-        const state = TextSourceRange.seekBackward(this.range.startContainer, this.range.startOffset, length);
+    setStartOffset(length, layoutAwareScan) {
+        const state = new DOMTextScanner(this.range.startContainer, this.range.startOffset, !layoutAwareScan, layoutAwareScan).seek(-length);
         this.range.setStart(state.node, state.offset);
         this.rangeStartOffset = this.range.startOffset;
         this.content = state.content + this.content;
@@ -110,154 +110,6 @@ class TextSourceRange {
         }
     }
 
-    static shouldEnter(node) {
-        switch (node.nodeName.toUpperCase()) {
-            case 'RT':
-            case 'SCRIPT':
-            case 'STYLE':
-                return false;
-        }
-
-        const style = window.getComputedStyle(node);
-        return !(
-            style.visibility === 'hidden' ||
-            style.display === 'none' ||
-            parseFloat(style.fontSize) === 0
-        );
-    }
-
-    static getRubyElement(node) {
-        node = TextSourceRange.getParentElement(node);
-        if (node !== null && node.nodeName.toUpperCase() === 'RT') {
-            node = node.parentNode;
-            return (node !== null && node.nodeName.toUpperCase() === 'RUBY') ? node : null;
-        }
-        return null;
-    }
-
-    static seekForward(node, offset, length) {
-        const state = {node, offset, remainder: length, content: ''};
-        if (length <= 0) {
-            return state;
-        }
-
-        const TEXT_NODE = Node.TEXT_NODE;
-        const ELEMENT_NODE = Node.ELEMENT_NODE;
-        let resetOffset = false;
-
-        const ruby = TextSourceRange.getRubyElement(node);
-        if (ruby !== null) {
-            node = ruby;
-            resetOffset = true;
-        }
-
-        while (node !== null) {
-            let visitChildren = true;
-            const nodeType = node.nodeType;
-
-            if (nodeType === TEXT_NODE) {
-                state.node = node;
-                if (TextSourceRange.seekForwardTextNode(state, resetOffset)) {
-                    break;
-                }
-                resetOffset = true;
-            } else if (nodeType === ELEMENT_NODE) {
-                visitChildren = TextSourceRange.shouldEnter(node);
-            }
-
-            node = TextSourceRange.getNextNode(node, visitChildren);
-        }
-
-        return state;
-    }
-
-    static seekForwardTextNode(state, resetOffset) {
-        const nodeValue = state.node.nodeValue;
-        const nodeValueLength = nodeValue.length;
-        let content = state.content;
-        let offset = resetOffset ? 0 : state.offset;
-        let remainder = state.remainder;
-        let result = false;
-
-        for (; offset < nodeValueLength; ++offset) {
-            const c = nodeValue[offset];
-            if (!IGNORE_TEXT_PATTERN.test(c)) {
-                content += c;
-                if (--remainder <= 0) {
-                    result = true;
-                    ++offset;
-                    break;
-                }
-            }
-        }
-
-        state.offset = offset;
-        state.content = content;
-        state.remainder = remainder;
-        return result;
-    }
-
-    static seekBackward(node, offset, length) {
-        const state = {node, offset, remainder: length, content: ''};
-        if (length <= 0) {
-            return state;
-        }
-
-        const TEXT_NODE = Node.TEXT_NODE;
-        const ELEMENT_NODE = Node.ELEMENT_NODE;
-        let resetOffset = false;
-
-        const ruby = TextSourceRange.getRubyElement(node);
-        if (ruby !== null) {
-            node = ruby;
-            resetOffset = true;
-        }
-
-        while (node !== null) {
-            let visitChildren = true;
-            const nodeType = node.nodeType;
-
-            if (nodeType === TEXT_NODE) {
-                state.node = node;
-                if (TextSourceRange.seekBackwardTextNode(state, resetOffset)) {
-                    break;
-                }
-                resetOffset = true;
-            } else if (nodeType === ELEMENT_NODE) {
-                visitChildren = TextSourceRange.shouldEnter(node);
-            }
-
-            node = TextSourceRange.getPreviousNode(node, visitChildren);
-        }
-
-        return state;
-    }
-
-    static seekBackwardTextNode(state, resetOffset) {
-        const nodeValue = state.node.nodeValue;
-        let content = state.content;
-        let offset = resetOffset ? nodeValue.length : state.offset;
-        let remainder = state.remainder;
-        let result = false;
-
-        for (; offset > 0; --offset) {
-            const c = nodeValue[offset - 1];
-            if (!IGNORE_TEXT_PATTERN.test(c)) {
-                content = c + content;
-                if (--remainder <= 0) {
-                    result = true;
-                    --offset;
-                    break;
-                }
-            }
-        }
-
-        state.offset = offset;
-        state.content = content;
-        state.remainder = remainder;
-        return result;
-    }
-
     static getParentElement(node) {
         while (node !== null && node.nodeType !== Node.ELEMENT_NODE) {
             node = node.parentNode;
@@ -290,66 +142,6 @@ class TextSourceRange {
                 return writingMode;
         }
     }
-
-    static getNodesInRange(range) {
-        const end = range.endContainer;
-        const nodes = [];
-        for (let node = range.startContainer; node !== null; node = TextSourceRange.getNextNode(node, true)) {
-            nodes.push(node);
-            if (node === end) { break; }
-        }
-        return nodes;
-    }
-
-    static getNextNode(node, visitChildren) {
-        let next = visitChildren ? node.firstChild : null;
-        if (next === null) {
-            while (true) {
-                next = node.nextSibling;
-                if (next !== null) { break; }
-
-                next = node.parentNode;
-                if (next === null) { break; }
-
-                node = next;
-            }
-        }
-        return next;
-    }
-
-    static getPreviousNode(node, visitChildren) {
-        let next = visitChildren ? node.lastChild : null;
-        if (next === null) {
-            while (true) {
-                next = node.previousSibling;
-                if (next !== null) { break; }
-
-                next = node.parentNode;
-                if (next === null) { break; }
-
-                node = next;
-            }
-        }
-        return next;
-    }
-
-    static anyNodeMatchesSelector(nodeList, selector) {
-        for (const node of nodeList) {
-            if (TextSourceRange.nodeMatchesSelector(node, selector)) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    static nodeMatchesSelector(node, selector) {
-        for (; node !== null; node = node.parentNode) {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                return node.matches(selector);
-            }
-        }
-        return false;
-    }
 }
 
 
diff --git a/ext/manifest.json b/ext/manifest.json
index 75334675..4d4f0c06 100644
--- a/ext/manifest.json
+++ b/ext/manifest.json
@@ -42,6 +42,7 @@
             "mixed/js/dynamic-loader.js",
             "mixed/js/text-scanner.js",
             "fg/js/document.js",
+            "fg/js/dom-text-scanner.js",
             "fg/js/popup.js",
             "fg/js/source.js",
             "fg/js/popup-factory.js",
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 90fd1037..1d699706 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -236,7 +236,9 @@ class Display {
             const {textSource, definitions} = termLookupResults;
 
             const scannedElement = e.target;
-            const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
+            const sentenceExtent = this.options.anki.sentenceExt;
+            const layoutAwareScan = this.options.scanning.layoutAwareScan;
+            const sentence = docSentenceExtract(textSource, sentenceExtent, layoutAwareScan);
 
             this.context.update({
                 index: this.entryIndexFind(scannedElement),
@@ -273,21 +275,22 @@ class Display {
         try {
             e.preventDefault();
 
-            const textSource = docRangeFromPoint(e.clientX, e.clientY, this.options.scanning.deepDomScan);
+            const {length: scanLength, deepDomScan: deepScan, layoutAwareScan} = this.options.scanning;
+            const textSource = docRangeFromPoint(e.clientX, e.clientY, deepScan);
             if (textSource === null) {
                 return false;
             }
 
             let definitions, length;
             try {
-                textSource.setEndOffset(this.options.scanning.length);
+                textSource.setEndOffset(scanLength, layoutAwareScan);
 
                 ({definitions, length} = await api.termsFind(textSource.text(), {}, this.getOptionsContext()));
                 if (definitions.length === 0) {
                     return false;
                 }
 
-                textSource.setEndOffset(length);
+                textSource.setEndOffset(length, layoutAwareScan);
             } finally {
                 textSource.cleanup();
             }
diff --git a/ext/mixed/js/dom.js b/ext/mixed/js/dom.js
index 0e8f4462..05764443 100644
--- a/ext/mixed/js/dom.js
+++ b/ext/mixed/js/dom.js
@@ -86,4 +86,42 @@ class DOM {
             null
         );
     }
+
+    static getNodesInRange(range) {
+        const end = range.endContainer;
+        const nodes = [];
+        for (let node = range.startContainer; node !== null; node = DOM.getNextNode(node)) {
+            nodes.push(node);
+            if (node === end) { break; }
+        }
+        return nodes;
+    }
+
+    static getNextNode(node) {
+        let next = node.firstChild;
+        if (next === null) {
+            while (true) {
+                next = node.nextSibling;
+                if (next !== null) { break; }
+
+                next = node.parentNode;
+                if (next === null) { break; }
+
+                node = next;
+            }
+        }
+        return next;
+    }
+
+    static anyNodeMatchesSelector(nodes, selector) {
+        const ELEMENT_NODE = Node.ELEMENT_NODE;
+        for (let node of nodes) {
+            for (; node !== null; node = node.parentNode) {
+                if (node.nodeType !== ELEMENT_NODE) { continue; }
+                if (node.matches(selector)) { return true; }
+                break;
+            }
+        }
+        return false;
+    }
 }
diff --git a/ext/mixed/js/text-scanner.js b/ext/mixed/js/text-scanner.js
index b8688b08..fb275452 100644
--- a/ext/mixed/js/text-scanner.js
+++ b/ext/mixed/js/text-scanner.js
@@ -17,7 +17,6 @@
 
 /* global
  * DOM
- * TextSourceRange
  * docRangeFromPoint
  */
 
@@ -119,20 +118,20 @@ class TextScanner extends EventDispatcher {
         }
     }
 
-    getTextSourceContent(textSource, length) {
+    getTextSourceContent(textSource, length, layoutAwareScan) {
         const clonedTextSource = textSource.clone();
 
-        clonedTextSource.setEndOffset(length);
+        clonedTextSource.setEndOffset(length, layoutAwareScan);
 
         if (this._ignoreNodes !== null && clonedTextSource.range) {
             length = clonedTextSource.text().length;
             while (clonedTextSource.range && length > 0) {
-                const nodes = TextSourceRange.getNodesInRange(clonedTextSource.range);
-                if (!TextSourceRange.anyNodeMatchesSelector(nodes, this._ignoreNodes)) {
+                const nodes = DOM.getNodesInRange(clonedTextSource.range);
+                if (!DOM.anyNodeMatchesSelector(nodes, this._ignoreNodes)) {
                     break;
                 }
                 --length;
-                clonedTextSource.setEndOffset(length);
+                clonedTextSource.setEndOffset(length, layoutAwareScan);
             }
         }
 
diff --git a/test/test-document.js b/test/test-document.js
index 0d9026db..ba7acc49 100644
--- a/test/test-document.js
+++ b/test/test-document.js
@@ -94,10 +94,12 @@ async function testDocument1() {
     const vm = new VM({document, window, Range, Node});
     vm.execute([
         'mixed/js/dom.js',
+        'fg/js/dom-text-scanner.js',
         'fg/js/source.js',
         'fg/js/document.js'
     ]);
-    const [TextSourceRange, TextSourceElement, docRangeFromPoint, docSentenceExtract] = vm.get([
+    const [DOMTextScanner, TextSourceRange, TextSourceElement, docRangeFromPoint, docSentenceExtract] = vm.get([
+        'DOMTextScanner',
         'TextSourceRange',
         'TextSourceElement',
         'docRangeFromPoint',
@@ -106,7 +108,7 @@ async function testDocument1() {
 
     try {
         await testDocumentTextScanningFunctions(dom, {docRangeFromPoint, docSentenceExtract, TextSourceRange, TextSourceElement});
-        await testTextSourceRangeSeekFunctions(dom, {TextSourceRange});
+        await testTextSourceRangeSeekFunctions(dom, {DOMTextScanner});
     } finally {
         window.close();
     }
@@ -179,7 +181,7 @@ async function testDocumentTextScanningFunctions(dom, {docRangeFromPoint, docSen
         if (source === null) { continue; }
 
         // Test docSentenceExtract
-        const sentenceActual = docSentenceExtract(source, sentenceExtent).text;
+        const sentenceActual = docSentenceExtract(source, sentenceExtent, false).text;
         assert.strictEqual(sentenceActual, sentence);
 
         // Clean
@@ -187,7 +189,7 @@ async function testDocumentTextScanningFunctions(dom, {docRangeFromPoint, docSen
     }
 }
 
-async function testTextSourceRangeSeekFunctions(dom, {TextSourceRange}) {
+async function testTextSourceRangeSeekFunctions(dom, {DOMTextScanner}) {
     const document = dom.window.document;
 
     for (const testElement of document.querySelectorAll('.test[data-test-type=text-source-range-seek]')) {
@@ -220,8 +222,8 @@ async function testTextSourceRangeSeekFunctions(dom, {TextSourceRange}) {
 
         const {node, offset, content} = (
             seekDirection === 'forward' ?
-            TextSourceRange.seekForward(seekNode, seekOffset, seekLength) :
-            TextSourceRange.seekBackward(seekNode, seekOffset, seekLength)
+            new DOMTextScanner(seekNode, seekOffset, true, false).seek(seekLength) :
+            new DOMTextScanner(seekNode, seekOffset, true, false).seek(-seekLength)
         );
 
         assert.strictEqual(node, expectedResultNode);
-- 
cgit v1.2.3


From f2991fb9ee8e83738b726eb558af992f4bb5d9dc Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Sun, 21 Jun 2020 16:14:05 -0400
Subject: Frontend initialization refactor (#610)

* Create member functions for ignoreElements and ignorePoint

* Create addFullscreenChangeEventListener utility

* Move popup creation management into Frontend

* Move getUrl implementation

* Remove old setup

* Remove try/catch block

* Error wrap

* Add prepare call to TextScanner

* Update depth when popup changes

* Refactor how Frontend gets PopupFactory and frameId

* Update popup preview to work

* Update popup preview frame to use the frontend's popup

* Update how nested popups are set up

* Error wrap

* Update how popups are set up on the search page

* Error wrap

* Error unwrap

* Add missing prepare

* Remove use of frontendInitializationData

* Catch and log errors
---
 ext/bg/js/search-main.js                       |  44 +----
 ext/bg/js/search-query-parser.js               |   1 +
 ext/bg/js/search.js                            | 120 +++++++++----
 ext/bg/js/settings/popup-preview-frame-main.js |  17 +-
 ext/bg/js/settings/popup-preview-frame.js      |  46 +++--
 ext/bg/settings-popup-preview.html             |   1 +
 ext/fg/js/content-script-main.js               | 152 ++--------------
 ext/fg/js/float-main.js                        |  43 +----
 ext/fg/js/float.js                             |  65 ++++++-
 ext/fg/js/frontend.js                          | 231 ++++++++++++++++++++-----
 ext/fg/js/popup-factory.js                     |   7 +-
 ext/fg/js/popup-proxy.js                       |   4 -
 ext/fg/js/popup.js                             |  11 +-
 ext/mixed/js/dom.js                            |  18 ++
 ext/mixed/js/text-scanner.js                   |   8 +-
 15 files changed, 437 insertions(+), 331 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/search-main.js b/ext/bg/js/search-main.js
index f18d6d88..13bd8767 100644
--- a/ext/bg/js/search-main.js
+++ b/ext/bg/js/search-main.js
@@ -18,42 +18,16 @@
 /* global
  * DisplaySearch
  * api
- * dynamicLoader
  */
 
-async function injectSearchFrontend() {
-    await dynamicLoader.loadScripts([
-        '/mixed/js/text-scanner.js',
-        '/fg/js/frame-offset-forwarder.js',
-        '/fg/js/popup.js',
-        '/fg/js/popup-factory.js',
-        '/fg/js/frontend.js',
-        '/fg/js/content-script-main.js'
-    ]);
-}
-
 (async () => {
-    api.forwardLogsToBackend();
-    await yomichan.prepare();
-
-    const displaySearch = new DisplaySearch();
-    await displaySearch.prepare();
-
-    let optionsApplied = false;
-
-    const applyOptions = async () => {
-        const optionsContext = {depth: 0, url: window.location.href};
-        const options = await api.optionsGet(optionsContext);
-        if (!options.scanning.enableOnSearchPage || optionsApplied) { return; }
-
-        optionsApplied = true;
-        yomichan.off('optionsUpdated', applyOptions);
-
-        window.frontendInitializationData = {depth: 1, proxy: false, isSearchPage: true};
-        await injectSearchFrontend();
-    };
-
-    yomichan.on('optionsUpdated', applyOptions);
-
-    await applyOptions();
+    try {
+        api.forwardLogsToBackend();
+        await yomichan.prepare();
+
+        const displaySearch = new DisplaySearch();
+        await displaySearch.prepare();
+    } catch (e) {
+        yomichan.logError(e);
+    }
 })();
diff --git a/ext/bg/js/search-query-parser.js b/ext/bg/js/search-query-parser.js
index 97e98b40..86524b66 100644
--- a/ext/bg/js/search-query-parser.js
+++ b/ext/bg/js/search-query-parser.js
@@ -42,6 +42,7 @@ class QueryParser {
 
     async prepare() {
         await this._queryParserGenerator.prepare();
+        this._textScanner.prepare();
         this._queryParser.addEventListener('click', this._onClick.bind(this));
     }
 
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 08c02624..88be335f 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -19,8 +19,11 @@
  * ClipboardMonitor
  * DOM
  * Display
+ * Frontend
+ * PopupFactory
  * QueryParser
  * api
+ * dynamicLoader
  * wanakana
  */
 
@@ -73,51 +76,49 @@ class DisplaySearch extends Display {
     }
 
     async prepare() {
-        try {
-            await super.prepare();
-            await this.updateOptions();
-            yomichan.on('optionsUpdated', () => this.updateOptions());
-            await this.queryParser.prepare();
+        await super.prepare();
+        await this.updateOptions();
+        yomichan.on('optionsUpdated', () => this.updateOptions());
+        await this.queryParser.prepare();
+
+        const {queryParams: {query='', mode=''}} = parseUrl(window.location.href);
+
+        document.documentElement.dataset.searchMode = mode;
 
-            const {queryParams: {query='', mode=''}} = parseUrl(window.location.href);
+        if (this.options.general.enableWanakana === true) {
+            this.wanakanaEnable.checked = true;
+            wanakana.bind(this.query);
+        } else {
+            this.wanakanaEnable.checked = false;
+        }
 
-            document.documentElement.dataset.searchMode = mode;
+        this.setQuery(query);
+        this.onSearchQueryUpdated(this.query.value, false);
 
-            if (this.options.general.enableWanakana === true) {
-                this.wanakanaEnable.checked = true;
-                wanakana.bind(this.query);
+        if (mode !== 'popup') {
+            if (this.options.general.enableClipboardMonitor === true) {
+                this.clipboardMonitorEnable.checked = true;
+                this.clipboardMonitor.start();
             } else {
-                this.wanakanaEnable.checked = false;
+                this.clipboardMonitorEnable.checked = false;
             }
+            this.clipboardMonitorEnable.addEventListener('change', this.onClipboardMonitorEnableChange.bind(this));
+        }
 
-            this.setQuery(query);
-            this.onSearchQueryUpdated(this.query.value, false);
-
-            if (mode !== 'popup') {
-                if (this.options.general.enableClipboardMonitor === true) {
-                    this.clipboardMonitorEnable.checked = true;
-                    this.clipboardMonitor.start();
-                } else {
-                    this.clipboardMonitorEnable.checked = false;
-                }
-                this.clipboardMonitorEnable.addEventListener('change', this.onClipboardMonitorEnableChange.bind(this));
-            }
+        chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
 
-            chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
+        this.search.addEventListener('click', this.onSearch.bind(this), false);
+        this.query.addEventListener('input', this.onSearchInput.bind(this), false);
+        this.wanakanaEnable.addEventListener('change', this.onWanakanaEnableChange.bind(this));
+        window.addEventListener('popstate', this.onPopState.bind(this));
+        window.addEventListener('copy', this.onCopy.bind(this));
+        this.clipboardMonitor.on('change', this.onExternalSearchUpdate.bind(this));
 
-            this.search.addEventListener('click', this.onSearch.bind(this), false);
-            this.query.addEventListener('input', this.onSearchInput.bind(this), false);
-            this.wanakanaEnable.addEventListener('change', this.onWanakanaEnableChange.bind(this));
-            window.addEventListener('popstate', this.onPopState.bind(this));
-            window.addEventListener('copy', this.onCopy.bind(this));
-            this.clipboardMonitor.on('change', this.onExternalSearchUpdate.bind(this));
+        this.updateSearchButton();
 
-            this.updateSearchButton();
+        await this._prepareNestedPopups();
 
-            this._isPrepared = true;
-        } catch (e) {
-            this.onError(e);
-        }
+        this._isPrepared = true;
     }
 
     onError(error) {
@@ -401,4 +402,53 @@ class DisplaySearch extends Display {
             document.title = `${text} - Yomichan Search`;
         }
     }
+
+    async _prepareNestedPopups() {
+        let complete = false;
+
+        const onOptionsUpdated = async () => {
+            const optionsContext = this.getOptionsContext();
+            const options = await api.optionsGet(optionsContext);
+            if (!options.scanning.enableOnSearchPage || complete) { return; }
+
+            complete = true;
+            yomichan.off('optionsUpdated', onOptionsUpdated);
+
+            try {
+                await this._setupNestedPopups();
+            } catch (e) {
+                yomichan.logError(e);
+            }
+        };
+
+        yomichan.on('optionsUpdated', onOptionsUpdated);
+
+        await onOptionsUpdated();
+    }
+
+    async _setupNestedPopups() {
+        await dynamicLoader.loadScripts([
+            '/mixed/js/text-scanner.js',
+            '/fg/js/frame-offset-forwarder.js',
+            '/fg/js/popup.js',
+            '/fg/js/popup-factory.js',
+            '/fg/js/frontend.js'
+        ]);
+
+        const {frameId} = await api.frameInformationGet();
+
+        const popupFactory = new PopupFactory(frameId);
+        await popupFactory.prepare();
+
+        const frontend = new Frontend(
+            frameId,
+            popupFactory,
+            {
+                depth: 1,
+                proxy: false,
+                isSearchPage: true
+            }
+        );
+        await frontend.prepare();
+    }
 }
diff --git a/ext/bg/js/settings/popup-preview-frame-main.js b/ext/bg/js/settings/popup-preview-frame-main.js
index 7c4e2eb9..4c6096ec 100644
--- a/ext/bg/js/settings/popup-preview-frame-main.js
+++ b/ext/bg/js/settings/popup-preview-frame-main.js
@@ -16,12 +16,23 @@
  */
 
 /* global
+ * PopupFactory
  * PopupPreviewFrame
  * api
  */
 
 (async () => {
-    api.forwardLogsToBackend();
-    const preview = new PopupPreviewFrame();
-    await preview.prepare();
+    try {
+        api.forwardLogsToBackend();
+
+        const {frameId} = await api.frameInformationGet();
+
+        const popupFactory = new PopupFactory(frameId);
+        await popupFactory.prepare();
+
+        const preview = new PopupPreviewFrame(frameId, popupFactory);
+        await preview.prepare();
+    } catch (e) {
+        yomichan.logError(e);
+    }
 })();
diff --git a/ext/bg/js/settings/popup-preview-frame.js b/ext/bg/js/settings/popup-preview-frame.js
index 21fee7ee..98630503 100644
--- a/ext/bg/js/settings/popup-preview-frame.js
+++ b/ext/bg/js/settings/popup-preview-frame.js
@@ -18,17 +18,17 @@
 /* global
  * Frontend
  * Popup
- * PopupFactory
  * TextSourceRange
  * api
  */
 
 class PopupPreviewFrame {
-    constructor() {
+    constructor(frameId, popupFactory) {
+        this._frameId = frameId;
+        this._popupFactory = popupFactory;
         this._frontend = null;
         this._frontendGetOptionsContextOld = null;
         this._apiOptionsGetOld = null;
-        this._popup = null;
         this._popupSetCustomOuterCssOld = null;
         this._popupShown = false;
         this._themeChangeTimeout = null;
@@ -55,24 +55,25 @@ class PopupPreviewFrame {
         api.optionsGet = this._apiOptionsGet.bind(this);
 
         // Overwrite frontend
-        const {frameId} = await api.frameInformationGet();
-
-        const popupFactory = new PopupFactory(frameId);
-        await popupFactory.prepare();
-
-        this._popup = popupFactory.getOrCreatePopup();
-        this._popup.setChildrenSupported(false);
-
-        this._popupSetCustomOuterCssOld = this._popup.setCustomOuterCss.bind(this._popup);
-        this._popup.setCustomOuterCss = this._popupSetCustomOuterCss.bind(this);
-
-        this._frontend = new Frontend(this._popup);
+        this._frontend = new Frontend(
+            this._frameId,
+            this._popupFactory,
+            {
+                allowRootFramePopupProxy: false
+            }
+        );
         this._frontendGetOptionsContextOld = this._frontend.getOptionsContext.bind(this._frontend);
         this._frontend.getOptionsContext = this._getOptionsContext.bind(this);
         await this._frontend.prepare();
         this._frontend.setDisabledOverride(true);
         this._frontend.canClearSelection = false;
 
+        const popup = this._frontend.popup;
+        popup.setChildrenSupported(false);
+
+        this._popupSetCustomOuterCssOld = popup.setCustomOuterCss.bind(popup);
+        popup.setCustomOuterCss = this._popupSetCustomOuterCss.bind(this);
+
         // Update search
         this._updateSearch();
     }
@@ -132,7 +133,9 @@ class PopupPreviewFrame {
         }
         this._themeChangeTimeout = setTimeout(() => {
             this._themeChangeTimeout = null;
-            this._popup.updateTheme();
+            const popup = this._frontend.popup;
+            if (popup === null) { return; }
+            popup.updateTheme();
         }, 300);
     }
 
@@ -154,12 +157,16 @@ class PopupPreviewFrame {
 
     _setCustomCss({css}) {
         if (this._frontend === null) { return; }
-        this._popup.setCustomCss(css);
+        const popup = this._frontend.popup;
+        if (popup === null) { return; }
+        popup.setCustomCss(css);
     }
 
     _setCustomOuterCss({css}) {
         if (this._frontend === null) { return; }
-        this._popup.setCustomOuterCss(css, false);
+        const popup = this._frontend.popup;
+        if (popup === null) { return; }
+        popup.setCustomOuterCss(css, false);
     }
 
     async _updateOptionsContext({optionsContext}) {
@@ -188,7 +195,8 @@ class PopupPreviewFrame {
         this._textSource = source;
         await this._frontend.showContentCompleted();
 
-        if (this._popup.isVisibleSync()) {
+        const popup = this._frontend.popup;
+        if (popup !== null && popup.isVisibleSync()) {
             this._popupShown = true;
         }
 
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html
index 5eecd005..75bf06c8 100644
--- a/ext/bg/settings-popup-preview.html
+++ b/ext/bg/settings-popup-preview.html
@@ -131,6 +131,7 @@
         
         
         
+        
         
 
         
diff --git a/ext/fg/js/content-script-main.js b/ext/fg/js/content-script-main.js
index c31cde3f..c4aa1bca 100644
--- a/ext/fg/js/content-script-main.js
+++ b/ext/fg/js/content-script-main.js
@@ -16,147 +16,31 @@
  */
 
 /* global
- * DOM
- * FrameOffsetForwarder
  * Frontend
  * PopupFactory
- * PopupProxy
  * api
  */
 
-async function createPopupFactory() {
-    const {frameId} = await api.frameInformationGet();
-    if (typeof frameId !== 'number') {
-        const error = new Error('Failed to get frameId');
-        yomichan.logError(error);
-        throw error;
-    }
-
-    const popupFactory = new PopupFactory(frameId);
-    await popupFactory.prepare();
-    return popupFactory;
-}
-
-async function createIframePopupProxy(frameOffsetForwarder, setDisabled) {
-    const rootPopupInformationPromise = yomichan.getTemporaryListenerResult(
-        chrome.runtime.onMessage,
-        ({action, params}, {resolve}) => {
-            if (action === 'rootPopupInformation') {
-                resolve(params);
-            }
-        }
-    );
-    api.broadcastTab('rootPopupRequestInformationBroadcast');
-    const {popupId, frameId: parentFrameId} = await rootPopupInformationPromise;
-
-    const popup = new PopupProxy(popupId, 0, null, parentFrameId, frameOffsetForwarder);
-    popup.on('offsetNotFound', setDisabled);
-    await popup.prepare();
-
-    return popup;
-}
-
-async function getOrCreatePopup(depth, popupFactory) {
-    return popupFactory.getOrCreatePopup(null, null, depth);
-}
-
-async function createPopupProxy(depth, id, parentFrameId) {
-    const popup = new PopupProxy(null, depth + 1, id, parentFrameId);
-    await popup.prepare();
-
-    return popup;
-}
-
 (async () => {
-    api.forwardLogsToBackend();
-    await yomichan.prepare();
-
-    const data = window.frontendInitializationData || {};
-    const {id, depth=0, parentFrameId, url=window.location.href, proxy=false, isSearchPage=false} = data;
-
-    const isIframe = !proxy && (window !== window.parent);
-
-    const popups = {
-        iframe: null,
-        proxy: null,
-        normal: null
-    };
+    try {
+        api.forwardLogsToBackend();
+        await yomichan.prepare();
 
-    let frontend = null;
-    let frontendPreparePromise = null;
-    let frameOffsetForwarder = null;
-    let popupFactoryPromise = null;
-
-    let iframePopupsInRootFrameAvailable = true;
-
-    const disableIframePopupsInRootFrame = () => {
-        iframePopupsInRootFrameAvailable = false;
-        applyOptions();
-    };
-
-    let urlUpdatedAt = 0;
-    let popupProxyUrlCached = url;
-    const getPopupProxyUrl = async () => {
-        const now = Date.now();
-        if (popups.proxy !== null && now - urlUpdatedAt > 500) {
-            popupProxyUrlCached = await popups.proxy.getUrl();
-            urlUpdatedAt = now;
+        const {frameId} = await api.frameInformationGet();
+        if (typeof frameId !== 'number') {
+            throw new Error('Failed to get frameId');
         }
-        return popupProxyUrlCached;
-    };
-
-    const applyOptions = async () => {
-        const optionsContext = {
-            depth: isSearchPage ? 0 : depth,
-            url: proxy ? await getPopupProxyUrl() : window.location.href
-        };
-        const options = await api.optionsGet(optionsContext);
 
-        if (!proxy && frameOffsetForwarder === null) {
-            frameOffsetForwarder = new FrameOffsetForwarder();
-            frameOffsetForwarder.prepare();
-        }
-
-        let popup;
-        if (isIframe && options.general.showIframePopupsInRootFrame && DOM.getFullscreenElement() === null && iframePopupsInRootFrameAvailable) {
-            popup = popups.iframe || await createIframePopupProxy(frameOffsetForwarder, disableIframePopupsInRootFrame);
-            popups.iframe = popup;
-        } else if (proxy) {
-            popup = popups.proxy || await createPopupProxy(depth, id, parentFrameId);
-            popups.proxy = popup;
-        } else {
-            popup = popups.normal;
-            if (!popup) {
-                if (popupFactoryPromise === null) {
-                    popupFactoryPromise = createPopupFactory();
-                }
-                const popupFactory = await popupFactoryPromise;
-                const popupNormal = await getOrCreatePopup(depth, popupFactory);
-                popups.normal = popupNormal;
-                popup = popupNormal;
-            }
-        }
-
-        if (frontend === null) {
-            const getUrl = proxy ? getPopupProxyUrl : null;
-            frontend = new Frontend(popup, getUrl);
-            frontendPreparePromise = frontend.prepare();
-            await frontendPreparePromise;
-        } else {
-            await frontendPreparePromise;
-            if (isSearchPage) {
-                const disabled = !options.scanning.enableOnSearchPage;
-                frontend.setDisabledOverride(disabled);
-            }
-
-            if (isIframe) {
-                await frontend.setPopup(popup);
-            }
-        }
-    };
-
-    yomichan.on('optionsUpdated', applyOptions);
-    window.addEventListener('fullscreenchange', applyOptions, false);
-
-    await applyOptions();
+        const popupFactory = new PopupFactory(frameId);
+        await popupFactory.prepare();
+
+        const frontend = new Frontend(
+            frameId,
+            popupFactory,
+            {}
+        );
+        await frontend.prepare();
+    } catch (e) {
+        yomichan.logError(e);
+    }
 })();
diff --git a/ext/fg/js/float-main.js b/ext/fg/js/float-main.js
index 2ec334c8..3bedfe58 100644
--- a/ext/fg/js/float-main.js
+++ b/ext/fg/js/float-main.js
@@ -18,42 +18,15 @@
 /* global
  * DisplayFloat
  * api
- * dynamicLoader
  */
 
-async function injectPopupNested() {
-    await dynamicLoader.loadScripts([
-        '/mixed/js/text-scanner.js',
-        '/fg/js/popup.js',
-        '/fg/js/popup-proxy.js',
-        '/fg/js/frontend.js',
-        '/fg/js/content-script-main.js'
-    ]);
-}
-
-async function popupNestedInitialize(id, depth, parentFrameId, url) {
-    let optionsApplied = false;
-
-    const applyOptions = async () => {
-        const optionsContext = {depth, url};
-        const options = await api.optionsGet(optionsContext);
-        const maxPopupDepthExceeded = !(typeof depth === 'number' && depth < options.scanning.popupNestingMaxDepth);
-        if (maxPopupDepthExceeded || optionsApplied) { return; }
-
-        optionsApplied = true;
-        yomichan.off('optionsUpdated', applyOptions);
-
-        window.frontendInitializationData = {id, depth, parentFrameId, url, proxy: true};
-        await injectPopupNested();
-    };
-
-    yomichan.on('optionsUpdated', applyOptions);
-
-    await applyOptions();
-}
-
 (async () => {
-    api.forwardLogsToBackend();
-    const display = new DisplayFloat();
-    await display.prepare();
+    try {
+        api.forwardLogsToBackend();
+
+        const display = new DisplayFloat();
+        await display.prepare();
+    } catch (e) {
+        yomichan.logError(e);
+    }
 })();
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 12d27a9f..199990e5 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -17,8 +17,10 @@
 
 /* global
  * Display
+ * Frontend
+ * PopupFactory
  * api
- * popupNestedInitialize
+ * dynamicLoader
  */
 
 class DisplayFloat extends Display {
@@ -30,7 +32,7 @@ class DisplayFloat extends Display {
         this._token = null;
 
         this._orphaned = false;
-        this._initializedNestedPopups = false;
+        this._nestedPopupsPrepared = false;
 
         this._onKeyDownHandlers = new Map([
             ['C', (e) => {
@@ -183,10 +185,10 @@ class DisplayFloat extends Display {
 
         await this.updateOptions();
 
-        if (childrenSupported && !this._initializedNestedPopups) {
+        if (childrenSupported && !this._nestedPopupsPrepared) {
             const {depth, url} = optionsContext;
-            popupNestedInitialize(popupId, depth, frameId, url);
-            this._initializedNestedPopups = true;
+            this._prepareNestedPopups(popupId, depth, frameId, url);
+            this._nestedPopupsPrepared = true;
         }
 
         this.setContentScale(scale);
@@ -201,4 +203,57 @@ class DisplayFloat extends Display {
             this._secret === message.secret
         );
     }
+
+    async _prepareNestedPopups(id, depth, parentFrameId, url) {
+        let complete = false;
+
+        const onOptionsUpdated = async () => {
+            const optionsContext = this.optionsContext;
+            const options = await api.optionsGet(optionsContext);
+            const maxPopupDepthExceeded = !(typeof depth === 'number' && depth < options.scanning.popupNestingMaxDepth);
+            if (maxPopupDepthExceeded || complete) { return; }
+
+            complete = true;
+            yomichan.off('optionsUpdated', onOptionsUpdated);
+
+            try {
+                await this._setupNestedPopups(id, depth, parentFrameId, url);
+            } catch (e) {
+                yomichan.logError(e);
+            }
+        };
+
+        yomichan.on('optionsUpdated', onOptionsUpdated);
+
+        await onOptionsUpdated();
+    }
+
+    async _setupNestedPopups(id, depth, parentFrameId, url) {
+        await dynamicLoader.loadScripts([
+            '/mixed/js/text-scanner.js',
+            '/fg/js/popup.js',
+            '/fg/js/popup-proxy.js',
+            '/fg/js/popup-factory.js',
+            '/fg/js/frame-offset-forwarder.js',
+            '/fg/js/frontend.js'
+        ]);
+
+        const {frameId} = await api.frameInformationGet();
+
+        const popupFactory = new PopupFactory(frameId);
+        await popupFactory.prepare();
+
+        const frontend = new Frontend(
+            frameId,
+            popupFactory,
+            {
+                id,
+                depth,
+                parentFrameId,
+                url,
+                proxy: true
+            }
+        );
+        await frontend.prepare();
+    }
 }
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index ab455c09..71e53b03 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -16,16 +16,18 @@
  */
 
 /* global
+ * DOM
+ * FrameOffsetForwarder
+ * PopupProxy
  * TextScanner
  * api
  * docSentenceExtract
  */
 
 class Frontend {
-    constructor(popup, getUrl=null) {
+    constructor(frameId, popupFactory, frontendInitializationData) {
         this._id = yomichan.generateId(16);
-        this._popup = popup;
-        this._getUrl = getUrl;
+        this._popup = null;
         this._disabledOverride = false;
         this._options = null;
         this._pageZoomFactor = 1.0;
@@ -37,11 +39,31 @@ class Frontend {
         this._optionsUpdatePending = false;
         this._textScanner = new TextScanner({
             node: window,
-            ignoreElements: () => this._popup.isProxy() ? [] : [this._popup.getFrame()],
-            ignorePoint: (x, y) => this._popup.containsPoint(x, y),
+            ignoreElements: this._ignoreElements.bind(this),
+            ignorePoint: this._ignorePoint.bind(this),
             search: this._search.bind(this)
         });
 
+        const {
+            depth=0,
+            id: proxyPopupId,
+            parentFrameId,
+            proxy: useProxyPopup=false,
+            isSearchPage=false,
+            allowRootFramePopupProxy=true
+        } = frontendInitializationData;
+        this._proxyPopupId = proxyPopupId;
+        this._parentFrameId = parentFrameId;
+        this._useProxyPopup = useProxyPopup;
+        this._isSearchPage = isSearchPage;
+        this._depth = depth;
+        this._frameId = frameId;
+        this._frameOffsetForwarder = new FrameOffsetForwarder();
+        this._popupFactory = popupFactory;
+        this._allowRootFramePopupProxy = allowRootFramePopupProxy;
+        this._popupCache = new Map();
+        this._updatePopupToken = null;
+
         this._windowMessageHandlers = new Map([
             ['popupClose', this._onMessagePopupClose.bind(this)],
             ['selectionCopy', this._onMessageSelectionCopy.bind()]
@@ -62,43 +84,46 @@ class Frontend {
         this._textScanner.canClearSelection = value;
     }
 
+    get popup() {
+        return this._popup;
+    }
+
     async prepare() {
+        this._frameOffsetForwarder.prepare();
+
+        await this.updateOptions();
         try {
-            await this.updateOptions();
-            try {
-                const {zoomFactor} = await api.getZoom();
-                this._pageZoomFactor = zoomFactor;
-            } catch (e) {
-                // Ignore exceptions which may occur due to being on an unsupported page (e.g. about:blank)
-            }
+            const {zoomFactor} = await api.getZoom();
+            this._pageZoomFactor = zoomFactor;
+        } catch (e) {
+            // Ignore exceptions which may occur due to being on an unsupported page (e.g. about:blank)
+        }
 
-            window.addEventListener('resize', this._onResize.bind(this), false);
+        this._textScanner.prepare();
 
-            const visualViewport = window.visualViewport;
-            if (visualViewport !== null && typeof visualViewport === 'object') {
-                window.visualViewport.addEventListener('scroll', this._onVisualViewportScroll.bind(this));
-                window.visualViewport.addEventListener('resize', this._onVisualViewportResize.bind(this));
-            }
+        window.addEventListener('resize', this._onResize.bind(this), false);
+        DOM.addFullscreenChangeEventListener(this._updatePopup.bind(this));
 
-            yomichan.on('orphaned', this._onOrphaned.bind(this));
-            yomichan.on('optionsUpdated', this.updateOptions.bind(this));
-            yomichan.on('zoomChanged', this._onZoomChanged.bind(this));
-            chrome.runtime.onMessage.addListener(this._onRuntimeMessage.bind(this));
+        const visualViewport = window.visualViewport;
+        if (visualViewport !== null && typeof visualViewport === 'object') {
+            window.visualViewport.addEventListener('scroll', this._onVisualViewportScroll.bind(this));
+            window.visualViewport.addEventListener('resize', this._onVisualViewportResize.bind(this));
+        }
 
-            this._textScanner.on('clearSelection', this._onClearSelection.bind(this));
-            this._textScanner.on('activeModifiersChanged', this._onActiveModifiersChanged.bind(this));
+        yomichan.on('orphaned', this._onOrphaned.bind(this));
+        yomichan.on('optionsUpdated', this.updateOptions.bind(this));
+        yomichan.on('zoomChanged', this._onZoomChanged.bind(this));
+        chrome.runtime.onMessage.addListener(this._onRuntimeMessage.bind(this));
 
-            this._updateContentScale();
-            this._broadcastRootPopupInformation();
-        } catch (e) {
-            yomichan.logError(e);
-        }
-    }
+        this._textScanner.on('clearSelection', this._onClearSelection.bind(this));
+        this._textScanner.on('activeModifiersChanged', this._onActiveModifiersChanged.bind(this));
 
-    async setPopup(popup) {
-        this._textScanner.clearSelection(true);
-        this._popup = popup;
-        await popup.setOptionsContext(await this.getOptionsContext(), this._id);
+        api.crossFrame.registerHandlers([
+            ['getUrl', {async: false, handler: this._onApiGetUrl.bind(this)}]
+        ]);
+
+        this._updateContentScale();
+        this._broadcastRootPopupInformation();
     }
 
     setDisabledOverride(disabled) {
@@ -112,8 +137,16 @@ class Frontend {
     }
 
     async getOptionsContext() {
-        const url = this._getUrl !== null ? await this._getUrl() : window.location.href;
-        const depth = this._popup.depth;
+        let url = window.location.href;
+        if (this._useProxyPopup) {
+            try {
+                url = await api.crossFrame.invoke(this._parentFrameId, 'getUrl', {});
+            } catch (e) {
+                // NOP
+            }
+        }
+
+        const depth = this._depth;
         const modifierKeys = [...this._activeModifiers];
         return {depth, url, modifierKeys};
     }
@@ -121,6 +154,9 @@ class Frontend {
     async updateOptions() {
         const optionsContext = await this.getOptionsContext();
         this._options = await api.optionsGet(optionsContext);
+
+        await this._updatePopup();
+
         this._textScanner.setOptions(this._options);
         this._updateTextScannerEnabled();
 
@@ -130,8 +166,6 @@ class Frontend {
         }
         this._textScanner.ignoreNodes = ignoreNodes.join(',');
 
-        await this._popup.setOptionsContext(optionsContext, this._id);
-
         this._updateContentScale();
 
         const textSourceCurrent = this._textScanner.getCurrentTextSource();
@@ -167,6 +201,12 @@ class Frontend {
         this._broadcastDocumentInformation(uniqueId);
     }
 
+    // API message handlers
+
+    _onApiGetUrl() {
+        return window.location.href;
+    }
+
     // Private
 
     _onResize() {
@@ -223,6 +263,95 @@ class Frontend {
         await this.updateOptions();
     }
 
+    async _updatePopup() {
+        const showIframePopupsInRootFrame = this._options.general.showIframePopupsInRootFrame;
+        const isIframe = !this._useProxyPopup && (window !== window.parent);
+
+        let popupPromise;
+        if (
+            isIframe &&
+            showIframePopupsInRootFrame &&
+            DOM.getFullscreenElement() === null &&
+            this._allowRootFramePopupProxy
+        ) {
+            popupPromise = this._popupCache.get('iframe');
+            if (typeof popupPromise === 'undefined') {
+                popupPromise = this._getIframeProxyPopup();
+                this._popupCache.set('iframe', popupPromise);
+            }
+        } else if (this._useProxyPopup) {
+            popupPromise = this._popupCache.get('proxy');
+            if (typeof popupPromise === 'undefined') {
+                popupPromise = this._getProxyPopup();
+                this._popupCache.set('proxy', popupPromise);
+            }
+        } else {
+            popupPromise = this._popupCache.get('default');
+            if (typeof popupPromise === 'undefined') {
+                popupPromise = this._getDefaultPopup();
+                this._popupCache.set('default', popupPromise);
+            }
+        }
+
+        // The token below is used as a unique identifier to ensure that a new _updatePopup call
+        // hasn't been started during the await.
+        const token = {};
+        this._updatePopupToken = token;
+        const popup = await popupPromise;
+        const optionsContext = await this.getOptionsContext();
+        if (this._updatePopupToken !== token) { return; }
+        await popup.setOptionsContext(optionsContext, this._id);
+        if (this._updatePopupToken !== token) { return; }
+
+        if (this._isSearchPage) {
+            this.setDisabledOverride(!this._options.scanning.enableOnSearchPage);
+        }
+
+        this._textScanner.clearSelection(true);
+        this._popup = popup;
+        this._depth = popup.depth;
+    }
+
+    async _getDefaultPopup() {
+        return this._popupFactory.getOrCreatePopup(null, null, this._depth);
+    }
+
+    async _getProxyPopup() {
+        const popup = new PopupProxy(null, this._depth + 1, this._proxyPopupId, this._parentFrameId);
+        await popup.prepare();
+        return popup;
+    }
+
+    async _getIframeProxyPopup() {
+        const rootPopupInformationPromise = yomichan.getTemporaryListenerResult(
+            chrome.runtime.onMessage,
+            ({action, params}, {resolve}) => {
+                if (action === 'rootPopupInformation') {
+                    resolve(params);
+                }
+            }
+        );
+        api.broadcastTab('rootPopupRequestInformationBroadcast');
+        const {popupId, frameId: parentFrameId} = await rootPopupInformationPromise;
+
+        const popup = new PopupProxy(popupId, 0, null, parentFrameId, this._frameOffsetForwarder);
+        popup.on('offsetNotFound', () => {
+            this._allowRootFramePopupProxy = false;
+            this._updatePopup();
+        });
+        await popup.prepare();
+
+        return popup;
+    }
+
+    _ignoreElements() {
+        return this._popup === null || this._popup.isProxy() ? [] : [this._popup.getFrame()];
+    }
+
+    _ignorePoint(x, y) {
+        return this._popup !== null && this._popup.containsPoint(x, y);
+    }
+
     async _search(textSource, cause) {
         await this._updatePendingOptions();
 
@@ -318,7 +447,7 @@ class Frontend {
     _updateTextScannerEnabled() {
         const enabled = (
             this._options.general.enable &&
-            this._popup.depth <= this._options.scanning.popupNestingMaxDepth &&
+            this._depth <= this._options.scanning.popupNestingMaxDepth &&
             !this._disabledOverride
         );
         this._enabledEventListeners.removeAllEventListeners();
@@ -342,27 +471,41 @@ class Frontend {
         if (contentScale === this._contentScale) { return; }
 
         this._contentScale = contentScale;
-        this._popup.setContentScale(this._contentScale);
+        if (this._popup !== null) {
+            this._popup.setContentScale(this._contentScale);
+        }
         this._updatePopupPosition();
     }
 
     async _updatePopupPosition() {
         const textSource = this._textScanner.getCurrentTextSource();
-        if (textSource !== null && await this._popup.isVisible()) {
+        if (
+            textSource !== null &&
+            this._popup !== null &&
+            await this._popup.isVisible()
+        ) {
             this._showPopupContent(textSource, await this.getOptionsContext());
         }
     }
 
     _broadcastRootPopupInformation() {
-        if (!this._popup.isProxy() && this._popup.depth === 0 && this._popup.frameId === 0) {
-            api.broadcastTab('rootPopupInformation', {popupId: this._popup.id, frameId: this._popup.frameId});
+        if (
+            this._popup !== null &&
+            !this._popup.isProxy() &&
+            this._depth === 0 &&
+            this._frameId === 0
+        ) {
+            api.broadcastTab('rootPopupInformation', {
+                popupId: this._popup.id,
+                frameId: this._frameId
+            });
         }
     }
 
     _broadcastDocumentInformation(uniqueId) {
         api.broadcastTab('documentInformationBroadcast', {
             uniqueId,
-            frameId: this._popup.frameId,
+            frameId: this._frameId,
             title: document.title
         });
     }
diff --git a/ext/fg/js/popup-factory.js b/ext/fg/js/popup-factory.js
index b5997253..4edda91f 100644
--- a/ext/fg/js/popup-factory.js
+++ b/ext/fg/js/popup-factory.js
@@ -39,8 +39,7 @@ class PopupFactory {
             ['showContent',        {async: true,  handler: this._onApiShowContent.bind(this)}],
             ['setCustomCss',       {async: false, handler: this._onApiSetCustomCss.bind(this)}],
             ['clearAutoPlayTimer', {async: false, handler: this._onApiClearAutoPlayTimer.bind(this)}],
-            ['setContentScale',    {async: false, handler: this._onApiSetContentScale.bind(this)}],
-            ['getUrl',             {async: false, handler: this._onApiGetUrl.bind(this)}]
+            ['setContentScale',    {async: false, handler: this._onApiSetContentScale.bind(this)}]
         ]);
     }
 
@@ -147,10 +146,6 @@ class PopupFactory {
         return popup.setContentScale(scale);
     }
 
-    _onApiGetUrl() {
-        return window.location.href;
-    }
-
     // Private functions
 
     _getPopup(id) {
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 14ddcafb..a6602eae 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -104,10 +104,6 @@ class PopupProxy extends EventDispatcher {
         this._invoke('setContentScale', {id: this._id, scale});
     }
 
-    async getUrl() {
-        return await this._invoke('getUrl', {});
-    }
-
     // Private
 
     _invoke(action, params={}) {
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index af24989f..4394a965 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -415,16 +415,7 @@ class Popup {
             return;
         }
 
-        const fullscreenEvents = [
-            'fullscreenchange',
-            'MSFullscreenChange',
-            'mozfullscreenchange',
-            'webkitfullscreenchange'
-        ];
-        const onFullscreenChanged = this._onFullscreenChanged.bind(this);
-        for (const eventName of fullscreenEvents) {
-            this._fullscreenEventListeners.addEventListener(document, eventName, onFullscreenChanged, false);
-        }
+        DOM.addFullscreenChangeEventListener(this._onFullscreenChanged.bind(this), this._fullscreenEventListeners);
     }
 
     _onFullscreenChanged() {
diff --git a/ext/mixed/js/dom.js b/ext/mixed/js/dom.js
index 05764443..59fea9f6 100644
--- a/ext/mixed/js/dom.js
+++ b/ext/mixed/js/dom.js
@@ -77,6 +77,24 @@ class DOM {
         return (typeof key === 'string' ? (key.length === 1 ? key.toUpperCase() : key) : '');
     }
 
+    static addFullscreenChangeEventListener(onFullscreenChanged, eventListenerCollection=null) {
+        const target = document;
+        const options = false;
+        const fullscreenEventNames = [
+            'fullscreenchange',
+            'MSFullscreenChange',
+            'mozfullscreenchange',
+            'webkitfullscreenchange'
+        ];
+        for (const eventName of fullscreenEventNames) {
+            if (eventListenerCollection === null) {
+                target.addEventListener(eventName, onFullscreenChanged, options);
+            } else {
+                eventListenerCollection.addEventListener(target, eventName, onFullscreenChanged, options);
+            }
+        }
+    }
+
     static getFullscreenElement() {
         return (
             document.fullscreenElement ||
diff --git a/ext/mixed/js/text-scanner.js b/ext/mixed/js/text-scanner.js
index fb275452..7c705fc8 100644
--- a/ext/mixed/js/text-scanner.js
+++ b/ext/mixed/js/text-scanner.js
@@ -28,6 +28,7 @@ class TextScanner extends EventDispatcher {
         this._ignorePoint = ignorePoint;
         this._search = search;
 
+        this._isPrepared = false;
         this._ignoreNodes = null;
 
         this._causeCurrent = null;
@@ -69,10 +70,15 @@ class TextScanner extends EventDispatcher {
         return this._causeCurrent;
     }
 
+    prepare() {
+        this._isPrepared = true;
+        this.setEnabled(this._enabled);
+    }
+
     setEnabled(enabled) {
         this._eventListeners.removeAllEventListeners();
         this._enabled = enabled;
-        if (this._enabled) {
+        if (this._enabled && this._isPrepared) {
             this._hookEvents();
         } else {
             this.clearSelection(true);
-- 
cgit v1.2.3


From 65c41975a6dca0610c7dc4454ece9534f3636893 Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Mon, 22 Jun 2020 19:26:59 -0400
Subject: Secure popup frame url changes (#622)

* Throw error if options is not ready

* Remove id

* Change unsecurePopupFrameUrl to useSecurePopupFrameUrl
---
 ext/bg/data/options-schema.json |  6 +++---
 ext/bg/js/options.js            |  2 +-
 ext/bg/settings.html            |  2 +-
 ext/fg/js/popup.js              | 13 +++++++++----
 4 files changed, 14 insertions(+), 9 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json
index 5885e036..f8791433 100644
--- a/ext/bg/data/options-schema.json
+++ b/ext/bg/data/options-schema.json
@@ -110,7 +110,7 @@
                                     "showPitchAccentPositionNotation",
                                     "showPitchAccentGraph",
                                     "showIframePopupsInRootFrame",
-                                    "unsecurePopupFrameUrl"
+                                    "useSecurePopupFrameUrl"
                                 ],
                                 "properties": {
                                     "enable": {
@@ -249,9 +249,9 @@
                                         "type": "boolean",
                                         "default": false
                                     },
-                                    "unsecurePopupFrameUrl": {
+                                    "useSecurePopupFrameUrl": {
                                         "type": "boolean",
-                                        "default": false
+                                        "default": true
                                     }
                                 }
                             },
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 170e4799..151c945b 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -177,7 +177,7 @@ function profileOptionsCreateDefaults() {
             showPitchAccentPositionNotation: true,
             showPitchAccentGraph: false,
             showIframePopupsInRootFrame: false,
-            unsecurePopupFrameUrl: false
+            useSecurePopupFrameUrl: true
         },
 
         audio: {
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 77b61aef..4de70b7e 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -183,7 +183,7 @@
                 
 
                 

-                    
+                    
                 

 
                 

diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 4394a965..3b14d3d0 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -326,19 +326,24 @@ class Popup {
     }
 
     async _createInjectPromise() {
+        if (this._options === null) {
+            throw new Error('Options not initialized');
+        }
+
+        const {useSecurePopupFrameUrl} = this._options.general;
+
         this._injectStyles();
 
-        const unsecurePopupFrameUrl = (this._options !== null && this._options.general.unsecurePopupFrameUrl);
         const {secret, token} = await this._initializeFrame(this._frame, this._targetOrigin, this._frameId, (frame) => {
             frame.removeAttribute('src');
             frame.removeAttribute('srcdoc');
             this._observeFullscreen(true);
             this._onFullscreenChanged();
             const url = chrome.runtime.getURL('/fg/float.html');
-            if (unsecurePopupFrameUrl) {
-                frame.setAttribute('src', url);
-            } else {
+            if (useSecurePopupFrameUrl) {
                 frame.contentDocument.location.href = url;
+            } else {
+                frame.setAttribute('src', url);
             }
         });
         this._frameSecret = secret;
-- 
cgit v1.2.3


From 96932119f8627725774ffdc66a82326d7302db30 Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Mon, 22 Jun 2020 19:27:40 -0400
Subject: Remove window. from visualViewport, use local variable instead (#621)

---
 ext/fg/js/frontend.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 71e53b03..ae0953f9 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -106,8 +106,8 @@ class Frontend {
 
         const visualViewport = window.visualViewport;
         if (visualViewport !== null && typeof visualViewport === 'object') {
-            window.visualViewport.addEventListener('scroll', this._onVisualViewportScroll.bind(this));
-            window.visualViewport.addEventListener('resize', this._onVisualViewportResize.bind(this));
+            visualViewport.addEventListener('scroll', this._onVisualViewportScroll.bind(this));
+            visualViewport.addEventListener('resize', this._onVisualViewportResize.bind(this));
         }
 
         yomichan.on('orphaned', this._onOrphaned.bind(this));
-- 
cgit v1.2.3


From 3e68af8666bdf9a6d8d605f7a3bb0432c8d6cb33 Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Wed, 24 Jun 2020 21:46:13 -0400
Subject: Shadow DOM container for popup iframes (#623)

* Add support for injecting stylesheets into a custom parent node

* Add api.getStylesheetContent

* Add support for injecting a CSS file's content

* Add usePopupShadowDom option

* Use a per-parentNode cache

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

* Ignore the popup container instead of the frame
---
 ext/bg/data/options-schema.json |  7 ++++-
 ext/bg/js/backend.js            |  8 ++++++
 ext/bg/js/options.js            |  3 +-
 ext/bg/settings.html            |  4 +++
 ext/fg/js/frontend.js           |  2 +-
 ext/fg/js/popup.js              | 62 +++++++++++++++++++++++++++++++++++------
 ext/mixed/js/api.js             |  4 +++
 ext/mixed/js/dynamic-loader.js  | 49 ++++++++++++++++++++++++++------
 8 files changed, 119 insertions(+), 20 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json
index f8791433..b56017bc 100644
--- a/ext/bg/data/options-schema.json
+++ b/ext/bg/data/options-schema.json
@@ -110,7 +110,8 @@
                                     "showPitchAccentPositionNotation",
                                     "showPitchAccentGraph",
                                     "showIframePopupsInRootFrame",
-                                    "useSecurePopupFrameUrl"
+                                    "useSecurePopupFrameUrl",
+                                    "usePopupShadowDom"
                                 ],
                                 "properties": {
                                     "enable": {
@@ -252,6 +253,10 @@
                                     "useSecurePopupFrameUrl": {
                                         "type": "boolean",
                                         "default": true
+                                    },
+                                    "usePopupShadowDom": {
+                                        "type": "boolean",
+                                        "default": true
                                     }
                                 }
                             },
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index b89cb641..344706d1 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -108,6 +108,7 @@ class Backend {
             ['broadcastTab',                 {async: false, contentScript: true,  handler: this._onApiBroadcastTab.bind(this)}],
             ['frameInformationGet',          {async: true,  contentScript: true,  handler: this._onApiFrameInformationGet.bind(this)}],
             ['injectStylesheet',             {async: true,  contentScript: true,  handler: this._onApiInjectStylesheet.bind(this)}],
+            ['getStylesheetContent',         {async: true,  contentScript: true,  handler: this._onApiGetStylesheetContent.bind(this)}],
             ['getEnvironmentInfo',           {async: false, contentScript: true,  handler: this._onApiGetEnvironmentInfo.bind(this)}],
             ['clipboardGet',                 {async: true,  contentScript: true,  handler: this._onApiClipboardGet.bind(this)}],
             ['getDisplayTemplatesHtml',      {async: true,  contentScript: true,  handler: this._onApiGetDisplayTemplatesHtml.bind(this)}],
@@ -719,6 +720,13 @@ class Backend {
         });
     }
 
+    async _onApiGetStylesheetContent({url}) {
+        if (!url.startsWith('/') || url.startsWith('//') || !url.endsWith('.css')) {
+            throw new Error('Invalid URL');
+        }
+        return await requestText(url, 'GET');
+    }
+
     _onApiGetEnvironmentInfo() {
         return this.environment.getInfo();
     }
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 151c945b..ccc56848 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -177,7 +177,8 @@ function profileOptionsCreateDefaults() {
             showPitchAccentPositionNotation: true,
             showPitchAccentGraph: false,
             showIframePopupsInRootFrame: false,
-            useSecurePopupFrameUrl: true
+            useSecurePopupFrameUrl: true,
+            usePopupShadowDom: true
         },
 
         audio: {
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 4de70b7e..51cb14e7 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -186,6 +186,10 @@
                     
                 

 
+                

+                    
+                

+
                 

                     
                 

diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index ae0953f9..f6b0d236 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -345,7 +345,7 @@ class Frontend {
     }
 
     _ignoreElements() {
-        return this._popup === null || this._popup.isProxy() ? [] : [this._popup.getFrame()];
+        return this._popup === null || this._popup.isProxy() ? [] : [this._popup.getContainer()];
     }
 
     _ignorePoint(x, y) {
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 3b14d3d0..5ee62c9b 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -47,6 +47,9 @@ class Popup {
         this._frame.style.width = '0';
         this._frame.style.height = '0';
 
+        this._container = this._frame;
+        this._shadow = null;
+
         this._fullscreenEventListeners = new EventListenerCollection();
     }
 
@@ -180,7 +183,12 @@ class Popup {
     }
 
     async setCustomOuterCss(css, useWebExtensionApi) {
-        return await dynamicLoader.loadStyle('yomichan-popup-outer-user-stylesheet', 'code', css, useWebExtensionApi);
+        let parentNode = null;
+        if (this._shadow !== null) {
+            useWebExtensionApi = false;
+            parentNode = this._shadow;
+        }
+        return await dynamicLoader.loadStyle('yomichan-popup-outer-user-stylesheet', 'code', css, useWebExtensionApi, parentNode);
     }
 
     setChildrenSupported(value) {
@@ -195,6 +203,10 @@ class Popup {
         return this._frame.getBoundingClientRect();
     }
 
+    getContainer() {
+        return this._container;
+    }
+
     // Private functions
 
     _inject() {
@@ -330,9 +342,9 @@ class Popup {
             throw new Error('Options not initialized');
         }
 
-        const {useSecurePopupFrameUrl} = this._options.general;
+        const {useSecurePopupFrameUrl, usePopupShadowDom} = this._options.general;
 
-        this._injectStyles();
+        await this._setUpContainer(usePopupShadowDom);
 
         const {secret, token} = await this._initializeFrame(this._frame, this._targetOrigin, this._frameId, (frame) => {
             frame.removeAttribute('src');
@@ -382,9 +394,9 @@ class Popup {
     }
 
     _resetFrame() {
-        const parent = this._frame.parentNode;
+        const parent = this._container.parentNode;
         if (parent !== null) {
-            parent.removeChild(this._frame);
+            parent.removeChild(this._container);
         }
         this._frame.removeAttribute('src');
         this._frame.removeAttribute('srcdoc');
@@ -395,9 +407,31 @@ class Popup {
         this._injectPromiseComplete = false;
     }
 
+    async _setUpContainer(usePopupShadowDom) {
+        if (usePopupShadowDom && typeof this._frame.attachShadow === 'function') {
+            const container = document.createElement('div');
+            container.style.setProperty('all', 'initial', 'important');
+            const shadow = container.attachShadow({mode: 'closed', delegatesFocus: true});
+            shadow.appendChild(this._frame);
+
+            this._container = container;
+            this._shadow = shadow;
+        } else {
+            const frameParentNode = this._frame.parentNode;
+            if (frameParentNode !== null) {
+                frameParentNode.removeChild(this._frame);
+            }
+
+            this._container = this._frame;
+            this._shadow = null;
+        }
+
+        await this._injectStyles();
+    }
+
     async _injectStyles() {
         try {
-            await dynamicLoader.loadStyle('yomichan-popup-outer-stylesheet', 'file', '/fg/css/client.css', true);
+            await this._injectPopupOuterStylesheet();
         } catch (e) {
             // NOP
         }
@@ -409,6 +443,18 @@ class Popup {
         }
     }
 
+    async _injectPopupOuterStylesheet() {
+        let fileType = 'file';
+        let useWebExtensionApi = true;
+        let parentNode = null;
+        if (this._shadow !== null) {
+            fileType = 'file-content';
+            useWebExtensionApi = false;
+            parentNode = this._shadow;
+        }
+        await dynamicLoader.loadStyle('yomichan-popup-outer-stylesheet', fileType, '/fg/css/client.css', useWebExtensionApi, parentNode);
+    }
+
     _observeFullscreen(observe) {
         if (!observe) {
             this._fullscreenEventListeners.removeAllEventListeners();
@@ -425,8 +471,8 @@ class Popup {
 
     _onFullscreenChanged() {
         const parent = this._getFrameParentElement();
-        if (parent !== null && this._frame.parentNode !== parent) {
-            parent.appendChild(this._frame);
+        if (parent !== null && this._container.parentNode !== parent) {
+            parent.appendChild(this._container);
         }
     }
 
diff --git a/ext/mixed/js/api.js b/ext/mixed/js/api.js
index c54196e2..5c17d50e 100644
--- a/ext/mixed/js/api.js
+++ b/ext/mixed/js/api.js
@@ -121,6 +121,10 @@ const api = (() => {
             return this._invoke('injectStylesheet', {type, value});
         }
 
+        getStylesheetContent(url) {
+            return this._invoke('getStylesheetContent', {url});
+        }
+
         getEnvironmentInfo() {
             return this._invoke('getEnvironmentInfo');
         }
diff --git a/ext/mixed/js/dynamic-loader.js b/ext/mixed/js/dynamic-loader.js
index 37f85112..981d1ee5 100644
--- a/ext/mixed/js/dynamic-loader.js
+++ b/ext/mixed/js/dynamic-loader.js
@@ -21,14 +21,36 @@
 
 const dynamicLoader = (() => {
     const injectedStylesheets = new Map();
+    const injectedStylesheetsWithParent = new WeakMap();
 
-    async function loadStyle(id, type, value, useWebExtensionApi=false) {
+    function getInjectedStylesheet(id, parentNode) {
+        if (parentNode === null) {
+            return injectedStylesheets.get(id);
+        }
+        const map = injectedStylesheetsWithParent.get(parentNode);
+        return typeof map !== 'undefined' ? map.get(id) : void 0;
+    }
+
+    function setInjectedStylesheet(id, parentNode, value) {
+        if (parentNode === null) {
+            injectedStylesheets.set(id, value);
+            return;
+        }
+        let map = injectedStylesheetsWithParent.get(parentNode);
+        if (typeof map === 'undefined') {
+            map = new Map();
+            injectedStylesheetsWithParent.set(parentNode, map);
+        }
+        map.set(id, value);
+    }
+
+    async function loadStyle(id, type, value, useWebExtensionApi=false, parentNode=null) {
         if (useWebExtensionApi && yomichan.isExtensionUrl(window.location.href)) {
             // Permissions error will occur if trying to use the WebExtension API to inject into an extension page
             useWebExtensionApi = false;
         }
 
-        let styleNode = injectedStylesheets.get(id);
+        let styleNode = getInjectedStylesheet(id, parentNode);
         if (typeof styleNode !== 'undefined') {
             if (styleNode === null) {
                 // Previously injected via WebExtension API
@@ -38,21 +60,30 @@ const dynamicLoader = (() => {
             styleNode = null;
         }
 
+        if (type === 'file-content') {
+            value = await api.getStylesheetContent(value);
+            type = 'code';
+            useWebExtensionApi = false;
+        }
+
         if (useWebExtensionApi) {
             // Inject via WebExtension API
             if (styleNode !== null && styleNode.parentNode !== null) {
                 styleNode.parentNode.removeChild(styleNode);
             }
 
-            injectedStylesheets.set(id, null);
+            setInjectedStylesheet(id, parentNode, null);
             await api.injectStylesheet(type, value);
             return null;
         }
 
         // Create node in document
-        const parentNode = document.head;
-        if (parentNode === null) {
-            throw new Error('No parent node');
+        let parentNode2 = parentNode;
+        if (parentNode2 === null) {
+            parentNode2 = document.head;
+            if (parentNode2 === null) {
+                throw new Error('No parent node');
+            }
         }
 
         // Create or reuse node
@@ -74,12 +105,12 @@ const dynamicLoader = (() => {
         }
 
         // Update parent
-        if (styleNode.parentNode !== parentNode) {
-            parentNode.appendChild(styleNode);
+        if (styleNode.parentNode !== parentNode2) {
+            parentNode2.appendChild(styleNode);
         }
 
         // Add to map
-        injectedStylesheets.set(id, styleNode);
+        setInjectedStylesheet(id, parentNode, styleNode);
         return styleNode;
     }
 
-- 
cgit v1.2.3


From 6ee50b3c95c970234f9f0151dc2ab55dea51c741 Mon Sep 17 00:00:00 2001
From: toasted-nutbread 
Date: Thu, 25 Jun 2020 18:32:29 -0400
Subject: Make PopupFactory.prepare non-async (#625)

---
 ext/bg/js/search.js                            | 2 +-
 ext/bg/js/settings/popup-preview-frame-main.js | 2 +-
 ext/fg/js/content-script-main.js               | 2 +-
 ext/fg/js/float.js                             | 2 +-
 ext/fg/js/popup-factory.js                     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'ext/fg')

diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 88be335f..e968e8cf 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -438,7 +438,7 @@ class DisplaySearch extends Display {
         const {frameId} = await api.frameInformationGet();
 
         const popupFactory = new PopupFactory(frameId);
-        await popupFactory.prepare();
+        popupFactory.prepare();
 
         const frontend = new Frontend(
             frameId,
diff --git a/ext/bg/js/settings/popup-preview-frame-main.js b/ext/bg/js/settings/popup-preview-frame-main.js
index 4c6096ec..866b9f57 100644
--- a/ext/bg/js/settings/popup-preview-frame-main.js
+++ b/ext/bg/js/settings/popup-preview-frame-main.js
@@ -28,7 +28,7 @@
         const {frameId} = await api.frameInformationGet();
 
         const popupFactory = new PopupFactory(frameId);
-        await popupFactory.prepare();
+        popupFactory.prepare();
 
         const preview = new PopupPreviewFrame(frameId, popupFactory);
         await preview.prepare();
diff --git a/ext/fg/js/content-script-main.js b/ext/fg/js/content-script-main.js
index c4aa1bca..1f3a69e5 100644
--- a/ext/fg/js/content-script-main.js
+++ b/ext/fg/js/content-script-main.js
@@ -32,7 +32,7 @@
         }
 
         const popupFactory = new PopupFactory(frameId);
-        await popupFactory.prepare();
+        popupFactory.prepare();
 
         const frontend = new Frontend(
             frameId,
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 199990e5..d7beb675 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -241,7 +241,7 @@ class DisplayFloat extends Display {
         const {frameId} = await api.frameInformationGet();
 
         const popupFactory = new PopupFactory(frameId);
-        await popupFactory.prepare();
+        popupFactory.prepare();
 
         const frontend = new Frontend(
             frameId,
diff --git a/ext/fg/js/popup-factory.js b/ext/fg/js/popup-factory.js
index 4edda91f..904f18b9 100644
--- a/ext/fg/js/popup-factory.js
+++ b/ext/fg/js/popup-factory.js
@@ -28,7 +28,7 @@ class PopupFactory {
 
     // Public functions
 
-    async prepare() {
+    prepare() {
         api.crossFrame.registerHandlers([
             ['getOrCreatePopup',   {async: false, handler: this._onApiGetOrCreatePopup.bind(this)}],
             ['setOptionsContext',  {async: true,  handler: this._onApiSetOptionsContext.bind(this)}],
-- 
cgit v1.2.3