@codingame/monaco-vscode-api 25.1.2 → 26.0.0

package/vscode/src/vs/base/browser/dom.js

@@ -7,7 +7,7 @@ import { _runWhenIdle, AbstractIdleValue, IntervalTimer, TimeoutTimer } from '..
 import { onUnexpectedError, BugIndicatingError } from '../common/errors.js';
 import { Emitter, Event } from '../common/event.js';
 import { KeyCode } from '../common/keyCodes.js';
-import { DisposableStore, Disposable, toDisposable } from '../common/lifecycle.js';
+import { DisposableStore, Disposable, toDisposable, MutableDisposable } from '../common/lifecycle.js';
 import { RemoteAuthorities } from '../common/network.js';
 import { isIOS, isMacintosh, isLinux } from '../common/platform.js';
 import { URI } from '../common/uri.js';
@@ -19,16 +19,30 @@ import { derived, derivedOpts } from '../common/observableInternal/observables/d
 import { isObservable } from '../common/observableInternal/utils/utils.js';
 import { observableValue } from '../common/observableInternal/observables/observableValue.js';
 
-const { registerWindow, getWindow, getDocument, getWindows, getWindowsCount, getWindowId, getWindowById, onDidRegisterWindow, onWillUnregisterWindow, onDidUnregisterWindow } = (function () {
+const {
+    registerWindow,
+    getWindow,
+    getDocument,
+    getWindows,
+    getWindowsCount,
+    getWindowId,
+    getWindowById,
+    onDidRegisterWindow,
+    onWillUnregisterWindow,
+    onDidUnregisterWindow
+} = (function() {
     const windows = ( new Map());
     ensureCodeWindow(mainWindow, 1);
-    const mainWindowRegistration = { window: mainWindow, disposables: ( new DisposableStore()) };
+    const mainWindowRegistration = {
+        window: mainWindow,
+        disposables: ( new DisposableStore())
+    };
     windows.set(mainWindow.vscodeWindowId, mainWindowRegistration);
     const onDidRegisterWindow = new Emitter();
     const onDidUnregisterWindow = new Emitter();
     const onWillUnregisterWindow = new Emitter();
     function getWindowById(windowId, fallbackToMain) {
-        const window = typeof windowId === 'number' ? windows.get(windowId) : undefined;
+        const window = typeof windowId === "number" ? windows.get(windowId) : undefined;
         return window ?? (fallbackToMain ? mainWindowRegistration : undefined);
     }
     return {
@@ -85,6 +99,37 @@ const { registerWindow, getWindow, getDocument, getWindows, getWindowsCount, get
         }
     };
 })();
+const externalFocusCheckers = ( new Set());
+function hasExternalFocus() {
+    for (const checker of externalFocusCheckers) {
+        if (checker().hasFocus) {
+            return true;
+        }
+    }
+    return false;
+}
+function getExternalFocusWindow() {
+    for (const checker of externalFocusCheckers) {
+        const info = checker();
+        if (info.hasFocus && info.window) {
+            return info.window;
+        }
+    }
+    return undefined;
+}
+function hasAppFocus() {
+    for (const {
+        window
+    } of getWindows()) {
+        if (window.document.hasFocus()) {
+            return true;
+        }
+    }
+    if (hasExternalFocus()) {
+        return true;
+    }
+    return false;
+}
 function clearNode(node) {
     while (node.firstChild) {
         node.firstChild.remove();
@@ -111,18 +156,22 @@ function addDisposableListener(node, type, handler, useCaptureOrOptions) {
     return new DomListener(node, type, handler, useCaptureOrOptions);
 }
 class ActiveElementTracker extends Disposable {
-    get onDidChangeActiveElement() { return this._onDidChangeActiveElement.event; }
+    get onDidChangeActiveElement() {
+        return this._onDidChangeActiveElement.event;
+    }
     constructor(window) {
         super();
         this.window = window;
         this.activeElement = null;
         this._onDidChangeActiveElement = this._register(new Emitter());
-        this._onFocusIn = (e) => {
+        this._onFocusIn = e => {
             this.activeElement = getActiveElement(this.window.document);
             this._onDidChangeActiveElement.fire(this.activeElement);
             if (isElement(e.target) && e.target.shadowRoot) {
                 const disposableStore = ( new DisposableStore());
-                disposableStore.add(addDisposableListener(e.target.shadowRoot, EventType.FOCUS_IN, this._onFocusIn));
+                disposableStore.add(
+                    addDisposableListener(e.target.shadowRoot, EventType.FOCUS_IN, this._onFocusIn)
+                );
                 disposableStore.add(addDisposableListener(e.target, EventType.FOCUS_OUT, () => {
                     disposableStore.dispose();
                 }));
@@ -135,21 +184,20 @@ function trackActiveElement(window) {
     return ( new ActiveElementTracker(window));
 }
 function _wrapAsStandardMouseEvent(targetWindow, handler) {
-    return function (e) {
+    return function(e) {
         return handler(( new StandardMouseEvent(targetWindow, e)));
     };
 }
 function _wrapAsStandardKeyboardEvent(handler) {
-    return function (e) {
+    return function(e) {
         return handler(( new StandardKeyboardEvent(e)));
     };
 }
 const addStandardDisposableListener = function addStandardDisposableListener(node, type, handler, useCapture) {
     let wrapHandler = handler;
-    if (type === 'click' || type === 'mousedown' || type === 'contextmenu') {
+    if (type === "click" || type === "mousedown" || type === "contextmenu") {
         wrapHandler = _wrapAsStandardMouseEvent(getWindow(node), handler);
-    }
-    else if (type === 'keydown' || type === 'keypress' || type === 'keyup') {
+    } else if (type === "keydown" || type === "keypress" || type === "keyup") {
         wrapHandler = _wrapAsStandardKeyboardEvent(handler);
     }
     return addDisposableListener(node, type, wrapHandler, useCapture);
@@ -163,13 +211,28 @@ const addStandardDisposableGenericMouseUpListener = function addStandardDisposab
     return addDisposableGenericMouseUpListener(node, wrapHandler, useCapture);
 };
 function addDisposableGenericMouseDownListener(node, handler, useCapture) {
-    return addDisposableListener(node, isIOS && BrowserFeatures.pointerEvents ? EventType.POINTER_DOWN : EventType.MOUSE_DOWN, handler, useCapture);
+    return addDisposableListener(
+        node,
+        isIOS && BrowserFeatures.pointerEvents ? EventType.POINTER_DOWN : EventType.MOUSE_DOWN,
+        handler,
+        useCapture
+    );
 }
 function addDisposableGenericMouseMoveListener(node, handler, useCapture) {
-    return addDisposableListener(node, isIOS && BrowserFeatures.pointerEvents ? EventType.POINTER_MOVE : EventType.MOUSE_MOVE, handler, useCapture);
+    return addDisposableListener(
+        node,
+        isIOS && BrowserFeatures.pointerEvents ? EventType.POINTER_MOVE : EventType.MOUSE_MOVE,
+        handler,
+        useCapture
+    );
 }
 function addDisposableGenericMouseUpListener(node, handler, useCapture) {
-    return addDisposableListener(node, isIOS && BrowserFeatures.pointerEvents ? EventType.POINTER_UP : EventType.MOUSE_UP, handler, useCapture);
+    return addDisposableListener(
+        node,
+        isIOS && BrowserFeatures.pointerEvents ? EventType.POINTER_UP : EventType.MOUSE_UP,
+        handler,
+        useCapture
+    );
 }
 function runWhenWindowIdle(targetWindow, callback, timeout) {
     return _runWhenIdle(targetWindow, callback, timeout);
@@ -185,7 +248,7 @@ function disposableWindowInterval(targetWindow, handler, interval, iterations) {
     let iteration = 0;
     const timer = targetWindow.setInterval(() => {
         iteration++;
-        if ((typeof iterations === 'number' && iteration >= iterations) || handler() === true) {
+        if ((typeof iterations === "number" && iteration >= iterations) || handler() === true) {
             disposable.dispose();
         }
     }, interval);
@@ -218,8 +281,7 @@ class AnimationFrameQueueItem {
         }
         try {
             this._runner();
-        }
-        catch (e) {
+        } catch (e) {
             onUnexpectedError(e);
         }
     }
@@ -227,12 +289,12 @@ class AnimationFrameQueueItem {
         return b.priority - a.priority;
     }
 }
-(function () {
+(function() {
     const NEXT_QUEUE = ( new Map());
     const CURRENT_QUEUE = ( new Map());
     const animFrameRequested = ( new Map());
     const inAnimationFrameRunner = ( new Map());
-    const animationFrameRunner = (targetWindowId) => {
+    const animationFrameRunner = targetWindowId => {
         animFrameRequested.set(targetWindowId, false);
         const currentQueue = NEXT_QUEUE.get(targetWindowId) ?? [];
         CURRENT_QUEUE.set(targetWindowId, currentQueue);
@@ -271,8 +333,7 @@ class AnimationFrameQueueItem {
             }
             currentQueue.push(item);
             return item;
-        }
-        else {
+        } else {
             return scheduleAtNextAnimationFrame(targetWindow, runner, priority);
         }
     };
@@ -283,29 +344,59 @@ function measure(targetWindow, callback) {
 function modify(targetWindow, callback) {
     return scheduleAtNextAnimationFrame(targetWindow, callback, -1e4 );
 }
+class AnimationFrameScheduler {
+    constructor(node, runner) {
+        this.pendingRunner = ( new MutableDisposable());
+        this.node = node;
+        this.runner = runner;
+    }
+    dispose() {
+        this.pendingRunner.dispose();
+    }
+    cancel() {
+        this.pendingRunner.clear();
+    }
+    schedule() {
+        if (this.pendingRunner.value) {
+            return;
+        }
+        this.pendingRunner.value = runAtThisOrScheduleAtNextAnimationFrame(getWindow(this.node), () => {
+            this.pendingRunner.clear();
+            this.runner();
+        });
+    }
+    isScheduled() {
+        return this.pendingRunner.value !== undefined;
+    }
+}
 const MINIMUM_TIME_MS = 8;
 function DEFAULT_EVENT_MERGER(_lastEvent, currentEvent) {
     return currentEvent;
 }
 class TimeoutThrottledDomListener extends Disposable {
-    constructor(node, type, handler, eventMerger = DEFAULT_EVENT_MERGER, minimumTimeMs = MINIMUM_TIME_MS) {
+    constructor(
+        node,
+        type,
+        handler,
+        eventMerger = DEFAULT_EVENT_MERGER,
+        minimumTimeMs = MINIMUM_TIME_MS
+    ) {
         super();
         let lastEvent = null;
         let lastHandlerTime = 0;
         const timeout = this._register(( new TimeoutTimer()));
         const invokeHandler = () => {
-            lastHandlerTime = (( new Date())).getTime();
+            lastHandlerTime = ( new Date()).getTime();
             handler(lastEvent);
             lastEvent = null;
         };
-        this._register(addDisposableListener(node, type, (e) => {
+        this._register(addDisposableListener(node, type, e => {
             lastEvent = eventMerger(lastEvent, e);
-            const elapsedTime = (( new Date())).getTime() - lastHandlerTime;
+            const elapsedTime = ( new Date()).getTime() - lastHandlerTime;
             if (elapsedTime >= minimumTimeMs) {
                 timeout.cancel();
                 invokeHandler();
-            }
-            else {
+            } else {
                 timeout.setIfNotSet(invokeHandler, minimumTimeMs - elapsedTime);
             }
         }));
@@ -344,7 +435,7 @@ function getClientArea(element, defaultValue, fallbackElement) {
     if (defaultValue) {
         return defaultValue;
     }
-    throw ( new Error('Unable to figure out browser width and height'));
+    throw ( new Error("Unable to figure out browser width and height"));
 }
 class SizeUtils {
     static convertToPixels(element, value) {
@@ -352,48 +443,50 @@ class SizeUtils {
     }
     static getDimension(element, cssPropertyName) {
         const computedStyle = getComputedStyle(element);
-        const value = computedStyle ? computedStyle.getPropertyValue(cssPropertyName) : '0';
+        const value = computedStyle ? computedStyle.getPropertyValue(cssPropertyName) : "0";
         return SizeUtils.convertToPixels(element, value);
     }
     static getBorderLeftWidth(element) {
-        return SizeUtils.getDimension(element, 'border-left-width');
+        return SizeUtils.getDimension(element, "border-left-width");
     }
     static getBorderRightWidth(element) {
-        return SizeUtils.getDimension(element, 'border-right-width');
+        return SizeUtils.getDimension(element, "border-right-width");
     }
     static getBorderTopWidth(element) {
-        return SizeUtils.getDimension(element, 'border-top-width');
+        return SizeUtils.getDimension(element, "border-top-width");
     }
     static getBorderBottomWidth(element) {
-        return SizeUtils.getDimension(element, 'border-bottom-width');
+        return SizeUtils.getDimension(element, "border-bottom-width");
     }
     static getPaddingLeft(element) {
-        return SizeUtils.getDimension(element, 'padding-left');
+        return SizeUtils.getDimension(element, "padding-left");
     }
     static getPaddingRight(element) {
-        return SizeUtils.getDimension(element, 'padding-right');
+        return SizeUtils.getDimension(element, "padding-right");
     }
     static getPaddingTop(element) {
-        return SizeUtils.getDimension(element, 'padding-top');
+        return SizeUtils.getDimension(element, "padding-top");
     }
     static getPaddingBottom(element) {
-        return SizeUtils.getDimension(element, 'padding-bottom');
+        return SizeUtils.getDimension(element, "padding-bottom");
     }
     static getMarginLeft(element) {
-        return SizeUtils.getDimension(element, 'margin-left');
+        return SizeUtils.getDimension(element, "margin-left");
     }
     static getMarginTop(element) {
-        return SizeUtils.getDimension(element, 'margin-top');
+        return SizeUtils.getDimension(element, "margin-top");
     }
     static getMarginRight(element) {
-        return SizeUtils.getDimension(element, 'margin-right');
+        return SizeUtils.getDimension(element, "margin-right");
     }
     static getMarginBottom(element) {
-        return SizeUtils.getDimension(element, 'margin-bottom');
+        return SizeUtils.getDimension(element, "margin-bottom");
     }
 }
 class Dimension {
-    static { this.None = ( new Dimension(0, 0)); }
+    static {
+        this.None = ( new Dimension(0, 0));
+    }
     constructor(width, height) {
         this.width = width;
         this.height = height;
@@ -401,19 +494,17 @@ class Dimension {
     with(width = this.width, height = this.height) {
         if (width !== this.width || height !== this.height) {
             return ( new Dimension(width, height));
-        }
-        else {
+        } else {
             return this;
         }
     }
     static is(obj) {
-        return typeof obj === 'object' && typeof obj.height === 'number' && typeof obj.width === 'number';
+        return typeof obj === "object" && typeof obj.height === "number" && typeof obj.width === "number";
     }
     static lift(obj) {
         if (obj instanceof Dimension) {
             return obj;
-        }
-        else {
+        } else {
             return ( new Dimension(obj.width, obj.height));
         }
     }
@@ -431,12 +522,11 @@ function getTopLeftOffset(element) {
     let offsetParent = element.offsetParent;
     let top = element.offsetTop;
     let left = element.offsetLeft;
-    while ((element = element.parentNode) !== null
-        && element !== element.getRootNode()) {
+    while ((element = element.parentNode) !== null && element !== element.getRootNode()) {
         top -= element.scrollTop;
         const c = isShadowRoot(element) ? null : getComputedStyle(element);
         if (c) {
-            left -= c.direction !== 'rtl' ? element.scrollLeft : -element.scrollLeft;
+            left -= c.direction !== "rtl" ? element.scrollLeft : -element.scrollLeft;
         }
         if (element === offsetParent) {
             left += SizeUtils.getBorderLeftWidth(element);
@@ -452,14 +542,14 @@ function getTopLeftOffset(element) {
     };
 }
 function size(element, width, height) {
-    if (typeof width === 'number') {
+    if (typeof width === "number") {
         element.style.width = `${width}px`;
     }
-    if (typeof height === 'number') {
+    if (typeof height === "number") {
         element.style.height = `${height}px`;
     }
 }
-function position(element, top, right, bottom, left, position = 'absolute') {
+function position(element, top, right, bottom, left, position = "absolute") {
     {
         element.style.top = `${top}px`;
     }
@@ -494,7 +584,7 @@ function getDomNodeZoomLevel(domNode) {
     let zoom = 1.0;
     do {
         const elementZoomLevel = getComputedStyle(testElement).zoom;
-        if (elementZoomLevel !== null && elementZoomLevel !== undefined && elementZoomLevel !== '1') {
+        if (elementZoomLevel !== null && elementZoomLevel !== undefined && elementZoomLevel !== "1") {
             zoom *= elementZoomLevel;
         }
         testElement = testElement.parentElement;
@@ -532,7 +622,7 @@ function getRelativeLeft(element, parent) {
     return elementPosition.left - parentPosition.left;
 }
 function getLargestChildWidth(parent, children) {
-    const childWidths = ( children.map((child) => {
+    const childWidths = ( children.map(child => {
         return Math.max(getTotalScrollWidth(child), getTotalWidth(child)) + getRelativeLeft(child, parent) || 0;
     }));
     const maxWidth = Math.max(...childWidths);
@@ -541,13 +631,13 @@ function getLargestChildWidth(parent, children) {
 function isAncestor(testChild, testAncestor) {
     return Boolean(testAncestor?.contains(testChild));
 }
-const parentFlowToDataKey = 'parentFlowToElementId';
+const parentFlowToDataKey = "parentFlowToElementId";
 function setParentFlowTo(fromChildElement, toParentElement) {
     fromChildElement.dataset[parentFlowToDataKey] = toParentElement.id;
 }
 function getParentFlowToElement(node) {
     const flowToParentId = node.dataset[parentFlowToDataKey];
-    if (typeof flowToParentId === 'string') {
+    if (typeof flowToParentId === "string") {
         return node.getRootNode().getElementById(flowToParentId);
     }
     return null;
@@ -575,12 +665,11 @@ function findParentWithClass(node, clazz, stopAtClazzOrNode) {
             return node;
         }
         if (stopAtClazzOrNode) {
-            if (typeof stopAtClazzOrNode === 'string') {
+            if (typeof stopAtClazzOrNode === "string") {
                 if (node.classList.contains(stopAtClazzOrNode)) {
                     return null;
                 }
-            }
-            else {
+            } else {
                 if (node === stopAtClazzOrNode) {
                     return null;
                 }
@@ -616,9 +705,8 @@ function getActiveElement(_document = getActiveDocument()) {
     return result;
 }
 function getFullscreenElement(_document = getActiveDocument()) {
-    const _getFullscreenElement = (node) => node.fullscreenElement ??
-        node.webkitFullscreenElement ??
-        null;
+    const _getFullscreenElement = node => node.fullscreenElement ??
+    node.webkitFullscreenElement ?? null;
     let result = _getFullscreenElement(_document);
     while (result?.shadowRoot) {
         result = _getFullscreenElement(result.shadowRoot);
@@ -645,8 +733,20 @@ function getActiveDocument() {
     if (getWindowsCount() <= 1) {
         return mainWindow.document;
     }
-    const documents = ( Array.from(getWindows()).map(({ window }) => window.document));
-    return documents.find(doc => doc.hasFocus()) ?? mainWindow.document;
+    const documents = ( Array.from(getWindows()).map((
+        {
+            window
+        }
+    ) => window.document));
+    const focusedDoc = documents.find(doc => doc.hasFocus());
+    if (focusedDoc) {
+        return focusedDoc;
+    }
+    const externalWindow = getExternalFocusWindow();
+    if (externalWindow) {
+        return externalWindow.document;
+    }
+    return mainWindow.document;
 }
 function getActiveWindow() {
     const document = getActiveDocument();
@@ -685,18 +785,17 @@ const sharedMutationObserver = new (class {
                 }
             }));
             mutationObserversPerTarget.set(optionsHash, mutationObserverPerOptions);
-        }
-        else {
+        } else {
             mutationObserverPerOptions.users += 1;
         }
         return mutationObserverPerOptions.onDidMutate;
     }
-});
+})();
 function createMetaElement(container = mainWindow.document.head) {
-    return createHeadElement('meta', container);
+    return createHeadElement("meta", container);
 }
 function createLinkElement(container = mainWindow.document.head) {
-    return createHeadElement('link', container);
+    return createHeadElement("link", container);
 }
 function createDocumentFragment() {
     return mainWindow.document.createDocumentFragment();
@@ -706,7 +805,7 @@ function createTextNode(data) {
 }
 function createHeadElement(tagName, container = mainWindow.document.head) {
     const element = createElement(tagName);
-    element.setAttribute('data-vscode', 'true');
+    element.setAttribute("data-vscode", "true");
     container.appendChild(element);
     return element;
 }
@@ -756,62 +855,62 @@ function isDragEvent(e) {
     return e instanceof mainWindow.DragEvent || e instanceof getWindow(e).DragEvent;
 }
 const EventType = {
-    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: 'wheel',
-    POINTER_UP: 'pointerup',
-    POINTER_DOWN: 'pointerdown',
-    POINTER_MOVE: 'pointermove',
-    POINTER_LEAVE: 'pointerleave',
-    CONTEXT_MENU: 'contextmenu',
-    WHEEL: 'wheel',
-    KEY_DOWN: 'keydown',
-    KEY_PRESS: 'keypress',
-    KEY_UP: 'keyup',
-    LOAD: 'load',
-    BEFORE_UNLOAD: 'beforeunload',
-    UNLOAD: 'unload',
-    PAGE_SHOW: 'pageshow',
-    PAGE_HIDE: 'pagehide',
-    PASTE: 'paste',
-    ABORT: 'abort',
-    ERROR: 'error',
-    RESIZE: 'resize',
-    SCROLL: 'scroll',
-    FULLSCREEN_CHANGE: 'fullscreenchange',
-    WK_FULLSCREEN_CHANGE: 'webkitfullscreenchange',
-    SELECT: 'select',
-    CHANGE: 'change',
-    SUBMIT: 'submit',
-    RESET: 'reset',
-    FOCUS: 'focus',
-    FOCUS_IN: 'focusin',
-    FOCUS_OUT: 'focusout',
-    BLUR: 'blur',
-    INPUT: 'input',
-    STORAGE: 'storage',
-    DRAG_START: 'dragstart',
-    DRAG: 'drag',
-    DRAG_ENTER: 'dragenter',
-    DRAG_LEAVE: 'dragleave',
-    DRAG_OVER: 'dragover',
-    DROP: 'drop',
-    DRAG_END: 'dragend',
-    ANIMATION_START: isWebKit ? 'webkitAnimationStart' : 'animationstart',
-    ANIMATION_END: isWebKit ? 'webkitAnimationEnd' : 'animationend',
-    ANIMATION_ITERATION: isWebKit ? 'webkitAnimationIteration' : 'animationiteration'
+    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: "wheel",
+    POINTER_UP: "pointerup",
+    POINTER_DOWN: "pointerdown",
+    POINTER_MOVE: "pointermove",
+    POINTER_LEAVE: "pointerleave",
+    CONTEXT_MENU: "contextmenu",
+    WHEEL: "wheel",
+    KEY_DOWN: "keydown",
+    KEY_PRESS: "keypress",
+    KEY_UP: "keyup",
+    LOAD: "load",
+    BEFORE_UNLOAD: "beforeunload",
+    UNLOAD: "unload",
+    PAGE_SHOW: "pageshow",
+    PAGE_HIDE: "pagehide",
+    PASTE: "paste",
+    ABORT: "abort",
+    ERROR: "error",
+    RESIZE: "resize",
+    SCROLL: "scroll",
+    FULLSCREEN_CHANGE: "fullscreenchange",
+    WK_FULLSCREEN_CHANGE: "webkitfullscreenchange",
+    SELECT: "select",
+    CHANGE: "change",
+    SUBMIT: "submit",
+    RESET: "reset",
+    FOCUS: "focus",
+    FOCUS_IN: "focusin",
+    FOCUS_OUT: "focusout",
+    BLUR: "blur",
+    INPUT: "input",
+    STORAGE: "storage",
+    DRAG_START: "dragstart",
+    DRAG: "drag",
+    DRAG_ENTER: "dragenter",
+    DRAG_LEAVE: "dragleave",
+    DRAG_OVER: "dragover",
+    DROP: "drop",
+    DRAG_END: "dragend",
+    ANIMATION_START: isWebKit ? "webkitAnimationStart" : "animationstart",
+    ANIMATION_END: isWebKit ? "webkitAnimationEnd" : "animationend",
+    ANIMATION_ITERATION: isWebKit ? "webkitAnimationIteration" : "animationiteration"
 };
 function isEventLike(obj) {
     const candidate = obj;
-    return !!(candidate && typeof candidate.preventDefault === 'function' && typeof candidate.stopPropagation === 'function');
+    return !!(candidate && typeof candidate.preventDefault === "function" && typeof candidate.stopPropagation === "function");
 }
 const EventHelper = {
     stop: (e, cancelBubble) => {
@@ -839,15 +938,18 @@ function restoreParentsScrollTop(node, state) {
     }
 }
 class FocusTracker extends Disposable {
-    get onDidFocus() { return this._onDidFocus.event; }
-    get onDidBlur() { return this._onDidBlur.event; }
+    get onDidFocus() {
+        return this._onDidFocus.event;
+    }
+    get onDidBlur() {
+        return this._onDidBlur.event;
+    }
     static hasFocusWithin(element) {
         if (isHTMLElement(element)) {
             const shadowRoot = getShadowRoot(element);
             const activeElement = (shadowRoot ? shadowRoot.activeElement : element.getRootNode().activeElement);
             return isAncestor(activeElement, element);
-        }
-        else {
+        } else {
             const window = element;
             return isAncestor(window.document.activeElement, window.document);
         }
@@ -882,8 +984,7 @@ class FocusTracker extends Disposable {
             if (currentNodeHasFocus !== hasFocus) {
                 if (hasFocus) {
                     onBlur();
-                }
-                else {
+                } else {
                     onFocus();
                 }
             }
@@ -891,8 +992,12 @@ class FocusTracker extends Disposable {
         this._register(addDisposableListener(element, EventType.FOCUS, onFocus, true));
         this._register(addDisposableListener(element, EventType.BLUR, onBlur, true));
         if (isHTMLElement(element)) {
-            this._register(addDisposableListener(element, EventType.FOCUS_IN, () => this._refreshStateHandler()));
-            this._register(addDisposableListener(element, EventType.FOCUS_OUT, () => this._refreshStateHandler()));
+            this._register(
+                addDisposableListener(element, EventType.FOCUS_IN, () => this._refreshStateHandler())
+            );
+            this._register(
+                addDisposableListener(element, EventType.FOCUS_OUT, () => this._refreshStateHandler())
+            );
         }
     }
     refreshState() {
@@ -908,7 +1013,7 @@ function after(sibling, child) {
 }
 function append(parent, ...children) {
     parent.append(...children);
-    if (children.length === 1 && typeof children[0] !== 'string') {
+    if (children.length === 1 && typeof children[0] !== "string") {
         return children[0];
     }
 }
@@ -917,48 +1022,45 @@ function prepend(parent, child) {
     return child;
 }
 function reset(parent, ...children) {
-    parent.textContent = '';
+    parent.textContent = "";
     append(parent, ...children);
 }
 const SELECTOR_REGEX = /([\w\-]+)?(#([\w\-]+))?((\.([\w\-]+))*)/;
 var Namespace;
-(function (Namespace) {
+(function(Namespace) {
     Namespace["HTML"] = "http://www.w3.org/1999/xhtml";
     Namespace["SVG"] = "http://www.w3.org/2000/svg";
 })(Namespace || (Namespace = {}));
 function _$(namespace, description, attrs, ...children) {
     const match = SELECTOR_REGEX.exec(description);
     if (!match) {
-        throw ( new Error('Bad use of emmet'));
+        throw ( new Error("Bad use of emmet"));
     }
-    const tagName = match[1] || 'div';
+    const tagName = match[1] || "div";
     let result;
     if (namespace !== Namespace.HTML) {
         result = createElementNS(namespace, tagName);
-    }
-    else {
+    } else {
         result = createElement(tagName);
     }
     if (match[3]) {
         result.id = match[3];
     }
     if (match[4]) {
-        result.className = match[4].replace(/\./g, ' ').trim();
+        result.className = match[4].replace(/\./g, " ").trim();
     }
     if (attrs) {
         Object.entries(attrs).forEach(([name, value]) => {
-            if (typeof value === 'undefined') {
+            if (typeof value === "undefined") {
                 return;
             }
             if (/^on\w+$/.test(name)) {
                 result[name] = value;
-            }
-            else if (name === 'selected') {
+            } else if (name === "selected") {
                 if (value) {
-                    result.setAttribute(name, 'true');
+                    result.setAttribute(name, "true");
                 }
-            }
-            else {
+            } else {
                 result.setAttribute(name, value);
             }
         });
@@ -969,27 +1071,26 @@ function _$(namespace, description, attrs, ...children) {
 function $(description, attrs, ...children) {
     return _$(Namespace.HTML, description, attrs, ...children);
 }
-$.SVG = function (description, attrs, ...children) {
+$.SVG = function(description, attrs, ...children) {
     return _$(Namespace.SVG, description, attrs, ...children);
 };
 function setVisibility(visible, ...elements) {
     if (visible) {
         show(...elements);
-    }
-    else {
+    } else {
         hide(...elements);
     }
 }
 function show(...elements) {
     for (const element of elements) {
-        element.style.display = '';
-        element.removeAttribute('aria-hidden');
+        element.style.display = "";
+        element.removeAttribute("aria-hidden");
     }
 }
 function hide(...elements) {
     for (const element of elements) {
-        element.style.display = 'none';
-        element.setAttribute('aria-hidden', 'true');
+        element.style.display = "none";
+        element.setAttribute("aria-hidden", "true");
     }
 }
 function finalHandler(fn) {
@@ -1004,13 +1105,17 @@ function computeScreenAwareSize(window, cssPx) {
     return Math.max(1, Math.floor(screenPx)) / window.devicePixelRatio;
 }
 function windowOpenNoOpener(url) {
-    mainWindow.open(url, '_blank', 'noopener');
+    mainWindow.open(url, "_blank", "noopener");
 }
 const popupWidth = 780, popupHeight = 640;
 function windowOpenPopup(url) {
     const left = Math.floor(mainWindow.screenLeft + mainWindow.innerWidth / 2 - popupWidth / 2);
     const top = Math.floor(mainWindow.screenTop + mainWindow.innerHeight / 2 - popupHeight / 2);
-    mainWindow.open(url, '_blank', `width=${popupWidth},height=${popupHeight},top=${top},left=${left}`);
+    mainWindow.open(
+        url,
+        "_blank",
+        `width=${popupWidth},height=${popupHeight},top=${top},left=${left}`
+    );
 }
 function windowOpenWithSuccess(url, noOpener = true) {
     const newTab = mainWindow.open();
@@ -1031,19 +1136,18 @@ function animate(targetWindow, fn) {
     let stepDisposable = scheduleAtNextAnimationFrame(targetWindow, step);
     return toDisposable(() => stepDisposable.dispose());
 }
-RemoteAuthorities.setPreferredWebSchema(/^https:/.test(mainWindow.location.href) ? 'https' : 'http');
+RemoteAuthorities.setPreferredWebSchema(/^https:/.test(mainWindow.location.href) ? "https" : "http");
 function triggerDownload(dataOrUri, name) {
     let url;
     if (URI.isUri(dataOrUri)) {
         url = ( dataOrUri.toString(true));
-    }
-    else {
+    } else {
         const blob = ( new Blob([dataOrUri]));
         url = URL.createObjectURL(blob);
         setTimeout(() => URL.revokeObjectURL(url));
     }
     const activeWindow = getActiveWindow();
-    const anchor = createElement('a');
+    const anchor = createElement("a");
     activeWindow.document.body.appendChild(anchor);
     anchor.download = name;
     anchor.href = url;
@@ -1053,11 +1157,11 @@ function triggerDownload(dataOrUri, name) {
 function triggerUpload() {
     return ( new Promise(resolve => {
         const activeWindow = getActiveWindow();
-        const input = createElement('input');
+        const input = createElement("input");
         activeWindow.document.body.appendChild(input);
-        input.type = 'file';
+        input.type = "file";
         input.multiple = true;
-        Event.once(Event.fromDOMEventEmitter(input, 'input'))(() => {
+        Event.once(Event.fromDOMEventEmitter(input, "input"))(() => {
             resolve(input.files ?? undefined);
         });
         input.click();
@@ -1065,21 +1169,21 @@ function triggerUpload() {
     }));
 }
 function sanitizeNotificationText(text) {
-    return text.replace(/`/g, '\'');
+    return text.replace(/`/g, "'");
 }
 async function triggerNotification(message, options) {
     const permission = await Notification.requestPermission();
-    if (permission !== 'granted') {
+    if (permission !== "granted") {
         return;
     }
     const disposables = ( new DisposableStore());
     const notification = ( new Notification(sanitizeNotificationText(message), {
         body: options?.detail ? sanitizeNotificationText(options.detail) : undefined,
-        requireInteraction: options?.sticky,
+        requireInteraction: options?.sticky
     }));
     const onClick = new Emitter();
-    disposables.add(addDisposableListener(notification, 'click', () => onClick.fire()));
-    disposables.add(addDisposableListener(notification, 'close', () => disposables.dispose()));
+    disposables.add(addDisposableListener(notification, "click", () => onClick.fire()));
+    disposables.add(addDisposableListener(notification, "close", () => disposables.dispose()));
     disposables.add(toDisposable(() => notification.close()));
     return {
         onClick: onClick.event,
@@ -1087,22 +1191,31 @@ async function triggerNotification(message, options) {
     };
 }
 var DetectedFullscreenMode;
-(function (DetectedFullscreenMode) {
+(function(DetectedFullscreenMode) {
     DetectedFullscreenMode[DetectedFullscreenMode["DOCUMENT"] = 1] = "DOCUMENT";
     DetectedFullscreenMode[DetectedFullscreenMode["BROWSER"] = 2] = "BROWSER";
 })(DetectedFullscreenMode || (DetectedFullscreenMode = {}));
 function detectFullscreen(targetWindow, containerElement) {
     const fullscreenElement = getFullscreenElement(targetWindow.document);
     if (fullscreenElement === containerElement) {
-        return { mode: DetectedFullscreenMode.DOCUMENT, guess: false };
+        return {
+            mode: DetectedFullscreenMode.DOCUMENT,
+            guess: false
+        };
     }
     const isContainerFullScreen = containerElement.getBoundingClientRect().height >= targetWindow.screen.height;
     if (targetWindow.innerHeight === targetWindow.screen.height && isContainerFullScreen) {
-        return { mode: DetectedFullscreenMode.BROWSER, guess: false };
+        return {
+            mode: DetectedFullscreenMode.BROWSER,
+            guess: false
+        };
     }
     if (isMacintosh || isLinux) {
         if (targetWindow.outerHeight === targetWindow.screen.height && targetWindow.outerWidth === targetWindow.screen.width && isContainerFullScreen) {
-            return { mode: DetectedFullscreenMode.BROWSER, guess: true };
+            return {
+                mode: DetectedFullscreenMode.BROWSER,
+                guess: true
+            };
         }
     }
     return null;
@@ -1117,10 +1230,18 @@ class ModifierKeyEmitter extends Emitter {
             ctrlKey: false,
             metaKey: false
         };
-        this._subscriptions.add(Event.runAndSubscribe(onDidRegisterWindow, ({ window, disposables }) => this.registerListeners(window, disposables), { window: mainWindow, disposables: this._subscriptions }));
+        this._subscriptions.add(Event.runAndSubscribe(onDidRegisterWindow, (
+            {
+                window,
+                disposables
+            }
+        ) => this.registerListeners(window, disposables), {
+            window: mainWindow,
+            disposables: this._subscriptions
+        }));
     }
     registerListeners(window, disposables) {
-        disposables.add(addDisposableListener(window, 'keydown', e => {
+        disposables.add(addDisposableListener(window, "keydown", e => {
             if (e.defaultPrevented) {
                 return;
             }
@@ -1129,21 +1250,16 @@ class ModifierKeyEmitter extends Emitter {
                 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 = "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 {
+            } else {
                 return;
             }
             this._keyStatus.altKey = e.altKey;
@@ -1155,23 +1271,19 @@ class ModifierKeyEmitter extends Emitter {
                 this.fire(this._keyStatus);
             }
         }, true));
-        disposables.add(addDisposableListener(window, 'keyup', e => {
+        disposables.add(addDisposableListener(window, "keyup", e => {
             if (e.defaultPrevented) {
                 return;
             }
             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 = "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) {
@@ -1186,18 +1298,18 @@ class ModifierKeyEmitter extends Emitter {
                 this.fire(this._keyStatus);
             }
         }, true));
-        disposables.add(addDisposableListener(window.document.body, 'mousedown', () => {
+        disposables.add(addDisposableListener(window.document.body, "mousedown", () => {
             this._keyStatus.lastKeyPressed = undefined;
         }, true));
-        disposables.add(addDisposableListener(window.document.body, 'mouseup', () => {
+        disposables.add(addDisposableListener(window.document.body, "mouseup", () => {
             this._keyStatus.lastKeyPressed = undefined;
         }, true));
-        disposables.add(addDisposableListener(window.document.body, 'mousemove', e => {
+        disposables.add(addDisposableListener(window.document.body, "mousemove", e => {
             if (e.buttons) {
                 this._keyStatus.lastKeyPressed = undefined;
             }
         }, true));
-        disposables.add(addDisposableListener(window, 'blur', () => {
+        disposables.add(addDisposableListener(window, "blur", () => {
             this.resetKeyStatus();
         }));
     }
@@ -1247,43 +1359,54 @@ class DragAndDropObserver extends Disposable {
     }
     registerListeners() {
         if (this.callbacks.onDragStart) {
-            this._register(addDisposableListener(this.element, EventType.DRAG_START, (e) => {
+            this._register(addDisposableListener(this.element, EventType.DRAG_START, e => {
                 this.callbacks.onDragStart?.(e);
             }));
         }
         if (this.callbacks.onDrag) {
-            this._register(addDisposableListener(this.element, EventType.DRAG, (e) => {
+            this._register(addDisposableListener(this.element, EventType.DRAG, e => {
                 this.callbacks.onDrag?.(e);
             }));
         }
-        this._register(addDisposableListener(this.element, EventType.DRAG_ENTER, (e) => {
+        this._register(addDisposableListener(this.element, EventType.DRAG_ENTER, e => {
             this.counter++;
             this.dragStartTime = e.timeStamp;
             this.callbacks.onDragEnter?.(e);
         }));
-        this._register(addDisposableListener(this.element, EventType.DRAG_OVER, (e) => {
+        this._register(addDisposableListener(this.element, EventType.DRAG_OVER, e => {
             e.preventDefault();
             this.callbacks.onDragOver?.(e, e.timeStamp - this.dragStartTime);
         }));
-        this._register(addDisposableListener(this.element, EventType.DRAG_LEAVE, (e) => {
+        this._register(addDisposableListener(this.element, EventType.DRAG_LEAVE, e => {
             this.counter--;
             if (this.counter === 0) {
                 this.dragStartTime = 0;
                 this.callbacks.onDragLeave?.(e);
             }
         }));
-        this._register(addDisposableListener(this.element, EventType.DRAG_END, (e) => {
+        this._register(addDisposableListener(this.element, EventType.DRAG_END, e => {
             this.counter = 0;
             this.dragStartTime = 0;
             this.callbacks.onDragEnd?.(e);
         }));
-        this._register(addDisposableListener(this.element, EventType.DROP, (e) => {
+        this._register(addDisposableListener(this.element, EventType.DROP, e => {
             this.counter = 0;
             this.dragStartTime = 0;
             this.callbacks.onDrop?.(e);
         }));
     }
 }
+class DisposableResizeObserver extends Disposable {
+    constructor(callback) {
+        super();
+        this.observer = ( new ResizeObserver(callback));
+        this._register(toDisposable(() => this.observer.disconnect()));
+    }
+    observe(target, options) {
+        this.observer.observe(target, options);
+        return toDisposable(() => this.observer.unobserve(target));
+    }
+}
 const H_REGEX = /(?<tag>[\w\-]+)?(?:#(?<id>[\w\-]+))?(?<class>(?:\.(?:[\w\-]+))*)(?:@(?<name>(?:[\w\_])+))?/;
 function h(tag, ...args) {
     let attributes;
@@ -1291,73 +1414,70 @@ function h(tag, ...args) {
     if (Array.isArray(args[0])) {
         attributes = {};
         children = args[0];
-    }
-    else {
+    } else {
         attributes = args[0] || {};
         children = args[1];
     }
     const match = H_REGEX.exec(tag);
     if (!match || !match.groups) {
-        throw ( new Error('Bad use of h'));
+        throw ( new Error("Bad use of h"));
     }
-    const tagName = match.groups['tag'] || 'div';
+    const tagName = match.groups["tag"] || "div";
     const el = createElement(tagName);
-    if (match.groups['id']) {
-        el.id = match.groups['id'];
+    if (match.groups["id"]) {
+        el.id = match.groups["id"];
     }
     const classNames = [];
-    if (match.groups['class']) {
-        for (const className of match.groups['class'].split('.')) {
-            if (className !== '') {
+    if (match.groups["class"]) {
+        for (const className of match.groups["class"].split(".")) {
+            if (className !== "") {
                 classNames.push(className);
             }
         }
     }
     if (attributes.className !== undefined) {
-        for (const className of attributes.className.split('.')) {
-            if (className !== '') {
+        for (const className of attributes.className.split(".")) {
+            if (className !== "") {
                 classNames.push(className);
             }
         }
     }
     if (classNames.length > 0) {
-        el.className = classNames.join(' ');
+        el.className = classNames.join(" ");
     }
     const result = {};
-    if (match.groups['name']) {
-        result[match.groups['name']] = el;
+    if (match.groups["name"]) {
+        result[match.groups["name"]] = el;
     }
     if (children) {
         for (const c of children) {
             if (isHTMLElement(c)) {
                 el.appendChild(c);
-            }
-            else if (typeof c === 'string') {
+            } else if (typeof c === "string") {
                 el.append(c);
-            }
-            else if ('root' in c) {
+            } else if ("root" in c) {
                 Object.assign(result, c);
                 el.appendChild(c.root);
             }
         }
     }
     for (const [key, value] of Object.entries(attributes)) {
-        if (key === 'className') {
+        if (key === "className") {
             continue;
-        }
-        else if (key === 'style') {
+        } else if (key === "style") {
             for (const [cssKey, cssValue] of Object.entries(value)) {
-                el.style.setProperty(camelCaseToHyphenCase(cssKey), typeof cssValue === 'number' ? cssValue + 'px' : '' + cssValue);
+                el.style.setProperty(
+                    camelCaseToHyphenCase(cssKey),
+                    typeof cssValue === "number" ? cssValue + "px" : "" + cssValue
+                );
             }
-        }
-        else if (key === 'tabIndex') {
+        } else if (key === "tabIndex") {
             el.tabIndex = value;
-        }
-        else {
+        } else {
             el.setAttribute(camelCaseToHyphenCase(key), ( value.toString()));
         }
     }
-    result['root'] = el;
+    result["root"] = el;
     return result;
 }
 function svgElem(tag, ...args) {
@@ -1366,80 +1486,80 @@ function svgElem(tag, ...args) {
     if (Array.isArray(args[0])) {
         attributes = {};
         children = args[0];
-    }
-    else {
+    } else {
         attributes = args[0] || {};
         children = args[1];
     }
     const match = H_REGEX.exec(tag);
     if (!match || !match.groups) {
-        throw ( new Error('Bad use of h'));
+        throw ( new Error("Bad use of h"));
     }
-    const tagName = match.groups['tag'] || 'div';
-    const el = createElementNS('http://www.w3.org/2000/svg', tagName);
-    if (match.groups['id']) {
-        el.id = match.groups['id'];
+    const tagName = match.groups["tag"] || "div";
+    const el = createElementNS("http://www.w3.org/2000/svg", tagName);
+    if (match.groups["id"]) {
+        el.id = match.groups["id"];
     }
     const classNames = [];
-    if (match.groups['class']) {
-        for (const className of match.groups['class'].split('.')) {
-            if (className !== '') {
+    if (match.groups["class"]) {
+        for (const className of match.groups["class"].split(".")) {
+            if (className !== "") {
                 classNames.push(className);
             }
         }
     }
     if (attributes.className !== undefined) {
-        for (const className of attributes.className.split('.')) {
-            if (className !== '') {
+        for (const className of attributes.className.split(".")) {
+            if (className !== "") {
                 classNames.push(className);
             }
         }
     }
     if (classNames.length > 0) {
-        el.className = classNames.join(' ');
+        el.className = classNames.join(" ");
     }
     const result = {};
-    if (match.groups['name']) {
-        result[match.groups['name']] = el;
+    if (match.groups["name"]) {
+        result[match.groups["name"]] = el;
     }
     if (children) {
         for (const c of children) {
             if (isHTMLElement(c)) {
                 el.appendChild(c);
-            }
-            else if (typeof c === 'string') {
+            } else if (typeof c === "string") {
                 el.append(c);
-            }
-            else if ('root' in c) {
+            } else if ("root" in c) {
                 Object.assign(result, c);
                 el.appendChild(c.root);
             }
         }
     }
     for (const [key, value] of Object.entries(attributes)) {
-        if (key === 'className') {
+        if (key === "className") {
             continue;
-        }
-        else if (key === 'style') {
+        } else if (key === "style") {
             for (const [cssKey, cssValue] of Object.entries(value)) {
-                el.style.setProperty(camelCaseToHyphenCase(cssKey), typeof cssValue === 'number' ? cssValue + 'px' : '' + cssValue);
+                el.style.setProperty(
+                    camelCaseToHyphenCase(cssKey),
+                    typeof cssValue === "number" ? cssValue + "px" : "" + cssValue
+                );
             }
-        }
-        else if (key === 'tabIndex') {
+        } else if (key === "tabIndex") {
             el.tabIndex = value;
-        }
-        else {
+        } else {
             el.setAttribute(camelCaseToHyphenCase(key), ( value.toString()));
         }
     }
-    result['root'] = el;
+    result["root"] = el;
     return result;
 }
 function camelCaseToHyphenCase(str) {
-    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
 function copyAttributes(from, to, filter) {
-    for (const { name, value } of from.attributes) {
+    for (const {
+        name,
+        value
+    } of from.attributes) {
         if (!filter || filter.includes(name)) {
             to.setAttribute(name, value);
         }
@@ -1449,17 +1569,19 @@ function copyAttribute(from, to, name) {
     const value = from.getAttribute(name);
     if (value) {
         to.setAttribute(name, value);
-    }
-    else {
+    } else {
         to.removeAttribute(name);
     }
 }
 function trackAttributes(from, to, filter) {
     copyAttributes(from, to, filter);
     const disposables = ( new DisposableStore());
-    disposables.add(sharedMutationObserver.observe(from, disposables, { attributes: true, attributeFilter: filter })(mutations => {
+    disposables.add(sharedMutationObserver.observe(from, disposables, {
+        attributes: true,
+        attributeFilter: filter
+    })(mutations => {
         for (const mutation of mutations) {
-            if (mutation.type === 'attributes' && mutation.attributeName) {
+            if (mutation.type === "attributes" && mutation.attributeName) {
                 copyAttribute(from, to, mutation.attributeName);
             }
         }
@@ -1467,14 +1589,19 @@ function trackAttributes(from, to, filter) {
     return disposables;
 }
 function isEditableElement(element) {
-    return element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'textarea' || isHTMLElement(element) && !!element.editContext;
+    return element.tagName.toLowerCase() === "input" || element.tagName.toLowerCase() === "textarea" || isHTMLElement(element) && !!element.editContext;
 }
 class SafeTriangle {
     constructor(originX, originY, target) {
         this.originX = originX;
         this.originY = originY;
         this.points = ( new Int16Array(8));
-        const { top, left, right, bottom } = target.getBoundingClientRect();
+        const {
+            top,
+            left,
+            right,
+            bottom
+        } = target.getBoundingClientRect();
         const t = this.points;
         let i = 0;
         t[i++] = left;
@@ -1487,11 +1614,24 @@ class SafeTriangle {
         t[i++] = bottom;
     }
     contains(x, y) {
-        const { points, originX, originY } = this;
+        const {
+            points,
+            originX,
+            originY
+        } = this;
         for (let i = 0; i < 4; i++) {
             const p1 = 2 * i;
             const p2 = 2 * ((i + 1) % 4);
-            if (isPointWithinTriangle(x, y, originX, originY, points[p1], points[p1 + 1], points[p2], points[p2 + 1])) {
+            if (isPointWithinTriangle(
+                x,
+                y,
+                originX,
+                originY,
+                points[p1],
+                points[p1 + 1],
+                points[p2],
+                points[p2 + 1]
+            )) {
                 return true;
             }
         }
@@ -1499,7 +1639,7 @@ class SafeTriangle {
     }
 }
 var n;
-(function (n) {
+(function(n) {
     function nodeNs(elementNs = undefined) {
         return (tag, attributes, children) => {
             const className = attributes.class;
@@ -1517,20 +1657,20 @@ var n;
             return f(tag, attributes, children);
         };
     }
-    n.div = node('div');
+    n.div = node("div");
     n.elem = nodeNs(undefined);
-    n.svg = node('svg', 'http://www.w3.org/2000/svg');
-    n.svgElem = nodeNs('http://www.w3.org/2000/svg');
+    n.svg = node("svg", "http://www.w3.org/2000/svg");
+    n.svgElem = nodeNs("http://www.w3.org/2000/svg");
     function ref() {
         let value = undefined;
-        const result = function (val) {
+        const result = function(val) {
             value = val;
         };
-        Object.defineProperty(result, 'element', {
+        Object.defineProperty(result, "element", {
             get() {
                 if (!value) {
                     throw ( new BugIndicatingError(
-                        'Make sure the ref is set before accessing the element. Maybe wrong initialization order?'
+                        "Make sure the ref is set before accessing the element. Maybe wrong initialization order?"
                     ));
                 }
                 return value;
@@ -1550,7 +1690,7 @@ class ObserverNode {
             ref(this._element);
         }
         if (obsRef) {
-            this._deriveds.push(derived((_reader) => {
+            this._deriveds.push(derived(_reader => {
                 obsRef(this);
                 _reader.store.add({
                     dispose: () => {
@@ -1564,45 +1704,44 @@ class ObserverNode {
                 this._deriveds.push(derived(this, reader => {
                     setClassName(this._element, getClassName(className, reader));
                 }));
-            }
-            else {
+            } else {
                 setClassName(this._element, getClassName(className, undefined));
             }
         }
         for (const [key, value] of Object.entries(attributes)) {
-            if (key === 'style') {
+            if (key === "style") {
                 for (const [cssKey, cssValue] of Object.entries(value)) {
                     const key = camelCaseToHyphenCase(cssKey);
                     if (isObservable(cssValue)) {
-                        this._deriveds.push(derivedOpts({ owner: this, debugName: () => `set.style.${key}` }, reader => {
+                        this._deriveds.push(derivedOpts({
+                            owner: this,
+                            debugName: () => `set.style.${key}`
+                        }, reader => {
                             this._element.style.setProperty(key, convertCssValue(cssValue.read(reader)));
                         }));
-                    }
-                    else {
+                    } else {
                         this._element.style.setProperty(key, convertCssValue(cssValue));
                     }
                 }
-            }
-            else if (key === 'tabIndex') {
+            } else if (key === "tabIndex") {
                 if (isObservable(value)) {
                     this._deriveds.push(derived(this, reader => {
                         this._element.tabIndex = value.read(reader);
                     }));
-                }
-                else {
+                } else {
                     this._element.tabIndex = value;
                 }
-            }
-            else if (key.startsWith('on')) {
+            } else if (key.startsWith("on")) {
                 this._element[key] = value;
-            }
-            else {
+            } else {
                 if (isObservable(value)) {
-                    this._deriveds.push(derivedOpts({ owner: this, debugName: () => `set.${key}` }, reader => {
+                    this._deriveds.push(derivedOpts({
+                        owner: this,
+                        debugName: () => `set.${key}`
+                    }, reader => {
                         setOrRemoveAttribute(this._element, key, value.read(reader));
                     }));
-                }
-                else {
+                } else {
                     setOrRemoveAttribute(this._element, key, value);
                 }
             }
@@ -1653,9 +1792,9 @@ class ObserverNode {
     }
     get isHovered() {
         if (!this._isHovered) {
-            const hovered = observableValue('hovered', false);
-            this._element.addEventListener('mouseenter', (_e) => hovered.set(true, undefined));
-            this._element.addEventListener('mouseleave', (_e) => hovered.set(false, undefined));
+            const hovered = observableValue("hovered", false);
+            this._element.addEventListener("mouseenter", _e => hovered.set(true, undefined));
+            this._element.addEventListener("mouseleave", _e => hovered.set(false, undefined));
             this._isHovered = hovered;
         }
         return this._isHovered;
@@ -1663,16 +1802,16 @@ class ObserverNode {
     get didMouseMoveDuringHover() {
         if (!this._didMouseMoveDuringHover) {
             let _hovering = false;
-            const hovered = observableValue('didMouseMoveDuringHover', false);
-            this._element.addEventListener('mouseenter', (_e) => {
+            const hovered = observableValue("didMouseMoveDuringHover", false);
+            this._element.addEventListener("mouseenter", _e => {
                 _hovering = true;
             });
-            this._element.addEventListener('mousemove', (_e) => {
+            this._element.addEventListener("mousemove", _e => {
                 if (_hovering) {
                     hovered.set(true, undefined);
                 }
             });
-            this._element.addEventListener('mouseleave', (_e) => {
+            this._element.addEventListener("mouseleave", _e => {
                 _hovering = false;
                 hovered.set(false, undefined);
             });
@@ -1683,9 +1822,8 @@ class ObserverNode {
 }
 function setClassName(domNode, className) {
     if (isSVGElement(domNode)) {
-        domNode.setAttribute('class', className);
-    }
-    else {
+        domNode.setAttribute("class", className);
+    } else {
         domNode.className = className;
     }
 }
@@ -1703,14 +1841,13 @@ function resolve(value, reader, cb) {
     cb(value);
 }
 function getClassName(className, reader) {
-    let result = '';
+    let result = "";
     resolve(className, reader, val => {
         if (val) {
             if (result.length === 0) {
                 result = val;
-            }
-            else {
-                result += ' ' + val;
+            } else {
+                result += " " + val;
             }
         }
     });
@@ -1726,8 +1863,8 @@ function hasObservable(value) {
     return false;
 }
 function convertCssValue(value) {
-    if (typeof value === 'number') {
-        return value + 'px';
+    if (typeof value === "number") {
+        return value + "px";
     }
     return value;
 }
@@ -1757,10 +1894,20 @@ class ObserverNodeWithElement extends ObserverNode {
 function setOrRemoveAttribute(element, key, value) {
     if (value === null || value === undefined) {
         element.removeAttribute(camelCaseToHyphenCase(key));
-    }
-    else {
+    } else {
         element.setAttribute(camelCaseToHyphenCase(key), String(value));
     }
 }
+class ConnectionObserverElement extends HTMLElement {
+    disconnectedCallback() {
+        this.onDidDisconnect?.();
+    }
+    connectedCallback() {
+        this.onDidConnect?.();
+    }
+}
+if (!customElements.get("connection-observer")) {
+    customElements.define("connection-observer", ConnectionObserverElement);
+}
 
-export { $, DetectedFullscreenMode, Dimension, DragAndDropObserver, EventHelper, EventType, LiveElement, ModifierKeyEmitter, Namespace, ObserverNode, ObserverNodeWithElement, SafeTriangle, WindowIdleValue, WindowIntervalTimer, addDisposableGenericMouseDownListener, addDisposableGenericMouseMoveListener, addDisposableGenericMouseUpListener, addDisposableListener, addDisposableThrottledListener, addStandardDisposableGenericMouseDownListener, addStandardDisposableGenericMouseUpListener, addStandardDisposableListener, after, animate, append, clearNode, computeScreenAwareSize, copyAttributes, createDocumentFragment, createElement, createElementNS, createLinkElement, createMetaElement, createTextNode, detectFullscreen, disposableWindowInterval, finalHandler, findParentWithClass, getActiveDocument, getActiveElement, getActiveWindow, getClientArea, getComputedStyle, getContentHeight, getContentWidth, getDocument, getDomNodePagePosition, getDomNodeZoomLevel, getFullscreenElement, getLargestChildWidth, getRootContainer, getShadowRoot, getTopLeftOffset, getTotalHeight, getTotalScrollWidth, getTotalWidth, getWindow, getWindowById, getWindowId, getWindows, getWindowsCount, h, hasParentWithClass, hide, isActiveDocument, isActiveElement, isAncestor, isAncestorOfActiveElement, isAncestorUsingFlowTo, isDragEvent, isEditableElement, isElement, isElementInBottomRightQuarter, isEventLike, isHTMLAnchorElement, isHTMLButtonElement, isHTMLDivElement, isHTMLElement, isHTMLIframeElement, isHTMLInputElement, isHTMLTextAreaElement, isInShadowDOM, isKeyboardEvent, isMouseEvent, isPointerEvent, isSVGElement, isShadowRoot, measure, modify, n, onDidRegisterWindow, onDidUnregisterWindow, onWillUnregisterWindow, position, prepend, registerWindow, reset, restoreParentsScrollTop, runAtThisOrScheduleAtNextAnimationFrame, runWhenWindowIdle, saveParentsScrollTop, scheduleAtNextAnimationFrame, setParentFlowTo, setVisibility, sharedMutationObserver, show, size, svgElem, trackActiveElement, trackAttributes, trackFocus, triggerDownload, triggerNotification, triggerUpload, windowOpenNoOpener, windowOpenPopup, windowOpenWithSuccess };
+export { $, AnimationFrameScheduler, ConnectionObserverElement, DetectedFullscreenMode, Dimension, DisposableResizeObserver, DragAndDropObserver, EventHelper, EventType, LiveElement, ModifierKeyEmitter, Namespace, ObserverNode, ObserverNodeWithElement, SafeTriangle, WindowIdleValue, WindowIntervalTimer, addDisposableGenericMouseDownListener, addDisposableGenericMouseMoveListener, addDisposableGenericMouseUpListener, addDisposableListener, addDisposableThrottledListener, addStandardDisposableGenericMouseDownListener, addStandardDisposableGenericMouseUpListener, addStandardDisposableListener, after, animate, append, clearNode, computeScreenAwareSize, copyAttributes, createDocumentFragment, createElement, createElementNS, createLinkElement, createMetaElement, createTextNode, detectFullscreen, disposableWindowInterval, finalHandler, findParentWithClass, getActiveDocument, getActiveElement, getActiveWindow, getClientArea, getComputedStyle, getContentHeight, getContentWidth, getDocument, getDomNodePagePosition, getDomNodeZoomLevel, getExternalFocusWindow, getFullscreenElement, getLargestChildWidth, getRootContainer, getShadowRoot, getTopLeftOffset, getTotalHeight, getTotalScrollWidth, getTotalWidth, getWindow, getWindowById, getWindowId, getWindows, getWindowsCount, h, hasAppFocus, hasExternalFocus, hasParentWithClass, hide, isActiveDocument, isActiveElement, isAncestor, isAncestorOfActiveElement, isAncestorUsingFlowTo, isDragEvent, isEditableElement, isElement, isElementInBottomRightQuarter, isEventLike, isHTMLAnchorElement, isHTMLButtonElement, isHTMLDivElement, isHTMLElement, isHTMLIframeElement, isHTMLInputElement, isHTMLTextAreaElement, isInShadowDOM, isKeyboardEvent, isMouseEvent, isPointerEvent, isSVGElement, isShadowRoot, measure, modify, n, onDidRegisterWindow, onDidUnregisterWindow, onWillUnregisterWindow, position, prepend, registerWindow, reset, restoreParentsScrollTop, runAtThisOrScheduleAtNextAnimationFrame, runWhenWindowIdle, saveParentsScrollTop, scheduleAtNextAnimationFrame, setParentFlowTo, setVisibility, sharedMutationObserver, show, size, svgElem, trackActiveElement, trackAttributes, trackFocus, triggerDownload, triggerNotification, triggerUpload, windowOpenNoOpener, windowOpenPopup, windowOpenWithSuccess };