Use theme enum and platformUtilsService helpers (#2089)

* Use theme enum and platformUtilsService helpers

* Update jslib

jslib

@@ -1 +1 @@
-Subproject commit 91b73fa77727a12c788c00eef4f32065c23b6314
+Subproject commit ce71c0c0bd6667573e0e611222dc415770ba3909

src/background/main.background.ts

@@ -146,7 +146,8 @@ export default class MainBackground {
     constructor() {
         // Services
         this.messagingService = new BrowserMessagingService();
-        this.platformUtilsService = new BrowserPlatformUtilsService(this.messagingService,
+        this.storageService = new BrowserStorageService();
+        this.platformUtilsService = new BrowserPlatformUtilsService(this.messagingService, this.storageService,
             (clipboardValue, clearMs) => {
                 if (this.systemService != null) {
                     this.systemService.clearClipboard(clipboardValue, clearMs);
@@ -165,7 +166,6 @@ export default class MainBackground {
                     return promise.then(result => result.response === 'unlocked');
                 }
             });
-        this.storageService = new BrowserStorageService();
         this.secureStorageService = new BrowserStorageService();
         this.i18nService = new I18nService(BrowserApi.getUILanguage(window));
         this.cryptoFunctionService = new WebCryptoFunctionService(window, this.platformUtilsService);

src/popup/services/services.module.ts

@@ -62,6 +62,7 @@ import { StateService } from 'jslib-common/services/state.service';
 
 import { PopupSearchService } from './popup-search.service';
 import { PopupUtilsService } from './popup-utils.service';
+import { ThemeType } from 'jslib-common/enums/themeType';
 
 function getBgService<T>(service: string) {
     return (): T => {
@@ -96,17 +97,17 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ
             await stateService.save(ConstantsService.disableBadgeCounterKey,
                 await storageService.get<boolean>(ConstantsService.disableBadgeCounterKey));
 
-            let theme = await storageService.get<string>(ConstantsService.themeKey);
+            const htmlEl = window.document.documentElement;
-            if (theme == null) {
+            const theme = await platformUtilsService.getEffectiveTheme();
-                theme = await platformUtilsService.getDefaultSystemTheme();
+            htmlEl.classList.add('theme_' + theme);
-
+            platformUtilsService.onDefaultSystemThemeChange(async sysTheme => {
-                platformUtilsService.onDefaultSystemThemeChange(sysTheme => {
+                const bwTheme = await storageService.get<ThemeType>(ConstantsService.themeKey);
-                    window.document.documentElement.classList.remove('theme_light', 'theme_dark');
+                if (bwTheme == null || bwTheme === ThemeType.System) {
-                    window.document.documentElement.classList.add('theme_' + sysTheme);
+                    htmlEl.classList.remove('theme_' + ThemeType.Light, 'theme_' + ThemeType.Dark);
-                });
+                    htmlEl.classList.add('theme_' + sysTheme);
-            }
+                }
-            window.document.documentElement.classList.add('locale_' + i18nService.translationLocale);
+            });
-            window.document.documentElement.classList.add('theme_' + theme);
+            htmlEl.classList.add('locale_' + i18nService.translationLocale);
         }
     };
 }

src/popup/settings/options.component.ts

@@ -12,6 +12,7 @@ import { StorageService } from 'jslib-common/abstractions/storage.service';
 import { TotpService } from 'jslib-common/abstractions/totp.service';
 
 import { ConstantsService } from 'jslib-common/services/constants.service';
+import { ThemeType } from 'jslib-common/enums/themeType';
 
 @Component({
     selector: 'app-options',
@@ -44,10 +45,10 @@ export class OptionsComponent implements OnInit {
         private stateService: StateService, private totpService: TotpService, i18nService: I18nService) {
         this.themeOptions = [
             { name: i18nService.t('default'), value: null },
-            { name: i18nService.t('light'), value: 'light' },
+            { name: i18nService.t('light'), value: ThemeType.Light },
-            { name: i18nService.t('dark'), value: 'dark' },
+            { name: i18nService.t('dark'), value: ThemeType.Dark },
-            { name: 'Nord', value: 'nord' },
+            { name: 'Nord', value: ThemeType.Nord },
-            { name: i18nService.t('solarizedDark'), value: 'solarizedDark' },
+            { name: i18nService.t('solarizedDark'), value: ThemeType.SolarizedDark },
         ];
         this.uriMatchOptions = [
             { name: i18nService.t('baseDomain'), value: UriMatchType.Domain },

src/services/browserPlatformUtils.service.spec.ts

@@ -2,6 +2,8 @@ import BrowserPlatformUtilsService from './browserPlatformUtils.service';
 
 import { DeviceType } from 'jslib-common/enums/deviceType';
 
+const platformUtilsFactory = () => new BrowserPlatformUtilsService(null, null, null, null);
+
 describe('Browser Utils Service', () => {
     describe('getBrowser', () => {
         const originalUserAgent = navigator.userAgent;
@@ -27,7 +29,7 @@ describe('Browser Utils Service', () => {
                 value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36',
             });
 
-            const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null);
+            const browserPlatformUtilsService = platformUtilsFactory();
             expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.ChromeExtension);
         });
 
@@ -37,7 +39,7 @@ describe('Browser Utils Service', () => {
                 value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0',
             });
 
-            const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null);
+            const browserPlatformUtilsService = platformUtilsFactory();
             expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.FirefoxExtension);
         });
 
@@ -52,7 +54,7 @@ describe('Browser Utils Service', () => {
                 value: {},
             });
 
-            const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null);
+            const browserPlatformUtilsService = platformUtilsFactory();
             expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.OperaExtension);
         });
 
@@ -62,7 +64,7 @@ describe('Browser Utils Service', () => {
                 value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.74 Safari/537.36 Edg/79.0.309.43',
             });
 
-            const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null);
+            const browserPlatformUtilsService = platformUtilsFactory();
             expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.EdgeExtension);
         });
 
@@ -77,7 +79,7 @@ describe('Browser Utils Service', () => {
                 value: true,
             });
 
-            const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null);
+            const browserPlatformUtilsService = platformUtilsFactory();
             expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.SafariExtension);
 
             Object.defineProperty(window, 'safariAppExtension', {
@@ -92,7 +94,7 @@ describe('Browser Utils Service', () => {
                 value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.97 Safari/537.36 Vivaldi/1.94.1008.40',
             });
 
-            const browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null);
+            const browserPlatformUtilsService = platformUtilsFactory();
             expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.VivaldiExtension);
         });
     });

src/services/browserPlatformUtils.service.ts

@@ -2,9 +2,13 @@ import { BrowserApi } from '../browser/browserApi';
 import { SafariApp } from '../browser/safariApp';
 
 import { DeviceType } from 'jslib-common/enums/deviceType';
+import { ThemeType } from 'jslib-common/enums/themeType';
 
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { StorageService } from 'jslib-common/abstractions/storage.service';
+
+import { ConstantsService } from 'jslib-common/services/constants.service';
 
 const DialogPromiseExpiration = 600000; // 10 minutes
 
@@ -16,7 +20,7 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
     private deviceCache: DeviceType = null;
     private prefersColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)');
 
-    constructor(private messagingService: MessagingService,
+    constructor(private messagingService: MessagingService, private storageService: StorageService,
         private clipboardWriteCallback: (clipboardValue: string, clearMs: number) => void,
         private biometricCallback: () => Promise<boolean>) { }
 
@@ -317,13 +321,22 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
         return false;
     }
 
-    getDefaultSystemTheme(): Promise<'light' | 'dark'> {
+    getDefaultSystemTheme(): Promise<ThemeType.Light | ThemeType.Dark> {
-        return Promise.resolve(this.prefersColorSchemeDark.matches ? 'dark' : 'light');
+        return Promise.resolve(this.prefersColorSchemeDark.matches ? ThemeType.Dark : ThemeType.Light);
     }
 
-    onDefaultSystemThemeChange(callback: ((theme: 'light' | 'dark') => unknown)) {
+    onDefaultSystemThemeChange(callback: ((theme: ThemeType.Light | ThemeType.Dark) => unknown)) {
         this.prefersColorSchemeDark.addEventListener('change', ({ matches }) => {
-            callback(matches ? 'dark' : 'light');
+            callback(matches ? ThemeType.Dark : ThemeType.Light);
         });
     }
+
+    async getEffectiveTheme() {
+        const theme = await this.storageService.get<ThemeType>(ConstantsService.themeKey);
+        if (theme == null || theme === ThemeType.System) {
+            return this.getDefaultSystemTheme();
+        } else {
+            return theme;
+        }
+    }
 }