Update chrome://extensions/shortcuts URLs to be clickable (#1342)

2 files changed, 61 insertions, 2 deletions

diff --git a/ext/bg/js/settings2/settings-display-controller.js b/ext/bg/js/settings2/settings-display-controller.js
index 75c147f2..9d3e5459 100644
--- a/ext/bg/js/settings2/settings-display-controller.js
+++ b/ext/bg/js/settings2/settings-display-controller.js
@@ -54,6 +54,14 @@ class SettingsDisplayController {
             node.addEventListener('keydown', onInputTabActionKeyDown, false);
         }
 
+        const onSpecialUrlLinkClick = this._onSpecialUrlLinkClick.bind(this);
+        const onSpecialUrlLinkMouseDown = this._onSpecialUrlLinkMouseDown.bind(this);
+        for (const node of document.querySelectorAll('[data-special-url]')) {
+            node.addEventListener('click', onSpecialUrlLinkClick, false);
+            node.addEventListener('auxclick', onSpecialUrlLinkClick, false);
+            node.addEventListener('mousedown', onSpecialUrlLinkMouseDown, false);
+        }
+
         for (const node of document.querySelectorAll('.defer-load-iframe')) {
             this._setupDeferLoadIframe(node);
         }
@@ -220,6 +228,57 @@ class SettingsDisplayController {
         }
     }
 
+    _onSpecialUrlLinkClick(e) {
+        switch (e.button) {
+            case 0:
+            case 1:
+                e.preventDefault();
+                this._createTab(e.currentTarget.dataset.specialUrl, true);
+                break;
+        }
+    }
+
+    _onSpecialUrlLinkMouseDown(e) {
+        switch (e.button) {
+            case 0:
+            case 1:
+                e.preventDefault();
+                break;
+        }
+    }
+
+    async _createTab(url, useOpener) {
+        let openerTabId;
+        if (useOpener) {
+            try {
+                const tab = await new Promise((resolve, reject) => {
+                    chrome.tabs.getCurrent((result) => {
+                        const e = chrome.runtime.lastError;
+                        if (e) {
+                            reject(new Error(e.message));
+                        } else {
+                            resolve(result);
+                        }
+                    });
+                });
+                openerTabId = tab.id;
+            } catch (e) {
+                // NOP
+            }
+        }
+
+        return await new Promise((resolve, reject) => {
+            chrome.tabs.create({url, openerTabId}, (tab2) => {
+                const e = chrome.runtime.lastError;
+                if (e) {
+                    reject(new Error(e.message));
+                } else {
+                    resolve(tab2);
+                }
+            });
+        });
+    }
+
     _updateScrollTarget() {
         const hash = window.location.hash;
         if (!hash.startsWith('#!')) { return; }
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index afb7af20..ba862b45 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -3067,12 +3067,12 @@
             </p>
 
             <ul data-show-for-browser="chrome">
-                <li>Open <a data-select-on-click="">chrome://extensions/shortcuts</a> in a new tab.</li>
+                <li>Open <a data-special-url="chrome://extensions/shortcuts">chrome://extensions/shortcuts</a> in a new tab.</li>
                 <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li>
             </ul>
 
             <ul data-show-for-browser="edge">
-                <li>Open <a data-select-on-click="">edge://extensions/shortcuts</a> in a new tab.</li>
+                <li>Open <a data-special-url="edge://extensions/shortcuts">edge://extensions/shortcuts</a> in a new tab.</li>
                 <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li>
             </ul>