Updated welcome page (#1107)

* Make storage controller optional

* Make more elements optional

* Update styles

* Create new welcome page

* Update URL for welcome guide

* Remove old guide

* Fix unused global

5 files changed, 116 insertions, 18 deletions

diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index b2ea3cd6..3229e278 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -206,7 +206,7 @@ class Backend {
 
             const options = this.getOptions({current: true});
             if (options.general.showGuide) {
-                chrome.tabs.create({url: chrome.runtime.getURL('/bg/guide.html')});
+                chrome.tabs.create({url: chrome.runtime.getURL('/bg/welcome.html')});
             }
 
             this._clipboardMonitor.on('change', this._onClipboardTextChange.bind(this));
diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index ba28ba1c..2592e6a2 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -58,22 +58,29 @@ class DictionaryEntry {
         const versionNode = node.querySelector('.dictionary-version');
         const wildcardSupportedCheckbox = node.querySelector('.dictionary-prefix-wildcard-searches-supported');
 
-        const hasDetails = this._setupDetails(detailsTable);
+        const hasDetails = (detailsTable !== null && this._setupDetails(detailsTable));
         this._hasDetails = hasDetails;
 
         titleNode.textContent = title;
         versionNode.textContent = `rev.${revision}`;
-        wildcardSupportedCheckbox.checked = !!prefixWildcardsSupported;
-
-        outdatedContainer.hidden = (version >= 3);
-        if (detailsToggleLink !== null) { detailsToggleLink.hidden = !hasDetails; }
-
-        enabledCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'enabled']);
-        priorityInput.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'priority']);
+        if (wildcardSupportedCheckbox !== null) {
+            wildcardSupportedCheckbox.checked = !!prefixWildcardsSupported;
+        }
+        if (outdatedContainer !== null) {
+            outdatedContainer.hidden = (version >= 3);
+        }
+        if (detailsToggleLink !== null) {
+            detailsToggleLink.hidden = !hasDetails;
+        }
+        if (enabledCheckbox !== null) {
+            enabledCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'enabled']);
+        }
+        if (priorityInput !== null) {
+            priorityInput.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'priority']);
+        }
         if (allowSecondarySearchesCheckbox !== null) {
             allowSecondarySearchesCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'allowSecondarySearches']);
         }
-
         if (deleteButton !== null) {
             this._eventListeners.addEventListener(deleteButton, 'click', this._onDeleteButtonClicked.bind(this), false);
         }
@@ -84,7 +91,9 @@ class DictionaryEntry {
         if (detailsToggleLink !== null && this._detailsContainer !== null) {
             this._eventListeners.addEventListener(detailsToggleLink, 'click', this._onDetailsToggleLinkClicked.bind(this), false);
         }
-        this._eventListeners.addEventListener(priorityInput, 'settingChanged', this._onPriorityChanged.bind(this), false);
+        if (priorityInput !== null) {
+            this._eventListeners.addEventListener(priorityInput, 'settingChanged', this._onPriorityChanged.bind(this), false);
+        }
     }
 
     cleanup() {
@@ -213,7 +222,9 @@ class DictionaryController {
         yomichan.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
 
         document.querySelector('#dictionary-confirm-delete-button').addEventListener('click', this._onDictionaryConfirmDelete.bind(this), false);
-        this._checkIntegrityButton.addEventListener('click', this._onCheckIntegrityButtonClick.bind(this), false);
+        if (this._checkIntegrityButton !== null) {
+            this._checkIntegrityButton.addEventListener('click', this._onCheckIntegrityButtonClick.bind(this), false);
+        }
 
         await this._onDatabaseUpdated();
     }
@@ -433,8 +444,8 @@ class DictionaryController {
             for (const progress of progressContainers) { progress.hidden = true; }
             if (statusFooter !== null) { statusFooter.setTaskActive(progressSelector, false); }
             this._setButtonsEnabled(true);
-            storageController.updateStats();
             this._isDeleting = false;
+            if (storageController !== null) { storageController.updateStats(); }
         }
     }
 
diff --git a/ext/bg/js/settings/dictionary-import-controller.js b/ext/bg/js/settings/dictionary-import-controller.js
index 15632d62..4945d54c 100644
--- a/ext/bg/js/settings/dictionary-import-controller.js
+++ b/ext/bg/js/settings/dictionary-import-controller.js
@@ -93,7 +93,7 @@ class DictionaryImportController {
         if (this._modifying) { return; }
 
         const purgeNotification = this._purgeNotification;
-
+        const storageController = this._storageController;
         const prevention = this._preventPageExit();
 
         try {
@@ -114,8 +114,8 @@ class DictionaryImportController {
             prevention.end();
             if (purgeNotification !== null) { purgeNotification.hidden = true; }
             this._setSpinnerVisible(false);
-            this._storageController.updateStats();
             this._setModifying(false);
+            if (storageController !== null) { storageController.updateStats(); }
         }
     }
 
@@ -157,7 +157,7 @@ class DictionaryImportController {
                 const statusString = `${percent.toFixed(0)}%`;
                 for (const progressBar of progressBars) { progressBar.style.width = cssString; }
                 for (const label of statusLabels) { label.textContent = statusString; }
-                storageController.updateStats();
+                if (storageController !== null) { storageController.updateStats(); }
             };
 
             const fileCount = files.length;
@@ -187,6 +187,7 @@ class DictionaryImportController {
             }
             this._setSpinnerVisible(false);
             this._setModifying(false);
+            if (storageController !== null) { storageController.updateStats(); }
         }
     }
 
diff --git a/ext/bg/js/settings2/settings-display-controller.js b/ext/bg/js/settings2/settings-display-controller.js
index 2be7bf92..d0fcffd9 100644
--- a/ext/bg/js/settings2/settings-display-controller.js
+++ b/ext/bg/js/settings2/settings-display-controller.js
@@ -73,8 +73,10 @@ class SettingsDisplayController {
         });
         menuSelectorObserver.observe(document.documentElement, false);
 
-        this._contentNode.addEventListener('scroll', this._onScroll.bind(this), {passive: true});
-        this._topLink.addEventListener('click', this._onTopLinkClick.bind(this), false);
+        if (this._topLink !== null) {
+            this._contentNode.addEventListener('scroll', this._onScroll.bind(this), {passive: true});
+            this._topLink.addEventListener('click', this._onTopLinkClick.bind(this), false);
+        }
 
         window.addEventListener('keydown', this._onKeyDown.bind(this), false);
         window.addEventListener('popstate', this._onPopState.bind(this), false);
diff --git a/ext/bg/js/welcome-main.js b/ext/bg/js/welcome-main.js
new file mode 100644
index 00000000..504bd88b
--- /dev/null
+++ b/ext/bg/js/welcome-main.js
@@ -0,0 +1,84 @@
+/*
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+/* global
+ * DictionaryController
+ * DictionaryImportController
+ * GenericSettingController
+ * ModalController
+ * ScanInputsSimpleController
+ * SettingsController
+ * SettingsDisplayController
+ * StatusFooter
+ * api
+ */
+
+async function setupEnvironmentInfo() {
+    const {browser, platform} = await api.getEnvironmentInfo();
+    document.documentElement.dataset.browser = browser;
+    document.documentElement.dataset.os = platform.os;
+}
+
+async function setupGenericSettingsController(genericSettingController) {
+    await genericSettingController.prepare();
+    await genericSettingController.refresh();
+}
+
+(async () => {
+    try {
+        document.querySelector('#content-scroll-focus').focus();
+
+        const statusFooter = new StatusFooter(document.querySelector('.status-footer-container'));
+        statusFooter.prepare();
+
+        api.forwardLogsToBackend();
+        await yomichan.prepare();
+
+        setupEnvironmentInfo();
+
+        const optionsFull = await api.optionsGetFull();
+
+        const preparePromises = [];
+
+        const modalController = new ModalController();
+        modalController.prepare();
+
+        const settingsController = new SettingsController(optionsFull.profileCurrent);
+        settingsController.prepare();
+
+        const dictionaryController = new DictionaryController(settingsController, modalController, null, statusFooter);
+        dictionaryController.prepare();
+
+        const dictionaryImportController = new DictionaryImportController(settingsController, modalController, null, statusFooter);
+        dictionaryImportController.prepare();
+
+        const genericSettingController = new GenericSettingController(settingsController);
+        preparePromises.push(setupGenericSettingsController(genericSettingController));
+
+        const simpleScanningInputController = new ScanInputsSimpleController(settingsController);
+        simpleScanningInputController.prepare();
+
+        await Promise.all(preparePromises);
+
+        document.documentElement.dataset.loaded = 'true';
+
+        const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
+        settingsDisplayController.prepare();
+    } catch (e) {
+        yomichan.logError(e);
+    }
+})();