show storage usage in settings

src/domain/RootViewModel.js

@@ -127,7 +127,8 @@ export class RootViewModel extends ViewModel {
         this._setSection(() => {
             this._sessionViewModel = new SessionViewModel(this.childOptions({
                 sessionContainer,
-                updateService: this.getOption("updateService")
+                updateService: this.getOption("updateService"),
+                estimateStorageUsage: this.getOption("estimateStorageUsage"),
             }));
             this._sessionViewModel.start();
         });

src/domain/session/SessionViewModel.js

@@ -189,8 +189,10 @@ export class SessionViewModel extends ViewModel {
         if (settingsOpen) {
             this._settingsViewModel = this.track(new SettingsViewModel(this.childOptions({
                 updateService: this.getOption("updateService"),
-                session: this._sessionContainer.session
+                session: this._sessionContainer.session,
+                estimateStorageUsage: this.getOption("estimateStorageUsage")
             })));
+            this._settingsViewModel.load();
         }
         this.emitChange("activeSection");
     }

src/domain/session/settings/SettingsViewModel.js

@@ -35,6 +35,13 @@ export class SettingsViewModel extends ViewModel {
         this._session = session;
         this._sessionBackupViewModel = this.track(new SessionBackupViewModel(this.childOptions({session})));
         this._closeUrl = this.urlCreator.urlUntilSegment("session");
+        this._estimateStorageUsage = options.estimateStorageUsage;
+        this._estimate = null;
+    }
+
+    async load() {
+        this._estimate = await this._estimateStorageUsage();
+        this.emitChange("");
     }
 
     get closeUrl() {
@@ -71,4 +78,21 @@ export class SettingsViewModel extends ViewModel {
     get sessionBackupViewModel() {
         return this._sessionBackupViewModel;
     }
+
+    get storageQuota() {
+        return this._formatBytes(this._estimate?.quota);
     }
+
+    get storageUsage() {
+        return this._formatBytes(this._estimate?.usage);
+    }
+
+    _formatBytes(n) {
+        if (typeof n === "number") {
+            return Math.round(n / (1024 * 1024)).toFixed(1) + " MB";
+        } else {
+            return this.i18n`unknown`;
+        }
+    }
+}
+

src/main.js

@@ -29,6 +29,7 @@ import {ServiceWorkerHandler} from "./ui/web/dom/ServiceWorkerHandler.js";
 import {History} from "./ui/web/dom/History.js";
 import {OnlineStatus} from "./ui/web/dom/OnlineStatus.js";
 import {CryptoDriver} from "./ui/web/dom/CryptoDriver.js";
+import {estimateStorageUsage} from "./ui/web/dom/StorageEstimate.js";
 import {WorkerPool} from "./utils/WorkerPool.js";
 import {OlmWorker} from "./matrix/e2ee/OlmWorker.js";
 
@@ -147,7 +148,8 @@ export async function main(container, paths, legacyExtras) {
             // so we call it that in the view models
             urlCreator: urlRouter,
             navigation,
-            updateService: serviceWorkerHandler
+            updateService: serviceWorkerHandler,
+            estimateStorageUsage
         });
         window.__hydrogenViewModel = vm;
         await vm.load();

src/ui/web/dom/StorageEstimate.js

@@ -0,0 +1,24 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export async function estimateStorageUsage() {
+    if (navigator?.storage?.estimate) {
+        const {quota, usage} = await navigator.storage.estimate();
+        return {quota, usage};
+    } else {
+        return {quota: null, usage: null};
+    }
+}

src/ui/web/session/settings/SettingsView.js

@@ -48,6 +48,7 @@ export class SettingsView extends TemplateView {
                 t.view(new SessionBackupSettingsView(vm.sessionBackupViewModel)),
                 t.h3("Application"),
                 row(vm.i18n`Version`, version),
+                row(vm.i18n`Storage usage`, vm => `${vm.storageUsage} / ${vm.storageQuota}`),
             ])
         ]);
     }