From 6014fe5344cd22ff783af18db2b567e2cd7ef819 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Fri, 11 Oct 2019 19:08:54 -0400
Subject: Add support for persistent storage

---
 ext/bg/settings.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index e4710283..19dee8b3 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -395,12 +395,20 @@
                 </div>
             </div>
 
-            <div id="storage-info" class="storage-hidden">
+            <div id="storage-info">
                 <div>
                     <img src="/mixed/img/spinner.gif" class="pull-right" id="storage-spinner" />
                     <h3>Storage</h3>
                 </div>
 
+                <div id="storage-persist-info" class="storage-hidden">
+                    <p class="help-block">
+                        Web browsers may sometimes clear stored data if the device is running low on storage space.
+                        This can result in the stored dictionary data being deleted unexpectedly, causing Yomichan to stop working for no apparent reason.
+                        In order to prevent this, persistent storage must be enable by clicking the "Persistent Storage" button below.
+                    </p>
+                </div>
+
                 <div id="storage-use" class="storage-hidden">
                     <p class="help-block">
                         Yomichan is using approximately <strong id="storage-usage"></strong> of <strong id="storage-quota"></strong>.
@@ -425,7 +433,8 @@
                 </div></div>
 
                 <div>
-                    <button class="btn btn-default" id="storage-refresh">Refresh</button>
+                    <button class="btn btn-default" id="storage-refresh"><span class="btn-inner-middle">Refresh</span></button>
+                    <button class="btn btn-default storage-hidden ignore-form-changes" id="storage-persist-button"><span class="storage-persist-button-inner"><input type="checkbox" class="btn-inner-middle" id="storage-persist-button-checkbox" readonly /><span class="btn-inner-middle">Persistent Storage</span></span></button>
                 </div>
             </div>
 
-- 
cgit v1.2.3


From 70bceb5b567ade151d0299917187f4c075ea55ac Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Fri, 11 Oct 2019 19:22:46 -0400
Subject: Improve display of storage stats

---
 ext/bg/js/settings.js | 24 +++++++++++++++++++-----
 ext/bg/settings.html  |  5 ++++-
 2 files changed, 23 insertions(+), 6 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 7ad628ba..bd15f5d0 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -705,13 +705,13 @@ async function getBrowser() {
 
 function storageBytesToLabeledString(size) {
     const base = 1000;
-    const labels = ['bytes', 'KB', 'MB', 'GB'];
+    const labels = [' bytes', 'KB', 'MB', 'GB'];
     let labelIndex = 0;
     while (size >= base) {
         size /= base;
         ++labelIndex;
     }
-    const label = size.toFixed(1);
+    const label = labelIndex === 0 ? `${size}` : size.toFixed(1);
     return `${label}${labels[labelIndex]}`;
 }
 
@@ -723,6 +723,13 @@ async function storageEstimate() {
 }
 storageEstimate.mostRecent = null;
 
+async function isStoragePeristent() {
+    try {
+        return await navigator.storage.persisted();
+    } catch (e) { }
+    return false;
+}
+
 async function storageInfoInitialize() {
     storagePersistInitialize();
     const browser = await getBrowser();
@@ -741,8 +748,14 @@ async function storageUpdateStats() {
     const valid = (estimate !== null);
 
     if (valid) {
-        document.querySelector('#storage-usage').textContent = storageBytesToLabeledString(estimate.usage);
-        document.querySelector('#storage-quota').textContent = storageBytesToLabeledString(estimate.quota);
+        // Firefox reports usage as 0 when persistent storage is enabled.
+        const finite = (estimate.usage > 0 || !(await isStoragePeristent()));
+        if (finite) {
+            document.querySelector('#storage-usage').textContent = storageBytesToLabeledString(estimate.usage);
+            document.querySelector('#storage-quota').textContent = storageBytesToLabeledString(estimate.quota);
+        }
+        document.querySelector('#storage-use-finite').classList.toggle('storage-hidden', !finite);
+        document.querySelector('#storage-use-infinite').classList.toggle('storage-hidden', finite);
     }
 
     storageUpdateStats.isUpdating = false;
@@ -782,7 +795,7 @@ async function storagePersistInitialize() {
     info.classList.remove('storage-hidden');
     button.classList.remove('storage-hidden');
 
-    let persisted = await navigator.storage.persisted();
+    let persisted = await isStoragePeristent();
     if (persisted) {
         checkbox.checked = true;
     }
@@ -794,6 +807,7 @@ async function storagePersistInitialize() {
         if (await navigator.storage.persist()) {
             persisted = true;
             checkbox.checked = true;
+            storageShowInfo();
         }
     }, false);
 }
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 19dee8b3..76955b2c 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -410,9 +410,12 @@
                 </div>
 
                 <div id="storage-use" class="storage-hidden">
-                    <p class="help-block">
+                    <p class="help-block storage-hidden" id="storage-use-finite">
                         Yomichan is using approximately <strong id="storage-usage"></strong> of <strong id="storage-quota"></strong>.
                     </p>
+                    <p class="help-block storage-hidden" id="storage-use-infinite">
+                        Yomichan is permitted <strong>unlimited storage</strong>.
+                    </p>
                 </div>
 
                 <div id="storage-error" class="storage-hidden">
-- 
cgit v1.2.3


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

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

(limited to 'ext/bg/settings.html')

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


From 696ea80e0681c9dab71e7b253acf4c87155004ba Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 13:48:23 -0400
Subject: Add option for popup theme

---
 ext/bg/js/options.js  | 1 +
 ext/bg/js/settings.js | 2 ++
 ext/bg/settings.html  | 8 ++++++++
 3 files changed, 11 insertions(+)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 1021e18d..088945c0 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -276,6 +276,7 @@ function profileOptionsCreateDefaults() {
             compactTags: false,
             compactGlossaries: false,
             mainDictionary: '',
+            popupTheme: 'default',
             customPopupCss: ''
         },
 
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 5732b8ae..f09b35d9 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -39,6 +39,7 @@ async function formRead(options) {
     options.general.popupVerticalOffset = parseInt($('#popup-vertical-offset').val(), 10);
     options.general.popupHorizontalOffset2 = parseInt($('#popup-horizontal-offset2').val(), 0);
     options.general.popupVerticalOffset2 = parseInt($('#popup-vertical-offset2').val(), 10);
+    options.general.popupTheme = $('#popup-theme').val();
     options.general.customPopupCss = $('#custom-popup-css').val();
 
     options.audio.enabled = $('#audio-playback-enabled').prop('checked');
@@ -107,6 +108,7 @@ async function formWrite(options) {
     $('#popup-vertical-offset').val(options.general.popupVerticalOffset);
     $('#popup-horizontal-offset2').val(options.general.popupHorizontalOffset2);
     $('#popup-vertical-offset2').val(options.general.popupVerticalOffset2);
+    $('#popup-theme').val(options.general.popupTheme);
     $('#custom-popup-css').val(options.general.customPopupCss);
 
     $('#audio-playback-enabled').prop('checked', options.audio.enabled);
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 9dd71490..531c0e86 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -231,6 +231,14 @@
                     </div>
                 </div>
 
+                <div class="form-group">
+                    <label for="popup-theme">Theme</label>
+                    <select class="form-control" id="popup-theme">
+                        <option value="default">Light</option>
+                        <option value="dark">Dark</option>
+                    </select>
+                </div>
+
                 <div class="form-group options-advanced">
                     <label for="custom-popup-css">Custom popup CSS</label>
                     <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
-- 
cgit v1.2.3


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

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

(limited to 'ext/bg/settings.html')

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


From 32729482844d7af9e9f307a69c96ea34f1e66011 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 11:05:21 -0400
Subject: Adds setting for controlling the outer style of the popup

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

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 09d60b26..21cbe256 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -128,7 +128,8 @@
     content: counter(audio-source-id);
 }
 
-#custom-popup-css {
+#custom-popup-css,
+#custom-popup-outer-css {
     width: 100%;
     min-height: 34px;
     height: 96px;
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index cadc4443..fac17d68 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -278,7 +278,8 @@ function profileOptionsCreateDefaults() {
             mainDictionary: '',
             popupTheme: 'default',
             popupOuterTheme: 'default',
-            customPopupCss: ''
+            customPopupCss: '',
+            customPopupOuterCss: ''
         },
 
         audio: {
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 900b89bb..7eee7bce 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -42,6 +42,7 @@ async function formRead(options) {
     options.general.popupTheme = $('#popup-theme').val();
     options.general.popupOuterTheme = $('#popup-outer-theme').val();
     options.general.customPopupCss = $('#custom-popup-css').val();
+    options.general.customPopupOuterCss = $('#custom-popup-outer-css').val();
 
     options.audio.enabled = $('#audio-playback-enabled').prop('checked');
     options.audio.autoPlay = $('#auto-play-audio').prop('checked');
@@ -112,6 +113,7 @@ async function formWrite(options) {
     $('#popup-theme').val(options.general.popupTheme);
     $('#popup-outer-theme').val(options.general.popupOuterTheme);
     $('#custom-popup-css').val(options.general.customPopupCss);
+    $('#custom-popup-outer-css').val(options.general.customPopupOuterCss);
 
     $('#audio-playback-enabled').prop('checked', options.audio.enabled);
     $('#auto-play-audio').prop('checked', options.audio.autoPlay);
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 08e56a09..cb223e72 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -252,8 +252,16 @@
                 </div>
 
                 <div class="form-group options-advanced">
-                    <label for="custom-popup-css">Custom popup CSS</label>
-                    <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
+                    <div class="row">
+                        <div class="col-xs-6">
+                            <label for="custom-popup-css">Custom popup CSS</label>
+                            <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
+                        </div>
+                        <div class="col-xs-6">
+                            <label for="custom-popup-outer-css">Custom popup outer CSS</label>
+                            <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control"></textarea></div>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="form-group ignore-form-changes" style="display: none;" id="settings-popup-preview-settings">
-- 
cgit v1.2.3


From 1b96e69ea2bfe26ded82e2f058d30500290e9d2d Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 12:10:00 -0400
Subject: Placeholder and improve consistency of stylesheet rule priorities

---
 ext/bg/js/settings-popup-preview.js | 17 +++++++++++++++++
 ext/bg/settings-popup-preview.html  |  2 +-
 ext/bg/settings.html                |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js
index 68655fc9..7ccdc7f3 100644
--- a/ext/bg/js/settings-popup-preview.js
+++ b/ext/bg/js/settings-popup-preview.js
@@ -21,6 +21,7 @@ class SettingsPopupPreview {
     constructor() {
         this.frontend = null;
         this.apiOptionsGetOld = apiOptionsGet;
+        this.popupInjectOuterStylesheetOld = Popup.injectOuterStylesheet;
         this.popupShown = false;
         this.themeChangeTimeout = null;
     }
@@ -56,6 +57,9 @@ class SettingsPopupPreview {
 
         await this.frontend.isPrepared();
 
+        // Overwrite popup
+        Popup.injectOuterStylesheet = (...args) => this.popupInjectOuterStylesheet(...args);
+
         // Update search
         this.updateSearch();
     }
@@ -76,6 +80,19 @@ class SettingsPopupPreview {
         return options;
     }
 
+    popupInjectOuterStylesheet(...args) {
+        // This simulates the stylesheet priorities when injecting using the web extension API.
+        const result = this.popupInjectOuterStylesheetOld(...args);
+
+        const outerStylesheet = Popup.outerStylesheet;
+        const node = document.querySelector('#client-css');
+        if (node !== null && outerStylesheet !== null) {
+            node.parentNode.insertBefore(outerStylesheet, node);
+        }
+
+        return result;
+    }
+
     onWindowResize() {
         if (this.frontend === null) { return; }
         const textSource = this.frontend.textSourceLast;
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html
index bfe4550c..07caa271 100644
--- a/ext/bg/settings-popup-preview.html
+++ b/ext/bg/settings-popup-preview.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Yomichan Popup Preview</title>
-        <link rel="stylesheet" type="text/css" href="/fg/css/client.css">
+        <link rel="stylesheet" type="text/css" href="/fg/css/client.css" id="client-css">
         <style>
             html {
                 transition: background-color 0.25s linear 0s, color 0.25s linear 0s;
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index cb223e72..ea3e8c18 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -259,7 +259,7 @@
                         </div>
                         <div class="col-xs-6">
                             <label for="custom-popup-outer-css">Custom popup outer CSS</label>
-                            <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control"></textarea></div>
+                            <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control" placeholder="iframe.yomichan-float { /*styles*/ }"></textarea></div>
                         </div>
                     </div>
                 </div>
-- 
cgit v1.2.3


From 21a2730cdeef80327285f77a155451a8fbf67939 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 22:50:22 -0400
Subject: Add option for text-to-speech

---
 ext/bg/js/options.js  |  3 ++-
 ext/bg/js/settings.js | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++
 ext/bg/settings.html  | 11 ++++++++
 ext/mixed/js/audio.js | 13 +++++++++
 4 files changed, 99 insertions(+), 1 deletion(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index fac17d68..4854cd65 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -287,7 +287,8 @@ function profileOptionsCreateDefaults() {
             sources: ['jpod101'],
             volume: 100,
             autoPlay: false,
-            customSourceUrl: ''
+            customSourceUrl: '',
+            textToSpeechVoice: ''
         },
 
         scanning: {
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 77815955..debf9f2f 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -48,6 +48,7 @@ async function formRead(options) {
     options.audio.autoPlay = $('#auto-play-audio').prop('checked');
     options.audio.volume = parseFloat($('#audio-playback-volume').val());
     options.audio.customSourceUrl = $('#audio-custom-source').val();
+    options.audio.textToSpeechVoice = $('#text-to-speech-voice').val();
 
     options.scanning.middleMouse = $('#middle-mouse-button-scan').prop('checked');
     options.scanning.touchInputEnabled = $('#touch-input-enabled').prop('checked');
@@ -119,6 +120,7 @@ async function formWrite(options) {
     $('#auto-play-audio').prop('checked', options.audio.autoPlay);
     $('#audio-playback-volume').val(options.audio.volume);
     $('#audio-custom-source').val(options.audio.customSourceUrl);
+    $('#text-to-speech-voice').val(options.audio.textToSpeechVoice).attr('data-value', options.audio.textToSpeechVoice);
 
     $('#middle-mouse-button-scan').prop('checked', options.scanning.middleMouse);
     $('#touch-input-enabled').prop('checked', options.scanning.touchInputEnabled);
@@ -326,6 +328,77 @@ async function audioSettingsInitialize() {
     const options = await apiOptionsGet(optionsContext);
     audioSourceUI = new AudioSourceUI.Container(options.audio.sources, $('.audio-source-list'), $('.audio-source-add'));
     audioSourceUI.save = () => apiOptionsSave();
+
+    textToSpeechInitialize();
+}
+
+function textToSpeechInitialize() {
+    if (typeof speechSynthesis === 'undefined') { return; }
+
+    speechSynthesis.addEventListener('voiceschanged', () => updateTextToSpeechVoices(), false);
+    updateTextToSpeechVoices();
+
+    $('#text-to-speech-voice-test').on('click', () => textToSpeechTest());
+}
+
+function updateTextToSpeechVoices() {
+    const voices = Array.prototype.map.call(speechSynthesis.getVoices(), (voice, index) => ({voice, index}));
+    voices.sort(textToSpeechVoiceCompare);
+    if (voices.length > 0) {
+        $('#text-to-speech-voice-container').css('display', '');
+    }
+
+    const select = $('#text-to-speech-voice');
+    select.empty();
+    select.append($('<option>').val('').text('None'));
+    for (const {voice} of voices) {
+        select.append($('<option>').val(voice.voiceURI).text(`${voice.name} (${voice.lang})`));
+    }
+
+    select.val(select.attr('data-value'));
+}
+
+function compareLanguageTags(a, b) {
+    if (a.substr(0, 3) === 'ja-') {
+        return (b.substr(0, 3) === 'ja-') ? 0 : -1;
+    } else {
+        return (b.substr(0, 3) === 'ja-') ? 1 : 0;
+    }
+}
+
+function textToSpeechVoiceCompare(a, b) {
+    const i = compareLanguageTags(a.voice.lang, b.voice.lang);
+    if (i !== 0) { return i; }
+
+    if (a.voice.default) {
+        if (!b.voice.default) {
+            return -1;
+        }
+    } else if (b.voice.default) {
+        return 1;
+    }
+
+    if (a.index < b.index) { return -1; }
+    if (a.index > b.index) { return 1; }
+    return 0;
+}
+
+function textToSpeechTest() {
+    try {
+        const text = $('#text-to-speech-voice-test').attr('data-speech-text') || '';
+        const voiceURI = $('#text-to-speech-voice').val();
+        const voice = audioGetTextToSpeechVoice(voiceURI);
+        if (voice === null) { return; }
+
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.lang = 'ja-JP';
+        utterance.voice = voice;
+        utterance.volume = 1.0;
+
+        speechSynthesis.speak(utterance);
+    } catch (e) {
+        // NOP
+    }
 }
 
 
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index ea3e8c18..ffa5533e 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -293,6 +293,16 @@
                     <input type="number" min="0" max="100" id="audio-playback-volume" class="form-control">
                 </div>
 
+                <div class="form-group" style="display: none;" id="text-to-speech-voice-container">
+                    <label for="text-to-speech-voice">Text-to-speech voice</label>
+                    <div class="input-group">
+                        <select class="form-control" id="text-to-speech-voice"></select>
+                        <div class="input-group-btn">
+                            <button class="btn btn-default" id="text-to-speech-voice-test" title="Test voice" data-speech-text="よみちゃん"><span class="glyphicon glyphicon-volume-up"></span></button>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="form-group options-advanced">
                     <label for="audio-custom-source">Custom audio source <span class="label-light">(URL)</span></label>
                     <input type="text" id="audio-custom-source" class="form-control" placeholder="Example: http://localhost/audio.mp3?expression={expression}&reading={reading}">
@@ -658,6 +668,7 @@
         <script src="/bg/js/profile-conditions.js"></script>
         <script src="/bg/js/templates.js"></script>
         <script src="/bg/js/util.js"></script>
+        <script src="/mixed/js/audio.js"></script>
 
         <script src="/bg/js/settings-profiles.js"></script>
         <script src="/bg/js/settings.js"></script>
diff --git a/ext/mixed/js/audio.js b/ext/mixed/js/audio.js
index b905140c..5e3b9164 100644
--- a/ext/mixed/js/audio.js
+++ b/ext/mixed/js/audio.js
@@ -58,3 +58,16 @@ async function audioGetFromSources(expression, sources, optionsContext, createAu
     }
     return {audio: null, source: null};
 }
+
+function audioGetTextToSpeechVoice(voiceURI) {
+    try {
+        for (const voice of speechSynthesis.getVoices()) {
+            if (voice.voiceURI === voiceURI) {
+                return voice;
+            }
+        }
+    } catch (e) {
+        // NOP
+    }
+    return null;
+}
-- 
cgit v1.2.3


From 7bae3824e74461fbd5c9f66f921b05a47a40cbf4 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Oct 2019 23:59:21 -0400
Subject: Add support for text-to-speech playback

---
 ext/bg/js/audio.js      |  18 ++++++++
 ext/bg/settings.html    |   4 +-
 ext/mixed/js/audio.js   | 113 ++++++++++++++++++++++++++++++++++++++++++++++--
 ext/mixed/js/display.js |   1 +
 4 files changed, 132 insertions(+), 4 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/js/audio.js b/ext/bg/js/audio.js
index 9508abf0..3efcce46 100644
--- a/ext/bg/js/audio.js
+++ b/ext/bg/js/audio.js
@@ -86,6 +86,24 @@ const audioUrlBuilders = {
 
         throw new Error('Failed to find audio URL');
     },
+    'text-to-speech': async (definition, optionsContext) => {
+        const options = await apiOptionsGet(optionsContext);
+        const voiceURI = options.audio.textToSpeechVoice;
+        if (!voiceURI) {
+            throw new Error('No voice');
+        }
+
+        return `tts:?text=${encodeURIComponent(definition.expression)}&voice=${encodeURIComponent(voiceURI)}`;
+    },
+    'text-to-speech-reading': async (definition, optionsContext) => {
+        const options = await apiOptionsGet(optionsContext);
+        const voiceURI = options.audio.textToSpeechVoice;
+        if (!voiceURI) {
+            throw new Error('No voice');
+        }
+
+        return `tts:?text=${encodeURIComponent(definition.reading || definition.expression)}&voice=${encodeURIComponent(voiceURI)}`;
+    },
     'custom': async (definition, optionsContext) => {
         const options = await apiOptionsGet(optionsContext);
         const customSourceUrl = options.audio.customSourceUrl;
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index ffa5533e..15425b44 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -319,8 +319,10 @@
                         <div class="input-group-addon audio-source-prefix"></div>
                         <select class="form-control audio-source-select">
                             <option value="jpod101">JapanesePod101</option>
-                            <option value="jpod101-alternate">JapanesePod101 (alternate)</option>
+                            <option value="jpod101-alternate">JapanesePod101 (Alternate)</option>
                             <option value="jisho">Jisho.org</option>
+                            <option value="text-to-speech">Text-to-speech</option>
+                            <option value="text-to-speech-reading">Text-to-speech (Kana reading)</option>
                             <option value="custom">Custom</option>
                         </select>
                         <div class="input-group-btn"><button class="btn btn-danger audio-source-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div>
diff --git a/ext/mixed/js/audio.js b/ext/mixed/js/audio.js
index 50bd321f..cf8b8d24 100644
--- a/ext/mixed/js/audio.js
+++ b/ext/mixed/js/audio.js
@@ -17,7 +17,90 @@
  */
 
 
-function audioGetFromUrl(url) {
+class TextToSpeechAudio {
+    constructor(text, voice) {
+        this.text = text;
+        this.voice = voice;
+        this._utterance = null;
+        this._volume = 1;
+    }
+
+    get currentTime() {
+        return 0;
+    }
+    set currentTime(value) {
+        // NOP
+    }
+
+    get volume() {
+        return this._volume;
+    }
+    set volume(value) {
+        this._volume = value;
+        if (this._utterance !== null) {
+            this._utterance.volume = value;
+        }
+    }
+
+    play() {
+        try {
+            if (this._utterance === null) {
+                this._utterance = new SpeechSynthesisUtterance(this.text || '');
+                this._utterance.lang = 'ja-JP';
+                this._utterance.volume = this._volume;
+                this._utterance.voice = this.voice;
+            }
+
+            speechSynthesis.cancel();
+            speechSynthesis.speak(this._utterance);
+
+        } catch (e) {
+            // NOP
+        }
+    }
+
+    pause() {
+        try {
+            speechSynthesis.cancel();
+        } catch (e) {
+            // NOP
+        }
+    }
+
+    static createFromUri(ttsUri) {
+        const m = /^tts:[^#\?]*\?([^#]*)/.exec(ttsUri);
+        if (m === null) { return null; }
+
+        const searchParameters = {};
+        for (const group of m[1].split('&')) {
+            const sep = group.indexOf('=');
+            if (sep < 0) { continue; }
+            searchParameters[decodeURIComponent(group.substr(0, sep))] = decodeURIComponent(group.substr(sep + 1));
+        }
+
+        if (!searchParameters.text) { return null; }
+
+        const voice = audioGetTextToSpeechVoice(searchParameters.voice);
+        if (voice === null) { return null; }
+
+        return new TextToSpeechAudio(searchParameters.text, voice);
+    }
+
+}
+
+function audioGetFromUrl(url, download) {
+    const tts = TextToSpeechAudio.createFromUri(url);
+    if (tts !== null) {
+        if (download) {
+            throw new Error('Download not supported for text-to-speech');
+        }
+        return Promise.resolve(tts);
+    }
+
+    if (download) {
+        return Promise.resolve(null);
+    }
+
     return new Promise((resolve, reject) => {
         const audio = new Audio(url);
         audio.addEventListener('loadeddata', () => {
@@ -46,7 +129,7 @@ async function audioGetFromSources(expression, sources, optionsContext, download
         }
 
         try {
-            const audio = download ? null : await audioGetFromUrl(url);
+            const audio = await audioGetFromUrl(url, download);
             const result = {audio, url, source};
             if (cache !== null) {
                 cache[key] = result;
@@ -56,7 +139,7 @@ async function audioGetFromSources(expression, sources, optionsContext, download
             // NOP
         }
     }
-    return {audio: null, source: null};
+    return {audio: null, url: null, source: null};
 }
 
 function audioGetTextToSpeechVoice(voiceURI) {
@@ -71,3 +154,27 @@ function audioGetTextToSpeechVoice(voiceURI) {
     }
     return null;
 }
+
+function audioPrepareTextToSpeech(options) {
+    if (
+        audioPrepareTextToSpeech.state ||
+        !options.audio.textToSpeechVoice ||
+        !(
+            options.audio.sources.includes('text-to-speech') ||
+            options.audio.sources.includes('text-to-speech-reading')
+        )
+    ) {
+        // Text-to-speech not in use.
+        return;
+    }
+
+    // Chrome needs this value called once before it will become populated.
+    // The first call will return an empty list.
+    audioPrepareTextToSpeech.state = true;
+    try {
+        speechSynthesis.getVoices();
+    } catch (e) {
+        // NOP
+    }
+}
+audioPrepareTextToSpeech.state = false;
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index cf38d09d..e0994f8a 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -197,6 +197,7 @@ class Display {
         this.options = options ? options : await apiOptionsGet(this.getOptionsContext());
         this.updateTheme(this.options.general.popupTheme);
         this.setCustomCss(this.options.general.customPopupCss);
+        audioPrepareTextToSpeech(this.options);
     }
 
     updateTheme(themeName) {
-- 
cgit v1.2.3


From 17e2f825f4620e31e89a14d72b84a733cd98a277 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 17:32:28 -0400
Subject: Add warning message for Mac users about App Nap

---
 ext/bg/css/settings.css | 17 ++++++++++++-----
 ext/bg/js/settings.js   |  6 +++---
 ext/bg/settings.html    |  8 ++++++++
 3 files changed, 23 insertions(+), 8 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 21cbe256..f204681b 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -158,14 +158,21 @@ input[type=checkbox]#storage-persist-button-checkbox {
     height: 320px;
 }
 
-[data-show-for-browser] {
+[data-show-for-browser],
+[data-show-for-operating-system] {
     display: none;
 }
 
-[data-browser=edge] [data-show-for-browser~=edge],
-[data-browser=chrome] [data-show-for-browser~=chrome],
-[data-browser=firefox] [data-show-for-browser~=firefox],
-[data-browser=firefox-mobile] [data-show-for-browser~=firefox-mobile] {
+html:root[data-browser=edge] [data-show-for-browser~=edge],
+html:root[data-browser=chrome] [data-show-for-browser~=chrome],
+html:root[data-browser=firefox] [data-show-for-browser~=firefox],
+html:root[data-browser=firefox-mobile] [data-show-for-browser~=firefox-mobile],
+html:root[data-operating-system=mac] [data-show-for-operating-system~=mac],
+html:root[data-operating-system=win] [data-show-for-operating-system~=win],
+html:root[data-operating-system=android] [data-show-for-operating-system~=android],
+html:root[data-operating-system=cros] [data-show-for-operating-system~=cros],
+html:root[data-operating-system=linux] [data-show-for-operating-system~=linux],
+html:root[data-operating-system=openbsd] [data-show-for-operating-system~=openbsd] {
     display: initial;
 }
 
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index ba02641b..dc8c2690 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -848,9 +848,9 @@ async function isStoragePeristent() {
 
 async function storageInfoInitialize() {
     storagePersistInitialize();
-    const {browser} = await apiGetEnvironmentInfo();
-    const container = document.querySelector('#storage-info');
-    container.setAttribute('data-browser', browser);
+    const {browser, platform} = await apiGetEnvironmentInfo();
+    document.documentElement.dataset.browser = browser;
+    document.documentElement.dataset.operatingSystem = platform.os;
 
     await storageShowInfo();
 
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 15425b44..d12670e5 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -505,6 +505,14 @@
                     <a href="https://foosoft.net/projects/anki-connect/" target="_blank" rel="noopener">AnkiConnect</a> plugin.
                 </p>
 
+                <div data-show-for-operating-system="win">
+                    <div class="alert alert-warning" id="anki-mac-warning">
+                        Notice for Mac OS X users:
+                        If Yomichan has issues connecting to AnkiConnect, you may have to tweak some system settings.
+                        See <a href="https://foosoft.net/projects/anki-connect/#notes-for-mac-os-x-users" target="_blank" rel="noopener">this link</a> for more details.
+                    </div>
+                </div>
+
                 <div class="alert alert-danger" id="anki-error"></div>
 
                 <div class="checkbox">
-- 
cgit v1.2.3


From 437fe4e62e4326db093961fea5cfa6c3cd4c59d8 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sun, 13 Oct 2019 18:30:44 -0400
Subject: Move anki warnings under anki-general

---
 ext/bg/settings.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index d12670e5..0eb8277d 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -505,21 +505,21 @@
                     <a href="https://foosoft.net/projects/anki-connect/" target="_blank" rel="noopener">AnkiConnect</a> plugin.
                 </p>
 
-                <div data-show-for-operating-system="win">
-                    <div class="alert alert-warning" id="anki-mac-warning">
-                        Notice for Mac OS X users:
-                        If Yomichan has issues connecting to AnkiConnect, you may have to tweak some system settings.
-                        See <a href="https://foosoft.net/projects/anki-connect/#notes-for-mac-os-x-users" target="_blank" rel="noopener">this link</a> for more details.
-                    </div>
-                </div>
-
-                <div class="alert alert-danger" id="anki-error"></div>
-
                 <div class="checkbox">
                     <label><input type="checkbox" id="anki-enable"> Enable Anki integration</label>
                 </div>
 
                 <div id="anki-general">
+                    <div data-show-for-operating-system="mac">
+                        <div class="alert alert-warning" id="anki-mac-warning">
+                            Notice for Mac OS X users:
+                            If Yomichan has issues connecting to AnkiConnect, you may have to tweak some system settings.
+                            See <a href="https://foosoft.net/projects/anki-connect/#notes-for-mac-os-x-users" target="_blank" rel="noopener">this link</a> for more details.
+                        </div>
+                    </div>
+
+                    <div class="alert alert-danger" id="anki-error"></div>
+
                     <div class="form-group">
                         <label for="card-tags">Card tags <span class="label-light">(comma or space separated)</span></label>
                         <input type="text" id="card-tags" class="form-control">
-- 
cgit v1.2.3


From 099909287f23bbc9e2deee2e4cd8cf9b17c88618 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Tue, 15 Oct 2019 19:22:30 -0400
Subject: Show warning messages if persistant storage fails

Only Firefox seems to support persistent storage properly.
---
 ext/bg/css/settings.css |  4 ++--
 ext/bg/js/settings.js   |  6 +++---
 ext/bg/settings.html    | 12 +++++++++++-
 3 files changed, 16 insertions(+), 6 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index f204681b..b3d5b884 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -141,10 +141,10 @@
 .btn-inner-middle {
     vertical-align: middle;
 }
-.storage-persist-button-inner {
+.storage-button-inner {
     pointer-events: none;
 }
-input[type=checkbox]#storage-persist-button-checkbox {
+input[type=checkbox].storage-button-checkbox {
     margin: 0 0.375em 0 0;
     padding: 0;
 }
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 1eed766c..2c77a0ed 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -912,9 +912,7 @@ async function storagePersistInitialize() {
     button.classList.remove('storage-hidden');
 
     let persisted = await isStoragePeristent();
-    if (persisted) {
-        checkbox.checked = true;
-    }
+    checkbox.checked = persisted;
 
     button.addEventListener('click', async () => {
         if (persisted) {
@@ -931,6 +929,8 @@ async function storagePersistInitialize() {
             persisted = true;
             checkbox.checked = true;
             storageShowInfo();
+        } else {
+            $('.storage-persist-fail-warning').removeClass('storage-hidden');
         }
     }, false);
 }
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 0eb8277d..41b94583 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -489,8 +489,18 @@
 
                 <div>
                     <button class="btn btn-default" id="storage-refresh"><span class="btn-inner-middle">Refresh</span></button>
-                    <button class="btn btn-default storage-hidden ignore-form-changes" id="storage-persist-button"><span class="storage-persist-button-inner"><input type="checkbox" class="btn-inner-middle" id="storage-persist-button-checkbox" readonly /><span class="btn-inner-middle">Persistent Storage</span></span></button>
+                    <button class="btn btn-default storage-hidden ignore-form-changes" id="storage-persist-button"><span class="storage-button-inner"><input type="checkbox" class="btn-inner-middle storage-button-checkbox" id="storage-persist-button-checkbox" readonly /><span class="btn-inner-middle">Persistent Storage</span></span></button>
                 </div>
+
+                <p></p>
+
+                <div data-show-for-browser="firefox-mobile"><div class="alert alert-warning storage-persist-fail-warning storage-hidden">
+                    <p>It may not be possible to enable Persistent Storage on Firefox for Android.</p>
+                </div></div>
+
+                <div data-show-for-browser="chrome"><div class="alert alert-warning storage-persist-fail-warning storage-hidden">
+                    <p>It may not be possible to enable Persistent Storage on Chrome-based browsers.</p>
+                </div></div>
             </div>
 
             <div>
-- 
cgit v1.2.3


From 173a474d5b4df43afce53eb905b220666e36acd4 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Tue, 15 Oct 2019 19:41:39 -0400
Subject: Add unlimited storage permission

---
 ext/bg/settings.html | 6 +++++-
 ext/manifest.json    | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 41b94583..9b1c4366 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -499,7 +499,11 @@
                 </div></div>
 
                 <div data-show-for-browser="chrome"><div class="alert alert-warning storage-persist-fail-warning storage-hidden">
-                    <p>It may not be possible to enable Persistent Storage on Chrome-based browsers.</p>
+                    <p>
+                        It may not be possible to enable Persistent Storage on Chrome-based browsers.
+                        However, the Yomichan extension has permission for unlimited storage which should
+                        prevent Chrome from deleting data.<sup><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=680392#c15" target="_blank" rel="noopener">[1]</a></sup>
+                    </p>
                 </div></div>
             </div>
 
diff --git a/ext/manifest.json b/ext/manifest.json
index 25b86023..fe2b8689 100644
--- a/ext/manifest.json
+++ b/ext/manifest.json
@@ -41,7 +41,8 @@
     "permissions": [
         "<all_urls>",
         "storage",
-        "clipboardWrite"
+        "clipboardWrite",
+        "unlimitedStorage"
     ],
     "commands": {
         "toggle": {
-- 
cgit v1.2.3