From 12e6b0b3043f19d0cf1730eb3c213d3930310053 Mon Sep 17 00:00:00 2001 From: Anthony Stewart <150152+a-stewart@users.noreply.github.com> Date: Sat, 26 Feb 2022 08:34:47 +0100 Subject: [PATCH] Add match media change listener in browser ts (#143287) * Replace the isStandalone const with a method of the same name * Adding the matchMediaChangeListener into browser.ts so it can be used there * Fix formatting * Use browser.ts for all usages of addMatchMediaChangeListener Co-authored-by: Anthony Stewart --- src/vs/base/browser/browser.ts | 20 ++++++++++++++++++- src/vs/base/browser/canIUse.ts | 2 +- src/vs/base/browser/dom.ts | 5 ----- src/vs/code/browser/workbench/workbench.ts | 2 +- .../gotoSymbol/browser/goToCommands.ts | 2 +- .../browser/standaloneThemeService.ts | 3 ++- src/vs/workbench/browser/style.ts | 2 +- .../browser/workbench.contribution.ts | 2 +- .../browser/browserHostColorSchemeService.ts | 6 +++--- 9 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/vs/base/browser/browser.ts b/src/vs/base/browser/browser.ts index 1a9aa03c2824a..1c60612b0e20b 100644 --- a/src/vs/base/browser/browser.ts +++ b/src/vs/base/browser/browser.ts @@ -144,6 +144,13 @@ class PixelRatioFacade { } } +export function addMatchMediaChangeListener(query: string | MediaQueryList, callback: (this: MediaQueryList, ev: MediaQueryListEvent) => any): void { + if (typeof query === 'string') { + query = window.matchMedia(query); + } + query.addEventListener('change', callback); +} + /** * Returns the pixel ratio. * @@ -186,4 +193,15 @@ export const isSafari = (!isChrome && (userAgent.indexOf('Safari') >= 0)); export const isWebkitWebView = (!isChrome && !isSafari && isWebKit); export const isElectron = (userAgent.indexOf('Electron/') >= 0); export const isAndroid = (userAgent.indexOf('Android') >= 0); -export const isStandalone = (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches); + +let standalone = false; +if (window.matchMedia) { + const matchMedia = window.matchMedia('(display-mode: standalone)'); + standalone = matchMedia.matches; + addMatchMediaChangeListener(matchMedia, ({ matches }) => { + standalone = matches; + }); +} +export function isStandalone(): boolean { + return standalone; +} diff --git a/src/vs/base/browser/canIUse.ts b/src/vs/base/browser/canIUse.ts index 97cf42a576ed0..a759f7085db32 100644 --- a/src/vs/base/browser/canIUse.ts +++ b/src/vs/base/browser/canIUse.ts @@ -28,7 +28,7 @@ export const BrowserFeatures = { ) }, keyboard: (() => { - if (platform.isNative || browser.isStandalone) { + if (platform.isNative || browser.isStandalone()) { return KeyboardSupport.Always; } diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts index 5d8148868f449..4285492c9b3a4 100644 --- a/src/vs/base/browser/dom.ts +++ b/src/vs/base/browser/dom.ts @@ -1638,11 +1638,6 @@ export function getCookieValue(name: string): string | undefined { return match ? match.pop() : undefined; } -export function addMatchMediaChangeListener(query: string, callback: () => void): void { - const mediaQueryList = window.matchMedia(query); - mediaQueryList.addEventListener('change', callback); -} - export const enum ZIndex { SASH = 35, SuggestWidget = 40, diff --git a/src/vs/code/browser/workbench/workbench.ts b/src/vs/code/browser/workbench/workbench.ts index b8a960ec17b89..6821fcada34bc 100644 --- a/src/vs/code/browser/workbench/workbench.ts +++ b/src/vs/code/browser/workbench/workbench.ts @@ -375,7 +375,7 @@ class WorkspaceProvider implements IWorkspaceProvider { return true; } else { let result; - if (isStandalone) { + if (isStandalone()) { result = window.open(targetHref, '_blank', 'toolbar=no'); // ensures to open another 'standalone' window! } else { result = window.open(targetHref); diff --git a/src/vs/editor/contrib/gotoSymbol/browser/goToCommands.ts b/src/vs/editor/contrib/gotoSymbol/browser/goToCommands.ts index 1e63a6a1f97e0..75af03dba4c8f 100644 --- a/src/vs/editor/contrib/gotoSymbol/browser/goToCommands.ts +++ b/src/vs/editor/contrib/gotoSymbol/browser/goToCommands.ts @@ -257,7 +257,7 @@ export class DefinitionAction extends SymbolNavigationAction { } } -const goToDefinitionKb = isWeb && !isStandalone +const goToDefinitionKb = isWeb && !isStandalone() ? KeyMod.CtrlCmd | KeyCode.F12 : KeyCode.F12; diff --git a/src/vs/editor/standalone/browser/standaloneThemeService.ts b/src/vs/editor/standalone/browser/standaloneThemeService.ts index 025cc66a24c4a..55d516917ad0e 100644 --- a/src/vs/editor/standalone/browser/standaloneThemeService.ts +++ b/src/vs/editor/standalone/browser/standaloneThemeService.ts @@ -4,6 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as dom from 'vs/base/browser/dom'; +import { addMatchMediaChangeListener } from 'vs/base/browser/browser'; import { Color } from 'vs/base/common/color'; import { Emitter } from 'vs/base/common/event'; import { FontStyle, TokenizationRegistry, TokenMetadata } from 'vs/editor/common/languages'; @@ -252,7 +253,7 @@ export class StandaloneThemeService extends Disposable implements IStandaloneThe this._updateCSS(); }); - dom.addMatchMediaChangeListener('(forced-colors: active)', () => { + addMatchMediaChangeListener('(forced-colors: active)', () => { this._updateActualTheme(); }); } diff --git a/src/vs/workbench/browser/style.ts b/src/vs/workbench/browser/style.ts index d7472ac31b2cb..395842cd56f0f 100644 --- a/src/vs/workbench/browser/style.ts +++ b/src/vs/workbench/browser/style.ts @@ -144,7 +144,7 @@ registerThemingParticipant((theme, collector) => { } // Update body background color to ensure the home indicator area looks similar to the workbench - if (isIOS && isStandalone) { + if (isIOS && isStandalone()) { collector.addRule(`body { background-color: ${workbenchBackground}; }`); } diff --git a/src/vs/workbench/browser/workbench.contribution.ts b/src/vs/workbench/browser/workbench.contribution.ts index 2bf1387aa0bd8..35774b9605f07 100644 --- a/src/vs/workbench/browser/workbench.contribution.ts +++ b/src/vs/workbench/browser/workbench.contribution.ts @@ -509,7 +509,7 @@ const registry = Registry.as(ConfigurationExtensions.Con localize('window.confirmBeforeClose.keyboardOnly', "Only ask for confirmation if a keybinding was detected. Note that detection may not be possible in some cases."), localize('window.confirmBeforeClose.never', "Never explicitly ask for confirmation unless data loss is imminent.") ], - 'default': isWeb && !isStandalone ? 'keyboardOnly' : 'never', // on by default in web, unless PWA + 'default': isWeb && !isStandalone() ? 'keyboardOnly' : 'never', // on by default in web, unless PWA 'description': localize('confirmBeforeCloseWeb', "Controls whether to show a confirmation dialog before closing the browser tab or window. Note that even if enabled, browsers may still decide to close a tab or window without confirmation and that this setting is only a hint that may not work in all cases."), 'scope': ConfigurationScope.APPLICATION, 'included': isWeb diff --git a/src/vs/workbench/services/themes/browser/browserHostColorSchemeService.ts b/src/vs/workbench/services/themes/browser/browserHostColorSchemeService.ts index c49a77efd5431..469ada1f878d4 100644 --- a/src/vs/workbench/services/themes/browser/browserHostColorSchemeService.ts +++ b/src/vs/workbench/services/themes/browser/browserHostColorSchemeService.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { Emitter, Event } from 'vs/base/common/event'; -import * as dom from 'vs/base/browser/dom'; +import { addMatchMediaChangeListener } from 'vs/base/browser/browser'; import { registerSingleton } from 'vs/platform/instantiation/common/extensions'; import { Disposable } from 'vs/base/common/lifecycle'; import { IHostColorSchemeService } from 'vs/workbench/services/themes/common/hostColorSchemeService'; @@ -24,10 +24,10 @@ export class BrowserHostColorSchemeService extends Disposable implements IHostCo private registerListeners(): void { - dom.addMatchMediaChangeListener('(prefers-color-scheme: dark)', () => { + addMatchMediaChangeListener('(prefers-color-scheme: dark)', () => { this._onDidSchemeChangeEvent.fire(); }); - dom.addMatchMediaChangeListener('(forced-colors: active)', () => { + addMatchMediaChangeListener('(forced-colors: active)', () => { this._onDidSchemeChangeEvent.fire(); }); }