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

2 files changed, 27 insertions, 15 deletions

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(); }
         }
     }