From 6dfb06c5b0d314524bacd6949d98adf1b398aa79 Mon Sep 17 00:00:00 2001 From: Thomas Rittson <31796059+eliykat@users.noreply.github.com> Date: Tue, 5 Oct 2021 06:30:31 +1000 Subject: [PATCH] Use theme enum and platformUtilsService helpers (#2089) * Use theme enum and platformUtilsService helpers * Update jslib --- jslib | 2 +- src/background/main.background.ts | 4 ++-- src/popup/services/services.module.ts | 23 ++++++++++--------- src/popup/settings/options.component.ts | 9 ++++---- .../browserPlatformUtils.service.spec.ts | 14 ++++++----- src/services/browserPlatformUtils.service.ts | 23 +++++++++++++++---- 6 files changed, 46 insertions(+), 29 deletions(-) diff --git a/jslib b/jslib index 91b73fa777..ce71c0c0bd 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit 91b73fa77727a12c788c00eef4f32065c23b6314 +Subproject commit ce71c0c0bd6667573e0e611222dc415770ba3909 diff --git a/src/background/main.background.ts b/src/background/main.background.ts index 161ca0ced9..b52b8cda8c 100644 --- a/src/background/main.background.ts +++ b/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); diff --git a/src/popup/services/services.module.ts b/src/popup/services/services.module.ts index 4c6967d154..9507ea9647 100644 --- a/src/popup/services/services.module.ts +++ b/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(service: string) { return (): T => { @@ -96,17 +97,17 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ await stateService.save(ConstantsService.disableBadgeCounterKey, await storageService.get(ConstantsService.disableBadgeCounterKey)); - let theme = await storageService.get(ConstantsService.themeKey); - if (theme == null) { - theme = await platformUtilsService.getDefaultSystemTheme(); - - platformUtilsService.onDefaultSystemThemeChange(sysTheme => { - window.document.documentElement.classList.remove('theme_light', 'theme_dark'); - window.document.documentElement.classList.add('theme_' + sysTheme); - }); - } - window.document.documentElement.classList.add('locale_' + i18nService.translationLocale); - window.document.documentElement.classList.add('theme_' + theme); + const htmlEl = window.document.documentElement; + const theme = await platformUtilsService.getEffectiveTheme(); + htmlEl.classList.add('theme_' + theme); + platformUtilsService.onDefaultSystemThemeChange(async sysTheme => { + const bwTheme = await storageService.get(ConstantsService.themeKey); + if (bwTheme == null || bwTheme === ThemeType.System) { + htmlEl.classList.remove('theme_' + ThemeType.Light, 'theme_' + ThemeType.Dark); + htmlEl.classList.add('theme_' + sysTheme); + } + }); + htmlEl.classList.add('locale_' + i18nService.translationLocale); } }; } diff --git a/src/popup/settings/options.component.ts b/src/popup/settings/options.component.ts index 5b94c15110..ba9def8803 100644 --- a/src/popup/settings/options.component.ts +++ b/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('dark'), value: 'dark' }, - { name: 'Nord', value: 'nord' }, - { name: i18nService.t('solarizedDark'), value: 'solarizedDark' }, + { name: i18nService.t('light'), value: ThemeType.Light }, + { name: i18nService.t('dark'), value: ThemeType.Dark }, + { name: 'Nord', value: ThemeType.Nord }, + { name: i18nService.t('solarizedDark'), value: ThemeType.SolarizedDark }, ]; this.uriMatchOptions = [ { name: i18nService.t('baseDomain'), value: UriMatchType.Domain }, diff --git a/src/services/browserPlatformUtils.service.spec.ts b/src/services/browserPlatformUtils.service.spec.ts index a56feabb14..0d7a7a2666 100644 --- a/src/services/browserPlatformUtils.service.spec.ts +++ b/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); }); }); diff --git a/src/services/browserPlatformUtils.service.ts b/src/services/browserPlatformUtils.service.ts index 509a9c9f71..8a3a2d0cd3 100644 --- a/src/services/browserPlatformUtils.service.ts +++ b/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) { } @@ -317,13 +321,22 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService return false; } - getDefaultSystemTheme(): Promise<'light' | 'dark'> { - return Promise.resolve(this.prefersColorSchemeDark.matches ? 'dark' : 'light'); + getDefaultSystemTheme(): Promise { + 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(ConstantsService.themeKey); + if (theme == null || theme === ThemeType.System) { + return this.getDefaultSystemTheme(); + } else { + return theme; + } + } }