Application main updates (#708)

* Move waitForBackendReady * Add option to wait for DOM before running main * Move script load to be earlier
author: toasted-nutbread <toasted-nutbread@users.noreply.github.com> 2024-02-18 09:27:16 -0500
committer: GitHub <noreply@github.com> 2024-02-18 14:27:16 +0000
commit: 65fa65fc7765bc9a6557d3ce6f8bdcef5b5e0cf7 (patch)
tree: 4e91bc8ec3e0dadbabe3e3d4c6c92d2b6f9fd2a5
parent: cfc65c31313731dfa0d36c2eceaca35e9d50992f (diff)
23 files changed, 61 insertions, 70 deletions
diff --git a/ext/action-popup.html b/ext/action-popup.html
index b60e7055..d86fe2ac 100644
--- a/ext/action-popup.html
+++ b/ext/action-popup.html
@@ -12,6 +12,7 @@
     <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64">
     <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
     <link rel="stylesheet" type="text/css" href="/css/action-popup.css">
+    <script src="/js/pages/action-popup-main.js" type="module"></script>
 </head>
 <body>
 
@@ -81,8 +82,5 @@
     </a>
 </div>
 
-<!-- Scripts -->
-<script src="/js/pages/action-popup-main.js" type="module"></script>
-
 </body>
 </html>
diff --git a/ext/background.html b/ext/background.html
index dc88f397..92e68c34 100644
--- a/ext/background.html
+++ b/ext/background.html
@@ -12,14 +12,12 @@
     <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64">
     <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
     <link rel="stylesheet" type="text/css" href="/css/background.css">
+    <script src="/js/background/background-main.js" type="module"></script>
 </head>
 <body>
 
 <textarea id="clipboard-paste-target"></textarea>
 
-<!-- Scripts -->
-<script src="/js/background/background-main.js" type="module"></script>
-
 <!--
     Due to a Firefox bug, this next element is purposefully terminated incorrectly.
     This element must appear directly inside the <body> element, and it must not be closed properly.
diff --git a/ext/info.html b/ext/info.html
index cb80053d..0d81fc15 100644
--- a/ext/info.html
+++ b/ext/info.html
@@ -13,6 +13,7 @@
     <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
     <link rel="stylesheet" type="text/css" href="/css/material.css">
     <link rel="stylesheet" type="text/css" href="/css/settings.css">
+    <script src="/js/pages/info-main.js" type="module"></script>
 </head>
 <body>
 
@@ -59,8 +60,5 @@
 <div class="content-right"></div>
 </div></div>
 
-<!-- Scripts -->
-<script src="/js/pages/info-main.js" type="module"></script>
-
 </body>
 </html>
diff --git a/ext/issues.html b/ext/issues.html
index 904fbf16..3c19aa0e 100644
--- a/ext/issues.html
+++ b/ext/issues.html
@@ -13,6 +13,7 @@
     <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
     <link rel="stylesheet" type="text/css" href="/css/material.css">
     <link rel="stylesheet" type="text/css" href="/css/settings.css">
+    <script src="/js/pages/generic-page-main.js" type="module"></script>
 </head>
 <body>
 
@@ -75,8 +76,5 @@
 <div class="content-right"></div>
 </div></div>
 
-<!-- Scripts -->
-<script src="/js/pages/generic-page-main.js" type="module"></script>
-
 </body>
 </html>
diff --git a/ext/js/app/content-script-main.js b/ext/js/app/content-script-main.js
index 34160fd1..c17acbfe 100644
--- a/ext/js/app/content-script-main.js
+++ b/ext/js/app/content-script-main.js
@@ -21,7 +21,7 @@ import {HotkeyHandler} from '../input/hotkey-handler.js';
 import {Frontend} from './frontend.js';
 import {PopupFactory} from './popup-factory.js';
 
-await Application.main(async (application) => {
+await Application.main(false, async (application) => {
     const hotkeyHandler = new HotkeyHandler();
     hotkeyHandler.prepare(application.crossFrame);
 
diff --git a/ext/js/application.js b/ext/js/application.js
index 350a4210..ec5c7e02 100644
--- a/ext/js/application.js
+++ b/ext/js/application.js
@@ -52,6 +52,41 @@ if (checkChromeNotAvailable()) {
 }
 
 /**
+ * @param {WebExtension} webExtension
+ */
+async function waitForBackendReady(webExtension) {
+    const {promise, resolve} = /** @type {import('core').DeferredPromiseDetails<void>} */ (deferPromise());
+    /** @type {import('application').ApiMap} */
+    const apiMap = createApiMap([['applicationBackendReady', () => { resolve(); }]]);
+    /** @type {import('extension').ChromeRuntimeOnMessageCallback<import('application').ApiMessageAny>} */
+    const onMessage = ({action, params}, _sender, callback) => invokeApiMapHandler(apiMap, action, params, [], callback);
+    chrome.runtime.onMessage.addListener(onMessage);
+    try {
+        await webExtension.sendMessagePromise({action: 'requestBackendReadySignal'});
+        await promise;
+    } finally {
+        chrome.runtime.onMessage.removeListener(onMessage);
+    }
+}
+
+/**
+ * @returns {Promise<void>}
+ */
+function waitForDomContentLoaded() {
+    return new Promise((resolve) => {
+        if (document.readyState !== 'loading') {
+            resolve();
+            return;
+        }
+        const onDomContentLoaded = () => {
+            document.removeEventListener('DOMContentLoaded', onDomContentLoaded);
+            resolve();
+        };
+        document.addEventListener('DOMContentLoaded', onDomContentLoaded);
+    });
+}
+
+/**
  * The Yomitan class is a core component through which various APIs are handled and invoked.
  * @augments EventDispatcher<import('application').Events>
  */
@@ -151,18 +186,20 @@ export class Application extends EventDispatcher {
     }
 
     /**
+     * @param {boolean} waitForDom
      * @param {(application: Application) => (Promise<void>)} mainFunction
      */
-    static async main(mainFunction) {
+    static async main(waitForDom, mainFunction) {
         const webExtension = new WebExtension();
         log.configure(webExtension.extensionName);
         const api = new API(webExtension);
-        await this.waitForBackendReady(webExtension);
+        await waitForBackendReady(webExtension);
         const {tabId, frameId} = await api.frameInformationGet();
         const crossFrameApi = new CrossFrameAPI(api, tabId, frameId);
         crossFrameApi.prepare();
         const application = new Application(api, crossFrameApi);
         application.prepare();
+        if (waitForDom) { await waitForDomContentLoaded(); }
         try {
             await mainFunction(application);
         } catch (error) {
@@ -172,24 +209,6 @@ export class Application extends EventDispatcher {
         }
     }
 
-    /**
-     * @param {WebExtension} webExtension
-     */
-    static async waitForBackendReady(webExtension) {
-        const {promise, resolve} = /** @type {import('core').DeferredPromiseDetails<void>} */ (deferPromise());
-        /** @type {import('application').ApiMap} */
-        const apiMap = createApiMap([['applicationBackendReady', () => { resolve(); }]]);
-        /** @type {import('extension').ChromeRuntimeOnMessageCallback<import('application').ApiMessageAny>} */
-        const onMessage = ({action, params}, _sender, callback) => invokeApiMapHandler(apiMap, action, params, [], callback);
-        chrome.runtime.onMessage.addListener(onMessage);
-        try {
-            await webExtension.sendMessagePromise({action: 'requestBackendReadySignal'});
-            await promise;
-        } finally {
-            chrome.runtime.onMessage.removeListener(onMessage);
-        }
-    }
-
     // Private
 
     /**
diff --git a/ext/js/display/popup-main.js b/ext/js/display/popup-main.js
index 8f92aaa8..fe1d20dd 100644
--- a/ext/js/display/popup-main.js
+++ b/ext/js/display/popup-main.js
@@ -25,7 +25,7 @@ import {DisplayProfileSelection} from './display-profile-selection.js';
 import {DisplayResizer} from './display-resizer.js';
 import {Display} from './display.js';
 
-await Application.main(async (application) => {
+await Application.main(true, async (application) => {
     const documentFocusController = new DocumentFocusController();
     documentFocusController.prepare();
 
diff --git a/ext/js/display/search-main.js b/ext/js/display/search-main.js
index fd90ee0e..c3c292a1 100644
--- a/ext/js/display/search-main.js
+++ b/ext/js/display/search-main.js
@@ -26,7 +26,7 @@ import {SearchActionPopupController} from './search-action-popup-controller.js';
 import {SearchDisplayController} from './search-display-controller.js';
 import {SearchPersistentStateController} from './search-persistent-state-controller.js';
 
-await Application.main(async (application) => {
+await Application.main(true, async (application) => {
     const documentFocusController = new DocumentFocusController('#search-textbox');
     documentFocusController.prepare();
 
diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js
index f58083a7..0a14c669 100644
--- a/ext/js/pages/action-popup-main.js
+++ b/ext/js/pages/action-popup-main.js
@@ -306,7 +306,7 @@ class DisplayController {
     }
 }
 
-await Application.main(async (application) => {
+await Application.main(true, async (application) => {
     application.api.logIndicatorClear();
 
     const displayController = new DisplayController(application.api);
diff --git a/ext/js/pages/info-main.js b/ext/js/pages/info-main.js
index 0bc84d97..dda1c4e2 100644
--- a/ext/js/pages/info-main.js
+++ b/ext/js/pages/info-main.js
@@ -115,7 +115,7 @@ async function showDictionaryInfo(api) {
     container.appendChild(fragment);
 }
 
-await Application.main(async (application) => {
+await Application.main(true, async (application) => {
     const documentFocusController = new DocumentFocusController();
     documentFocusController.prepare();
 
diff --git a/ext/js/pages/permissions-main.js b/ext/js/pages/permissions-main.js
index 3be97b78..40dbceb2 100644
--- a/ext/js/pages/permissions-main.js
+++ b/ext/js/pages/permissions-main.js
@@ -86,7 +86,7 @@ function setupPermissionsToggles() {
     }
 }
 
-await Application.main(async (application) => {
+await Application.main(true, async (application) => {
     const documentFocusController = new DocumentFocusController();
     documentFocusController.prepare();
 
diff --git a/ext/js/pages/settings/popup-preview-frame-main.js b/ext/js/pages/settings/popup-preview-frame-main.js
index c6c694cd..978b102e 100644
--- a/ext/js/pages/settings/popup-preview-frame-main.js
+++ b/ext/js/pages/settings/popup-preview-frame-main.js
@@ -21,7 +21,7 @@ import {Application} from '../../application.js';
 import {HotkeyHandler} from '../../input/hotkey-handler.js';
 import {PopupPreviewFrame} from './popup-preview-frame.js';
 
-await Application.main(async (application) => {
+await Application.main(true, async (application) => {
     const hotkeyHandler = new HotkeyHandler();
     hotkeyHandler.prepare(application.crossFrame);
 
diff --git a/ext/js/pages/settings/settings-main.js b/ext/js/pages/settings/settings-main.js
index 0b115246..82fc91a5 100644
--- a/ext/js/pages/settings/settings-main.js
+++ b/ext/js/pages/settings/settings-main.js
@@ -58,7 +58,7 @@ async function setupGenericSettingController(genericSettingController) {
     await genericSettingController.refresh();
 }
 
-await Application.main(async (application) => {
+await Application.main(true, async (application) => {
     const documentFocusController = new DocumentFocusController();
     documentFocusController.prepare();
 
diff --git a/ext/js/pages/welcome-main.js b/ext/js/pages/welcome-main.js
index 9990b4e7..d1d1a6b2 100644
--- a/ext/js/pages/welcome-main.js
+++ b/ext/js/pages/welcome-main.js
@@ -49,7 +49,7 @@ async function setupGenericSettingsController(genericSettingController) {
     await genericSettingController.refresh();
 }
 
-await Application.main(async (application) => {
+await Application.main(true, async (application) => {
     const documentFocusController = new DocumentFocusController();
     documentFocusController.prepare();
 
diff --git a/ext/legal.html b/ext/legal.html
index bc58ed5a..effcbc35 100644
--- a/ext/legal.html
+++ b/ext/legal.html
@@ -14,6 +14,7 @@
    <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
    <link rel="stylesheet" type="text/css" href="/css/material.css">
    <link rel="stylesheet" type="text/css" href="/css/settings.css">
+   <script src="/js/pages/generic-page-main.js" type="module"></script>
 </head>
 
 <body>
@@ -90,9 +91,6 @@ and are used in conformance with the Group's <a href="https://www.edrdg.org/edrd
       </div>
    </div>
 
-   <!-- Scripts -->
-   <script src="/js/pages/generic-page-main.js" type="module"></script>
-
 </body>
 
 </html>
diff --git a/ext/offscreen.html b/ext/offscreen.html
index afb7eb44..06b582e1 100644
--- a/ext/offscreen.html
+++ b/ext/offscreen.html
@@ -12,14 +12,12 @@
     <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64">
     <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
     <link rel="stylesheet" type="text/css" href="/css/background.css">
+    <script src="/js/background/offscreen-main.js" type="module"></script>
 </head>
 <body>
 
 <textarea id="clipboard-paste-target"></textarea>
 
-<!-- Scripts -->
-<script src="/js/background/offscreen-main.js" type="module"></script>
-
 <!--
     Due to a Firefox bug, this next element is purposefully terminated incorrectly.
     This element must appear directly inside the <body> element, and it must not be closed properly.
diff --git a/ext/permissions.html b/ext/permissions.html
index 884687ab..de5fb4ad 100644
--- a/ext/permissions.html
+++ b/ext/permissions.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" type="text/css" href="/css/material.css">
     <link rel="stylesheet" type="text/css" href="/css/settings.css">
     <link rel="stylesheet" type="text/css" href="/css/permissions.css">
+    <script src="/js/pages/permissions-main.js" type="module"></script>
 </head>
 <body>
 
@@ -227,9 +228,5 @@
     </div>
 </div></div>
 
-
-<!-- Scripts -->
-<script src="/js/pages/permissions-main.js" type="module"></script>
-
 </body>
 </html>
diff --git a/ext/popup-preview.html b/ext/popup-preview.html
index 0d410455..8cbb01c9 100644
--- a/ext/popup-preview.html
+++ b/ext/popup-preview.html
@@ -13,6 +13,7 @@
     <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
     <link rel="stylesheet" type="text/css" href="/css/popup-preview.css">
     <link rel="stylesheet" type="text/css" href="/css/popup-outer.css" id="popup-outer-css">
+    <script src="/js/pages/settings/popup-preview-frame-main.js" type="module"></script>
 </head>
 <body>
 
@@ -34,8 +35,5 @@
     </div></div>
 </div></div>
 
-<!-- Scripts -->
-<script src="/js/pages/settings/popup-preview-frame-main.js" type="module"></script>
-
 </body>
 </html>
diff --git a/ext/popup.html b/ext/popup.html
index 30e8a8c0..2b55df5d 100644
--- a/ext/popup.html
+++ b/ext/popup.html
@@ -15,6 +15,7 @@
     <link rel="stylesheet" type="text/css" href="/css/display.css">
     <link rel="stylesheet" type="text/css" href="/css/display-pronunciation.css">
     <link rel="stylesheet" type="text/css" href="/css/structured-content.css">
+    <script src="/js/display/popup-main.js" type="module"></script>
 </head>
 <body>
 
@@ -92,8 +93,5 @@
 
 <div id="popup-menus"></div>
 
-<!-- Scripts -->
-<script src="/js/display/popup-main.js" type="module"></script>
-
 </body>
 </html>
diff --git a/ext/search.html b/ext/search.html
index 08c8bff5..e1fecaae 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -16,6 +16,7 @@
     <link rel="stylesheet" type="text/css" href="/css/display-pronunciation.css">
     <link rel="stylesheet" type="text/css" href="/css/structured-content.css">
     <link rel="stylesheet" type="text/css" href="/css/search.css">
+    <script src="/js/display/search-main.js" type="module"></script>
 </head>
 <body>
 
@@ -82,8 +83,5 @@
 
 <div id="popup-menus"></div>
 
-<!-- Scripts -->
-<script src="/js/display/search-main.js" type="module"></script>
-
 </body>
 </html>
diff --git a/ext/settings.html b/ext/settings.html
index fc447c29..ecb84a24 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" type="text/css" href="/css/material.css">
     <link rel="stylesheet" type="text/css" href="/css/settings.css">
     <link rel="stylesheet" type="text/css" href="/css/display-pronunciation.css">
+    <script src="/js/pages/settings/settings-main.js" type="module"></script>
 </head>
 <body>
 
@@ -3431,9 +3432,5 @@
     </div>
 </div></div>
 
-
-<!-- Scripts -->
-<script src="/js/pages/settings/settings-main.js" type="module"></script>
-
 </body>
 </html>
diff --git a/ext/template-renderer.html b/ext/template-renderer.html
index 116f1a0c..6df382a4 100644
--- a/ext/template-renderer.html
+++ b/ext/template-renderer.html
@@ -11,11 +11,9 @@
     <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48">
     <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64">
     <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
+    <script src="/js/templates/sandbox/template-renderer-frame-main.js" type="module"></script>
 </head>
 <body>
 
-<!-- Scripts -->
-<script src="/js/templates/sandbox/template-renderer-frame-main.js" type="module"></script>
-
 </body>
 </html>
diff --git a/ext/welcome.html b/ext/welcome.html
index e6104079..d15686a1 100644
--- a/ext/welcome.html
+++ b/ext/welcome.html
@@ -13,6 +13,7 @@
     <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
     <link rel="stylesheet" type="text/css" href="/css/material.css">
     <link rel="stylesheet" type="text/css" href="/css/settings.css">
+    <script src="/js/pages/welcome-main.js" type="module"></script>
 </head>
 <body>
 
@@ -425,8 +426,5 @@
     </div>
 </div></div>
 
-<!-- Scripts -->
-<script src="/js/pages/welcome-main.js" type="module"></script>
-
 </body>
 </html>
author	toasted-nutbread <toasted-nutbread@users.noreply.github.com>	2024-02-18 09:27:16 -0500
committer	GitHub <noreply@github.com>	2024-02-18 14:27:16 +0000
commit	65fa65fc7765bc9a6557d3ce6f8bdcef5b5e0cf7 (patch)
tree	4e91bc8ec3e0dadbabe3e3d4c6c92d2b6f9fd2a5
parent	cfc65c31313731dfa0d36c2eceaca35e9d50992f (diff)