/*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ import * as browser from 'vs/base/browser/browser'; import { domEvent } from 'vs/base/browser/event'; import { IKeyboardEvent, StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { IMouseEvent, StandardMouseEvent } from 'vs/base/browser/mouseEvent'; import { TimeoutTimer } from 'vs/base/common/async'; import { onUnexpectedError } from 'vs/base/common/errors'; import { Emitter, Event } from 'vs/base/common/event'; import { Disposable, DisposableStore, IDisposable, toDisposable } from 'vs/base/common/lifecycle'; import * as platform from 'vs/base/common/platform'; import { URI } from 'vs/base/common/uri'; import { FileAccess, RemoteAuthorities } from 'vs/base/common/network'; import { BrowserFeatures } from 'vs/base/browser/canIUse'; import { insane, InsaneOptions } from 'vs/base/common/insane/insane'; import { KeyCode } from 'vs/base/common/keyCodes'; export function clearNode(node: HTMLElement): void { while (node.firstChild) { node.firstChild.remove(); } } /** * @deprecated Use node.isConnected directly */ export function isInDOM(node: Node | null): boolean { return node?.isConnected ?? false; } class DomListener implements IDisposable { private _handler: (e: any) => void; private _node: EventTarget; private readonly _type: string; private readonly _options: boolean | AddEventListenerOptions; constructor(node: EventTarget, type: string, handler: (e: any) => void, options?: boolean | AddEventListenerOptions) { this._node = node; this._type = type; this._handler = handler; this._options = (options || false); this._node.addEventListener(this._type, this._handler, this._options); } public dispose(): void { if (!this._handler) { // Already disposed return; } this._node.removeEventListener(this._type, this._handler, this._options); // Prevent leakers from holding on to the dom or handler func this._node = null!; this._handler = null!; } } export function addDisposableListener(node: EventTarget, type: K, handler: (event: GlobalEventHandlersEventMap[K]) => void, useCapture?: boolean): IDisposable; export function addDisposableListener(node: EventTarget, type: string, handler: (event: any) => void, useCapture?: boolean): IDisposable; export function addDisposableListener(node: EventTarget, type: string, handler: (event: any) => void, options: AddEventListenerOptions): IDisposable; export function addDisposableListener(node: EventTarget, type: string, handler: (event: any) => void, useCaptureOrOptions?: boolean | AddEventListenerOptions): IDisposable { return new DomListener(node, type, handler, useCaptureOrOptions); } export interface IAddStandardDisposableListenerSignature { (node: HTMLElement, type: 'click', handler: (event: IMouseEvent) => void, useCapture?: boolean): IDisposable; (node: HTMLElement, type: 'mousedown', handler: (event: IMouseEvent) => void, useCapture?: boolean): IDisposable; (node: HTMLElement, type: 'keydown', handler: (event: IKeyboardEvent) => void, useCapture?: boolean): IDisposable; (node: HTMLElement, type: 'keypress', handler: (event: IKeyboardEvent) => void, useCapture?: boolean): IDisposable; (node: HTMLElement, type: 'keyup', handler: (event: IKeyboardEvent) => void, useCapture?: boolean): IDisposable; (node: HTMLElement, type: string, handler: (event: any) => void, useCapture?: boolean): IDisposable; } function _wrapAsStandardMouseEvent(handler: (e: IMouseEvent) => void): (e: MouseEvent) => void { return function (e: MouseEvent) { return handler(new StandardMouseEvent(e)); }; } function _wrapAsStandardKeyboardEvent(handler: (e: IKeyboardEvent) => void): (e: KeyboardEvent) => void { return function (e: KeyboardEvent) { return handler(new StandardKeyboardEvent(e)); }; } export let addStandardDisposableListener: IAddStandardDisposableListenerSignature = function addStandardDisposableListener(node: HTMLElement, type: string, handler: (event: any) => void, useCapture?: boolean): IDisposable { let wrapHandler = handler; if (type === 'click' || type === 'mousedown') { wrapHandler = _wrapAsStandardMouseEvent(handler); } else if (type === 'keydown' || type === 'keypress' || type === 'keyup') { wrapHandler = _wrapAsStandardKeyboardEvent(handler); } return addDisposableListener(node, type, wrapHandler, useCapture); }; export let addStandardDisposableGenericMouseDownListner = function addStandardDisposableListener(node: HTMLElement, handler: (event: any) => void, useCapture?: boolean): IDisposable { let wrapHandler = _wrapAsStandardMouseEvent(handler); return addDisposableGenericMouseDownListner(node, wrapHandler, useCapture); }; export let addStandardDisposableGenericMouseUpListner = function addStandardDisposableListener(node: HTMLElement, handler: (event: any) => void, useCapture?: boolean): IDisposable { let wrapHandler = _wrapAsStandardMouseEvent(handler); return addDisposableGenericMouseUpListner(node, wrapHandler, useCapture); }; export function addDisposableGenericMouseDownListner(node: EventTarget, handler: (event: any) => void, useCapture?: boolean): IDisposable { return addDisposableListener(node, platform.isIOS && BrowserFeatures.pointerEvents ? EventType.POINTER_DOWN : EventType.MOUSE_DOWN, handler, useCapture); } export function addDisposableGenericMouseMoveListner(node: EventTarget, handler: (event: any) => void, useCapture?: boolean): IDisposable { return addDisposableListener(node, platform.isIOS && BrowserFeatures.pointerEvents ? EventType.POINTER_MOVE : EventType.MOUSE_MOVE, handler, useCapture); } export function addDisposableGenericMouseUpListner(node: EventTarget, handler: (event: any) => void, useCapture?: boolean): IDisposable { return addDisposableListener(node, platform.isIOS && BrowserFeatures.pointerEvents ? EventType.POINTER_UP : EventType.MOUSE_UP, handler, useCapture); } export function addDisposableNonBubblingMouseOutListener(node: Element, handler: (event: MouseEvent) => void): IDisposable { return addDisposableListener(node, 'mouseout', (e: MouseEvent) => { // Mouse out bubbles, so this is an attempt to ignore faux mouse outs coming from children elements let toElement: Node | null = (e.relatedTarget); while (toElement && toElement !== node) { toElement = toElement.parentNode; } if (toElement === node) { return; } handler(e); }); } export function addDisposableNonBubblingPointerOutListener(node: Element, handler: (event: MouseEvent) => void): IDisposable { return addDisposableListener(node, 'pointerout', (e: MouseEvent) => { // Mouse out bubbles, so this is an attempt to ignore faux mouse outs coming from children elements let toElement: Node | null = (e.relatedTarget); while (toElement && toElement !== node) { toElement = toElement.parentNode; } if (toElement === node) { return; } handler(e); }); } interface IRequestAnimationFrame { (callback: (time: number) => void): number; } let _animationFrame: IRequestAnimationFrame | null = null; function doRequestAnimationFrame(callback: (time: number) => void): number { if (!_animationFrame) { const emulatedRequestAnimationFrame = (callback: (time: number) => void): any => { return setTimeout(() => callback(new Date().getTime()), 0); }; _animationFrame = ( self.requestAnimationFrame || (self).msRequestAnimationFrame || (self).webkitRequestAnimationFrame || (self).mozRequestAnimationFrame || (self).oRequestAnimationFrame || emulatedRequestAnimationFrame ); } return _animationFrame.call(self, callback); } /** * Schedule a callback to be run at the next animation frame. * This allows multiple parties to register callbacks that should run at the next animation frame. * If currently in an animation frame, `runner` will be executed immediately. * @return token that can be used to cancel the scheduled runner (only if `runner` was not executed immediately). */ export let runAtThisOrScheduleAtNextAnimationFrame: (runner: () => void, priority?: number) => IDisposable; /** * Schedule a callback to be run at the next animation frame. * This allows multiple parties to register callbacks that should run at the next animation frame. * If currently in an animation frame, `runner` will be executed at the next animation frame. * @return token that can be used to cancel the scheduled runner. */ export let scheduleAtNextAnimationFrame: (runner: () => void, priority?: number) => IDisposable; class AnimationFrameQueueItem implements IDisposable { private _runner: () => void; public priority: number; private _canceled: boolean; constructor(runner: () => void, priority: number = 0) { this._runner = runner; this.priority = priority; this._canceled = false; } public dispose(): void { this._canceled = true; } public execute(): void { if (this._canceled) { return; } try { this._runner(); } catch (e) { onUnexpectedError(e); } } // Sort by priority (largest to lowest) public static sort(a: AnimationFrameQueueItem, b: AnimationFrameQueueItem): number { return b.priority - a.priority; } } (function () { /** * The runners scheduled at the next animation frame */ let NEXT_QUEUE: AnimationFrameQueueItem[] = []; /** * The runners scheduled at the current animation frame */ let CURRENT_QUEUE: AnimationFrameQueueItem[] | null = null; /** * A flag to keep track if the native requestAnimationFrame was already called */ let animFrameRequested = false; /** * A flag to indicate if currently handling a native requestAnimationFrame callback */ let inAnimationFrameRunner = false; let animationFrameRunner = () => { animFrameRequested = false; CURRENT_QUEUE = NEXT_QUEUE; NEXT_QUEUE = []; inAnimationFrameRunner = true; while (CURRENT_QUEUE.length > 0) { CURRENT_QUEUE.sort(AnimationFrameQueueItem.sort); let top = CURRENT_QUEUE.shift()!; top.execute(); } inAnimationFrameRunner = false; }; scheduleAtNextAnimationFrame = (runner: () => void, priority: number = 0) => { let item = new AnimationFrameQueueItem(runner, priority); NEXT_QUEUE.push(item); if (!animFrameRequested) { animFrameRequested = true; doRequestAnimationFrame(animationFrameRunner); } return item; }; runAtThisOrScheduleAtNextAnimationFrame = (runner: () => void, priority?: number) => { if (inAnimationFrameRunner) { let item = new AnimationFrameQueueItem(runner, priority); CURRENT_QUEUE!.push(item); return item; } else { return scheduleAtNextAnimationFrame(runner, priority); } }; })(); export function measure(callback: () => void): IDisposable { return scheduleAtNextAnimationFrame(callback, 10000 /* must be early */); } export function modify(callback: () => void): IDisposable { return scheduleAtNextAnimationFrame(callback, -10000 /* must be late */); } /** * Add a throttled listener. `handler` is fired at most every 16ms or with the next animation frame (if browser supports it). */ export interface IEventMerger { (lastEvent: R | null, currentEvent: E): R; } export interface DOMEvent { preventDefault(): void; stopPropagation(): void; } const MINIMUM_TIME_MS = 16; const DEFAULT_EVENT_MERGER: IEventMerger = function (lastEvent: DOMEvent | null, currentEvent: DOMEvent) { return currentEvent; }; class TimeoutThrottledDomListener extends Disposable { constructor(node: any, type: string, handler: (event: R) => void, eventMerger: IEventMerger = DEFAULT_EVENT_MERGER, minimumTimeMs: number = MINIMUM_TIME_MS) { super(); let lastEvent: R | null = null; let lastHandlerTime = 0; let timeout = this._register(new TimeoutTimer()); let invokeHandler = () => { lastHandlerTime = (new Date()).getTime(); handler(lastEvent); lastEvent = null; }; this._register(addDisposableListener(node, type, (e) => { lastEvent = eventMerger(lastEvent, e); let elapsedTime = (new Date()).getTime() - lastHandlerTime; if (elapsedTime >= minimumTimeMs) { timeout.cancel(); invokeHandler(); } else { timeout.setIfNotSet(invokeHandler, minimumTimeMs - elapsedTime); } })); } } export function addDisposableThrottledListener(node: any, type: string, handler: (event: R) => void, eventMerger?: IEventMerger, minimumTimeMs?: number): IDisposable { return new TimeoutThrottledDomListener(node, type, handler, eventMerger, minimumTimeMs); } export function getComputedStyle(el: HTMLElement): CSSStyleDeclaration { return document.defaultView!.getComputedStyle(el, null); } export function getClientArea(element: HTMLElement): Dimension { // Try with DOM clientWidth / clientHeight if (element !== document.body) { return new Dimension(element.clientWidth, element.clientHeight); } // If visual view port exits and it's on mobile, it should be used instead of window innerWidth / innerHeight, or document.body.clientWidth / document.body.clientHeight if (platform.isIOS && window.visualViewport) { const width = window.visualViewport.width; const height = window.visualViewport.height - ( browser.isStandalone // in PWA mode, the visual viewport always includes the safe-area-inset-bottom (which is for the home indicator) // even when you are using the onscreen monitor, the visual viewport will include the area between system statusbar and the onscreen keyboard // plus the area between onscreen keyboard and the bottom bezel, which is 20px on iOS. ? (20 + 4) // + 4px for body margin : 0 ); return new Dimension(width, height); } // Try innerWidth / innerHeight if (window.innerWidth && window.innerHeight) { return new Dimension(window.innerWidth, window.innerHeight); } // Try with document.body.clientWidth / document.body.clientHeight if (document.body && document.body.clientWidth && document.body.clientHeight) { return new Dimension(document.body.clientWidth, document.body.clientHeight); } // Try with document.documentElement.clientWidth / document.documentElement.clientHeight if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight) { return new Dimension(document.documentElement.clientWidth, document.documentElement.clientHeight); } throw new Error('Unable to figure out browser width and height'); } class SizeUtils { // Adapted from WinJS // Converts a CSS positioning string for the specified element to pixels. private static convertToPixels(element: HTMLElement, value: string): number { return parseFloat(value) || 0; } private static getDimension(element: HTMLElement, cssPropertyName: string, jsPropertyName: string): number { let computedStyle: CSSStyleDeclaration = getComputedStyle(element); let value = '0'; if (computedStyle) { if (computedStyle.getPropertyValue) { value = computedStyle.getPropertyValue(cssPropertyName); } else { // IE8 value = (computedStyle).getAttribute(jsPropertyName); } } return SizeUtils.convertToPixels(element, value); } static getBorderLeftWidth(element: HTMLElement): number { return SizeUtils.getDimension(element, 'border-left-width', 'borderLeftWidth'); } static getBorderRightWidth(element: HTMLElement): number { return SizeUtils.getDimension(element, 'border-right-width', 'borderRightWidth'); } static getBorderTopWidth(element: HTMLElement): number { return SizeUtils.getDimension(element, 'border-top-width', 'borderTopWidth'); } static getBorderBottomWidth(element: HTMLElement): number { return SizeUtils.getDimension(element, 'border-bottom-width', 'borderBottomWidth'); } static getPaddingLeft(element: HTMLElement): number { return SizeUtils.getDimension(element, 'padding-left', 'paddingLeft'); } static getPaddingRight(element: HTMLElement): number { return SizeUtils.getDimension(element, 'padding-right', 'paddingRight'); } static getPaddingTop(element: HTMLElement): number { return SizeUtils.getDimension(element, 'padding-top', 'paddingTop'); } static getPaddingBottom(element: HTMLElement): number { return SizeUtils.getDimension(element, 'padding-bottom', 'paddingBottom'); } static getMarginLeft(element: HTMLElement): number { return SizeUtils.getDimension(element, 'margin-left', 'marginLeft'); } static getMarginTop(element: HTMLElement): number { return SizeUtils.getDimension(element, 'margin-top', 'marginTop'); } static getMarginRight(element: HTMLElement): number { return SizeUtils.getDimension(element, 'margin-right', 'marginRight'); } static getMarginBottom(element: HTMLElement): number { return SizeUtils.getDimension(element, 'margin-bottom', 'marginBottom'); } } // ---------------------------------------------------------------------------------------- // Position & Dimension export interface IDimension { readonly width: number; readonly height: number; } export class Dimension implements IDimension { static readonly None = new Dimension(0, 0); constructor( public readonly width: number, public readonly height: number, ) { } with(width: number = this.width, height: number = this.height): Dimension { if (width !== this.width || height !== this.height) { return new Dimension(width, height); } else { return this; } } static is(obj: unknown): obj is IDimension { return typeof obj === 'object' && typeof (obj).height === 'number' && typeof (obj).width === 'number'; } static lift(obj: IDimension): Dimension { if (obj instanceof Dimension) { return obj; } else { return new Dimension(obj.width, obj.height); } } static equals(a: Dimension | undefined, b: Dimension | undefined): boolean { if (a === b) { return true; } if (!a || !b) { return false; } return a.width === b.width && a.height === b.height; } } export function getTopLeftOffset(element: HTMLElement): { left: number; top: number; } { // Adapted from WinJS.Utilities.getPosition // and added borders to the mix let offsetParent = element.offsetParent; let top = element.offsetTop; let left = element.offsetLeft; while ( (element = element.parentNode) !== null && element !== document.body && element !== document.documentElement ) { top -= element.scrollTop; const c = isShadowRoot(element) ? null : getComputedStyle(element); if (c) { left -= c.direction !== 'rtl' ? element.scrollLeft : -element.scrollLeft; } if (element === offsetParent) { left += SizeUtils.getBorderLeftWidth(element); top += SizeUtils.getBorderTopWidth(element); top += element.offsetTop; left += element.offsetLeft; offsetParent = element.offsetParent; } } return { left: left, top: top }; } export interface IDomNodePagePosition { left: number; top: number; width: number; height: number; } export function size(element: HTMLElement, width: number | null, height: number | null): void { if (typeof width === 'number') { element.style.width = `${width}px`; } if (typeof height === 'number') { element.style.height = `${height}px`; } } export function position(element: HTMLElement, top: number, right?: number, bottom?: number, left?: number, position: string = 'absolute'): void { if (typeof top === 'number') { element.style.top = `${top}px`; } if (typeof right === 'number') { element.style.right = `${right}px`; } if (typeof bottom === 'number') { element.style.bottom = `${bottom}px`; } if (typeof left === 'number') { element.style.left = `${left}px`; } element.style.position = position; } /** * Returns the position of a dom node relative to the entire page. */ export function getDomNodePagePosition(domNode: HTMLElement): IDomNodePagePosition { let bb = domNode.getBoundingClientRect(); return { left: bb.left + StandardWindow.scrollX, top: bb.top + StandardWindow.scrollY, width: bb.width, height: bb.height }; } export interface IStandardWindow { readonly scrollX: number; readonly scrollY: number; } export const StandardWindow: IStandardWindow = new class implements IStandardWindow { get scrollX(): number { if (typeof window.scrollX === 'number') { // modern browsers return window.scrollX; } else { return document.body.scrollLeft + document.documentElement!.scrollLeft; } } get scrollY(): number { if (typeof window.scrollY === 'number') { // modern browsers return window.scrollY; } else { return document.body.scrollTop + document.documentElement!.scrollTop; } } }; // Adapted from WinJS // Gets the width of the element, including margins. export function getTotalWidth(element: HTMLElement): number { let margin = SizeUtils.getMarginLeft(element) + SizeUtils.getMarginRight(element); return element.offsetWidth + margin; } export function getContentWidth(element: HTMLElement): number { let border = SizeUtils.getBorderLeftWidth(element) + SizeUtils.getBorderRightWidth(element); let padding = SizeUtils.getPaddingLeft(element) + SizeUtils.getPaddingRight(element); return element.offsetWidth - border - padding; } export function getTotalScrollWidth(element: HTMLElement): number { let margin = SizeUtils.getMarginLeft(element) + SizeUtils.getMarginRight(element); return element.scrollWidth + margin; } // Adapted from WinJS // Gets the height of the content of the specified element. The content height does not include borders or padding. export function getContentHeight(element: HTMLElement): number { let border = SizeUtils.getBorderTopWidth(element) + SizeUtils.getBorderBottomWidth(element); let padding = SizeUtils.getPaddingTop(element) + SizeUtils.getPaddingBottom(element); return element.offsetHeight - border - padding; } // Adapted from WinJS // Gets the height of the element, including its margins. export function getTotalHeight(element: HTMLElement): number { let margin = SizeUtils.getMarginTop(element) + SizeUtils.getMarginBottom(element); return element.offsetHeight + margin; } // Gets the left coordinate of the specified element relative to the specified parent. function getRelativeLeft(element: HTMLElement, parent: HTMLElement): number { if (element === null) { return 0; } let elementPosition = getTopLeftOffset(element); let parentPosition = getTopLeftOffset(parent); return elementPosition.left - parentPosition.left; } export function getLargestChildWidth(parent: HTMLElement, children: HTMLElement[]): number { let childWidths = children.map((child) => { return Math.max(getTotalScrollWidth(child), getTotalWidth(child)) + getRelativeLeft(child, parent) || 0; }); let maxWidth = Math.max(...childWidths); return maxWidth; } // ---------------------------------------------------------------------------------------- export function isAncestor(testChild: Node | null, testAncestor: Node | null): boolean { while (testChild) { if (testChild === testAncestor) { return true; } testChild = testChild.parentNode; } return false; } const parentFlowToDataKey = 'parentFlowToElementId'; /** * Set an explicit parent to use for nodes that are not part of the * regular dom structure. */ export function setParentFlowTo(fromChildElement: HTMLElement, toParentElement: Element): void { fromChildElement.dataset[parentFlowToDataKey] = toParentElement.id; } function getParentFlowToElement(node: HTMLElement): HTMLElement | null { const flowToParentId = node.dataset[parentFlowToDataKey]; if (typeof flowToParentId === 'string') { return document.getElementById(flowToParentId); } return null; } /** * Check if `testAncestor` is an ancessor of `testChild`, observing the explicit * parents set by `setParentFlowTo`. */ export function isAncestorUsingFlowTo(testChild: Node, testAncestor: Node): boolean { let node: Node | null = testChild; while (node) { if (node === testAncestor) { return true; } if (node instanceof HTMLElement) { const flowToParentElement = getParentFlowToElement(node); if (flowToParentElement) { node = flowToParentElement; continue; } } node = node.parentNode; } return false; } export function findParentWithClass(node: HTMLElement, clazz: string, stopAtClazzOrNode?: string | HTMLElement): HTMLElement | null { while (node && node.nodeType === node.ELEMENT_NODE) { if (node.classList.contains(clazz)) { return node; } if (stopAtClazzOrNode) { if (typeof stopAtClazzOrNode === 'string') { if (node.classList.contains(stopAtClazzOrNode)) { return null; } } else { if (node === stopAtClazzOrNode) { return null; } } } node = node.parentNode; } return null; } export function hasParentWithClass(node: HTMLElement, clazz: string, stopAtClazzOrNode?: string | HTMLElement): boolean { return !!findParentWithClass(node, clazz, stopAtClazzOrNode); } export function isShadowRoot(node: Node): node is ShadowRoot { return ( node && !!(node).host && !!(node).mode ); } export function isInShadowDOM(domNode: Node): boolean { return !!getShadowRoot(domNode); } export function getShadowRoot(domNode: Node): ShadowRoot | null { while (domNode.parentNode) { if (domNode === document.body) { // reached the body return null; } domNode = domNode.parentNode; } return isShadowRoot(domNode) ? domNode : null; } export function getActiveElement(): Element | null { let result = document.activeElement; while (result?.shadowRoot) { result = result.shadowRoot.activeElement; } return result; } export function createStyleSheet(container: HTMLElement = document.getElementsByTagName('head')[0]): HTMLStyleElement { let style = document.createElement('style'); style.type = 'text/css'; style.media = 'screen'; container.appendChild(style); return style; } export function createMetaElement(container: HTMLElement = document.getElementsByTagName('head')[0]): HTMLMetaElement { let meta = document.createElement('meta'); container.appendChild(meta); return meta; } let _sharedStyleSheet: HTMLStyleElement | null = null; function getSharedStyleSheet(): HTMLStyleElement { if (!_sharedStyleSheet) { _sharedStyleSheet = createStyleSheet(); } return _sharedStyleSheet; } function getDynamicStyleSheetRules(style: any) { if (style?.sheet?.rules) { // Chrome, IE return style.sheet.rules; } if (style?.sheet?.cssRules) { // FF return style.sheet.cssRules; } return []; } export function createCSSRule(selector: string, cssText: string, style: HTMLStyleElement = getSharedStyleSheet()): void { if (!style || !cssText) { return; } (style.sheet).insertRule(selector + '{' + cssText + '}', 0); } export function removeCSSRulesContainingSelector(ruleName: string, style: HTMLStyleElement = getSharedStyleSheet()): void { if (!style) { return; } let rules = getDynamicStyleSheetRules(style); let toDelete: number[] = []; for (let i = 0; i < rules.length; i++) { let rule = rules[i]; if (rule.selectorText.indexOf(ruleName) !== -1) { toDelete.push(i); } } for (let i = toDelete.length - 1; i >= 0; i--) { (style.sheet).deleteRule(toDelete[i]); } } export function isHTMLElement(o: any): o is HTMLElement { if (typeof HTMLElement === 'object') { return o instanceof HTMLElement; } return o && typeof o === 'object' && o.nodeType === 1 && typeof o.nodeName === 'string'; } export const EventType = { // Mouse CLICK: 'click', AUXCLICK: 'auxclick', DBLCLICK: 'dblclick', MOUSE_UP: 'mouseup', MOUSE_DOWN: 'mousedown', MOUSE_OVER: 'mouseover', MOUSE_MOVE: 'mousemove', MOUSE_OUT: 'mouseout', MOUSE_ENTER: 'mouseenter', MOUSE_LEAVE: 'mouseleave', MOUSE_WHEEL: browser.isEdgeLegacy ? 'mousewheel' : 'wheel', POINTER_UP: 'pointerup', POINTER_DOWN: 'pointerdown', POINTER_MOVE: 'pointermove', CONTEXT_MENU: 'contextmenu', WHEEL: 'wheel', // Keyboard KEY_DOWN: 'keydown', KEY_PRESS: 'keypress', KEY_UP: 'keyup', // HTML Document LOAD: 'load', BEFORE_UNLOAD: 'beforeunload', UNLOAD: 'unload', ABORT: 'abort', ERROR: 'error', RESIZE: 'resize', SCROLL: 'scroll', FULLSCREEN_CHANGE: 'fullscreenchange', WK_FULLSCREEN_CHANGE: 'webkitfullscreenchange', // Form SELECT: 'select', CHANGE: 'change', SUBMIT: 'submit', RESET: 'reset', FOCUS: 'focus', FOCUS_IN: 'focusin', FOCUS_OUT: 'focusout', BLUR: 'blur', INPUT: 'input', // Local Storage STORAGE: 'storage', // Drag DRAG_START: 'dragstart', DRAG: 'drag', DRAG_ENTER: 'dragenter', DRAG_LEAVE: 'dragleave', DRAG_OVER: 'dragover', DROP: 'drop', DRAG_END: 'dragend', // Animation ANIMATION_START: browser.isWebKit ? 'webkitAnimationStart' : 'animationstart', ANIMATION_END: browser.isWebKit ? 'webkitAnimationEnd' : 'animationend', ANIMATION_ITERATION: browser.isWebKit ? 'webkitAnimationIteration' : 'animationiteration' } as const; export interface EventLike { preventDefault(): void; stopPropagation(): void; } export const EventHelper = { stop: function (e: EventLike, cancelBubble?: boolean) { if (e.preventDefault) { e.preventDefault(); } else { // IE8 (e).returnValue = false; } if (cancelBubble) { if (e.stopPropagation) { e.stopPropagation(); } else { // IE8 (e).cancelBubble = true; } } } }; export interface IFocusTracker extends Disposable { onDidFocus: Event; onDidBlur: Event; refreshState?(): void; } export function saveParentsScrollTop(node: Element): number[] { let r: number[] = []; for (let i = 0; node && node.nodeType === node.ELEMENT_NODE; i++) { r[i] = node.scrollTop; node = node.parentNode; } return r; } export function restoreParentsScrollTop(node: Element, state: number[]): void { for (let i = 0; node && node.nodeType === node.ELEMENT_NODE; i++) { if (node.scrollTop !== state[i]) { node.scrollTop = state[i]; } node = node.parentNode; } } class FocusTracker extends Disposable implements IFocusTracker { private readonly _onDidFocus = this._register(new Emitter()); public readonly onDidFocus: Event = this._onDidFocus.event; private readonly _onDidBlur = this._register(new Emitter()); public readonly onDidBlur: Event = this._onDidBlur.event; private _refreshStateHandler: () => void; constructor(element: HTMLElement | Window) { super(); let hasFocus = isAncestor(document.activeElement, element); let loosingFocus = false; const onFocus = () => { loosingFocus = false; if (!hasFocus) { hasFocus = true; this._onDidFocus.fire(); } }; const onBlur = () => { if (hasFocus) { loosingFocus = true; window.setTimeout(() => { if (loosingFocus) { loosingFocus = false; hasFocus = false; this._onDidBlur.fire(); } }, 0); } }; this._refreshStateHandler = () => { let currentNodeHasFocus = isAncestor(document.activeElement, element); if (currentNodeHasFocus !== hasFocus) { if (hasFocus) { onBlur(); } else { onFocus(); } } }; this._register(domEvent(element, EventType.FOCUS, true)(onFocus)); this._register(domEvent(element, EventType.BLUR, true)(onBlur)); } refreshState() { this._refreshStateHandler(); } } export function trackFocus(element: HTMLElement | Window): IFocusTracker { return new FocusTracker(element); } export function after(sibling: HTMLElement, child: T): T { sibling.after(child); return child; } export function append(parent: HTMLElement, child: T): T; export function append(parent: HTMLElement, ...children: (T | string)[]): void; export function append(parent: HTMLElement, ...children: (T | string)[]): T | void { parent.append(...children); if (children.length === 1 && typeof children[0] !== 'string') { return children[0]; } } export function prepend(parent: HTMLElement, child: T): T { parent.insertBefore(child, parent.firstChild); return child; } /** * Removes all children from `parent` and appends `children` */ export function reset(parent: HTMLElement, ...children: Array): void { parent.innerText = ''; append(parent, ...children); } const SELECTOR_REGEX = /([\w\-]+)?(#([\w\-]+))?((\.([\w\-]+))*)/; export enum Namespace { HTML = 'http://www.w3.org/1999/xhtml', SVG = 'http://www.w3.org/2000/svg' } function _$(namespace: Namespace, description: string, attrs?: { [key: string]: any; }, ...children: Array): T { let match = SELECTOR_REGEX.exec(description); if (!match) { throw new Error('Bad use of emmet'); } attrs = { ...(attrs || {}) }; let tagName = match[1] || 'div'; let result: T; if (namespace !== Namespace.HTML) { result = document.createElementNS(namespace as string, tagName) as T; } else { result = document.createElement(tagName) as unknown as T; } if (match[3]) { result.id = match[3]; } if (match[4]) { result.className = match[4].replace(/\./g, ' ').trim(); } Object.keys(attrs).forEach(name => { const value = attrs![name]; if (typeof value === 'undefined') { return; } if (/^on\w+$/.test(name)) { (result)[name] = value; } else if (name === 'selected') { if (value) { result.setAttribute(name, 'true'); } } else { result.setAttribute(name, value); } }); result.append(...children); return result as T; } export function $(description: string, attrs?: { [key: string]: any; }, ...children: Array): T { return _$(Namespace.HTML, description, attrs, ...children); } $.SVG = function (description: string, attrs?: { [key: string]: any; }, ...children: Array): T { return _$(Namespace.SVG, description, attrs, ...children); }; export function join(nodes: Node[], separator: Node | string): Node[] { const result: Node[] = []; nodes.forEach((node, index) => { if (index > 0) { if (separator instanceof Node) { result.push(separator.cloneNode()); } else { result.push(document.createTextNode(separator)); } } result.push(node); }); return result; } export function show(...elements: HTMLElement[]): void { for (let element of elements) { element.style.display = ''; element.removeAttribute('aria-hidden'); } } export function hide(...elements: HTMLElement[]): void { for (let element of elements) { element.style.display = 'none'; element.setAttribute('aria-hidden', 'true'); } } function findParentWithAttribute(node: Node | null, attribute: string): HTMLElement | null { while (node && node.nodeType === node.ELEMENT_NODE) { if (node instanceof HTMLElement && node.hasAttribute(attribute)) { return node; } node = node.parentNode; } return null; } export function removeTabIndexAndUpdateFocus(node: HTMLElement): void { if (!node || !node.hasAttribute('tabIndex')) { return; } // If we are the currently focused element and tabIndex is removed, // standard DOM behavior is to move focus to the element. We // typically never want that, rather put focus to the closest element // in the hierarchy of the parent DOM nodes. if (document.activeElement === node) { let parentFocusable = findParentWithAttribute(node.parentElement, 'tabIndex'); if (parentFocusable) { parentFocusable.focus(); } } node.removeAttribute('tabindex'); } export function getElementsByTagName(tag: string): HTMLElement[] { return Array.prototype.slice.call(document.getElementsByTagName(tag), 0); } export function finalHandler(fn: (event: T) => any): (event: T) => any { return e => { e.preventDefault(); e.stopPropagation(); fn(e); }; } export function domContentLoaded(): Promise { return new Promise(resolve => { const readyState = document.readyState; if (readyState === 'complete' || (document && document.body !== null)) { platform.setImmediate(resolve); } else { window.addEventListener('DOMContentLoaded', resolve, false); } }); } /** * Find a value usable for a dom node size such that the likelihood that it would be * displayed with constant screen pixels size is as high as possible. * * e.g. We would desire for the cursors to be 2px (CSS px) wide. Under a devicePixelRatio * of 1.25, the cursor will be 2.5 screen pixels wide. Depending on how the dom node aligns/"snaps" * with the screen pixels, it will sometimes be rendered with 2 screen pixels, and sometimes with 3 screen pixels. */ export function computeScreenAwareSize(cssPx: number): number { const screenPx = window.devicePixelRatio * cssPx; return Math.max(1, Math.floor(screenPx)) / window.devicePixelRatio; } /** * See https://github.com/microsoft/monaco-editor/issues/601 * To protect against malicious code in the linked site, particularly phishing attempts, * the window.opener should be set to null to prevent the linked site from having access * to change the location of the current page. * See https://mathiasbynens.github.io/rel-noopener/ */ export function windowOpenNoOpener(url: string): void { if (browser.isElectron || browser.isEdgeLegacyWebView) { // In VSCode, window.open() always returns null... // The same is true for a WebView (see https://github.com/microsoft/monaco-editor/issues/628) // Also call directly window.open in sandboxed Electron (see https://github.com/microsoft/monaco-editor/issues/2220) window.open(url); } else { let newTab = window.open(); if (newTab) { (newTab as any).opener = null; newTab.location.href = url; } } } export function animate(fn: () => void): IDisposable { const step = () => { fn(); stepDisposable = scheduleAtNextAnimationFrame(step); }; let stepDisposable = scheduleAtNextAnimationFrame(step); return toDisposable(() => stepDisposable.dispose()); } RemoteAuthorities.setPreferredWebSchema(/^https:/.test(window.location.href) ? 'https' : 'http'); /** * returns url('...') */ export function asCSSUrl(uri: URI): string { if (!uri) { return `url('')`; } return `url('${FileAccess.asBrowserUri(uri).toString(true).replace(/'/g, '%27')}')`; } export function triggerDownload(dataOrUri: Uint8Array | URI, name: string): void { // If the data is provided as Buffer, we create a // blob URL out of it to produce a valid link let url: string; if (URI.isUri(dataOrUri)) { url = dataOrUri.toString(true); } else { const blob = new Blob([dataOrUri]); url = URL.createObjectURL(blob); // Ensure to free the data from DOM eventually setTimeout(() => URL.revokeObjectURL(url)); } // In order to download from the browser, the only way seems // to be creating a element with download attribute that // points to the file to download. // See also https://developers.google.com/web/updates/2011/08/Downloading-resources-in-HTML5-a-download const anchor = document.createElement('a'); document.body.appendChild(anchor); anchor.download = name; anchor.href = url; anchor.click(); // Ensure to remove the element from DOM eventually setTimeout(() => document.body.removeChild(anchor)); } export enum DetectedFullscreenMode { /** * The document is fullscreen, e.g. because an element * in the document requested to be fullscreen. */ DOCUMENT = 1, /** * The browser is fullsreen, e.g. because the user enabled * native window fullscreen for it. */ BROWSER } export interface IDetectedFullscreen { /** * Figure out if the document is fullscreen or the browser. */ mode: DetectedFullscreenMode; /** * Whether we know for sure that we are in fullscreen mode or * it is a guess. */ guess: boolean; } export function detectFullscreen(): IDetectedFullscreen | null { // Browser fullscreen: use DOM APIs to detect if (document.fullscreenElement || (document).webkitFullscreenElement || (document).webkitIsFullScreen) { return { mode: DetectedFullscreenMode.DOCUMENT, guess: false }; } // There is no standard way to figure out if the browser // is using native fullscreen. Via checking on screen // height and comparing that to window height, we can guess // it though. if (window.innerHeight === screen.height) { // if the height of the window matches the screen height, we can // safely assume that the browser is fullscreen because no browser // chrome is taking height away (e.g. like toolbars). return { mode: DetectedFullscreenMode.BROWSER, guess: false }; } if (platform.isMacintosh || platform.isLinux) { // macOS and Linux do not properly report `innerHeight`, only Windows does if (window.outerHeight === screen.height && window.outerWidth === screen.width) { // if the height of the browser matches the screen height, we can // only guess that we are in fullscreen. It is also possible that // the user has turned off taskbars in the OS and the browser is // simply able to span the entire size of the screen. return { mode: DetectedFullscreenMode.BROWSER, guess: true }; } } // Not in fullscreen return null; } // -- sanitize and trusted html function _extInsaneOptions(opts: InsaneOptions, allowedAttributesForAll: string[]): InsaneOptions { let allowedAttributes: Record = opts.allowedAttributes ?? {}; if (opts.allowedTags) { for (let tag of opts.allowedTags) { let array = allowedAttributes[tag]; if (!array) { array = allowedAttributesForAll; } else { array = array.concat(allowedAttributesForAll); } allowedAttributes[tag] = array; } } return { ...opts, allowedAttributes }; } const _ttpSafeInnerHtml = window.trustedTypes?.createPolicy('safeInnerHtml', { createHTML(value, options: InsaneOptions) { return insane(value, options); } }); /** * Sanitizes the given `value` and reset the given `node` with it. */ export function safeInnerHtml(node: HTMLElement, value: string): void { const options = _extInsaneOptions({ allowedTags: ['a', 'button', 'blockquote', 'code', 'div', 'h1', 'h2', 'h3', 'input', 'label', 'li', 'p', 'pre', 'select', 'small', 'span', 'strong', 'textarea', 'ul', 'ol'], allowedAttributes: { 'a': ['href', 'x-dispatch'], 'button': ['data-href', 'x-dispatch'], 'input': ['type', 'placeholder', 'checked', 'required'], 'label': ['for'], 'select': ['required'], 'span': ['data-command', 'role'], 'textarea': ['name', 'placeholder', 'required'], }, allowedSchemes: ['http', 'https', 'command'] }, ['class', 'id', 'role', 'tabindex']); const html = _ttpSafeInnerHtml?.createHTML(value, options) ?? insane(value, options); node.innerHTML = html as string; } /** * Convert a Unicode string to a string in which each 16-bit unit occupies only one byte * * From https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa */ function toBinary(str: string): string { const codeUnits = new Uint16Array(str.length); for (let i = 0; i < codeUnits.length; i++) { codeUnits[i] = str.charCodeAt(i); } let binary = ''; const uint8array = new Uint8Array(codeUnits.buffer); for (let i = 0; i < uint8array.length; i++) { binary += String.fromCharCode(uint8array[i]); } return binary; } /** * Version of the global `btoa` function that handles multi-byte characters instead * of throwing an exception. */ export function multibyteAwareBtoa(str: string): string { return btoa(toBinary(str)); } /** * Typings for the https://wicg.github.io/file-system-access * * Use `supported(window)` to find out if the browser supports this kind of API. */ export namespace WebFileSystemAccess { // https://wicg.github.io/file-system-access/#dom-window-showdirectorypicker export interface FileSystemAccess { showDirectoryPicker: () => Promise; } // https://wicg.github.io/file-system-access/#api-filesystemdirectoryhandle export interface FileSystemDirectoryHandle { readonly kind: 'directory', readonly name: string, getFileHandle: (name: string, options?: { create?: boolean }) => Promise; getDirectoryHandle: (name: string, options?: { create?: boolean }) => Promise; } // https://wicg.github.io/file-system-access/#api-filesystemfilehandle export interface FileSystemFileHandle { readonly kind: 'file', readonly name: string, createWritable: (options?: { keepExistingData?: boolean }) => Promise; } // https://wicg.github.io/file-system-access/#api-filesystemwritablefilestream export interface FileSystemWritableFileStream { write: (buffer: Uint8Array) => Promise; close: () => Promise; } export function supported(obj: any & Window): obj is FileSystemAccess { const candidate = obj as FileSystemAccess | undefined; if (typeof candidate?.showDirectoryPicker === 'function') { return true; } return false; } } type ModifierKey = 'alt' | 'ctrl' | 'shift' | 'meta'; export interface IModifierKeyStatus { altKey: boolean; shiftKey: boolean; ctrlKey: boolean; metaKey: boolean; lastKeyPressed?: ModifierKey; lastKeyReleased?: ModifierKey; event?: KeyboardEvent; } export class ModifierKeyEmitter extends Emitter { private readonly _subscriptions = new DisposableStore(); private _keyStatus: IModifierKeyStatus; private static instance: ModifierKeyEmitter; private constructor() { super(); this._keyStatus = { altKey: false, shiftKey: false, ctrlKey: false, metaKey: false }; this._subscriptions.add(domEvent(document.body, 'keydown', true)(e => { const event = new StandardKeyboardEvent(e); // If Alt-key keydown event is repeated, ignore it #112347 // Only known to be necessary for Alt-Key at the moment #115810 if (event.keyCode === KeyCode.Alt && e.repeat) { return; } if (e.altKey && !this._keyStatus.altKey) { this._keyStatus.lastKeyPressed = 'alt'; } else if (e.ctrlKey && !this._keyStatus.ctrlKey) { this._keyStatus.lastKeyPressed = 'ctrl'; } else if (e.metaKey && !this._keyStatus.metaKey) { this._keyStatus.lastKeyPressed = 'meta'; } else if (e.shiftKey && !this._keyStatus.shiftKey) { this._keyStatus.lastKeyPressed = 'shift'; } else if (event.keyCode !== KeyCode.Alt) { this._keyStatus.lastKeyPressed = undefined; } else { return; } this._keyStatus.altKey = e.altKey; this._keyStatus.ctrlKey = e.ctrlKey; this._keyStatus.metaKey = e.metaKey; this._keyStatus.shiftKey = e.shiftKey; if (this._keyStatus.lastKeyPressed) { this._keyStatus.event = e; this.fire(this._keyStatus); } })); this._subscriptions.add(domEvent(document.body, 'keyup', true)(e => { if (!e.altKey && this._keyStatus.altKey) { this._keyStatus.lastKeyReleased = 'alt'; } else if (!e.ctrlKey && this._keyStatus.ctrlKey) { this._keyStatus.lastKeyReleased = 'ctrl'; } else if (!e.metaKey && this._keyStatus.metaKey) { this._keyStatus.lastKeyReleased = 'meta'; } else if (!e.shiftKey && this._keyStatus.shiftKey) { this._keyStatus.lastKeyReleased = 'shift'; } else { this._keyStatus.lastKeyReleased = undefined; } if (this._keyStatus.lastKeyPressed !== this._keyStatus.lastKeyReleased) { this._keyStatus.lastKeyPressed = undefined; } this._keyStatus.altKey = e.altKey; this._keyStatus.ctrlKey = e.ctrlKey; this._keyStatus.metaKey = e.metaKey; this._keyStatus.shiftKey = e.shiftKey; if (this._keyStatus.lastKeyReleased) { this._keyStatus.event = e; this.fire(this._keyStatus); } })); this._subscriptions.add(domEvent(document.body, 'mousedown', true)(e => { this._keyStatus.lastKeyPressed = undefined; })); this._subscriptions.add(domEvent(document.body, 'mouseup', true)(e => { this._keyStatus.lastKeyPressed = undefined; })); this._subscriptions.add(domEvent(document.body, 'mousemove', true)(e => { if (e.buttons) { this._keyStatus.lastKeyPressed = undefined; } })); this._subscriptions.add(domEvent(window, 'blur')(e => { this.resetKeyStatus(); })); } get keyStatus(): IModifierKeyStatus { return this._keyStatus; } get isModifierPressed(): boolean { return this._keyStatus.altKey || this._keyStatus.ctrlKey || this._keyStatus.metaKey || this._keyStatus.shiftKey; } /** * Allows to explicitly reset the key status based on more knowledge (#109062) */ resetKeyStatus(): void { this.doResetKeyStatus(); this.fire(this._keyStatus); } private doResetKeyStatus(): void { this._keyStatus = { altKey: false, shiftKey: false, ctrlKey: false, metaKey: false }; } static getInstance() { if (!ModifierKeyEmitter.instance) { ModifierKeyEmitter.instance = new ModifierKeyEmitter(); } return ModifierKeyEmitter.instance; } dispose() { super.dispose(); this._subscriptions.dispose(); } } export function getCookieValue(name: string): string | undefined { const match = document.cookie.match('(^|[^;]+)\\s*' + name + '\\s*=\\s*([^;]+)'); // See https://stackoverflow.com/a/25490531 return match ? match.pop() : undefined; }