Add warning if available storage space is low (#548)

* Add warning if storage space is low * b -> strong
yomidevs · Jan 21, 2024 · 1452569 · 1452569
1 parent 2de19c4
commit 1452569
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/ext/js/pages/settings/storage-controller.js b/ext/js/pages/settings/storage-controller.js
@@ -39,6 +39,8 @@ export class StorageController {
         /** @type {?NodeListOf<HTMLElement>} */
         this._storageUseFiniteNodes = null;
         /** @type {?NodeListOf<HTMLElement>} */
+        this._storageUseExhaustWarnNodes = null;
+        /** @type {?NodeListOf<HTMLElement>} */
         this._storageUseInfiniteNodes = null;
         /** @type {?NodeListOf<HTMLElement>} */
         this._storageUseValidNodes = null;
@@ -51,6 +53,7 @@ export class StorageController {
         this._storageUsageNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-usage'));
         this._storageQuotaNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-quota'));
         this._storageUseFiniteNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-finite'));
+        this._storageUseExhaustWarnNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-exhaustion-alert'));
         this._storageUseInfiniteNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-infinite'));
         this._storageUseValidNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-valid'));
         this._storageUseInvalidNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-invalid'));
@@ -84,13 +87,19 @@ export class StorageController {
 
             const estimate = await this._storageEstimate();
             const valid = (estimate !== null);
+            let storageIsLow = false;
 
             // Firefox reports usage as 0 when persistent storage is enabled.
             const finite = valid && ((typeof estimate.usage === 'number' && estimate.usage > 0) || !(await this._persistentStorageController.isStoragePeristent()));
             if (finite) {
                 let {usage, quota} = estimate;
+
                 if (typeof usage !== 'number') { usage = 0; }
-                if (typeof quota !== 'number') { quota = 0; }
+                if (typeof quota !== 'number') {
+                    quota = 0;
+                } else {
+                    storageIsLow = quota <= (3 * 1000000000);
+                }
                 const usageString = this._bytesToLabeledString(usage);
                 const quotaString = this._bytesToLabeledString(quota);
                 for (const node of /** @type {NodeListOf<HTMLElement>} */ (this._storageUsageNodes)) {
@@ -105,6 +114,7 @@ export class StorageController {
             this._setElementsVisible(this._storageUseInfiniteNodes, valid && !finite);
             this._setElementsVisible(this._storageUseValidNodes, valid);
             this._setElementsVisible(this._storageUseInvalidNodes, !valid);
+            this._setElementsVisible(this._storageUseExhaustWarnNodes, storageIsLow);
         } finally {
             this._isUpdating = false;
         }

diff --git a/ext/settings.html b/ext/settings.html
@@ -140,6 +140,12 @@ <h1>Yomitan Settings</h1>
                         </span>
                         <span class="storage-use-finite" hidden>
                             Yomitan is using approximately <span class="storage-usage">?</span> of <span class="storage-quota">?</span>.
+                            <div class="storage-exhaustion-alert warning-text margin-above">
+                                <div>
+                                    <strong>Your system is running low on storage space.</strong><br>
+                                    Importing dictionaries may fail.
+                                </div>
+                            </div>
                         </span>
                         <span class="storage-use-infinite" hidden>
                             Yomitan is permitted unlimited storage.