Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-30 04:28:19 +02:00
Code Issues Projects Releases Wiki Activity

Use theme enum and platformUtilsService helpers (#2089)

Browse Source 
* Use theme enum and platformUtilsService helpers

* Update jslib
This commit is contained in:
Thomas Rittson 2021-10-05 06:30:31 +10:00 committed by GitHub
parent e4260e7df5
commit 6dfb06c5b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 46 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

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

4
src/background/main.background.ts
View File

@ -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);

23
src/popup/services/services.module.ts
View File

@ -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);
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<ThemeType>(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);
}
};
}

9
src/popup/settings/options.component.ts
View File

@ -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 },

14
src/services/browserPlatformUtils.service.spec.ts
View File

@ -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);
});
});

23
src/services/browserPlatformUtils.service.ts
View File

@ -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'> {
return Promise.resolve(this.prefersColorSchemeDark.matches ? 'dark' : 'light');
getDefaultSystemTheme(): Promise<ThemeType.Light | ThemeType.Dark> {
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;
}
}
}