Settings refactor (#541)

* Remove debug info

* Trigger onOptionsUpdated instead of formWrite when profile changes

* Update how Anki field changes are observed

* Update how general.enableClipboardPopups setting is changed

* Change where ankiTemplatesUpdateValue occurs

* Change where onDictionaryOptionsChanged occurs

* Remove unused global declarations

* Remove stray data attribute

ext/bg/js/settings/anki.js

@@ -19,16 +19,12 @@
  * api
  * getOptionsContext
  * getOptionsMutable
- * onFormOptionsChanged
  * settingsSaveOptions
  * utilBackgroundIsolate
  */
 
 // Private
 
-let _ankiDataPopulated = false;
-
-
 function _ankiSpinnerShow(show) {
     const spinner = $('#anki-spinner');
     if (show) {
@@ -158,7 +154,7 @@ async function _ankiFieldsPopulate(tabId, options) {
     container.appendChild(fragment);
 
     for (const node of container.querySelectorAll('.anki-field-value')) {
-        node.addEventListener('change', onFormOptionsChanged, false);
+        node.addEventListener('change', _onAnkiFieldsChanged, false);
     }
     for (const node of container.querySelectorAll('.marker-link')) {
         node.addEventListener('click', _onAnkiMarkerClicked, false);
@@ -203,6 +199,23 @@ async function _onAnkiModelChanged(e) {
     await _ankiFieldsPopulate(tabId, options);
 }
 
+async function _onAnkiFieldsChanged() {
+    const optionsContext = getOptionsContext();
+    const options = await getOptionsMutable(optionsContext);
+
+    options.anki.terms.deck = $('#anki-terms-deck').val();
+    options.anki.terms.model = $('#anki-terms-model').val();
+    options.anki.terms.fields = utilBackgroundIsolate(ankiFieldsToDict(document.querySelectorAll('#terms .anki-field-value')));
+    options.anki.kanji.deck = $('#anki-kanji-deck').val();
+    options.anki.kanji.model = $('#anki-kanji-model').val();
+    options.anki.kanji.fields = utilBackgroundIsolate(ankiFieldsToDict(document.querySelectorAll('#kanji .anki-field-value')));
+
+    await settingsSaveOptions();
+
+    await onAnkiOptionsChanged(options);
+}
+
+
 
 // Public
 
@@ -272,20 +285,25 @@ function ankiGetFieldMarkers(type) {
 
 
 function ankiInitialize() {
+    $('#anki-fields-container input,#anki-fields-container select,#anki-fields-container textarea').change(_onAnkiFieldsChanged);
+
     for (const node of document.querySelectorAll('#anki-terms-model,#anki-kanji-model')) {
         node.addEventListener('change', _onAnkiModelChanged, false);
     }
+
+    onAnkiOptionsChanged();
 }
 
-async function onAnkiOptionsChanged(options) {
+async function onAnkiOptionsChanged(options=null) {
+    if (options === null) {
+        const optionsContext = getOptionsContext();
+        options = await getOptionsMutable(optionsContext);
+    }
+
     if (!options.anki.enable) {
-        _ankiDataPopulated = false;
         return;
     }
 
-    if (_ankiDataPopulated) { return; }
-
     await _ankiDeckAndModelPopulate(options);
-    _ankiDataPopulated = true;
     await Promise.all([_ankiFieldsPopulate('terms', options), _ankiFieldsPopulate('kanji', options)]);
 }

ext/bg/js/settings/main.js

@@ -16,8 +16,6 @@
  */
 
 /* global
- * ankiErrorShown
- * ankiFieldsToDict
  * ankiInitialize
  * ankiTemplatesInitialize
  * ankiTemplatesUpdateValue
@@ -33,7 +31,6 @@
  * storageInfoInitialize
  * utilBackend
  * utilBackgroundIsolate
- * utilIsolate
  */
 
 function getOptionsMutable(optionsContext) {
@@ -48,22 +45,6 @@ function getOptionsFullMutable() {
 
 async function formRead(options) {
     options.general.enable = $('#enable').prop('checked');
-    const enableClipboardPopups = $('#enable-clipboard-popups').prop('checked');
-    if (enableClipboardPopups) {
-        options.general.enableClipboardPopups = await new Promise((resolve, _reject) => {
-            chrome.permissions.request(
-                {permissions: ['clipboardRead']},
-                (granted) => {
-                    if (!granted) {
-                        $('#enable-clipboard-popups').prop('checked', false);
-                    }
-                    resolve(granted);
-                }
-            );
-        });
-    } else {
-        options.general.enableClipboardPopups = false;
-    }
     options.general.showGuide = $('#show-usage-guide').prop('checked');
     options.general.compactTags = $('#compact-tags').prop('checked');
     options.general.compactGlossaries = $('#compact-glossaries').prop('checked');
@@ -125,7 +106,6 @@ async function formRead(options) {
     options.parsing.termSpacing = $('#parsing-term-spacing').prop('checked');
     options.parsing.readingMode = $('#parsing-reading-mode').val();
 
-    const optionsAnkiEnableOld = options.anki.enable;
     options.anki.enable = $('#anki-enable').prop('checked');
     options.anki.tags = utilBackgroundIsolate($('#card-tags').val().split(/[,; ]+/));
     options.anki.sentenceExt = parseInt($('#sentence-detection-extent').val(), 10);
@@ -133,20 +113,10 @@ async function formRead(options) {
     options.anki.duplicateScope = $('#duplicate-scope').val();
     options.anki.screenshot.format = $('#screenshot-format').val();
     options.anki.screenshot.quality = parseInt($('#screenshot-quality').val(), 10);
-
-    if (optionsAnkiEnableOld && !ankiErrorShown()) {
-        options.anki.terms.deck = $('#anki-terms-deck').val();
-        options.anki.terms.model = $('#anki-terms-model').val();
-        options.anki.terms.fields = utilBackgroundIsolate(ankiFieldsToDict(document.querySelectorAll('#terms .anki-field-value')));
-        options.anki.kanji.deck = $('#anki-kanji-deck').val();
-        options.anki.kanji.model = $('#anki-kanji-model').val();
-        options.anki.kanji.fields = utilBackgroundIsolate(ankiFieldsToDict(document.querySelectorAll('#kanji .anki-field-value')));
-    }
 }
 
 async function formWrite(options) {
     $('#enable').prop('checked', options.general.enable);
-    $('#enable-clipboard-popups').prop('checked', options.general.enableClipboardPopups);
     $('#show-usage-guide').prop('checked', options.general.showGuide);
     $('#compact-tags').prop('checked', options.general.compactTags);
     $('#compact-glossaries').prop('checked', options.general.compactGlossaries);
@@ -216,14 +186,11 @@ async function formWrite(options) {
     $('#screenshot-format').val(options.anki.screenshot.format);
     $('#screenshot-quality').val(options.anki.screenshot.quality);
 
-    await ankiTemplatesUpdateValue();
-    await onAnkiOptionsChanged(options);
-    await onDictionaryOptionsChanged();
-
     formUpdateVisibility(options);
 }
 
 function formSetupEventListeners() {
+    document.querySelector('#enable-clipboard-popups').addEventListener('change', onEnableClipboardPopupsChanged, false);
     $('input, select, textarea').not('.anki-model').not('.ignore-form-changes *').change(onFormOptionsChanged);
 }
 
@@ -232,15 +199,6 @@ function formUpdateVisibility(options) {
     document.documentElement.dataset.optionsGeneralDebugInfo = `${!!options.general.debugInfo}`;
     document.documentElement.dataset.optionsGeneralShowAdvanced = `${!!options.general.showAdvanced}`;
     document.documentElement.dataset.optionsGeneralResultOutputMode = `${options.general.resultOutputMode}`;
-
-    if (options.general.debugInfo) {
-        const temp = utilIsolate(options);
-        if (typeof temp.anki.fieldTemplates === 'string') {
-            temp.anki.fieldTemplates = '...';
-        }
-        const text = JSON.stringify(temp, null, 4);
-        $('#debug').text(text);
-    }
 }
 
 async function onFormOptionsChanged() {
@@ -250,8 +208,30 @@ async function onFormOptionsChanged() {
     await formRead(options);
     await settingsSaveOptions();
     formUpdateVisibility(options);
+}
 
-    await onAnkiOptionsChanged(options);
+async function onEnableClipboardPopupsChanged(e) {
+    const optionsContext = getOptionsContext();
+    const options = await getOptionsMutable(optionsContext);
+
+    const enableClipboardPopups = e.target.checked;
+    if (enableClipboardPopups) {
+        options.general.enableClipboardPopups = await new Promise((resolve) => {
+            chrome.permissions.request(
+                {permissions: ['clipboardRead']},
+                (granted) => {
+                    if (!granted) {
+                        $('#enable-clipboard-popups').prop('checked', false);
+                    }
+                    resolve(granted);
+                }
+            );
+        });
+    } else {
+        options.general.enableClipboardPopups = false;
+    }
+
+    await settingsSaveOptions();
 }
 
 
@@ -272,6 +252,12 @@ async function onOptionsUpdated({source}) {
 
     const optionsContext = getOptionsContext();
     const options = await getOptionsMutable(optionsContext);
+
+    document.querySelector('#enable-clipboard-popups').checked = options.general.enableClipboardPopups;
+    ankiTemplatesUpdateValue();
+    onDictionaryOptionsChanged();
+    onAnkiOptionsChanged();
+
     await formWrite(options);
 }
 

ext/bg/js/settings/profiles.js

@@ -19,9 +19,8 @@
  * ConditionsUI
  * api
  * conditionsClearCaches
- * formWrite
  * getOptionsFullMutable
- * getOptionsMutable
+ * onOptionsUpdated
  * profileConditionsDescriptor
  * profileConditionsDescriptorPromise
  * settingsSaveOptions
@@ -131,10 +130,7 @@ function profileOptionsPopulateSelect(select, profiles, currentValue, ignoreIndi
 
 async function profileOptionsUpdateTarget(optionsFull) {
     await profileFormWrite(optionsFull);
-
+    await onOptionsUpdated({source: null});
-    const optionsContext = getOptionsContext();
-    const options = await getOptionsMutable(optionsContext);
-    await formWrite(options);
 }
 
 function profileOptionsCreateCopyName(name, profiles, maxUniqueAttempts) {

ext/bg/settings.html

@@ -138,7 +138,7 @@
                     <label><input type="checkbox" id="enable"> Enable content scanning</label>
                 </div>
 
-                <div class="checkbox" data-hide-for-browser="firefox-mobile">
+                <div class="checkbox ignore-form-changes" data-hide-for-browser="firefox-mobile">
                     <label><input type="checkbox" id="enable-clipboard-popups"> Enable native popups when copying Japanese text</label>
                 </div>
 
@@ -854,7 +854,7 @@
                             <li><a href="#kanji" data-toggle="tab">Kanji</a></li>
                         </ul>
 
-                        <div class="tab-content">
+                        <div class="tab-content ignore-form-changes" id="anki-fields-container">
                             <div id="terms" class="tab-pane fade in active" data-anki-card-type="terms">
                                 <div class="row">
                                     <div class="form-group col-xs-6">
@@ -1111,8 +1111,6 @@
                 </p>
             </div>
 
-            <pre id="debug" class="debug"></pre>
-
             <div class="pull-right bottom-links">
                 <small><span id="extension-info"></span> &bull; <a href="search.html">Search</a> &bull; <a href="https://foosoft.net/projects/yomichan/" target="_blank" rel="noopener">Homepage</a> &bull; <a href="legal.html">Legal</a></small>
             </div>