Fix snapshots

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -78,9 +78,7 @@
           </Popup>
           <button class="flex-grow" @click="exportSettings()">Export settings</button>
         </div>
-        <div>
+        <div></div>
-
-        </div>
         <ConfirmButton
           dialogType="danger"
           @onConfirmed="resetSettings"
@@ -130,15 +128,10 @@
         </JsonEditor>
       </div>
 
-      <h2>Settings migration report</h2>
-      <pre>
-        {{settings.migrationReport}}
-      </pre>
-
       <h2>Settings snapshots</h2>
       <div class="flex flex-col">
         <div v-for="(snapshot, index) of settingsSnapshots" :key="snapshot.createdAt">
-          <small>{{snapshot.createdAt.toISOString()}}</small>
+          <small>{{new Date(snapshot.createdAt).toISOString()}}</small>
           <div class="flex flex-row">
             <div class="grow">
               {{snapshot.name}}
@@ -208,6 +201,7 @@ export default {
   },
   mounted() {
     this.resetSettingsEditor();
+    this.loadSettingsSnapshots();
   },
   methods: {
     setTab(tab) {

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue

@@ -134,16 +134,25 @@
 </template>
 
 <script>
-import ShortcutButton from '../../../components/ShortcutButton.vue';
+import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
-import EditShortcutButton from '../../../components/EditShortcutButton';
+import EditShortcutButton from '@csui/src/components/EditShortcutButton';
-import EditModeMixin from '../../../utils/EditModeMixin';
+import EditModeMixin from '@csui/src/utils/EditModeMixin';
-import KeyboardShortcutParserMixin from '../../../utils/KeyboardShortcutParserMixin';
+import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
-import CommsMixin from '../../../utils/CommsMixin';
+import CommsMixin from '@csui/src/utils/CommsMixin';
-import AspectRatioType from '../../../../../common/enums/AspectRatioType.enum';
+import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
 
 export default {
+  components: {
+    ShortcutButton,
+    EditShortcutButton,
+  },
+  mixins: [
+    // ComputeActionsMixin,
+    EditModeMixin,
+    KeyboardShortcutParserMixin,
+    CommsMixin
+  ],
   data() {
-
     return {
       AspectRatioType: AspectRatioType,
 
@@ -156,12 +165,6 @@ export default {
       }
     }
   },
-  mixins: [
-    // ComputeActionsMixin,
-    EditModeMixin,
-    KeyboardShortcutParserMixin,
-    CommsMixin
-  ],
   props: [
     'settings',      // required for buttons and actions, which are global
     'siteSettings',
@@ -169,10 +172,6 @@ export default {
     'isEditing',
     'allowSettingSiteDefault'
   ],
-  components: {
-    ShortcutButton,
-    EditShortcutButton,
-  },
   computed: {
     siteDefaultCrop()  {
       if (!this.siteSettings) {

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue

@@ -50,11 +50,11 @@
               v-model="editModeOptions.stretch.selected.arguments.limit"
             >
           </div>
+        </div>
         <div class="hint">
           If vertical borders would take up less than this much of screen width, the image will be stretched. If the borders are too thick, image will not be stretched.
           Value of 1 means 100%. Value of 0.1 means vertical black bars can take up 10% of the width at most. There's no validation on this, use common sense.
         </div>
-        </div>
       </template>
 
       <!-- Some options are only shown for type 5 (fixed) stretch -->
@@ -70,12 +70,12 @@
               @blur="editModeOptions.stretch.selected.label === 'Stretch to ...' ? editModeOptions.stretch.selected.label = `Stretch to ${editModeOptions.stretch.selected.arguments.ratio}` : null"
             >
           </div>
+        </div>
         <div class="hint">
             You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
             (in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
             your numbers without quote marks. Number will be converted to factor form on save.
           </div>
-        </div>
         <div class="field">
           <div class="label">
             Label:
@@ -83,10 +83,10 @@
           <div class="input">
             <input v-model="editModeOptions.stretch.selected.label">
           </div>
+        </div>
         <div class="hint">
           Label for the button. You can make it say something other than ratio.
         </div>
-        </div>
       </template>
 
       <!-- editing keyboard shortcuts is always allowed -->
@@ -99,12 +99,12 @@
           >
           </EditShortcutButton>
         </div>
+      </div>
       <div class="hint">
         <b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
         The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
         any keyboard shortcuts defined by the site itself.
       </div>
-      </div>
 
       <div class="flex flex-row flex-end">
         <div

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue

@@ -1,5 +1,132 @@
 <template>
   <div class="flex flex-col">
+
+    <div class="sub-panel-content flex flex-row flex-wrap">
+
+      <ShortcutButton
+        v-for="(command, index) of settings?.active.commands.zoom"
+        class="flex b3 button"
+        :class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command)}"
+        :key="index"
+        :label="command.label"
+        :shortcut="getKeyboardShortcutLabel(command)"
+        @click="editMode ? editAction(command, index, 'zoom') : execAction(command)"
+      >
+      </ShortcutButton>
+
+      <!-- "Add new" button -->
+      <ShortcutButton
+        v-if="editMode"
+        class="button b3"
+        :class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
+        label="Add new"
+        @click="editAction(
+          {action: 'set-ar-zoom', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
+          null,
+          'zoom'
+        )"
+      ></ShortcutButton>
+    </div>
+
+    <template v-if="isEditing">
+      <div v-if="editMode && editModeOptions?.zoom?.selected" class="sub-panel-content">
+        <div class="edit-action-area-header">
+          <span class="text-primary">Editing options for:</span> <b>{{editModeOptions?.zoom?.selected?.label}}</b>&nbsp;
+          <template v-if="editModeOptions?.zoom?.selectedIndex === null && editModeOptions?.zoom?.selected?.label !== 'New aspect ratio'">(New ratio)</template>
+        </div>
+        <div class="edit-action-area">
+          <!-- Some options are only shown for type 4 (fixed) zooms -->
+          <template v-if="editModeOptions?.zoom?.selected?.arguments?.type === AspectRatioType.Fixed">
+            <div class="field">
+              <div class="label">
+                Ratio:
+              </div>
+              <div class="input">
+                <!-- We do an ugly in order to avoid spamming functions down at the bottom -->
+                <input
+                  v-model="editModeOptions.zoom.selected.arguments.ratio"
+                  @blur="editModeOptions.zoom.selected.label === 'New aspect ratio' ? editModeOptions.zoom.selected.label = editModeOptions.zoom.selected.arguments.ratio : null"
+                >
+              </div>
+            </div>
+            <div class="hint">
+              You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
+              (in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
+              your numbers without quote marks. Number will be converted to factor form on save.
+            </div>
+
+            <div class="field">
+              <div class="label">
+                Label:
+              </div>
+              <div class="input">
+                <input v-model="editModeOptions.zoom.selected.label">
+              </div>
+            </div>
+            <div class="hint">
+              Label for the button. You can make it say something other than ratio.
+            </div>
+          </template>
+
+          <!-- editing keyboard shortcuts is always allowed -->
+          <div class="field">
+            <div class="label">Shortcut:</div>
+            <div class="">
+              <EditShortcutButton
+                :shortcut="editModeOptions?.zoom?.selected?.shortcut"
+                @shortcutChanged="updateSelectedShortcut($event, 'zoom')"
+              >
+              </EditShortcutButton>
+            </div>
+          </div>
+          <div class="hint">
+            <b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
+            The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
+            any keyboard shortcuts defined by the site itself.
+          </div>
+
+          <div class="flex flex-row flex-end">
+            <div
+              v-if="editModeOptions?.zoom?.selected?.arguments?.type === AspectRatioType.Fixed && editModeOptions?.zoom?.selectedIndex !== null"
+              class="button"
+              @click="deleteAction('zoom')"
+            >
+              <mdicon name="delete"></mdicon> Delete
+            </div>
+            <div class="flex-grow"></div>
+            <div class="button" @click="cancelEdit('zoom')">Cancel</div>
+            <div class="button" @click="saveShortcut('zoom')">
+              <mdicon name="floppy"></mdicon>
+              &nbsp;
+              <template v-if="editModeOptions?.zoom?.selectedIndex === null">Add</template>
+              <template v-else>Save</template>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <!-- <div v-if="siteSettings && allowSettingSiteDefault" class="edit-action-area">
+        <div class="field">
+          <div class="label">Default for this site</div>
+          <div class="select">
+            <select
+              :value="siteDefaultZoom"
+              @change="setDefaultZoom($event, 'site')"
+            >
+              <option
+                v-for="(command, index) of settings?.active.commands.zoom"
+                :key="index"
+                :value="JSON.stringify(command.arguments)"
+              >
+                {{command.label}}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div> -->
+    </template>
+    <template v-else>
       <!--
         min, max and value need to be implemented in js as this slider
         should use logarithmic scale
@@ -73,14 +200,33 @@
           </div>
         </div>
       </template>
+    </template>
   </div>
 </template>
 
 <script>
+import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
+import EditShortcutButton from '@csui/src/components/EditShortcutButton';
+import EditModeMixin from '@csui/src/utils/EditModeMixin';
+import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
+import CommsMixin from '@csui/src/utils/CommsMixin';
+import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
 
 export default {
+  components: {
+    ShortcutButton,
+    EditShortcutButton,
+  },
+  mixins: [
+    // ComputeActionsMixin,
+    EditModeMixin,
+    KeyboardShortcutParserMixin,
+    CommsMixin
+  ],
   data() {
     return {
+      AspectRatioType,
+
       zoomAspectRatioLocked: true,
       zoom: {
         x: 0,
@@ -96,15 +242,26 @@ export default {
       }
     }
   },
-  mixins: [
-
-  ],
   props: [
     'settings',      // required for buttons and actions, which are global
     'siteSettings',
     'eventBus',
     'isEditing'
   ],
+  created() {
+    if (this.isEditing) {
+      this.enableEditMode();
+    }
+  },
+  watch: {
+    isEditing(newValue, oldValue) {
+      if (newValue) {
+        this.enableEditMode();
+      } else {
+        this.disableEditMode();
+      }
+    }
+  },
   methods: {
     getZoomForDisplay(axis) {
       // zoom is internally handled logarithmically, because we want to have x0.5, x1, x2, x4 ... magnifications
@@ -146,6 +303,9 @@ export default {
         this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: axis ?? 'x'});
       }
     },
+    isActiveZoom(command) {
+      return false;
+    }
   }
 }
 

src/csui/src/PlayerUiPanels/PlayerUiSettings.vue

@@ -135,6 +135,19 @@
             :isEditing="true"
           ></StretchOptionsPanel>
         </div>
+
+        <!-- ZOOM OPTIONS -->
+        <div>
+          <div class="flex flex-row">
+            <h3 class="mth3">ZOOM OPTIONS</h3>
+          </div>
+
+          <ZoomOptionsPanel
+            :settings="settings"
+            :eventBus="eventBus"
+            :isEditing="true"
+          ></ZoomOptionsPanel>
+        </div>
       </div>
 
     </div>
@@ -142,16 +155,18 @@
 </template>
 
 <script>
-import Button from '../components/Button.vue'
+import Button from '@csui/src/components/Button.vue'
-import BrowserDetect from '../../../ext/conf/BrowserDetect';
+import BrowserDetect from '@src/ext/conf/BrowserDetect';
-import CropOptionsPanel from './PanelComponents/VideoSettings/CropOptionsPanel.vue'
+import CropOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue'
-import StretchOptionsPanel from './PanelComponents/VideoSettings/StretchOptionsPanel.vue'
+import StretchOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue'
+import ZoomOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue'
 
 export default {
   components: {
     Button,
     CropOptionsPanel,
-    StretchOptionsPanel
+    StretchOptionsPanel,
+    ZoomOptionsPanel,
   },
   data() {
     return {
@@ -267,7 +282,7 @@ export default {
   gap: 1rem;
 
   > * {
-    width: calc(50% - 0.5rem);
+    width: calc(33% - 0.5rem);
   }
 }
 

src/ext/conf/ExtConfPatches.ts

@@ -10,7 +10,7 @@ import CropModePersistence from '../../common/enums/CropModePersistence.enum';
 import AspectRatioType from '../../common/enums/AspectRatioType.enum';
 import { update } from 'lodash';
 
-const ExtensionConfPatch = [
+const ExtensionConfPatch = Object.freeze([
   {
     forVersion: '6.2.4',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
@@ -35,6 +35,19 @@ const ExtensionConfPatch = [
   }, {
     forVersion: '6.2.6',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
+
+      console.warn('[ultrawidify] STARTING SETTINGS MIGRATION TO 6.2.6');
+
+      if (!userOptions.commands) {
+        userOptions.commands = {
+          zoom: [],
+          crop: [],
+          stretch: [],
+          pan: [],
+          internal: []
+        };
+      }
+
       userOptions.commands.zoom = [{
         action: 'change-zoom',
         label: 'Zoom +5%',
@@ -92,9 +105,139 @@ const ExtensionConfPatch = [
           showDetectionDetails: true
         }
       }
+
+      const newZoomActions = [{
+        action: 'set-zoom',
+        label: 'Reset zoom',
+        shortcut: {
+          key: 'r',
+          code: 'KeyR',
+          ctrlKey: false,
+          metaKey: false,
+          altKey: false,
+          shiftKey: true,
+          onKeyUp: true,
+          onKeyDown: false,
+        },
+        internalOnly: true,
+        actionId: 'set-zoom-reset'
+      }, {
+        action: 'set-ar-zoom',
+        label: 'Automatic',
+        comment: 'Automatically detect aspect ratio and zoom accordingly',
+        arguments: {
+          type: AspectRatioType.Automatic
+        },
+        shortcut: {
+          key: 'a',
+          code: 'KeyA',
+          ctrlKey: false,
+          metaKey: false,
+          altKey: false,
+          shiftKey: true,
+          onKeyUp: true,
+          onKeyDown: false,
+        }
+      }, {
+        action: 'set-ar-zoom',
+        label: 'Cycle',
+        comment: 'Cycle through zoom options',
+        arguments: {
+          type: AspectRatioType.Cycle
+        },
+        shortcut: {
+          key: 'c',
+          code: 'KeyC',
+          ctrlKey: false,
+          metaKey: false,
+          altKey: false,
+          shiftKey: true,
+          onKeyUp: true,
+          onKeyDown: false,
+        }
+      }, {
+        action: 'set-ar-zoom',
+        label: '21:9',
+        comment: 'Zoom for 21:9 aspect ratio (1:2.39)',
+        arguments: {
+          type: AspectRatioType.Fixed,
+          ratio: 2.39
+        },
+        shortcut: {
+          key: 'd',
+          code: 'KeyD',
+          ctrlKey: false,
+          metaKey: false,
+          altKey: false,
+          shiftKey: true,
+          onKeyUp: false,
+          onKeyDown: true,
+        }
+      }, {
+        action: 'set-ar-zoom',
+        label: '18:9',
+        comment: 'Zoom for 18:9 aspect ratio (1:2)',
+        arguments: {
+          type: AspectRatioType.Fixed,
+          ratio: 1.78
+        },
+        shortcut: {
+          key: 's',
+          code: 'KeyS',
+          ctrlKey: false,
+          metaKey: false,
+          altKey: false,
+          shiftKey: true,
+          onKeyUp: false,
+          onKeyDown: true,
+        }
+      }, {
+        action: 'set-ar-zoom',
+        label: '32:9',
+        comment: 'Zoom for 32:9 aspect ratio',
+        arguments: {
+          type: AspectRatioType.Fixed,
+          ratio: 3.56
+        },
+      }];
+
+      const compareShortcuts = (a: any, b: any) => {
+        if (!a || !b) {
+          return false;
+        }
+
+        return a.key === b.key && b.code === b.code && a.ctrlKey == b.ctrlKey && a.shiftKey == b.shiftKey && a.metaKey == a.metaKey && a.altKey == b.altKey;
+      }
+
+      const hasConflict = (shortcut: any) => {
+        for (const ct in userOptions.commands) {
+          for (const command of userOptions.commands[ct]) {
+            if (compareShortcuts(shortcut, command.shortcut)) {
+              return true;
             }
           }
-];
+        }
+
+        return false;
+      }
+
+      for (const zoomAction of newZoomActions) {
+        if (
+          !userOptions.commands.zoom.find(
+            x => x.action === zoomAction.action
+              && x.arguments?.type === zoomAction.arguments?.type
+              && x.arguments?.ratio === zoomAction.arguments?.ratio
+          )
+        ) {
+          userOptions.commands.zoom.push({
+            ...zoomAction,
+            shortcut: hasConflict(zoomAction.shortcut) ? undefined : zoomAction.shortcut
+          });
+        }
+      }
+    }
+  }
+]);
 
 
 export default ExtensionConfPatch;

src/ext/conf/ExtensionConf.ts

@@ -401,11 +401,96 @@ const ExtensionConf: SettingsInterface = {
     }, {
       action: 'set-zoom',
       label: 'Reset zoom',
-      arguments: {
+      shortcut: {
-        zoom: 1,
+        key: 'r',
+        code: 'KeyR',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: true,
+        onKeyUp: true,
+        onKeyDown: false,
       },
       internalOnly: true,
       actionId: 'set-zoom-reset'
+    }, {
+      action: 'set-ar-zoom',
+      label: 'Automatic',
+      comment: 'Automatically detect aspect ratio',
+      arguments: {
+        type: AspectRatioType.Automatic
+      },
+      shortcut: {
+        key: 'a',
+        code: 'KeyA',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: true,
+        onKeyUp: true,
+        onKeyDown: false,
+      }
+    }, {
+      action: 'set-ar-zoom',
+      label: 'Cycle',
+      comment: 'Cycle through crop options',
+      arguments: {
+        type: AspectRatioType.Cycle
+      },
+      shortcut: {
+        key: 'c',
+        code: 'KeyC',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: true,
+        onKeyUp: true,
+        onKeyDown: false,
+      }
+    }, {
+      action: 'set-ar-zoom',
+      label: '21:9',
+      comment: 'Crop for 21:9 aspect ratio (1:2.39)',
+      arguments: {
+        type: AspectRatioType.Fixed,
+        ratio: 2.39
+      },
+      shortcut: {
+        key: 'd',
+        code: 'KeyD',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: true,
+        onKeyUp: false,
+        onKeyDown: true,
+      }
+    }, {
+      action: 'set-ar-zoom',
+      label: '18:9',
+      comment: 'Crop for 18:9 aspect ratio (1:2)',
+      arguments: {
+        type: AspectRatioType.Fixed,
+        ratio: 1.78
+      },
+      shortcut: {
+        key: 's',
+        code: 'KeyS',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: true,
+        onKeyUp: false,
+        onKeyDown: true,
+      }
+    }, {
+      action: 'set-ar-zoom',
+      label: '32:9',
+      comment: 'Crop for 32:9 aspect ratio',
+      arguments: {
+        type: AspectRatioType.Fixed,
+        ratio: 3.56
+      },
     }],
     pan: [{
       action: 'set-alignment',

src/ext/lib/Settings.ts

@@ -44,18 +44,9 @@ class Settings {
   onChangedCallbacks: (() => void)[] = [];
   afterSettingsChangedCallbacks: (() => void)[] = [];
 
-  private sortedPatches: any[];
-
 
   public snapshotManager: SettingsSnapshotManager;
 
-  private _migrationReport: string = '';
-  private set migrationReport(report: string) {
-    this._migrationReport = report;
-  }
-  public get migrationReport(): string {
-    return this._migrationReport;
-  }
   //#endregion
 
   constructor(options) {
@@ -70,9 +61,6 @@ class Settings {
     this.default['version'] = this.getExtensionVersion();
 
     chrome.storage.onChanged.addListener((changes, area) => {this.storageChangeListener(changes, area)});
-
-    this.sortedPatches = this.sortConfPatches(ExtensionConfPatch);
-
   }
 
   private storageChangeListener(changes, area) {
@@ -194,7 +182,7 @@ class Settings {
   }
 
   private findFirstNecessaryPatch(version) {
-    return this.sortedPatches.findIndex(x => this.compareExtensionVersions(x.forVersion, version) > 0);
+    return ExtensionConfPatch.findIndex(x => this.compareExtensionVersions(x.forVersion, version) > 0);
   }
   private applySettingsPatches(oldVersion) {
     let index = this.findFirstNecessaryPatch(oldVersion);
@@ -217,20 +205,20 @@ class Settings {
 
 
     // apply all remaining patches
-    this.logger?.log('info', 'settings', `[Settings::applySettingsPatches] There are ${this.sortedPatches.length - index} settings patches to apply`);
+    this.logger?.log('info', 'settings', `[Settings::applySettingsPatches] There are ${ExtensionConfPatch.length - index} settings patches to apply`);
-    while (index < this.sortedPatches.length) {
+    while (index < ExtensionConfPatch.length) {
-      const updateFn =  this.sortedPatches[index].updateFn;
+      const updateFn =  ExtensionConfPatch[index].updateFn;
-      delete  this.sortedPatches[index].forVersion;
-      delete  this.sortedPatches[index].updateFn;
-
-      if (Object.keys( this.sortedPatches[index]).length > 0) {
-        ObjectCopy.overwrite(this.active, this.sortedPatches[index]);
-      }
       if (updateFn) {
         try {
           updateFn(this.active, this.getDefaultSettings());
         } catch (e) {
           this.logger?.log('error', 'settings', '[Settings::applySettingsPatches] Failed to execute update function. Keeping settings object as-is. Error:', e);
+          console.warn(
+            '————————————————————————————————————\n',
+            'Applying patch', index, ' failed :', '\n',
+            e, '\n',
+            '————————————————————————————————————\n',
+          );
         }
       }
 
@@ -254,7 +242,7 @@ class Settings {
     //                 |—> on first setup, settings is undefined & settings.version is haram
     //                 |   since new installs ship with updates by default, no patching is
     //                 |   needed. In this case, we assume we're on the current version
-    const oldVersion = (settings && settings.version) || this.version;
+    const oldVersion = settings?.version ?? this.version;
 
     if (settings) {
       this.logger?.log('info', 'settings', "[Settings::init] Configuration fetched from storage:", settings,
@@ -276,6 +264,7 @@ class Settings {
       this.active = this.getDefaultSettings();
       this.active.version = this.version;
       await this.save();
+
       return this.active;
     }
 
@@ -339,7 +328,6 @@ class Settings {
     if (!options || !options.forcePreserveVersion) {
       extensionConf.version = this.version;
     }
-
     this.logger?.log('info', 'settings', "[Settings::set] setting new settings:", extensionConf)
 
     return chrome.storage.local.set( {'uwSettings': JSON.stringify(extensionConf)});
@@ -385,7 +373,7 @@ class Settings {
 
   async save(options?: SetSettingsOptions) {
     if (Debug.debug && Debug.storage) {
-      console.log("[Settings::save] Saving active settings:", this.active);
+      console.log("[Settings::save] Saving active settings — save options", options, "; settings:", this.active);
     }
     this.active.preventReload = undefined;
     this.active.lastModified = new Date();

src/ext/lib/settings/SettingsSnapshotManager.ts

@@ -92,13 +92,14 @@ export class SettingsSnapshotManager {
   async listSnapshots(): Promise<SettingsSnapshot[]> {
     const ret = await chrome.storage.local.get('uwSettings-snapshots');
     try {
-      JSON.parse(ret['uwSettings-snapshots']) as SettingsSnapshot[];
+      const json = JSON.parse(ret['uwSettings-snapshots']) as SettingsSnapshot[];
+      return json;
     } catch (e) {
       return [] as SettingsSnapshot[];
     }
   }
 
-  private async set(snapshots: SettingsSnapshot[]) {
+  private async set(snapshots: SettingsSnapshot[] = []) {
     await chrome.storage.local.set({
       'uwSettings-snapshots': JSON.stringify(snapshots),
     });