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 <anthonystewart@google.com>

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;
+}

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

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,

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

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;
 

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

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

src/vs/workbench/browser/workbench.contribution.ts

@@ -509,7 +509,7 @@ const registry = Registry.as<IConfigurationRegistry>(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

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