@xterm/xterm 6.1.0-beta.18 → 6.1.0-beta.180

package/src/browser/scrollable/touch.ts

@@ -0,0 +1,481 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as DomUtils from '../Dom';
+import { Disposable, IDisposable, toDisposable } from 'common/Lifecycle';
+
+const mainWindow = (typeof window === 'object' ? window : globalThis) as Window & typeof globalThis;
+
+function tail<T>(array: ArrayLike<T>, n: number = 0): T | undefined {
+  return array[array.length - (1 + n)];
+}
+
+function memoize(_target: any, key: string, descriptor: PropertyDescriptor): void {
+  let fnKey: string | null = null;
+  let fn: Function | null = null;
+
+  if (typeof descriptor.value === 'function') {
+    fnKey = 'value';
+    fn = descriptor.value;
+
+    if (fn!.length !== 0) {
+      console.warn('Memoize should only be used in functions with zero parameters');
+    }
+  } else if (typeof descriptor.get === 'function') {
+    fnKey = 'get';
+    fn = descriptor.get;
+  }
+
+  if (!fn || !fnKey) {
+    throw new Error('not supported');
+  }
+
+  const memoizeKey = `$memoize$${key}`;
+  const descriptorAny = descriptor as { [key: string]: any };
+  descriptorAny[fnKey] = function (...args: any[]) {
+    if (!this.hasOwnProperty(memoizeKey)) {
+      Object.defineProperty(this, memoizeKey, {
+        configurable: false,
+        enumerable: false,
+        writable: false,
+        value: fn.apply(this, args)
+      });
+    }
+
+    return (this as { [key: string]: any })[memoizeKey];
+  };
+}
+
+class LinkedListNode<E> {
+
+  public static readonly Undefined = new LinkedListNode<any>(undefined);
+
+  public element: E;
+  public next: LinkedListNode<E>;
+  public prev: LinkedListNode<E>;
+
+  public constructor(element: E) {
+    this.element = element;
+    this.next = LinkedListNode.Undefined;
+    this.prev = LinkedListNode.Undefined;
+  }
+}
+
+class LinkedList<E> {
+
+  private _first: LinkedListNode<E> = LinkedListNode.Undefined;
+  private _last: LinkedListNode<E> = LinkedListNode.Undefined;
+
+  public push(element: E): () => void {
+    return this._insert(element, true);
+  }
+
+  private _insert(element: E, atTheEnd: boolean): () => void {
+    const newNode = new LinkedListNode(element);
+    if (this._first === LinkedListNode.Undefined) {
+      this._first = newNode;
+      this._last = newNode;
+
+    } else if (atTheEnd) {
+      const oldLast = this._last;
+      this._last = newNode;
+      newNode.prev = oldLast;
+      oldLast.next = newNode;
+
+    } else {
+      const oldFirst = this._first;
+      this._first = newNode;
+      newNode.next = oldFirst;
+      oldFirst.prev = newNode;
+    }
+    let didRemove = false;
+    return () => {
+      if (!didRemove) {
+        didRemove = true;
+        this._remove(newNode);
+      }
+    };
+  }
+
+  private _remove(node: LinkedListNode<E>): void {
+    if (node.prev !== LinkedListNode.Undefined && node.next !== LinkedListNode.Undefined) {
+      const anchor = node.prev;
+      anchor.next = node.next;
+      node.next.prev = anchor;
+
+    } else if (node.prev === LinkedListNode.Undefined && node.next === LinkedListNode.Undefined) {
+      this._first = LinkedListNode.Undefined;
+      this._last = LinkedListNode.Undefined;
+
+    } else if (node.next === LinkedListNode.Undefined) {
+      this._last = this._last.prev!;
+      this._last.next = LinkedListNode.Undefined;
+
+    } else if (node.prev === LinkedListNode.Undefined) {
+      this._first = this._first.next!;
+      this._first.prev = LinkedListNode.Undefined;
+    }
+  }
+
+  public *[Symbol.iterator](): Iterator<E> {
+    let node = this._first;
+    while (node !== LinkedListNode.Undefined) {
+      yield node.element;
+      node = node.next;
+    }
+  }
+}
+
+export namespace EventType {
+  export const TAP = '-xterm-gesturetap';
+  export const CHANGE = '-xterm-gesturechange';
+  export const START = '-xterm-gesturestart';
+  export const END = '-xterm-gesturesend';
+  export const CONTEXT_MENU = '-xterm-gesturecontextmenu';
+}
+
+interface ITouchData {
+  id: number;
+  initialTarget: EventTarget;
+  initialTimeStamp: number;
+  initialPageX: number;
+  initialPageY: number;
+  rollingTimestamps: number[];
+  rollingPageX: number[];
+  rollingPageY: number[];
+}
+
+export interface IGestureEvent extends MouseEvent {
+  initialTarget: EventTarget | undefined;
+  translationX: number;
+  translationY: number;
+  pageX: number;
+  pageY: number;
+  tapCount: number;
+}
+
+interface ITouch {
+  identifier: number;
+  screenX: number;
+  screenY: number;
+  clientX: number;
+  clientY: number;
+  pageX: number;
+  pageY: number;
+  radiusX: number;
+  radiusY: number;
+  rotationAngle: number;
+  force: number;
+  target: Element;
+}
+
+interface ITouchList {
+  [i: number]: ITouch;
+  length: number;
+  item(index: number): ITouch;
+  identifiedTouch(id: number): ITouch;
+}
+
+interface ITouchEvent extends Event {
+  touches: ITouchList;
+  targetTouches: ITouchList;
+  changedTouches: ITouchList;
+}
+
+export class Gesture extends Disposable {
+
+  private static readonly _scrollFriction = -0.005;
+  private static _instance: Gesture;
+  private static readonly _holdDelay = 700;
+
+  private _dispatched = false;
+  private readonly _targets = new LinkedList<HTMLElement>();
+  private readonly _ignoreTargets = new LinkedList<HTMLElement>();
+  private _handle: IDisposable | null;
+
+  private readonly _activeTouches: { [id: number]: ITouchData };
+
+  private _lastSetTapCountTime: number;
+
+  private static readonly _clearTapCountTime = 400; // ms
+
+
+  private constructor() {
+    super();
+
+    this._activeTouches = {};
+    this._handle = null;
+    this._lastSetTapCountTime = 0;
+
+    const targetWindow = mainWindow;
+    this._register(DomUtils.addDisposableListener(targetWindow.document, 'touchstart', (e: ITouchEvent) => this._handleTouchStart(e), { passive: false }));
+    this._register(DomUtils.addDisposableListener(targetWindow.document, 'touchend', (e: ITouchEvent) => this._handleTouchEnd(targetWindow, e)));
+    this._register(DomUtils.addDisposableListener(targetWindow.document, 'touchmove', (e: ITouchEvent) => this._handleTouchMove(e), { passive: false }));
+  }
+
+  public static addTarget(element: HTMLElement): IDisposable {
+    if (!Gesture.isTouchDevice()) {
+      return Disposable.None;
+    }
+    if (!Gesture._instance) {
+      Gesture._instance = new Gesture();
+    }
+
+    const remove = Gesture._instance._targets.push(element);
+    return toDisposable(remove);
+  }
+
+  public static ignoreTarget(element: HTMLElement): IDisposable {
+    if (!Gesture.isTouchDevice()) {
+      return Disposable.None;
+    }
+    if (!Gesture._instance) {
+      Gesture._instance = new Gesture();
+    }
+
+    const remove = Gesture._instance._ignoreTargets.push(element);
+    return toDisposable(remove);
+  }
+
+  @memoize
+  public static isTouchDevice(): boolean {
+    return 'ontouchstart' in mainWindow || navigator.maxTouchPoints > 0;
+  }
+
+  public override dispose(): void {
+    if (this._handle) {
+      this._handle.dispose();
+      this._handle = null;
+    }
+
+    super.dispose();
+  }
+
+  private _handleTouchStart(e: ITouchEvent): void {
+    const timestamp = Date.now();
+
+    if (this._handle) {
+      this._handle.dispose();
+      this._handle = null;
+    }
+
+    for (let i = 0, len = e.targetTouches.length; i < len; i++) {
+      const touch = e.targetTouches.item(i);
+
+      this._activeTouches[touch.identifier] = {
+        id: touch.identifier,
+        initialTarget: touch.target,
+        initialTimeStamp: timestamp,
+        initialPageX: touch.pageX,
+        initialPageY: touch.pageY,
+        rollingTimestamps: [timestamp],
+        rollingPageX: [touch.pageX],
+        rollingPageY: [touch.pageY]
+      };
+
+      const evt = this._newGestureEvent(EventType.START, touch.target);
+      evt.pageX = touch.pageX;
+      evt.pageY = touch.pageY;
+      this._dispatchEvent(evt);
+    }
+
+    if (this._dispatched) {
+      e.preventDefault();
+      e.stopPropagation();
+      this._dispatched = false;
+    }
+  }
+
+  private _handleTouchEnd(targetWindow: Window, e: ITouchEvent): void {
+    const timestamp = Date.now();
+
+    const activeTouchCount = Object.keys(this._activeTouches).length;
+
+    for (let i = 0, len = e.changedTouches.length; i < len; i++) {
+
+      const touch = e.changedTouches.item(i);
+
+      if (!this._activeTouches.hasOwnProperty(String(touch.identifier))) {
+        console.warn('move of an UNKNOWN touch', touch);
+        continue;
+      }
+
+      const data = this._activeTouches[touch.identifier];
+      const holdTime = Date.now() - data.initialTimeStamp;
+
+      if (holdTime < Gesture._holdDelay
+        && Math.abs(data.initialPageX - tail(data.rollingPageX)!) < 30
+        && Math.abs(data.initialPageY - tail(data.rollingPageY)!) < 30) {
+
+        const evt = this._newGestureEvent(EventType.TAP, data.initialTarget);
+        evt.pageX = tail(data.rollingPageX)!;
+        evt.pageY = tail(data.rollingPageY)!;
+        this._dispatchEvent(evt);
+
+      } else if (holdTime >= Gesture._holdDelay
+				&& Math.abs(data.initialPageX - tail(data.rollingPageX)!) < 30
+				&& Math.abs(data.initialPageY - tail(data.rollingPageY)!) < 30) {
+
+        const evt = this._newGestureEvent(EventType.CONTEXT_MENU, data.initialTarget);
+        evt.pageX = tail(data.rollingPageX)!;
+        evt.pageY = tail(data.rollingPageY)!;
+        this._dispatchEvent(evt);
+
+      } else if (activeTouchCount === 1) {
+        const finalX = tail(data.rollingPageX)!;
+        const finalY = tail(data.rollingPageY)!;
+
+        const deltaT = tail(data.rollingTimestamps)! - data.rollingTimestamps[0];
+        const deltaX = finalX - data.rollingPageX[0];
+        const deltaY = finalY - data.rollingPageY[0];
+
+        const dispatchTo = [...this._targets].filter(t => data.initialTarget instanceof Node && t.contains(data.initialTarget));
+        this._inertia(targetWindow, dispatchTo, timestamp,
+          Math.abs(deltaX) / deltaT,
+          deltaX > 0 ? 1 : -1,
+          finalX,
+          Math.abs(deltaY) / deltaT,
+          deltaY > 0 ? 1 : -1,
+          finalY
+        );
+      }
+
+
+      this._dispatchEvent(this._newGestureEvent(EventType.END, data.initialTarget));
+      delete this._activeTouches[touch.identifier];
+    }
+
+    if (this._dispatched) {
+      e.preventDefault();
+      e.stopPropagation();
+      this._dispatched = false;
+    }
+  }
+
+  private _newGestureEvent(type: string, initialTarget?: EventTarget): IGestureEvent {
+    const event = document.createEvent('CustomEvent') as unknown as IGestureEvent;
+    event.initEvent(type, false, true);
+    event.initialTarget = initialTarget;
+    event.tapCount = 0;
+    return event;
+  }
+
+  private _dispatchEvent(event: IGestureEvent): void {
+    if (event.type === EventType.TAP) {
+      const currentTime = (new Date()).getTime();
+      let setTapCount = 0;
+      if (currentTime - this._lastSetTapCountTime > Gesture._clearTapCountTime) {
+        setTapCount = 1;
+      } else {
+        setTapCount = 2;
+      }
+
+      this._lastSetTapCountTime = currentTime;
+      event.tapCount = setTapCount;
+    } else if (event.type === EventType.CHANGE || event.type === EventType.CONTEXT_MENU) {
+      this._lastSetTapCountTime = 0;
+    }
+
+    if (event.initialTarget instanceof Node) {
+      for (const ignoreTarget of this._ignoreTargets) {
+        if (ignoreTarget.contains(event.initialTarget)) {
+          return;
+        }
+      }
+
+      const targets: [number, HTMLElement][] = [];
+      for (const target of this._targets) {
+        if (target.contains(event.initialTarget)) {
+          let depth = 0;
+          let now: Node | null = event.initialTarget;
+          while (now && now !== target) {
+            depth++;
+            now = now.parentElement;
+          }
+          targets.push([depth, target]);
+        }
+      }
+
+      targets.sort((a, b) => a[0] - b[0]);
+
+      for (const [, target] of targets) {
+        target.dispatchEvent(event);
+        this._dispatched = true;
+      }
+    }
+  }
+
+  private _inertia(targetWindow: Window, dispatchTo: ReadonlyArray<EventTarget>, t1: number, vX: number, dirX: number, x: number, vY: number, dirY: number, y: number): void {
+    this._handle = DomUtils.scheduleAtNextAnimationFrame(targetWindow, () => {
+      const now = Date.now();
+
+      const deltaT = now - t1;
+      let deltaPosX = 0;
+      let deltaPosY = 0;
+      let stopped = true;
+
+      vX += Gesture._scrollFriction * deltaT;
+      vY += Gesture._scrollFriction * deltaT;
+
+      if (vX > 0) {
+        stopped = false;
+        deltaPosX = dirX * vX * deltaT;
+      }
+
+      if (vY > 0) {
+        stopped = false;
+        deltaPosY = dirY * vY * deltaT;
+      }
+
+      const evt = this._newGestureEvent(EventType.CHANGE);
+      evt.translationX = deltaPosX;
+      evt.translationY = deltaPosY;
+      dispatchTo.forEach(d => d.dispatchEvent(evt));
+
+      if (!stopped) {
+        this._inertia(targetWindow, dispatchTo, now, vX, dirX, x + deltaPosX, vY, dirY, y + deltaPosY);
+      }
+    });
+  }
+
+  private _handleTouchMove(e: ITouchEvent): void {
+    const timestamp = Date.now();
+
+    for (let i = 0, len = e.changedTouches.length; i < len; i++) {
+
+      const touch = e.changedTouches.item(i);
+
+      if (!this._activeTouches.hasOwnProperty(String(touch.identifier))) {
+        console.warn('end of an UNKNOWN touch', touch);
+        continue;
+      }
+
+      const data = this._activeTouches[touch.identifier];
+
+      const evt = this._newGestureEvent(EventType.CHANGE, data.initialTarget);
+      evt.translationX = touch.pageX - tail(data.rollingPageX)!;
+      evt.translationY = touch.pageY - tail(data.rollingPageY)!;
+      evt.pageX = touch.pageX;
+      evt.pageY = touch.pageY;
+      this._dispatchEvent(evt);
+
+      if (data.rollingPageX.length > 3) {
+        data.rollingPageX.shift();
+        data.rollingPageY.shift();
+        data.rollingTimestamps.shift();
+      }
+
+      data.rollingPageX.push(touch.pageX);
+      data.rollingPageY.push(touch.pageY);
+      data.rollingTimestamps.push(timestamp);
+    }
+
+    if (this._dispatched) {
+      e.preventDefault();
+      e.stopPropagation();
+      this._dispatched = false;
+    }
+  }
+}

package/src/browser/scrollable/verticalScrollbar.ts

@@ -0,0 +1,143 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { AbstractScrollbar, ISimplifiedPointerEvent, IScrollbarHost } from './abstractScrollbar';
+import { IScrollableElementResolvedOptions } from './scrollableElementOptions';
+import { ScrollbarState } from './scrollbarState';
+import { INewScrollPosition, Scrollable, ScrollbarVisibility, IScrollEvent } from './scrollable';
+import type { ScrollbarArrow } from './scrollbarArrow';
+
+export class VerticalScrollbar extends AbstractScrollbar {
+  private _arrowUp: ScrollbarArrow | undefined;
+  private _arrowDown: ScrollbarArrow | undefined;
+  private _arrowScrollDelta: number = 0;
+
+  constructor(scrollable: Scrollable, options: IScrollableElementResolvedOptions, host: IScrollbarHost) {
+    const scrollDimensions = scrollable.getScrollDimensions();
+    const scrollPosition = scrollable.getCurrentScrollPosition();
+    const hasArrows = options.verticalHasArrows;
+    super({
+      lazyRender: options.lazyRender,
+      host: host,
+      scrollbarState: new ScrollbarState(
+        (hasArrows ? options.verticalScrollbarSize : 0),
+        (options.vertical === ScrollbarVisibility.HIDDEN ? 0 : options.verticalScrollbarSize),
+        0,
+        scrollDimensions.height,
+        scrollDimensions.scrollHeight,
+        scrollPosition.scrollTop
+      ),
+      visibility: options.vertical,
+      extraScrollbarClassName: 'xterm-vertical',
+      scrollable: scrollable,
+      scrollByPage: options.scrollByPage
+    });
+
+    this._setArrows(hasArrows, options.verticalScrollbarSize);
+
+    this._createSlider(0, Math.floor((options.verticalScrollbarSize - options.verticalSliderSize) / 2), options.verticalSliderSize, undefined);
+  }
+
+  protected _updateSlider(sliderSize: number, sliderPosition: number): void {
+    this.slider.setHeight(sliderSize);
+    this.slider.setTop(sliderPosition);
+  }
+
+  protected _renderDomNode(largeSize: number, smallSize: number): void {
+    this.domNode.setWidth(smallSize);
+    this.domNode.setHeight(largeSize);
+    this.domNode.setRight(0);
+    this.domNode.setTop(0);
+  }
+
+  public handleScroll(e: IScrollEvent): boolean {
+    this._shouldRender = this._handleElementScrollSize(e.scrollHeight) || this._shouldRender;
+    this._shouldRender = this._handleElementScrollPosition(e.scrollTop) || this._shouldRender;
+    this._shouldRender = this._handleElementSize(e.height) || this._shouldRender;
+    return this._shouldRender;
+  }
+
+  protected _pointerDownRelativePosition(offsetX: number, offsetY: number): number {
+    return offsetY;
+  }
+
+  protected _sliderPointerPosition(e: ISimplifiedPointerEvent): number {
+    return e.pageY;
+  }
+
+  protected _sliderOrthogonalPointerPosition(e: ISimplifiedPointerEvent): number {
+    return e.pageX;
+  }
+
+  protected _updateScrollbarSize(size: number): void {
+    this.slider.setWidth(size);
+  }
+
+  public writeScrollPosition(target: INewScrollPosition, scrollPosition: number): void {
+    target.scrollTop = scrollPosition;
+  }
+
+  private _arrowScroll(delta: number): void {
+    const currentPosition = this._scrollable.getCurrentScrollPosition();
+    this._scrollable.setScrollPositionNow({ scrollTop: currentPosition.scrollTop + delta });
+  }
+
+  private _setArrows(showArrows: boolean, size: number): void {
+    this._arrowScrollDelta = size;
+    if (!this._arrowUp || !this._arrowDown) {
+      const arrowDelta = 0;
+      this._arrowUp = this._createArrow({
+        className: 'xterm-scra xterm-arrow-up',
+        top: arrowDelta,
+        left: arrowDelta,
+        bgWidth: size,
+        bgHeight: size,
+        handleActivate: () => this._arrowScroll(-this._arrowScrollDelta)
+      });
+      this._arrowDown = this._createArrow({
+        className: 'xterm-scra xterm-arrow-down',
+        bottom: arrowDelta,
+        left: arrowDelta,
+        bgWidth: size,
+        bgHeight: size,
+        handleActivate: () => this._arrowScroll(this._arrowScrollDelta)
+      });
+    }
+
+    this._updateArrowSize(this._arrowUp, size);
+    this._updateArrowSize(this._arrowDown, size);
+
+    if (!this._arrowUp || !this._arrowDown) {
+      return;
+    }
+
+    const display = showArrows ? '' : 'none';
+    this._arrowUp.bgDomNode.style.display = display;
+    this._arrowUp.domNode.style.display = display;
+    this._arrowDown.bgDomNode.style.display = display;
+    this._arrowDown.domNode.style.display = display;
+  }
+
+  private _updateArrowSize(arrow: ScrollbarArrow | undefined, size: number): void {
+    if (!arrow) {
+      return;
+    }
+    arrow.bgDomNode.style.width = `${size}px`;
+    arrow.bgDomNode.style.height = `${size}px`;
+    arrow.domNode.style.width = `${size}px`;
+    arrow.domNode.style.height = `${size}px`;
+  }
+
+  public updateOptions(options: IScrollableElementResolvedOptions): void {
+    const arrowSize = options.verticalHasArrows ? options.verticalScrollbarSize : 0;
+    this._scrollbarState.setArrowSize(arrowSize);
+    this._setArrows(options.verticalHasArrows, options.verticalScrollbarSize);
+    this.updateScrollbarSize(options.vertical === ScrollbarVisibility.HIDDEN ? 0 : options.verticalScrollbarSize);
+    this._scrollbarState.setOppositeScrollbarSize(0);
+    this._visibilityController.setVisibility(options.vertical);
+    this._scrollByPage = options.scrollByPage;
+  }
+
+}

package/src/browser/scrollable/widget.ts

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as dom from '../Dom';
+import { IMouseEvent, StandardMouseEvent } from './mouseEvent';
+import { Disposable } from 'common/Lifecycle';
+
+export abstract class Widget extends Disposable {
+
+  protected _onclick(domNode: HTMLElement, listener: (e: IMouseEvent) => void): void {
+    this._register(dom.addDisposableListener(domNode, dom.eventType.CLICK, (e: MouseEvent) => listener(new StandardMouseEvent(dom.getWindow(domNode), e))));
+  }
+
+  protected _onmouseover(domNode: HTMLElement, listener: (e: IMouseEvent) => void): void {
+    this._register(dom.addDisposableListener(domNode, dom.eventType.MOUSE_OVER, (e: MouseEvent) => listener(new StandardMouseEvent(dom.getWindow(domNode), e))));
+  }
+
+  protected _onmouseleave(domNode: HTMLElement, listener: (e: IMouseEvent) => void): void {
+    this._register(dom.addDisposableListener(domNode, dom.eventType.MOUSE_LEAVE, (e: MouseEvent) => listener(new StandardMouseEvent(dom.getWindow(domNode), e))));
+  }
+}

package/src/browser/services/CharSizeService.ts

@@ -5,8 +5,8 @@
 
 import { IOptionsService } from 'common/services/Services';
 import { ICharSizeService } from 'browser/services/Services';
-import { Disposable } from 'vs/base/common/lifecycle';
-import { Emitter } from 'vs/base/common/event';
+import { Disposable } from 'common/Lifecycle';
+import { Emitter } from 'common/Event';
 
 export class CharSizeService extends Disposable implements ICharSizeService {
   public serviceBrand: undefined;

package/src/browser/services/CoreBrowserService.ts

@@ -4,16 +4,16 @@
  */
 
 import { ICoreBrowserService } from './Services';
-import { Emitter, Event } from 'vs/base/common/event';
-import { addDisposableListener } from 'vs/base/browser/dom';
-import { Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
+import { Emitter, EventUtils } from 'common/Event';
+import { addDisposableListener } from 'browser/Dom';
+import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
 
 export class CoreBrowserService extends Disposable implements ICoreBrowserService {
   public serviceBrand: undefined;
 
   private _isFocused = false;
   private _cachedIsFocused: boolean | undefined = undefined;
-  private _screenDprMonitor = this._register(new ScreenDprMonitor(this._window));
+  private _screenDprMonitor: ScreenDprMonitor;
 
   private readonly _onDprChange = this._register(new Emitter<number>());
   public readonly onDprChange = this._onDprChange.event;
@@ -27,9 +27,11 @@ export class CoreBrowserService extends Disposable implements ICoreBrowserServic
   ) {
     super();
 
+    this._screenDprMonitor = this._register(new ScreenDprMonitor(this._window));
+
     // Monitor device pixel ratio
     this._register(this.onWindowChange(w => this._screenDprMonitor.setWindow(w)));
-    this._register(Event.forward(this._screenDprMonitor.onDprChange, this._onDprChange));
+    this._register(EventUtils.forward(this._screenDprMonitor.onDprChange, this._onDprChange));
 
     this._register(addDisposableListener(this._textarea, 'focus', () => this._isFocused = true));
     this._register(addDisposableListener(this._textarea, 'blur', () => this._isFocused = false));