ckaczor/azuredatastudio
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge vscode 1.67 (#20883)

Browse Source 
* Fix initial build breaks from 1.67 merge (#2514)

* Update yarn lock files

* Update build scripts

* Fix tsconfig

* Build breaks

* WIP

* Update yarn lock files

* Misc breaks

* Updates to package.json

* Breaks

* Update yarn

* Fix breaks

* Breaks

* Build breaks

* Breaks

* Breaks

* Breaks

* Breaks

* Breaks

* Missing file

* Breaks

* Breaks

* Breaks

* Breaks

* Breaks

* Fix several runtime breaks (#2515)

* Missing files

* Runtime breaks

* Fix proxy ordering issue

* Remove commented code

* Fix breaks with opening query editor

* Fix post merge break

* Updates related to setup build and other breaks (#2516)

* Fix bundle build issues

* Update distro

* Fix distro merge and update build JS files

* Disable pipeline steps

* Remove stats call

* Update license name

* Make new RPM dependencies a warning

* Fix extension manager version checks

* Update JS file

* Fix a few runtime breaks

* Fixes

* Fix runtime issues

* Fix build breaks

* Update notebook tests (part 1)

* Fix broken tests

* Linting errors

* Fix hygiene

* Disable lint rules

* Bump distro

* Turn off smoke tests

* Disable integration tests

* Remove failing "activate" test

* Remove failed test assertion

* Disable other broken test

* Disable query history tests

* Disable extension unit tests

* Disable failing tasks
This commit is contained in:
Karl Burtram
2022-10-19 19:13:18 -07:00
committed by GitHub
parent 33c6daaea1
commit 8a3d08f0de
3738 changed files with 192313 additions and 107208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/base/browser/browser.ts
+122 -36
View File
@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { Emitter, Event } from 'vs/base/common/event';
import { IDisposable } from 'vs/base/common/lifecycle';
import { Disposable, markAsSingleton } from 'vs/base/common/lifecycle';
class WindowManager {
@@ -12,25 +12,15 @@ class WindowManager {
// --- Zoom Level
private _zoomLevel: number = 0;
private _lastZoomLevelChangeTime: number = 0;
private readonly _onDidChangeZoomLevel = new Emitter<number>();
public readonly onDidChangeZoomLevel: Event<number> = this._onDidChangeZoomLevel.event;
public getZoomLevel(): number {
return this._zoomLevel;
}
public getTimeSinceLastZoomLevelChanged(): number {
return Date.now() - this._lastZoomLevelChangeTime;
}
public setZoomLevel(zoomLevel: number, isTrusted: boolean): void {
if (this._zoomLevel === zoomLevel) {
return;
}
this._zoomLevel = zoomLevel;
// See https://github.com/microsoft/vscode/issues/26151
this._lastZoomLevelChangeTime = isTrusted ? 0 : Date.now();
this._onDidChangeZoomLevel.fire(this._zoomLevel);
}
// --- Zoom Factor
@@ -43,18 +33,6 @@ class WindowManager {
this._zoomFactor = zoomFactor;
}
// --- Pixel Ratio
public getPixelRatio(): number {
let ctx: any = document.createElement('canvas').getContext('2d');
let dpr = window.devicePixelRatio || 1;
let bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
return dpr / bsr;
}
// --- Fullscreen
private _fullscreen: boolean = false;
private readonly _onDidChangeFullscreen = new Emitter<void>();
@@ -73,6 +51,115 @@ class WindowManager {
}
}
/**
* See https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes
*/
class DevicePixelRatioMonitor extends Disposable {
private readonly _onDidChange = this._register(new Emitter<void>());
public readonly onDidChange = this._onDidChange.event;
private readonly _listener: () => void;
private _mediaQueryList: MediaQueryList | null;
constructor() {
super();
this._listener = () => this._handleChange(true);
this._mediaQueryList = null;
this._handleChange(false);
}
private _handleChange(fireEvent: boolean): void {
if (this._mediaQueryList) {
this._mediaQueryList.removeEventListener('change', this._listener);
}
this._mediaQueryList = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
this._mediaQueryList.addEventListener('change', this._listener);
if (fireEvent) {
this._onDidChange.fire();
}
}
}
class PixelRatioImpl extends Disposable {
private readonly _onDidChange = this._register(new Emitter<number>());
public readonly onDidChange = this._onDidChange.event;
private _value: number;
public get value(): number {
return this._value;
}
constructor() {
super();
this._value = this._getPixelRatio();
const dprMonitor = this._register(new DevicePixelRatioMonitor());
this._register(dprMonitor.onDidChange(() => {
this._value = this._getPixelRatio();
this._onDidChange.fire(this._value);
}));
}
private _getPixelRatio(): number {
const ctx: any = document.createElement('canvas').getContext('2d');
const dpr = window.devicePixelRatio || 1;
const bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
return dpr / bsr;
}
}
class PixelRatioFacade {
private _pixelRatioMonitor: PixelRatioImpl | null = null;
private _getOrCreatePixelRatioMonitor(): PixelRatioImpl {
if (!this._pixelRatioMonitor) {
this._pixelRatioMonitor = markAsSingleton(new PixelRatioImpl());
}
return this._pixelRatioMonitor;
}
/**
* Get the current value.
*/
public get value(): number {
return this._getOrCreatePixelRatioMonitor().value;
}
/**
* Listen for changes.
*/
public get onDidChange(): Event<number> {
return this._getOrCreatePixelRatioMonitor().onDidChange;
}
}
export function addMatchMediaChangeListener(query: string | MediaQueryList, callback: (this: MediaQueryList, ev: MediaQueryListEvent) => any): void {
if (typeof query === 'string') {
query = window.matchMedia(query);
}
query.addEventListener('change', callback);
}
/**
* Returns the pixel ratio.
*
* This is useful for rendering <canvas> elements at native screen resolution or for being used as
* a cache key when storing font measurements. Fonts might render differently depending on resolution
* and any measurements need to be discarded for example when a window is moved from a monitor to another.
*/
export const PixelRatio = new PixelRatioFacade();
/** A zoom index, e.g. 1, 2, 3 */
export function setZoomLevel(zoomLevel: number, isTrusted: boolean): void {
WindowManager.INSTANCE.setZoomLevel(zoomLevel, isTrusted);
@@ -80,13 +167,6 @@ export function setZoomLevel(zoomLevel: number, isTrusted: boolean): void {
export function getZoomLevel(): number {
return WindowManager.INSTANCE.getZoomLevel();
}
/** Returns the time (in ms) since the zoom level was changed */
export function getTimeSinceLastZoomLevelChanged(): number {
return WindowManager.INSTANCE.getTimeSinceLastZoomLevelChanged();
}
export function onDidChangeZoomLevel(callback: (zoomLevel: number) => void): IDisposable {
return WindowManager.INSTANCE.onDidChangeZoomLevel(callback);
}
/** The zoom scale for an index, e.g. 1, 1.2, 1.4 */
export function getZoomFactor(): number {
@@ -96,10 +176,6 @@ export function setZoomFactor(zoomFactor: number): void {
WindowManager.INSTANCE.setZoomFactor(zoomFactor);
}
export function getPixelRatio(): number {
return WindowManager.INSTANCE.getPixelRatio();
}
export function setFullscreen(fullscreen: boolean): void {
WindowManager.INSTANCE.setFullscreen(fullscreen);
}
@@ -115,7 +191,17 @@ export const isWebKit = (userAgent.indexOf('AppleWebKit') >= 0);
export const isChrome = (userAgent.indexOf('Chrome') >= 0);
export const isSafari = (!isChrome && (userAgent.indexOf('Safari') >= 0));
export const isWebkitWebView = (!isChrome && !isSafari && isWebKit);
export const isEdgeLegacyWebView = (userAgent.indexOf('Edge/') >= 0) && (userAgent.indexOf('WebView/') >= 0);
export const isElectron = (userAgent.indexOf('Electron/') >= 0);
export const isAndroid = (userAgent.indexOf('Android') >= 0);
export const isStandalone = (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches);
let standalone = false;
if (window.matchMedia) {
const matchMedia = window.matchMedia('(display-mode: standalone)');
standalone = matchMedia.matches;
addMatchMediaChangeListener(matchMedia, ({ matches }) => {
standalone = matches;
});
}
export function isStandalone(): boolean {
return standalone;
}
src/vs/base/browser/canIUse.ts
+1 -1
View File
@@ -28,7 +28,7 @@ export const BrowserFeatures = {
)
},
keyboard: (() => {
if (platform.isNative || browser.isStandalone) {
if (platform.isNative || browser.isStandalone()) {
return KeyboardSupport.Always;
}
src/vs/base/browser/contextmenu.ts
+1 -1
View File
@@ -16,7 +16,7 @@ export interface IContextMenuEvent {
}
export interface IContextMenuDelegate {
getAnchor(): HTMLElement | { x: number; y: number; width?: number; height?: number; };
getAnchor(): HTMLElement | { x: number; y: number; width?: number; height?: number };
getActions(): readonly IAction[];
getCheckedActionsRepresentation?(action: IAction): 'radio' | 'checkbox';
getActionViewItem?(action: IAction): IActionViewItem | undefined;
src/vs/base/worker/defaultWorkerFactory.ts → src/vs/base/browser/defaultWorkerFactory.ts
+5 -5
View File
@@ -8,21 +8,21 @@ import { IWorker, IWorkerCallback, IWorkerFactory, logOnceWebWorkerWarning } fro
const ttPolicy = window.trustedTypes?.createPolicy('defaultWorkerFactory', { createScriptURL: value => value });
function getWorker(workerId: string, label: string): Worker | Promise<Worker> {
function getWorker(label: string): Worker | Promise<Worker> {
// Option for hosts to overwrite the worker script (used in the standalone editor)
if (globals.MonacoEnvironment) {
if (typeof globals.MonacoEnvironment.getWorker === 'function') {
return globals.MonacoEnvironment.getWorker(workerId, label);
return globals.MonacoEnvironment.getWorker('workerMain.js', label);
}
if (typeof globals.MonacoEnvironment.getWorkerUrl === 'function') {
const workerUrl = <string>globals.MonacoEnvironment.getWorkerUrl(workerId, label);
const workerUrl = <string>globals.MonacoEnvironment.getWorkerUrl('workerMain.js', label);
return new Worker(ttPolicy ? ttPolicy.createScriptURL(workerUrl) as unknown as string : workerUrl, { name: label });
}
}
// ESM-comment-begin
if (typeof require === 'function') {
// check if the JS lives on a different origin
const workerMain = require.toUrl('./' + workerId); // explicitly using require.toUrl(), see https://github.com/microsoft/vscode/issues/107440#issuecomment-698982321
const workerMain = require.toUrl('vs/base/worker/workerMain.js'); // explicitly using require.toUrl(), see https://github.com/microsoft/vscode/issues/107440#issuecomment-698982321
const workerUrl = getWorkerBootstrapUrl(workerMain, label);
return new Worker(ttPolicy ? ttPolicy.createScriptURL(workerUrl) as unknown as string : workerUrl, { name: label });
}
@@ -63,7 +63,7 @@ class WebWorker implements IWorker {
constructor(moduleId: string, id: number, label: string, onMessageCallback: IWorkerCallback, onErrorCallback: (err: any) => void) {
this.id = id;
const workerOrPromise = getWorker('workerMain.js', label);
const workerOrPromise = getWorker(label);
if (isPromiseLike(workerOrPromise)) {
this.worker = workerOrPromise;
} else {
src/vs/base/browser/dnd.ts
+1 -6
View File
@@ -71,12 +71,7 @@ export const DataTransfers = {
/**
* Typically transfer type for copy/paste transfers.
*/
TEXT: Mimes.text,
/**
* Application specific terminal transfer type.
*/
TERMINALS: 'Terminals'
TEXT: Mimes.text
};
export function applyDragImage(event: DragEvent, label: string | null, clazz: string): void {
src/vs/base/browser/dom.ts
+199 -84
View File
@@ -9,7 +9,7 @@ import { IKeyboardEvent, StandardKeyboardEvent } from 'vs/base/browser/keyboardE
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 * as event from 'vs/base/common/event';
import * as dompurify from 'vs/base/browser/dompurify/dompurify';
import { KeyCode } from 'vs/base/common/keyCodes';
import { Disposable, DisposableStore, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
@@ -73,6 +73,9 @@ export interface IAddStandardDisposableListenerSignature {
(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: 'pointerdown', handler: (event: PointerEvent) => void, useCapture?: boolean): IDisposable;
(node: HTMLElement, type: 'pointermove', handler: (event: PointerEvent) => void, useCapture?: boolean): IDisposable;
(node: HTMLElement, type: 'pointerup', handler: (event: PointerEvent) => void, useCapture?: boolean): IDisposable;
(node: HTMLElement, type: string, handler: (event: any) => void, useCapture?: boolean): IDisposable;
}
function _wrapAsStandardMouseEvent(handler: (e: IMouseEvent) => void): (e: MouseEvent) => void {
@@ -97,26 +100,26 @@ export let addStandardDisposableListener: IAddStandardDisposableListenerSignatur
return addDisposableListener(node, type, wrapHandler, useCapture);
};
export let addStandardDisposableGenericMouseDownListner = function addStandardDisposableListener(node: HTMLElement, handler: (event: any) => void, useCapture?: boolean): IDisposable {
export let addStandardDisposableGenericMouseDownListener = function addStandardDisposableListener(node: HTMLElement, handler: (event: any) => void, useCapture?: boolean): IDisposable {
let wrapHandler = _wrapAsStandardMouseEvent(handler);
return addDisposableGenericMouseDownListner(node, wrapHandler, useCapture);
return addDisposableGenericMouseDownListener(node, wrapHandler, useCapture);
};
export let addStandardDisposableGenericMouseUpListner = function addStandardDisposableListener(node: HTMLElement, handler: (event: any) => void, useCapture?: boolean): IDisposable {
export let addStandardDisposableGenericMouseUpListener = function addStandardDisposableListener(node: HTMLElement, handler: (event: any) => void, useCapture?: boolean): IDisposable {
let wrapHandler = _wrapAsStandardMouseEvent(handler);
return addDisposableGenericMouseUpListner(node, wrapHandler, useCapture);
return addDisposableGenericMouseUpListener(node, wrapHandler, useCapture);
};
export function addDisposableGenericMouseDownListner(node: EventTarget, handler: (event: any) => void, useCapture?: boolean): IDisposable {
export function addDisposableGenericMouseDownListener(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 {
export function addDisposableGenericMouseMoveListener(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 {
export function addDisposableGenericMouseUpListener(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 {
@@ -149,6 +152,24 @@ export function addDisposableNonBubblingPointerOutListener(node: Element, handle
});
}
export function createEventEmitter<K extends keyof HTMLElementEventMap>(target: HTMLElement, type: K, options?: boolean | AddEventListenerOptions): event.Emitter<HTMLElementEventMap[K]> {
let domListener: DomListener | null = null;
const handler = (e: HTMLElementEventMap[K]) => result.fire(e);
const onFirstListenerAdd = () => {
if (!domListener) {
domListener = new DomListener(target, type, handler, options);
}
};
const onLastListenerRemove = () => {
if (domListener) {
domListener.dispose();
domListener = null;
}
};
const result = new event.Emitter<HTMLElementEventMap[K]>({ onFirstListenerAdd, onLastListenerRemove });
return result;
}
interface IRequestAnimationFrame {
(callback: (time: number) => void): number;
}
@@ -290,17 +311,12 @@ export interface IEventMerger<R, E> {
(lastEvent: R | null, currentEvent: E): R;
}
export interface DOMEvent {
preventDefault(): void;
stopPropagation(): void;
}
const MINIMUM_TIME_MS = 8;
const DEFAULT_EVENT_MERGER: IEventMerger<DOMEvent, DOMEvent> = function (lastEvent: DOMEvent | null, currentEvent: DOMEvent) {
const DEFAULT_EVENT_MERGER: IEventMerger<Event, Event> = function (lastEvent: Event | null, currentEvent: Event) {
return currentEvent;
};
class TimeoutThrottledDomListener<R, E extends DOMEvent> extends Disposable {
class TimeoutThrottledDomListener<R, E extends Event> extends Disposable {
constructor(node: any, type: string, handler: (event: R) => void, eventMerger: IEventMerger<R, E> = <any>DEFAULT_EVENT_MERGER, minimumTimeMs: number = MINIMUM_TIME_MS) {
super();
@@ -330,7 +346,7 @@ class TimeoutThrottledDomListener<R, E extends DOMEvent> extends Disposable {
}
}
export function addDisposableThrottledListener<R, E extends DOMEvent = DOMEvent>(node: any, type: string, handler: (event: R) => void, eventMerger?: IEventMerger<R, E>, minimumTimeMs?: number): IDisposable {
export function addDisposableThrottledListener<R, E extends Event = Event>(node: any, type: string, handler: (event: R) => void, eventMerger?: IEventMerger<R, E>, minimumTimeMs?: number): IDisposable {
return new TimeoutThrottledDomListener<R, E>(node, type, handler, eventMerger, minimumTimeMs);
}
@@ -477,7 +493,7 @@ export class Dimension implements IDimension {
}
}
export function getTopLeftOffset(element: HTMLElement): { left: number; top: number; } {
export function getTopLeftOffset(element: HTMLElement): { left: number; top: number } {
// Adapted from WinJS.Utilities.getPosition
// and added borders to the mix
@@ -846,6 +862,8 @@ export const EventType = {
LOAD: 'load',
BEFORE_UNLOAD: 'beforeunload',
UNLOAD: 'unload',
PAGE_SHOW: 'pageshow',
PAGE_HIDE: 'pagehide',
ABORT: 'abort',
ERROR: 'error',
RESIZE: 'resize',
@@ -904,9 +922,9 @@ export const EventHelper = {
};
export interface IFocusTracker extends Disposable {
onDidFocus: Event<void>;
onDidBlur: Event<void>;
refreshState?(): void;
onDidFocus: event.Event<void>;
onDidBlur: event.Event<void>;
refreshState(): void;
}
export function saveParentsScrollTop(node: Element): number[] {
@@ -929,17 +947,23 @@ export function restoreParentsScrollTop(node: Element, state: number[]): void {
class FocusTracker extends Disposable implements IFocusTracker {
private readonly _onDidFocus = this._register(new Emitter<void>());
public readonly onDidFocus: Event<void> = this._onDidFocus.event;
private readonly _onDidFocus = this._register(new event.Emitter<void>());
public readonly onDidFocus: event.Event<void> = this._onDidFocus.event;
private readonly _onDidBlur = this._register(new Emitter<void>());
public readonly onDidBlur: Event<void> = this._onDidBlur.event;
private readonly _onDidBlur = this._register(new event.Emitter<void>());
public readonly onDidBlur: event.Event<void> = this._onDidBlur.event;
private _refreshStateHandler: () => void;
private static hasFocusWithin(element: HTMLElement): boolean {
const shadowRoot = getShadowRoot(element);
const activeElement = (shadowRoot ? shadowRoot.activeElement : document.activeElement);
return isAncestor(activeElement, element);
}
constructor(element: HTMLElement | Window) {
super();
let hasFocus = isAncestor(document.activeElement, <HTMLElement>element);
let hasFocus = FocusTracker.hasFocusWithin(<HTMLElement>element);
let loosingFocus = false;
const onFocus = () => {
@@ -964,7 +988,7 @@ class FocusTracker extends Disposable implements IFocusTracker {
};
this._refreshStateHandler = () => {
let currentNodeHasFocus = isAncestor(document.activeElement, <HTMLElement>element);
let currentNodeHasFocus = FocusTracker.hasFocusWithin(<HTMLElement>element);
if (currentNodeHasFocus !== hasFocus) {
if (hasFocus) {
onBlur();
@@ -976,6 +1000,8 @@ class FocusTracker extends Disposable implements IFocusTracker {
this._register(addDisposableListener(element, EventType.FOCUS, onFocus, true));
this._register(addDisposableListener(element, EventType.BLUR, onBlur, true));
this._register(addDisposableListener(element, EventType.FOCUS_IN, () => this._refreshStateHandler()));
this._register(addDisposableListener(element, EventType.FOCUS_OUT, () => this._refreshStateHandler()));
}
refreshState() {
@@ -1021,7 +1047,7 @@ export enum Namespace {
SVG = 'http://www.w3.org/2000/svg'
}
function _$<T extends Element>(namespace: Namespace, description: string, attrs?: { [key: string]: any; }, ...children: Array<Node | string>): T {
function _$<T extends Element>(namespace: Namespace, description: string, attrs?: { [key: string]: any }, ...children: Array<Node | string>): T {
let match = SELECTOR_REGEX.exec(description);
if (!match) {
@@ -1070,11 +1096,11 @@ function _$<T extends Element>(namespace: Namespace, description: string, attrs?
return result as T;
}
export function $<T extends HTMLElement>(description: string, attrs?: { [key: string]: any; }, ...children: Array<Node | string>): T {
export function $<T extends HTMLElement>(description: string, attrs?: { [key: string]: any }, ...children: Array<Node | string>): T {
return _$(Namespace.HTML, description, attrs, ...children);
}
$.SVG = function <T extends SVGElement>(description: string, attrs?: { [key: string]: any; }, ...children: Array<Node | string>): T {
$.SVG = function <T extends SVGElement>(description: string, attrs?: { [key: string]: any }, ...children: Array<Node | string>): T {
return _$(Namespace.SVG, description, attrs, ...children);
};
@@ -1145,7 +1171,7 @@ export function getElementsByTagName(tag: string): HTMLElement[] {
return Array.prototype.slice.call(document.getElementsByTagName(tag), 0);
}
export function finalHandler<T extends DOMEvent>(fn: (event: T) => any): (event: T) => any {
export function finalHandler<T extends Event>(fn: (event: T) => any): (event: T) => any {
return e => {
e.preventDefault();
e.stopPropagation();
@@ -1180,7 +1206,7 @@ export function computeScreenAwareSize(cssPx: number): number {
/**
* Open safely a new window. This is the best way to do so, but you cannot tell
* if the window was opened or if it was blocked by the browser's popup blocker.
* If you want to tell if the browser blocked the new window, use `windowOpenNoOpenerWithSuccess`.
* If you want to tell if the browser blocked the new window, use {@link windowOpenWithSuccess}.
*
* See https://github.com/microsoft/monaco-editor/issues/601
* To protect against malicious code in the linked site, particularly phishing attempts,
@@ -1199,19 +1225,49 @@ export function windowOpenNoOpener(url: string): void {
}
/**
* Open safely a new window. This technique is not appropriate in certain contexts,
* like for example when the JS context is executing inside a sandboxed iframe.
* If it is not necessary to know if the browser blocked the new window, use
* `windowOpenNoOpener`.
* Open a new window in a popup. This is the best way to do so, but you cannot tell
* if the window was opened or if it was blocked by the browser's popup blocker.
* If you want to tell if the browser blocked the new window, use {@link windowOpenWithSuccess}.
*
* Note: this does not set {@link window.opener} to null. This is to allow the opened popup to
* be able to use {@link window.close} to close itself. Because of this, you should only use
* this function on urls that you trust.
*
* In otherwords, you should almost always use {@link windowOpenNoOpener} instead of this function.
*/
const popupWidth = 780, popupHeight = 640;
export function windowOpenPopup(url: string): void {
const left = Math.floor(window.screenLeft + window.innerWidth / 2 - popupWidth / 2);
const top = Math.floor(window.screenTop + window.innerHeight / 2 - popupHeight / 2);
window.open(
url,
'_blank',
`width=${popupWidth},height=${popupHeight},top=${top},left=${left}`
);
}
/**
* Attempts to open a window and returns whether it succeeded. This technique is
* not appropriate in certain contexts, like for example when the JS context is
* executing inside a sandboxed iframe. If it is not necessary to know if the
* browser blocked the new window, use {@link windowOpenNoOpener}.
*
* See https://github.com/microsoft/monaco-editor/issues/601
* See https://github.com/microsoft/monaco-editor/issues/2474
* See https://mathiasbynens.github.io/rel-noopener/
*
* @param url the url to open
* @param noOpener whether or not to set the {@link window.opener} to null. You should leave the default
* (true) unless you trust the url that is being opened.
* @returns boolean indicating if the {@link window.open} call succeeded
*/
export function windowOpenNoOpenerWithSuccess(url: string): boolean {
export function windowOpenWithSuccess(url: string, noOpener = true): boolean {
const newTab = window.open();
if (newTab) {
(newTab as any).opener = null;
if (noOpener) {
// see `windowOpenNoOpener` for details on why this is important
(newTab as any).opener = null;
}
newTab.location.href = url;
return true;
}
@@ -1285,7 +1341,7 @@ export function triggerUpload(): Promise<FileList | undefined> {
input.multiple = true;
// Resolve once the input event has fired once
Event.once(Event.fromDOMEventEmitter(input, 'input'))(() => {
event.Event.once(event.Event.fromDOMEventEmitter(input, 'input'))(() => {
resolve(withNullAsUndefined(input.files));
});
@@ -1361,6 +1417,49 @@ export function detectFullscreen(): IDetectedFullscreen | null {
// -- sanitize and trusted html
/**
* Hooks dompurify using `afterSanitizeAttributes` to check that all `href` and `src`
* attributes are valid.
*/
export function hookDomPurifyHrefAndSrcSanitizer(allowedProtocols: readonly string[], allowDataImages = false): IDisposable {
// https://github.com/cure53/DOMPurify/blob/main/demos/hooks-scheme-allowlist.html
// build an anchor to map URLs to
const anchor = document.createElement('a');
dompurify.addHook('afterSanitizeAttributes', (node) => {
// check all href/src attributes for validity
for (const attr of ['href', 'src']) {
if (node.hasAttribute(attr)) {
const attrValue = node.getAttribute(attr) as string;
if (attr === 'href' && attrValue.startsWith('#')) {
// Allow fragment links
continue;
}
anchor.href = attrValue;
if (!allowedProtocols.includes(anchor.protocol.replace(/:$/, ''))) {
if (allowDataImages && attr === 'src' && anchor.href.startsWith('data:')) {
continue;
}
node.removeAttribute(attr);
}
}
}
});
return toDisposable(() => {
dompurify.removeHook('afterSanitizeAttributes');
});
}
const defaultSafeProtocols = [
Schemas.http,
Schemas.https,
Schemas.command,
];
/**
* Sanitizes the given `value` and reset the given `node` with it.
*/
@@ -1373,29 +1472,12 @@ export function safeInnerHtml(node: HTMLElement, value: string, allowUnknownProt
ALLOW_UNKNOWN_PROTOCOLS: allowUnknownProtocols
};
const allowedProtocols = [Schemas.http, Schemas.https, Schemas.command];
// https://github.com/cure53/DOMPurify/blob/main/demos/hooks-scheme-allowlist.html
dompurify.addHook('afterSanitizeAttributes', (node) => {
// build an anchor to map URLs to
const anchor = document.createElement('a');
// check all href/src attributes for validity
for (const attr in ['href', 'src']) {
if (node.hasAttribute(attr)) {
anchor.href = node.getAttribute(attr) as string;
if (!allowedProtocols.includes(anchor.protocol)) {
node.removeAttribute(attr);
}
}
}
});
const hook = hookDomPurifyHrefAndSrcSanitizer(defaultSafeProtocols);
try {
const html = dompurify.sanitize(value, { ...options, RETURN_TRUSTED_TYPE: true });
node.innerHTML = html as unknown as string;
} finally {
dompurify.removeHook('afterSanitizeAttributes');
hook.dispose();
}
}
@@ -1425,22 +1507,6 @@ 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 {
export function supported(obj: any & Window): boolean {
if (typeof obj?.showDirectoryPicker === 'function') {
return true;
}
return false;
}
}
type ModifierKey = 'alt' | 'ctrl' | 'shift' | 'meta';
export interface IModifierKeyStatus {
@@ -1453,7 +1519,7 @@ export interface IModifierKeyStatus {
event?: KeyboardEvent;
}
export class ModifierKeyEmitter extends Emitter<IModifierKeyStatus> {
export class ModifierKeyEmitter extends event.Emitter<IModifierKeyStatus> {
private readonly _subscriptions = new DisposableStore();
private _keyStatus: IModifierKeyStatus;
@@ -1602,16 +1668,6 @@ export function getCookieValue(name: string): string | undefined {
return match ? match.pop() : undefined;
}
export function addMatchMediaChangeListener(query: string, callback: () => void): void {
const mediaQueryList = window.matchMedia(query);
if (typeof mediaQueryList.addEventListener === 'function') {
mediaQueryList.addEventListener('change', callback);
} else {
// Safari 13.x
mediaQueryList.addListener(callback);
}
}
export const enum ZIndex {
SASH = 35,
SuggestWidget = 40,
@@ -1622,3 +1678,62 @@ export const enum ZIndex {
ModalDialog = 2600,
PaneDropOverlay = 10000
}
export interface IDragAndDropObserverCallbacks {
readonly onDragEnter: (e: DragEvent) => void;
readonly onDragLeave: (e: DragEvent) => void;
readonly onDrop: (e: DragEvent) => void;
readonly onDragEnd: (e: DragEvent) => void;
readonly onDragOver?: (e: DragEvent) => void;
}
export class DragAndDropObserver extends Disposable {
// A helper to fix issues with repeated DRAG_ENTER / DRAG_LEAVE
// calls see https://github.com/microsoft/vscode/issues/14470
// when the element has child elements where the events are fired
// repeadedly.
private counter: number = 0;
constructor(private readonly element: HTMLElement, private readonly callbacks: IDragAndDropObserverCallbacks) {
super();
this.registerListeners();
}
private registerListeners(): void {
this._register(addDisposableListener(this.element, EventType.DRAG_ENTER, (e: DragEvent) => {
this.counter++;
this.callbacks.onDragEnter(e);
}));
this._register(addDisposableListener(this.element, EventType.DRAG_OVER, (e: DragEvent) => {
e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
if (this.callbacks.onDragOver) {
this.callbacks.onDragOver(e);
}
}));
this._register(addDisposableListener(this.element, EventType.DRAG_LEAVE, (e: DragEvent) => {
this.counter--;
if (this.counter === 0) {
this.callbacks.onDragLeave(e);
}
}));
this._register(addDisposableListener(this.element, EventType.DRAG_END, (e: DragEvent) => {
this.counter = 0;
this.callbacks.onDragEnd(e);
}));
this._register(addDisposableListener(this.element, EventType.DROP, (e: DragEvent) => {
this.counter = 0;
this.callbacks.onDrop(e);
}));
}
}
src/vs/base/browser/dompurify/dompurify.js
-2
View File
@@ -1382,5 +1382,3 @@ define(function () { return purify; });
// export const removeHooks = purify.removeHooks;
// export const removeAllHooks = purify.removeAllHooks;
// ESM-uncomment-end
//# sourceMappingURL=purify.es.js.map
src/vs/base/browser/event.ts
+2 -1
View File
@@ -14,7 +14,7 @@ export interface IDomEvent {
(element: EventHandler, type: string, useCapture?: boolean): BaseEvent<unknown>;
}
export interface DOMEventMap extends HTMLElementEventMap, DocumentEventMap {
export interface DOMEventMap extends HTMLElementEventMap, DocumentEventMap, WindowEventMap {
'-monaco-gesturetap': GestureEvent;
'-monaco-gesturechange': GestureEvent;
'-monaco-gesturestart': GestureEvent;
@@ -30,6 +30,7 @@ export class DomEmitter<K extends keyof DOMEventMap> implements IDisposable {
return this.emitter.event;
}
constructor(element: Window & typeof globalThis, type: WindowEventMap, useCapture?: boolean);
constructor(element: Document, type: DocumentEventMap, useCapture?: boolean);
constructor(element: EventHandler, type: K, useCapture?: boolean);
constructor(element: EventHandler, type: K, useCapture?: boolean) {
src/vs/base/browser/fastDomNode.ts
+85 -74
View File
@@ -5,116 +5,96 @@
export class FastDomNode<T extends HTMLElement> {
public readonly domNode: T;
private _maxWidth: number;
private _width: number;
private _height: number;
private _top: number;
private _left: number;
private _bottom: number;
private _right: number;
private _fontFamily: string;
private _fontWeight: string;
private _fontSize: number;
private _fontFeatureSettings: string;
private _lineHeight: number;
private _letterSpacing: number;
private _className: string;
private _display: string;
private _position: string;
private _visibility: string;
private _backgroundColor: string;
private _layerHint: boolean;
private _contain: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint';
private _boxShadow: string;
private _maxWidth: string = '';
private _width: string = '';
private _height: string = '';
private _top: string = '';
private _left: string = '';
private _bottom: string = '';
private _right: string = '';
private _fontFamily: string = '';
private _fontWeight: string = '';
private _fontSize: string = '';
private _fontStyle: string = '';
private _fontFeatureSettings: string = '';
private _textDecoration: string = '';
private _lineHeight: string = '';
private _letterSpacing: string = '';
private _className: string = '';
private _display: string = '';
private _position: string = '';
private _visibility: string = '';
private _color: string = '';
private _backgroundColor: string = '';
private _layerHint: boolean = false;
private _contain: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint' = 'none';
private _boxShadow: string = '';
constructor(domNode: T) {
this.domNode = domNode;
this._maxWidth = -1;
this._width = -1;
this._height = -1;
this._top = -1;
this._left = -1;
this._bottom = -1;
this._right = -1;
this._fontFamily = '';
this._fontWeight = '';
this._fontSize = -1;
this._fontFeatureSettings = '';
this._lineHeight = -1;
this._letterSpacing = -100;
this._className = '';
this._display = '';
this._position = '';
this._visibility = '';
this._backgroundColor = '';
this._layerHint = false;
this._contain = 'none';
this._boxShadow = '';
}
constructor(
public readonly domNode: T
) { }
public setMaxWidth(maxWidth: number): void {
public setMaxWidth(_maxWidth: number | string): void {
const maxWidth = numberAsPixels(_maxWidth);
if (this._maxWidth === maxWidth) {
return;
}
this._maxWidth = maxWidth;
this.domNode.style.maxWidth = this._maxWidth + 'px';
this.domNode.style.maxWidth = this._maxWidth;
}
public setWidth(width: number): void {
public setWidth(_width: number | string): void {
const width = numberAsPixels(_width);
if (this._width === width) {
return;
}
this._width = width;
this.domNode.style.width = this._width + 'px';
this.domNode.style.width = this._width;
}
public setHeight(height: number): void {
public setHeight(_height: number | string): void {
const height = numberAsPixels(_height);
if (this._height === height) {
return;
}
this._height = height;
this.domNode.style.height = this._height + 'px';
this.domNode.style.height = this._height;
}
public setTop(top: number): void {
public setTop(_top: number | string): void {
const top = numberAsPixels(_top);
if (this._top === top) {
return;
}
this._top = top;
this.domNode.style.top = this._top + 'px';
this.domNode.style.top = this._top;
}
public unsetTop(): void {
if (this._top === -1) {
return;
}
this._top = -1;
this.domNode.style.top = '';
}
public setLeft(left: number): void {
public setLeft(_left: number | string): void {
const left = numberAsPixels(_left);
if (this._left === left) {
return;
}
this._left = left;
this.domNode.style.left = this._left + 'px';
this.domNode.style.left = this._left;
}
public setBottom(bottom: number): void {
public setBottom(_bottom: number | string): void {
const bottom = numberAsPixels(_bottom);
if (this._bottom === bottom) {
return;
}
this._bottom = bottom;
this.domNode.style.bottom = this._bottom + 'px';
this.domNode.style.bottom = this._bottom;
}
public setRight(right: number): void {
public setRight(_right: number | string): void {
const right = numberAsPixels(_right);
if (this._right === right) {
return;
}
this._right = right;
this.domNode.style.right = this._right + 'px';
this.domNode.style.right = this._right;
}
public setFontFamily(fontFamily: string): void {
@@ -133,12 +113,21 @@ export class FastDomNode<T extends HTMLElement> {
this.domNode.style.fontWeight = this._fontWeight;
}
public setFontSize(fontSize: number): void {
public setFontSize(_fontSize: number | string): void {
const fontSize = numberAsPixels(_fontSize);
if (this._fontSize === fontSize) {
return;
}
this._fontSize = fontSize;
this.domNode.style.fontSize = this._fontSize + 'px';
this.domNode.style.fontSize = this._fontSize;
}
public setFontStyle(fontStyle: string): void {
if (this._fontStyle === fontStyle) {
return;
}
this._fontStyle = fontStyle;
this.domNode.style.fontStyle = this._fontStyle;
}
public setFontFeatureSettings(fontFeatureSettings: string): void {
@@ -149,20 +138,30 @@ export class FastDomNode<T extends HTMLElement> {
this.domNode.style.fontFeatureSettings = this._fontFeatureSettings;
}
public setLineHeight(lineHeight: number): void {
public setTextDecoration(textDecoration: string): void {
if (this._textDecoration === textDecoration) {
return;
}
this._textDecoration = textDecoration;
this.domNode.style.textDecoration = this._textDecoration;
}
public setLineHeight(_lineHeight: number | string): void {
const lineHeight = numberAsPixels(_lineHeight);
if (this._lineHeight === lineHeight) {
return;
}
this._lineHeight = lineHeight;
this.domNode.style.lineHeight = this._lineHeight + 'px';
this.domNode.style.lineHeight = this._lineHeight;
}
public setLetterSpacing(letterSpacing: number): void {
public setLetterSpacing(_letterSpacing: number | string): void {
const letterSpacing = numberAsPixels(_letterSpacing);
if (this._letterSpacing === letterSpacing) {
return;
}
this._letterSpacing = letterSpacing;
this.domNode.style.letterSpacing = this._letterSpacing + 'px';
this.domNode.style.letterSpacing = this._letterSpacing;
}
public setClassName(className: string): void {
@@ -202,6 +201,14 @@ export class FastDomNode<T extends HTMLElement> {
this.domNode.style.visibility = this._visibility;
}
public setColor(color: string): void {
if (this._color === color) {
return;
}
this._color = color;
this.domNode.style.color = this._color;
}
public setBackgroundColor(backgroundColor: string): void {
if (this._backgroundColor === backgroundColor) {
return;
@@ -251,6 +258,10 @@ export class FastDomNode<T extends HTMLElement> {
}
}
function numberAsPixels(value: number | string): string {
return (typeof value === 'number' ? `${value}px` : value);
}
export function createFastDomNode<T extends HTMLElement>(domNode: T): FastDomNode<T> {
return new FastDomNode(domNode);
}
src/vs/base/browser/formattedTextRenderer.ts
-1
View File
@@ -100,7 +100,6 @@ function _renderFormattedText(element: Node, treeNode: IFormatParseTree, actionH
child = document.createElement('code');
} else if (treeNode.type === FormatType.Action && actionHandler) {
const a = document.createElement('a');
a.href = '#';
actionHandler.disposables.add(DOM.addStandardDisposableListener(a, 'click', (event) => {
actionHandler.callback(String(treeNode.index), event);
}));
src/vs/base/browser/globalMouseMoveMonitor.ts
-139
View File
@@ -1,139 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import * as dom from 'vs/base/browser/dom';
import { IframeUtils } from 'vs/base/browser/iframe';
import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
import { DisposableStore, IDisposable } from 'vs/base/common/lifecycle';
import { isIOS } from 'vs/base/common/platform';
export interface IStandardMouseMoveEventData {
leftButton: boolean;
buttons: number;
posx: number;
posy: number;
}
export interface IEventMerger<R> {
(lastEvent: R | null, currentEvent: MouseEvent): R;
}
export interface IMouseMoveCallback<R> {
(mouseMoveData: R): void;
}
export interface IOnStopCallback {
(browserEvent?: MouseEvent | KeyboardEvent): void;
}
export function standardMouseMoveMerger(lastEvent: IStandardMouseMoveEventData | null, currentEvent: MouseEvent): IStandardMouseMoveEventData {
let ev = new StandardMouseEvent(currentEvent);
ev.preventDefault();
return {
leftButton: ev.leftButton,
buttons: ev.buttons,
posx: ev.posx,
posy: ev.posy
};
}
export class GlobalMouseMoveMonitor<R extends { buttons: number; }> implements IDisposable {
private readonly _hooks = new DisposableStore();
private _mouseMoveEventMerger: IEventMerger<R> | null = null;
private _mouseMoveCallback: IMouseMoveCallback<R> | null = null;
private _onStopCallback: IOnStopCallback | null = null;
public dispose(): void {
this.stopMonitoring(false);
this._hooks.dispose();
}
public stopMonitoring(invokeStopCallback: boolean, browserEvent?: MouseEvent | KeyboardEvent): void {
if (!this.isMonitoring()) {
// Not monitoring
return;
}
// Unhook
this._hooks.clear();
this._mouseMoveEventMerger = null;
this._mouseMoveCallback = null;
const onStopCallback = this._onStopCallback;
this._onStopCallback = null;
if (invokeStopCallback && onStopCallback) {
onStopCallback(browserEvent);
}
}
public isMonitoring(): boolean {
return !!this._mouseMoveEventMerger;
}
public startMonitoring(
initialElement: HTMLElement,
initialButtons: number,
mouseMoveEventMerger: IEventMerger<R>,
mouseMoveCallback: IMouseMoveCallback<R>,
onStopCallback: IOnStopCallback
): void {
if (this.isMonitoring()) {
// I am already hooked
return;
}
this._mouseMoveEventMerger = mouseMoveEventMerger;
this._mouseMoveCallback = mouseMoveCallback;
this._onStopCallback = onStopCallback;
const windowChain = IframeUtils.getSameOriginWindowChain();
const mouseMove = isIOS ? 'pointermove' : 'mousemove'; // Safari sends wrong event, workaround for #122653
const mouseUp = 'mouseup';
const listenTo: (Document | ShadowRoot)[] = windowChain.map(element => element.window.document);
const shadowRoot = dom.getShadowRoot(initialElement);
if (shadowRoot) {
listenTo.unshift(shadowRoot);
}
for (const element of listenTo) {
this._hooks.add(dom.addDisposableThrottledListener(element, mouseMove,
(data: R) => {
if (data.buttons !== initialButtons) {
// Buttons state has changed in the meantime
this.stopMonitoring(true);
return;
}
this._mouseMoveCallback!(data);
},
(lastEvent: R | null, currentEvent) => this._mouseMoveEventMerger!(lastEvent, currentEvent as MouseEvent)
));
this._hooks.add(dom.addDisposableListener(element, mouseUp, (e: MouseEvent) => this.stopMonitoring(true)));
}
if (IframeUtils.hasDifferentOriginAncestor()) {
let lastSameOriginAncestor = windowChain[windowChain.length - 1];
// We might miss a mouse up if it happens outside the iframe
// This one is for Chrome
this._hooks.add(dom.addDisposableListener(lastSameOriginAncestor.window.document, 'mouseout', (browserEvent: MouseEvent) => {
let e = new StandardMouseEvent(browserEvent);
if (e.target.tagName.toLowerCase() === 'html') {
this.stopMonitoring(true);
}
}));
// This one is for FF
this._hooks.add(dom.addDisposableListener(lastSameOriginAncestor.window.document, 'mouseover', (browserEvent: MouseEvent) => {
let e = new StandardMouseEvent(browserEvent);
if (e.target.tagName.toLowerCase() === 'html') {
this.stopMonitoring(true);
}
}));
// This one is for IE
this._hooks.add(dom.addDisposableListener(lastSameOriginAncestor.window.document.body, 'mouseleave', (browserEvent: MouseEvent) => {
this.stopMonitoring(true);
}));
}
}
}
src/vs/base/browser/globalPointerMoveMonitor.ts
+126
View File
@@ -0,0 +1,126 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import * as dom from 'vs/base/browser/dom';
import { DisposableStore, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
export interface IPointerMoveEventData {
leftButton: boolean;
buttons: number;
pageX: number;
pageY: number;
}
export interface IEventMerger<R> {
(lastEvent: R | null, currentEvent: PointerEvent): R;
}
export interface IPointerMoveCallback<R> {
(pointerMoveData: R): void;
}
export interface IOnStopCallback {
(browserEvent?: PointerEvent | KeyboardEvent): void;
}
export function standardPointerMoveMerger(lastEvent: IPointerMoveEventData | null, currentEvent: PointerEvent): IPointerMoveEventData {
currentEvent.preventDefault();
return {
leftButton: (currentEvent.button === 0),
buttons: currentEvent.buttons,
pageX: currentEvent.pageX,
pageY: currentEvent.pageY
};
}
export class GlobalPointerMoveMonitor<R extends { buttons: number } = IPointerMoveEventData> implements IDisposable {
private readonly _hooks = new DisposableStore();
private _pointerMoveEventMerger: IEventMerger<R> | null = null;
private _pointerMoveCallback: IPointerMoveCallback<R> | null = null;
private _onStopCallback: IOnStopCallback | null = null;
public dispose(): void {
this.stopMonitoring(false);
this._hooks.dispose();
}
public stopMonitoring(invokeStopCallback: boolean, browserEvent?: PointerEvent | KeyboardEvent): void {
if (!this.isMonitoring()) {
// Not monitoring
return;
}
// Unhook
this._hooks.clear();
this._pointerMoveEventMerger = null;
this._pointerMoveCallback = null;
const onStopCallback = this._onStopCallback;
this._onStopCallback = null;
if (invokeStopCallback && onStopCallback) {
onStopCallback(browserEvent);
}
}
public isMonitoring(): boolean {
return !!this._pointerMoveEventMerger;
}
public startMonitoring(
initialElement: Element,
pointerId: number,
initialButtons: number,
pointerMoveEventMerger: IEventMerger<R>,
pointerMoveCallback: IPointerMoveCallback<R>,
onStopCallback: IOnStopCallback
): void {
if (this.isMonitoring()) {
this.stopMonitoring(false);
}
this._pointerMoveEventMerger = pointerMoveEventMerger;
this._pointerMoveCallback = pointerMoveCallback;
this._onStopCallback = onStopCallback;
let eventSource: Element | Window = initialElement;
try {
initialElement.setPointerCapture(pointerId);
this._hooks.add(toDisposable(() => {
initialElement.releasePointerCapture(pointerId);
}));
} catch (err) {
// See https://github.com/microsoft/vscode/issues/144584
// See https://github.com/microsoft/vscode/issues/146947
// `setPointerCapture` sometimes fails when being invoked
// from a `mousedown` listener on macOS and Windows
// and it always fails on Linux with the exception:
// DOMException: Failed to execute 'setPointerCapture' on 'Element':
// No active pointer with the given id is found.
// In case of failure, we bind the listeners on the window
eventSource = window;
}
this._hooks.add(dom.addDisposableThrottledListener<R, PointerEvent>(
eventSource,
dom.EventType.POINTER_MOVE,
(data: R) => {
if (data.buttons !== initialButtons) {
// Buttons state has changed in the meantime
this.stopMonitoring(true);
return;
}
this._pointerMoveCallback!(data);
},
(lastEvent: R | null, currentEvent) => this._pointerMoveEventMerger!(lastEvent, currentEvent)
));
this._hooks.add(dom.addDisposableListener(
eventSource,
dom.EventType.POINTER_UP,
(e: PointerEvent) => this.stopMonitoring(true)
));
}
}
src/vs/base/browser/indexedDB.ts
+172
View File
@@ -0,0 +1,172 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { toErrorMessage } from 'vs/base/common/errorMessage';
import { getErrorMessage } from 'vs/base/common/errors';
import { mark } from 'vs/base/common/performance';
import { isArray } from 'vs/base/common/types';
class MissingStoresError extends Error {
constructor(readonly db: IDBDatabase) {
super('Missing stores');
}
}
export class IndexedDB {
static async create(name: string, version: number | undefined, stores: string[]): Promise<IndexedDB> {
const database = await IndexedDB.openDatabase(name, version, stores);
return new IndexedDB(database, name);
}
static async openDatabase(name: string, version: number | undefined, stores: string[]): Promise<IDBDatabase> {
mark(`code/willOpenDatabase/${name}`);
try {
return await IndexedDB.doOpenDatabase(name, version, stores);
} catch (err) {
if (err instanceof MissingStoresError) {
console.info(`Attempting to recreate the IndexedDB once.`, name);
try {
// Try to delete the db
await IndexedDB.deleteDatabase(err.db);
} catch (error) {
console.error(`Error while deleting the IndexedDB`, getErrorMessage(error));
throw error;
}
return await IndexedDB.doOpenDatabase(name, version, stores);
}
throw err;
} finally {
mark(`code/didOpenDatabase/${name}`);
}
}
private static doOpenDatabase(name: string, version: number | undefined, stores: string[]): Promise<IDBDatabase> {
return new Promise((c, e) => {
const request = window.indexedDB.open(name, version);
request.onerror = () => e(request.error);
request.onsuccess = () => {
const db = request.result;
for (const store of stores) {
if (!db.objectStoreNames.contains(store)) {
console.error(`Error while opening IndexedDB. Could not find '${store}'' object store`);
e(new MissingStoresError(db));
return;
}
}
c(db);
};
request.onupgradeneeded = () => {
const db = request.result;
for (const store of stores) {
if (!db.objectStoreNames.contains(store)) {
db.createObjectStore(store);
}
}
};
});
}
private static deleteDatabase(indexedDB: IDBDatabase): Promise<void> {
return new Promise((c, e) => {
// Close any opened connections
indexedDB.close();
// Delete the db
const deleteRequest = window.indexedDB.deleteDatabase(indexedDB.name);
deleteRequest.onerror = (err) => e(deleteRequest.error);
deleteRequest.onsuccess = () => c();
});
}
private database: IDBDatabase | null = null;
private readonly pendingTransactions: IDBTransaction[] = [];
constructor(database: IDBDatabase, private readonly name: string) {
this.database = database;
}
hasPendingTransactions(): boolean {
return this.pendingTransactions.length > 0;
}
close(): void {
if (this.pendingTransactions.length) {
this.pendingTransactions.splice(0, this.pendingTransactions.length).forEach(transaction => transaction.abort());
}
if (this.database) {
this.database.close();
}
this.database = null;
}
runInTransaction<T>(store: string, transactionMode: IDBTransactionMode, dbRequestFn: (store: IDBObjectStore) => IDBRequest<T>[]): Promise<T[]>;
runInTransaction<T>(store: string, transactionMode: IDBTransactionMode, dbRequestFn: (store: IDBObjectStore) => IDBRequest<T>): Promise<T>;
async runInTransaction<T>(store: string, transactionMode: IDBTransactionMode, dbRequestFn: (store: IDBObjectStore) => IDBRequest<T> | IDBRequest<T>[]): Promise<T | T[]> {
if (!this.database) {
throw new Error(`IndexedDB database '${this.name}' is not opened.`);
}
const transaction = this.database.transaction(store, transactionMode);
this.pendingTransactions.push(transaction);
return new Promise<T | T[]>((c, e) => {
transaction.oncomplete = () => {
if (isArray(request)) {
c(request.map(r => r.result));
} else {
c(request.result);
}
};
transaction.onerror = () => e(transaction.error);
const request = dbRequestFn(transaction.objectStore(store));
}).finally(() => this.pendingTransactions.splice(this.pendingTransactions.indexOf(transaction), 1));
}
async getKeyValues<V>(store: string, isValid: (value: unknown) => value is V): Promise<Map<string, V>> {
if (!this.database) {
throw new Error(`IndexedDB database '${this.name}' is not opened.`);
}
const transaction = this.database.transaction(store, 'readonly');
this.pendingTransactions.push(transaction);
return new Promise<Map<string, V>>(resolve => {
const items = new Map<string, V>();
const objectStore = transaction.objectStore(store);
// Open a IndexedDB Cursor to iterate over key/values
const cursor = objectStore.openCursor();
if (!cursor) {
return resolve(items); // this means the `ItemTable` was empty
}
// Iterate over rows of `ItemTable` until the end
cursor.onsuccess = () => {
if (cursor.result) {
// Keep cursor key/value in our map
if (isValid(cursor.result.value)) {
items.set(cursor.result.key.toString(), cursor.result.value);
}
// Advance cursor to next row
cursor.result.continue();
} else {
resolve(items); // reached end of table
}
};
// Error handlers
const onError = (error: Error | null) => {
console.error(`IndexedDB getKeyValues(): ${toErrorMessage(error, true)}`);
resolve(items);
};
cursor.onerror = () => onError(cursor.error);
transaction.onerror = () => onError(transaction.error);
}).finally(() => this.pendingTransactions.splice(this.pendingTransactions.indexOf(transaction), 1));
}
}
src/vs/base/browser/markdownRenderer.ts
+65 -49
View File
@@ -17,11 +17,11 @@ import { IMarkdownString, parseHrefAndDimensions, removeMarkdownEscapes } from '
import { markdownEscapeEscapedIcons } from 'vs/base/common/iconLabels';
import { defaultGenerator } from 'vs/base/common/idGenerator';
import { DisposableStore } from 'vs/base/common/lifecycle';
import * as marked from 'vs/base/common/marked/marked';
import { marked } from 'vs/base/common/marked/marked';
import { parse } from 'vs/base/common/marshalling';
import { FileAccess, Schemas } from 'vs/base/common/network';
import { cloneAndChange } from 'vs/base/common/objects';
import { resolvePath } from 'vs/base/common/resources';
import { dirname, resolvePath } from 'vs/base/common/resources';
import { escape } from 'vs/base/common/strings';
import { URI } from 'vs/base/common/uri';
@@ -30,18 +30,17 @@ export interface MarkedOptions extends marked.MarkedOptions {
}
export interface MarkdownRenderOptions extends FormattedTextRenderOptions {
codeBlockRenderer?: (languageId: string, value: string) => Promise<HTMLElement>;
asyncRenderCallback?: () => void;
baseUrl?: URI;
readonly codeBlockRenderer?: (languageId: string, value: string) => Promise<HTMLElement>;
readonly asyncRenderCallback?: () => void;
}
/**
* Low-level way create a html element from a markdown string.
*
* **Note** that for most cases you should be using [`MarkdownRenderer`](./src/vs/editor/browser/core/markdownRenderer.ts)
* **Note** that for most cases you should be using [`MarkdownRenderer`](./src/vs/editor/contrib/markdownRenderer/browser/markdownRenderer.ts)
* which comes with support for pretty code block rendering and which uses the default way of handling links.
*/
export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRenderOptions = {}, markedOptions: MarkedOptions = {}): { element: HTMLElement, dispose: () => void } {
export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRenderOptions = {}, markedOptions: MarkedOptions = {}): { element: HTMLElement; dispose: () => void } {
const disposables = new DisposableStore();
let isDisposed = false;
@@ -71,20 +70,23 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
const _href = function (href: string, isDomUri: boolean): string {
const data = markdown.uris && markdown.uris[href];
if (!data) {
return href; // no uri exists
}
let uri = URI.revive(data);
if (isDomUri) {
if (href.startsWith(Schemas.data + ':')) {
return href;
}
if (!uri) {
uri = URI.parse(href);
}
// this URI will end up as "src"-attribute of a dom node
// and because of that special rewriting needs to be done
// so that the URI uses a protocol that's understood by
// browsers (like http or https)
return FileAccess.asBrowserUri(uri).toString(true);
}
if (!uri) {
return href;
}
if (URI.parse(href).toString() === uri.toString()) {
return href; // no transformation performed
}
@@ -100,19 +102,12 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
const withInnerHTML = new Promise<void>(c => signalInnerHTML = c);
const renderer = new marked.Renderer();
renderer.image = (href: string, title: string, text: string) => {
let dimensions: string[] = [];
let attributes: string[] = [];
if (href) {
({ href, dimensions } = parseHrefAndDimensions(href));
href = _href(href, true);
try {
const hrefAsUri = URI.parse(href);
if (options.baseUrl && hrefAsUri.scheme === Schemas.file) { // absolute or relative local path, or file: uri
href = resolvePath(options.baseUrl, href).toString();
}
} catch (err) { }
attributes.push(`src="${href}"`);
}
if (text) {
@@ -127,24 +122,25 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
return '<img ' + attributes.join(' ') + '>';
};
renderer.link = (href, title, text): string => {
if (typeof href !== 'string') {
return '';
}
// Remove markdown escapes. Workaround for https://github.com/chjj/marked/issues/829
if (href === text) { // raw link case
text = removeMarkdownEscapes(text);
}
href = _href(href, false);
if (options.baseUrl) {
const hasScheme = /^\w[\w\d+.-]*:/.test(href);
if (!hasScheme) {
href = resolvePath(options.baseUrl, href).toString();
}
if (markdown.baseUri) {
href = resolveWithBaseUri(URI.from(markdown.baseUri), href);
}
title = removeMarkdownEscapes(title);
title = typeof title === 'string' ? removeMarkdownEscapes(title) : '';
href = removeMarkdownEscapes(href);
if (
!href
|| href.match(/^data:|javascript:/i)
|| (href.match(/^command:/i) && !markdown.isTrusted)
|| href.match(/^command:(\/\/\/)?_workbench\.downloadResource/i)
|| /^data:|javascript:/i.test(href)
|| (/^command:/i.test(href) && !markdown.isTrusted)
|| /^command:(\/\/\/)?_workbench\.downloadResource/i.test(href)
) {
// drop the link
return text;
@@ -156,7 +152,7 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
return `<a href="#" data-href="${href}" title="${title || href}">${text}</a>`;
return `<a data-href="${href}" title="${title || href}">${text}</a>`;
}
};
renderer.paragraph = (text): string => {
@@ -165,13 +161,13 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
if (options.codeBlockRenderer) {
renderer.code = (code, lang) => {
const value = options.codeBlockRenderer!(lang, code);
const value = options.codeBlockRenderer!(lang ?? '', code);
// when code-block rendering is async we return sync
// but update the node with the real result later.
const id = defaultGenerator.nextId();
raceCancellation(Promise.all([value, withInnerHTML]), cts.token).then(values => {
if (!isDisposed && values) {
const span = <HTMLDivElement>element.querySelector(`div[data-code="${id}"]`);
const span = element.querySelector<HTMLDivElement>(`div[data-code="${id}"]`);
if (span) {
DOM.reset(span, values[0]);
}
@@ -203,8 +199,11 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
}
}
try {
const href = target.dataset['href'];
let href = target.dataset['href'];
if (href) {
if (markdown.baseUri) {
href = resolveWithBaseUri(URI.from(markdown.baseUri), href);
}
options.actionHandler!.callback(href, mouseEvent);
}
} catch (err) {
@@ -251,7 +250,25 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
renderedMarkdown = elements.map(e => typeof e === 'string' ? e : e.outerHTML).join('');
}
element.innerHTML = sanitizeRenderedMarkdown(markdown, renderedMarkdown) as unknown as string;
const htmlParser = new DOMParser();
const markdownHtmlDoc = htmlParser.parseFromString(sanitizeRenderedMarkdown(markdown, renderedMarkdown) as unknown as string, 'text/html');
markdownHtmlDoc.body.querySelectorAll('img')
.forEach(img => {
const src = img.getAttribute('src'); // Get the raw 'src' attribute value as text, not the resolved 'src'
if (src) {
let href = src;
try {
if (markdown.baseUri) { // absolute or relative local path, or file: uri
href = resolveWithBaseUri(URI.from(markdown.baseUri), href);
}
} catch (err) { }
img.src = _href(href, true);
}
});
element.innerHTML = sanitizeRenderedMarkdown(markdown, markdownHtmlDoc.body.innerHTML) as unknown as string;
// signal that async code blocks can be now be inserted
signalInnerHTML!();
@@ -276,6 +293,19 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
};
}
function resolveWithBaseUri(baseUri: URI, href: string): string {
const hasScheme = /^\w[\w\d+.-]*:/.test(href);
if (hasScheme) {
return href;
}
if (baseUri.path.endsWith('/')) {
return resolvePath(baseUri, href).toString();
} else {
return resolvePath(dirname(baseUri), href).toString();
}
}
function sanitizeRenderedMarkdown(
options: { isTrusted?: boolean },
renderedMarkdown: string,
@@ -297,31 +327,17 @@ function sanitizeRenderedMarkdown(
}
});
// build an anchor to map URLs to
const anchor = document.createElement('a');
// https://github.com/cure53/DOMPurify/blob/main/demos/hooks-scheme-allowlist.html
dompurify.addHook('afterSanitizeAttributes', (node) => {
// check all href/src attributes for validity
for (const attr of ['href', 'src']) {
if (node.hasAttribute(attr)) {
anchor.href = node.getAttribute(attr) as string;
if (!allowedSchemes.includes(anchor.protocol.replace(/:$/, ''))) {
node.removeAttribute(attr);
}
}
}
});
const hook = DOM.hookDomPurifyHrefAndSrcSanitizer(allowedSchemes);
try {
return dompurify.sanitize(renderedMarkdown, { ...config, RETURN_TRUSTED_TYPE: true });
} finally {
dompurify.removeHook('uponSanitizeAttribute');
dompurify.removeHook('afterSanitizeAttributes');
hook.dispose();
}
}
function getSanitizerOptions(options: { readonly isTrusted?: boolean }): { config: dompurify.Config, allowedSchemes: string[] } {
function getSanitizerOptions(options: { readonly isTrusted?: boolean }): { config: dompurify.Config; allowedSchemes: string[] } {
const allowedSchemes = [
Schemas.http,
Schemas.https,
src/vs/base/browser/touch.ts
+1 -1
View File
@@ -75,7 +75,7 @@ export class Gesture extends Disposable {
private ignoreTargets: HTMLElement[];
private handle: IDisposable | null;
private activeTouches: { [id: number]: TouchData; };
private activeTouches: { [id: number]: TouchData };
private _lastSetTapCountTime: number;
src/vs/base/browser/ui/actionbar/actionViewItems.ts
+1
View File
@@ -339,6 +339,7 @@ export class ActionViewItem extends BaseActionViewItem {
if (title && this.label) {
this.label.title = title;
this.label.setAttribute('aria-label', title);
}
}
src/vs/base/browser/ui/actionbar/actionbar.css
+1 -1
View File
@@ -54,7 +54,7 @@
.monaco-action-bar .action-item.disabled .action-label,
.monaco-action-bar .action-item.disabled .action-label::before,
.monaco-action-bar .action-item.disabled .action-label:hover {
opacity: 0.4;
color: var(--vscode-disabledForeground);
}
/* Vertical actions */
src/vs/base/browser/ui/actionbar/actionbar.ts
+63 -41
View File
@@ -43,6 +43,7 @@ export interface IActionBarOptions {
readonly actionViewItemProvider?: IActionViewItemProvider;
readonly actionRunner?: IActionRunner;
readonly ariaLabel?: string;
readonly ariaRole?: string;
readonly animated?: boolean;
readonly triggerKeys?: ActionTrigger;
readonly allowContextMenu?: boolean;
@@ -69,6 +70,8 @@ export class ActionBar extends Disposable implements IActionRunner {
// View Items
viewItems: IActionViewItem[];
private viewItemDisposables: Map<IActionViewItem, IDisposable>;
private previouslyFocusedItem?: number;
protected focusedItem?: number;
private focusTracker: DOM.IFocusTracker;
@@ -117,6 +120,7 @@ export class ActionBar extends Disposable implements IActionRunner {
this._actionIds = [];
this.viewItems = [];
this.viewItemDisposables = new Map<IActionViewItem, IDisposable>();
this.focusedItem = undefined;
this.domNode = document.createElement('div');
@@ -200,6 +204,7 @@ export class ActionBar extends Disposable implements IActionRunner {
if (DOM.getActiveElement() === this.domNode || !DOM.isAncestor(DOM.getActiveElement(), this.domNode)) {
this._onDidBlur.fire();
this.focusedItem = undefined;
this.previouslyFocusedItem = undefined;
this.triggerKeyDown = false;
}
}));
@@ -208,7 +213,7 @@ export class ActionBar extends Disposable implements IActionRunner {
this.actionsList = document.createElement('ul');
this.actionsList.className = 'actions-container';
this.actionsList.setAttribute('role', 'toolbar');
this.actionsList.setAttribute('role', this.options.ariaRole || 'toolbar');
if (this.options.ariaLabel) {
this.actionsList.setAttribute('aria-label', this.options.ariaLabel);
@@ -219,6 +224,14 @@ export class ActionBar extends Disposable implements IActionRunner {
container.appendChild(this.domNode);
}
private refreshRole(): void {
if (this.length() >= 2) {
this.actionsList.setAttribute('role', this.options.ariaRole || 'toolbar');
} else {
this.actionsList.setAttribute('role', 'presentation');
}
}
setAriaLabel(label: string): void {
if (label) {
this.actionsList.setAttribute('aria-label', label);
@@ -307,13 +320,6 @@ export class ActionBar extends Disposable implements IActionRunner {
actionViewItemElement.className = 'action-item';
actionViewItemElement.setAttribute('role', 'presentation');
// Prevent native context menu on actions
if (!this.options.allowContextMenu) {
this._register(DOM.addDisposableListener(actionViewItemElement, DOM.EventType.CONTEXT_MENU, (e: DOM.EventLike) => {
DOM.EventHelper.stop(e, true);
}));
}
let item: IActionViewItem | undefined;
if (this.options.actionViewItemProvider) {
@@ -324,6 +330,13 @@ export class ActionBar extends Disposable implements IActionRunner {
item = new ActionViewItem(this.context, action, options);
}
// Prevent native context menu on actions
if (!this.options.allowContextMenu) {
this.viewItemDisposables.set(item, DOM.addDisposableListener(actionViewItemElement, DOM.EventType.CONTEXT_MENU, (e: DOM.EventLike) => {
DOM.EventHelper.stop(e, true);
}));
}
item.actionRunner = this._actionRunner;
item.setActionContext(this.context);
item.render(actionViewItemElement);
@@ -348,6 +361,7 @@ export class ActionBar extends Disposable implements IActionRunner {
// After a clear actions might be re-added to simply toggle some actions. We should preserve focus #97128
this.focus(this.focusedItem);
}
this.refreshRole();
}
getWidth(index: number): number {
@@ -375,16 +389,22 @@ export class ActionBar extends Disposable implements IActionRunner {
pull(index: number): void {
if (index >= 0 && index < this.viewItems.length) {
this.actionsList.removeChild(this.actionsList.childNodes[index]);
this.viewItemDisposables.get(this.viewItems[index])?.dispose();
this.viewItemDisposables.delete(this.viewItems[index]);
dispose(this.viewItems.splice(index, 1));
this._actionIds.splice(index, 1);
this.refreshRole();
}
}
clear(): void {
dispose(this.viewItems);
this.viewItemDisposables.forEach(d => d.dispose());
this.viewItemDisposables.clear();
this.viewItems = [];
this._actionIds = [];
DOM.clearNode(this.actionsList);
this.refreshRole();
}
length(): number {
@@ -412,27 +432,27 @@ export class ActionBar extends Disposable implements IActionRunner {
const firstEnabled = this.viewItems.findIndex(item => item.isEnabled());
// Focus the first enabled item
this.focusedItem = firstEnabled === -1 ? undefined : firstEnabled;
this.updateFocus();
this.updateFocus(undefined, undefined, true);
} else {
if (index !== undefined) {
this.focusedItem = index;
}
this.updateFocus();
this.updateFocus(undefined, undefined, true);
}
}
private focusFirst(): boolean {
this.focusedItem = this.length() > 1 ? 1 : 0;
return this.focusPrevious();
this.focusedItem = this.length() - 1;
return this.focusNext(true);
}
private focusLast(): boolean {
this.focusedItem = this.length() < 2 ? 0 : this.length() - 2;
return this.focusNext();
this.focusedItem = 0;
return this.focusPrevious(true);
}
protected focusNext(): boolean {
protected focusNext(forceLoop?: boolean): boolean {
if (typeof this.focusedItem === 'undefined') {
this.focusedItem = this.viewItems.length - 1;
} else if (this.viewItems.length <= 1) {
@@ -443,20 +463,20 @@ export class ActionBar extends Disposable implements IActionRunner {
let item: IActionViewItem;
do {
if (this.options.preventLoopNavigation && this.focusedItem + 1 >= this.viewItems.length) {
if (!forceLoop && this.options.preventLoopNavigation && this.focusedItem + 1 >= this.viewItems.length) {
this.focusedItem = startIndex;
return false;
}
this.focusedItem = (this.focusedItem + 1) % this.viewItems.length;
item = this.viewItems[this.focusedItem];
} while (this.focusedItem !== startIndex && this.options.focusOnlyEnabledItems && !item.isEnabled());
} while (this.focusedItem !== startIndex && ((this.options.focusOnlyEnabledItems && !item.isEnabled()) || item.action.id === Separator.ID));
this.updateFocus();
return true;
}
protected focusPrevious(): boolean {
protected focusPrevious(forceLoop?: boolean): boolean {
if (typeof this.focusedItem === 'undefined') {
this.focusedItem = 0;
} else if (this.viewItems.length <= 1) {
@@ -469,7 +489,7 @@ export class ActionBar extends Disposable implements IActionRunner {
do {
this.focusedItem = this.focusedItem - 1;
if (this.focusedItem < 0) {
if (this.options.preventLoopNavigation) {
if (!forceLoop && this.options.preventLoopNavigation) {
this.focusedItem = startIndex;
return false;
}
@@ -477,42 +497,44 @@ export class ActionBar extends Disposable implements IActionRunner {
this.focusedItem = this.viewItems.length - 1;
}
item = this.viewItems[this.focusedItem];
} while (this.focusedItem !== startIndex && this.options.focusOnlyEnabledItems && !item.isEnabled());
} while (this.focusedItem !== startIndex && ((this.options.focusOnlyEnabledItems && !item.isEnabled()) || item.action.id === Separator.ID));
this.updateFocus(true);
return true;
}
protected updateFocus(fromRight?: boolean, preventScroll?: boolean): void {
protected updateFocus(fromRight?: boolean, preventScroll?: boolean, forceFocus: boolean = false): void {
if (typeof this.focusedItem === 'undefined') {
this.actionsList.focus({ preventScroll });
}
for (let i = 0; i < this.viewItems.length; i++) {
const item = this.viewItems[i];
const actionViewItem = item;
if (this.previouslyFocusedItem !== undefined && this.previouslyFocusedItem !== this.focusedItem) {
this.viewItems[this.previouslyFocusedItem]?.blur();
}
if (i === this.focusedItem) {
let focusItem = true;
const actionViewItem = this.focusedItem !== undefined && this.viewItems[this.focusedItem];
if (actionViewItem) {
let focusItem = true;
if (!types.isFunction(actionViewItem.focus)) {
focusItem = false;
}
if (!types.isFunction(actionViewItem.focus)) {
focusItem = false;
}
if (this.options.focusOnlyEnabledItems && types.isFunction(item.isEnabled) && !item.isEnabled()) {
focusItem = false;
}
if (this.options.focusOnlyEnabledItems && types.isFunction(actionViewItem.isEnabled) && !actionViewItem.isEnabled()) {
focusItem = false;
}
if (focusItem) {
actionViewItem.focus(fromRight);
} else {
this.actionsList.focus({ preventScroll });
}
} else {
if (types.isFunction(actionViewItem.blur)) {
actionViewItem.blur();
}
if (actionViewItem.action.id === Separator.ID) {
focusItem = false;
}
if (!focusItem) {
this.actionsList.focus({ preventScroll });
this.previouslyFocusedItem = undefined;
} else if (forceFocus || this.previouslyFocusedItem !== this.focusedItem) {
actionViewItem.focus(fromRight);
this.previouslyFocusedItem = this.focusedItem;
}
}
}
src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts
+12 -5
View File
@@ -7,7 +7,7 @@ import * as dom from 'vs/base/browser/dom';
import { IMouseEvent } from 'vs/base/browser/mouseEvent';
import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
import { commonPrefixLength } from 'vs/base/common/arrays';
import { Codicon, registerCodicon } from 'vs/base/common/codicons';
import { CSSIcon } from 'vs/base/common/codicons';
import { Color } from 'vs/base/common/color';
import { Emitter, Event } from 'vs/base/common/event';
import { DisposableStore, dispose, IDisposable } from 'vs/base/common/lifecycle';
@@ -35,8 +35,6 @@ export interface IBreadcrumbsItemEvent {
payload: any;
}
const breadcrumbSeparatorIcon = registerCodicon('breadcrumb-separator', Codicon.chevronRight);
export class BreadcrumbsWidget {
private readonly _disposables = new DisposableStore();
@@ -55,6 +53,7 @@ export class BreadcrumbsWidget {
private readonly _items = new Array<BreadcrumbsItem>();
private readonly _nodes = new Array<HTMLDivElement>();
private readonly _freeNodes = new Array<HTMLDivElement>();
private readonly _separatorIcon: CSSIcon;
private _enabled: boolean = true;
private _focusedItemIdx: number = -1;
@@ -66,6 +65,7 @@ export class BreadcrumbsWidget {
constructor(
container: HTMLElement,
horizontalScrollbarSize: number,
separatorIcon: CSSIcon
) {
this._domNode = document.createElement('div');
this._domNode.className = 'monaco-breadcrumbs';
@@ -78,6 +78,7 @@ export class BreadcrumbsWidget {
useShadows: false,
scrollYToX: true
});
this._separatorIcon = separatorIcon;
this._disposables.add(this._scrollable);
this._disposables.add(dom.addStandardDisposableListener(this._domNode, 'click', e => this._onClick(e)));
container.appendChild(this._scrollable.getDomNode());
@@ -288,10 +289,12 @@ export class BreadcrumbsWidget {
}
private _render(start: number): void {
let didChange = false;
for (; start < this._items.length && start < this._nodes.length; start++) {
let item = this._items[start];
let node = this._nodes[start];
this._renderItem(item, node);
didChange = true;
}
// case a: more nodes -> remove them
while (start < this._nodes.length) {
@@ -299,6 +302,7 @@ export class BreadcrumbsWidget {
if (free) {
this._freeNodes.push(free);
free.remove();
didChange = true;
}
}
@@ -310,9 +314,12 @@ export class BreadcrumbsWidget {
this._renderItem(item, node);
this._domNode.appendChild(node);
this._nodes.push(node);
didChange = true;
}
}
this.layout(undefined);
if (didChange) {
this.layout(undefined);
}
}
private _renderItem(item: BreadcrumbsItem, container: HTMLDivElement): void {
@@ -327,7 +334,7 @@ export class BreadcrumbsWidget {
container.tabIndex = -1;
container.setAttribute('role', 'listitem');
container.classList.add('monaco-breadcrumb-item');
const iconContainer = dom.$(breadcrumbSeparatorIcon.cssSelector);
const iconContainer = dom.$(CSSIcon.asCSSSelector(this._separatorIcon));
container.appendChild(iconContainer);
}
src/vs/base/browser/ui/button/button.css
+15
View File
@@ -53,3 +53,18 @@
.monaco-description-button .monaco-button-description {
font-style: italic;
}
.monaco-description-button .monaco-button-label,
.monaco-description-button .monaco-button-description
{
display: flex;
justify-content: center;
align-items: center;
}
.monaco-description-button .monaco-button-label > .codicon,
.monaco-description-button .monaco-button-description > .codicon
{
margin: 0 0.2em;
color: inherit !important;
}
src/vs/base/browser/ui/button/button.ts
+5 -162
View File
@@ -61,8 +61,8 @@ export interface IButtonWithDescription extends IButton {
export class Button extends Disposable implements IButton {
private _element: HTMLElement;
private options: IButtonOptions;
protected _element: HTMLElement;
protected options: IButtonOptions;
private buttonBackground: Color | undefined;
private buttonHoverBackground: Color | undefined;
@@ -386,47 +386,15 @@ export class ButtonWithDropdown extends Disposable implements IButton {
}
}
export class ButtonWithDescription extends Disposable implements IButtonWithDescription {
export class ButtonWithDescription extends Button implements IButtonWithDescription {
private _element: HTMLElement;
private _labelElement: HTMLElement;
private _descriptionElement: HTMLElement;
private options: IButtonOptions;
private buttonBackground: Color | undefined;
private buttonHoverBackground: Color | undefined;
private buttonForeground: Color | undefined;
private buttonSecondaryBackground: Color | undefined;
private buttonSecondaryHoverBackground: Color | undefined;
private buttonSecondaryForeground: Color | undefined;
private buttonBorder: Color | undefined;
private _onDidClick = this._register(new Emitter<Event>());
get onDidClick(): BaseEvent<Event> { return this._onDidClick.event; }
private focusTracker: IFocusTracker;
constructor(container: HTMLElement, options?: IButtonOptions) {
super();
super(container, options);
this.options = options || Object.create(null);
mixin(this.options, defaultOptions, false);
this.buttonForeground = this.options.buttonForeground;
this.buttonBackground = this.options.buttonBackground;
this.buttonHoverBackground = this.options.buttonHoverBackground;
this.buttonSecondaryForeground = this.options.buttonSecondaryForeground;
this.buttonSecondaryBackground = this.options.buttonSecondaryBackground;
this.buttonSecondaryHoverBackground = this.options.buttonSecondaryHoverBackground;
this.buttonBorder = this.options.buttonBorder;
this._element = document.createElement('a');
this._element.classList.add('monaco-button');
this._element.classList.add('monaco-description-button');
this._element.tabIndex = 0;
this._element.setAttribute('role', 'button');
this._labelElement = document.createElement('div');
this._labelElement.classList.add('monaco-button-label');
@@ -437,107 +405,9 @@ export class ButtonWithDescription extends Disposable implements IButtonWithDesc
this._descriptionElement.classList.add('monaco-button-description');
this._descriptionElement.tabIndex = -1;
this._element.appendChild(this._descriptionElement);
container.appendChild(this._element);
this._register(Gesture.addTarget(this._element));
[EventType.CLICK, TouchEventType.Tap].forEach(eventType => {
this._register(addDisposableListener(this._element, eventType, e => {
if (!this.enabled) {
EventHelper.stop(e);
return;
}
this._onDidClick.fire(e);
}));
});
this._register(addDisposableListener(this._element, EventType.KEY_DOWN, e => {
const event = new StandardKeyboardEvent(e);
let eventHandled = false;
if (this.enabled && (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space))) {
this._onDidClick.fire(e);
eventHandled = true;
} else if (event.equals(KeyCode.Escape)) {
this._element.blur();
eventHandled = true;
}
if (eventHandled) {
EventHelper.stop(event, true);
}
}));
this._register(addDisposableListener(this._element, EventType.MOUSE_OVER, e => {
if (!this._element.classList.contains('disabled')) {
this.setHoverBackground();
}
}));
this._register(addDisposableListener(this._element, EventType.MOUSE_OUT, e => {
this.applyStyles(); // restore standard styles
}));
// Also set hover background when button is focused for feedback
this.focusTracker = this._register(trackFocus(this._element));
this._register(this.focusTracker.onDidFocus(() => this.setHoverBackground()));
this._register(this.focusTracker.onDidBlur(() => this.applyStyles())); // restore standard styles
this.applyStyles();
}
private setHoverBackground(): void {
let hoverBackground;
if (this.options.secondary) {
hoverBackground = this.buttonSecondaryHoverBackground ? this.buttonSecondaryHoverBackground.toString() : null;
} else {
hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null;
}
if (hoverBackground) {
this._element.style.backgroundColor = hoverBackground;
}
}
style(styles: IButtonStyles): void {
this.buttonForeground = styles.buttonForeground;
this.buttonBackground = styles.buttonBackground;
this.buttonHoverBackground = styles.buttonHoverBackground;
this.buttonSecondaryForeground = styles.buttonSecondaryForeground;
this.buttonSecondaryBackground = styles.buttonSecondaryBackground;
this.buttonSecondaryHoverBackground = styles.buttonSecondaryHoverBackground;
this.buttonBorder = styles.buttonBorder;
this.applyStyles();
}
private applyStyles(): void {
if (this._element) {
let background, foreground;
if (this.options.secondary) {
foreground = this.buttonSecondaryForeground ? this.buttonSecondaryForeground.toString() : '';
background = this.buttonSecondaryBackground ? this.buttonSecondaryBackground.toString() : '';
} else {
foreground = this.buttonForeground ? this.buttonForeground.toString() : '';
background = this.buttonBackground ? this.buttonBackground.toString() : '';
}
const border = this.buttonBorder ? this.buttonBorder.toString() : '';
this._element.style.color = foreground;
this._element.style.backgroundColor = background;
this._element.style.borderWidth = border ? '1px' : '';
this._element.style.borderStyle = border ? 'solid' : '';
this._element.style.borderColor = border;
}
}
get element(): HTMLElement {
return this._element;
}
set label(value: string) {
override set label(value: string) {
this._element.classList.add('monaco-text-button');
if (this.options.supportIcons) {
reset(this._labelElement, ...renderLabelWithIcons(value));
@@ -558,33 +428,6 @@ export class ButtonWithDescription extends Disposable implements IButtonWithDesc
this._descriptionElement.textContent = value;
}
}
set icon(icon: CSSIcon) {
this._element.classList.add(...CSSIcon.asClassNameArray(icon));
}
set enabled(value: boolean) {
if (value) {
this._element.classList.remove('disabled');
this._element.setAttribute('aria-disabled', String(false));
this._element.tabIndex = 0;
} else {
this._element.classList.add('disabled');
this._element.setAttribute('aria-disabled', String(true));
}
}
get enabled() {
return !this._element.classList.contains('disabled');
}
focus(): void {
this._element.focus();
}
hasFocus(): boolean {
return this._element === document.activeElement;
}
}
export class ButtonBar extends Disposable {
src/vs/base/browser/ui/centered/centeredViewLayout.ts
+4 -4
View File
@@ -21,7 +21,7 @@ const GOLDEN_RATIO = {
rightMarginRatio: 0.1909
};
function createEmptyView(background: Color | undefined): ISplitViewView<{ top: number, left: number }> {
function createEmptyView(background: Color | undefined): ISplitViewView<{ top: number; left: number }> {
const element = $('.centered-layout-margin');
element.style.height = '100%';
if (background) {
@@ -37,7 +37,7 @@ function createEmptyView(background: Color | undefined): ISplitViewView<{ top: n
};
}
function toSplitViewView(view: IView, getHeight: () => number): ISplitViewView<{ top: number, left: number }> {
function toSplitViewView(view: IView, getHeight: () => number): ISplitViewView<{ top: number; left: number }> {
return {
element: view.element,
get maximumSize() { return view.maximumWidth; },
@@ -53,12 +53,12 @@ export interface ICenteredViewStyles extends ISplitViewStyles {
export class CenteredViewLayout implements IDisposable {
private splitView?: SplitView<{ top: number, left: number }>;
private splitView?: SplitView<{ top: number; left: number }>;
private width: number = 0;
private height: number = 0;
private style!: ICenteredViewStyles;
private didLayout = false;
private emptyViews: ISplitViewView<{ top: number, left: number }>[] | undefined;
private emptyViews: ISplitViewView<{ top: number; left: number }>[] | undefined;
private readonly splitViewDisposables = new DisposableStore();
constructor(private container: HTMLElement, private view: IView, public readonly state: CenteredViewState = { leftMarginRatio: GOLDEN_RATIO.leftMarginRatio, rightMarginRatio: GOLDEN_RATIO.rightMarginRatio }) {
src/vs/base/browser/ui/codicons/codicon/codicon.css
+2 -1
View File
@@ -15,6 +15,7 @@
text-decoration: none;
text-rendering: auto;
text-align: center;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
user-select: none;
@@ -22,4 +23,4 @@
-ms-user-select: none;
}
/* icon rules are dynamically created in codiconStyles */
/* icon rules are dynamically created by the platform theme service (see iconsStyleSheet.ts) */
src/vs/base/browser/ui/codicons/codicon/codicon.ttf
BIN
View File
Binary file not shown.
src/vs/base/browser/ui/contextview/contextview.ts
+1 -1
View File
@@ -130,7 +130,7 @@ export class ContextView extends Disposable {
private shadowRoot: ShadowRoot | null = null;
private shadowRootHostElement: HTMLElement | null = null;
constructor(container: HTMLElement, domPosition: ContextViewDOMPosition) {
constructor(container: HTMLElement | null, domPosition: ContextViewDOMPosition) {
super();
this.view = DOM.$('.context-view');
src/vs/base/browser/ui/dialog/dialog.ts
+21 -16
View File
@@ -7,10 +7,10 @@ import { $, addDisposableListener, clearNode, EventHelper, EventType, hide, isAn
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { ButtonBar, ButtonWithDescription, IButtonStyles } from 'vs/base/browser/ui/button/button';
import { ISimpleCheckboxStyles, SimpleCheckbox } from 'vs/base/browser/ui/checkbox/checkbox';
import { ICheckboxStyles, Checkbox } from 'vs/base/browser/ui/toggle/toggle';
import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
import { Action } from 'vs/base/common/actions';
import { Codicon, registerCodicon } from 'vs/base/common/codicons';
import { Codicon } from 'vs/base/common/codicons';
import { Color } from 'vs/base/common/color';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
import { mnemonicButtonLabel } from 'vs/base/common/labels';
@@ -37,6 +37,7 @@ export interface IDialogOptions {
readonly icon?: Codicon;
readonly buttonDetails?: string[];
readonly disableCloseAction?: boolean;
readonly disableDefaultAction?: boolean;
}
export interface IDialogResult {
@@ -45,7 +46,7 @@ export interface IDialogResult {
readonly values?: string[];
}
export interface IDialogStyles extends IButtonStyles, ISimpleCheckboxStyles {
export interface IDialogStyles extends IButtonStyles, ICheckboxStyles {
readonly dialogForeground?: Color;
readonly dialogBackground?: Color;
readonly dialogShadow?: Color;
@@ -65,11 +66,6 @@ interface ButtonMapEntry {
readonly index: number;
}
const dialogErrorIcon = registerCodicon('dialog-error', Codicon.error);
const dialogWarningIcon = registerCodicon('dialog-warning', Codicon.warning);
const dialogInfoIcon = registerCodicon('dialog-info', Codicon.info);
const dialogCloseIcon = registerCodicon('dialog-close', Codicon.close);
export class Dialog extends Disposable {
private readonly element: HTMLElement;
private readonly shadowElement: HTMLElement;
@@ -78,7 +74,7 @@ export class Dialog extends Disposable {
private readonly messageDetailElement: HTMLElement;
private readonly messageContainer: HTMLElement;
private readonly iconElement: HTMLElement;
private readonly checkbox: SimpleCheckbox | undefined;
private readonly checkbox: Checkbox | undefined;
private readonly toolbarContainer: HTMLElement;
private buttonBar: ButtonBar | undefined;
private styles: IDialogStyles | undefined;
@@ -96,7 +92,13 @@ export class Dialog extends Disposable {
this.element.tabIndex = -1;
hide(this.element);
this.buttons = Array.isArray(buttons) && buttons.length ? buttons : [nls.localize('ok', "OK")]; // If no button is provided, default to OK
if (Array.isArray(buttons) && buttons.length > 0) {
this.buttons = buttons;
} else if (!this.options.disableDefaultAction) {
this.buttons = [nls.localize('ok', "OK")];
} else {
this.buttons = [];
}
const buttonsRowElement = this.element.appendChild($('.dialog-buttons-row'));
this.buttonsContainer = buttonsRowElement.appendChild($('.dialog-buttons'));
@@ -149,7 +151,7 @@ export class Dialog extends Disposable {
if (this.options.checkboxLabel) {
const checkboxRowElement = this.messageContainer.appendChild($('.dialog-checkbox-row'));
const checkbox = this.checkbox = this._register(new SimpleCheckbox(this.options.checkboxLabel, !!this.options.checkboxChecked));
const checkbox = this.checkbox = this._register(new Checkbox(this.options.checkboxLabel, !!this.options.checkboxChecked));
checkboxRowElement.appendChild(checkbox.domNode);
@@ -350,17 +352,17 @@ export class Dialog extends Disposable {
const spinModifierClassName = 'codicon-modifier-spin';
this.iconElement.classList.remove(...dialogErrorIcon.classNamesArray, ...dialogWarningIcon.classNamesArray, ...dialogInfoIcon.classNamesArray, ...Codicon.loading.classNamesArray, spinModifierClassName);
this.iconElement.classList.remove(...Codicon.dialogError.classNamesArray, ...Codicon.dialogWarning.classNamesArray, ...Codicon.dialogInfo.classNamesArray, ...Codicon.loading.classNamesArray, spinModifierClassName);
if (this.options.icon) {
this.iconElement.classList.add(...this.options.icon.classNamesArray);
} else {
switch (this.options.type) {
case 'error':
this.iconElement.classList.add(...dialogErrorIcon.classNamesArray);
this.iconElement.classList.add(...Codicon.dialogError.classNamesArray);
break;
case 'warning':
this.iconElement.classList.add(...dialogWarningIcon.classNamesArray);
this.iconElement.classList.add(...Codicon.dialogWarning.classNamesArray);
break;
case 'pending':
this.iconElement.classList.add(...Codicon.loading.classNamesArray, spinModifierClassName);
@@ -369,7 +371,7 @@ export class Dialog extends Disposable {
case 'info':
case 'question':
default:
this.iconElement.classList.add(...dialogInfoIcon.classNamesArray);
this.iconElement.classList.add(...Codicon.dialogInfo.classNamesArray);
break;
}
}
@@ -378,7 +380,7 @@ export class Dialog extends Disposable {
if (!this.options.disableCloseAction) {
const actionBar = this._register(new ActionBar(this.toolbarContainer, {}));
const action = this._register(new Action('dialog.close', nls.localize('dialogClose', "Close Dialog"), dialogCloseIcon.classNames, true, async () => {
const action = this._register(new Action('dialog.close', nls.localize('dialogClose', "Close Dialog"), Codicon.dialogClose.classNames, true, async () => {
resolve({
button: this.options.cancelId || 0,
checkboxChecked: this.checkbox ? this.checkbox.checked : undefined
@@ -488,6 +490,9 @@ export class Dialog extends Disposable {
private rearrangeButtons(buttons: Array<string>, cancelId: number | undefined): ButtonMapEntry[] {
const buttonMap: ButtonMapEntry[] = [];
if (buttons.length === 0) {
return buttonMap;
}
// Maps each button to its current label and old index so that when we move them around it's not a problem
buttons.forEach((button, index) => {
src/vs/base/browser/ui/dropdown/dropdown.ts
+2 -2
View File
@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { IContextMenuProvider } from 'vs/base/browser/contextmenu';
import { $, addDisposableListener, append, DOMEvent, EventHelper, EventType } from 'vs/base/browser/dom';
import { $, addDisposableListener, append, EventHelper, EventType } from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { EventType as GestureEventType, Gesture } from 'vs/base/browser/touch';
import { AnchorAlignment, IAnchor, IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
@@ -121,7 +121,7 @@ export class BaseDropdown extends ActionRunner {
return !!this.visible;
}
protected onEvent(e: DOMEvent, activeElement: HTMLElement): void {
protected onEvent(_e: Event, activeElement: HTMLElement): void {
this.hide();
}
src/vs/base/browser/ui/dropdown/dropdownActionViewItem.ts
+2 -4
View File
@@ -88,6 +88,7 @@ export class DropdownMenuActionViewItem extends BaseActionViewItem {
this.element.setAttribute('aria-haspopup', 'true');
this.element.setAttribute('aria-expanded', 'false');
this.element.title = this._action.label || '';
this.element.ariaLabel = this._action.label || '';
return null;
};
@@ -178,10 +179,7 @@ export class ActionWithDropdownActionViewItem extends ActionViewItem {
const menuActionsProvider = {
getActions: () => {
const actionsProvider = (<IActionWithDropdownActionViewItemOptions>this.options).menuActionsOrProvider;
return [this._action, ...(Array.isArray(actionsProvider)
? actionsProvider
: (actionsProvider as IActionProvider).getActions()) // TODO: microsoft/TypeScript#42768
];
return Array.isArray(actionsProvider) ? actionsProvider : (actionsProvider as IActionProvider).getActions(); // TODO: microsoft/TypeScript#42768
}
};
this.dropdownMenuActionViewItem = new DropdownMenuActionViewItem(this._register(new Action('dropdownAction', undefined)), menuActionsProvider, this.contextMenuProvider, { classNames: ['dropdown', ...Codicon.dropDownButton.classNamesArray, ...(<IActionWithDropdownActionViewItemOptions>this.options).menuActionClassNames || []] });
src/vs/base/browser/ui/findinput/findInput.css
+7 -2
View File
@@ -29,16 +29,21 @@
}
/* Highlighting */
.monaco-findInput.highlight-0 .controls {
.monaco-findInput.highlight-0 .controls,
.hc-light .monaco-findInput.highlight-0 .controls {
animation: monaco-findInput-highlight-0 100ms linear 0s;
}
.monaco-findInput.highlight-1 .controls {
.monaco-findInput.highlight-1 .controls,
.hc-light .monaco-findInput.highlight-1 .controls {
animation: monaco-findInput-highlight-1 100ms linear 0s;
}
.hc-black .monaco-findInput.highlight-0 .controls,
.vs-dark .monaco-findInput.highlight-0 .controls {
animation: monaco-findInput-highlight-dark-0 100ms linear 0s;
}
.hc-black .monaco-findInput.highlight-1 .controls,
.vs-dark .monaco-findInput.highlight-1 .controls {
animation: monaco-findInput-highlight-dark-1 100ms linear 0s;
src/vs/base/browser/ui/findinput/findInput.ts
+35 -34
View File
@@ -6,9 +6,9 @@
import * as dom from 'vs/base/browser/dom';
import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { IMouseEvent } from 'vs/base/browser/mouseEvent';
import { ICheckboxStyles } from 'vs/base/browser/ui/checkbox/checkbox';
import { IToggleStyles } from 'vs/base/browser/ui/toggle/toggle';
import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
import { CaseSensitiveCheckbox, RegexCheckbox, WholeWordsCheckbox } from 'vs/base/browser/ui/findinput/findInputCheckboxes';
import { CaseSensitiveToggle, RegexToggle, WholeWordsToggle } from 'vs/base/browser/ui/findinput/findInputToggles';
import { HistoryInputBox, IInputBoxStyles, IInputValidator, IMessage as InputBoxMessage } from 'vs/base/browser/ui/inputbox/inputBox';
import { Widget } from 'vs/base/browser/ui/widget';
import { Color } from 'vs/base/common/color';
@@ -53,26 +53,27 @@ export class FindInput extends Widget {
private fixFocusOnOptionClickEnabled = true;
private imeSessionInProgress = false;
private inputActiveOptionBorder?: Color;
private inputActiveOptionForeground?: Color;
private inputActiveOptionBackground?: Color;
private inputBackground?: Color;
private inputForeground?: Color;
private inputBorder?: Color;
protected inputActiveOptionBorder?: Color;
protected inputActiveOptionForeground?: Color;
protected inputActiveOptionBackground?: Color;
protected inputBackground?: Color;
protected inputForeground?: Color;
protected inputBorder?: Color;
private inputValidationInfoBorder?: Color;
private inputValidationInfoBackground?: Color;
private inputValidationInfoForeground?: Color;
private inputValidationWarningBorder?: Color;
private inputValidationWarningBackground?: Color;
private inputValidationWarningForeground?: Color;
private inputValidationErrorBorder?: Color;
private inputValidationErrorBackground?: Color;
private inputValidationErrorForeground?: Color;
protected inputValidationInfoBorder?: Color;
protected inputValidationInfoBackground?: Color;
protected inputValidationInfoForeground?: Color;
protected inputValidationWarningBorder?: Color;
protected inputValidationWarningBackground?: Color;
protected inputValidationWarningForeground?: Color;
protected inputValidationErrorBorder?: Color;
protected inputValidationErrorBackground?: Color;
protected inputValidationErrorForeground?: Color;
private regex: RegexCheckbox;
private wholeWords: WholeWordsCheckbox;
private caseSensitive: CaseSensitiveCheckbox;
protected controls: HTMLDivElement;
protected regex: RegexToggle;
protected wholeWords: WholeWordsToggle;
protected caseSensitive: CaseSensitiveToggle;
public domNode: HTMLElement;
public inputBox: HistoryInputBox;
@@ -157,7 +158,7 @@ export class FindInput extends Widget {
flexibleMaxHeight
}));
this.regex = this._register(new RegexCheckbox({
this.regex = this._register(new RegexToggle({
appendTitle: appendRegexLabel,
isChecked: false,
inputActiveOptionBorder: this.inputActiveOptionBorder,
@@ -175,7 +176,7 @@ export class FindInput extends Widget {
this._onRegexKeyDown.fire(e);
}));
this.wholeWords = this._register(new WholeWordsCheckbox({
this.wholeWords = this._register(new WholeWordsToggle({
appendTitle: appendWholeWordsLabel,
isChecked: false,
inputActiveOptionBorder: this.inputActiveOptionBorder,
@@ -190,7 +191,7 @@ export class FindInput extends Widget {
this.validate();
}));
this.caseSensitive = this._register(new CaseSensitiveCheckbox({
this.caseSensitive = this._register(new CaseSensitiveToggle({
appendTitle: appendCaseSensitiveLabel,
isChecked: false,
inputActiveOptionBorder: this.inputActiveOptionBorder,
@@ -242,14 +243,14 @@ export class FindInput extends Widget {
});
let controls = document.createElement('div');
controls.className = 'controls';
controls.style.display = this._showOptionButtons ? 'block' : 'none';
controls.appendChild(this.caseSensitive.domNode);
controls.appendChild(this.wholeWords.domNode);
controls.appendChild(this.regex.domNode);
this.controls = document.createElement('div');
this.controls.className = 'controls';
this.controls.style.display = this._showOptionButtons ? 'block' : 'none';
this.controls.appendChild(this.caseSensitive.domNode);
this.controls.appendChild(this.wholeWords.domNode);
this.controls.appendChild(this.regex.domNode);
this.domNode.appendChild(controls);
this.domNode.appendChild(this.controls);
if (parent) {
parent.appendChild(this.domNode);
@@ -348,14 +349,14 @@ export class FindInput extends Widget {
protected applyStyles(): void {
if (this.domNode) {
const checkBoxStyles: ICheckboxStyles = {
const toggleStyles: IToggleStyles = {
inputActiveOptionBorder: this.inputActiveOptionBorder,
inputActiveOptionForeground: this.inputActiveOptionForeground,
inputActiveOptionBackground: this.inputActiveOptionBackground,
};
this.regex.style(checkBoxStyles);
this.wholeWords.style(checkBoxStyles);
this.caseSensitive.style(checkBoxStyles);
this.regex.style(toggleStyles);
this.wholeWords.style(toggleStyles);
this.caseSensitive.style(toggleStyles);
const inputBoxStyles: IInputBoxStyles = {
inputBackground: this.inputBackground,
src/vs/base/browser/ui/findinput/findInputCheckboxes.ts → src/vs/base/browser/ui/findinput/findInputToggles.ts
+14 -14
View File
@@ -3,12 +3,12 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
import { Toggle } from 'vs/base/browser/ui/toggle/toggle';
import { Codicon } from 'vs/base/common/codicons';
import { Color } from 'vs/base/common/color';
import * as nls from 'vs/nls';
export interface IFindInputCheckboxOpts {
export interface IFindInputToggleOpts {
readonly appendTitle: string;
readonly isChecked: boolean;
readonly inputActiveOptionBorder?: Color;
@@ -16,15 +16,15 @@ export interface IFindInputCheckboxOpts {
readonly inputActiveOptionBackground?: Color;
}
const NLS_CASE_SENSITIVE_CHECKBOX_LABEL = nls.localize('caseDescription', "Match Case");
const NLS_WHOLE_WORD_CHECKBOX_LABEL = nls.localize('wordsDescription', "Match Whole Word");
const NLS_REGEX_CHECKBOX_LABEL = nls.localize('regexDescription', "Use Regular Expression");
const NLS_CASE_SENSITIVE_TOGGLE_LABEL = nls.localize('caseDescription', "Match Case");
const NLS_WHOLE_WORD_TOGGLE_LABEL = nls.localize('wordsDescription', "Match Whole Word");
const NLS_REGEX_TOGGLE_LABEL = nls.localize('regexDescription', "Use Regular Expression");
export class CaseSensitiveCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
export class CaseSensitiveToggle extends Toggle {
constructor(opts: IFindInputToggleOpts) {
super({
icon: Codicon.caseSensitive,
title: NLS_CASE_SENSITIVE_CHECKBOX_LABEL + opts.appendTitle,
title: NLS_CASE_SENSITIVE_TOGGLE_LABEL + opts.appendTitle,
isChecked: opts.isChecked,
inputActiveOptionBorder: opts.inputActiveOptionBorder,
inputActiveOptionForeground: opts.inputActiveOptionForeground,
@@ -33,11 +33,11 @@ export class CaseSensitiveCheckbox extends Checkbox {
}
}
export class WholeWordsCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
export class WholeWordsToggle extends Toggle {
constructor(opts: IFindInputToggleOpts) {
super({
icon: Codicon.wholeWord,
title: NLS_WHOLE_WORD_CHECKBOX_LABEL + opts.appendTitle,
title: NLS_WHOLE_WORD_TOGGLE_LABEL + opts.appendTitle,
isChecked: opts.isChecked,
inputActiveOptionBorder: opts.inputActiveOptionBorder,
inputActiveOptionForeground: opts.inputActiveOptionForeground,
@@ -46,11 +46,11 @@ export class WholeWordsCheckbox extends Checkbox {
}
}
export class RegexCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
export class RegexToggle extends Toggle {
constructor(opts: IFindInputToggleOpts) {
super({
icon: Codicon.regex,
title: NLS_REGEX_CHECKBOX_LABEL + opts.appendTitle,
title: NLS_REGEX_TOGGLE_LABEL + opts.appendTitle,
isChecked: opts.isChecked,
inputActiveOptionBorder: opts.inputActiveOptionBorder,
inputActiveOptionForeground: opts.inputActiveOptionForeground,
src/vs/base/browser/ui/findinput/replaceInput.ts
+9 -9
View File
@@ -6,9 +6,9 @@
import * as dom from 'vs/base/browser/dom';
import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { IMouseEvent } from 'vs/base/browser/mouseEvent';
import { Checkbox, ICheckboxStyles } from 'vs/base/browser/ui/checkbox/checkbox';
import { Toggle, IToggleStyles } from 'vs/base/browser/ui/toggle/toggle';
import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
import { IFindInputCheckboxOpts } from 'vs/base/browser/ui/findinput/findInputCheckboxes';
import { IFindInputToggleOpts } from 'vs/base/browser/ui/findinput/findInputToggles';
import { HistoryInputBox, IInputBoxStyles, IInputValidator, IMessage as InputBoxMessage } from 'vs/base/browser/ui/inputbox/inputBox';
import { Widget } from 'vs/base/browser/ui/widget';
import { Codicon } from 'vs/base/common/codicons';
@@ -40,10 +40,10 @@ export interface IReplaceInputStyles extends IInputBoxStyles {
}
const NLS_DEFAULT_LABEL = nls.localize('defaultLabel', "input");
const NLS_PRESERVE_CASE_LABEL = nls.localize('label.preserveCaseCheckbox', "Preserve Case");
const NLS_PRESERVE_CASE_LABEL = nls.localize('label.preserveCaseToggle', "Preserve Case");
export class PreserveCaseCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
export class PreserveCaseToggle extends Toggle {
constructor(opts: IFindInputToggleOpts) {
super({
// TODO: does this need its own icon?
icon: Codicon.preserveCase,
@@ -83,7 +83,7 @@ export class ReplaceInput extends Widget {
private inputValidationErrorBackground?: Color;
private inputValidationErrorForeground?: Color;
private preserveCase: PreserveCaseCheckbox;
private preserveCase: PreserveCaseToggle;
private cachedOptionsWidth: number = 0;
public domNode: HTMLElement;
public inputBox: HistoryInputBox;
@@ -164,7 +164,7 @@ export class ReplaceInput extends Widget {
flexibleMaxHeight
}));
this.preserveCase = this._register(new PreserveCaseCheckbox({
this.preserveCase = this._register(new PreserveCaseToggle({
appendTitle: appendPreserveCaseLabel,
isChecked: false,
inputActiveOptionBorder: this.inputActiveOptionBorder,
@@ -302,12 +302,12 @@ export class ReplaceInput extends Widget {
protected applyStyles(): void {
if (this.domNode) {
const checkBoxStyles: ICheckboxStyles = {
const toggleStyles: IToggleStyles = {
inputActiveOptionBorder: this.inputActiveOptionBorder,
inputActiveOptionForeground: this.inputActiveOptionForeground,
inputActiveOptionBackground: this.inputActiveOptionBackground,
};
this.preserveCase.style(checkBoxStyles);
this.preserveCase.style(toggleStyles);
const inputBoxStyles: IInputBoxStyles = {
inputBackground: this.inputBackground,
src/vs/base/browser/ui/grid/grid.ts
+245 -31
View File
@@ -9,6 +9,9 @@ import { Event } from 'vs/base/common/event';
import { Disposable } from 'vs/base/common/lifecycle';
import 'vs/css!./gridview';
import { Box, GridView, IBoundarySashes, IGridViewOptions, IGridViewStyles, IView as IGridViewView, IViewSize, orthogonal, Sizing as GridViewSizing } from './gridview';
import type { GridLocation } from 'vs/base/browser/ui/grid/gridview';
///@ts-ignore
import type { SplitView } from 'vs/base/browser/ui/splitview/splitview';
export { IViewSize, LayoutPriority, Orientation, orthogonal } from './gridview';
@@ -28,9 +31,22 @@ function oppositeDirection(direction: Direction): Direction {
}
}
/**
* The interface to implement for views within a {@link Grid}.
*/
export interface IView extends IGridViewView {
readonly preferredHeight?: number;
/**
* The preferred width for when the user double clicks a sash
* adjacent to this view.
*/
readonly preferredWidth?: number;
/**
* The preferred height for when the user double clicks a sash
* adjacent to this view.
*/
readonly preferredHeight?: number;
}
export interface GridLeafNode<T extends IView> {
@@ -50,7 +66,7 @@ export function isGridBranchNode<T extends IView>(node: GridNode<T>): node is Gr
return !!(node as any).children;
}
function getGridNode<T extends IView>(node: GridNode<T>, location: number[]): GridNode<T> {
function getGridNode<T extends IView>(node: GridNode<T>, location: GridLocation): GridNode<T> {
if (location.length === 0) {
return node;
}
@@ -113,7 +129,7 @@ function findAdjacentBoxLeafNodes<T extends IView>(boxNode: GridNode<T>, directi
return result;
}
function getLocationOrientation(rootOrientation: Orientation, location: number[]): Orientation {
function getLocationOrientation(rootOrientation: Orientation, location: GridLocation): Orientation {
return location.length % 2 === 0 ? orthogonal(rootOrientation) : rootOrientation;
}
@@ -121,7 +137,7 @@ function getDirectionOrientation(direction: Direction): Orientation {
return direction === Direction.Up || direction === Direction.Down ? Orientation.VERTICAL : Orientation.HORIZONTAL;
}
export function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Direction): number[] {
export function getRelativeLocation(rootOrientation: Orientation, location: GridLocation, direction: Direction): GridLocation {
const orientation = getLocationOrientation(rootOrientation, location);
const directionOrientation = getDirectionOrientation(direction);
@@ -163,7 +179,7 @@ function indexInParent(element: HTMLElement): number {
*
* This will break as soon as DOM structures of the Splitview or Gridview change.
*/
function getGridLocation(element: HTMLElement): number[] {
function getGridLocation(element: HTMLElement): GridLocation {
const parentElement = element.parentElement;
if (!parentElement) {
@@ -181,7 +197,7 @@ function getGridLocation(element: HTMLElement): number[] {
export type DistributeSizing = { type: 'distribute' };
export type SplitSizing = { type: 'split' };
export type InvisibleSizing = { type: 'invisible', cachedVisibleSize: number };
export type InvisibleSizing = { type: 'invisible'; cachedVisibleSize: number };
export type Sizing = DistributeSizing | SplitSizing | InvisibleSizing;
export namespace Sizing {
@@ -191,40 +207,93 @@ export namespace Sizing {
}
export interface IGridStyles extends IGridViewStyles { }
export interface IGridOptions extends IGridViewOptions { }
export interface IGridOptions extends IGridViewOptions {
readonly firstViewVisibleCachedSize?: number;
}
/**
* The {@link Grid} exposes a Grid widget in a friendlier API than the underlying
* {@link GridView} widget. Namely, all mutation operations are addressed by the
* model elements, rather than indexes.
*
* It support the same features as the {@link GridView}.
*/
export class Grid<T extends IView = IView> extends Disposable {
protected gridview: GridView;
private views = new Map<T, HTMLElement>();
/**
* The orientation of the grid. Matches the orientation of the root
* {@link SplitView} in the grid's {@link GridLocation} model.
*/
get orientation(): Orientation { return this.gridview.orientation; }
set orientation(orientation: Orientation) { this.gridview.orientation = orientation; }
/**
* The width of the grid.
*/
get width(): number { return this.gridview.width; }
/**
* The height of the grid.
*/
get height(): number { return this.gridview.height; }
/**
* The minimum width of the grid.
*/
get minimumWidth(): number { return this.gridview.minimumWidth; }
/**
* The minimum height of the grid.
*/
get minimumHeight(): number { return this.gridview.minimumHeight; }
/**
* The maximum width of the grid.
*/
get maximumWidth(): number { return this.gridview.maximumWidth; }
/**
* The maximum height of the grid.
*/
get maximumHeight(): number { return this.gridview.maximumHeight; }
readonly onDidChange: Event<{ width: number; height: number; } | undefined>;
/**
* Fires whenever a view within the grid changes its size constraints.
*/
readonly onDidChange: Event<{ width: number; height: number } | undefined>;
/**
* Fires whenever the user scrolls a {@link SplitView} within
* the grid.
*/
readonly onDidScroll: Event<void>;
/**
* A collection of sashes perpendicular to each edge of the grid.
* Corner sashes will be created for each intersection.
*/
get boundarySashes(): IBoundarySashes { return this.gridview.boundarySashes; }
set boundarySashes(boundarySashes: IBoundarySashes) { this.gridview.boundarySashes = boundarySashes; }
/**
* Enable/disable edge snapping across all grid views.
*/
set edgeSnapping(edgeSnapping: boolean) { this.gridview.edgeSnapping = edgeSnapping; }
/**
* The DOM element for this view.
*/
get element(): HTMLElement { return this.gridview.element; }
private didLayout = false;
constructor(gridview: GridView, options?: IGridOptions);
constructor(view: T, options?: IGridOptions);
/**
* Create a new {@link Grid}. A grid must *always* have a view
* inside.
*
* @param view An initial view for this Grid.
*/
constructor(view: T | GridView, options: IGridOptions = {}) {
super();
@@ -238,12 +307,8 @@ export class Grid<T extends IView = IView> extends Disposable {
this._register(this.gridview);
this._register(this.gridview.onDidSashReset(this.onDidSashReset, this));
const size: number | GridViewSizing = typeof options.firstViewVisibleCachedSize === 'number'
? GridViewSizing.Invisible(options.firstViewVisibleCachedSize)
: 0;
if (!(view instanceof GridView)) {
this._addView(view, size, [0]);
this._addView(view, 0, [0]);
}
this.onDidChange = this.gridview.onDidChange;
@@ -254,15 +319,67 @@ export class Grid<T extends IView = IView> extends Disposable {
this.gridview.style(styles);
}
/**
* Layout the {@link Grid}.
*
* Optionally provide a `top` and `left` positions, those will propagate
* as an origin for positions passed to {@link IView.layout}.
*
* @param width The width of the {@link Grid}.
* @param height The height of the {@link Grid}.
* @param top Optional, the top location of the {@link Grid}.
* @param left Optional, the left location of the {@link Grid}.
*/
layout(width: number, height: number, top: number = 0, left: number = 0): void {
this.gridview.layout(width, height, top, left);
this.didLayout = true;
}
hasView(view: T): boolean {
return this.views.has(view);
}
/**
* Add a {@link IView view} to this {@link Grid}, based on another reference view.
*
* Take this grid as an example:
*
* ```
* +-----+---------------+
* | A | B |
* +-----+---------+-----+
* | C | |
* +---------------+ D |
* | E | |
* +---------------+-----+
* ```
*
* Calling `addView(X, Sizing.Distribute, C, Direction.Right)` will make the following
* changes:
*
* ```
* +-----+---------------+
* | A | B |
* +-----+-+-------+-----+
* | C | X | |
* +-------+-------+ D |
* | E | |
* +---------------+-----+
* ```
*
* Or `addView(X, Sizing.Distribute, D, Direction.Down)`:
*
* ```
* +-----+---------------+
* | A | B |
* +-----+---------+-----+
* | C | D |
* +---------------+-----+
* | E | X |
* +---------------+-----+
* ```
*
* @param newView The view to add.
* @param size Either a fixed size, or a dynamic {@link Sizing} strategy.
* @param referenceView Another view to place this new view next to.
* @param direction The direction the new view should be placed next to the reference view.
*/
addView(newView: T, size: number | Sizing, referenceView: T, direction: Direction): void {
if (this.views.has(newView)) {
throw new Error('Can\'t add same view twice');
@@ -293,7 +410,7 @@ export class Grid<T extends IView = IView> extends Disposable {
this._addView(newView, viewSize, location);
}
addViewAt(newView: T, size: number | DistributeSizing | InvisibleSizing, location: number[]): void {
private addViewAt(newView: T, size: number | DistributeSizing | InvisibleSizing, location: GridLocation): void {
if (this.views.has(newView)) {
throw new Error('Can\'t add same view twice');
}
@@ -311,11 +428,17 @@ export class Grid<T extends IView = IView> extends Disposable {
this._addView(newView, viewSize, location);
}
protected _addView(newView: T, size: number | GridViewSizing, location: number[]): void {
protected _addView(newView: T, size: number | GridViewSizing, location: GridLocation): void {
this.views.set(newView, newView.element);
this.gridview.addView(newView, size, location);
}
/**
* Remove a {@link IView view} from this {@link Grid}.
*
* @param view The {@link IView view} to remove.
* @param sizing Whether to distribute other {@link IView view}'s sizes.
*/
removeView(view: T, sizing?: Sizing): void {
if (this.views.size === 1) {
throw new Error('Can\'t remove last view');
@@ -326,6 +449,16 @@ export class Grid<T extends IView = IView> extends Disposable {
this.views.delete(view);
}
/**
* Move a {@link IView view} to another location in the grid.
*
* @remarks See {@link Grid.addView}.
*
* @param view The {@link IView view} to move.
* @param sizing Either a fixed size, or a dynamic {@link Sizing} strategy.
* @param referenceView Another view to place the view next to.
* @param direction The direction the view should be placed next to the reference view.
*/
moveView(view: T, sizing: number | Sizing, referenceView: T, direction: Direction): void {
const sourceLocation = this.getViewLocation(view);
const [sourceParentLocation, from] = tail(sourceLocation);
@@ -342,7 +475,16 @@ export class Grid<T extends IView = IView> extends Disposable {
}
}
moveViewTo(view: T, location: number[]): void {
/**
* Move a {@link IView view} to another location in the grid.
*
* @remarks Internal method, do not use without knowing what you're doing.
* @remarks See {@link GridView.moveView}.
*
* @param view The {@link IView view} to move.
* @param location The {@link GridLocation location} to insert the view on.
*/
moveViewTo(view: T, location: GridLocation): void {
const sourceLocation = this.getViewLocation(view);
const [sourceParentLocation, from] = tail(sourceLocation);
const [targetParentLocation, to] = tail(location);
@@ -362,17 +504,35 @@ export class Grid<T extends IView = IView> extends Disposable {
}
}
/**
* Swap two {@link IView views} within the {@link Grid}.
*
* @param from One {@link IView view}.
* @param to Another {@link IView view}.
*/
swapViews(from: T, to: T): void {
const fromLocation = this.getViewLocation(from);
const toLocation = this.getViewLocation(to);
return this.gridview.swapViews(fromLocation, toLocation);
}
/**
* Resize a {@link IView view}.
*
* @param view The {@link IView view} to resize.
* @param size The size the view should be.
*/
resizeView(view: T, size: IViewSize): void {
const location = this.getViewLocation(view);
return this.gridview.resizeView(location, size);
}
/**
* Get the size of a {@link IView view}.
*
* @param view The {@link IView view}. Provide `undefined` to get the size
* of the grid itself.
*/
getViewSize(view?: T): IViewSize {
if (!view) {
return this.gridview.getViewSize();
@@ -382,34 +542,71 @@ export class Grid<T extends IView = IView> extends Disposable {
return this.gridview.getViewSize(location);
}
/**
* Get the cached visible size of a {@link IView view}. This was the size
* of the view at the moment it last became hidden.
*
* @param view The {@link IView view}.
*/
getViewCachedVisibleSize(view: T): number | undefined {
const location = this.getViewLocation(view);
return this.gridview.getViewCachedVisibleSize(location);
}
/**
* Maximize the size of a {@link IView view} by collapsing all other views
* to their minimum sizes.
*
* @param view The {@link IView view}.
*/
maximizeViewSize(view: T): void {
const location = this.getViewLocation(view);
this.gridview.maximizeViewSize(location);
}
/**
* Distribute the size among all {@link IView views} within the entire
* grid or within a single {@link SplitView}.
*/
distributeViewSizes(): void {
this.gridview.distributeViewSizes();
}
/**
* Returns whether a {@link IView view} is visible.
*
* @param view The {@link IView view}.
*/
isViewVisible(view: T): boolean {
const location = this.getViewLocation(view);
return this.gridview.isViewVisible(location);
}
/**
* Set the visibility state of a {@link IView view}.
*
* @param view The {@link IView view}.
*/
setViewVisible(view: T, visible: boolean): void {
const location = this.getViewLocation(view);
this.gridview.setViewVisible(location, visible);
}
/**
* Returns a descriptor for the entire grid.
*/
getViews(): GridBranchNode<T> {
return this.gridview.getView() as GridBranchNode<T>;
}
/**
* Utility method to return the collection all views which intersect
* a view's edge.
*
* @param view The {@link IView view}.
* @param direction Which direction edge to be considered.
* @param wrap Whether the grid wraps around (from right to left, from bottom to top).
*/
getNeighborViews(view: T, direction: Direction, wrap: boolean = false): T[] {
if (!this.didLayout) {
throw new Error('Can\'t call getNeighborViews before first layout');
@@ -436,7 +633,7 @@ export class Grid<T extends IView = IView> extends Disposable {
.map(node => node.view);
}
getViewLocation(view: T): number[] {
private getViewLocation(view: T): GridLocation {
const element = this.views.get(view);
if (!element) {
@@ -446,8 +643,8 @@ export class Grid<T extends IView = IView> extends Disposable {
return getGridLocation(element);
}
private onDidSashReset(location: number[]): void {
const resizeToPreferredSize = (location: number[]): boolean => {
private onDidSashReset(location: GridLocation): void {
const resizeToPreferredSize = (location: GridLocation): boolean => {
const node = this.gridview.getView(location) as GridNode<T>;
if (isGridBranchNode(node)) {
@@ -510,6 +707,9 @@ export interface ISerializedGrid {
height: number;
}
/**
* A {@link Grid} which can serialize itself.
*/
export class SerializableGrid<T extends ISerializableView> extends Grid<T> {
private static serializeNode<T extends ISerializableView>(node: GridNode<T>, orientation: Orientation): ISerializedNode {
@@ -526,6 +726,13 @@ export class SerializableGrid<T extends ISerializableView> extends Grid<T> {
return { type: 'branch', data: node.children.map(c => SerializableGrid.serializeNode(c, orthogonal(orientation))), size };
}
/**
* Construct a new {@link SerializableGrid} from a JSON object.
*
* @param json The JSON object.
* @param deserializer A deserializer which can revive each view.
* @returns A new {@link SerializableGrid} instance.
*/
static deserialize<T extends ISerializableView>(json: ISerializedGrid, deserializer: IViewDeserializer<T>, options: IGridOptions = {}): SerializableGrid<T> {
if (typeof json.orientation !== 'number') {
throw new Error('Invalid JSON: \'orientation\' property must be a number.');
@@ -547,6 +754,9 @@ export class SerializableGrid<T extends ISerializableView> extends Grid<T> {
*/
private initialLayoutContext: boolean = true;
/**
* Serialize this grid into a JSON object.
*/
serialize(): ISerializedGrid {
return {
root: SerializableGrid.serializeNode(this.getViews(), this.orientation),
@@ -566,8 +776,8 @@ export class SerializableGrid<T extends ISerializableView> extends Grid<T> {
}
}
export type GridNodeDescriptor = { size?: number, groups?: GridNodeDescriptor[] };
export type GridDescriptor = { orientation: Orientation, groups?: GridNodeDescriptor[] };
export type GridNodeDescriptor = { size?: number; groups?: GridNodeDescriptor[] };
export type GridDescriptor = { orientation: Orientation; groups?: GridNodeDescriptor[] };
export function sanitizeGridNodeDescriptor(nodeDescriptor: GridNodeDescriptor, rootNode: boolean): void {
if (!rootNode && nodeDescriptor.groups && nodeDescriptor.groups.length <= 1) {
@@ -609,7 +819,7 @@ function createSerializedNode(nodeDescriptor: GridNodeDescriptor): ISerializedNo
}
}
function getDimensions(node: ISerializedNode, orientation: Orientation): { width?: number, height?: number } {
function getDimensions(node: ISerializedNode, orientation: Orientation): { width?: number; height?: number } {
if (node.type === 'branch') {
const childrenDimensions = node.data.map(c => getDimensions(c, orthogonal(orientation)));
@@ -629,6 +839,10 @@ function getDimensions(node: ISerializedNode, orientation: Orientation): { width
}
}
/**
* Creates a new JSON object from a {@link GridDescriptor}, which can
* be deserialized by {@link SerializableGrid.deserialize}.
*/
export function createSerializedGrid(gridDescriptor: GridDescriptor): ISerializedGrid {
sanitizeGridNodeDescriptor(gridDescriptor, true);
src/vs/base/browser/ui/grid/gridview.ts
+418 -127
View File
@@ -5,18 +5,24 @@
import { $ } from 'vs/base/browser/dom';
import { Orientation, Sash } from 'vs/base/browser/ui/sash/sash';
import { ISplitViewStyles, IView as ISplitView, LayoutPriority, Sizing, SplitView } from 'vs/base/browser/ui/splitview/splitview';
import { DistributeSizing, ISplitViewStyles, IView as ISplitView, LayoutPriority, Sizing, SplitView } from 'vs/base/browser/ui/splitview/splitview';
import { equals as arrayEquals, tail2 as tail } from 'vs/base/common/arrays';
import { Color } from 'vs/base/common/color';
import { Emitter, Event, Relay } from 'vs/base/common/event';
import { Disposable, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
import { clamp } from 'vs/base/common/numbers';
import { Disposable, DisposableStore, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
import { rot } from 'vs/base/common/numbers';
import { isUndefined } from 'vs/base/common/types';
import 'vs/css!./gridview';
export { Orientation } from 'vs/base/browser/ui/sash/sash';
export { LayoutPriority, Sizing } from 'vs/base/browser/ui/splitview/splitview';
export interface IGridViewStyles extends ISplitViewStyles { }
const defaultStyles: IGridViewStyles = {
separatorBorder: Color.transparent
};
export interface IViewSize {
readonly width: number;
readonly height: number;
@@ -36,17 +42,95 @@ export interface IBoundarySashes {
readonly left?: Sash;
}
/**
* The interface to implement for views within a {@link GridView}.
*/
export interface IView {
/**
* The DOM element for this view.
*/
readonly element: HTMLElement;
/**
* A minimum width for this view.
*
* @remarks If none, set it to `0`.
*/
readonly minimumWidth: number;
/**
* A minimum width for this view.
*
* @remarks If none, set it to `Number.POSITIVE_INFINITY`.
*/
readonly maximumWidth: number;
/**
* A minimum height for this view.
*
* @remarks If none, set it to `0`.
*/
readonly minimumHeight: number;
/**
* A minimum height for this view.
*
* @remarks If none, set it to `Number.POSITIVE_INFINITY`.
*/
readonly maximumHeight: number;
readonly onDidChange: Event<IViewSize | undefined>;
/**
* The priority of the view when the {@link GridView} layout algorithm
* runs. Views with higher priority will be resized first.
*
* @remarks Only used when `proportionalLayout` is false.
*/
readonly priority?: LayoutPriority;
/**
* Whether the view will snap whenever the user reaches its minimum size or
* attempts to grow it beyond the minimum size.
*
* @defaultValue `false`
*/
readonly snap?: boolean;
/**
* View instances are supposed to fire this event whenever any of the constraint
* properties have changed:
*
* - {@link IView.minimumWidth}
* - {@link IView.maximumWidth}
* - {@link IView.minimumHeight}
* - {@link IView.maximumHeight}
* - {@link IView.priority}
* - {@link IView.snap}
*
* The {@link GridView} will relayout whenever that happens. The event can
* optionally emit the view's preferred size for that relayout.
*/
readonly onDidChange: Event<IViewSize | undefined>;
/**
* This will be called by the {@link GridView} during layout. A view meant to
* pass along the layout information down to its descendants.
*/
layout(width: number, height: number, top: number, left: number): void;
/**
* This will be called by the {@link GridView} whenever this view is made
* visible or hidden.
*
* @param visible Whether the view becomes visible.
*/
setVisible?(visible: boolean): void;
/**
* This will be called by the {@link GridView} whenever this view is on
* an edge of the grid and the grid's
* {@link GridView.boundarySashes boundary sashes} change.
*/
setBoundarySashes?(sashes: IBoundarySashes): void;
}
@@ -108,29 +192,23 @@ export function isGridBranchNode(node: GridNode): node is GridBranchNode {
return !!(node as any).children;
}
export interface IGridViewStyles extends ISplitViewStyles { }
const defaultStyles: IGridViewStyles = {
separatorBorder: Color.transparent
};
export interface ILayoutController {
readonly isLayoutEnabled: boolean;
}
export class LayoutController implements ILayoutController {
class LayoutController {
constructor(public isLayoutEnabled: boolean) { }
}
export class MultiplexLayoutController implements ILayoutController {
get isLayoutEnabled(): boolean { return this.layoutControllers.every(l => l.isLayoutEnabled); }
constructor(private layoutControllers: ILayoutController[]) { }
}
export interface IGridViewOptions {
/**
* Styles overriding the {@link defaultStyles default ones}.
*/
readonly styles?: IGridViewStyles;
/**
* Resize each view proportionally when resizing the {@link GridView}.
*
* @defaultValue `true`
*/
readonly proportionalLayout?: boolean; // default true
readonly layoutController?: ILayoutController;
}
interface ILayoutContext {
@@ -157,6 +235,14 @@ function fromAbsoluteBoundarySashes(sashes: IBoundarySashes, orientation: Orient
}
}
function validateIndex(index: number, numChildren: number): number {
if (Math.abs(index) > numChildren) {
throw new Error('Invalid index');
}
return rot(index, numChildren + 1);
}
class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
readonly element: HTMLElement;
@@ -249,8 +335,8 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
private childrenChangeDisposable: IDisposable = Disposable.None;
private readonly _onDidSashReset = new Emitter<number[]>();
readonly onDidSashReset: Event<number[]> = this._onDidSashReset.event;
private readonly _onDidSashReset = new Emitter<GridLocation>();
readonly onDidSashReset: Event<GridLocation> = this._onDidSashReset.event;
private splitviewSashResetDisposable: IDisposable = Disposable.None;
private childrenSashResetDisposable: IDisposable = Disposable.None;
@@ -296,7 +382,7 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
constructor(
readonly orientation: Orientation,
readonly layoutController: ILayoutController,
readonly layoutController: LayoutController,
styles: IGridViewStyles,
readonly proportionalLayout: boolean,
size: number = 0,
@@ -396,9 +482,7 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
}
addChild(node: Node, size: number | Sizing, index: number, skipLayout?: boolean): void {
if (index < 0 || index > this.children.length) {
throw new Error('Invalid index');
}
index = validateIndex(index, this.children.length);
this.splitview.addView(node, size, index, skipLayout);
this._addChild(node, index);
@@ -433,9 +517,7 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
}
removeChild(index: number, sizing?: Sizing): void {
if (index < 0 || index >= this.children.length) {
throw new Error('Invalid index');
}
index = validateIndex(index, this.children.length);
this.splitview.removeView(index, sizing);
this._removeChild(index);
@@ -465,16 +547,13 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
}
moveChild(from: number, to: number): void {
from = validateIndex(from, this.children.length);
to = validateIndex(to, this.children.length);
if (from === to) {
return;
}
if (from < 0 || from >= this.children.length) {
throw new Error('Invalid from index');
}
to = clamp(to, 0, this.children.length);
if (from < to) {
to--;
}
@@ -488,16 +567,13 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
}
swapChildren(from: number, to: number): void {
from = validateIndex(from, this.children.length);
to = validateIndex(to, this.children.length);
if (from === to) {
return;
}
if (from < 0 || from >= this.children.length) {
throw new Error('Invalid from index');
}
to = clamp(to, 0, this.children.length);
this.splitview.swapViews(from, to);
// swap boundary sashes
@@ -511,9 +587,7 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
}
resizeChild(index: number, size: number): void {
if (index < 0 || index >= this.children.length) {
throw new Error('Invalid index');
}
index = validateIndex(index, this.children.length);
this.splitview.resizeView(index, size);
}
@@ -531,25 +605,19 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
}
getChildSize(index: number): number {
if (index < 0 || index >= this.children.length) {
throw new Error('Invalid index');
}
index = validateIndex(index, this.children.length);
return this.splitview.getViewSize(index);
}
isChildVisible(index: number): boolean {
if (index < 0 || index >= this.children.length) {
throw new Error('Invalid index');
}
index = validateIndex(index, this.children.length);
return this.splitview.isViewVisible(index);
}
setChildVisible(index: number, visible: boolean): void {
if (index < 0 || index >= this.children.length) {
throw new Error('Invalid index');
}
index = validateIndex(index, this.children.length);
if (this.splitview.isViewVisible(index) === visible) {
return;
@@ -559,9 +627,7 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
}
getChildCachedVisibleSize(index: number): number | undefined {
if (index < 0 || index >= this.children.length) {
throw new Error('Invalid index');
}
index = validateIndex(index, this.children.length);
return this.splitview.getViewCachedVisibleSize(index);
}
@@ -685,7 +751,7 @@ class LeafNode implements ISplitView<ILayoutContext>, IDisposable {
private absoluteOrthogonalOffset: number = 0;
readonly onDidScroll: Event<void> = Event.None;
readonly onDidSashReset: Event<number[]> = Event.None;
readonly onDidSashReset: Event<GridLocation> = Event.None;
private _onDidLinkedWidthNodeChange = new Relay<number | undefined>();
private _linkedWidthNode: LeafNode | undefined = undefined;
@@ -709,10 +775,12 @@ class LeafNode implements ISplitView<ILayoutContext>, IDisposable {
private _onDidViewChange: Event<number | undefined>;
readonly onDidChange: Event<number | undefined>;
private disposables = new DisposableStore();
constructor(
readonly view: IView,
readonly orientation: Orientation,
readonly layoutController: ILayoutController,
readonly layoutController: LayoutController,
orthogonalSize: number,
size: number = 0
) {
@@ -720,7 +788,7 @@ class LeafNode implements ISplitView<ILayoutContext>, IDisposable {
this._size = size;
const onDidChange = createLatchedOnDidChangeViewEvent(view);
this._onDidViewChange = Event.map(onDidChange, e => e && (this.orientation === Orientation.VERTICAL ? e.width : e.height));
this._onDidViewChange = Event.map(onDidChange, e => e && (this.orientation === Orientation.VERTICAL ? e.width : e.height), this.disposables);
this.onDidChange = Event.any(this._onDidViewChange, this._onDidSetLinkedNode.event, this._onDidLinkedWidthNodeChange.event, this._onDidLinkedHeightNodeChange.event);
}
@@ -834,7 +902,9 @@ class LeafNode implements ISplitView<ILayoutContext>, IDisposable {
}
}
dispose(): void { }
dispose(): void {
this.disposables.dispose();
}
}
type Node = BranchNode | LeafNode;
@@ -871,21 +941,88 @@ function flipNode<T extends Node>(node: T, size: number, orthogonalSize: number)
}
}
/**
* The location of a {@link IView view} within a {@link GridView}.
*
* A GridView is a tree composition of multiple {@link SplitView} instances, orthogonal
* between one another. Here's an example:
*
* ```
* +-----+---------------+
* | A | B |
* +-----+---------+-----+
* | C | |
* +---------------+ D |
* | E | |
* +---------------+-----+
* ```
*
* The above grid's tree structure is:
*
* ```
* Vertical SplitView
* +-Horizontal SplitView
* | +-A
* | +-B
* +- Horizontal SplitView
* +-Vertical SplitView
* | +-C
* | +-E
* +-D
* ```
*
* So, {@link IView views} within a {@link GridView} can be referenced by
* a sequence of indexes, each index referencing each SplitView. Here are
* each view's locations, from the example above:
*
* - `A`: `[0,0]`
* - `B`: `[0,1]`
* - `C`: `[1,0,0]`
* - `D`: `[1,1]`
* - `E`: `[1,0,1]`
*/
export type GridLocation = number[];
/**
* The {@link GridView} is the UI component which implements a two dimensional
* flex-like layout algorithm for a collection of {@link IView} instances, which
* are mostly HTMLElement instances with size constraints. A {@link GridView} is a
* tree composition of multiple {@link SplitView} instances, orthogonal between
* one another. It will respect view's size contraints, just like the SplitView.
*
* It has a low-level index based API, allowing for fine grain performant operations.
* Look into the {@link Grid} widget for a higher-level API.
*
* Features:
* - flex-like layout algorithm
* - snap support
* - corner sash support
* - Alt key modifier behavior, macOS style
* - layout (de)serialization
*/
export class GridView implements IDisposable {
/**
* The DOM element for this view.
*/
readonly element: HTMLElement;
private styles: IGridViewStyles;
private proportionalLayout: boolean;
private _root!: BranchNode;
private onDidSashResetRelay = new Relay<number[]>();
readonly onDidSashReset: Event<number[]> = this.onDidSashResetRelay.event;
private onDidSashResetRelay = new Relay<GridLocation>();
private _onDidScroll = new Relay<void>();
private _onDidChange = new Relay<IViewSize | undefined>();
private _boundarySashes: IBoundarySashes = {};
/**
* The layout controller makes sure layout only propagates
* to the views after the very first call to {@link GridView.layout}.
*/
private layoutController: LayoutController;
private disposable2x2: IDisposable = Disposable.None;
private get root(): BranchNode {
return this._root;
}
private get root(): BranchNode { return this._root; }
private set root(root: BranchNode) {
const oldRoot = this._root;
@@ -902,10 +1039,59 @@ export class GridView implements IDisposable {
this._onDidScroll.input = root.onDidScroll;
}
get orientation(): Orientation {
return this._root.orientation;
}
/**
* Fires whenever the user double clicks a {@link Sash sash}.
*/
readonly onDidSashReset = this.onDidSashResetRelay.event;
/**
* Fires whenever the user scrolls a {@link SplitView} within
* the grid.
*/
readonly onDidScroll = this._onDidScroll.event;
/**
* Fires whenever a view within the grid changes its size constraints.
*/
readonly onDidChange = this._onDidChange.event;
/**
* The width of the grid.
*/
get width(): number { return this.root.width; }
/**
* The height of the grid.
*/
get height(): number { return this.root.height; }
/**
* The minimum width of the grid.
*/
get minimumWidth(): number { return this.root.minimumWidth; }
/**
* The minimum height of the grid.
*/
get minimumHeight(): number { return this.root.minimumHeight; }
/**
* The maximum width of the grid.
*/
get maximumWidth(): number { return this.root.maximumHeight; }
/**
* The maximum height of the grid.
*/
get maximumHeight(): number { return this.root.maximumHeight; }
get orientation(): Orientation { return this._root.orientation; }
get boundarySashes(): IBoundarySashes { return this._boundarySashes; }
/**
* The orientation of the grid. Matches the orientation of the root
* {@link SplitView} in the grid's tree model.
*/
set orientation(orientation: Orientation) {
if (this._root.orientation === orientation) {
return;
@@ -917,77 +1103,67 @@ export class GridView implements IDisposable {
this.boundarySashes = this.boundarySashes;
}
get width(): number { return this.root.width; }
get height(): number { return this.root.height; }
get minimumWidth(): number { return this.root.minimumWidth; }
get minimumHeight(): number { return this.root.minimumHeight; }
get maximumWidth(): number { return this.root.maximumHeight; }
get maximumHeight(): number { return this.root.maximumHeight; }
private _onDidScroll = new Relay<void>();
readonly onDidScroll = this._onDidScroll.event;
private _onDidChange = new Relay<IViewSize | undefined>();
readonly onDidChange = this._onDidChange.event;
private _boundarySashes: IBoundarySashes = {};
get boundarySashes(): IBoundarySashes { return this._boundarySashes; }
/**
* A collection of sashes perpendicular to each edge of the grid.
* Corner sashes will be created for each intersection.
*/
set boundarySashes(boundarySashes: IBoundarySashes) {
this._boundarySashes = boundarySashes;
this.root.boundarySashes = fromAbsoluteBoundarySashes(boundarySashes, this.orientation);
}
/**
* Enable/disable edge snapping across all grid views.
*/
set edgeSnapping(edgeSnapping: boolean) {
this.root.edgeSnapping = edgeSnapping;
}
/**
* The first layout controller makes sure layout only propagates
* to the views after the very first call to gridview.layout()
* Create a new {@link GridView} instance.
*
* @remarks It's the caller's responsibility to append the
* {@link GridView.element} to the page's DOM.
*/
private firstLayoutController: LayoutController;
private layoutController: LayoutController;
constructor(options: IGridViewOptions = {}) {
this.element = $('.monaco-grid-view');
this.styles = options.styles || defaultStyles;
this.proportionalLayout = typeof options.proportionalLayout !== 'undefined' ? !!options.proportionalLayout : true;
this.firstLayoutController = new LayoutController(false);
this.layoutController = new MultiplexLayoutController([
this.firstLayoutController,
...(options.layoutController ? [options.layoutController] : [])
]);
this.layoutController = new LayoutController(false);
this.root = new BranchNode(Orientation.VERTICAL, this.layoutController, this.styles, this.proportionalLayout);
}
getViewMap(map: Map<IView, HTMLElement>, node?: Node): void {
if (!node) {
node = this.root;
}
if (node instanceof BranchNode) {
node.children.forEach(child => this.getViewMap(map, child));
} else {
map.set(node.view, node.element);
}
}
style(styles: IGridViewStyles): void {
this.styles = styles;
this.root.style(styles);
}
/**
* Layout the {@link GridView}.
*
* Optionally provide a `top` and `left` positions, those will propagate
* as an origin for positions passed to {@link IView.layout}.
*
* @param width The width of the {@link GridView}.
* @param height The height of the {@link GridView}.
* @param top Optional, the top location of the {@link GridView}.
* @param left Optional, the left location of the {@link GridView}.
*/
layout(width: number, height: number, top: number = 0, left: number = 0): void {
this.firstLayoutController.isLayoutEnabled = true;
this.layoutController.isLayoutEnabled = true;
const [size, orthogonalSize, offset, orthogonalOffset] = this.root.orientation === Orientation.HORIZONTAL ? [height, width, top, left] : [width, height, left, top];
this.root.layout(size, offset, { orthogonalSize, absoluteOffset: offset, absoluteOrthogonalOffset: orthogonalOffset, absoluteSize: size, absoluteOrthogonalSize: orthogonalSize });
}
addView(view: IView, size: number | Sizing, location: number[]): void {
/**
* Add a {@link IView view} to this {@link GridView}.
*
* @param view The view to add.
* @param size Either a fixed size, or a dynamic {@link Sizing} strategy.
* @param location The {@link GridLocation location} to insert the view on.
*/
addView(view: IView, size: number | Sizing, location: GridLocation): void {
this.disposable2x2.dispose();
this.disposable2x2 = Disposable.None;
@@ -1024,9 +1200,17 @@ export class GridView implements IDisposable {
const node = new LeafNode(view, grandParent.orientation, this.layoutController, parent.size);
newParent.addChild(node, size, index);
}
this.trySet2x2();
}
removeView(location: number[], sizing?: Sizing): IView {
/**
* Remove a {@link IView view} from this {@link GridView}.
*
* @param location The {@link GridLocation location} of the {@link IView view}.
* @param sizing Whether to distribute other {@link IView view}'s sizes.
*/
removeView(location: GridLocation, sizing?: DistributeSizing): IView {
this.disposable2x2.dispose();
this.disposable2x2 = Disposable.None;
@@ -1050,6 +1234,7 @@ export class GridView implements IDisposable {
}
if (parent.children.length > 1) {
this.trySet2x2();
return node.view;
}
@@ -1064,6 +1249,7 @@ export class GridView implements IDisposable {
parent.removeChild(0);
this.root = sibling;
this.boundarySashes = this.boundarySashes;
this.trySet2x2();
return node.view;
}
@@ -1094,10 +1280,18 @@ export class GridView implements IDisposable {
grandParent.resizeChild(i, sizes[i]);
}
this.trySet2x2();
return node.view;
}
moveView(parentLocation: number[], from: number, to: number): void {
/**
* Move a {@link IView view} within its parent.
*
* @param parentLocation The {@link GridLocation location} of the {@link IView view}'s parent.
* @param from The index of the {@link IView view} to move.
* @param to The index where the {@link IView view} should move to.
*/
moveView(parentLocation: GridLocation, from: number, to: number): void {
const [, parent] = this.getNode(parentLocation);
if (!(parent instanceof BranchNode)) {
@@ -1105,9 +1299,17 @@ export class GridView implements IDisposable {
}
parent.moveChild(from, to);
this.trySet2x2();
}
swapViews(from: number[], to: number[]): void {
/**
* Swap two {@link IView views} within the {@link GridView}.
*
* @param from The {@link GridLocation location} of one view.
* @param to The {@link GridLocation location} of another view.
*/
swapViews(from: GridLocation, to: GridLocation): void {
const [fromRest, fromIndex] = tail(from);
const [, fromParent] = this.getNode(fromRest);
@@ -1145,9 +1347,17 @@ export class GridView implements IDisposable {
fromParent.addChild(toNode, fromSize, fromIndex);
toParent.addChild(fromNode, toSize, toIndex);
}
this.trySet2x2();
}
resizeView(location: number[], { width, height }: Partial<IViewSize>): void {
/**
* Resize a {@link IView view}.
*
* @param location The {@link GridLocation location} of the view.
* @param size The size the view should be. Optionally provide a single dimension.
*/
resizeView(location: GridLocation, size: Partial<IViewSize>): void {
const [rest, index] = tail(location);
const [pathToParent, parent] = this.getNode(rest);
@@ -1155,11 +1365,11 @@ export class GridView implements IDisposable {
throw new Error('Invalid location');
}
if (!width && !height) {
if (!size.width && !size.height) {
return;
}
const [parentSize, grandParentSize] = parent.orientation === Orientation.HORIZONTAL ? [width, height] : [height, width];
const [parentSize, grandParentSize] = parent.orientation === Orientation.HORIZONTAL ? [size.width, size.height] : [size.height, size.width];
if (typeof grandParentSize === 'number' && pathToParent.length > 0) {
const [, grandParent] = tail(pathToParent);
@@ -1171,9 +1381,17 @@ export class GridView implements IDisposable {
if (typeof parentSize === 'number') {
parent.resizeChild(index, parentSize);
}
this.trySet2x2();
}
getViewSize(location?: number[]): IViewSize {
/**
* Get the size of a {@link IView view}.
*
* @param location The {@link GridLocation location} of the view. Provide `undefined` to get
* the size of the grid itself.
*/
getViewSize(location?: GridLocation): IViewSize {
if (!location) {
return { width: this.root.width, height: this.root.height };
}
@@ -1182,7 +1400,13 @@ export class GridView implements IDisposable {
return { width: node.width, height: node.height };
}
getViewCachedVisibleSize(location: number[]): number | undefined {
/**
* Get the cached visible size of a {@link IView view}. This was the size
* of the view at the moment it last became hidden.
*
* @param location The {@link GridLocation location} of the view.
*/
getViewCachedVisibleSize(location: GridLocation): number | undefined {
const [rest, index] = tail(location);
const [, parent] = this.getNode(rest);
@@ -1193,7 +1417,13 @@ export class GridView implements IDisposable {
return parent.getChildCachedVisibleSize(index);
}
maximizeViewSize(location: number[]): void {
/**
* Maximize the size of a {@link IView view} by collapsing all other views
* to their minimum sizes.
*
* @param location The {@link GridLocation location} of the view.
*/
maximizeViewSize(location: GridLocation): void {
const [ancestors, node] = this.getNode(location);
if (!(node instanceof LeafNode)) {
@@ -1205,7 +1435,16 @@ export class GridView implements IDisposable {
}
}
distributeViewSizes(location?: number[]): void {
/**
* Distribute the size among all {@link IView views} within the entire
* grid or within a single {@link SplitView}.
*
* @param location The {@link GridLocation location} of a view containing
* children views, which will have their sizes distributed within the parent
* view's size. Provide `undefined` to recursively distribute all views' sizes
* in the entire grid.
*/
distributeViewSizes(location?: GridLocation): void {
if (!location) {
this.root.distributeViewSizes(true);
return;
@@ -1218,9 +1457,15 @@ export class GridView implements IDisposable {
}
node.distributeViewSizes();
this.trySet2x2();
}
isViewVisible(location: number[]): boolean {
/**
* Returns whether a {@link IView view} is visible.
*
* @param location The {@link GridLocation location} of the view.
*/
isViewVisible(location: GridLocation): boolean {
const [rest, index] = tail(location);
const [, parent] = this.getNode(rest);
@@ -1231,7 +1476,12 @@ export class GridView implements IDisposable {
return parent.isChildVisible(index);
}
setViewVisible(location: number[], visible: boolean): void {
/**
* Set the visibility state of a {@link IView view}.
*
* @param location The {@link GridLocation location} of the view.
*/
setViewVisible(location: GridLocation, visible: boolean): void {
const [rest, index] = tail(location);
const [, parent] = this.getNode(rest);
@@ -1242,13 +1492,31 @@ export class GridView implements IDisposable {
parent.setChildVisible(index, visible);
}
/**
* Returns a descriptor for the entire grid.
*/
getView(): GridBranchNode;
getView(location?: number[]): GridNode;
getView(location?: number[]): GridNode {
/**
* Returns a descriptor for a {@link GridLocation subtree} within the
* {@link GridView}.
*
* @param location The {@link GridLocation location} of the root of
* the {@link GridLocation subtree}.
*/
getView(location: GridLocation): GridNode;
getView(location?: GridLocation): GridNode {
const node = location ? this.getNode(location)[1] : this._root;
return this._getViews(node, this.orientation);
}
/**
* Construct a new {@link GridView} from a JSON object.
*
* @param json The JSON object.
* @param deserializer A deserializer which can revive each view.
* @returns A new {@link GridView} instance.
*/
static deserialize<T extends ISerializableView>(json: ISerializedGridView, deserializer: IViewDeserializer<T>, options: IGridViewOptions = {}): GridView {
if (typeof json.orientation !== 'number') {
throw new Error('Invalid JSON: \'orientation\' property must be a number.');
@@ -1311,7 +1579,7 @@ export class GridView implements IDisposable {
return { children, box };
}
private getNode(location: number[], node: Node = this.root, path: BranchNode[] = []): [BranchNode[], Node] {
private getNode(location: GridLocation, node: Node = this.root, path: BranchNode[] = []): [BranchNode[], Node] {
if (location.length === 0) {
return [path, node];
}
@@ -1332,6 +1600,13 @@ export class GridView implements IDisposable {
return this.getNode(rest, child, path);
}
/**
* Attempt to lock the {@link Sash sashes} in this {@link GridView} so
* the grid behaves as a 2x2 matrix, with a corner sash in the middle.
*
* In case the grid isn't a 2x2 grid _and_ all sashes are not aligned,
* this method is a no-op.
*/
trySet2x2(): void {
this.disposable2x2.dispose();
this.disposable2x2 = Disposable.None;
@@ -1349,6 +1624,22 @@ export class GridView implements IDisposable {
this.disposable2x2 = first.trySet2x2(second);
}
/**
* Populate a map with views to DOM nodes.
* @remarks To be used internally only.
*/
getViewMap(map: Map<IView, HTMLElement>, node?: Node): void {
if (!node) {
node = this.root;
}
if (node instanceof BranchNode) {
node.children.forEach(child => this.getViewMap(map, child));
} else {
map.set(node.view, node.element);
}
}
dispose(): void {
this.onDidSashResetRelay.dispose();
this.root.dispose();
src/vs/base/browser/ui/highlightedlabel/highlightedLabel.ts
+45 -8
View File
@@ -7,39 +7,72 @@ import * as dom from 'vs/base/browser/dom';
import { renderLabelWithIcons } from 'vs/base/browser/ui/iconLabel/iconLabels';
import * as objects from 'vs/base/common/objects';
/**
* A range to be highlighted.
*/
export interface IHighlight {
start: number;
end: number;
extraClasses?: string;
extraClasses?: string[];
}
export interface IOptions {
/**
* Whether
*/
readonly supportIcons?: boolean;
}
/**
* A widget which can render a label with substring highlights, often
* originating from a filter function like the fuzzy matcher.
*/
export class HighlightedLabel {
private readonly domNode: HTMLElement;
private text: string = '';
private title: string = '';
private highlights: IHighlight[] = [];
private supportIcons: boolean;
private didEverRender: boolean = false;
constructor(container: HTMLElement, private supportIcons: boolean) {
this.domNode = document.createElement('span');
this.domNode.className = 'monaco-highlighted-label';
container.appendChild(this.domNode);
/**
* Create a new {@link HighlightedLabel}.
*
* @param container The parent container to append to.
*/
constructor(container: HTMLElement, options?: IOptions) {
this.supportIcons = options?.supportIcons ?? false;
this.domNode = dom.append(container, dom.$('span.monaco-highlighted-label'));
}
/**
* The label's DOM node.
*/
get element(): HTMLElement {
return this.domNode;
}
/**
* Set the label and highlights.
*
* @param text The label to display.
* @param highlights The ranges to highlight.
* @param title An optional title for the hover tooltip.
* @param escapeNewLines Whether to escape new lines.
* @returns
*/
set(text: string | undefined, highlights: IHighlight[] = [], title: string = '', escapeNewLines?: boolean) {
if (!text) {
text = '';
}
if (escapeNewLines) {
// adjusts highlights inplace
text = HighlightedLabel.escapeNewLines(text, highlights);
}
if (this.didEverRender && this.text === text && this.title === title && objects.equals(this.highlights, highlights)) {
return;
}
@@ -59,6 +92,7 @@ export class HighlightedLabel {
if (highlight.end === highlight.start) {
continue;
}
if (pos < highlight.start) {
const substring = this.text.substring(pos, highlight.start);
children.push(dom.$('span', undefined, ...this.supportIcons ? renderLabelWithIcons(substring) : [substring]));
@@ -67,9 +101,11 @@ export class HighlightedLabel {
const substring = this.text.substring(highlight.start, highlight.end);
const element = dom.$('span.highlight', undefined, ...this.supportIcons ? renderLabelWithIcons(substring) : [substring]);
if (highlight.extraClasses) {
element.classList.add(highlight.extraClasses);
element.classList.add(...highlight.extraClasses);
}
children.push(element);
pos = highlight.end;
}
@@ -80,16 +116,17 @@ export class HighlightedLabel {
}
dom.reset(this.domNode, ...children);
if (this.title) {
this.domNode.title = this.title;
} else {
this.domNode.removeAttribute('title');
}
this.didEverRender = true;
}
static escapeNewLines(text: string, highlights: IHighlight[]): string {
let total = 0;
let extra = 0;
src/vs/base/browser/ui/hover/hover.css
+4
View File
@@ -20,6 +20,10 @@
display: none;
}
.monaco-hover a:hover {
cursor: pointer;
}
.monaco-hover .hover-contents:not(.html-hover-contents) {
padding: 4px 8px;
}
src/vs/base/browser/ui/hover/hoverWidget.ts
+20 -8
View File
@@ -4,7 +4,9 @@
*--------------------------------------------------------------------------------------------*/
import * as dom from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
import { KeyCode } from 'vs/base/common/keyCodes';
import { Disposable } from 'vs/base/common/lifecycle';
import 'vs/css!./hover';
@@ -18,7 +20,7 @@ export class HoverWidget extends Disposable {
public readonly containerDomNode: HTMLElement;
public readonly contentsDomNode: HTMLElement;
private readonly _scrollbar: DomScrollableElement;
public readonly scrollbar: DomScrollableElement;
constructor() {
super();
@@ -31,31 +33,32 @@ export class HoverWidget extends Disposable {
this.contentsDomNode = document.createElement('div');
this.contentsDomNode.className = 'monaco-hover-content';
this._scrollbar = this._register(new DomScrollableElement(this.contentsDomNode, {
this.scrollbar = this._register(new DomScrollableElement(this.contentsDomNode, {
consumeMouseWheelIfScrollbarIsNeeded: true
}));
this.containerDomNode.appendChild(this._scrollbar.getDomNode());
this.containerDomNode.appendChild(this.scrollbar.getDomNode());
}
public onContentsChanged(): void {
this._scrollbar.scanDomNode();
this.scrollbar.scanDomNode();
}
}
export class HoverAction extends Disposable {
public static render(parent: HTMLElement, actionOptions: { label: string, iconClass?: string, run: (target: HTMLElement) => void, commandId: string }, keybindingLabel: string | null) {
public static render(parent: HTMLElement, actionOptions: { label: string; iconClass?: string; run: (target: HTMLElement) => void; commandId: string }, keybindingLabel: string | null) {
return new HoverAction(parent, actionOptions, keybindingLabel);
}
private readonly actionContainer: HTMLElement;
private readonly action: HTMLElement;
private constructor(parent: HTMLElement, actionOptions: { label: string, iconClass?: string, run: (target: HTMLElement) => void, commandId: string }, keybindingLabel: string | null) {
private constructor(parent: HTMLElement, actionOptions: { label: string; iconClass?: string; run: (target: HTMLElement) => void; commandId: string }, keybindingLabel: string | null) {
super();
this.actionContainer = dom.append(parent, $('div.action-container'));
this.actionContainer.setAttribute('tabindex', '0');
this.action = dom.append(this.actionContainer, $('a.action'));
this.action.setAttribute('href', '#');
this.action.setAttribute('role', 'button');
if (actionOptions.iconClass) {
dom.append(this.action, $(`span.icon.${actionOptions.iconClass}`));
@@ -63,12 +66,21 @@ export class HoverAction extends Disposable {
const label = dom.append(this.action, $('span'));
label.textContent = keybindingLabel ? `${actionOptions.label} (${keybindingLabel})` : actionOptions.label;
this._register(dom.addDisposableListener(this.actionContainer, dom.EventType.MOUSE_DOWN, e => {
this._register(dom.addDisposableListener(this.actionContainer, dom.EventType.CLICK, e => {
e.stopPropagation();
e.preventDefault();
actionOptions.run(this.actionContainer);
}));
this._register(dom.addDisposableListener(this.actionContainer, dom.EventType.KEY_UP, e => {
const event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Enter)) {
e.stopPropagation();
e.preventDefault();
actionOptions.run(this.actionContainer);
}
}));
this.setEnabled(true);
}
src/vs/base/browser/ui/iconLabel/iconLabel.ts
+7 -14
View File
@@ -3,17 +3,15 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./iconlabel';
import * as dom from 'vs/base/browser/dom';
import { HighlightedLabel } from 'vs/base/browser/ui/highlightedlabel/highlightedLabel';
import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
import { setupCustomHover, setupNativeHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
import { CancellationToken } from 'vs/base/common/cancellation';
import { ITooltipMarkdownString, setupCustomHover, setupNativeHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
import { IMatch } from 'vs/base/common/filters';
import { IMarkdownString } from 'vs/base/common/htmlContent';
import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
import { equals } from 'vs/base/common/objects';
import { Range } from 'vs/base/common/range';
import 'vs/css!./iconlabel';
export interface IIconLabelCreationOptions {
supportHighlights?: boolean;
@@ -22,13 +20,8 @@ export interface IIconLabelCreationOptions {
hoverDelegate?: IHoverDelegate;
}
export interface IIconLabelMarkdownString {
markdown: IMarkdownString | string | HTMLElement | undefined | ((token: CancellationToken) => Promise<IMarkdownString | string | undefined>);
markdownNotSupportedFallback: string | undefined;
}
export interface IIconLabelValueOptions {
title?: string | IIconLabelMarkdownString;
title?: string | ITooltipMarkdownString;
descriptionTitle?: string;
hideIcon?: boolean;
extraClasses?: string[];
@@ -118,7 +111,7 @@ export class IconLabel extends Disposable {
}
if (options?.supportDescriptionHighlights) {
this.descriptionNodeFactory = () => new HighlightedLabel(dom.append(this.descriptionContainer.element, dom.$('span.label-description')), !!options.supportIcons);
this.descriptionNodeFactory = () => new HighlightedLabel(dom.append(this.descriptionContainer.element, dom.$('span.label-description')), { supportIcons: !!options.supportIcons });
} else {
this.descriptionNodeFactory = () => this._register(new FastLabelNode(dom.append(this.descriptionContainer.element, dom.$('span.label-description'))));
}
@@ -167,7 +160,7 @@ export class IconLabel extends Disposable {
}
}
private setupHover(htmlElement: HTMLElement, tooltip: string | IIconLabelMarkdownString | undefined): void {
private setupHover(htmlElement: HTMLElement, tooltip: string | ITooltipMarkdownString | undefined): void {
const previousCustomHover = this.customHovers.get(htmlElement);
if (previousCustomHover) {
previousCustomHover.dispose();
@@ -281,7 +274,7 @@ class LabelWithHighlights {
if (!this.singleLabel) {
this.container.innerText = '';
this.container.classList.remove('multiple');
this.singleLabel = new HighlightedLabel(dom.append(this.container, dom.$('a.label-name', { id: options?.domId })), this.supportIcons);
this.singleLabel = new HighlightedLabel(dom.append(this.container, dom.$('a.label-name', { id: options?.domId })), { supportIcons: this.supportIcons });
}
this.singleLabel.set(label, options?.matches, undefined, options?.labelEscapeNewLines);
@@ -299,7 +292,7 @@ class LabelWithHighlights {
const id = options?.domId && `${options?.domId}_${i}`;
const name = dom.$('a.label-name', { id, 'data-icon-label-count': label.length, 'data-icon-label-index': i, 'role': 'treeitem' });
const highlightedLabel = new HighlightedLabel(dom.append(this.container, name), this.supportIcons);
const highlightedLabel = new HighlightedLabel(dom.append(this.container, name), { supportIcons: this.supportIcons });
highlightedLabel.set(l, m, undefined, options?.labelEscapeNewLines);
if (i < label.length - 1) {
src/vs/base/browser/ui/iconLabel/iconLabelHover.ts
+38 -21
View File
@@ -6,17 +6,23 @@
import * as dom from 'vs/base/browser/dom';
import { HoverPosition } from 'vs/base/browser/ui/hover/hoverWidget';
import { IHoverDelegate, IHoverDelegateOptions, IHoverDelegateTarget, IHoverWidget } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
import { IIconLabelMarkdownString } from 'vs/base/browser/ui/iconLabel/iconLabel';
import { TimeoutTimer } from 'vs/base/common/async';
import { CancellationTokenSource } from 'vs/base/common/cancellation';
import { CancellationToken, CancellationTokenSource } from 'vs/base/common/cancellation';
import { IMarkdownString, isMarkdownString } from 'vs/base/common/htmlContent';
import { stripIcons } from 'vs/base/common/iconLabels';
import { DisposableStore, IDisposable } from 'vs/base/common/lifecycle';
import { isFunction, isString } from 'vs/base/common/types';
import { localize } from 'vs/nls';
export function setupNativeHover(htmlElement: HTMLElement, tooltip: string | IIconLabelMarkdownString | undefined): void {
export interface ITooltipMarkdownString {
markdown: IMarkdownString | string | undefined | ((token: CancellationToken) => Promise<IMarkdownString | string | undefined>);
markdownNotSupportedFallback: string | undefined;
}
export function setupNativeHover(htmlElement: HTMLElement, tooltip: string | ITooltipMarkdownString | undefined): void {
if (isString(tooltip)) {
htmlElement.title = tooltip;
// Icons don't render in the native hover so we strip them out
htmlElement.title = stripIcons(tooltip);
} else if (tooltip?.markdownNotSupportedFallback) {
htmlElement.title = tooltip.markdownNotSupportedFallback;
} else {
@@ -24,6 +30,10 @@ export function setupNativeHover(htmlElement: HTMLElement, tooltip: string | IIc
}
}
export type IHoverContent = string | ITooltipMarkdownString | HTMLElement | undefined;
type IResolvedHoverContent = IMarkdownString | string | HTMLElement | undefined;
export interface ICustomHover extends IDisposable {
/**
@@ -39,11 +49,10 @@ export interface ICustomHover extends IDisposable {
/**
* Updates the contents of the hover.
*/
update(tooltip: string | IIconLabelMarkdownString | HTMLElement): void;
update(tooltip: IHoverContent): void;
}
type MarkdownTooltipContent = string | IIconLabelMarkdownString | HTMLElement | undefined;
type ResolvedMarkdownTooltipContent = IMarkdownString | string | HTMLElement | undefined;
class UpdatableHoverWidget implements IDisposable {
private _hoverWidget: IHoverWidget | undefined;
@@ -52,7 +61,7 @@ class UpdatableHoverWidget implements IDisposable {
constructor(private hoverDelegate: IHoverDelegate, private target: IHoverDelegateTarget | HTMLElement, private fadeInAnimation: boolean) {
}
async update(markdownTooltip: MarkdownTooltipContent, focus?: boolean): Promise<void> {
async update(content: IHoverContent, focus?: boolean): Promise<void> {
if (this._cancellationTokenSource) {
// there's an computation ongoing, cancel it
this._cancellationTokenSource.dispose(true);
@@ -63,10 +72,10 @@ class UpdatableHoverWidget implements IDisposable {
}
let resolvedContent;
if (markdownTooltip === undefined || isString(markdownTooltip) || markdownTooltip instanceof HTMLElement) {
resolvedContent = markdownTooltip;
} else if (!isFunction(markdownTooltip.markdown)) {
resolvedContent = markdownTooltip.markdown ?? markdownTooltip.markdownNotSupportedFallback;
if (content === undefined || isString(content) || content instanceof HTMLElement) {
resolvedContent = content;
} else if (!isFunction(content.markdown)) {
resolvedContent = content.markdown ?? content.markdownNotSupportedFallback;
} else {
// compute the content, potentially long-running
@@ -78,7 +87,10 @@ class UpdatableHoverWidget implements IDisposable {
// compute the content
this._cancellationTokenSource = new CancellationTokenSource();
const token = this._cancellationTokenSource.token;
resolvedContent = await markdownTooltip.markdown(token);
resolvedContent = await content.markdown(token);
if (resolvedContent === undefined) {
resolvedContent = content.markdownNotSupportedFallback;
}
if (this.isDisposed || token.isCancellationRequested) {
// either the widget has been closed in the meantime
@@ -90,7 +102,7 @@ class UpdatableHoverWidget implements IDisposable {
this.show(resolvedContent, focus);
}
private show(content: ResolvedMarkdownTooltipContent, focus?: boolean): void {
private show(content: IResolvedHoverContent, focus?: boolean): void {
const oldHoverWidget = this._hoverWidget;
if (this.hasContent(content)) {
@@ -107,7 +119,7 @@ class UpdatableHoverWidget implements IDisposable {
oldHoverWidget?.dispose();
}
private hasContent(content: ResolvedMarkdownTooltipContent): content is NonNullable<ResolvedMarkdownTooltipContent> {
private hasContent(content: IResolvedHoverContent): content is NonNullable<IResolvedHoverContent> {
if (!content) {
return false;
}
@@ -130,7 +142,7 @@ class UpdatableHoverWidget implements IDisposable {
}
}
export function setupCustomHover(hoverDelegate: IHoverDelegate, htmlElement: HTMLElement, markdownTooltip: string | IIconLabelMarkdownString | HTMLElement): ICustomHover {
export function setupCustomHover(hoverDelegate: IHoverDelegate, htmlElement: HTMLElement, content: IHoverContent): ICustomHover {
let hoverPreparation: IDisposable | undefined;
let hoverWidget: UpdatableHoverWidget | undefined;
@@ -151,7 +163,7 @@ export function setupCustomHover(hoverDelegate: IHoverDelegate, htmlElement: HTM
return new TimeoutTimer(async () => {
if (!hoverWidget || hoverWidget.isDisposed) {
hoverWidget = new UpdatableHoverWidget(hoverDelegate, target || htmlElement, delay > 0);
await hoverWidget.update(markdownTooltip, focus);
await hoverWidget.update(content, focus);
}
}, delay);
};
@@ -175,7 +187,12 @@ export function setupCustomHover(hoverDelegate: IHoverDelegate, htmlElement: HTM
};
if (hoverDelegate.placement === undefined || hoverDelegate.placement === 'mouse') {
// track the mouse position
const onMouseMove = (e: MouseEvent) => target.x = e.x + 10;
const onMouseMove = (e: MouseEvent) => {
target.x = e.x + 10;
if ((e.target instanceof HTMLElement) && e.target.classList.contains('action-label')) {
hideHover(true, true);
}
};
toDispose.add(dom.addDisposableListener(htmlElement, dom.EventType.MOUSE_MOVE, onMouseMove, true));
}
toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
@@ -191,9 +208,9 @@ export function setupCustomHover(hoverDelegate: IHoverDelegate, htmlElement: HTM
hide: () => {
hideHover(true, true);
},
update: async newTooltip => {
markdownTooltip = newTooltip;
await hoverWidget?.update(markdownTooltip);
update: async newContent => {
content = newContent;
await hoverWidget?.update(content);
},
dispose: () => {
mouseOverDomEmitter.dispose();
src/vs/base/browser/ui/inputbox/inputBox.ts
+2 -5
View File
@@ -387,11 +387,8 @@ export class InputBox extends Widget {
}
public set paddingRight(paddingRight: number) {
if (this.options.flexibleHeight && this.options.flexibleWidth) {
this.input.style.width = `calc(100% - ${paddingRight}px)`;
} else {
this.input.style.paddingRight = paddingRight + 'px';
}
// Set width to avoid hint text overlapping buttons
this.input.style.width = `calc(100% - ${paddingRight}px)`;
if (this.mirror) {
this.mirror.style.paddingRight = paddingRight + 'px';
src/vs/base/browser/ui/list/list.ts
+3 -3
View File
@@ -57,11 +57,11 @@ export interface IListContextMenuEvent<T> {
browserEvent: UIEvent;
element: T | undefined;
index: number | undefined;
anchor: HTMLElement | { x: number; y: number; };
anchor: HTMLElement | { x: number; y: number };
}
export interface IIdentityProvider<T> {
getId(element: T): { toString(): string; };
getId(element: T): { toString(): string };
}
export interface IKeyboardNavigationLabelProvider<T> {
@@ -71,7 +71,7 @@ export interface IKeyboardNavigationLabelProvider<T> {
* the list for filtering/navigating. Return `undefined` to make
* an element always match.
*/
getKeyboardNavigationLabel(element: T): { toString(): string | undefined; } | { toString(): string | undefined; }[] | undefined;
getKeyboardNavigationLabel(element: T): { toString(): string | undefined } | { toString(): string | undefined }[] | undefined;
}
export interface IKeyboardNavigationDelegate {
src/vs/base/browser/ui/list/listView.ts
+35 -10
View File
@@ -19,9 +19,10 @@ import { getOrDefault } from 'vs/base/common/objects';
import { IRange, Range } from 'vs/base/common/range';
import { INewScrollDimensions, Scrollable, ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable';
import { ISpliceable } from 'vs/base/common/sequence';
import { IListDragAndDrop, IListDragEvent, IListGestureEvent, IListMouseEvent, IListRenderer, IListTouchEvent, IListVirtualDelegate, ListDragOverEffect } from './list';
import { RangeMap, shift } from './rangeMap';
import { IRow, RowCache } from './rowCache';
import { IListDragAndDrop, IListDragEvent, IListGestureEvent, IListMouseEvent, IListRenderer, IListTouchEvent, IListVirtualDelegate, ListDragOverEffect } from 'vs/base/browser/ui/list/list';
import { RangeMap, shift } from 'vs/base/browser/ui/list/rangeMap';
import { IRow, RowCache } from 'vs/base/browser/ui/list/rowCache';
import { IObservableValue } from 'vs/base/common/observableValue';
interface IItem<T> {
readonly id: string;
@@ -35,6 +36,7 @@ interface IItem<T> {
uri: string | undefined;
dropTarget: boolean;
dragStartDisposable: IDisposable;
checkedDisposable: IDisposable;
}
export interface IListViewDragAndDrop<T> extends IListDragAndDrop<T> {
@@ -45,7 +47,7 @@ export interface IListViewAccessibilityProvider<T> {
getSetSize?(element: T, index: number, listLength: number): number;
getPosInSet?(element: T, index: number): number;
getRole?(element: T): string | undefined;
isChecked?(element: T): boolean | undefined;
isChecked?(element: T): boolean | IObservableValue<boolean> | undefined;
}
export interface IListViewOptionsUpdate {
@@ -174,7 +176,7 @@ class ListViewAccessibilityProvider<T> implements Required<IListViewAccessibilit
readonly getSetSize: (element: any, index: number, listLength: number) => number;
readonly getPosInSet: (element: any, index: number) => number;
readonly getRole: (element: T) => string | undefined;
readonly isChecked: (element: T) => boolean | undefined;
readonly isChecked: (element: T) => boolean | IObservableValue<boolean> | undefined;
constructor(accessibilityProvider?: IListViewAccessibilityProvider<T>) {
if (accessibilityProvider?.getSetSize) {
@@ -203,6 +205,16 @@ class ListViewAccessibilityProvider<T> implements Required<IListViewAccessibilit
}
}
/**
* The {@link ListView} is a virtual scrolling engine.
*
* Given that it only renders elements within its viewport, it can hold large
* collections of elements and stay very performant. The performance bottleneck
* usually lies within the user's rendering code for each element.
*
* @remarks It is a low-level widget, not meant to be used directly. Refer to the
* List widget instead.
*/
export class ListView<T> implements ISpliceable<T>, IDisposable {
private static InstanceCount = 0;
@@ -251,6 +263,7 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
get onDidScroll(): Event<ScrollEvent> { return this.scrollableElement.onScroll; }
get onWillScroll(): Event<ScrollEvent> { return this.scrollableElement.onWillScroll; }
get containerDomNode(): HTMLElement { return this.rowsContainer; }
get scrollableElementDomNode(): HTMLElement { return this.scrollableElement.getDomNode(); }
private _horizontalScrolling: boolean = false;
private get horizontalScrolling(): boolean { return this._horizontalScrolling; }
@@ -329,7 +342,11 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
this.disposables.add(Gesture.addTarget(this.rowsContainer));
this.scrollable = new Scrollable(getOrDefault(options, o => o.smoothScrolling, false) ? 125 : 0, cb => scheduleAtNextAnimationFrame(cb));
this.scrollable = new Scrollable({
forceIntegerValues: true,
smoothScrollDuration: getOrDefault(options, o => o.smoothScrolling, false) ? 125 : 0,
scheduleAtNextAnimationFrame: cb => scheduleAtNextAnimationFrame(cb)
});
this.scrollableElement = this.disposables.add(new SmoothScrollableElement(this.rowsContainer, {
alwaysConsumeMouseWheel: getOrDefault(options, o => o.alwaysConsumeMouseWheel, DefaultOptions.alwaysConsumeMouseWheel),
horizontal: ScrollbarVisibility.Auto,
@@ -462,9 +479,10 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
// try to reuse rows, avoid removing them from DOM
const rowsToDispose = new Map<string, IRow[]>();
for (let i = removeRange.start; i < removeRange.end; i++) {
for (let i = removeRange.end - 1; i >= removeRange.start; i--) {
const item = this.items[i];
item.dragStartDisposable.dispose();
item.checkedDisposable.dispose();
if (item.row) {
let rows = rowsToDispose.get(item.templateId);
@@ -501,7 +519,8 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
row: null,
uri: undefined,
dropTarget: false,
dragStartDisposable: Disposable.None
dragStartDisposable: Disposable.None,
checkedDisposable: Disposable.None
}));
let deleted: IItem<T>[];
@@ -769,8 +788,13 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
item.row.domNode.setAttribute('role', role);
const checked = this.accessibilityProvider.isChecked(item.element);
if (typeof checked !== 'undefined') {
item.row.domNode.setAttribute('aria-checked', String(!!checked));
if (typeof checked === 'boolean') {
item.row!.domNode.setAttribute('aria-checked', String(!!checked));
} else if (checked) {
const update = (checked: boolean) => item.row!.domNode.setAttribute('aria-checked', String(!!checked));
update(checked.value);
item.checkedDisposable = checked.onDidChange(update);
}
if (!item.row.domNode.parentElement) {
@@ -851,6 +875,7 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
private removeItemFromDOM(index: number): void {
const item = this.items[index];
item.dragStartDisposable.dispose();
item.checkedDisposable.dispose();
if (item.row) {
const renderer = this.renderers.get(item.templateId);
src/vs/base/browser/ui/list/listWidget.ts
+31 -3
View File
@@ -49,7 +49,7 @@ class TraitRenderer<T> implements IListRenderer<T, ITraitTemplateData>
constructor(private trait: Trait<T>) { }
get templateId(): string {
return `template:${this.trait.trait}`;
return `template:${this.trait.name}`;
}
renderTemplate(container: HTMLElement): ITraitTemplateData {
@@ -117,7 +117,7 @@ class Trait<T> implements ISpliceable<boolean>, IDisposable {
private readonly _onChange = new Emitter<ITraitChangeEvent>();
readonly onChange: Event<ITraitChangeEvent> = this._onChange.event;
get trait(): string { return this._trait; }
get name(): string { return this._trait; }
@memoize
get renderer(): TraitRenderer<T> {
@@ -854,6 +854,7 @@ export class DefaultStyleController implements IStyleController {
content.push(`
.monaco-drag-image,
.monaco-list${suffix}:focus .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }
.monaco-workbench.context-menu-visible .monaco-list${suffix}.last-focused .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }
`);
}
@@ -897,6 +898,16 @@ export class DefaultStyleController implements IStyleController {
}`);
}
if (styles.tableOddRowsBackgroundColor) {
content.push(`
.monaco-table .monaco-list-row[data-parity=odd]:not(.focused):not(.selected):not(:hover) .monaco-table-tr,
.monaco-table .monaco-list:not(:focus) .monaco-list-row[data-parity=odd].focused:not(.selected):not(:hover) .monaco-table-tr,
.monaco-table .monaco-list:not(.focused) .monaco-list-row[data-parity=odd].focused:not(.selected):not(:hover) .monaco-table-tr {
background-color: ${styles.tableOddRowsBackgroundColor};
}
`);
}
this.styleElement.textContent = content.join('\n');
}
}
@@ -959,6 +970,7 @@ export interface IListStyles {
listMatchesShadow?: Color;
treeIndentGuidesStroke?: Color;
tableColumnsBorder?: Color;
tableOddRowsBackgroundColor?: Color;
}
const defaultStyles: IListStyles = {
@@ -973,7 +985,8 @@ const defaultStyles: IListStyles = {
listHoverBackground: Color.fromHex('#2A2D2E'),
listDropBackground: Color.fromHex('#383B3D'),
treeIndentGuidesStroke: Color.fromHex('#a9a9a9'),
tableColumnsBorder: Color.fromHex('#cccccc').transparent(0.2)
tableColumnsBorder: Color.fromHex('#cccccc').transparent(0.2),
tableOddRowsBackgroundColor: Color.fromHex('#cccccc').transparent(0.04)
};
const DefaultOptions: IListOptions<any> = {
@@ -1193,6 +1206,21 @@ class ListViewDragAndDrop<T> implements IListViewDragAndDrop<T> {
}
}
/**
* The {@link List} is a virtual scrolling widget, built on top of the {@link ListView}
* widget.
*
* Features:
* - Customizable keyboard and mouse support
* - Element traits: focus, selection, achor
* - Accessibility support
* - Touch support
* - Performant template-based rendering
* - Horizontal scrolling
* - Variable element height support
* - Dynamic element height support
* - Drag-and-drop support
*/
export class List<T> implements ISpliceable<T>, IThemable, IDisposable {
private focus = new Trait<T>('focused');
src/vs/base/browser/ui/menu/menu.ts
+128 -139
View File
@@ -15,7 +15,7 @@ import { AnchorAlignment, layout, LayoutAnchorPosition } from 'vs/base/browser/u
import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
import { EmptySubmenuAction, IAction, IActionRunner, Separator, SubmenuAction } from 'vs/base/common/actions';
import { RunOnceScheduler } from 'vs/base/common/async';
import { Codicon, registerCodicon } from 'vs/base/common/codicons';
import { Codicon } from 'vs/base/common/codicons';
import { Color } from 'vs/base/common/color';
import { Event } from 'vs/base/common/event';
import { stripIcons } from 'vs/base/common/iconLabels';
@@ -25,13 +25,11 @@ import { DisposableStore } from 'vs/base/common/lifecycle';
import { isLinux, isMacintosh } from 'vs/base/common/platform';
import { ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable';
import * as strings from 'vs/base/common/strings';
import * as nls from 'vs/nls';
export const MENU_MNEMONIC_REGEX = /\(&([^\s&])\)|(^|[^&])&([^\s&])/;
export const MENU_ESCAPED_MNEMONIC_REGEX = /(&amp;)?(&amp;)([^\s&])/g;
const menuSelectionIcon = registerCodicon('menu-selection', Codicon.check);
const menuSubmenuIcon = registerCodicon('menu-submenu', Codicon.chevronRight);
export enum Direction {
Right,
@@ -60,6 +58,10 @@ export interface IMenuStyles {
selectionBackgroundColor?: Color;
selectionBorderColor?: Color;
separatorColor?: Color;
scrollbarShadow?: Color;
scrollbarSliderBackground?: Color;
scrollbarSliderHoverBackground?: Color;
scrollbarSliderActiveBackground?: Color;
}
interface ISubMenuData {
@@ -100,7 +102,7 @@ export class Menu extends ActionBar {
this.menuDisposables = this._register(new DisposableStore());
this.initializeStyleSheet(container);
this.initializeOrUpdateStyleSheet(container, {});
this._register(Gesture.addTarget(menuElement));
@@ -263,23 +265,25 @@ export class Menu extends ActionBar {
});
}
private initializeStyleSheet(container: HTMLElement): void {
if (isInShadowDOM(container)) {
this.styleSheet = createStyleSheet(container);
this.styleSheet.textContent = MENU_WIDGET_CSS;
} else {
if (!Menu.globalStyleSheet) {
Menu.globalStyleSheet = createStyleSheet();
Menu.globalStyleSheet.textContent = MENU_WIDGET_CSS;
private initializeOrUpdateStyleSheet(container: HTMLElement, style: IMenuStyles): void {
if (!this.styleSheet) {
if (isInShadowDOM(container)) {
this.styleSheet = createStyleSheet(container);
} else {
if (!Menu.globalStyleSheet) {
Menu.globalStyleSheet = createStyleSheet();
}
this.styleSheet = Menu.globalStyleSheet;
}
this.styleSheet = Menu.globalStyleSheet;
}
this.styleSheet.textContent = getMenuWidgetCSS(style, isInShadowDOM(container));
}
style(style: IMenuStyles): void {
const container = this.getContainer();
this.initializeOrUpdateStyleSheet(container, style);
const fgColor = style.foregroundColor ? `${style.foregroundColor}` : '';
const bgColor = style.backgroundColor ? `${style.backgroundColor}` : '';
const border = style.borderColor ? `1px solid ${style.borderColor}` : '';
@@ -345,7 +349,7 @@ export class Menu extends ActionBar {
}
protected override updateFocus(fromRight?: boolean): void {
super.updateFocus(fromRight, true);
super.updateFocus(fromRight, true, true);
if (typeof this.focusedItem !== 'undefined') {
// Workaround for #80047 caused by an issue in chromium
@@ -520,7 +524,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
}
}
this.check = append(this.item, $('span.menu-item-check' + menuSelectionIcon.cssSelector));
this.check = append(this.item, $('span.menu-item-check' + Codicon.menuSelection.cssSelector));
this.check.setAttribute('role', 'none');
this.label = append(this.item, $('span.action-label'));
@@ -615,22 +619,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
}
override updateTooltip(): void {
let title: string | null = null;
if (this.getAction().tooltip) {
title = this.getAction().tooltip;
} else if (!this.options.label && this.getAction().label && this.options.icon) {
title = this.getAction().label;
if (this.options.keybinding) {
title = nls.localize({ key: 'titleLabel', comment: ['action title', 'action keybinding'] }, "{0} ({1})", title, this.options.keybinding);
}
}
if (title && this.item) {
this.item.title = title;
}
// menus should function like native menus and they do not have tooltips
}
override updateClass(): void {
@@ -771,7 +760,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
this.item.tabIndex = 0;
this.item.setAttribute('aria-haspopup', 'true');
this.updateAriaExpanded('false');
this.submenuIndicator = append(this.item, $('span.submenu-indicator' + menuSubmenuIcon.cssSelector));
this.submenuIndicator = append(this.item, $('span.submenu-indicator' + Codicon.menuSubmenu.cssSelector));
this.submenuIndicator.setAttribute('aria-hidden', 'true');
}
@@ -813,8 +802,10 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
}));
this._register(this.parentData.parent.onScroll(() => {
this.parentData.parent.focus(false);
this.cleanupExistingSubmenu(false);
if (this.parentData.submenu === this.mysubmenu) {
this.parentData.parent.focus(false);
this.cleanupExistingSubmenu(true);
}
}));
}
@@ -854,7 +845,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
}
}
private calculateSubmenuMenuLayout(windowDimensions: Dimension, submenu: Dimension, entry: IDomNodePagePosition, expandDirection: Direction): { top: number, left: number } {
private calculateSubmenuMenuLayout(windowDimensions: Dimension, submenu: Dimension, entry: IDomNodePagePosition, expandDirection: Direction): { top: number; left: number } {
const ret = { top: 0, left: 0 };
// Start with horizontal
@@ -1017,14 +1008,15 @@ export function cleanMnemonic(label: string): string {
return label.replace(regex, mnemonicInText ? '$2$3' : '').trim();
}
let MENU_WIDGET_CSS: string = /* css */`
function getMenuWidgetCSS(style: IMenuStyles, isForShadowDom: boolean): string {
let result = /* css */`
.monaco-menu {
font-size: 13px;
}
${formatRule(menuSelectionIcon)}
${formatRule(menuSubmenuIcon)}
${formatRule(Codicon.menuSelection)}
${formatRule(Codicon.menuSubmenu)}
.monaco-menu .monaco-action-bar {
text-align: right;
@@ -1080,7 +1072,7 @@ ${formatRule(menuSubmenuIcon)}
.monaco-menu .monaco-action-bar .action-item.disabled .action-label,
.monaco-menu .monaco-action-bar .action-item.disabled .action-label:hover {
opacity: 0.4;
color: var(--vscode-disabledForeground);
}
/* Vertical actions */
@@ -1252,11 +1244,13 @@ ${formatRule(menuSubmenuIcon)}
/* High Contrast Theming */
:host-context(.hc-black) .context-view.monaco-menu-container {
:host-context(.hc-black) .context-view.monaco-menu-container,
:host-context(.hc-light) .context-view.monaco-menu-container {
box-shadow: none;
}
:host-context(.hc-black) .monaco-menu .monaco-action-bar.vertical .action-item.focused {
:host-context(.hc-black) .monaco-menu .monaco-action-bar.vertical .action-item.focused,
:host-context(.hc-light) .monaco-menu .monaco-action-bar.vertical .action-item.focused {
background: none;
}
@@ -1305,112 +1299,107 @@ ${formatRule(menuSubmenuIcon)}
.monaco-menu .action-item {
cursor: default;
}
}`;
/* Arrows */
.monaco-scrollable-element > .scrollbar > .scra {
cursor: pointer;
font-size: 11px !important;
}
if (isForShadowDom) {
// Only define scrollbar styles when used inside shadow dom,
// otherwise leave their styling to the global workbench styling.
result += `
/* Arrows */
.monaco-scrollable-element > .scrollbar > .scra {
cursor: pointer;
font-size: 11px !important;
}
.monaco-scrollable-element > .visible {
opacity: 1;
.monaco-scrollable-element > .visible {
opacity: 1;
/* Background rule added for IE9 - to allow clicks on dom node */
background:rgba(0,0,0,0);
/* Background rule added for IE9 - to allow clicks on dom node */
background:rgba(0,0,0,0);
transition: opacity 100ms linear;
}
.monaco-scrollable-element > .invisible {
opacity: 0;
pointer-events: none;
}
.monaco-scrollable-element > .invisible.fade {
transition: opacity 800ms linear;
}
transition: opacity 100ms linear;
}
.monaco-scrollable-element > .invisible {
opacity: 0;
pointer-events: none;
}
.monaco-scrollable-element > .invisible.fade {
transition: opacity 800ms linear;
}
/* Scrollable Content Inset Shadow */
.monaco-scrollable-element > .shadow {
position: absolute;
display: none;
}
.monaco-scrollable-element > .shadow.top {
display: block;
top: 0;
left: 3px;
height: 3px;
width: 100%;
box-shadow: #DDD 0 6px 6px -6px inset;
}
.monaco-scrollable-element > .shadow.left {
display: block;
top: 3px;
left: 0;
height: 100%;
width: 3px;
box-shadow: #DDD 6px 0 6px -6px inset;
}
.monaco-scrollable-element > .shadow.top-left-corner {
display: block;
top: 0;
left: 0;
height: 3px;
width: 3px;
}
.monaco-scrollable-element > .shadow.top.left {
box-shadow: #DDD 6px 6px 6px -6px inset;
}
/* Scrollable Content Inset Shadow */
.monaco-scrollable-element > .shadow {
position: absolute;
display: none;
}
.monaco-scrollable-element > .shadow.top {
display: block;
top: 0;
left: 3px;
height: 3px;
width: 100%;
}
.monaco-scrollable-element > .shadow.left {
display: block;
top: 3px;
left: 0;
height: 100%;
width: 3px;
}
.monaco-scrollable-element > .shadow.top-left-corner {
display: block;
top: 0;
left: 0;
height: 3px;
width: 3px;
}
`;
/* ---------- Default Style ---------- */
// Scrollbars
const scrollbarShadowColor = style.scrollbarShadow;
if (scrollbarShadowColor) {
result += `
.monaco-scrollable-element > .shadow.top {
box-shadow: ${scrollbarShadowColor} 0 6px 6px -6px inset;
}
:host-context(.vs) .monaco-scrollable-element > .scrollbar > .slider {
background: rgba(100, 100, 100, .4);
}
:host-context(.vs-dark) .monaco-scrollable-element > .scrollbar > .slider {
background: rgba(121, 121, 121, .4);
}
:host-context(.hc-black) .monaco-scrollable-element > .scrollbar > .slider {
background: rgba(111, 195, 223, .6);
}
.monaco-scrollable-element > .shadow.left {
box-shadow: ${scrollbarShadowColor} 6px 0 6px -6px inset;
}
.monaco-scrollable-element > .scrollbar > .slider:hover {
background: rgba(100, 100, 100, .7);
}
:host-context(.hc-black) .monaco-scrollable-element > .scrollbar > .slider:hover {
background: rgba(111, 195, 223, .8);
}
.monaco-scrollable-element > .shadow.top.left {
box-shadow: ${scrollbarShadowColor} 6px 6px 6px -6px inset;
}
`;
}
.monaco-scrollable-element > .scrollbar > .slider.active {
background: rgba(0, 0, 0, .6);
}
:host-context(.vs-dark) .monaco-scrollable-element > .scrollbar > .slider.active {
background: rgba(191, 191, 191, .4);
}
:host-context(.hc-black) .monaco-scrollable-element > .scrollbar > .slider.active {
background: rgba(111, 195, 223, 1);
}
const scrollbarSliderBackgroundColor = style.scrollbarSliderBackground;
if (scrollbarSliderBackgroundColor) {
result += `
.monaco-scrollable-element > .scrollbar > .slider {
background: ${scrollbarSliderBackgroundColor};
}
`;
}
:host-context(.vs-dark) .monaco-scrollable-element .shadow.top {
box-shadow: none;
}
const scrollbarSliderHoverBackgroundColor = style.scrollbarSliderHoverBackground;
if (scrollbarSliderHoverBackgroundColor) {
result += `
.monaco-scrollable-element > .scrollbar > .slider:hover {
background: ${scrollbarSliderHoverBackgroundColor};
}
`;
}
:host-context(.vs-dark) .monaco-scrollable-element .shadow.left {
box-shadow: #000 6px 0 6px -6px inset;
}
const scrollbarSliderActiveBackgroundColor = style.scrollbarSliderActiveBackground;
if (scrollbarSliderActiveBackgroundColor) {
result += `
.monaco-scrollable-element > .scrollbar > .slider.active {
background: ${scrollbarSliderActiveBackgroundColor};
}
`;
}
}
:host-context(.vs-dark) .monaco-scrollable-element .shadow.top.left {
box-shadow: #000 6px 6px 6px -6px inset;
return result;
}
:host-context(.hc-black) .monaco-scrollable-element .shadow.top {
box-shadow: none;
}
:host-context(.hc-black) .monaco-scrollable-element .shadow.left {
box-shadow: none;
}
:host-context(.hc-black) .monaco-scrollable-element .shadow.top.left {
box-shadow: none;
}
`;
src/vs/base/browser/ui/menu/menubar.ts
+6 -7
View File
@@ -12,7 +12,7 @@ import { cleanMnemonic, Direction, IMenuOptions, IMenuStyles, Menu, MENU_ESCAPED
import { ActionRunner, IAction, IActionRunner, Separator, SubmenuAction } from 'vs/base/common/actions';
import { asArray } from 'vs/base/common/arrays';
import { RunOnceScheduler } from 'vs/base/common/async';
import { Codicon, registerCodicon } from 'vs/base/common/codicons';
import { Codicon } from 'vs/base/common/codicons';
import { Emitter, Event } from 'vs/base/common/event';
import { KeyCode, KeyMod, ScanCode, ScanCodeUtils } from 'vs/base/common/keyCodes';
import { ResolvedKeybinding } from 'vs/base/common/keybindings';
@@ -25,8 +25,6 @@ import * as nls from 'vs/nls';
const $ = DOM.$;
const menuBarMoreIcon = registerCodicon('menubar-more', Codicon.more);
export interface IMenuBarOptions {
enableMnemonics?: boolean;
disableAltFocus?: boolean;
@@ -34,7 +32,8 @@ export interface IMenuBarOptions {
getKeybinding?: (action: IAction) => ResolvedKeybinding | undefined;
alwaysOnMnemonics?: boolean;
compactMode?: Direction;
getCompactMenuActions?: () => IAction[]
actionRunner?: IActionRunner;
getCompactMenuActions?: () => IAction[];
}
export interface MenuBarMenu {
@@ -109,7 +108,7 @@ export class MenuBar extends Disposable {
this.menuUpdater = this._register(new RunOnceScheduler(() => this.update(), 200));
this.actionRunner = this._register(new ActionRunner());
this.actionRunner = this.options.actionRunner ?? this._register(new ActionRunner());
this._register(this.actionRunner.onBeforeRun(() => {
this.setUnfocusedState();
}));
@@ -316,7 +315,7 @@ export class MenuBar extends Disposable {
const label = this.isCompact ? nls.localize('mAppMenu', 'Application Menu') : nls.localize('mMore', 'More');
const title = this.isCompact ? label : undefined;
const buttonElement = $('div.menubar-menu-button', { 'role': 'menuitem', 'tabindex': this.isCompact ? 0 : -1, 'aria-label': label, 'title': title, 'aria-haspopup': true });
const titleElement = $('div.menubar-menu-title.toolbar-toggle-more' + menuBarMoreIcon.cssSelector, { 'role': 'none', 'aria-hidden': true });
const titleElement = $('div.menubar-menu-title.toolbar-toggle-more' + Codicon.menuBarMore.cssSelector, { 'role': 'none', 'aria-hidden': true });
buttonElement.appendChild(titleElement);
this.container.appendChild(buttonElement);
@@ -476,7 +475,7 @@ export class MenuBar extends Disposable {
const prevNumMenusShown = this.numMenusShown;
this.numMenusShown = 0;
const showableMenus = this.menus.filter(menu => menu.buttonElement !== undefined && menu.titleElement !== undefined) as (MenuBarMenuWithElements & { titleElement: HTMLElement, buttonElement: HTMLElement })[];
const showableMenus = this.menus.filter(menu => menu.buttonElement !== undefined && menu.titleElement !== undefined) as (MenuBarMenuWithElements & { titleElement: HTMLElement; buttonElement: HTMLElement })[];
for (let menuBarMenu of showableMenus) {
if (!full) {
const size = menuBarMenu.buttonElement.offsetWidth;
src/vs/base/browser/ui/mouseCursor/mouseCursor.css
-6
View File
@@ -6,9 +6,3 @@
.monaco-mouse-cursor-text {
cursor: text;
}
/* The following selector looks a bit funny, but that is needed to cover all the workbench and the editor!! */
.vs-dark .mac .monaco-mouse-cursor-text, .hc-black .mac .monaco-mouse-cursor-text,
.vs-dark.mac .monaco-mouse-cursor-text, .hc-black.mac .monaco-mouse-cursor-text {
cursor: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAz0lEQVRIx2NgYGBY/R8I/vx5eelX3n82IJ9FxGf6tksvf/8FiTMQAcAGQMDvSwu09abffY8QYSAScNk45G198eX//yev73/4///701eh//kZSARckrNBRvz//+8+6ZohwCzjGNjdgQxkAg7B9WADeBjIBqtJCbhRA0YNoIkBSNmaPEMoNmA0FkYNoFKhapJ6FGyAH3nauaSmPfwI0v/3OukVi0CIZ+F25KrtYcx/CTIy0e+rC7R1Z4KMICVTQQ14feVXIbR695u14+Ir4gwAAD49E54wc1kWAAAAAElFTkSuQmCC') 2x) 5 8, text;
}
src/vs/base/browser/ui/progressbar/progressbar.css
+11 -1
View File
@@ -34,8 +34,18 @@
animation-name: progress;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}
.monaco-progress-container.infinite.infinite-long-running .progress-bit {
/*
The more smooth `linear` timing function can cause
higher GPU consumption as indicated in
https://github.com/microsoft/vscode/issues/97900 &
https://github.com/microsoft/vscode/issues/138396
*/
animation-timing-function: steps(100);
}
/**
src/vs/base/browser/ui/progressbar/progressbar.ts
+28 -6
View File
@@ -14,6 +14,7 @@ import 'vs/css!./progressbar';
const CSS_DONE = 'done';
const CSS_ACTIVE = 'active';
const CSS_INFINITE = 'infinite';
const CSS_INFINITE_LONG_RUNNING = 'infinite-long-running';
const CSS_DISCRETE = 'discrete';
export interface IProgressBarOptions extends IProgressBarStyles {
@@ -31,6 +32,17 @@ const defaultOpts = {
* A progress bar with support for infinite or discrete progress.
*/
export class ProgressBar extends Disposable {
/**
* After a certain time of showing the progress bar, switch
* to long-running mode and throttle animations to reduce
* the pressure on the GPU process.
*
* https://github.com/microsoft/vscode/issues/97900
* https://github.com/microsoft/vscode/issues/138396
*/
private static readonly LONG_RUNNING_INFINITE_THRESHOLD = 10000;
private options: IProgressBarOptions;
private workedVal: number;
private element!: HTMLElement;
@@ -38,6 +50,7 @@ export class ProgressBar extends Disposable {
private totalWork: number | undefined;
private progressBarBackground: Color | undefined;
private showDelayedScheduler: RunOnceScheduler;
private longRunningScheduler: RunOnceScheduler;
constructor(container: HTMLElement, options?: IProgressBarOptions) {
super();
@@ -49,7 +62,8 @@ export class ProgressBar extends Disposable {
this.progressBarBackground = this.options.progressBarBackground;
this._register(this.showDelayedScheduler = new RunOnceScheduler(() => show(this.element), 0));
this.showDelayedScheduler = this._register(new RunOnceScheduler(() => show(this.element), 0));
this.longRunningScheduler = this._register(new RunOnceScheduler(() => this.infiniteLongRunning(), ProgressBar.LONG_RUNNING_INFINITE_THRESHOLD));
this.create(container);
}
@@ -71,10 +85,12 @@ export class ProgressBar extends Disposable {
private off(): void {
this.bit.style.width = 'inherit';
this.bit.style.opacity = '1';
this.element.classList.remove(CSS_ACTIVE, CSS_INFINITE, CSS_DISCRETE);
this.element.classList.remove(CSS_ACTIVE, CSS_INFINITE, CSS_INFINITE_LONG_RUNNING, CSS_DISCRETE);
this.workedVal = 0;
this.totalWork = undefined;
this.longRunningScheduler.cancel();
}
/**
@@ -94,7 +110,7 @@ export class ProgressBar extends Disposable {
private doDone(delayed: boolean): ProgressBar {
this.element.classList.add(CSS_DONE);
// let it grow to 100% width and hide afterwards
// discrete: let it grow to 100% width and hide afterwards
if (!this.element.classList.contains(CSS_INFINITE)) {
this.bit.style.width = 'inherit';
@@ -105,7 +121,7 @@ export class ProgressBar extends Disposable {
}
}
// let it fade out and hide afterwards
// infinite: let it fade out and hide afterwards
else {
this.bit.style.opacity = '0';
if (delayed) {
@@ -125,12 +141,18 @@ export class ProgressBar extends Disposable {
this.bit.style.width = '2%';
this.bit.style.opacity = '1';
this.element.classList.remove(CSS_DISCRETE, CSS_DONE);
this.element.classList.remove(CSS_DISCRETE, CSS_DONE, CSS_INFINITE_LONG_RUNNING);
this.element.classList.add(CSS_ACTIVE, CSS_INFINITE);
this.longRunningScheduler.schedule();
return this;
}
private infiniteLongRunning(): void {
this.element.classList.add(CSS_INFINITE_LONG_RUNNING);
}
/**
* Tells the progress bar the total number of work. Use in combination with workedVal() to let
* the progress bar show the actual progress based on the work that is done.
@@ -174,7 +196,7 @@ export class ProgressBar extends Disposable {
this.workedVal = value;
this.workedVal = Math.min(totalWork, this.workedVal);
this.element.classList.remove(CSS_INFINITE, CSS_DONE);
this.element.classList.remove(CSS_INFINITE, CSS_INFINITE_LONG_RUNNING, CSS_DONE);
this.element.classList.add(CSS_ACTIVE, CSS_DISCRETE);
this.element.setAttribute('aria-valuenow', value.toString());
src/vs/base/browser/ui/sash/sash.css
+4
View File
@@ -121,6 +121,10 @@
top: calc(50% - (var(--sash-hover-size) / 2));
}
.pointer-events-disabled {
pointer-events: none !important;
}
/** Debug **/
.monaco-sash.debug {
src/vs/base/browser/ui/sash/sash.ts
+190 -48
View File
@@ -13,29 +13,39 @@ import { Disposable, DisposableStore, toDisposable } from 'vs/base/common/lifecy
import { isMacintosh } from 'vs/base/common/platform';
import 'vs/css!./sash';
/**
* Allow the sashes to be visible at runtime.
* @remark Use for development purposes only.
*/
let DEBUG = false;
// DEBUG = Boolean("true"); // done "weirdly" so that a lint warning prevents you from pushing this
export interface ISashLayoutProvider { }
export interface IVerticalSashLayoutProvider extends ISashLayoutProvider {
/**
* A vertical sash layout provider provides position and height for a sash.
*/
export interface IVerticalSashLayoutProvider {
getVerticalSashLeft(sash: Sash): number;
getVerticalSashTop?(sash: Sash): number;
getVerticalSashHeight?(sash: Sash): number;
}
export interface IHorizontalSashLayoutProvider extends ISashLayoutProvider {
/**
* A vertical sash layout provider provides position and width for a sash.
*/
export interface IHorizontalSashLayoutProvider {
getHorizontalSashTop(sash: Sash): number;
getHorizontalSashLeft?(sash: Sash): number;
getHorizontalSashWidth?(sash: Sash): number;
}
type ISashLayoutProvider = IVerticalSashLayoutProvider | IHorizontalSashLayoutProvider;
export interface ISashEvent {
startX: number;
currentX: number;
startY: number;
currentY: number;
altKey: boolean;
readonly startX: number;
readonly currentX: number;
readonly startY: number;
readonly currentY: number;
readonly altKey: boolean;
}
export enum OrthogonalEdge {
@@ -46,10 +56,41 @@ export enum OrthogonalEdge {
}
export interface ISashOptions {
/**
* Whether a sash is horizontal or vertical.
*/
readonly orientation: Orientation;
readonly orthogonalStartSash?: Sash;
readonly orthogonalEndSash?: Sash;
/**
* The width or height of a vertical or horizontal sash, respectively.
*/
readonly size?: number;
/**
* A reference to another sash, perpendicular to this one, which
* aligns at the start of this one. A corner sash will be created
* automatically at that location.
*
* The start of a horizontal sash is its left-most position.
* The start of a vertical sash is its top-most position.
*/
readonly orthogonalStartSash?: Sash;
/**
* A reference to another sash, perpendicular to this one, which
* aligns at the end of this one. A corner sash will be created
* automatically at that location.
*
* The end of a horizontal sash is its right-most position.
* The end of a vertical sash is its bottom-most position.
*/
readonly orthogonalEndSash?: Sash;
/**
* Provides a hint as to what mouse cursor to use whenever the user
* hovers over a corner sash provided by this and an orthogonal sash.
*/
readonly orthogonalEdge?: OrthogonalEdge;
}
@@ -67,9 +108,31 @@ export const enum Orientation {
}
export const enum SashState {
/**
* Disable any UI interaction.
*/
Disabled,
Minimum,
Maximum,
/**
* Allow dragging down or to the right, depending on the sash orientation.
*
* Some OSs allow customizing the mouse cursor differently whenever
* some resizable component can't be any smaller, but can be larger.
*/
AtMinimum,
/**
* Allow dragging up or to the left, depending on the sash orientation.
*
* Some OSs allow customizing the mouse cursor differently whenever
* some resizable component can't be any larger, but can be smaller.
*/
AtMaximum,
/**
* Enable dragging.
*/
Enabled
}
@@ -159,53 +222,104 @@ class OrthogonalPointerEventFactory implements IPointerEventFactory {
}
}
const PointerEventsDisabledCssClass = 'pointer-events-disabled';
/**
* The {@link Sash} is the UI component which allows the user to resize other
* components. It's usually an invisible horizontal or vertical line which, when
* hovered, becomes highlighted and can be dragged along the perpendicular dimension
* to its direction.
*
* Features:
* - Touch event handling
* - Corner sash support
* - Hover with different mouse cursor support
* - Configurable hover size
* - Linked sash support, for 2x2 corner sashes
*/
export class Sash extends Disposable {
private el: HTMLElement;
private layoutProvider: ISashLayoutProvider;
private hidden: boolean;
private orientation!: Orientation;
private hidden: boolean; // {{SQL CARBON EDIT}} - ad hidden back
private orientation: Orientation;
private size: number;
private hoverDelay = globalHoverDelay;
private hoverDelayer = this._register(new Delayer(this.hoverDelay));
private _state: SashState = SashState.Enabled;
private readonly onDidEnablementChange = this._register(new Emitter<SashState>());
private readonly _onDidStart = this._register(new Emitter<ISashEvent>());
private readonly _onDidChange = this._register(new Emitter<ISashEvent>());
private readonly _onDidReset = this._register(new Emitter<void>());
private readonly _onDidEnd = this._register(new Emitter<void>());
private readonly orthogonalStartSashDisposables = this._register(new DisposableStore());
private _orthogonalStartSash: Sash | undefined;
private readonly orthogonalStartDragHandleDisposables = this._register(new DisposableStore());
private _orthogonalStartDragHandle: HTMLElement | undefined;
private readonly orthogonalEndSashDisposables = this._register(new DisposableStore());
private _orthogonalEndSash: Sash | undefined;
private readonly orthogonalEndDragHandleDisposables = this._register(new DisposableStore());
private _orthogonalEndDragHandle: HTMLElement | undefined;
get state(): SashState { return this._state; }
get orthogonalStartSash(): Sash | undefined { return this._orthogonalStartSash; }
get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; }
/**
* The state of a sash defines whether it can be interacted with by the user
* as well as what mouse cursor to use, when hovered.
*/
set state(state: SashState) {
if (this._state === state) {
return;
}
this.el.classList.toggle('disabled', state === SashState.Disabled);
this.el.classList.toggle('minimum', state === SashState.Minimum);
this.el.classList.toggle('maximum', state === SashState.Maximum);
this.el.classList.toggle('minimum', state === SashState.AtMinimum);
this.el.classList.toggle('maximum', state === SashState.AtMaximum);
this._state = state;
this._onDidEnablementChange.fire(state);
this.onDidEnablementChange.fire(state);
}
private readonly _onDidEnablementChange = this._register(new Emitter<SashState>());
readonly onDidEnablementChange: Event<SashState> = this._onDidEnablementChange.event;
private readonly _onDidStart = this._register(new Emitter<ISashEvent>());
/**
* An event which fires whenever the user starts dragging this sash.
*/
readonly onDidStart: Event<ISashEvent> = this._onDidStart.event;
private readonly _onDidChange = this._register(new Emitter<ISashEvent>());
/**
* An event which fires whenever the user moves the mouse while
* dragging this sash.
*/
readonly onDidChange: Event<ISashEvent> = this._onDidChange.event;
private readonly _onDidReset = this._register(new Emitter<void>());
/**
* An event which fires whenever the user double clicks this sash.
*/
readonly onDidReset: Event<void> = this._onDidReset.event;
private readonly _onDidEnd = this._register(new Emitter<void>());
/**
* An event which fires whenever the user stops dragging this sash.
*/
readonly onDidEnd: Event<void> = this._onDidEnd.event;
/**
* A linked sash will be forwarded the same user interactions and events
* so it moves exactly the same way as this sash.
*
* Useful in 2x2 grids. Not meant for widespread usage.
*/
linkedSash: Sash | undefined = undefined;
private readonly orthogonalStartSashDisposables = this._register(new DisposableStore());
private _orthogonalStartSash: Sash | undefined;
private readonly orthogonalStartDragHandleDisposables = this._register(new DisposableStore());
private _orthogonalStartDragHandle: HTMLElement | undefined;
get orthogonalStartSash(): Sash | undefined { return this._orthogonalStartSash; }
/**
* A reference to another sash, perpendicular to this one, which
* aligns at the start of this one. A corner sash will be created
* automatically at that location.
*
* The start of a horizontal sash is its left-most position.
* The start of a vertical sash is its top-most position.
*/
set orthogonalStartSash(sash: Sash | undefined) {
this.orthogonalStartDragHandleDisposables.clear();
this.orthogonalStartSashDisposables.clear();
@@ -224,18 +338,22 @@ export class Sash extends Disposable {
}
};
this.orthogonalStartSashDisposables.add(sash.onDidEnablementChange(onChange, this));
this.orthogonalStartSashDisposables.add(sash.onDidEnablementChange.event(onChange, this));
onChange(sash.state);
}
this._orthogonalStartSash = sash;
}
private readonly orthogonalEndSashDisposables = this._register(new DisposableStore());
private _orthogonalEndSash: Sash | undefined;
private readonly orthogonalEndDragHandleDisposables = this._register(new DisposableStore());
private _orthogonalEndDragHandle: HTMLElement | undefined;
get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; }
/**
* A reference to another sash, perpendicular to this one, which
* aligns at the end of this one. A corner sash will be created
* automatically at that location.
*
* The end of a horizontal sash is its right-most position.
* The end of a vertical sash is its bottom-most position.
*/
set orthogonalEndSash(sash: Sash | undefined) {
this.orthogonalEndDragHandleDisposables.clear();
this.orthogonalEndSashDisposables.clear();
@@ -254,15 +372,30 @@ export class Sash extends Disposable {
}
};
this.orthogonalEndSashDisposables.add(sash.onDidEnablementChange(onChange, this));
this.orthogonalEndSashDisposables.add(sash.onDidEnablementChange.event(onChange, this));
onChange(sash.state);
}
this._orthogonalEndSash = sash;
}
constructor(container: HTMLElement, layoutProvider: IVerticalSashLayoutProvider, options: ISashOptions);
constructor(container: HTMLElement, layoutProvider: IHorizontalSashLayoutProvider, options: ISashOptions);
/**
* Create a new vertical sash.
*
* @param container A DOM node to append the sash to.
* @param verticalLayoutProvider A vertical layout provider.
* @param options The options.
*/
constructor(container: HTMLElement, verticalLayoutProvider: IVerticalSashLayoutProvider, options: IVerticalSashOptions);
/**
* Create a new horizontal sash.
*
* @param container A DOM node to append the sash to.
* @param horizontalLayoutProvider A horizontal layout provider.
* @param options The options.
*/
constructor(container: HTMLElement, horizontalLayoutProvider: IHorizontalSashLayoutProvider, options: IHorizontalSashOptions);
constructor(container: HTMLElement, layoutProvider: ISashLayoutProvider, options: ISashOptions) {
super();
@@ -292,7 +425,7 @@ export class Sash extends Disposable {
const onTap = this._register(new DomEmitter(this.el, EventType.Tap)).event;
const onDoubleTap = Event.map(
Event.filter(
Event.debounce<GestureEvent, { event: GestureEvent, count: number }>(onTap, (res, event) => ({ event, count: (res?.count ?? 0) + 1 }), 250),
Event.debounce<GestureEvent, { event: GestureEvent; count: number }>(onTap, (res, event) => ({ event, count: (res?.count ?? 0) + 1 }), 250),
({ count }) => count === 2
),
({ event }) => ({ ...event, target: event.initialTarget ?? null })
@@ -317,7 +450,6 @@ export class Sash extends Disposable {
this._register(onDidChangeHoverDelay.event(delay => this.hoverDelay = delay));
this.hidden = false;
this.layoutProvider = layoutProvider;
this.orthogonalStartSash = options.orthogonalStartSash;
@@ -364,7 +496,7 @@ export class Sash extends Disposable {
const iframes = getElementsByTagName('iframe');
for (const iframe of iframes) {
iframe.style.pointerEvents = 'none'; // disable mouse events on iframes as long as we drag the sash
iframe.classList.add(PointerEventsDisabledCssClass); // disable mouse events on iframes as long as we drag the sash
}
const startX = event.pageX;
@@ -383,17 +515,17 @@ export class Sash extends Disposable {
if (isMultisashResize) {
cursor = 'all-scroll';
} else if (this.orientation === Orientation.HORIZONTAL) {
if (this.state === SashState.Minimum) {
if (this.state === SashState.AtMinimum) {
cursor = 's-resize';
} else if (this.state === SashState.Maximum) {
} else if (this.state === SashState.AtMaximum) {
cursor = 'n-resize';
} else {
cursor = isMacintosh ? 'row-resize' : 'ns-resize';
}
} else {
if (this.state === SashState.Minimum) {
if (this.state === SashState.AtMinimum) {
cursor = 'e-resize';
} else if (this.state === SashState.Maximum) {
} else if (this.state === SashState.AtMaximum) {
cursor = 'w-resize';
} else {
cursor = isMacintosh ? 'col-resize' : 'ew-resize';
@@ -408,7 +540,7 @@ export class Sash extends Disposable {
updateStyle();
if (!isMultisashResize) {
this.onDidEnablementChange(updateStyle, null, disposables);
this.onDidEnablementChange.event(updateStyle, null, disposables);
}
const onPointerMove = (e: PointerEvent) => {
@@ -429,7 +561,7 @@ export class Sash extends Disposable {
disposables.dispose();
for (const iframe of iframes) {
iframe.style.pointerEvents = 'auto';
iframe.classList.remove(PointerEventsDisabledCssClass);
}
};
@@ -474,10 +606,19 @@ export class Sash extends Disposable {
}
}
/**
* Forcefully stop any user interactions with this sash.
* Useful when hiding a parent component, while the user is still
* interacting with the sash.
*/
clearSashHoverState(): void {
Sash.onMouseLeave(this);
}
/**
* Layout the sash. The sash will size and position itself
* based on its provided {@link ISashLayoutProvider layout provider}.
*/
layout(): void {
if (this.orientation === Orientation.VERTICAL) {
const verticalProvider = (<IVerticalSashLayoutProvider>this.layoutProvider);
@@ -504,6 +645,7 @@ export class Sash extends Disposable {
}
}
// {{SQL CARBON EDIT}} - add back show, hide, isHidden methods
show(): void {
this.hidden = false;
this.el.style.removeProperty('display');
src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts
+58 -50
View File
@@ -5,8 +5,8 @@
import * as dom from 'vs/base/browser/dom';
import { createFastDomNode, FastDomNode } from 'vs/base/browser/fastDomNode';
import { GlobalMouseMoveMonitor, IStandardMouseMoveEventData, standardMouseMoveMerger } from 'vs/base/browser/globalMouseMoveMonitor';
import { IMouseEvent, StandardWheelEvent } from 'vs/base/browser/mouseEvent';
import { GlobalPointerMoveMonitor, IPointerMoveEventData, standardPointerMoveMerger } from 'vs/base/browser/globalPointerMoveMonitor';
import { StandardWheelEvent } from 'vs/base/browser/mouseEvent';
import { ScrollbarArrow, ScrollbarArrowOptions } from 'vs/base/browser/ui/scrollbar/scrollbarArrow';
import { ScrollbarState } from 'vs/base/browser/ui/scrollbar/scrollbarState';
import { ScrollbarVisibilityController } from 'vs/base/browser/ui/scrollbar/scrollbarVisibilityController';
@@ -17,12 +17,12 @@ import { INewScrollPosition, Scrollable, ScrollbarVisibility } from 'vs/base/com
/**
* The orthogonal distance to the slider at which dragging "resets". This implements "snapping"
*/
const MOUSE_DRAG_RESET_DISTANCE = 140;
const POINTER_DRAG_RESET_DISTANCE = 140;
export interface ISimplifiedMouseEvent {
export interface ISimplifiedPointerEvent {
buttons: number;
posx: number;
posy: number;
pageX: number;
pageY: number;
}
export interface ScrollbarHost {
@@ -49,7 +49,7 @@ export abstract class AbstractScrollbar extends Widget {
private _lazyRender: boolean;
protected _scrollbarState: ScrollbarState;
protected _visibilityController: ScrollbarVisibilityController;
private _mouseMoveMonitor: GlobalMouseMoveMonitor<IStandardMouseMoveEventData>;
private _pointerMoveMonitor: GlobalPointerMoveMonitor;
public domNode: FastDomNode<HTMLElement>;
public slider!: FastDomNode<HTMLElement>;
@@ -65,7 +65,7 @@ export abstract class AbstractScrollbar extends Widget {
this._scrollbarState = opts.scrollbarState;
this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'visible scrollbar ' + opts.extraScrollbarClassName, 'invisible scrollbar ' + opts.extraScrollbarClassName));
this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
this._mouseMoveMonitor = this._register(new GlobalMouseMoveMonitor<IStandardMouseMoveEventData>());
this._pointerMoveMonitor = this._register(new GlobalPointerMoveMonitor());
this._shouldRender = true;
this.domNode = createFastDomNode(document.createElement('div'));
this.domNode.setAttribute('role', 'presentation');
@@ -74,7 +74,7 @@ export abstract class AbstractScrollbar extends Widget {
this._visibilityController.setDomNode(this.domNode);
this.domNode.setPosition('absolute');
this.onmousedown(this.domNode.domNode, (e) => this._domNodeMouseDown(e));
this._register(dom.addDisposableListener(this.domNode.domNode, dom.EventType.POINTER_DOWN, (e: PointerEvent) => this._domNodePointerDown(e)));
}
// ----------------- creation
@@ -108,12 +108,16 @@ export abstract class AbstractScrollbar extends Widget {
this.domNode.domNode.appendChild(this.slider.domNode);
this.onmousedown(this.slider.domNode, (e) => {
if (e.leftButton) {
e.preventDefault();
this._sliderMouseDown(e, () => { /*nothing to do*/ });
this._register(dom.addDisposableListener(
this.slider.domNode,
dom.EventType.POINTER_DOWN,
(e: PointerEvent) => {
if (e.button === 0) {
e.preventDefault();
this._sliderPointerDown(e);
}
}
});
));
this.onclick(this.slider.domNode, e => {
if (e.leftButton) {
@@ -178,83 +182,87 @@ export abstract class AbstractScrollbar extends Widget {
}
// ----------------- DOM events
private _domNodeMouseDown(e: IMouseEvent): void {
private _domNodePointerDown(e: PointerEvent): void {
if (e.target !== this.domNode.domNode) {
return;
}
this._onMouseDown(e);
this._onPointerDown(e);
}
public delegateMouseDown(e: IMouseEvent): void {
public delegatePointerDown(e: PointerEvent): void {
const domTop = this.domNode.domNode.getClientRects()[0].top;
const sliderStart = domTop + this._scrollbarState.getSliderPosition();
const sliderStop = domTop + this._scrollbarState.getSliderPosition() + this._scrollbarState.getSliderSize();
const mousePos = this._sliderMousePosition(e);
if (sliderStart <= mousePos && mousePos <= sliderStop) {
// Act as if it was a mouse down on the slider
if (e.leftButton) {
const pointerPos = this._sliderPointerPosition(e);
if (sliderStart <= pointerPos && pointerPos <= sliderStop) {
// Act as if it was a pointer down on the slider
if (e.button === 0) {
e.preventDefault();
this._sliderMouseDown(e, () => { /*nothing to do*/ });
this._sliderPointerDown(e);
}
} else {
// Act as if it was a mouse down on the scrollbar
this._onMouseDown(e);
// Act as if it was a pointer down on the scrollbar
this._onPointerDown(e);
}
}
private _onMouseDown(e: IMouseEvent): void {
private _onPointerDown(e: PointerEvent): void {
let offsetX: number;
let offsetY: number;
if (e.target === this.domNode.domNode && typeof e.browserEvent.offsetX === 'number' && typeof e.browserEvent.offsetY === 'number') {
offsetX = e.browserEvent.offsetX;
offsetY = e.browserEvent.offsetY;
if (e.target === this.domNode.domNode && typeof e.offsetX === 'number' && typeof e.offsetY === 'number') {
offsetX = e.offsetX;
offsetY = e.offsetY;
} else {
const domNodePosition = dom.getDomNodePagePosition(this.domNode.domNode);
offsetX = e.posx - domNodePosition.left;
offsetY = e.posy - domNodePosition.top;
offsetX = e.pageX - domNodePosition.left;
offsetY = e.pageY - domNodePosition.top;
}
const offset = this._mouseDownRelativePosition(offsetX, offsetY);
const offset = this._pointerDownRelativePosition(offsetX, offsetY);
this._setDesiredScrollPositionNow(
this._scrollByPage
? this._scrollbarState.getDesiredScrollPositionFromOffsetPaged(offset)
: this._scrollbarState.getDesiredScrollPositionFromOffset(offset)
);
if (e.leftButton) {
if (e.button === 0) {
// left button
e.preventDefault();
this._sliderMouseDown(e, () => { /*nothing to do*/ });
this._sliderPointerDown(e);
}
}
private _sliderMouseDown(e: IMouseEvent, onDragFinished: () => void): void {
const initialMousePosition = this._sliderMousePosition(e);
const initialMouseOrthogonalPosition = this._sliderOrthogonalMousePosition(e);
private _sliderPointerDown(e: PointerEvent): void {
if (!e.target || !(e.target instanceof Element)) {
return;
}
const initialPointerPosition = this._sliderPointerPosition(e);
const initialPointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(e);
const initialScrollbarState = this._scrollbarState.clone();
this.slider.toggleClassName('active', true);
this._mouseMoveMonitor.startMonitoring(
this._pointerMoveMonitor.startMonitoring(
e.target,
e.pointerId,
e.buttons,
standardMouseMoveMerger,
(mouseMoveData: IStandardMouseMoveEventData) => {
const mouseOrthogonalPosition = this._sliderOrthogonalMousePosition(mouseMoveData);
const mouseOrthogonalDelta = Math.abs(mouseOrthogonalPosition - initialMouseOrthogonalPosition);
standardPointerMoveMerger,
(pointerMoveData: IPointerMoveEventData) => {
const pointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(pointerMoveData);
const pointerOrthogonalDelta = Math.abs(pointerOrthogonalPosition - initialPointerOrthogonalPosition);
if (platform.isWindows && mouseOrthogonalDelta > MOUSE_DRAG_RESET_DISTANCE) {
// The mouse has wondered away from the scrollbar => reset dragging
if (platform.isWindows && pointerOrthogonalDelta > POINTER_DRAG_RESET_DISTANCE) {
// The pointer has wondered away from the scrollbar => reset dragging
this._setDesiredScrollPositionNow(initialScrollbarState.getScrollPosition());
return;
}
const mousePosition = this._sliderMousePosition(mouseMoveData);
const mouseDelta = mousePosition - initialMousePosition;
this._setDesiredScrollPositionNow(initialScrollbarState.getDesiredScrollPositionFromDelta(mouseDelta));
const pointerPosition = this._sliderPointerPosition(pointerMoveData);
const pointerDelta = pointerPosition - initialPointerPosition;
this._setDesiredScrollPositionNow(initialScrollbarState.getDesiredScrollPositionFromDelta(pointerDelta));
},
() => {
this.slider.toggleClassName('active', false);
this._host.onDragEnd();
onDragFinished();
}
);
@@ -287,9 +295,9 @@ export abstract class AbstractScrollbar extends Widget {
protected abstract _renderDomNode(largeSize: number, smallSize: number): void;
protected abstract _updateSlider(sliderSize: number, sliderPosition: number): void;
protected abstract _mouseDownRelativePosition(offsetX: number, offsetY: number): number;
protected abstract _sliderMousePosition(e: ISimplifiedMouseEvent): number;
protected abstract _sliderOrthogonalMousePosition(e: ISimplifiedMouseEvent): number;
protected abstract _pointerDownRelativePosition(offsetX: number, offsetY: number): number;
protected abstract _sliderPointerPosition(e: ISimplifiedPointerEvent): number;
protected abstract _sliderOrthogonalPointerPosition(e: ISimplifiedPointerEvent): number;
protected abstract _updateScrollbarSize(size: number): void;
public abstract writeScrollPosition(target: INewScrollPosition, scrollPosition: number): void;
src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts
+10 -11
View File
@@ -4,16 +4,15 @@
*--------------------------------------------------------------------------------------------*/
import { StandardWheelEvent } from 'vs/base/browser/mouseEvent';
import { AbstractScrollbar, ISimplifiedMouseEvent, ScrollbarHost } from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
import { AbstractScrollbar, ISimplifiedPointerEvent, ScrollbarHost } from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
import { ScrollableElementResolvedOptions } from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
import { ARROW_IMG_SIZE } from 'vs/base/browser/ui/scrollbar/scrollbarArrow';
import { ScrollbarState } from 'vs/base/browser/ui/scrollbar/scrollbarState';
import { Codicon, registerCodicon } from 'vs/base/common/codicons';
import { Codicon } from 'vs/base/common/codicons';
import { INewScrollPosition, Scrollable, ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable';
const scrollbarButtonLeftIcon = registerCodicon('scrollbar-button-left', Codicon.triangleLeft);
const scrollbarButtonRightIcon = registerCodicon('scrollbar-button-right', Codicon.triangleRight);
export class HorizontalScrollbar extends AbstractScrollbar {
@@ -43,7 +42,7 @@ export class HorizontalScrollbar extends AbstractScrollbar {
this._createArrow({
className: 'scra',
icon: scrollbarButtonLeftIcon,
icon: Codicon.scrollbarButtonLeft,
top: scrollbarDelta,
left: arrowDelta,
bottom: undefined,
@@ -55,7 +54,7 @@ export class HorizontalScrollbar extends AbstractScrollbar {
this._createArrow({
className: 'scra',
icon: scrollbarButtonRightIcon,
icon: Codicon.scrollbarButtonRight,
top: scrollbarDelta,
left: undefined,
bottom: undefined,
@@ -88,16 +87,16 @@ export class HorizontalScrollbar extends AbstractScrollbar {
return this._shouldRender;
}
protected _mouseDownRelativePosition(offsetX: number, offsetY: number): number {
protected _pointerDownRelativePosition(offsetX: number, offsetY: number): number {
return offsetX;
}
protected _sliderMousePosition(e: ISimplifiedMouseEvent): number {
return e.posx;
protected _sliderPointerPosition(e: ISimplifiedPointerEvent): number {
return e.pageX;
}
protected _sliderOrthogonalMousePosition(e: ISimplifiedMouseEvent): number {
return e.posy;
protected _sliderOrthogonalPointerPosition(e: ISimplifiedPointerEvent): number {
return e.pageY;
}
protected _updateScrollbarSize(size: number): void {
src/vs/base/browser/ui/scrollbar/media/scrollbars.css
-58
View File
@@ -36,7 +36,6 @@
left: 3px;
height: 3px;
width: 100%;
box-shadow: #DDD 0 6px 6px -6px inset;
}
.monaco-scrollable-element > .shadow.left {
display: block;
@@ -44,7 +43,6 @@
left: 0;
height: 100%;
width: 3px;
box-shadow: #DDD 6px 0 6px -6px inset;
}
.monaco-scrollable-element > .shadow.top-left-corner {
display: block;
@@ -53,59 +51,3 @@
height: 3px;
width: 3px;
}
.monaco-scrollable-element > .shadow.top.left {
box-shadow: #DDD 6px 6px 6px -6px inset;
}
/* ---------- Default Style ---------- */
.vs .monaco-scrollable-element > .scrollbar > .slider {
background: rgba(100, 100, 100, .4);
}
.vs-dark .monaco-scrollable-element > .scrollbar > .slider {
background: rgba(121, 121, 121, .4);
}
.hc-black .monaco-scrollable-element > .scrollbar > .slider {
background: rgba(111, 195, 223, .6);
}
.monaco-scrollable-element > .scrollbar > .slider:hover {
background: rgba(100, 100, 100, .7);
}
.hc-black .monaco-scrollable-element > .scrollbar > .slider:hover {
background: rgba(111, 195, 223, .8);
}
.monaco-scrollable-element > .scrollbar > .slider.active {
background: rgba(0, 0, 0, .6);
}
.vs-dark .monaco-scrollable-element > .scrollbar > .slider.active {
background: rgba(191, 191, 191, .4);
}
.hc-black .monaco-scrollable-element > .scrollbar > .slider.active {
background: rgba(111, 195, 223, 1);
}
.vs-dark .monaco-scrollable-element .shadow.top {
box-shadow: none;
}
.vs-dark .monaco-scrollable-element .shadow.left {
box-shadow: #000 6px 0 6px -6px inset;
}
.vs-dark .monaco-scrollable-element .shadow.top.left {
box-shadow: #000 6px 6px 6px -6px inset;
}
.hc-black .monaco-scrollable-element .shadow.top {
box-shadow: none;
}
.hc-black .monaco-scrollable-element .shadow.left {
box-shadow: none;
}
.hc-black .monaco-scrollable-element .shadow.top.left {
box-shadow: none;
}
src/vs/base/browser/ui/scrollbar/scrollableElement.ts
+30 -6
View File
@@ -175,6 +175,10 @@ export abstract class AbstractScrollableElement extends Widget {
private readonly _onWillScroll = this._register(new Emitter<ScrollEvent>());
public readonly onWillScroll: Event<ScrollEvent> = this._onWillScroll.event;
public get options(): Readonly<ScrollableElementResolvedOptions> {
return this._options;
}
protected constructor(element: HTMLElement, options: ScrollableElementCreationOptions, scrollable: Scrollable) {
super();
element.style.overflow = 'hidden';
@@ -259,11 +263,11 @@ export abstract class AbstractScrollableElement extends Widget {
}
/**
* Delegate a mouse down event to the vertical scrollbar.
* Delegate a pointer down event to the vertical scrollbar.
* This is to help with clicking somewhere else and having the scrollbar react.
*/
public delegateVerticalScrollbarMouseDown(browserEvent: IMouseEvent): void {
this._verticalScrollbar.delegateMouseDown(browserEvent);
public delegateVerticalScrollbarPointerDown(browserEvent: PointerEvent): void {
this._verticalScrollbar.delegatePointerDown(browserEvent);
}
public getScrollDimensions(): IScrollDimensions {
@@ -556,7 +560,11 @@ export class ScrollableElement extends AbstractScrollableElement {
constructor(element: HTMLElement, options: ScrollableElementCreationOptions) {
options = options || {};
options.mouseWheelSmoothScroll = false;
const scrollable = new Scrollable(0, (callback) => dom.scheduleAtNextAnimationFrame(callback));
const scrollable = new Scrollable({
forceIntegerValues: true,
smoothScrollDuration: 0,
scheduleAtNextAnimationFrame: (callback) => dom.scheduleAtNextAnimationFrame(callback)
});
super(element, options, scrollable);
this._register(scrollable);
}
@@ -590,12 +598,20 @@ export class SmoothScrollableElement extends AbstractScrollableElement {
}
export class DomScrollableElement extends ScrollableElement {
export class DomScrollableElement extends AbstractScrollableElement {
private _element: HTMLElement;
constructor(element: HTMLElement, options: ScrollableElementCreationOptions) {
super(element, options);
options = options || {};
options.mouseWheelSmoothScroll = false;
const scrollable = new Scrollable({
forceIntegerValues: false, // See https://github.com/microsoft/vscode/issues/139877
smoothScrollDuration: 0,
scheduleAtNextAnimationFrame: (callback) => dom.scheduleAtNextAnimationFrame(callback)
});
super(element, options, scrollable);
this._register(scrollable);
this._element = element;
this.onScroll((e) => {
if (e.scrollTopChanged) {
@@ -608,6 +624,14 @@ export class DomScrollableElement extends ScrollableElement {
this.scanDomNode();
}
public setScrollPosition(update: INewScrollPosition): void {
this._scrollable.setScrollPositionNow(update);
}
public getScrollPosition(): IScrollPosition {
return this._scrollable.getCurrentScrollPosition();
}
public scanDomNode(): void {
// width, scrollLeft, scrollWidth, height, scrollTop, scrollHeight
this.setScrollDimensions({
src/vs/base/browser/ui/scrollbar/scrollbarArrow.ts
+23 -21
View File
@@ -3,11 +3,11 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { GlobalMouseMoveMonitor, IStandardMouseMoveEventData, standardMouseMoveMerger } from 'vs/base/browser/globalMouseMoveMonitor';
import { IMouseEvent } from 'vs/base/browser/mouseEvent';
import { GlobalPointerMoveMonitor, standardPointerMoveMerger } from 'vs/base/browser/globalPointerMoveMonitor';
import { Widget } from 'vs/base/browser/ui/widget';
import { IntervalTimer, TimeoutTimer } from 'vs/base/common/async';
import { Codicon } from 'vs/base/common/codicons';
import * as dom from 'vs/base/browser/dom';
/**
* The arrow image size.
@@ -33,9 +33,9 @@ export class ScrollbarArrow extends Widget {
private _onActivate: () => void;
public bgDomNode: HTMLElement;
public domNode: HTMLElement;
private _mousedownRepeatTimer: IntervalTimer;
private _mousedownScheduleRepeatTimer: TimeoutTimer;
private _mouseMoveMonitor: GlobalMouseMoveMonitor<IStandardMouseMoveEventData>;
private _pointerdownRepeatTimer: IntervalTimer;
private _pointerdownScheduleRepeatTimer: TimeoutTimer;
private _pointerMoveMonitor: GlobalPointerMoveMonitor;
constructor(opts: ScrollbarArrowOptions) {
super();
@@ -79,33 +79,35 @@ export class ScrollbarArrow extends Widget {
this.domNode.style.right = opts.right + 'px';
}
this._mouseMoveMonitor = this._register(new GlobalMouseMoveMonitor<IStandardMouseMoveEventData>());
this.onmousedown(this.bgDomNode, (e) => this._arrowMouseDown(e));
this.onmousedown(this.domNode, (e) => this._arrowMouseDown(e));
this._pointerMoveMonitor = this._register(new GlobalPointerMoveMonitor());
this._register(dom.addStandardDisposableListener(this.bgDomNode, dom.EventType.POINTER_DOWN, (e) => this._arrowPointerDown(e)));
this._register(dom.addStandardDisposableListener(this.domNode, dom.EventType.POINTER_DOWN, (e) => this._arrowPointerDown(e)));
this._mousedownRepeatTimer = this._register(new IntervalTimer());
this._mousedownScheduleRepeatTimer = this._register(new TimeoutTimer());
this._pointerdownRepeatTimer = this._register(new IntervalTimer());
this._pointerdownScheduleRepeatTimer = this._register(new TimeoutTimer());
}
private _arrowMouseDown(e: IMouseEvent): void {
private _arrowPointerDown(e: PointerEvent): void {
if (!e.target || !(e.target instanceof Element)) {
return;
}
const scheduleRepeater = () => {
this._mousedownRepeatTimer.cancelAndSet(() => this._onActivate(), 1000 / 24);
this._pointerdownRepeatTimer.cancelAndSet(() => this._onActivate(), 1000 / 24);
};
this._onActivate();
this._mousedownRepeatTimer.cancel();
this._mousedownScheduleRepeatTimer.cancelAndSet(scheduleRepeater, 200);
this._pointerdownRepeatTimer.cancel();
this._pointerdownScheduleRepeatTimer.cancelAndSet(scheduleRepeater, 200);
this._mouseMoveMonitor.startMonitoring(
this._pointerMoveMonitor.startMonitoring(
e.target,
e.pointerId,
e.buttons,
standardMouseMoveMerger,
(mouseMoveData: IStandardMouseMoveEventData) => {
/* Intentional empty */
},
standardPointerMoveMerger,
(pointerMoveData) => { /* Intentional empty */ },
() => {
this._mousedownRepeatTimer.cancel();
this._mousedownScheduleRepeatTimer.cancel();
this._pointerdownRepeatTimer.cancel();
this._pointerdownScheduleRepeatTimer.cancel();
}
);
src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts
+10 -11
View File
@@ -4,15 +4,14 @@
*--------------------------------------------------------------------------------------------*/
import { StandardWheelEvent } from 'vs/base/browser/mouseEvent';
import { AbstractScrollbar, ISimplifiedMouseEvent, ScrollbarHost } from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
import { AbstractScrollbar, ISimplifiedPointerEvent, ScrollbarHost } from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
import { ScrollableElementResolvedOptions } from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
import { ARROW_IMG_SIZE } from 'vs/base/browser/ui/scrollbar/scrollbarArrow';
import { ScrollbarState } from 'vs/base/browser/ui/scrollbar/scrollbarState';
import { Codicon, registerCodicon } from 'vs/base/common/codicons';
import { Codicon } from 'vs/base/common/codicons';
import { INewScrollPosition, Scrollable, ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable';
const scrollbarButtonUpIcon = registerCodicon('scrollbar-button-up', Codicon.triangleUp);
const scrollbarButtonDownIcon = registerCodicon('scrollbar-button-down', Codicon.triangleDown);
export class VerticalScrollbar extends AbstractScrollbar {
@@ -43,7 +42,7 @@ export class VerticalScrollbar extends AbstractScrollbar {
this._createArrow({
className: 'scra',
icon: scrollbarButtonUpIcon,
icon: Codicon.scrollbarButtonUp,
top: arrowDelta,
left: scrollbarDelta,
bottom: undefined,
@@ -55,7 +54,7 @@ export class VerticalScrollbar extends AbstractScrollbar {
this._createArrow({
className: 'scra',
icon: scrollbarButtonDownIcon,
icon: Codicon.scrollbarButtonDown,
top: undefined,
left: scrollbarDelta,
bottom: arrowDelta,
@@ -88,16 +87,16 @@ export class VerticalScrollbar extends AbstractScrollbar {
return this._shouldRender;
}
protected _mouseDownRelativePosition(offsetX: number, offsetY: number): number {
protected _pointerDownRelativePosition(offsetX: number, offsetY: number): number {
return offsetY;
}
protected _sliderMousePosition(e: ISimplifiedMouseEvent): number {
return e.posy;
protected _sliderPointerPosition(e: ISimplifiedPointerEvent): number {
return e.pageY;
}
protected _sliderOrthogonalMousePosition(e: ISimplifiedMouseEvent): number {
return e.posx;
protected _sliderOrthogonalPointerPosition(e: ISimplifiedPointerEvent): number {
return e.pageX;
}
protected _updateScrollbarSize(size: number): void {
src/vs/base/browser/ui/selectBox/selectBoxCustom.css
+2 -1
View File
@@ -9,7 +9,8 @@
--dropdown-padding-bottom: 1px;
}
.hc-black .monaco-select-box-dropdown-padding {
.hc-black .monaco-select-box-dropdown-padding,
.hc-light .monaco-select-box-dropdown-padding {
--dropdown-padding-top: 3px;
--dropdown-padding-bottom: 4px;
}
src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
+25 -7
View File
@@ -220,6 +220,23 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
dom.EventHelper.stop(e);
}));
// Intercept touch events
// The following implementation is slightly different from the mouse event handlers above.
// Use the following helper variable, otherwise the list flickers.
let listIsVisibleOnTouchStart: boolean;
this._register(dom.addDisposableListener(this.selectElement, 'touchstart', (e) => {
listIsVisibleOnTouchStart = this._isVisible;
}));
this._register(dom.addDisposableListener(this.selectElement, 'touchend', (e) => {
dom.EventHelper.stop(e);
if (listIsVisibleOnTouchStart) {
this.hideSelectDropDown(true);
} else {
this.showSelectDropDown();
}
}));
// Intercept keyboard handling
this._register(dom.addDisposableListener(this.selectElement, dom.EventType.KEY_DOWN, (e: KeyboardEvent) => {
@@ -775,11 +792,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
this._register(onSelectDropDownKeyDown.filter(e => (e.keyCode >= KeyCode.Digit0 && e.keyCode <= KeyCode.KeyZ) || (e.keyCode >= KeyCode.Semicolon && e.keyCode <= KeyCode.NumpadDivide)).on(this.onCharacter, this));
// SetUp list mouse controller - control navigation, disabled items, focus
const onMouseUp = this._register(new DomEmitter(this.selectList.getHTMLElement(), 'mouseup'));
this._register(Event.chain(onMouseUp.event)
.filter(() => this.selectList.length > 0)
.on(e => this.onMouseUp(e), this));
this._register(dom.addDisposableListener(this.selectList.getHTMLElement(), dom.EventType.POINTER_UP, e => this.onPointerUp(e)));
this._register(this.selectList.onMouseOver(e => typeof e.index !== 'undefined' && this.selectList.setFocus([e.index])));
this._register(this.selectList.onDidChangeFocus(e => this.onListFocus(e)));
@@ -800,7 +813,12 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
// List methods
// List mouse controller - active exit, select option, fire onDidSelect if change, return focus to parent select
private onMouseUp(e: MouseEvent): void {
// Also takes in touchend events
private onPointerUp(e: PointerEvent): void {
if (!this.selectList.length) {
return;
}
dom.EventHelper.stop(e);
@@ -810,7 +828,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
}
// Check our mouse event is on an option (not scrollbar)
if (!!target.classList.contains('slider')) {
if (target.classList.contains('slider')) {
return;
}
src/vs/base/browser/ui/splitview/paneview.css
+4 -10
View File
@@ -52,14 +52,6 @@
margin-left: auto;
}
/* {{SQL CARBON EDIT}} Bring back styles for action labels - ours aren't sized correctly without these */
.monaco-pane-view .pane > .pane-header > .actions .action-label.icon,
.monaco-pane-view .pane > .pane-header > .actions .action-label.codicon {
background-size: 16px;
background-position: center center;
background-repeat: no-repeat;
}
.monaco-pane-view .pane > .pane-header > .actions .action-item {
margin-right: 4px;
}
@@ -85,8 +77,6 @@
min-width: 110px;
min-height: 18px;
padding: 2px 23px 2px 8px;
background-color: inherit !important;
color: inherit !important;
}
.linux .monaco-pane-view .pane > .pane-header .action-item .monaco-select-box,
@@ -118,6 +108,10 @@
transition-timing-function: ease-out;
}
.reduce-motion .monaco-pane-view .split-view-view {
transition-duration: 0s !important;
}
.monaco-pane-view.animated.vertical .split-view-view {
transition-property: height;
}
src/vs/base/browser/ui/splitview/paneview.ts
+54 -19
View File
@@ -5,9 +5,10 @@
import { isFirefox } from 'vs/base/browser/browser';
import { DataTransfers } from 'vs/base/browser/dnd';
import { $, addDisposableListener, append, clearNode, EventHelper, trackFocus } from 'vs/base/browser/dom';
import { $, addDisposableListener, append, clearNode, EventHelper, EventType, trackFocus } from 'vs/base/browser/dom';
import { DomEmitter } from 'vs/base/browser/event';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { Gesture, EventType as TouchEventType } from 'vs/base/browser/touch';
import { Orientation } from 'vs/base/browser/ui/sash/sash';
import { Color, RGBA } from 'vs/base/common/color';
import { Emitter, Event } from 'vs/base/common/event';
@@ -16,7 +17,7 @@ import { Disposable, DisposableStore, IDisposable } from 'vs/base/common/lifecyc
import { ScrollEvent } from 'vs/base/common/scrollable';
import 'vs/css!./paneview';
import { localize } from 'vs/nls';
import { IView, SplitView } from './splitview';
import { IView, Sizing, SplitView } from './splitview';
export interface IPaneOptions {
minimumBodySize?: number;
@@ -220,24 +221,25 @@ export abstract class Pane extends Disposable implements IView {
this.updateHeader();
const eventDisposables = this._register(new DisposableStore());
const onKeyDown = this._register(new DomEmitter(this.header, 'keydown'));
const onHeaderKeyDown = Event.chain(onKeyDown.event)
.map(e => new StandardKeyboardEvent(e));
const onHeaderKeyDown = Event.map(onKeyDown.event, e => new StandardKeyboardEvent(e), eventDisposables);
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space)
.event(() => this.setExpanded(!this.isExpanded()), null));
this._register(Event.filter(onHeaderKeyDown, e => e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space, eventDisposables)(() => this.setExpanded(!this.isExpanded()), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.LeftArrow)
.event(() => this.setExpanded(false), null));
this._register(Event.filter(onHeaderKeyDown, e => e.keyCode === KeyCode.LeftArrow, eventDisposables)(() => this.setExpanded(false), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.RightArrow)
.event(() => this.setExpanded(true), null));
this._register(Event.filter(onHeaderKeyDown, e => e.keyCode === KeyCode.RightArrow, eventDisposables)(() => this.setExpanded(true), null));
this._register(addDisposableListener(this.header, 'click', e => {
if (!e.defaultPrevented) {
this.setExpanded(!this.isExpanded());
}
}));
this._register(Gesture.addTarget(this.header));
[EventType.CLICK, TouchEventType.Tap].forEach(eventType => {
this._register(addDisposableListener(this.header, eventType, e => {
if (!e.defaultPrevented) {
this.setExpanded(!this.isExpanded());
}
}));
});
this.body = append(this.element, $('.pane-body'));
this.renderBody(this.body);
@@ -300,7 +302,7 @@ class PaneDraggable extends Disposable {
private dragOverCounter = 0; // see https://github.com/microsoft/vscode/issues/14470
private _onDidDrop = this._register(new Emitter<{ from: Pane, to: Pane }>());
private _onDidDrop = this._register(new Emitter<{ from: Pane; to: Pane }>());
readonly onDidDrop = this._onDidDrop.event;
constructor(private pane: Pane, private dnd: IPaneDndController, private context: IDndContext) {
@@ -439,8 +441,8 @@ export class PaneView extends Disposable {
private splitview: SplitView;
private animationTimer: number | undefined = undefined;
private _onDidDrop = this._register(new Emitter<{ from: Pane, to: Pane }>());
readonly onDidDrop: Event<{ from: Pane, to: Pane }> = this._onDidDrop.event;
private _onDidDrop = this._register(new Emitter<{ from: Pane; to: Pane }>());
readonly onDidDrop: Event<{ from: Pane; to: Pane }> = this._onDidDrop.event;
orientation: Orientation;
readonly onDidSashChange: Event<number>;
@@ -457,6 +459,13 @@ export class PaneView extends Disposable {
this.onDidSashReset = this.splitview.onDidSashReset;
this.onDidSashChange = this.splitview.onDidSashChange;
this.onDidScroll = this.splitview.onDidScroll;
const eventDisposables = this._register(new DisposableStore());
const onKeyDown = this._register(new DomEmitter(this.element, 'keydown'));
const onHeaderKeyDown = Event.map(Event.filter(onKeyDown.event, e => e.target instanceof HTMLElement && e.target.classList.contains('pane-header'), eventDisposables), e => new StandardKeyboardEvent(e), eventDisposables);
this._register(Event.filter(onHeaderKeyDown, e => e.keyCode === KeyCode.UpArrow, eventDisposables)(() => this.focusPrevious()));
this._register(Event.filter(onHeaderKeyDown, e => e.keyCode === KeyCode.DownArrow, eventDisposables)(() => this.focusNext()));
}
addPane(pane: Pane, size: number, index = this.splitview.length): void {
@@ -483,7 +492,7 @@ export class PaneView extends Disposable {
return;
}
this.splitview.removeView(index);
this.splitview.removeView(index, pane.isExpanded() ? Sizing.Distribute : undefined);
const paneItem = this.paneItems.splice(index, 1)[0];
paneItem.disposable.dispose();
}
@@ -572,6 +581,32 @@ export class PaneView extends Disposable {
}, 200);
}
private getPaneHeaderElements(): HTMLElement[] {
return [...this.element.querySelectorAll('.pane-header')] as HTMLElement[];
}
private focusPrevious(): void {
const headers = this.getPaneHeaderElements();
const index = headers.indexOf(document.activeElement as HTMLElement);
if (index === -1) {
return;
}
headers[Math.max(index - 1, 0)].focus();
}
private focusNext(): void {
const headers = this.getPaneHeaderElements();
const index = headers.indexOf(document.activeElement as HTMLElement);
if (index === -1) {
return;
}
headers[Math.min(index + 1, headers.length - 1)].focus();
}
override dispose(): void {
super.dispose();
src/vs/base/browser/ui/splitview/splitview.ts
+347 -48
View File
@@ -9,7 +9,7 @@ import { SmoothScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollable
import { pushToEnd, pushToStart, range } from 'vs/base/common/arrays';
import { Color } from 'vs/base/common/color';
import { Emitter, Event } from 'vs/base/common/event';
import { combinedDisposable, Disposable, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
import { combinedDisposable, Disposable, dispose, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
import { clamp } from 'vs/base/common/numbers';
import { Scrollable, ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable';
import * as types from 'vs/base/common/types';
@@ -17,45 +17,178 @@ import 'vs/css!./splitview';
export { Orientation } from 'vs/base/browser/ui/sash/sash';
export interface ISplitViewStyles {
separatorBorder: Color;
readonly separatorBorder: Color;
}
const defaultStyles: ISplitViewStyles = {
separatorBorder: Color.transparent
};
export interface ISplitViewOptions<TLayoutContext = undefined> {
readonly orientation?: Orientation; // default Orientation.VERTICAL
readonly styles?: ISplitViewStyles;
readonly orthogonalStartSash?: Sash;
readonly orthogonalEndSash?: Sash;
readonly inverseAltBehavior?: boolean;
readonly proportionalLayout?: boolean; // default true,
readonly descriptor?: ISplitViewDescriptor<TLayoutContext>;
readonly scrollbarVisibility?: ScrollbarVisibility;
readonly getSashOrthogonalSize?: () => number;
}
/**
* Only used when `proportionalLayout` is false.
*/
export const enum LayoutPriority {
Normal,
Low,
High
}
/**
* The interface to implement for views within a {@link SplitView}.
*
* An optional {@link TLayoutContext layout context type} may be used in order to
* pass along layout contextual data from the {@link SplitView.layout} method down
* to each view's {@link IView.layout} calls.
*/
export interface IView<TLayoutContext = undefined> {
/**
* The DOM element for this view.
*/
readonly element: HTMLElement;
/**
* A minimum size for this view.
*
* @remarks If none, set it to `0`.
*/
readonly minimumSize: number;
/**
* A minimum size for this view.
*
* @remarks If none, set it to `Number.POSITIVE_INFINITY`.
*/
readonly maximumSize: number;
readonly onDidChange: Event<number | undefined>;
/**
* The priority of the view when the {@link SplitView.resize layout} algorithm
* runs. Views with higher priority will be resized first.
*
* @remarks Only used when `proportionalLayout` is false.
*/
readonly priority?: LayoutPriority;
/**
* Whether the view will snap whenever the user reaches its minimum size or
* attempts to grow it beyond the minimum size.
*
* @defaultValue `false`
*/
readonly snap?: boolean;
/**
* View instances are supposed to fire the {@link IView.onDidChange} event whenever
* any of the constraint properties have changed:
*
* - {@link IView.minimumSize}
* - {@link IView.maximumSize}
* - {@link IView.priority}
* - {@link IView.snap}
*
* The SplitView will relayout whenever that happens. The event can optionally emit
* the view's preferred size for that relayout.
*/
readonly onDidChange: Event<number | undefined>;
/**
* This will be called by the {@link SplitView} during layout. A view meant to
* pass along the layout information down to its descendants.
*
* @param size The size of this view, in pixels.
* @param offset The offset of this view, relative to the start of the {@link SplitView}.
* @param context The optional {@link IView layout context} passed to {@link SplitView.layout}.
*/
layout(size: number, offset: number, context: TLayoutContext | undefined): void;
/**
* This will be called by the {@link SplitView} whenever this view is made
* visible or hidden.
*
* @param visible Whether the view becomes visible.
*/
setVisible?(visible: boolean): void;
}
/**
* A descriptor for a {@link SplitView} instance.
*/
export interface ISplitViewDescriptor<TLayoutContext = undefined> {
/**
* The layout size of the {@link SplitView}.
*/
readonly size: number;
/**
* Descriptors for each {@link IView view}.
*/
readonly views: {
/**
* Whether the {@link IView view} is visible.
*
* @defaultValue `true`
*/
readonly visible?: boolean;
/**
* The size of the {@link IView view}.
*
* @defaultValue `true`
*/
readonly size: number;
/**
* The size of the {@link IView view}.
*
* @defaultValue `true`
*/
readonly view: IView<TLayoutContext>;
}[];
}
export interface ISplitViewOptions<TLayoutContext = undefined> {
/**
* Which axis the views align on.
*
* @defaultValue `Orientation.VERTICAL`
*/
readonly orientation?: Orientation;
/**
* Styles overriding the {@link defaultStyles default ones}.
*/
readonly styles?: ISplitViewStyles;
/**
* Make Alt-drag the default drag operation.
*/
readonly inverseAltBehavior?: boolean;
/**
* Resize each view proportionally when resizing the SplitView.
*
* @defaultValue `true`
*/
readonly proportionalLayout?: boolean;
/**
* An initial description of this {@link SplitView} instance, allowing
* to initialze all views within the ctor.
*/
readonly descriptor?: ISplitViewDescriptor<TLayoutContext>;
/**
* The scrollbar visibility setting for whenever the views within
* the {@link SplitView} overflow.
*/
readonly scrollbarVisibility?: ScrollbarVisibility;
/**
* Override the orthogonal size of sashes.
*/
readonly getSashOrthogonalSize?: () => number;
}
interface ISashEvent {
readonly sash: Sash;
readonly start: number;
@@ -190,30 +323,89 @@ enum State {
Busy
}
/**
* When adding or removing views, uniformly distribute the entire split view space among
* all views.
*/
export type DistributeSizing = { type: 'distribute' };
export type SplitSizing = { type: 'split', index: number };
export type InvisibleSizing = { type: 'invisible', cachedVisibleSize: number };
/**
* When adding a view, make space for it by reducing the size of another view,
* indexed by the provided `index`.
*/
export type SplitSizing = { type: 'split'; index: number };
/**
* When adding or removing views, assume the view is invisible.
*/
export type InvisibleSizing = { type: 'invisible'; cachedVisibleSize: number };
/**
* When adding or removing views, the sizing provides fine grained
* control over how other views get resized.
*/
export type Sizing = DistributeSizing | SplitSizing | InvisibleSizing;
export namespace Sizing {
/**
* When adding or removing views, distribute the delta space among
* all other views.
*/
export const Distribute: DistributeSizing = { type: 'distribute' };
/**
* When adding or removing views, split the delta space with another
* specific view, indexed by the provided `index`.
*/
export function Split(index: number): SplitSizing { return { type: 'split', index }; }
/**
* When adding or removing views, assume the view is invisible.
*/
export function Invisible(cachedVisibleSize: number): InvisibleSizing { return { type: 'invisible', cachedVisibleSize }; }
}
export interface ISplitViewDescriptor<TLayoutContext = undefined> {
size: number;
views: {
visible?: boolean;
size: number;
view: IView<TLayoutContext>;
}[];
}
/**
* The {@link SplitView} is the UI component which implements a one dimensional
* flex-like layout algorithm for a collection of {@link IView} instances, which
* are essentially HTMLElement instances with the following size constraints:
*
* - {@link IView.minimumSize}
* - {@link IView.maximumSize}
* - {@link IView.priority}
* - {@link IView.snap}
*
* In case the SplitView doesn't have enough size to fit all views, it will overflow
* its content with a scrollbar.
*
* In between each pair of views there will be a {@link Sash} allowing the user
* to resize the views, making sure the constraints are respected.
*
* An optional {@link TLayoutContext layout context type} may be used in order to
* pass along layout contextual data from the {@link SplitView.layout} method down
* to each view's {@link IView.layout} calls.
*
* Features:
* - Flex-like layout algorithm
* - Snap support
* - Orthogonal sash support, for corner sashes
* - View hide/show support
* - View swap/move support
* - Alt key modifier behavior, macOS style
*/
export class SplitView<TLayoutContext = undefined> extends Disposable {
/**
* This {@link SplitView}'s orientation.
*/
readonly orientation: Orientation;
/**
* The DOM element representing this {@link SplitView}.
*/
readonly el: HTMLElement;
private sashContainer: HTMLElement;
private viewContainer: HTMLElement;
private scrollable: Scrollable;
@@ -231,27 +423,58 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
private readonly getSashOrthogonalSize: { (): number } | undefined;
private _onDidSashChange = this._register(new Emitter<number>());
private _onDidSashReset = this._register(new Emitter<number>());
private _orthogonalStartSash: Sash | undefined;
private _orthogonalEndSash: Sash | undefined;
private _startSnappingEnabled = true;
private _endSnappingEnabled = true;
/**
* Fires whenever the user resizes a {@link Sash sash}.
*/
readonly onDidSashChange = this._onDidSashChange.event;
private _onDidSashReset = this._register(new Emitter<number>());
/**
* Fires whenever the user double clicks a {@link Sash sash}.
*/
readonly onDidSashReset = this._onDidSashReset.event;
/**
* Fires whenever the split view is scrolled.
*/
readonly onDidScroll: Event<ScrollEvent>;
/**
* The amount of views in this {@link SplitView}.
*/
get length(): number {
return this.viewItems.length;
}
/**
* The minimum size of this {@link SplitView}.
*/
get minimumSize(): number {
return this.viewItems.reduce((r, item) => r + item.minimumSize, 0);
}
/**
* The maximum size of this {@link SplitView}.
*/
get maximumSize(): number {
return this.length === 0 ? Number.POSITIVE_INFINITY : this.viewItems.reduce((r, item) => r + item.maximumSize, 0);
}
private _orthogonalStartSash: Sash | undefined;
get orthogonalStartSash(): Sash | undefined { return this._orthogonalStartSash; }
get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; }
get startSnappingEnabled(): boolean { return this._startSnappingEnabled; }
get endSnappingEnabled(): boolean { return this._endSnappingEnabled; }
/**
* A reference to a sash, perpendicular to all sashes in this {@link SplitView},
* located at the left- or top-most side of the SplitView.
* Corner sashes will be created automatically at the intersections.
*/
set orthogonalStartSash(sash: Sash | undefined) {
for (const sashItem of this.sashItems) {
sashItem.sash.orthogonalStartSash = sash;
@@ -260,8 +483,11 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this._orthogonalStartSash = sash;
}
private _orthogonalEndSash: Sash | undefined;
get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; }
/**
* A reference to a sash, perpendicular to all sashes in this {@link SplitView},
* located at the right- or bottom-most side of the SplitView.
* Corner sashes will be created automatically at the intersections.
*/
set orthogonalEndSash(sash: Sash | undefined) {
for (const sashItem of this.sashItems) {
sashItem.sash.orthogonalEndSash = sash;
@@ -270,12 +496,16 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this._orthogonalEndSash = sash;
}
get sashes(): Sash[] {
/**
* The internal sashes within this {@link SplitView}.
*/
get sashes(): readonly Sash[] {
return this.sashItems.map(s => s.sash);
}
private _startSnappingEnabled = true;
get startSnappingEnabled(): boolean { return this._startSnappingEnabled; }
/**
* Enable/disable snapping at the beginning of this {@link SplitView}.
*/
set startSnappingEnabled(startSnappingEnabled: boolean) {
if (this._startSnappingEnabled === startSnappingEnabled) {
return;
@@ -285,8 +515,9 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this.updateSashEnablement();
}
private _endSnappingEnabled = true;
get endSnappingEnabled(): boolean { return this._endSnappingEnabled; }
/**
* Enable/disable snapping at the end of this {@link SplitView}.
*/
set endSnappingEnabled(endSnappingEnabled: boolean) {
if (this._endSnappingEnabled === endSnappingEnabled) {
return;
@@ -296,12 +527,15 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this.updateSashEnablement();
}
/**
* Create a new {@link SplitView} instance.
*/
constructor(container: HTMLElement, options: ISplitViewOptions<TLayoutContext> = {}) {
super();
this.orientation = types.isUndefined(options.orientation) ? Orientation.VERTICAL : options.orientation;
this.inverseAltBehavior = !!options.inverseAltBehavior;
this.proportionalLayout = types.isUndefined(options.proportionalLayout) ? true : !!options.proportionalLayout;
this.orientation = options.orientation ?? Orientation.VERTICAL;
this.inverseAltBehavior = options.inverseAltBehavior ?? false;
this.proportionalLayout = options.proportionalLayout ?? true;
this.getSashOrthogonalSize = options.getSashOrthogonalSize;
this.el = document.createElement('div');
@@ -312,7 +546,11 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this.sashContainer = append(this.el, $('.sash-container'));
this.viewContainer = $('.split-view-container');
this.scrollable = new Scrollable(125, scheduleAtNextAnimationFrame);
this.scrollable = new Scrollable({
forceIntegerValues: true,
smoothScrollDuration: 125,
scheduleAtNextAnimationFrame
});
this.scrollableElement = this._register(new SmoothScrollableElement(this.viewContainer, {
vertical: this.orientation === Orientation.VERTICAL ? (options.scrollbarVisibility ?? ScrollbarVisibility.Auto) : ScrollbarVisibility.Hidden,
horizontal: this.orientation === Orientation.HORIZONTAL ? (options.scrollbarVisibility ?? ScrollbarVisibility.Auto) : ScrollbarVisibility.Hidden
@@ -354,10 +592,24 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
}
}
/**
* Add a {@link IView view} to this {@link SplitView}.
*
* @param view The view to add.
* @param size Either a fixed size, or a dynamic {@link Sizing} strategy.
* @param index The index to insert the view on.
* @param skipLayout Whether layout should be skipped.
*/
addView(view: IView<TLayoutContext>, size: number | Sizing, index = this.viewItems.length, skipLayout?: boolean): void {
this.doAddView(view, size, index, skipLayout);
}
/**
* Remove a {@link IView view} from this {@link SplitView}.
*
* @param index The index where the {@link IView view} is located.
* @param sizing Whether to distribute other {@link IView view}'s sizes.
*/
removeView(index: number, sizing?: Sizing): IView<TLayoutContext> {
if (this.state !== State.Idle) {
throw new Error('Cant modify splitview');
@@ -383,13 +635,19 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this.relayout();
this.state = State.Idle;
if (sizing && sizing.type === 'distribute') {
if (sizing?.type === 'distribute') {
this.distributeViewSizes();
}
return view;
}
/**
* Move a {@link IView view} to a different index.
*
* @param from The source index.
* @param to The target index.
*/
moveView(from: number, to: number): void {
if (this.state !== State.Idle) {
throw new Error('Cant modify splitview');
@@ -401,6 +659,13 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this.addView(view, sizing, to);
}
/**
* Swap two {@link IView views}.
*
* @param from The source index.
* @param to The target index.
*/
swapViews(from: number, to: number): void {
if (this.state !== State.Idle) {
throw new Error('Cant modify splitview');
@@ -419,6 +684,11 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this.addView(fromView, toSize, to);
}
/**
* Returns whether the {@link IView view} is visible.
*
* @param index The {@link IView view} index.
*/
isViewVisible(index: number): boolean {
if (index < 0 || index >= this.viewItems.length) {
throw new Error('Index out of bounds');
@@ -428,6 +698,12 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
return viewItem.visible;
}
/**
* Set a {@link IView view}'s visibility.
*
* @param index The {@link IView view} index.
* @param visible Whether the {@link IView view} should be visible.
*/
setViewVisible(index: number, visible: boolean): void {
if (index < 0 || index >= this.viewItems.length) {
throw new Error('Index out of bounds');
@@ -441,6 +717,11 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this.saveProportions();
}
/**
* Returns the {@link IView view}'s size previously to being hidden.
*
* @param index The {@link IView view} index.
*/
getViewCachedVisibleSize(index: number): number | undefined {
if (index < 0 || index >= this.viewItems.length) {
throw new Error('Index out of bounds');
@@ -450,6 +731,12 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
return viewItem.cachedVisibleSize;
}
/**
* Layout the {@link SplitView}.
*
* @param size The entire size of the {@link SplitView}.
* @param layoutContext An optional layout context to pass along to {@link IView views}.
*/
layout(size: number, layoutContext?: TLayoutContext): void {
const previousSize = Math.max(this.size, this.contentSize);
this.size = size;
@@ -616,6 +903,12 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
}
}
/**
* Resize a {@link IView view} within the {@link SplitView}.
*
* @param index The {@link IView view} index.
* @param size The {@link IView view} size.
*/
resizeView(index: number, size: number): void {
if (this.state !== State.Idle) {
throw new Error('Cant modify splitview');
@@ -640,6 +933,9 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this.state = State.Idle;
}
/**
* Distribute the entire {@link SplitView} size among all {@link IView views}.
*/
distributeViewSizes(): void {
const flexibleViewItems: ViewItem<TLayoutContext>[] = [];
let flexibleSize = 0;
@@ -664,6 +960,9 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this.relayout(lowPriorityIndexes, highPriorityIndexes);
}
/**
* Returns the size of a {@link IView view}.
*/
getViewSize(index: number): number {
if (index < 0 || index >= this.viewItems.length) {
return -1;
@@ -964,16 +1263,16 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
const snappedAfter = typeof snapAfterIndex === 'number' && !this.viewItems[snapAfterIndex].visible;
if (snappedBefore && collapsesUp[index] && (position > 0 || this.startSnappingEnabled)) {
sash.state = SashState.Minimum;
sash.state = SashState.AtMinimum;
} else if (snappedAfter && collapsesDown[index] && (position < this.contentSize || this.endSnappingEnabled)) {
sash.state = SashState.Maximum;
sash.state = SashState.AtMaximum;
} else {
sash.state = SashState.Disabled;
}
} else if (min && !max) {
sash.state = SashState.Minimum;
sash.state = SashState.AtMinimum;
} else if (!min && max) {
sash.state = SashState.Maximum;
sash.state = SashState.AtMaximum;
} else {
sash.state = SashState.Enabled;
}
@@ -1027,7 +1326,7 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
override dispose(): void {
super.dispose();
this.viewItems.forEach(i => i.dispose());
dispose(this.viewItems);
this.viewItems = [];
this.sashItems.forEach(i => i.disposable.dispose());
src/vs/base/browser/ui/table/tableWidget.ts
+18 -11
View File
@@ -9,7 +9,7 @@ import { IListOptions, IListOptionsUpdate, IListStyles, List } from 'vs/base/bro
import { ISplitViewDescriptor, IView, Orientation, SplitView } from 'vs/base/browser/ui/splitview/splitview';
import { ITableColumn, ITableContextMenuEvent, ITableEvent, ITableGestureEvent, ITableMouseEvent, ITableRenderer, ITableTouchEvent, ITableVirtualDelegate } from 'vs/base/browser/ui/table/table';
import { Emitter, Event } from 'vs/base/common/event';
import { IDisposable } from 'vs/base/common/lifecycle';
import { DisposableStore, IDisposable } from 'vs/base/common/lifecycle';
import { ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable';
import { ISpliceable } from 'vs/base/common/sequence';
import { IThemable } from 'vs/base/common/styler';
@@ -148,9 +148,11 @@ export class Table<TRow> implements ISpliceable<TRow>, IThemable, IDisposable {
readonly domNode: HTMLElement;
private splitview: SplitView;
private list: List<TRow>;
private columnLayoutDisposable: IDisposable;
private cachedHeight: number = 0;
private styleElement: HTMLStyleElement;
protected readonly disposables = new DisposableStore();
private cachedWidth: number = 0;
private cachedHeight: number = 0;
get onDidChangeFocus(): Event<ITableEvent<TRow>> { return this.list.onDidChangeFocus; }
get onDidChangeSelection(): Event<ITableEvent<TRow>> { return this.list.onDidChangeSelection; }
@@ -196,21 +198,27 @@ export class Table<TRow> implements ISpliceable<TRow>, IThemable, IDisposable {
views: headers.map(view => ({ size: view.column.weight, view }))
};
this.splitview = new SplitView(this.domNode, {
this.splitview = this.disposables.add(new SplitView(this.domNode, {
orientation: Orientation.HORIZONTAL,
scrollbarVisibility: ScrollbarVisibility.Hidden,
getSashOrthogonalSize: () => this.cachedHeight,
descriptor
});
}));
this.splitview.el.style.height = `${virtualDelegate.headerRowHeight}px`;
this.splitview.el.style.lineHeight = `${virtualDelegate.headerRowHeight}px`;
const renderer = new TableListRenderer(columns, renderers, i => this.splitview.getViewSize(i));
this.list = new List(user, this.domNode, asListVirtualDelegate(virtualDelegate), [renderer], _options);
this.list = this.disposables.add(new List(user, this.domNode, asListVirtualDelegate(virtualDelegate), [renderer], _options));
this.columnLayoutDisposable = Event.any(...headers.map(h => h.onDidLayout))
(([index, size]) => renderer.layoutColumn(index, size));
Event.any(...headers.map(h => h.onDidLayout))
(([index, size]) => renderer.layoutColumn(index, size), null, this.disposables);
this.splitview.onDidSashReset(index => {
const totalWeight = columns.reduce((r, c) => r + c.weight, 0);
const size = columns[index].weight / totalWeight * this.cachedWidth;
this.splitview.resizeView(index, size);
}, null, this.disposables);
this.styleElement = createStyleSheet(this.domNode);
this.style({});
@@ -248,6 +256,7 @@ export class Table<TRow> implements ISpliceable<TRow>, IThemable, IDisposable {
height = height ?? getContentHeight(this.domNode);
width = width ?? getContentWidth(this.domNode);
this.cachedWidth = width;
this.cachedHeight = height;
this.splitview.layout(width);
@@ -337,8 +346,6 @@ export class Table<TRow> implements ISpliceable<TRow>, IThemable, IDisposable {
}
dispose(): void {
this.splitview.dispose();
this.list.dispose();
this.columnLayoutDisposable.dispose();
this.disposables.dispose();
}
}
src/vs/base/browser/ui/checkbox/checkbox.css → src/vs/base/browser/ui/toggle/toggle.css
+15 -9
View File
@@ -3,14 +3,14 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-custom-checkbox {
.monaco-custom-toggle {
margin-left: 2px;
float: left;
cursor: pointer;
overflow: hidden;
opacity: 0.7;
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px solid transparent;
padding: 1px;
box-sizing: border-box;
@@ -19,20 +19,26 @@
-ms-user-select: none;
}
.monaco-custom-checkbox:hover,
.monaco-custom-checkbox.checked {
opacity: 1;
.monaco-custom-toggle:hover {
background-color: var(--vscode-inputOption-hoverBackground);
}
.hc-black .monaco-custom-checkbox {
.hc-black .monaco-custom-toggle:hover,
.hc-light .monaco-custom-toggle:hover {
border: 1px dashed var(--vscode-focusBorder);
}
.hc-black .monaco-custom-toggle,
.hc-light .monaco-custom-toggle {
background: none;
}
.hc-black .monaco-custom-checkbox:hover {
.hc-black .monaco-custom-toggle:hover,
.hc-light .monaco-custom-toggle:hover {
background: none;
}
.monaco-custom-checkbox.monaco-simple-checkbox {
.monaco-custom-toggle.monaco-checkbox {
height: 18px;
width: 18px;
border: 1px solid transparent;
@@ -45,6 +51,6 @@
}
/* hide check when unchecked */
.monaco-custom-checkbox.monaco-simple-checkbox:not(.checked)::before {
.monaco-custom-toggle.monaco-checkbox:not(.checked)::before {
visibility: hidden;
}
src/vs/base/browser/ui/checkbox/checkbox.ts → src/vs/base/browser/ui/toggle/toggle.ts
+35 -33
View File
@@ -11,9 +11,9 @@ import { Codicon, CSSIcon } from 'vs/base/common/codicons';
import { Color } from 'vs/base/common/color';
import { Emitter, Event } from 'vs/base/common/event';
import { KeyCode } from 'vs/base/common/keyCodes';
import 'vs/css!./checkbox';
import 'vs/css!./toggle';
export interface ICheckboxOpts extends ICheckboxStyles {
export interface IToggleOpts extends IToggleStyles {
readonly actionClassName?: string;
readonly icon?: CSSIcon;
readonly title: string;
@@ -21,13 +21,13 @@ export interface ICheckboxOpts extends ICheckboxStyles {
readonly notFocusable?: boolean;
}
export interface ICheckboxStyles {
export interface IToggleStyles {
inputActiveOptionBorder?: Color;
inputActiveOptionForeground?: Color;
inputActiveOptionBackground?: Color;
}
export interface ISimpleCheckboxStyles {
export interface ICheckboxStyles {
checkboxBackground?: Color;
checkboxBorder?: Color;
checkboxForeground?: Color;
@@ -39,57 +39,57 @@ const defaultOpts = {
inputActiveOptionBackground: Color.fromHex('#0E639C50')
};
export class CheckboxActionViewItem extends BaseActionViewItem {
export class ToggleActionViewItem extends BaseActionViewItem {
protected readonly checkbox: Checkbox;
protected readonly toggle: Toggle;
constructor(context: any, action: IAction, options: IActionViewItemOptions | undefined) {
super(context, action, options);
this.checkbox = this._register(new Checkbox({
this.toggle = this._register(new Toggle({
actionClassName: this._action.class,
isChecked: !!this._action.checked,
title: (<IActionViewItemOptions>this.options).keybinding ? `${this._action.label} (${(<IActionViewItemOptions>this.options).keybinding})` : this._action.label,
notFocusable: true
}));
this._register(this.checkbox.onChange(() => this._action.checked = !!this.checkbox && this.checkbox.checked));
this._register(this.toggle.onChange(() => this._action.checked = !!this.toggle && this.toggle.checked));
}
override render(container: HTMLElement): void {
this.element = container;
this.element.appendChild(this.checkbox.domNode);
this.element.appendChild(this.toggle.domNode);
}
override updateEnabled(): void {
if (this.checkbox) {
if (this.toggle) {
if (this.isEnabled()) {
this.checkbox.enable();
this.toggle.enable();
} else {
this.checkbox.disable();
this.toggle.disable();
}
}
}
override updateChecked(): void {
this.checkbox.checked = !!this._action.checked;
this.toggle.checked = !!this._action.checked;
}
override focus(): void {
this.checkbox.domNode.tabIndex = 0;
this.checkbox.focus();
this.toggle.domNode.tabIndex = 0;
this.toggle.focus();
}
override blur(): void {
this.checkbox.domNode.tabIndex = -1;
this.checkbox.domNode.blur();
this.toggle.domNode.tabIndex = -1;
this.toggle.domNode.blur();
}
override setFocusable(focusable: boolean): void {
this.checkbox.domNode.tabIndex = focusable ? 0 : -1;
this.toggle.domNode.tabIndex = focusable ? 0 : -1;
}
}
export class Checkbox extends Widget {
export class Toggle extends Widget {
private readonly _onChange = this._register(new Emitter<boolean>());
readonly onChange: Event<boolean /* via keyboard */> = this._onChange.event;
@@ -97,18 +97,18 @@ export class Checkbox extends Widget {
private readonly _onKeyDown = this._register(new Emitter<IKeyboardEvent>());
readonly onKeyDown: Event<IKeyboardEvent> = this._onKeyDown.event;
private readonly _opts: ICheckboxOpts;
private readonly _opts: IToggleOpts;
readonly domNode: HTMLElement;
private _checked: boolean;
constructor(opts: ICheckboxOpts) {
constructor(opts: IToggleOpts) {
super();
this._opts = { ...defaultOpts, ...opts };
this._checked = this._opts.isChecked;
const classes = ['monaco-custom-checkbox'];
const classes = ['monaco-custom-toggle'];
if (this._opts.icon) {
classes.push(...CSSIcon.asClassNameArray(this._opts.icon));
}
@@ -132,9 +132,11 @@ export class Checkbox extends Widget {
this.applyStyles();
this.onclick(this.domNode, (ev) => {
this.checked = !this._checked;
this._onChange.fire(false);
ev.preventDefault();
if (this.enabled) {
this.checked = !this._checked;
this._onChange.fire(false);
ev.preventDefault();
}
});
this.ignoreGesture(this.domNode);
@@ -176,7 +178,7 @@ export class Checkbox extends Widget {
return 2 /*margin left*/ + 2 /*border*/ + 2 /*padding*/ + 16 /* icon width */;
}
style(styles: ICheckboxStyles): void {
style(styles: IToggleStyles): void {
if (styles.inputActiveOptionBorder) {
this._opts.inputActiveOptionBorder = styles.inputActiveOptionBorder;
}
@@ -191,9 +193,9 @@ export class Checkbox extends Widget {
protected applyStyles(): void {
if (this.domNode) {
this.domNode.style.borderColor = this._checked && this._opts.inputActiveOptionBorder ? this._opts.inputActiveOptionBorder.toString() : 'transparent';
this.domNode.style.borderColor = this._checked && this._opts.inputActiveOptionBorder ? this._opts.inputActiveOptionBorder.toString() : '';
this.domNode.style.color = this._checked && this._opts.inputActiveOptionForeground ? this._opts.inputActiveOptionForeground.toString() : 'inherit';
this.domNode.style.backgroundColor = this._checked && this._opts.inputActiveOptionBackground ? this._opts.inputActiveOptionBackground.toString() : 'transparent';
this.domNode.style.backgroundColor = this._checked && this._opts.inputActiveOptionBackground ? this._opts.inputActiveOptionBackground.toString() : '';
}
}
@@ -211,16 +213,16 @@ export class Checkbox extends Widget {
}
}
export class SimpleCheckbox extends Widget {
private checkbox: Checkbox;
private styles: ISimpleCheckboxStyles;
export class Checkbox extends Widget {
private checkbox: Toggle;
private styles: ICheckboxStyles;
readonly domNode: HTMLElement;
constructor(private title: string, private isChecked: boolean) {
super();
this.checkbox = new Checkbox({ title: this.title, isChecked: this.isChecked, icon: Codicon.check, actionClassName: 'monaco-simple-checkbox' });
this.checkbox = new Toggle({ title: this.title, isChecked: this.isChecked, icon: Codicon.check, actionClassName: 'monaco-checkbox' });
this.domNode = this.checkbox.domNode;
@@ -249,7 +251,7 @@ export class SimpleCheckbox extends Widget {
return this.domNode === document.activeElement;
}
style(styles: ISimpleCheckboxStyles): void {
style(styles: ICheckboxStyles): void {
this.styles = styles;
this.applyStyles();
src/vs/base/browser/ui/toolbar/toolbar.ts
+5 -3
View File
@@ -8,7 +8,7 @@ import { ActionBar, ActionsOrientation, IActionViewItemProvider } from 'vs/base/
import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
import { DropdownMenuActionViewItem } from 'vs/base/browser/ui/dropdown/dropdownActionViewItem';
import { Action, IAction, IActionRunner, SubmenuAction } from 'vs/base/common/actions';
import { Codicon, CSSIcon, registerCodicon } from 'vs/base/common/codicons';
import { Codicon, CSSIcon } from 'vs/base/common/codicons';
import { EventMultiplexer } from 'vs/base/common/event';
import { ResolvedKeybinding } from 'vs/base/common/keybindings';
import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
@@ -16,7 +16,7 @@ import { withNullAsUndefined } from 'vs/base/common/types';
import 'vs/css!./toolbar';
import * as nls from 'vs/nls';
const toolBarMoreIcon = registerCodicon('toolbar-more', Codicon.more);
export interface IToolBarOptions {
orientation?: ActionsOrientation;
@@ -28,6 +28,7 @@ export interface IToolBarOptions {
anchorAlignmentProvider?: () => AnchorAlignment;
renderDropdownAsChildElement?: boolean;
moreIcon?: CSSIcon;
allowContextMenu?: boolean;
}
/**
@@ -63,6 +64,7 @@ export class ToolBar extends Disposable {
orientation: options.orientation,
ariaLabel: options.ariaLabel,
actionRunner: options.actionRunner,
allowContextMenu: options.allowContextMenu,
actionViewItemProvider: (action: IAction) => {
if (action.id === ToggleMenuAction.ID) {
this.toggleMenuActionViewItem = new DropdownMenuActionViewItem(
@@ -73,7 +75,7 @@ export class ToolBar extends Disposable {
actionViewItemProvider: this.options.actionViewItemProvider,
actionRunner: this.actionRunner,
keybindingProvider: this.options.getKeyBinding,
classNames: CSSIcon.asClassNameArray(options.moreIcon ?? toolBarMoreIcon),
classNames: CSSIcon.asClassNameArray(options.moreIcon ?? Codicon.toolBarMore),
anchorAlignmentProvider: this.options.anchorAlignmentProvider,
menuAsChild: !!this.options.renderDropdownAsChildElement
}
src/vs/base/browser/ui/tree/abstractTree.ts
+95 -13
View File
@@ -11,10 +11,10 @@ import { IIdentityProvider, IKeyboardNavigationDelegate, IKeyboardNavigationLabe
import { ElementsDragAndDropData } from 'vs/base/browser/ui/list/listView';
import { DefaultKeyboardNavigationDelegate, IListOptions, IListStyles, isInputElement, isMonacoEditor, List, MouseController } from 'vs/base/browser/ui/list/listWidget';
import { getVisibleState, isFilterResult } from 'vs/base/browser/ui/tree/indexTreeModel';
import { ICollapseStateChangeEvent, ITreeContextMenuEvent, ITreeDragAndDrop, ITreeEvent, ITreeFilter, ITreeModel, ITreeModelSpliceEvent, ITreeMouseEvent, ITreeNavigator, ITreeNode, ITreeRenderer, TreeDragOverBubble, TreeFilterResult, TreeMouseEventTarget, TreeVisibility } from 'vs/base/browser/ui/tree/tree';
import { treeFilterClearIcon, treeFilterOnTypeOffIcon, treeFilterOnTypeOnIcon, treeItemExpandedIcon } from 'vs/base/browser/ui/tree/treeIcons';
import { ICollapseStateChangeEvent, ITreeContextMenuEvent, ITreeDragAndDrop, ITreeEvent, ITreeFilter, ITreeModel, ITreeModelSpliceEvent, ITreeMouseEvent, ITreeNavigator, ITreeNode, ITreeRenderer, TreeDragOverBubble, TreeError, TreeFilterResult, TreeMouseEventTarget, TreeVisibility } from 'vs/base/browser/ui/tree/tree';
import { distinct, equals, firstOrDefault, range } from 'vs/base/common/arrays';
import { disposableTimeout } from 'vs/base/common/async';
import { Codicon } from 'vs/base/common/codicons';
import { SetMap } from 'vs/base/common/collections';
import { Emitter, Event, EventBufferer, Relay } from 'vs/base/common/event';
import { fuzzyScore, FuzzyScore } from 'vs/base/common/filters';
@@ -234,6 +234,57 @@ interface ITreeListTemplateData<T> {
readonly templateData: T;
}
export interface IAbstractTreeViewState {
readonly focus: Iterable<string>;
readonly selection: Iterable<string>;
readonly expanded: { [id: string]: 1 | 0 };
readonly scrollTop: number;
}
export class AbstractTreeViewState implements IAbstractTreeViewState {
public readonly focus: Set<string>;
public readonly selection: Set<string>;
public readonly expanded: { [id: string]: 1 | 0 };
public scrollTop: number;
public static lift(state: IAbstractTreeViewState) {
return state instanceof AbstractTreeViewState ? state : new AbstractTreeViewState(state);
}
public static empty(scrollTop = 0) {
return new AbstractTreeViewState({
focus: [],
selection: [],
expanded: Object.create(null),
scrollTop,
});
}
protected constructor(state: IAbstractTreeViewState) {
this.focus = new Set(state.focus);
this.selection = new Set(state.selection);
if (state.expanded instanceof Array) { // old format
this.expanded = Object.create(null);
for (const id of state.expanded as string[]) {
this.expanded[id] = 1;
}
} else {
this.expanded = state.expanded;
}
this.expanded = state.expanded;
this.scrollTop = state.scrollTop;
}
public toJSON(): IAbstractTreeViewState {
return {
focus: Array.from(this.focus),
selection: Array.from(this.selection),
expanded: this.expanded,
scrollTop: this.scrollTop,
};
}
}
export enum RenderIndentGuides {
None = 'none',
OnHover = 'onHover',
@@ -400,7 +451,7 @@ class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer
}
private renderTwistie(node: ITreeNode<T, TFilterData>, templateData: ITreeListTemplateData<TTemplateData>) {
templateData.twistie.classList.remove(...treeItemExpandedIcon.classNamesArray);
templateData.twistie.classList.remove(...Codicon.treeItemExpanded.classNamesArray);
let twistieRendered = false;
@@ -410,7 +461,7 @@ class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer
if (node.collapsible && (!this.hideTwistiesOfChildlessElements || node.visibleChildrenCount > 0)) {
if (!twistieRendered) {
templateData.twistie.classList.add(...treeItemExpandedIcon.classNamesArray);
templateData.twistie.classList.add(...Codicon.treeItemExpanded.classNamesArray);
}
templateData.twistie.classList.add('collapsible');
@@ -579,7 +630,7 @@ class TypeFilter<T> implements ITreeFilter<T, FuzzyScore | LabelFuzzyScore>, IDi
return { data: FuzzyScore.Default, visibility: true };
}
const score = fuzzyScore(this._pattern, this._lowercasePattern, 0, labelStr, labelStr.toLowerCase(), 0, true);
const score = fuzzyScore(this._pattern, this._lowercasePattern, 0, labelStr, labelStr.toLowerCase(), 0);
if (score) {
this._matchCount++;
return labels.length === 1 ?
@@ -663,7 +714,7 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
this.updateFilterOnTypeTitleAndIcon();
this.disposables.add(addDisposableListener(this.filterOnTypeDomNode, 'input', () => this.onDidChangeFilterOnType()));
this.clearDomNode = append(controls, $<HTMLInputElement>('button.clear' + treeFilterClearIcon.cssSelector));
this.clearDomNode = append(controls, $<HTMLInputElement>('button.clear' + Codicon.treeFilterClear.cssSelector));
this.clearDomNode.tabIndex = -1;
this.clearDomNode.title = localize('clear', "Clear");
@@ -876,12 +927,12 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
private updateFilterOnTypeTitleAndIcon(): void {
if (this.filterOnType) {
this.filterOnTypeDomNode.classList.remove(...treeFilterOnTypeOffIcon.classNamesArray);
this.filterOnTypeDomNode.classList.add(...treeFilterOnTypeOnIcon.classNamesArray);
this.filterOnTypeDomNode.classList.remove(...Codicon.treeFilterOnTypeOff.classNamesArray);
this.filterOnTypeDomNode.classList.add(...Codicon.treeFilterOnTypeOn.classNamesArray);
this.filterOnTypeDomNode.title = localize('disable filter on type', "Disable Filter on Type");
} else {
this.filterOnTypeDomNode.classList.remove(...treeFilterOnTypeOnIcon.classNamesArray);
this.filterOnTypeDomNode.classList.add(...treeFilterOnTypeOffIcon.classNamesArray);
this.filterOnTypeDomNode.classList.remove(...Codicon.treeFilterOnTypeOn.classNamesArray);
this.filterOnTypeDomNode.classList.add(...Codicon.treeFilterOnTypeOff.classNamesArray);
this.filterOnTypeDomNode.title = localize('enable filter on type', "Enable Filter on Type");
}
}
@@ -1293,6 +1344,7 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
get onDidFocus(): Event<void> { return this.view.onDidFocus; }
get onDidBlur(): Event<void> { return this.view.onDidBlur; }
get onDidChangeModel(): Event<void> { return Event.signal(this.model.onDidSplice); }
get onDidChangeCollapseState(): Event<ICollapseStateChangeEvent<T, TFilterData>> { return this.model.onDidChangeCollapseState; }
get onDidChangeRenderNodeCount(): Event<ITreeNode<T, TFilterData>> { return this.model.onDidChangeRenderNodeCount; }
@@ -1311,7 +1363,7 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
get onDidDispose(): Event<void> { return this.view.onDidDispose; }
constructor(
user: string,
private readonly _user: string,
container: HTMLElement,
delegate: IListVirtualDelegate<T>,
renderers: ITreeRenderer<T, TFilterData, any>[],
@@ -1338,9 +1390,9 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
this.focus = new Trait(() => this.view.getFocusedElements()[0], _options.identityProvider);
this.selection = new Trait(() => this.view.getSelectedElements()[0], _options.identityProvider);
this.anchor = new Trait(() => this.view.getAnchorElement(), _options.identityProvider);
this.view = new TreeNodeList(user, container, treeDelegate, this.renderers, this.focus, this.selection, this.anchor, { ...asListOptions(() => this.model, _options), tree: this });
this.view = new TreeNodeList(_user, container, treeDelegate, this.renderers, this.focus, this.selection, this.anchor, { ...asListOptions(() => this.model, _options), tree: this });
this.model = this.createModel(user, this.view, _options);
this.model = this.createModel(_user, this.view, _options);
onDidChangeCollapseStateRelay.input = this.model.onDidChangeCollapseState;
const onDidModelSplice = Event.forEach(this.model.onDidSplice, e => {
@@ -1683,6 +1735,36 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
return this.view.getRelativeTop(index);
}
getViewState(identityProvider = this.options.identityProvider): AbstractTreeViewState {
if (!identityProvider) {
throw new TreeError(this._user, 'Can\'t get tree view state without an identity provider');
}
const getId = (element: T | null) => identityProvider.getId(element!).toString();
const state = AbstractTreeViewState.empty(this.scrollTop);
for (const focus of this.getFocus()) {
state.focus.add(getId(focus));
}
for (const selection of this.getSelection()) {
state.selection.add(getId(selection));
}
const root = this.model.getNode();
const queue = [root];
while (queue.length > 0) {
const node = queue.shift()!;
if (node !== root && node.collapsible) {
state.expanded[getId(node.element!)] = node.collapsed ? 0 : 1;
}
queue.push(...node.children);
}
return state;
}
// List
private onLeftArrow(e: StandardKeyboardEvent): void {
src/vs/base/browser/ui/tree/asyncDataTree.ts
+32 -27
View File
@@ -12,14 +12,15 @@ import { ICompressedTreeElement, ICompressedTreeNode } from 'vs/base/browser/ui/
import { getVisibleState, isFilterResult } from 'vs/base/browser/ui/tree/indexTreeModel';
import { CompressibleObjectTree, ICompressibleKeyboardNavigationLabelProvider, ICompressibleObjectTreeOptions, ICompressibleTreeRenderer, IObjectTreeOptions, IObjectTreeSetChildrenOptions, ObjectTree } from 'vs/base/browser/ui/tree/objectTree';
import { IAsyncDataSource, ICollapseStateChangeEvent, ITreeContextMenuEvent, ITreeDragAndDrop, ITreeElement, ITreeEvent, ITreeFilter, ITreeMouseEvent, ITreeNode, ITreeRenderer, ITreeSorter, TreeError, TreeFilterResult, TreeVisibility, WeakMapper } from 'vs/base/browser/ui/tree/tree';
import { treeItemLoadingIcon } from 'vs/base/browser/ui/tree/treeIcons';
import { CancelablePromise, createCancelablePromise, Promises, timeout } from 'vs/base/common/async';
import { isPromiseCanceledError, onUnexpectedError } from 'vs/base/common/errors';
import { Codicon } from 'vs/base/common/codicons';
import { isCancellationError, onUnexpectedError } from 'vs/base/common/errors';
import { Emitter, Event } from 'vs/base/common/event';
import { Iterable } from 'vs/base/common/iterator';
import { DisposableStore, dispose, IDisposable } from 'vs/base/common/lifecycle';
import { ScrollEvent } from 'vs/base/common/scrollable';
import { IThemable } from 'vs/base/common/styler';
import { isIterable } from 'vs/base/common/types';
interface IAsyncDataTreeNode<TInput, T> {
element: TInput | T;
@@ -109,10 +110,10 @@ class AsyncDataTreeRenderer<TInput, T, TFilterData, TTemplateData> implements IT
renderTwistie(element: IAsyncDataTreeNode<TInput, T>, twistieElement: HTMLElement): boolean {
if (element.slow) {
twistieElement.classList.add(...treeItemLoadingIcon.classNamesArray);
twistieElement.classList.add(...Codicon.treeItemLoading.classNamesArray);
return true;
} else {
twistieElement.classList.remove(...treeItemLoadingIcon.classNamesArray);
twistieElement.classList.remove(...Codicon.treeItemLoading.classNamesArray);
return false;
}
}
@@ -282,7 +283,7 @@ export interface IAsyncDataTreeOptionsUpdate extends IAbstractTreeOptionsUpdate
export interface IAsyncDataTreeUpdateChildrenOptions<T> extends IObjectTreeSetChildrenOptions<T> { }
export interface IAsyncDataTreeOptions<T, TFilterData = void> extends IAsyncDataTreeOptionsUpdate, Pick<IAbstractTreeOptions<T, TFilterData>, Exclude<keyof IAbstractTreeOptions<T, TFilterData>, 'collapseByDefault'>> {
readonly collapseByDefault?: { (e: T): boolean; };
readonly collapseByDefault?: { (e: T): boolean };
readonly identityProvider?: IIdentityProvider<T>;
readonly sorter?: ITreeSorter<T>;
readonly autoExpandSingleChildren?: boolean;
@@ -312,7 +313,7 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
protected readonly root: IAsyncDataTreeNode<TInput, T>;
private readonly nodes = new Map<null | T, IAsyncDataTreeNode<TInput, T>>();
private readonly sorter?: ITreeSorter<T>;
private readonly collapseByDefault?: { (e: T): boolean; };
private readonly collapseByDefault?: { (e: T): boolean };
private readonly subTreeRefreshPromises = new Map<IAsyncDataTreeNode<TInput, T>, Promise<void>>();
private readonly refreshPromises = new Map<IAsyncDataTreeNode<TInput, T>, CancelablePromise<Iterable<T>>>();
@@ -341,6 +342,7 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
get onDidFocus(): Event<void> { return this.tree.onDidFocus; }
get onDidBlur(): Event<void> { return this.tree.onDidBlur; }
get onDidChangeModel(): Event<void> { return this.tree.onDidChangeModel; }
get onDidChangeCollapseState(): Event<ICollapseStateChangeEvent<IAsyncDataTreeNode<TInput, T> | null, TFilterData>> { return this.tree.onDidChangeCollapseState; }
get onDidUpdateOptions(): Event<IAsyncDataTreeOptionsUpdate> { return this.tree.onDidUpdateOptions; }
@@ -763,15 +765,19 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
if (!node.hasChildren) {
childrenPromise = Promise.resolve(Iterable.empty());
} else {
const slowTimeout = timeout(800);
const children = this.doGetChildren(node);
if (isIterable(children)) {
childrenPromise = Promise.resolve(children);
} else {
const slowTimeout = timeout(800);
slowTimeout.then(() => {
node.slow = true;
this._onDidChangeNodeSlowState.fire(node);
}, _ => null);
slowTimeout.then(() => {
node.slow = true;
this._onDidChangeNodeSlowState.fire(node);
}, _ => null);
childrenPromise = this.doGetChildren(node)
.finally(() => slowTimeout.cancel());
childrenPromise = children.finally(() => slowTimeout.cancel());
}
}
try {
@@ -782,7 +788,7 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
this.tree.collapse(node);
}
if (isPromiseCanceledError(err)) {
if (isCancellationError(err)) {
return [];
}
@@ -795,21 +801,20 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
}
}
private doGetChildren(node: IAsyncDataTreeNode<TInput, T>): Promise<Iterable<T>> {
private doGetChildren(node: IAsyncDataTreeNode<TInput, T>): Promise<Iterable<T>> | Iterable<T> {
let result = this.refreshPromises.get(node);
if (result) {
return result;
}
result = createCancelablePromise(async () => {
const children = await this.dataSource.getChildren(node.element!);
const children = this.dataSource.getChildren(node.element!);
if (isIterable(children)) {
return this.processChildren(children);
});
this.refreshPromises.set(node, result);
return result.finally(() => { this.refreshPromises.delete(node); });
} else {
result = createCancelablePromise(async () => this.processChildren(await children));
this.refreshPromises.set(node, result);
return result.finally(() => { this.refreshPromises.delete(node); });
}
}
private _onDidChangeCollapseState({ node, deep }: ICollapseStateChangeEvent<IAsyncDataTreeNode<TInput, T> | null, any>): void {
@@ -836,7 +841,7 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
}
const nodesToForget = new Map<T, IAsyncDataTreeNode<TInput, T>>();
const childrenTreeNodesById = new Map<string, { node: IAsyncDataTreeNode<TInput, T>, collapsed: boolean }>();
const childrenTreeNodesById = new Map<string, { node: IAsyncDataTreeNode<TInput, T>; collapsed: boolean }>();
for (const child of node.children) {
nodesToForget.set(child.element as T, child);
@@ -936,7 +941,7 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
const objectTreeOptions: IObjectTreeSetChildrenOptions<IAsyncDataTreeNode<TInput, T>> | undefined = options && {
...options,
diffIdentityProvider: options!.diffIdentityProvider && {
getId(node: IAsyncDataTreeNode<TInput, T>): { toString(): string; } {
getId(node: IAsyncDataTreeNode<TInput, T>): { toString(): string } {
return options!.diffIdentityProvider!.getId(node.element as T);
}
}
@@ -1072,10 +1077,10 @@ class CompressibleAsyncDataTreeRenderer<TInput, T, TFilterData, TTemplateData> i
renderTwistie(element: IAsyncDataTreeNode<TInput, T>, twistieElement: HTMLElement): boolean {
if (element.slow) {
twistieElement.classList.add(...treeItemLoadingIcon.classNamesArray);
twistieElement.classList.add(...Codicon.treeItemLoading.classNamesArray);
return true;
} else {
twistieElement.classList.remove(...treeItemLoadingIcon.classNamesArray);
twistieElement.classList.remove(...Codicon.treeItemLoading.classNamesArray);
return false;
}
}
src/vs/base/browser/ui/tree/compressedObjectTreeModel.ts
+1 -1
View File
@@ -388,7 +388,7 @@ function mapOptions<T, TFilterData>(compressedNodeUnwrapper: CompressedNodeUnwra
return {
...options,
identityProvider: options.identityProvider && {
getId(node: ICompressedTreeNode<T>): { toString(): string; } {
getId(node: ICompressedTreeNode<T>): { toString(): string } {
return options.identityProvider!.getId(compressedNodeUnwrapper(node));
}
},
src/vs/base/browser/ui/tree/dataTree.ts
+6 -41
View File
@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { IIdentityProvider, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
import { AbstractTree, IAbstractTreeOptions } from 'vs/base/browser/ui/tree/abstractTree';
import { AbstractTree, AbstractTreeViewState, IAbstractTreeOptions } from 'vs/base/browser/ui/tree/abstractTree';
import { IList } from 'vs/base/browser/ui/tree/indexTreeModel';
import { ObjectTreeModel } from 'vs/base/browser/ui/tree/objectTreeModel';
import { IDataSource, ITreeElement, ITreeModel, ITreeNode, ITreeRenderer, ITreeSorter, TreeError } from 'vs/base/browser/ui/tree/tree';
@@ -14,13 +14,6 @@ export interface IDataTreeOptions<T, TFilterData = void> extends IAbstractTreeOp
readonly sorter?: ITreeSorter<T>;
}
export interface IDataTreeViewState {
readonly focus: string[];
readonly selection: string[];
readonly expanded: string[];
readonly scrollTop: number;
}
export class DataTree<TInput, T, TFilterData = void> extends AbstractTree<T | null, TFilterData, T | null> {
protected override model!: ObjectTreeModel<T, TFilterData>;
@@ -47,7 +40,7 @@ export class DataTree<TInput, T, TFilterData = void> extends AbstractTree<T | nu
return this.input;
}
setInput(input: TInput | undefined, viewState?: IDataTreeViewState): void {
setInput(input: TInput | undefined, viewState?: AbstractTreeViewState): void {
if (viewState && !this.identityProvider) {
throw new TreeError(this.user, 'Can\'t restore tree view state without an identity provider');
}
@@ -70,17 +63,17 @@ export class DataTree<TInput, T, TFilterData = void> extends AbstractTree<T | nu
const isCollapsed = (element: T) => {
const id = this.identityProvider!.getId(element).toString();
return viewState.expanded.indexOf(id) === -1;
return !viewState.expanded[id];
};
const onDidCreateNode = (node: ITreeNode<T, TFilterData>) => {
const id = this.identityProvider!.getId(node.element).toString();
if (viewState.focus.indexOf(id) > -1) {
if (viewState.focus.has(id)) {
focus.push(node.element);
}
if (viewState.selection.indexOf(id) > -1) {
if (viewState.selection.has(id)) {
selection.push(node.element);
}
};
@@ -164,7 +157,7 @@ export class DataTree<TInput, T, TFilterData = void> extends AbstractTree<T | nu
this.model.setChildren((element === this.input ? null : element) as T, this.iterate(element, isCollapsed).elements, { onDidCreateNode, onDidDeleteNode });
}
private iterate(element: TInput | T, isCollapsed?: (el: T) => boolean | undefined): { elements: Iterable<ITreeElement<T>>, size: number } {
private iterate(element: TInput | T, isCollapsed?: (el: T) => boolean | undefined): { elements: Iterable<ITreeElement<T>>; size: number } {
const children = [...this.dataSource.getChildren(element)];
const elements = Iterable.map(children, element => {
const { elements: children, size } = this.iterate(element, isCollapsed);
@@ -180,32 +173,4 @@ export class DataTree<TInput, T, TFilterData = void> extends AbstractTree<T | nu
protected createModel(user: string, view: IList<ITreeNode<T, TFilterData>>, options: IDataTreeOptions<T, TFilterData>): ITreeModel<T | null, TFilterData, T | null> {
return new ObjectTreeModel(user, view, options);
}
// view state
getViewState(): IDataTreeViewState {
if (!this.identityProvider) {
throw new TreeError(this.user, 'Can\'t get tree view state without an identity provider');
}
const getId = (element: T | null) => this.identityProvider!.getId(element!).toString();
const focus = this.getFocus().map(getId);
const selection = this.getSelection().map(getId);
const expanded: string[] = [];
const root = this.model.getNode();
const queue = [root];
while (queue.length > 0) {
const node = queue.shift()!;
if (node !== root && node.collapsible && !node.collapsed) {
expanded.push(getId(node.element!));
}
queue.push(...node.children);
}
return { focus, selection, expanded, scrollTop: this.scrollTop };
}
}
src/vs/base/browser/ui/tree/indexTreeModel.ts
+11 -6
View File
@@ -6,6 +6,7 @@
import { IIdentityProvider } from 'vs/base/browser/ui/list/list';
import { ICollapseStateChangeEvent, ITreeElement, ITreeFilter, ITreeFilterDataResult, ITreeModel, ITreeModelSpliceEvent, ITreeNode, TreeError, TreeVisibility } from 'vs/base/browser/ui/tree/tree';
import { splice, tail2 } from 'vs/base/common/arrays';
import { Delayer, MicrotaskDelay } from 'vs/base/common/async';
import { LcsDiff } from 'vs/base/common/diff/diff';
import { Emitter, Event, EventBufferer } from 'vs/base/common/event';
import { Iterable } from 'vs/base/common/iterator';
@@ -69,7 +70,7 @@ export interface IIndexTreeModelSpliceOptions<T, TFilterData> {
/**
* Callback for when a node is deleted.
*/
onDidDeleteNode?: (node: ITreeNode<T, TFilterData>) => void
onDidDeleteNode?: (node: ITreeNode<T, TFilterData>) => void;
}
interface CollapsibleStateUpdate {
@@ -111,6 +112,8 @@ export class IndexTreeModel<T extends Exclude<any, undefined>, TFilterData = voi
private readonly _onDidSplice = new Emitter<ITreeModelSpliceEvent<T, TFilterData>>();
readonly onDidSplice = this._onDidSplice.event;
private readonly refilterDelayer = new Delayer(MicrotaskDelay);
constructor(
private user: string,
private list: IList<ITreeNode<T, TFilterData>>,
@@ -311,18 +314,19 @@ export class IndexTreeModel<T extends Exclude<any, undefined>, TFilterData = voi
deletedNodes.forEach(visit);
}
this._onDidSplice.fire({ insertedNodes: nodesToInsert, deletedNodes });
const currentlyHasChildren = parentNode.children.length > 0;
if (lastHadChildren !== currentlyHasChildren) {
this.setCollapsible(location.slice(0, -1), currentlyHasChildren);
}
this._onDidSplice.fire({ insertedNodes: nodesToInsert, deletedNodes });
let node: IIndexTreeNode<T, TFilterData> | undefined = parentNode;
while (node) {
if (node.visibility === TreeVisibility.Recurse) {
this.refilter();
// delayed to avoid excessive refiltering, see #135941
this.refilterDelayer.trigger(() => this.refilter());
break;
}
@@ -487,6 +491,7 @@ export class IndexTreeModel<T extends Exclude<any, undefined>, TFilterData = voi
const previousRenderNodeCount = this.root.renderNodeCount;
const toInsert = this.updateNodeAfterFilterChange(this.root);
this.list.splice(0, previousRenderNodeCount, toInsert);
this.refilterDelayer.cancel();
}
private createTreeNode(
@@ -708,7 +713,7 @@ export class IndexTreeModel<T extends Exclude<any, undefined>, TFilterData = voi
}
// expensive
private getTreeNodeWithListIndex(location: number[]): { node: IIndexTreeNode<T, TFilterData>, listIndex: number, revealed: boolean, visible: boolean } {
private getTreeNodeWithListIndex(location: number[]): { node: IIndexTreeNode<T, TFilterData>; listIndex: number; revealed: boolean; visible: boolean } {
if (location.length === 0) {
return { node: this.root, listIndex: -1, revealed: true, visible: false };
}
@@ -725,7 +730,7 @@ export class IndexTreeModel<T extends Exclude<any, undefined>, TFilterData = voi
return { node, listIndex, revealed, visible: visible && node.visible };
}
private getParentNodeWithListIndex(location: number[], node: IIndexTreeNode<T, TFilterData> = this.root, listIndex: number = 0, revealed = true, visible = true): { parentNode: IIndexTreeNode<T, TFilterData>; listIndex: number; revealed: boolean; visible: boolean; } {
private getParentNodeWithListIndex(location: number[], node: IIndexTreeNode<T, TFilterData> = this.root, listIndex: number = 0, revealed = true, visible = true): { parentNode: IIndexTreeNode<T, TFilterData>; listIndex: number; revealed: boolean; visible: boolean } {
const [index, ...rest] = location;
if (index < 0 || index > node.children.length) {
src/vs/base/browser/ui/tree/objectTree.ts
+9 -2
View File
@@ -36,6 +36,13 @@ export interface IObjectTreeSetChildrenOptions<T> {
readonly diffIdentityProvider?: IIdentityProvider<T>;
}
export interface IObjectTreeViewState {
readonly focus: string[];
readonly selection: string[];
readonly expanded: string[];
readonly scrollTop: number;
}
export class ObjectTree<T extends NonNullable<any>, TFilterData = void> extends AbstractTree<T | null, TFilterData, T | null> {
protected override model!: IObjectTreeModel<T, TFilterData>;
@@ -43,7 +50,7 @@ export class ObjectTree<T extends NonNullable<any>, TFilterData = void> extends
override get onDidChangeCollapseState(): Event<ICollapseStateChangeEvent<T | null, TFilterData>> { return this.model.onDidChangeCollapseState; }
constructor(
user: string,
protected readonly user: string,
container: HTMLElement,
delegate: IListVirtualDelegate<T>,
renderers: ITreeRenderer<T, TFilterData, any>[],
@@ -156,7 +163,7 @@ class CompressibleRenderer<T extends NonNullable<any>, TFilterData, TTemplateDat
}
export interface ICompressibleKeyboardNavigationLabelProvider<T> extends IKeyboardNavigationLabelProvider<T> {
getCompressedNodeKeyboardNavigationLabel(elements: T[]): { toString(): string | undefined; } | undefined;
getCompressedNodeKeyboardNavigationLabel(elements: T[]): { toString(): string | undefined } | undefined;
}
export interface ICompressibleObjectTreeOptions<T, TFilterData = void> extends IObjectTreeOptions<T, TFilterData> {
src/vs/base/browser/ui/tree/objectTreeModel.ts
+1 -1
View File
@@ -33,7 +33,7 @@ export class ObjectTreeModel<T extends NonNullable<any>, TFilterData extends Non
private nodes = new Map<T | null, ITreeNode<T, TFilterData>>();
private readonly nodesByIdentity = new Map<string, ITreeNode<T, TFilterData>>();
private readonly identityProvider?: IIdentityProvider<T>;
private sorter?: ITreeSorter<{ element: T; }>;
private sorter?: ITreeSorter<{ element: T }>;
readonly onDidSplice: Event<ITreeModelSpliceEvent<T | null, TFilterData>>;
readonly onDidChangeCollapseState: Event<ICollapseStateChangeEvent<T, TFilterData>>;
src/vs/base/browser/ui/tree/tree.ts
+1 -1
View File
@@ -153,7 +153,7 @@ export interface ITreeMouseEvent<T> {
export interface ITreeContextMenuEvent<T> {
browserEvent: UIEvent;
element: T | null;
anchor: HTMLElement | { x: number; y: number; };
anchor: HTMLElement | { x: number; y: number };
}
export interface ITreeNavigator<T> {
src/vs/base/browser/ui/tree/treeIcons.ts
-14
View File
@@ -1,14 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { Codicon, registerCodicon } from 'vs/base/common/codicons';
export const treeItemExpandedIcon = registerCodicon('tree-item-expanded', Codicon.chevronDown); // collapsed is done with rotation
export const treeFilterOnTypeOnIcon = registerCodicon('tree-filter-on-type-on', Codicon.listFilter);
export const treeFilterOnTypeOffIcon = registerCodicon('tree-filter-on-type-off', Codicon.listSelection);
export const treeFilterClearIcon = registerCodicon('tree-filter-clear', Codicon.close);
export const treeItemLoadingIcon = registerCodicon('tree-item-loading', Codicon.loading);
src/vs/base/buildfile.js
-33
View File
@@ -1,33 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
/**
* @param {string} name
* @param {string[]} exclude
*/
function createModuleDescription(name, exclude) {
let excludes = ['vs/css', 'vs/nls'];
if (Array.isArray(exclude) && exclude.length > 0) {
excludes = excludes.concat(exclude);
}
return {
name: name,
include: [],
exclude: excludes
};
}
/**
* @param {string} name
*/
function createEditorWorkerModuleDescription(name) {
return createModuleDescription(name, ['vs/base/common/worker/simpleWorker', 'vs/editor/common/services/editorSimpleWorker']);
}
exports.createModuleDescription = createModuleDescription;
exports.createEditorWorkerModuleDescription = createEditorWorkerModuleDescription;
src/vs/base/common/actions.ts
+4 -4
View File
@@ -14,8 +14,8 @@ export interface ITelemetryData {
}
export type WorkbenchActionExecutedClassification = {
id: { classification: 'SystemMetaData', purpose: 'FeatureInsight'; };
from: { classification: 'SystemMetaData', purpose: 'FeatureInsight'; };
id: { classification: 'SystemMetaData'; purpose: 'FeatureInsight' };
from: { classification: 'SystemMetaData'; purpose: 'FeatureInsight' };
};
export type WorkbenchActionExecutedEvent = {
@@ -247,7 +247,7 @@ export class SubmenuAction implements IAction {
readonly class: string | undefined;
readonly tooltip: string = '';
readonly enabled: boolean = true;
readonly checked: boolean = false;
readonly checked: undefined = undefined;
private readonly _actions: readonly IAction[];
get actions(): readonly IAction[] { return this._actions; }
@@ -286,7 +286,7 @@ export class EmptySubmenuAction extends Action {
}
}
export function toAction(props: { id: string, label: string, enabled?: boolean, checked?: boolean, run: Function; }): IAction {
export function toAction(props: { id: string; label: string; enabled?: boolean; checked?: boolean; run: Function }): IAction {
return {
id: props.id,
label: props.label,
src/vs/base/common/arrays.ts
+94 -38
View File
@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { CancellationToken } from 'vs/base/common/cancellation';
import { canceled } from 'vs/base/common/errors';
import { CancellationError } from 'vs/base/common/errors';
import { ISplice } from 'vs/base/common/sequence';
/**
@@ -198,7 +198,7 @@ export function sortedDiff<T>(before: ReadonlyArray<T>, after: ReadonlyArray<T>,
* Takes two *sorted* arrays and computes their delta (removed, added elements).
* Finishes in `Math.min(before.length, after.length)` steps.
*/
export function delta<T>(before: ReadonlyArray<T>, after: ReadonlyArray<T>, compare: (a: T, b: T) => number): { removed: T[], added: T[] } {
export function delta<T>(before: ReadonlyArray<T>, after: ReadonlyArray<T>, compare: (a: T, b: T) => number): { removed: T[]; added: T[] } {
const splices = sortedDiff(before, after, compare);
const removed: T[] = [];
const added: T[] = [];
@@ -254,10 +254,10 @@ export function topAsync<T>(array: T[], compare: (a: T, b: T) => number, n: numb
const result = array.slice(0, n).sort(compare);
for (let i = n, m = Math.min(n + batch, o); i < o; i = m, m = Math.min(m + batch, o)) {
if (i > n) {
await new Promise(resolve => setTimeout(resolve)); // nextTick() would starve I/O.
await new Promise(resolve => setTimeout(resolve)); // any other delay function would starve I/O
}
if (token && token.isCancellationRequested) {
throw canceled();
throw new CancellationError();
}
topStep(array, compare, result, i, m);
}
@@ -300,7 +300,7 @@ export function coalesceInPlace<T>(array: Array<T | undefined | null>): void {
}
/**
* Moves the element in the array for the provided positions.
* @deprecated Use `Array.copyWithin` instead
*/
export function move(array: any[], from: number, to: number): void {
array.splice(to, 0, array.splice(from, 1)[0]);
@@ -339,17 +339,17 @@ export function distinct<T>(array: ReadonlyArray<T>, keyFn: (value: T) => any =
});
}
export function uniqueFilter<T>(keyFn: (t: T) => string): (t: T) => boolean {
const seen: { [key: string]: boolean; } = Object.create(null);
export function uniqueFilter<T, R>(keyFn: (t: T) => R): (t: T) => boolean {
const seen = new Set<R>();
return element => {
const key = keyFn(element);
if (seen[key]) {
if (seen.has(key)) {
return false;
}
seen[key] = true;
seen.add(key);
return true;
};
}
@@ -380,6 +380,12 @@ export function firstOrDefault<T, NotFound = T>(array: ReadonlyArray<T>, notFoun
return array.length > 0 ? array[0] : notFoundValue;
}
export function lastOrDefault<T, NotFound = T>(array: ReadonlyArray<T>, notFoundValue: NotFound): T | NotFound;
export function lastOrDefault<T>(array: ReadonlyArray<T>): T | undefined;
export function lastOrDefault<T, NotFound = T>(array: ReadonlyArray<T>, notFoundValue?: NotFound): T | NotFound | undefined {
return array.length > 0 ? array[array.length - 1] : notFoundValue;
}
export function commonPrefixLength<T>(one: ReadonlyArray<T>, other: ReadonlyArray<T>, equals: (a: T, b: T) => boolean = (a, b) => a === b): number {
let result = 0;
@@ -390,6 +396,9 @@ export function commonPrefixLength<T>(one: ReadonlyArray<T>, other: ReadonlyArra
return result;
}
/**
* @deprecated Use `[].flat()`
*/
export function flatten<T>(arr: T[][]): T[] {
return (<T[]>[]).concat(...arr);
}
@@ -421,9 +430,9 @@ export function range(arg: number, to?: number): number[] {
return result;
}
export function index<T>(array: ReadonlyArray<T>, indexer: (t: T) => string): { [key: string]: T; };
export function index<T, R>(array: ReadonlyArray<T>, indexer: (t: T) => string, mapper: (t: T) => R): { [key: string]: R; };
export function index<T, R>(array: ReadonlyArray<T>, indexer: (t: T) => string, mapper?: (t: T) => R): { [key: string]: R; } {
export function index<T>(array: ReadonlyArray<T>, indexer: (t: T) => string): { [key: string]: T };
export function index<T, R>(array: ReadonlyArray<T>, indexer: (t: T) => string, mapper: (t: T) => R): { [key: string]: R };
export function index<T, R>(array: ReadonlyArray<T>, indexer: (t: T) => string, mapper?: (t: T) => R): { [key: string]: R } {
return array.reduce((r, t) => {
r[indexer(t)] = mapper ? mapper(t) : t;
return r;
@@ -433,6 +442,8 @@ export function index<T, R>(array: ReadonlyArray<T>, indexer: (t: T) => string,
/**
* Inserts an element into an array. Returns a function which, when
* called, will remove that element from the array.
*
* @deprecated In almost all cases, use a `Set<T>` instead.
*/
export function insert<T>(array: T[], element: T): () => void {
array.push(element);
@@ -442,6 +453,8 @@ export function insert<T>(array: T[], element: T): () => void {
/**
* Removes an element from an array if it can be found.
*
* @deprecated In almost all cases, use a `Set<T>` instead.
*/
export function remove<T>(array: T[], element: T): T | undefined {
const index = array.indexOf(element);
@@ -514,6 +527,12 @@ export function pushToEnd<T>(arr: T[], value: T): void {
}
}
export function pushMany<T>(arr: T[], items: ReadonlyArray<T>): void {
for (const item of items) {
arr.push(item);
}
}
export function mapArrayOrNot<T, U>(items: T | T[], fn: (_: T) => U): U | U[] {
return Array.isArray(items) ?
items.map(fn) :
@@ -592,37 +611,62 @@ function getActualStartIndex<T>(array: T[], start: number): number {
}
/**
* Like Math.min with a delegate, and returns the winning index
*/
export function minIndex<T>(array: readonly T[], fn: (value: T) => number): number {
let minValue = Number.MAX_SAFE_INTEGER;
let minIdx = 0;
array.forEach((value, i) => {
const thisValue = fn(value);
if (thisValue < minValue) {
minValue = thisValue;
minIdx = i;
}
});
* A comparator `c` defines a total order `<=` on `T` as following:
* `c(a, b) <= 0` iff `a` <= `b`.
* We also have `c(a, b) == 0` iff `c(b, a) == 0`.
*/
export type Comparator<T> = (a: T, b: T) => number;
return minIdx;
export function compareBy<TItem, TCompareBy>(selector: (item: TItem) => TCompareBy, comparator: Comparator<TCompareBy>): Comparator<TItem> {
return (a, b) => comparator(selector(a), selector(b));
}
/**
* Like Math.max with a delegate, and returns the winning index
*/
export function maxIndex<T>(array: readonly T[], fn: (value: T) => number): number {
let minValue = Number.MIN_SAFE_INTEGER;
let maxIdx = 0;
array.forEach((value, i) => {
const thisValue = fn(value);
if (thisValue > minValue) {
minValue = thisValue;
maxIdx = i;
}
});
* The natural order on numbers.
*/
export const numberComparator: Comparator<number> = (a, b) => a - b;
return maxIdx;
/**
* Returns the first item that is equal to or greater than every other item.
*/
export function findMaxBy<T>(items: readonly T[], comparator: Comparator<T>): T | undefined {
if (items.length === 0) {
return undefined;
}
let max = items[0];
for (let i = 1; i < items.length; i++) {
const item = items[i];
if (comparator(item, max) > 0) {
max = item;
}
}
return max;
}
/**
* Returns the last item that is equal to or greater than every other item.
*/
export function findLastMaxBy<T>(items: readonly T[], comparator: Comparator<T>): T | undefined {
if (items.length === 0) {
return undefined;
}
let max = items[0];
for (let i = 1; i < items.length; i++) {
const item = items[i];
if (comparator(item, max) >= 0) {
max = item;
}
}
return max;
}
/**
* Returns the first item that is equal to or less than every other item.
*/
export function findMinBy<T>(items: readonly T[], comparator: Comparator<T>): T | undefined {
return findMaxBy(items, (a, b) => -comparator(a, b));
}
export class ArrayQueue<T> {
@@ -676,4 +720,16 @@ export class ArrayQueue<T> {
peek(): T | undefined {
return this.items[this.firstIdx];
}
dequeue(): T | undefined {
const result = this.items[this.firstIdx];
this.firstIdx++;
return result;
}
takeCount(count: number): T[] {
const result = this.items.slice(this.firstIdx, this.firstIdx + count);
this.firstIdx += count;
return result;
}
}
src/vs/base/common/async.ts
+479 -49
View File
@@ -4,11 +4,12 @@
*--------------------------------------------------------------------------------------------*/
import { CancellationToken, CancellationTokenSource } from 'vs/base/common/cancellation';
import { canceled } from 'vs/base/common/errors';
import { CancellationError } from 'vs/base/common/errors';
import { Emitter, Event } from 'vs/base/common/event';
import { Disposable, IDisposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
import { extUri as defaultExtUri, IExtUri } from 'vs/base/common/resources';
import { URI } from 'vs/base/common/uri';
import { setTimeout0 } from 'vs/base/common/platform';
export function isThenable<T>(obj: unknown): obj is Promise<T> {
return !!obj && typeof (obj as unknown as Promise<T>).then === 'function';
@@ -26,7 +27,7 @@ export function createCancelablePromise<T>(callback: (token: CancellationToken)
const subscription = source.token.onCancellationRequested(() => {
subscription.dispose();
source.dispose();
reject(canceled());
reject(new CancellationError());
});
Promise.resolve(thenable).then(value => {
subscription.dispose();
@@ -55,10 +56,40 @@ export function createCancelablePromise<T>(callback: (token: CancellationToken)
};
}
/**
* Returns a promise that resolves with `undefined` as soon as the passed token is cancelled.
* @see {@link raceCancellationError}
*/
export function raceCancellation<T>(promise: Promise<T>, token: CancellationToken): Promise<T | undefined>;
/**
* Returns a promise that resolves with `defaultValue` as soon as the passed token is cancelled.
* @see {@link raceCancellationError}
*/
export function raceCancellation<T>(promise: Promise<T>, token: CancellationToken, defaultValue: T): Promise<T>;
export function raceCancellation<T>(promise: Promise<T>, token: CancellationToken, defaultValue?: T): Promise<T | undefined> {
return Promise.race([promise, new Promise<T | undefined>(resolve => token.onCancellationRequested(() => resolve(defaultValue)))]);
return new Promise((resolve, reject) => {
const ref = token.onCancellationRequested(() => {
ref.dispose();
resolve(defaultValue);
});
promise.then(resolve, reject).finally(() => ref.dispose());
});
}
/**
* Returns a promise that rejects with an {@CancellationError} as soon as the passed token is cancelled.
* @see {@link raceCancellation}
*/
export function raceCancellationError<T>(promise: Promise<T>, token: CancellationToken): Promise<T> {
return new Promise((resolve, reject) => {
const ref = token.onCancellationRequested(() => {
ref.dispose();
reject(new CancellationError());
});
promise.then(resolve, reject).finally(() => ref.dispose());
});
}
/**
@@ -209,6 +240,43 @@ export class SequencerByKey<TKey> {
}
}
interface IScheduledLater extends IDisposable {
isTriggered(): boolean;
}
const timeoutDeferred = (timeout: number, fn: () => void): IScheduledLater => {
let scheduled = true;
const handle = setTimeout(() => {
scheduled = false;
fn();
}, timeout);
return {
isTriggered: () => scheduled,
dispose: () => {
clearTimeout(handle);
scheduled = false;
},
};
};
const microtaskDeferred = (fn: () => void): IScheduledLater => {
let scheduled = true;
queueMicrotask(() => {
if (scheduled) {
scheduled = false;
fn();
}
});
return {
isTriggered: () => scheduled,
dispose: () => { scheduled = false; },
};
};
/** Can be passed into the Delayed to defer using a microtask */
export const MicrotaskDelay = Symbol('MicrotaskDelay');
/**
* A helper to delay (debounce) execution of a task that is being requested often.
*
@@ -234,21 +302,21 @@ export class SequencerByKey<TKey> {
*/
export class Delayer<T> implements IDisposable {
private timeout: any;
private deferred: IScheduledLater | null;
private completionPromise: Promise<any> | null;
private doResolve: ((value?: any | Promise<any>) => void) | null;
private doReject: ((err: any) => void) | null;
private task: ITask<T | Promise<T>> | null;
constructor(public defaultDelay: number) {
this.timeout = null;
constructor(public defaultDelay: number | typeof MicrotaskDelay) {
this.deferred = null;
this.completionPromise = null;
this.doResolve = null;
this.doReject = null;
this.task = null;
}
trigger(task: ITask<T | Promise<T>>, delay: number = this.defaultDelay): Promise<T> {
trigger(task: ITask<T | Promise<T>>, delay = this.defaultDelay): Promise<T> {
this.task = task;
this.cancelTimeout();
@@ -268,18 +336,18 @@ export class Delayer<T> implements IDisposable {
});
}
this.timeout = setTimeout(() => {
this.timeout = null;
if (this.doResolve) {
this.doResolve(null);
}
}, delay);
const fn = () => {
this.deferred = null;
this.doResolve?.(null);
};
this.deferred = delay === MicrotaskDelay ? microtaskDeferred(fn) : timeoutDeferred(delay, fn);
return this.completionPromise;
}
isTriggered(): boolean {
return this.timeout !== null;
return !!this.deferred?.isTriggered();
}
cancel(): void {
@@ -287,17 +355,15 @@ export class Delayer<T> implements IDisposable {
if (this.completionPromise) {
if (this.doReject) {
this.doReject(canceled());
this.doReject(new CancellationError());
}
this.completionPromise = null;
}
}
private cancelTimeout(): void {
if (this.timeout !== null) {
clearTimeout(this.timeout);
this.timeout = null;
}
this.deferred?.dispose();
this.deferred = null;
}
dispose(): void {
@@ -405,7 +471,7 @@ export function timeout(millis: number, token?: CancellationToken): CancelablePr
const disposable = token.onCancellationRequested(() => {
clearTimeout(handle);
disposable.dispose();
reject(canceled());
reject(new CancellationError());
});
});
}
@@ -514,27 +580,42 @@ interface ILimitedTaskFactory<T> {
e: (error?: unknown) => void;
}
export interface ILimiter<T> {
readonly size: number;
queue(factory: ITask<Promise<T>>): Promise<T>;
}
/**
* A helper to queue N promises and run them all with a max degree of parallelism. The helper
* ensures that at any time no more than M promises are running at the same time.
*/
export class Limiter<T> {
export class Limiter<T> implements ILimiter<T>{
private _size = 0;
private runningPromises: number;
private maxDegreeOfParalellism: number;
private outstandingPromises: ILimitedTaskFactory<T>[];
private readonly _onFinished: Emitter<void>;
private readonly maxDegreeOfParalellism: number;
private readonly outstandingPromises: ILimitedTaskFactory<T>[];
private readonly _onDrained: Emitter<void>;
constructor(maxDegreeOfParalellism: number) {
this.maxDegreeOfParalellism = maxDegreeOfParalellism;
this.outstandingPromises = [];
this.runningPromises = 0;
this._onFinished = new Emitter<void>();
this._onDrained = new Emitter<void>();
}
get onFinished(): Event<void> {
return this._onFinished.event;
/**
* An event that fires when every promise in the queue
* has started to execute. In other words: no work is
* pending to be scheduled.
*
* This is NOT an event that signals when all promises
* have finished though.
*/
get onDrained(): Event<void> {
return this._onDrained.event;
}
get size(): number {
@@ -568,12 +649,12 @@ export class Limiter<T> {
if (this.outstandingPromises.length > 0) {
this.consume();
} else {
this._onFinished.fire();
this._onDrained.fire();
}
}
dispose(): void {
this._onFinished.dispose();
this._onDrained.dispose();
}
}
@@ -595,15 +676,39 @@ export class ResourceQueue implements IDisposable {
private readonly queues = new Map<string, Queue<void>>();
queueFor(resource: URI, extUri: IExtUri = defaultExtUri): Queue<void> {
private readonly drainers = new Set<DeferredPromise<void>>();
async whenDrained(): Promise<void> {
if (this.isDrained()) {
return;
}
const promise = new DeferredPromise<void>();
this.drainers.add(promise);
return promise.p;
}
private isDrained(): boolean {
for (const [, queue] of this.queues) {
if (queue.size > 0) {
return false;
}
}
return true;
}
queueFor(resource: URI, extUri: IExtUri = defaultExtUri): ILimiter<void> {
const key = extUri.getComparisonKey(resource);
let queue = this.queues.get(key);
if (!queue) {
queue = new Queue<void>();
Event.once(queue.onFinished)(() => {
Event.once(queue.onDrained)(() => {
queue?.dispose();
this.queues.delete(key);
this.onDidQueueDrain();
});
this.queues.set(key, queue);
@@ -612,9 +717,36 @@ export class ResourceQueue implements IDisposable {
return queue;
}
private onDidQueueDrain(): void {
if (!this.isDrained()) {
return; // not done yet
}
this.releaseDrainers();
}
private releaseDrainers(): void {
for (const drainer of this.drainers) {
drainer.complete();
}
this.drainers.clear();
}
dispose(): void {
this.queues.forEach(queue => queue.dispose());
for (const [, queue] of this.queues) {
queue.dispose();
}
this.queues.clear();
// Even though we might still have pending
// tasks queued, after the queues have been
// disposed, we can no longer track them, so
// we release drainers to prevent hanging
// promises when the resource queue is being
// disposed.
this.releaseDrainers();
}
}
@@ -865,11 +997,30 @@ export class RunOnceWorker<T> extends RunOnceScheduler {
}
}
export interface IThrottledWorkerOptions {
/**
* maximum of units the worker will pass onto handler at once
*/
maxWorkChunkSize: number;
/**
* maximum of units the worker will keep in memory for processing
*/
maxBufferedWork: number | undefined;
/**
* delay before processing the next round of chunks when chunk size exceeds limits
*/
throttleDelay: number;
}
/**
* The `ThrottledWorker` will accept units of work `T`
* to handle. The contract is:
* * there is a maximum of units the worker can handle at once (via `chunkSize`)
* * after having handled units, the worker needs to rest (via `throttleDelay`)
* * there is a maximum of units the worker can handle at once (via `maxWorkChunkSize`)
* * there is a maximum of units the worker will keep in memory for processing (via `maxBufferedWork`)
* * after having handled `maxWorkChunkSize` units, the worker needs to rest (via `throttleDelay`)
*/
export class ThrottledWorker<T> extends Disposable {
@@ -879,10 +1030,8 @@ export class ThrottledWorker<T> extends Disposable {
private disposed = false;
constructor(
private readonly maxWorkChunkSize: number,
private readonly maxPendingWork: number | undefined,
private readonly throttleDelay: number,
private readonly handler: (units: readonly T[]) => void
private options: IThrottledWorkerOptions,
private readonly handler: (units: T[]) => void
) {
super();
}
@@ -908,11 +1057,11 @@ export class ThrottledWorker<T> extends Disposable {
}
// Check for reaching maximum of pending work
if (typeof this.maxPendingWork === 'number') {
if (typeof this.options.maxBufferedWork === 'number') {
// Throttled: simple check if pending + units exceeds max pending
if (this.throttler.value) {
if (this.pending + units.length > this.maxPendingWork) {
if (this.pending + units.length > this.options.maxBufferedWork) {
return false; // work not accepted: too much pending work
}
}
@@ -920,7 +1069,7 @@ export class ThrottledWorker<T> extends Disposable {
// Unthrottled: same as throttled, but account for max chunk getting
// worked on directly without being pending
else {
if (this.pending + units.length - this.maxWorkChunkSize > this.maxPendingWork) {
if (this.pending + units.length - this.options.maxWorkChunkSize > this.options.maxBufferedWork) {
return false; // work not accepted: too much pending work
}
}
@@ -942,7 +1091,7 @@ export class ThrottledWorker<T> extends Disposable {
private doWork(): void {
// Extract chunk to handle and handle it
this.handler(this.pendingWork.splice(0, this.maxWorkChunkSize));
this.handler(this.pendingWork.splice(0, this.options.maxWorkChunkSize));
// If we have remaining work, schedule it after a delay
if (this.pendingWork.length > 0) {
@@ -950,7 +1099,7 @@ export class ThrottledWorker<T> extends Disposable {
this.throttler.clear();
this.doWork();
}, this.throttleDelay);
}, this.options.throttleDelay);
this.throttler.value.schedule();
}
}
@@ -968,6 +1117,7 @@ export interface IdleDeadline {
readonly didTimeout: boolean;
timeRemaining(): number;
}
/**
* Execute the callback the next time the browser is idle
*/
@@ -979,7 +1129,10 @@ declare function cancelIdleCallback(handle: number): void;
(function () {
if (typeof requestIdleCallback !== 'function' || typeof cancelIdleCallback !== 'function') {
runWhenIdle = (runner) => {
const handle = setTimeout(() => {
setTimeout0(() => {
if (disposed) {
return;
}
const end = Date.now() + 15; // one frame at 64fps
runner(Object.freeze({
didTimeout: true,
@@ -995,7 +1148,6 @@ declare function cancelIdleCallback(handle: number): void;
return;
}
disposed = true;
clearTimeout(handle);
}
};
};
@@ -1103,7 +1255,7 @@ export class TaskSequentializer {
private _pending?: IPendingTask;
private _next?: ISequentialTask;
hasPending(taskId?: number): this is ITaskSequentializerWithPendingTask {
hasPending(taskId?: number) { // {{SQL CARBON EDIT}} - type constraint causing compiler errors
if (!this._pending) {
return false;
}
@@ -1199,10 +1351,10 @@ export class IntervalCounter {
private value = 0;
constructor(private readonly interval: number) { }
constructor(private readonly interval: number, private readonly nowFn = () => Date.now()) { }
increment(): number {
const now = Date.now();
const now = this.nowFn();
// We are outside of the range of `interval` and as such
// start counting from 0 and remember the time
@@ -1272,7 +1424,7 @@ export class DeferredPromise<T> {
public cancel() {
new Promise<void>(resolve => {
this.errorCallback(canceled());
this.errorCallback(new CancellationError());
this.rejected = true;
resolve();
});
@@ -1333,3 +1485,281 @@ export namespace Promises {
}
//#endregion
//#region
const enum AsyncIterableSourceState {
Initial,
DoneOK,
DoneError,
}
/**
* An object that allows to emit async values asynchronously or bring the iterable to an error state using `reject()`.
* This emitter is valid only for the duration of the executor (until the promise returned by the executor settles).
*/
export interface AsyncIterableEmitter<T> {
/**
* The value will be appended at the end.
*
* **NOTE** If `reject()` has already been called, this method has no effect.
*/
emitOne(value: T): void;
/**
* The values will be appended at the end.
*
* **NOTE** If `reject()` has already been called, this method has no effect.
*/
emitMany(values: T[]): void;
/**
* Writing an error will permanently invalidate this iterable.
* The current users will receive an error thrown, as will all future users.
*
* **NOTE** If `reject()` have already been called, this method has no effect.
*/
reject(error: Error): void;
}
/**
* An executor for the `AsyncIterableObject` that has access to an emitter.
*/
export interface AyncIterableExecutor<T> {
/**
* @param emitter An object that allows to emit async values valid only for the duration of the executor.
*/
(emitter: AsyncIterableEmitter<T>): void | Promise<void>;
}
/**
* A rich implementation for an `AsyncIterable<T>`.
*/
export class AsyncIterableObject<T> implements AsyncIterable<T> {
public static fromArray<T>(items: T[]): AsyncIterableObject<T> {
return new AsyncIterableObject<T>((writer) => {
writer.emitMany(items);
});
}
public static fromPromise<T>(promise: Promise<T[]>): AsyncIterableObject<T> {
return new AsyncIterableObject<T>(async (emitter) => {
emitter.emitMany(await promise);
});
}
public static fromPromises<T>(promises: Promise<T>[]): AsyncIterableObject<T> {
return new AsyncIterableObject<T>(async (emitter) => {
await Promise.all(promises.map(async (p) => emitter.emitOne(await p)));
});
}
public static merge<T>(iterables: AsyncIterable<T>[]): AsyncIterableObject<T> {
return new AsyncIterableObject(async (emitter) => {
await Promise.all(iterables.map(async (iterable) => {
for await (const item of iterable) {
emitter.emitOne(item);
}
}));
});
}
public static EMPTY = AsyncIterableObject.fromArray<any>([]);
private _state: AsyncIterableSourceState;
private _results: T[];
private _error: Error | null;
private readonly _onStateChanged: Emitter<void>;
constructor(executor: AyncIterableExecutor<T>) {
this._state = AsyncIterableSourceState.Initial;
this._results = [];
this._error = null;
this._onStateChanged = new Emitter<void>();
queueMicrotask(async () => {
const writer: AsyncIterableEmitter<T> = {
emitOne: (item) => this.emitOne(item),
emitMany: (items) => this.emitMany(items),
reject: (error) => this.reject(error)
};
try {
await Promise.resolve(executor(writer));
this.resolve();
} catch (err) {
this.reject(err);
} finally {
writer.emitOne = undefined!;
writer.emitMany = undefined!;
writer.reject = undefined!;
}
});
}
[Symbol.asyncIterator](): AsyncIterator<T, undefined, undefined> {
let i = 0;
return {
next: async () => {
do {
if (this._state === AsyncIterableSourceState.DoneError) {
throw this._error;
}
if (i < this._results.length) {
return { done: false, value: this._results[i++] };
}
if (this._state === AsyncIterableSourceState.DoneOK) {
return { done: true, value: undefined };
}
await Event.toPromise(this._onStateChanged.event);
} while (true);
}
};
}
public static map<T, R>(iterable: AsyncIterable<T>, mapFn: (item: T) => R): AsyncIterableObject<R> {
return new AsyncIterableObject<R>(async (emitter) => {
for await (const item of iterable) {
emitter.emitOne(mapFn(item));
}
});
}
public map<R>(mapFn: (item: T) => R): AsyncIterableObject<R> {
return AsyncIterableObject.map(this, mapFn);
}
public static filter<T>(iterable: AsyncIterable<T>, filterFn: (item: T) => boolean): AsyncIterableObject<T> {
return new AsyncIterableObject<T>(async (emitter) => {
for await (const item of iterable) {
if (filterFn(item)) {
emitter.emitOne(item);
}
}
});
}
public filter(filterFn: (item: T) => boolean): AsyncIterableObject<T> {
return AsyncIterableObject.filter(this, filterFn);
}
public static coalesce<T>(iterable: AsyncIterable<T | undefined | null>): AsyncIterableObject<T> {
return <AsyncIterableObject<T>>AsyncIterableObject.filter(iterable, item => !!item);
}
public coalesce(): AsyncIterableObject<NonNullable<T>> {
return AsyncIterableObject.coalesce(this) as AsyncIterableObject<NonNullable<T>>;
}
public static async toPromise<T>(iterable: AsyncIterable<T>): Promise<T[]> {
const result: T[] = [];
for await (const item of iterable) {
result.push(item);
}
return result;
}
public toPromise(): Promise<T[]> {
return AsyncIterableObject.toPromise(this);
}
/**
* The value will be appended at the end.
*
* **NOTE** If `resolve()` or `reject()` have already been called, this method has no effect.
*/
private emitOne(value: T): void {
if (this._state !== AsyncIterableSourceState.Initial) {
return;
}
// it is important to add new values at the end,
// as we may have iterators already running on the array
this._results.push(value);
this._onStateChanged.fire();
}
/**
* The values will be appended at the end.
*
* **NOTE** If `resolve()` or `reject()` have already been called, this method has no effect.
*/
private emitMany(values: T[]): void {
if (this._state !== AsyncIterableSourceState.Initial) {
return;
}
// it is important to add new values at the end,
// as we may have iterators already running on the array
this._results = this._results.concat(values);
this._onStateChanged.fire();
}
/**
* Calling `resolve()` will mark the result array as complete.
*
* **NOTE** `resolve()` must be called, otherwise all consumers of this iterable will hang indefinitely, similar to a non-resolved promise.
* **NOTE** If `resolve()` or `reject()` have already been called, this method has no effect.
*/
private resolve(): void {
if (this._state !== AsyncIterableSourceState.Initial) {
return;
}
this._state = AsyncIterableSourceState.DoneOK;
this._onStateChanged.fire();
}
/**
* Writing an error will permanently invalidate this iterable.
* The current users will receive an error thrown, as will all future users.
*
* **NOTE** If `resolve()` or `reject()` have already been called, this method has no effect.
*/
private reject(error: Error) {
if (this._state !== AsyncIterableSourceState.Initial) {
return;
}
this._state = AsyncIterableSourceState.DoneError;
this._error = error;
this._onStateChanged.fire();
}
}
export class CancelableAsyncIterableObject<T> extends AsyncIterableObject<T> {
constructor(
private readonly _source: CancellationTokenSource,
executor: AyncIterableExecutor<T>
) {
super(executor);
}
cancel(): void {
this._source.cancel();
}
}
export function createCancelableAsyncIterable<T>(callback: (token: CancellationToken) => AsyncIterable<T>): CancelableAsyncIterableObject<T> {
const source = new CancellationTokenSource();
const innerIterable = callback(source.token);
return new CancelableAsyncIterableObject<T>(source, async (emitter) => {
const subscription = source.token.onCancellationRequested(() => {
subscription.dispose();
source.dispose();
emitter.reject(new CancellationError());
});
try {
for await (const item of innerIterable) {
if (source.token.isCancellationRequested) {
// canceled in the meantime
return;
}
emitter.emitOne(item);
}
subscription.dispose();
source.dispose();
} catch (err) {
subscription.dispose();
source.dispose();
emitter.reject(err);
}
});
}
//#endregion
src/vs/base/common/buffer.ts
+152 -3
View File
@@ -14,6 +14,10 @@ let textDecoder: TextDecoder | null;
export class VSBuffer {
/**
* When running in a nodejs context, the backing store for the returned `VSBuffer` instance
* might use a nodejs Buffer allocated from node's Buffer pool, which is not transferrable.
*/
static alloc(byteLength: number): VSBuffer {
if (hasBuffer) {
return new VSBuffer(Buffer.allocUnsafe(byteLength));
@@ -22,6 +26,11 @@ export class VSBuffer {
}
}
/**
* When running in a nodejs context, if `actual` is not a nodejs Buffer, the backing store for
* the returned `VSBuffer` instance might use a nodejs Buffer allocated from node's Buffer pool,
* which is not transferrable.
*/
static wrap(actual: Uint8Array): VSBuffer {
if (hasBuffer && !(Buffer.isBuffer(actual))) {
// https://nodejs.org/dist/latest-v10.x/docs/api/buffer.html#buffer_class_method_buffer_from_arraybuffer_byteoffset_length
@@ -31,7 +40,11 @@ export class VSBuffer {
return new VSBuffer(actual);
}
static fromString(source: string, options?: { dontUseNodeBuffer?: boolean; }): VSBuffer {
/**
* When running in a nodejs context, the backing store for the returned `VSBuffer` instance
* might use a nodejs Buffer allocated from node's Buffer pool, which is not transferrable.
*/
static fromString(source: string, options?: { dontUseNodeBuffer?: boolean }): VSBuffer {
const dontUseNodeBuffer = options?.dontUseNodeBuffer || false;
if (!dontUseNodeBuffer && hasBuffer) {
return new VSBuffer(Buffer.from(source));
@@ -43,6 +56,22 @@ export class VSBuffer {
}
}
/**
* When running in a nodejs context, the backing store for the returned `VSBuffer` instance
* might use a nodejs Buffer allocated from node's Buffer pool, which is not transferrable.
*/
static fromByteArray(source: number[]): VSBuffer {
const result = VSBuffer.alloc(source.length);
for (let i = 0, len = source.length; i < len; i++) {
result.buffer[i] = source[i];
}
return result;
}
/**
* When running in a nodejs context, the backing store for the returned `VSBuffer` instance
* might use a nodejs Buffer allocated from node's Buffer pool, which is not transferrable.
*/
static concat(buffers: VSBuffer[], totalLength?: number): VSBuffer {
if (typeof totalLength === 'undefined') {
totalLength = 0;
@@ -70,6 +99,16 @@ export class VSBuffer {
this.byteLength = this.buffer.byteLength;
}
/**
* When running in a nodejs context, the backing store for the returned `VSBuffer` instance
* might use a nodejs Buffer allocated from node's Buffer pool, which is not transferrable.
*/
clone(): VSBuffer {
const result = VSBuffer.alloc(this.byteLength);
result.set(this);
return result;
}
toString(): string {
if (hasBuffer) {
return this.buffer.toString();
@@ -90,11 +129,20 @@ export class VSBuffer {
set(array: VSBuffer, offset?: number): void;
set(array: Uint8Array, offset?: number): void;
set(array: VSBuffer | Uint8Array, offset?: number): void {
set(array: ArrayBuffer, offset?: number): void;
set(array: ArrayBufferView, offset?: number): void;
set(array: VSBuffer | Uint8Array | ArrayBuffer | ArrayBufferView, offset?: number): void;
set(array: VSBuffer | Uint8Array | ArrayBuffer | ArrayBufferView, offset?: number): void {
if (array instanceof VSBuffer) {
this.buffer.set(array.buffer, offset);
} else {
} else if (array instanceof Uint8Array) {
this.buffer.set(array, offset);
} else if (array instanceof ArrayBuffer) {
this.buffer.set(new Uint8Array(array), offset);
} else if (ArrayBuffer.isView(array)) {
this.buffer.set(new Uint8Array(array.buffer, array.byteOffset, array.byteLength), offset);
} else {
throw new Error(`Unknown argument 'array'`);
}
}
@@ -236,3 +284,104 @@ export function prefixedBufferReadable(prefix: VSBuffer, readable: VSBufferReada
export function prefixedBufferStream(prefix: VSBuffer, stream: VSBufferReadableStream): VSBufferReadableStream {
return streams.prefixedStream(prefix, stream, chunks => VSBuffer.concat(chunks));
}
/** Decodes base64 to a uint8 array. URL-encoded and unpadded base64 is allowed. */
export function decodeBase64(encoded: string) {
let building = 0;
let remainder = 0;
let bufi = 0;
// The simpler way to do this is `Uint8Array.from(atob(str), c => c.charCodeAt(0))`,
// but that's about 10-20x slower than this function in current Chromium versions.
const buffer = new Uint8Array(Math.floor(encoded.length / 4 * 3));
const append = (value: number) => {
switch (remainder) {
case 3:
buffer[bufi++] = building | value;
remainder = 0;
break;
case 2:
buffer[bufi++] = building | (value >>> 2);
building = value << 6;
remainder = 3;
break;
case 1:
buffer[bufi++] = building | (value >>> 4);
building = value << 4;
remainder = 2;
break;
default:
building = value << 2;
remainder = 1;
}
};
for (let i = 0; i < encoded.length; i++) {
const code = encoded.charCodeAt(i);
// See https://datatracker.ietf.org/doc/html/rfc4648#section-4
// This branchy code is about 3x faster than an indexOf on a base64 char string.
if (code >= 65 && code <= 90) {
append(code - 65); // A-Z starts ranges from char code 65 to 90
} else if (code >= 97 && code <= 122) {
append(code - 97 + 26); // a-z starts ranges from char code 97 to 122, starting at byte 26
} else if (code >= 48 && code <= 57) {
append(code - 48 + 52); // 0-9 starts ranges from char code 48 to 58, starting at byte 52
} else if (code === 43 || code === 45) {
append(62); // "+" or "-" for URLS
} else if (code === 47 || code === 95) {
append(63); // "/" or "_" for URLS
} else if (code === 61) {
break; // "="
} else {
throw new SyntaxError(`Unexpected base64 character ${encoded[i]}`);
}
}
const unpadded = bufi;
while (remainder > 0) {
append(0);
}
// slice is needed to account for overestimation due to padding
return VSBuffer.wrap(buffer).slice(0, unpadded);
}
const base64Alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
const base64UrlSafeAlphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
/** Encodes a buffer to a base64 string. */
export function encodeBase64({ buffer }: VSBuffer, padded = true, urlSafe = false) {
const dictionary = urlSafe ? base64UrlSafeAlphabet : base64Alphabet;
let output = '';
const remainder = buffer.byteLength % 3;
let i = 0;
for (; i < buffer.byteLength - remainder; i += 3) {
const a = buffer[i + 0];
const b = buffer[i + 1];
const c = buffer[i + 2];
output += dictionary[a >>> 2];
output += dictionary[(a << 4 | b >>> 4) & 0b111111];
output += dictionary[(b << 2 | c >>> 6) & 0b111111];
output += dictionary[c & 0b111111];
}
if (remainder === 1) {
const a = buffer[i + 0];
output += dictionary[a >>> 2];
output += dictionary[(a << 4) & 0b111111];
if (padded) { output += '=='; }
} else if (remainder === 2) {
const a = buffer[i + 0];
const b = buffer[i + 1];
output += dictionary[a >>> 2];
output += dictionary[(a << 4 | b >>> 4) & 0b111111];
output += dictionary[(b << 2) & 0b111111];
if (padded) { output += '='; }
}
return output;
}
src/vs/base/common/cache.ts
+43
View File
@@ -35,3 +35,46 @@ export class Cache<T> {
return this.result;
}
}
/**
* Uses a LRU cache to make a given parametrized function cached.
* Caches just the last value.
* The key must be JSON serializable.
*/
export class LRUCachedFunction<TArg, TComputed> {
private lastCache: TComputed | undefined = undefined;
private lastArgKey: string | undefined = undefined;
constructor(private readonly fn: (arg: TArg) => TComputed) {
}
public get(arg: TArg): TComputed {
const key = JSON.stringify(arg);
if (this.lastArgKey !== key) {
this.lastArgKey = key;
this.lastCache = this.fn(arg);
}
return this.lastCache!;
}
}
/**
* Uses an unbounded cache (referential equality) to memoize the results of the given function.
*/
export class CachedFunction<TArg, TValue> {
private readonly _map = new Map<TArg, TValue>();
public get cachedValues(): ReadonlyMap<TArg, TValue> {
return this._map;
}
constructor(private readonly fn: (arg: TArg) => TValue) { }
public get(arg: TArg): TValue {
if (this._map.has(arg)) {
return this._map.get(arg)!;
}
const value = this.fn(arg);
this._map.set(arg, value);
return value;
}
}
src/vs/base/common/cancellation.ts
+2 -2
View File
@@ -46,12 +46,12 @@ export namespace CancellationToken {
}
export const None: CancellationToken = Object.freeze({
export const None = Object.freeze<CancellationToken>({
isCancellationRequested: false,
onCancellationRequested: Event.None
});
export const Cancelled: CancellationToken = Object.freeze({
export const Cancelled = Object.freeze<CancellationToken>({
isCancellationRequested: true,
onCancellationRequested: shortcutEvent
});
src/vs/base/common/codicon.ts
-135
View File
@@ -1,135 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { matchesFuzzy, IMatch } from 'vs/base/common/filters';
import { ltrim } from 'vs/base/common/strings';
export const codiconStartMarker = '$(';
export interface IParsedCodicons {
readonly text: string;
readonly codiconOffsets?: readonly number[];
}
export function parseCodicons(text: string): IParsedCodicons {
const firstCodiconIndex = text.indexOf(codiconStartMarker);
if (firstCodiconIndex === -1) {
return { text }; // return early if the word does not include an codicon
}
return doParseCodicons(text, firstCodiconIndex);
}
function doParseCodicons(text: string, firstCodiconIndex: number): IParsedCodicons {
const codiconOffsets: number[] = [];
let textWithoutCodicons: string = '';
function appendChars(chars: string) {
if (chars) {
textWithoutCodicons += chars;
for (const _ of chars) {
codiconOffsets.push(codiconsOffset); // make sure to fill in codicon offsets
}
}
}
let currentCodiconStart = -1;
let currentCodiconValue: string = '';
let codiconsOffset = 0;
let char: string;
let nextChar: string;
let offset = firstCodiconIndex;
const length = text.length;
// Append all characters until the first codicon
appendChars(text.substr(0, firstCodiconIndex));
// example: $(file-symlink-file) my cool $(other-codicon) entry
while (offset < length) {
char = text[offset];
nextChar = text[offset + 1];
// beginning of codicon: some value $( <--
if (char === codiconStartMarker[0] && nextChar === codiconStartMarker[1]) {
currentCodiconStart = offset;
// if we had a previous potential codicon value without
// the closing ')', it was actually not an codicon and
// so we have to add it to the actual value
appendChars(currentCodiconValue);
currentCodiconValue = codiconStartMarker;
offset++; // jump over '('
}
// end of codicon: some value $(some-codicon) <--
else if (char === ')' && currentCodiconStart !== -1) {
const currentCodiconLength = offset - currentCodiconStart + 1; // +1 to include the closing ')'
codiconsOffset += currentCodiconLength;
currentCodiconStart = -1;
currentCodiconValue = '';
}
// within codicon
else if (currentCodiconStart !== -1) {
// Make sure this is a real codicon name
if (/^[a-z0-9\-]$/i.test(char)) {
currentCodiconValue += char;
} else {
// This is not a real codicon, treat it as text
appendChars(currentCodiconValue);
currentCodiconStart = -1;
currentCodiconValue = '';
}
}
// any value outside of codicons
else {
appendChars(char);
}
offset++;
}
// if we had a previous potential codicon value without
// the closing ')', it was actually not an codicon and
// so we have to add it to the actual value
appendChars(currentCodiconValue);
return { text: textWithoutCodicons, codiconOffsets };
}
export function matchesFuzzyCodiconAware(query: string, target: IParsedCodicons, enableSeparateSubstringMatching = false): IMatch[] | null {
const { text, codiconOffsets } = target;
// Return early if there are no codicon markers in the word to match against
if (!codiconOffsets || codiconOffsets.length === 0) {
return matchesFuzzy(query, text, enableSeparateSubstringMatching);
}
// Trim the word to match against because it could have leading
// whitespace now if the word started with an codicon
const wordToMatchAgainstWithoutCodiconsTrimmed = ltrim(text, ' ');
const leadingWhitespaceOffset = text.length - wordToMatchAgainstWithoutCodiconsTrimmed.length;
// match on value without codicons
const matches = matchesFuzzy(query, wordToMatchAgainstWithoutCodiconsTrimmed, enableSeparateSubstringMatching);
// Map matches back to offsets with codicons and trimming
if (matches) {
for (const match of matches) {
const codiconOffset = codiconOffsets[match.start + leadingWhitespaceOffset] /* codicon offsets at index */ + leadingWhitespaceOffset /* overall leading whitespace offset */;
match.start += codiconOffset;
match.end += codiconOffset;
}
}
return matches;
}
src/vs/base/common/codicons.ts
+556 -527
View File
File diff suppressed because it is too large Load Diff
src/vs/base/common/collections.ts
+3 -3
View File
@@ -38,7 +38,7 @@ export function values<T>(from: IStringDictionary<T> | INumberDictionary<T>): T[
*/
export function forEach<T>(from: IStringDictionary<T>, callback: (entry: { key: string; value: T; }, remove: () => void) => any): void; // {{SQL CARBON EDIT}} @anthonydresser add hard typings
export function forEach<T>(from: INumberDictionary<T>, callback: (entry: { key: number; value: T; }, remove: () => void) => any): void;
export function forEach<T>(from: IStringDictionary<T> | INumberDictionary<T>, callback: (entry: { key: any; value: T; }, remove: () => void) => any): void {
export function forEach<T>(from: IStringDictionary<T> | INumberDictionary<T>, callback: (entry: { key: any; value: T }, remove: () => void) => any): void {
for (let key in from) {
if (hasOwnProperty.call(from, key)) {
const result = callback({ key: key, value: (from as any)[key] }, function () {
@@ -78,7 +78,7 @@ export function fromMap<T>(original: Map<string, T>): IStringDictionary<T> {
return result;
}
export function diffSets<T>(before: Set<T>, after: Set<T>): { removed: T[], added: T[] } {
export function diffSets<T>(before: Set<T>, after: Set<T>): { removed: T[]; added: T[] } {
const removed: T[] = [];
const added: T[] = [];
for (let element of before) {
@@ -94,7 +94,7 @@ export function diffSets<T>(before: Set<T>, after: Set<T>): { removed: T[], adde
return { removed, added };
}
export function diffMaps<K, V>(before: Map<K, V>, after: Map<K, V>): { removed: V[], added: V[] } {
export function diffMaps<K, V>(before: Map<K, V>, after: Map<K, V>): { removed: V[]; added: V[] } {
const removed: V[] = [];
const added: V[] = [];
for (let [index, value] of before) {
src/vs/base/common/comparers.ts
+1 -1
View File
@@ -11,7 +11,7 @@ import { sep } from 'vs/base/common/path';
// than it is to use String.prototype.localeCompare()
// A collator with numeric sorting enabled, and no sensitivity to case, accents or diacritics.
const intlFileNameCollatorBaseNumeric: IdleValue<{ collator: Intl.Collator, collatorIsNumeric: boolean }> = new IdleValue(() => {
const intlFileNameCollatorBaseNumeric: IdleValue<{ collator: Intl.Collator; collatorIsNumeric: boolean }> = new IdleValue(() => {
const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
return {
collator: collator,
src/vs/base/common/console.ts
+1 -1
View File
@@ -27,7 +27,7 @@ export function isRemoteConsoleLog(obj: any): obj is IRemoteConsoleLog {
return entry && typeof entry.type === 'string' && typeof entry.severity === 'string';
}
export function parse(entry: IRemoteConsoleLog): { args: any[], stack?: string } {
export function parse(entry: IRemoteConsoleLog): { args: any[]; stack?: string } {
const args: any[] = [];
let stack: string | undefined;
src/vs/base/common/date.ts
+109 -37
View File
@@ -12,7 +12,7 @@ const week = day * 7;
const month = day * 30;
const year = day * 365;
export function fromNow(date: number | Date, appendAgoLabel?: boolean): string {
export function fromNow(date: number | Date, appendAgoLabel?: boolean, useFullTimeWords?: boolean): string {
if (typeof date !== 'number') {
date = date.getTime();
}
@@ -31,39 +31,75 @@ export function fromNow(date: number | Date, appendAgoLabel?: boolean): string {
value = seconds;
if (appendAgoLabel) {
return value === 1
? localize('date.fromNow.seconds.singular.ago', '{0} sec ago', value)
: localize('date.fromNow.seconds.plural.ago', '{0} secs ago', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.seconds.singular.ago.fullWord', '{0} second ago', value)
: localize('date.fromNow.seconds.singular.ago', '{0} sec ago', value);
} else {
return useFullTimeWords
? localize('date.fromNow.seconds.plural.ago.fullWord', '{0} seconds ago', value)
: localize('date.fromNow.seconds.plural.ago', '{0} secs ago', value);
}
} else {
return value === 1
? localize('date.fromNow.seconds.singular', '{0} sec', value)
: localize('date.fromNow.seconds.plural', '{0} secs', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.seconds.singular.fullWord', '{0} second', value)
: localize('date.fromNow.seconds.singular', '{0} sec', value);
} else {
return useFullTimeWords
? localize('date.fromNow.seconds.plural.fullWord', '{0} seconds', value)
: localize('date.fromNow.seconds.plural', '{0} secs', value);
}
}
}
if (seconds < hour) {
value = Math.floor(seconds / minute);
if (appendAgoLabel) {
return value === 1
? localize('date.fromNow.minutes.singular.ago', '{0} min ago', value)
: localize('date.fromNow.minutes.plural.ago', '{0} mins ago', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.minutes.singular.ago.fullWord', '{0} minute ago', value)
: localize('date.fromNow.minutes.singular.ago', '{0} min ago', value);
} else {
return useFullTimeWords
? localize('date.fromNow.minutes.plural.ago.fullWord', '{0} minutes ago', value)
: localize('date.fromNow.minutes.plural.ago', '{0} mins ago', value);
}
} else {
return value === 1
? localize('date.fromNow.minutes.singular', '{0} min', value)
: localize('date.fromNow.minutes.plural', '{0} mins', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.minutes.singular.fullWord', '{0} minute', value)
: localize('date.fromNow.minutes.singular', '{0} min', value);
} else {
return useFullTimeWords
? localize('date.fromNow.minutes.plural.fullWord', '{0} minutes', value)
: localize('date.fromNow.minutes.plural', '{0} mins', value);
}
}
}
if (seconds < day) {
value = Math.floor(seconds / hour);
if (appendAgoLabel) {
return value === 1
? localize('date.fromNow.hours.singular.ago', '{0} hr ago', value)
: localize('date.fromNow.hours.plural.ago', '{0} hrs ago', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.hours.singular.ago.fullWord', '{0} hour ago', value)
: localize('date.fromNow.hours.singular.ago', '{0} hr ago', value);
} else {
return useFullTimeWords
? localize('date.fromNow.hours.plural.ago.fullWord', '{0} hours ago', value)
: localize('date.fromNow.hours.plural.ago', '{0} hrs ago', value);
}
} else {
return value === 1
? localize('date.fromNow.hours.singular', '{0} hr', value)
: localize('date.fromNow.hours.plural', '{0} hrs', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.hours.singular.fullWord', '{0} hour', value)
: localize('date.fromNow.hours.singular', '{0} hr', value);
} else {
return useFullTimeWords
? localize('date.fromNow.hours.plural.fullWord', '{0} hours', value)
: localize('date.fromNow.hours.plural', '{0} hrs', value);
}
}
}
@@ -83,38 +119,74 @@ export function fromNow(date: number | Date, appendAgoLabel?: boolean): string {
if (seconds < month) {
value = Math.floor(seconds / week);
if (appendAgoLabel) {
return value === 1
? localize('date.fromNow.weeks.singular.ago', '{0} wk ago', value)
: localize('date.fromNow.weeks.plural.ago', '{0} wks ago', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.weeks.singular.ago.fullWord', '{0} week ago', value)
: localize('date.fromNow.weeks.singular.ago', '{0} wk ago', value);
} else {
return useFullTimeWords
? localize('date.fromNow.weeks.plural.ago.fullWord', '{0} weeks ago', value)
: localize('date.fromNow.weeks.plural.ago', '{0} wks ago', value);
}
} else {
return value === 1
? localize('date.fromNow.weeks.singular', '{0} wk', value)
: localize('date.fromNow.weeks.plural', '{0} wks', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.weeks.singular.fullWord', '{0} week', value)
: localize('date.fromNow.weeks.singular', '{0} wk', value);
} else {
return useFullTimeWords
? localize('date.fromNow.weeks.plural.fullWord', '{0} weeks', value)
: localize('date.fromNow.weeks.plural', '{0} wks', value);
}
}
}
if (seconds < year) {
value = Math.floor(seconds / month);
if (appendAgoLabel) {
return value === 1
? localize('date.fromNow.months.singular.ago', '{0} mo ago', value)
: localize('date.fromNow.months.plural.ago', '{0} mos ago', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.months.singular.ago.fullWord', '{0} month ago', value)
: localize('date.fromNow.months.singular.ago', '{0} mo ago', value);
} else {
return useFullTimeWords
? localize('date.fromNow.months.plural.ago.fullWord', '{0} months ago', value)
: localize('date.fromNow.months.plural.ago', '{0} mos ago', value);
}
} else {
return value === 1
? localize('date.fromNow.months.singular', '{0} mo', value)
: localize('date.fromNow.months.plural', '{0} mos', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.months.singular.fullWord', '{0} month', value)
: localize('date.fromNow.months.singular', '{0} mo', value);
} else {
return useFullTimeWords
? localize('date.fromNow.months.plural.fullWord', '{0} months', value)
: localize('date.fromNow.months.plural', '{0} mos', value);
}
}
}
value = Math.floor(seconds / year);
if (appendAgoLabel) {
return value === 1
? localize('date.fromNow.years.singular.ago', '{0} yr ago', value)
: localize('date.fromNow.years.plural.ago', '{0} yrs ago', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.years.singular.ago.fullWord', '{0} year ago', value)
: localize('date.fromNow.years.singular.ago', '{0} yr ago', value);
} else {
return useFullTimeWords
? localize('date.fromNow.years.plural.ago.fullWord', '{0} years ago', value)
: localize('date.fromNow.years.plural.ago', '{0} yrs ago', value);
}
} else {
return value === 1
? localize('date.fromNow.years.singular', '{0} yr', value)
: localize('date.fromNow.years.plural', '{0} yrs', value);
if (value === 1) {
return useFullTimeWords
? localize('date.fromNow.years.singular.fullWord', '{0} year', value)
: localize('date.fromNow.years.singular', '{0} yr', value);
} else {
return useFullTimeWords
? localize('date.fromNow.years.plural.fullWord', '{0} years', value)
: localize('date.fromNow.years.plural', '{0} yrs', value);
}
}
}
src/vs/base/common/errorMessage.ts
+25
View File
@@ -6,6 +6,7 @@
import * as arrays from 'vs/base/common/arrays';
import * as types from 'vs/base/common/types';
import * as nls from 'vs/nls';
import { IAction } from 'vs/base/common/actions';
function exceptionToErrorMessage(exception: any, verbose: boolean): string {
if (verbose && (exception.stack || exception.stacktrace)) {
@@ -81,3 +82,27 @@ export function toErrorMessage(error: any = null, verbose: boolean = false): str
return nls.localize('error.defaultMessage', "An unknown error occurred. Please consult the log for more details.");
}
export interface IErrorWithActions extends Error {
actions: IAction[];
}
export function isErrorWithActions(obj: unknown): obj is IErrorWithActions {
const candidate = obj as IErrorWithActions | undefined;
return candidate instanceof Error && Array.isArray(candidate.actions);
}
export function createErrorWithActions(messageOrError: string | Error, actions: IAction[]): IErrorWithActions {
let error: IErrorWithActions;
if (typeof messageOrError === 'string') {
error = new Error(messageOrError) as IErrorWithActions;
} else {
error = messageOrError as IErrorWithActions;
}
error.actions = actions;
return error;
}
src/vs/base/common/errors.ts
+41 -23
View File
@@ -3,8 +3,6 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { IAction } from 'vs/base/common/actions';
export interface ErrorListenerCallback {
(error: any): void;
}
@@ -78,7 +76,7 @@ export function setUnexpectedErrorHandler(newUnexpectedErrorHandler: (e: any) =>
export function onUnexpectedError(e: any): undefined {
// ignore errors from cancelled promises
if (!isPromiseCanceledError(e)) {
if (!isCancellationError(e)) {
errorHandler.onUnexpectedError(e);
}
return undefined;
@@ -86,7 +84,7 @@ export function onUnexpectedError(e: any): undefined {
export function onUnexpectedExternalError(e: any): undefined {
// ignore errors from cancelled promises
if (!isPromiseCanceledError(e)) {
if (!isCancellationError(e)) {
errorHandler.onUnexpectedExternalError(e);
}
return undefined;
@@ -143,7 +141,10 @@ const canceledName = 'Canceled';
/**
* Checks if the given error is a promise in canceled state
*/
export function isPromiseCanceledError(error: any): boolean {
export function isCancellationError(error: any): boolean {
if (error instanceof CancellationError) {
return true;
}
return error instanceof Error && error.name === canceledName && error.message === canceledName;
}
@@ -157,7 +158,7 @@ export class CancellationError extends Error {
}
/**
* Returns an error that signals cancellation.
* @deprecated use {@link CancellationError `new CancellationError()`} instead
*/
export function canceled(): Error {
const error = new Error(canceledName);
@@ -231,26 +232,43 @@ export class ExpectedError extends Error {
readonly isExpected = true;
}
export interface IErrorOptions {
actions?: readonly IAction[];
}
/**
* Error that when thrown won't be logged in telemetry as an unhandled error.
*/
export class ErrorNoTelemetry extends Error {
export interface IErrorWithActions {
actions?: readonly IAction[];
}
public static fromError(err: any): ErrorNoTelemetry {
if (err && err instanceof ErrorNoTelemetry) {
return err;
}
export function isErrorWithActions(obj: unknown): obj is IErrorWithActions {
const candidate = obj as IErrorWithActions | undefined;
if (err && err instanceof Error) {
const result = new ErrorNoTelemetry();
result.name = err.name;
result.message = err.message;
result.stack = err.stack;
return result;
}
return candidate instanceof Error && Array.isArray(candidate.actions);
}
export function createErrorWithActions(message: string, options: IErrorOptions = Object.create(null)): Error & IErrorWithActions {
const result = new Error(message);
if (options.actions) {
(result as IErrorWithActions).actions = options.actions;
return new ErrorNoTelemetry(err);
}
return result;
readonly logTelemetry = false;
}
/**
* This error indicates a bug.
* Do not throw this for invalid user input.
* Only catch this error to recover gracefully from bugs.
*/
export class BugIndicatingError extends Error {
constructor(message: string) {
super(message);
Object.setPrototypeOf(this, BugIndicatingError.prototype);
// Because we know for sure only buggy code throws this,
// we definitely want to break here and fix the bug.
// eslint-disable-next-line no-debugger
debugger;
}
}
src/vs/base/common/event.ts
+300 -96
View File
@@ -6,10 +6,25 @@
import { CancellationToken } from 'vs/base/common/cancellation';
import { onUnexpectedError } from 'vs/base/common/errors';
import { once as onceFn } from 'vs/base/common/functional';
import { combinedDisposable, Disposable, DisposableStore, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
import { combinedDisposable, Disposable, DisposableStore, IDisposable, SafeDisposable, toDisposable } from 'vs/base/common/lifecycle';
import { LinkedList } from 'vs/base/common/linkedList';
import { StopWatch } from 'vs/base/common/stopwatch';
// -----------------------------------------------------------------------------------------------------------------------
// Uncomment the next line to print warnings whenever an emitter with listeners is disposed. That is a sign of code smell.
// -----------------------------------------------------------------------------------------------------------------------
let _enableDisposeWithListenerWarning = false;
// _enableDisposeWithListenerWarning = Boolean("TRUE"); // causes a linter warning so that it cannot be pushed
// -----------------------------------------------------------------------------------------------------------------------
// Uncomment the next line to print warnings whenever a snapshotted event is used repeatedly without cleanup.
// See https://github.com/microsoft/vscode/issues/142851
// -----------------------------------------------------------------------------------------------------------------------
let _enableSnapshotPotentialLeakWarning = false;
// _enableSnapshotPotentialLeakWarning = Boolean("TRUE"); // causes a linter warning so that it cannot be pushed
/**
* To an event a function with one or zero parameters
* can be subscribed. The event is the subscriber function itself.
@@ -21,6 +36,23 @@ export interface Event<T> {
export namespace Event {
export const None: Event<any> = () => Disposable.None;
function _addLeakageTraceLogic(options: EmitterOptions) {
if (_enableSnapshotPotentialLeakWarning) {
const { onListenerDidAdd: origListenerDidAdd } = options;
const stack = Stacktrace.create();
let count = 0;
options.onListenerDidAdd = () => {
if (++count === 2) {
console.warn('snapshotted emitter LIKELY used public and SHOULD HAVE BEEN created with DisposableStore. snapshotted here');
stack.print();
}
origListenerDidAdd?.();
};
}
}
/**
* Given an event, returns another event which only fires once.
*/
@@ -50,27 +82,33 @@ export namespace Event {
}
/**
* @deprecated DO NOT use, this leaks memory
* *NOTE* that this function returns an `Event` and it MUST be called with a `DisposableStore` whenever the returned
* event is accessible to "third parties", e.g the event is a public property. Otherwise a leaked listener on the
* returned event causes this utility to leak a listener on the original event.
*/
export function map<I, O>(event: Event<I>, map: (i: I) => O): Event<O> {
return snapshot((listener, thisArgs = null, disposables?) => event(i => listener.call(thisArgs, map(i)), null, disposables));
export function map<I, O>(event: Event<I>, map: (i: I) => O, disposable?: DisposableStore): Event<O> {
return snapshot((listener, thisArgs = null, disposables?) => event(i => listener.call(thisArgs, map(i)), null, disposables), disposable);
}
/**
* @deprecated DO NOT use, this leaks memory
* *NOTE* that this function returns an `Event` and it MUST be called with a `DisposableStore` whenever the returned
* event is accessible to "third parties", e.g the event is a public property. Otherwise a leaked listener on the
* returned event causes this utility to leak a listener on the original event.
*/
export function forEach<I>(event: Event<I>, each: (i: I) => void): Event<I> {
return snapshot((listener, thisArgs = null, disposables?) => event(i => { each(i); listener.call(thisArgs, i); }, null, disposables));
export function forEach<I>(event: Event<I>, each: (i: I) => void, disposable?: DisposableStore): Event<I> {
return snapshot((listener, thisArgs = null, disposables?) => event(i => { each(i); listener.call(thisArgs, i); }, null, disposables), disposable);
}
/**
* @deprecated DO NOT use, this leaks memory
* *NOTE* that this function returns an `Event` and it MUST be called with a `DisposableStore` whenever the returned
* event is accessible to "third parties", e.g the event is a public property. Otherwise a leaked listener on the
* returned event causes this utility to leak a listener on the original event.
*/
export function filter<T, U>(event: Event<T | U>, filter: (e: T | U) => e is T): Event<T>;
export function filter<T>(event: Event<T>, filter: (e: T) => boolean): Event<T>;
export function filter<T, R>(event: Event<T | R>, filter: (e: T | R) => e is R): Event<R>;
export function filter<T>(event: Event<T>, filter: (e: T) => boolean): Event<T> {
return snapshot((listener, thisArgs = null, disposables?) => event(e => filter(e) && listener.call(thisArgs, e), null, disposables));
export function filter<T, U>(event: Event<T | U>, filter: (e: T | U) => e is T, disposable?: DisposableStore): Event<T>;
export function filter<T>(event: Event<T>, filter: (e: T) => boolean, disposable?: DisposableStore): Event<T>;
export function filter<T, R>(event: Event<T | R>, filter: (e: T | R) => e is R, disposable?: DisposableStore): Event<R>;
export function filter<T>(event: Event<T>, filter: (e: T) => boolean, disposable?: DisposableStore): Event<T> {
return snapshot((listener, thisArgs = null, disposables?) => event(e => filter(e) && listener.call(thisArgs, e), null, disposables), disposable);
}
/**
@@ -91,53 +129,65 @@ export namespace Event {
}
/**
* @deprecated DO NOT use, this leaks memory
* *NOTE* that this function returns an `Event` and it MUST be called with a `DisposableStore` whenever the returned
* event is accessible to "third parties", e.g the event is a public property. Otherwise a leaked listener on the
* returned event causes this utility to leak a listener on the original event.
*/
export function reduce<I, O>(event: Event<I>, merge: (last: O | undefined, event: I) => O, initial?: O): Event<O> {
export function reduce<I, O>(event: Event<I>, merge: (last: O | undefined, event: I) => O, initial?: O, disposable?: DisposableStore): Event<O> {
let output: O | undefined = initial;
return map<I, O>(event, e => {
output = merge(output, e);
return output;
});
}, disposable);
}
/**
* @deprecated DO NOT use, this leaks memory
*/
function snapshot<T>(event: Event<T>): Event<T> {
function snapshot<T>(event: Event<T>, disposable: DisposableStore | undefined): Event<T> {
let listener: IDisposable;
const emitter = new Emitter<T>({
const options: EmitterOptions | undefined = {
onFirstListenerAdd() {
listener = event(emitter.fire, emitter);
},
onLastListenerRemove() {
listener.dispose();
}
});
};
if (!disposable) {
_addLeakageTraceLogic(options);
}
const emitter = new Emitter<T>(options);
if (disposable) {
disposable.add(emitter);
}
return emitter.event;
}
/**
* @deprecated DO NOT use, this leaks memory
* *NOTE* that this function returns an `Event` and it MUST be called with a `DisposableStore` whenever the returned
* event is accessible to "third parties", e.g the event is a public property. Otherwise a leaked listener on the
* returned event causes this utility to leak a listener on the original event.
*/
export function debounce<T>(event: Event<T>, merge: (last: T | undefined, event: T) => T, delay?: number, leading?: boolean, leakWarningThreshold?: number): Event<T>;
export function debounce<T>(event: Event<T>, merge: (last: T | undefined, event: T) => T, delay?: number, leading?: boolean, leakWarningThreshold?: number, disposable?: DisposableStore): Event<T>;
/**
* @deprecated DO NOT use, this leaks memory
* *NOTE* that this function returns an `Event` and it MUST be called with a `DisposableStore` whenever the returned
* event is accessible to "third parties", e.g the event is a public property. Otherwise a leaked listener on the
* returned event causes this utility to leak a listener on the original event.
*/
export function debounce<I, O>(event: Event<I>, merge: (last: O | undefined, event: I) => O, delay?: number, leading?: boolean, leakWarningThreshold?: number): Event<O>;
/**
* @deprecated DO NOT use, this leaks memory
*/
export function debounce<I, O>(event: Event<I>, merge: (last: O | undefined, event: I) => O, delay: number = 100, leading = false, leakWarningThreshold?: number): Event<O> {
export function debounce<I, O>(event: Event<I>, merge: (last: O | undefined, event: I) => O, delay?: number, leading?: boolean, leakWarningThreshold?: number, disposable?: DisposableStore): Event<O>;
export function debounce<I, O>(event: Event<I>, merge: (last: O | undefined, event: I) => O, delay: number = 100, leading = false, leakWarningThreshold?: number, disposable?: DisposableStore): Event<O> {
let subscription: IDisposable;
let output: O | undefined = undefined;
let handle: any = undefined;
let numDebouncedCalls = 0;
const emitter = new Emitter<O>({
const options: EmitterOptions | undefined = {
leakWarningThreshold,
onFirstListenerAdd() {
subscription = event(cur => {
@@ -165,15 +215,27 @@ export namespace Event {
onLastListenerRemove() {
subscription.dispose();
}
});
};
if (!disposable) {
_addLeakageTraceLogic(options);
}
const emitter = new Emitter<O>(options);
if (disposable) {
disposable.add(emitter);
}
return emitter.event;
}
/**
* @deprecated DO NOT use, this leaks memory
* *NOTE* that this function returns an `Event` and it MUST be called with a `DisposableStore` whenever the returned
* event is accessible to "third parties", e.g the event is a public property. Otherwise a leaked listener on the
* returned event causes this utility to leak a listener on the original event.
*/
export function latch<T>(event: Event<T>, equals: (a: T, b: T) => boolean = (a, b) => a === b): Event<T> {
export function latch<T>(event: Event<T>, equals: (a: T, b: T) => boolean = (a, b) => a === b, disposable?: DisposableStore): Event<T> {
let firstCall = true;
let cache: T;
@@ -182,23 +244,27 @@ export namespace Event {
firstCall = false;
cache = value;
return shouldEmit;
});
}, disposable);
}
/**
* @deprecated DO NOT use, this leaks memory
* *NOTE* that this function returns an `Event` and it MUST be called with a `DisposableStore` whenever the returned
* event is accessible to "third parties", e.g the event is a public property. Otherwise a leaked listener on the
* returned event causes this utility to leak a listener on the original event.
*/
export function split<T, U>(event: Event<T | U>, isT: (e: T | U) => e is T): [Event<T>, Event<U>] {
export function split<T, U>(event: Event<T | U>, isT: (e: T | U) => e is T, disposable?: DisposableStore): [Event<T>, Event<U>] {
return [
Event.filter(event, isT),
Event.filter(event, e => !isT(e)) as Event<U>,
Event.filter(event, isT, disposable),
Event.filter(event, e => !isT(e), disposable) as Event<U>,
];
}
/**
* @deprecated DO NOT use, this leaks memory
* *NOTE* that this function returns an `Event` and it MUST be called with a `DisposableStore` whenever the returned
* event is accessible to "third parties", e.g the event is a public property. Otherwise a leaked listener on the
* returned event causes this utility to leak a listener on the original event.
*/
export function buffer<T>(event: Event<T>, nextTick = false, _buffer: T[] = []): Event<T> {
export function buffer<T>(event: Event<T>, flushAfterTimeout = false, _buffer: T[] = []): Event<T> {
let buffer: T[] | null = _buffer.slice();
let listener: IDisposable | null = event(e => {
@@ -225,7 +291,7 @@ export namespace Event {
onFirstListenerDidAdd() {
if (buffer) {
if (nextTick) {
if (flushAfterTimeout) {
setTimeout(flush);
} else {
flush();
@@ -245,6 +311,7 @@ export namespace Event {
}
export interface IChainableEvent<T> {
event: Event<T>;
map<O>(fn: (i: T) => O): IChainableEvent<O>;
forEach(fn: (i: T) => void): IChainableEvent<T>;
@@ -337,9 +404,29 @@ export namespace Event {
export function toPromise<T>(event: Event<T>): Promise<T> {
return new Promise(resolve => once(event)(resolve));
}
}
export type Listener<T> = [(e: T) => void, any] | ((e: T) => void);
export function runAndSubscribe<T>(event: Event<T>, handler: (e: T | undefined) => any): IDisposable {
handler(undefined);
return event(e => handler(e));
}
export function runAndSubscribeWithStore<T>(event: Event<T>, handler: (e: T | undefined, disposableStore: DisposableStore) => any): IDisposable {
let store: DisposableStore | null = null;
function run(e: T | undefined) {
store?.dispose();
store = new DisposableStore();
handler(e, store);
}
run(undefined);
const disposable = event(e => run(e));
return toDisposable(() => {
disposable.dispose();
store?.dispose();
});
}
}
export interface EmitterOptions {
onFirstListenerAdd?: Function;
@@ -348,8 +435,14 @@ export interface EmitterOptions {
onLastListenerRemove?: Function;
leakWarningThreshold?: number;
/**
* Pass in a delivery queue, which is useful for ensuring
* in order event delivery across multiple emitters.
*/
deliveryQueue?: EventDeliveryQueue;
/** ONLY enable this during development */
_profName?: string
_profName?: string;
}
@@ -411,7 +504,7 @@ class LeakageMonitor {
}
}
check(listenerCount: number): undefined | (() => void) {
check(stack: Stacktrace, listenerCount: number): undefined | (() => void) {
let threshold = _globalLeakWarningThreshold;
if (typeof this.customThreshold === 'number') {
@@ -425,9 +518,8 @@ class LeakageMonitor {
if (!this._stacks) {
this._stacks = new Map();
}
const stack = new Error().stack!.split('\n').slice(3).join('\n');
const count = (this._stacks.get(stack) || 0);
this._stacks.set(stack, count + 1);
const count = (this._stacks.get(stack.value) || 0);
this._stacks.set(stack.value, count + 1);
this._warnCountdown -= 1;
if (this._warnCountdown <= 0) {
@@ -450,12 +542,40 @@ class LeakageMonitor {
}
return () => {
const count = (this._stacks!.get(stack) || 0);
this._stacks!.set(stack, count - 1);
const count = (this._stacks!.get(stack.value) || 0);
this._stacks!.set(stack.value, count - 1);
};
}
}
class Stacktrace {
static create() {
return new Stacktrace(new Error().stack ?? '');
}
private constructor(readonly value: string) { }
print() {
console.warn(this.value.split('\n').slice(2).join('\n'));
}
}
class Listener<T> {
readonly subscription = new SafeDisposable();
constructor(
readonly callback: (e: T) => void,
readonly callbackThis: any | undefined,
readonly stack: Stacktrace | undefined
) { }
invoke(e: T) {
this.callback.call(this.callbackThis, e);
}
}
/**
* The Emitter can be used to expose an Event to the public
* to fire it from the insides.
@@ -478,18 +598,55 @@ class LeakageMonitor {
}
*/
export class Emitter<T> {
private readonly _options?: EmitterOptions;
private readonly _leakageMon?: LeakageMonitor;
private readonly _perfMon?: EventProfiling;
private _disposed: boolean = false;
private _event?: Event<T>;
private _deliveryQueue?: LinkedList<[Listener<T>, T]>;
private _deliveryQueue?: EventDeliveryQueue;
protected _listeners?: LinkedList<Listener<T>>;
constructor(options?: EmitterOptions) {
this._options = options;
this._leakageMon = _globalLeakWarningThreshold > 0 ? new LeakageMonitor(this._options && this._options.leakWarningThreshold) : undefined;
this._perfMon = this._options?._profName ? new EventProfiling(this._options._profName) : undefined;
this._deliveryQueue = this._options?.deliveryQueue;
}
dispose() {
if (!this._disposed) {
this._disposed = true;
// It is bad to have listeners at the time of disposing an emitter, it is worst to have listeners keep the emitter
// alive via the reference that's embedded in their disposables. Therefore we loop over all remaining listeners and
// unset their subscriptions/disposables. Looping and blaming remaining listeners is done on next tick because the
// the following programming pattern is very popular:
//
// const someModel = this._disposables.add(new ModelObject()); // (1) create and register model
// this._disposables.add(someModel.onDidChange(() => { ... }); // (2) subscribe and register model-event listener
// ...later...
// this._disposables.dispose(); disposes (1) then (2): don't warn after (1) but after the "overall dispose" is done
if (this._listeners) {
if (_enableDisposeWithListenerWarning) {
const listeners = Array.from(this._listeners);
queueMicrotask(() => {
for (const listener of listeners) {
if (listener.subscription.isset()) {
listener.subscription.unset();
listener.stack?.print();
}
}
});
}
this._listeners.clear();
}
this._deliveryQueue?.clear(this);
this._options?.onLastListenerRemove?.();
this._leakageMon?.dispose();
}
}
/**
@@ -498,36 +655,46 @@ export class Emitter<T> {
*/
get event(): Event<T> {
if (!this._event) {
this._event = (listener: (e: T) => any, thisArgs?: any, disposables?: IDisposable[] | DisposableStore) => {
this._event = (callback: (e: T) => any, thisArgs?: any, disposables?: IDisposable[] | DisposableStore) => {
if (!this._listeners) {
this._listeners = new LinkedList();
}
const firstListener = this._listeners.isEmpty();
if (firstListener && this._options && this._options.onFirstListenerAdd) {
if (firstListener && this._options?.onFirstListenerAdd) {
this._options.onFirstListenerAdd(this);
}
const remove = this._listeners.push(!thisArgs ? listener : [listener, thisArgs]);
let removeMonitor: Function | undefined;
let stack: Stacktrace | undefined;
if (this._leakageMon && this._listeners.size >= 30) {
// check and record this emitter for potential leakage
stack = Stacktrace.create();
removeMonitor = this._leakageMon.check(stack, this._listeners.size + 1);
}
if (firstListener && this._options && this._options.onFirstListenerDidAdd) {
if (_enableDisposeWithListenerWarning) {
stack = stack ?? Stacktrace.create();
}
const listener = new Listener(callback, thisArgs, stack);
const removeListener = this._listeners.push(listener);
if (firstListener && this._options?.onFirstListenerDidAdd) {
this._options.onFirstListenerDidAdd(this);
}
if (this._options && this._options.onListenerDidAdd) {
this._options.onListenerDidAdd(this, listener, thisArgs);
if (this._options?.onListenerDidAdd) {
this._options.onListenerDidAdd(this, callback, thisArgs);
}
// check and record this emitter for potential leakage
const removeMonitor = this._leakageMon?.check(this._listeners.size);
const result = toDisposable(() => {
const result = listener.subscription.set(() => {
if (removeMonitor) {
removeMonitor();
}
if (!this._disposed) {
remove();
removeListener();
if (this._options && this._options.onLastListenerRemove) {
const hasListeners = (this._listeners && !this._listeners.isEmpty());
if (!hasListeners) {
@@ -560,54 +727,94 @@ export class Emitter<T> {
// the driver of this
if (!this._deliveryQueue) {
this._deliveryQueue = new LinkedList();
this._deliveryQueue = new PrivateEventDeliveryQueue();
}
for (let listener of this._listeners) {
this._deliveryQueue.push([listener, event]);
this._deliveryQueue.push(this, listener, event);
}
// start/stop performance insight collection
this._perfMon?.start(this._deliveryQueue.size);
while (this._deliveryQueue.size > 0) {
const [listener, event] = this._deliveryQueue.shift()!;
try {
if (typeof listener === 'function') {
listener.call(undefined, event);
} else {
listener[0].call(listener[1], event);
}
} catch (e) {
onUnexpectedError(e);
}
}
this._deliveryQueue.deliver();
this._perfMon?.stop();
}
}
dispose() {
if (!this._disposed) {
this._disposed = true;
this._listeners?.clear();
this._deliveryQueue?.clear();
this._options?.onLastListenerRemove?.();
this._leakageMon?.dispose();
hasListeners(): boolean {
if (!this._listeners) {
return false;
}
return (!this._listeners.isEmpty());
}
}
export class EventDeliveryQueue {
protected _queue = new LinkedList<EventDeliveryQueueElement>();
get size(): number {
return this._queue.size;
}
push<T>(emitter: Emitter<T>, listener: Listener<T>, event: T): void {
this._queue.push(new EventDeliveryQueueElement(emitter, listener, event));
}
clear<T>(emitter: Emitter<T>): void {
const newQueue = new LinkedList<EventDeliveryQueueElement>();
for (const element of this._queue) {
if (element.emitter !== emitter) {
newQueue.push(element);
}
}
this._queue = newQueue;
}
deliver(): void {
while (this._queue.size > 0) {
const element = this._queue.shift()!;
try {
element.listener.invoke(element.event);
} catch (e) {
onUnexpectedError(e);
}
}
}
}
/**
* An `EventDeliveryQueue` that is guaranteed to be used by a single `Emitter`.
*/
class PrivateEventDeliveryQueue extends EventDeliveryQueue {
override clear<T>(emitter: Emitter<T>): void {
// Here we can just clear the entire linked list because
// all elements are guaranteed to belong to this emitter
this._queue.clear();
}
}
class EventDeliveryQueueElement<T = any> {
constructor(
readonly emitter: Emitter<T>,
readonly listener: Listener<T>,
readonly event: T
) { }
}
export interface IWaitUntil {
token: CancellationToken;
waitUntil(thenable: Promise<unknown>): void;
}
export type IWaitUntilData<T> = Omit<Omit<T, 'waitUntil'>, 'token'>;
export class AsyncEmitter<T extends IWaitUntil> extends Emitter<T> {
private _asyncDeliveryQueue?: LinkedList<[Listener<T>, Omit<T, 'waitUntil'>]>;
private _asyncDeliveryQueue?: LinkedList<[Listener<T>, IWaitUntilData<T>]>;
async fireAsync(data: Omit<T, 'waitUntil'>, token: CancellationToken, promiseJoin?: (p: Promise<unknown>, listener: Function) => Promise<unknown>): Promise<void> {
async fireAsync(data: IWaitUntilData<T>, token: CancellationToken, promiseJoin?: (p: Promise<unknown>, listener: Function) => Promise<unknown>): Promise<void> {
if (!this._listeners) {
return;
}
@@ -627,23 +834,20 @@ export class AsyncEmitter<T extends IWaitUntil> extends Emitter<T> {
const event = <T>{
...data,
token,
waitUntil: (p: Promise<unknown>): void => {
if (Object.isFrozen(thenables)) {
throw new Error('waitUntil can NOT be called asynchronous');
}
if (promiseJoin) {
p = promiseJoin(p, typeof listener === 'function' ? listener : listener[0]);
p = promiseJoin(p, listener.callback);
}
thenables.push(p);
}
};
try {
if (typeof listener === 'function') {
listener.call(undefined, event);
} else {
listener[0].call(listener[1], event);
}
listener.invoke(event);
} catch (e) {
onUnexpectedError(e);
continue;
@@ -715,7 +919,7 @@ export class DebounceEmitter<T> extends PauseableEmitter<T> {
private readonly _delay: number;
private _handle: any | undefined;
constructor(options: EmitterOptions & { merge: (input: T[]) => T, delay?: number }) {
constructor(options: EmitterOptions & { merge: (input: T[]) => T; delay?: number }) {
super(options);
this._delay = options.delay ?? 100;
}
@@ -763,7 +967,7 @@ export class EventMultiplexer<T> implements IDisposable {
private readonly emitter: Emitter<T>;
private hasListeners = false;
private events: { event: Event<T>; listener: IDisposable | null; }[] = [];
private events: { event: Event<T>; listener: IDisposable | null }[] = [];
constructor() {
this.emitter = new Emitter<T>({
@@ -806,11 +1010,11 @@ export class EventMultiplexer<T> implements IDisposable {
this.events.forEach(e => this.unhook(e));
}
private hook(e: { event: Event<T>; listener: IDisposable | null; }): void {
private hook(e: { event: Event<T>; listener: IDisposable | null }): void {
e.listener = e.event(r => this.emitter.fire(r));
}
private unhook(e: { event: Event<T>; listener: IDisposable | null; }): void {
private unhook(e: { event: Event<T>; listener: IDisposable | null }): void {
if (e.listener) {
e.listener.dispose();
}
src/vs/base/common/extpath.ts
+43 -4
View File
@@ -133,10 +133,13 @@ export function isUNC(path: string): boolean {
if (code !== CharCode.Backslash) {
return false;
}
code = path.charCodeAt(1);
if (code !== CharCode.Backslash) {
return false;
}
let pos = 2;
const start = pos;
for (; pos < path.length; pos++) {
@@ -145,13 +148,17 @@ export function isUNC(path: string): boolean {
break;
}
}
if (start === pos) {
return false;
}
code = path.charCodeAt(pos + 1);
if (isNaN(code) || code === CharCode.Backslash) {
return false;
}
return true;
}
@@ -194,6 +201,11 @@ export function isValidBasename(name: string | null | undefined, isWindowsOS: bo
return true;
}
/**
* @deprecated please use `IUriIdentityService.extUri.isEqual` instead. If you are
* in a context without services, consider to pass down the `extUri` from the outside
* or use `extUriBiasedIgnorePathCase` if you know what you are doing.
*/
export function isEqual(pathA: string, pathB: string, ignoreCase?: boolean): boolean {
const identityEquals = (pathA === pathB);
if (!ignoreCase || identityEquals) {
@@ -207,6 +219,11 @@ export function isEqual(pathA: string, pathB: string, ignoreCase?: boolean): boo
return equalsIgnoreCase(pathA, pathB);
}
/**
* @deprecated please use `IUriIdentityService.extUri.isEqualOrParent` instead. If
* you are in a context without services, consider to pass down the `extUri` from the
* outside, or use `extUriBiasedIgnorePathCase` if you know what you are doing.
*/
export function isEqualOrParent(base: string, parentCandidate: string, ignoreCase?: boolean, separator = sep): boolean {
if (base === parentCandidate) {
return true;
@@ -300,8 +317,8 @@ export function isRootOrDriveLetter(path: string): boolean {
return pathNormalized === posix.sep;
}
export function hasDriveLetter(path: string): boolean {
if (isWindows) {
export function hasDriveLetter(path: string, isWindowsOS: boolean = isWindows): boolean {
if (isWindowsOS) {
return isWindowsDriveLetter(path.charCodeAt(0)) && path.charCodeAt(1) === CharCode.Colon;
}
@@ -342,7 +359,7 @@ export function parseLineAndColumnAware(rawPath: string): IPathWithLineAndColumn
let line: number | undefined = undefined;
let column: number | undefined = undefined;
segments.forEach(segment => {
for (const segment of segments) {
const segmentAsNumber = Number(segment);
if (!isNumber(segmentAsNumber)) {
path = !!path ? [path, segment].join(':') : segment; // a colon can well be part of a path (e.g. C:\...)
@@ -351,7 +368,7 @@ export function parseLineAndColumnAware(rawPath: string): IPathWithLineAndColumn
} else if (column === undefined) {
column = segmentAsNumber;
}
});
}
if (!path) {
throw new Error('Format for `--goto` should be: `FILE:LINE(:COLUMN)`');
@@ -363,3 +380,25 @@ export function parseLineAndColumnAware(rawPath: string): IPathWithLineAndColumn
column: column !== undefined ? column : line !== undefined ? 1 : undefined // if we have a line, make sure column is also set
};
}
const pathChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
export function randomPath(parent?: string, prefix?: string, randomLength = 8): string {
let suffix = '';
for (let i = 0; i < randomLength; i++) {
suffix += pathChars.charAt(Math.floor(Math.random() * pathChars.length));
}
let randomFileName: string;
if (prefix) {
randomFileName = `${prefix}-${suffix}`;
} else {
randomFileName = suffix;
}
if (parent) {
return join(parent, randomFileName);
}
return randomFileName;
}
src/vs/base/common/filters.ts
+32 -15
View File
@@ -120,7 +120,9 @@ function isWhitespace(code: number): boolean {
}
const wordSeparators = new Set<number>();
'`~!@#$%^&*()-=+[{]}\\|;:\'",.<>/?'
// These are chosen as natural word separators based on writen text.
// It is a subset of the word separators used by the monaco editor.
'()[]{}<>`\'"-/;:,.?!'
.split('')
.forEach(s => wordSeparators.add(s.charCodeAt(0)));
@@ -361,14 +363,14 @@ export function matchesFuzzy(word: string, wordToMatchAgainst: string, enableSep
* powerful than `matchesFuzzy`
*/
export function matchesFuzzy2(pattern: string, word: string): IMatch[] | null {
const score = fuzzyScore(pattern, pattern.toLowerCase(), 0, word, word.toLowerCase(), 0, true);
const score = fuzzyScore(pattern, pattern.toLowerCase(), 0, word, word.toLowerCase(), 0, { firstMatchCanBeWeak: true, boostFullMatch: true });
return score ? createMatches(score) : null;
}
export function anyScore(pattern: string, lowPattern: string, patternPos: number, word: string, lowWord: string, wordPos: number): FuzzyScore {
const max = Math.min(13, pattern.length);
for (; patternPos < max; patternPos++) {
const result = fuzzyScore(pattern, lowPattern, patternPos, word, lowWord, wordPos, false);
const result = fuzzyScore(pattern, lowPattern, patternPos, word, lowWord, wordPos, { firstMatchCanBeWeak: false, boostFullMatch: true });
if (result) {
return result;
}
@@ -470,8 +472,13 @@ function isSeparatorAtPos(value: string, index: number): boolean {
case CharCode.Colon:
case CharCode.DollarSign:
case CharCode.LessThan:
case CharCode.GreaterThan:
case CharCode.OpenParen:
case CharCode.CloseParen:
case CharCode.OpenSquareBracket:
case CharCode.CloseSquareBracket:
case CharCode.OpenCurlyBrace:
case CharCode.CloseCurlyBrace:
return true;
case undefined:
return false;
@@ -539,11 +546,21 @@ export namespace FuzzyScore {
}
}
export interface FuzzyScorer {
(pattern: string, lowPattern: string, patternPos: number, word: string, lowWord: string, wordPos: number, firstMatchCanBeWeak: boolean): FuzzyScore | undefined;
export abstract class FuzzyScoreOptions {
static default = { boostFullMatch: true, firstMatchCanBeWeak: false };
constructor(
readonly firstMatchCanBeWeak: boolean,
readonly boostFullMatch: boolean,
) { }
}
export function fuzzyScore(pattern: string, patternLow: string, patternStart: number, word: string, wordLow: string, wordStart: number, firstMatchCanBeWeak: boolean): FuzzyScore | undefined {
export interface FuzzyScorer {
(pattern: string, lowPattern: string, patternPos: number, word: string, lowWord: string, wordPos: number, options?: FuzzyScoreOptions): FuzzyScore | undefined;
}
export function fuzzyScore(pattern: string, patternLow: string, patternStart: number, word: string, wordLow: string, wordStart: number, options: FuzzyScoreOptions = FuzzyScoreOptions.default): FuzzyScore | undefined {
const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
const wordLen = word.length > _maxLen ? _maxLen : word.length;
@@ -628,7 +645,7 @@ export function fuzzyScore(pattern: string, patternLow: string, patternStart: nu
printTables(pattern, patternStart, word, wordStart);
}
if (!hasStrongFirstMatch[0] && !firstMatchCanBeWeak) {
if (!hasStrongFirstMatch[0] && !options.firstMatchCanBeWeak) {
return undefined;
}
@@ -682,7 +699,7 @@ export function fuzzyScore(pattern: string, patternLow: string, patternStart: nu
result.push(column);
}
if (wordLen === patternLen) {
if (wordLen === patternLen && options.boostFullMatch) {
// the word matches the pattern with all characters!
// giving the score a total match boost (to come up ahead other words)
result[0] += 2;
@@ -781,16 +798,16 @@ function _doScore(
//#region --- graceful ---
export function fuzzyScoreGracefulAggressive(pattern: string, lowPattern: string, patternPos: number, word: string, lowWord: string, wordPos: number, firstMatchCanBeWeak: boolean): FuzzyScore | undefined {
return fuzzyScoreWithPermutations(pattern, lowPattern, patternPos, word, lowWord, wordPos, true, firstMatchCanBeWeak);
export function fuzzyScoreGracefulAggressive(pattern: string, lowPattern: string, patternPos: number, word: string, lowWord: string, wordPos: number, options?: FuzzyScoreOptions): FuzzyScore | undefined {
return fuzzyScoreWithPermutations(pattern, lowPattern, patternPos, word, lowWord, wordPos, true, options);
}
export function fuzzyScoreGraceful(pattern: string, lowPattern: string, patternPos: number, word: string, lowWord: string, wordPos: number, firstMatchCanBeWeak: boolean): FuzzyScore | undefined {
return fuzzyScoreWithPermutations(pattern, lowPattern, patternPos, word, lowWord, wordPos, false, firstMatchCanBeWeak);
export function fuzzyScoreGraceful(pattern: string, lowPattern: string, patternPos: number, word: string, lowWord: string, wordPos: number, options?: FuzzyScoreOptions): FuzzyScore | undefined {
return fuzzyScoreWithPermutations(pattern, lowPattern, patternPos, word, lowWord, wordPos, false, options);
}
function fuzzyScoreWithPermutations(pattern: string, lowPattern: string, patternPos: number, word: string, lowWord: string, wordPos: number, aggressive: boolean, firstMatchCanBeWeak: boolean): FuzzyScore | undefined {
let top = fuzzyScore(pattern, lowPattern, patternPos, word, lowWord, wordPos, firstMatchCanBeWeak);
function fuzzyScoreWithPermutations(pattern: string, lowPattern: string, patternPos: number, word: string, lowWord: string, wordPos: number, aggressive: boolean, options?: FuzzyScoreOptions): FuzzyScore | undefined {
let top = fuzzyScore(pattern, lowPattern, patternPos, word, lowWord, wordPos, options);
if (top && !aggressive) {
// when using the original pattern yield a result we`
@@ -808,7 +825,7 @@ function fuzzyScoreWithPermutations(pattern: string, lowPattern: string, pattern
for (let movingPatternPos = patternPos + 1; movingPatternPos < tries; movingPatternPos++) {
const newPattern = nextTypoPermutation(pattern, movingPatternPos);
if (newPattern) {
const candidate = fuzzyScore(newPattern, newPattern.toLowerCase(), patternPos, word, lowWord, wordPos, firstMatchCanBeWeak);
const candidate = fuzzyScore(newPattern, newPattern.toLowerCase(), patternPos, word, lowWord, wordPos, options);
if (candidate) {
candidate[0] -= 3; // permutation penalty
if (!top || candidate[0] > top[0]) {
src/vs/base/common/fuzzyScorer.ts
+3 -3
View File
@@ -315,7 +315,7 @@ function doScoreFuzzy2Multiple(target: string, query: IPreparedQueryPiece[], pat
}
function doScoreFuzzy2Single(target: string, query: IPreparedQueryPiece, patternStart: number, wordStart: number): FuzzyScore2 {
const score = fuzzyScore(query.original, query.originalLowercase, patternStart, target, target.toLowerCase(), wordStart, true);
const score = fuzzyScore(query.original, query.originalLowercase, patternStart, target, target.toLowerCase(), wordStart);
if (!score) {
return NO_SCORE2;
}
@@ -349,7 +349,7 @@ export interface IItemScore {
descriptionMatch?: IMatch[];
}
const NO_ITEM_SCORE: IItemScore = Object.freeze({ score: 0 });
const NO_ITEM_SCORE = Object.freeze<IItemScore>({ score: 0 });
export interface IItemAccessor<T> {
@@ -885,7 +885,7 @@ export function prepareQuery(original: string): IPreparedQuery {
return { original, originalLowercase, pathNormalized, normalized, normalizedLowercase, values, containsPathSeparator, expectContiguousMatch: expectExactMatch };
}
function normalizeQuery(original: string): { pathNormalized: string, normalized: string, normalizedLowercase: string } {
function normalizeQuery(original: string): { pathNormalized: string; normalized: string; normalizedLowercase: string } {
let pathNormalized: string;
if (isWindows) {
pathNormalized = original.replace(/\//g, sep); // Help Windows users to search for paths when using slash
src/vs/base/common/glob.ts
+357 -240
View File
@@ -3,47 +3,63 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { equals } from 'vs/base/common/arrays';
import { isThenable } from 'vs/base/common/async';
import { CharCode } from 'vs/base/common/charCode';
import * as extpath from 'vs/base/common/extpath';
import { isEqualOrParent } from 'vs/base/common/extpath';
import { LRUCache } from 'vs/base/common/map';
import * as paths from 'vs/base/common/path';
import * as strings from 'vs/base/common/strings';
import { basename, extname, posix, sep } from 'vs/base/common/path';
import { isLinux } from 'vs/base/common/platform';
import { escapeRegExpCharacters } from 'vs/base/common/strings';
export interface IRelativePattern {
/**
* A base file path to which this pattern will be matched against relatively.
*/
readonly base: string;
/**
* A file glob pattern like `*.{ts,js}` that will be matched on file paths
* relative to the base path.
*
* Example: Given a base of `/home/work/folder` and a file path of `/home/work/folder/index.js`,
* the file glob pattern will match on `index.js`.
*/
readonly pattern: string;
}
export interface IExpression {
[pattern: string]: boolean | SiblingClause;
}
export interface IRelativePattern {
base: string;
pattern: string;
}
export function getEmptyExpression(): IExpression {
return Object.create(null);
}
export interface SiblingClause {
interface SiblingClause {
when: string;
}
const GLOBSTAR = '**';
const GLOB_SPLIT = '/';
export const GLOBSTAR = '**';
export const GLOB_SPLIT = '/';
const PATH_REGEX = '[/\\\\]'; // any slash or backslash
const NO_PATH_REGEX = '[^/\\\\]'; // any non-slash and non-backslash
const ALL_FORWARD_SLASHES = /\//g;
function starsToRegExp(starCount: number): string {
function starsToRegExp(starCount: number, isLastPattern?: boolean): string {
switch (starCount) {
case 0:
return '';
case 1:
return `${NO_PATH_REGEX}*?`; // 1 star matches any number of characters except path separator (/ and \) - non greedy (?)
default:
// Matches: (Path Sep OR Path Val followed by Path Sep OR Path Sep followed by Path Val) 0-many times
// Matches: (Path Sep OR Path Val followed by Path Sep) 0-many times except when it's the last pattern
// in which case also matches (Path Sep followed by Path Val)
// Group is non capturing because we don't need to capture at all (?:...)
// Overall we use non-greedy matching because it could be that we match too much
return `(?:${PATH_REGEX}|${NO_PATH_REGEX}+${PATH_REGEX}|${PATH_REGEX}${NO_PATH_REGEX}+)*?`;
return `(?:${PATH_REGEX}|${NO_PATH_REGEX}+${PATH_REGEX}${isLastPattern ? `|${PATH_REGEX}${NO_PATH_REGEX}+` : ''})*?`;
}
}
@@ -104,7 +120,7 @@ function parseRegExp(pattern: string): string {
const segments = splitGlobAware(pattern, GLOB_SPLIT);
// Special case where we only have globstars
if (segments.every(s => s === GLOBSTAR)) {
if (segments.every(segment => segment === GLOBSTAR)) {
regEx = '.*';
}
@@ -113,116 +129,127 @@ function parseRegExp(pattern: string): string {
let previousSegmentWasGlobStar = false;
segments.forEach((segment, index) => {
// Globstar is special
// Treat globstar specially
if (segment === GLOBSTAR) {
// if we have more than one globstar after another, just ignore it
if (!previousSegmentWasGlobStar) {
regEx += starsToRegExp(2);
previousSegmentWasGlobStar = true;
if (previousSegmentWasGlobStar) {
return;
}
return;
regEx += starsToRegExp(2, index === segments.length - 1);
}
// States
let inBraces = false;
let braceVal = '';
// Anything else, not globstar
else {
let inBrackets = false;
let bracketVal = '';
// States
let inBraces = false;
let braceVal = '';
for (const char of segment) {
// Support brace expansion
if (char !== '}' && inBraces) {
braceVal += char;
continue;
let inBrackets = false;
let bracketVal = '';
for (const char of segment) {
// Support brace expansion
if (char !== '}' && inBraces) {
braceVal += char;
continue;
}
// Support brackets
if (inBrackets && (char !== ']' || !bracketVal) /* ] is literally only allowed as first character in brackets to match it */) {
let res: string;
// range operator
if (char === '-') {
res = char;
}
// negation operator (only valid on first index in bracket)
else if ((char === '^' || char === '!') && !bracketVal) {
res = '^';
}
// glob split matching is not allowed within character ranges
// see http://man7.org/linux/man-pages/man7/glob.7.html
else if (char === GLOB_SPLIT) {
res = '';
}
// anything else gets escaped
else {
res = escapeRegExpCharacters(char);
}
bracketVal += res;
continue;
}
switch (char) {
case '{':
inBraces = true;
continue;
case '[':
inBrackets = true;
continue;
case '}': {
const choices = splitGlobAware(braceVal, ',');
// Converts {foo,bar} => [foo|bar]
const braceRegExp = `(?:${choices.map(choice => parseRegExp(choice)).join('|')})`;
regEx += braceRegExp;
inBraces = false;
braceVal = '';
break;
}
case ']': {
regEx += ('[' + bracketVal + ']');
inBrackets = false;
bracketVal = '';
break;
}
case '?':
regEx += NO_PATH_REGEX; // 1 ? matches any single character except path separator (/ and \)
continue;
case '*':
regEx += starsToRegExp(1);
continue;
default:
regEx += escapeRegExpCharacters(char);
}
}
// Support brackets
if (inBrackets && (char !== ']' || !bracketVal) /* ] is literally only allowed as first character in brackets to match it */) {
let res: string;
// range operator
if (char === '-') {
res = char;
}
// negation operator (only valid on first index in bracket)
else if ((char === '^' || char === '!') && !bracketVal) {
res = '^';
}
// glob split matching is not allowed within character ranges
// see http://man7.org/linux/man-pages/man7/glob.7.html
else if (char === GLOB_SPLIT) {
res = '';
}
// anything else gets escaped
else {
res = strings.escapeRegExpCharacters(char);
}
bracketVal += res;
continue;
}
switch (char) {
case '{':
inBraces = true;
continue;
case '[':
inBrackets = true;
continue;
case '}':
const choices = splitGlobAware(braceVal, ',');
// Converts {foo,bar} => [foo|bar]
const braceRegExp = `(?:${choices.map(c => parseRegExp(c)).join('|')})`;
regEx += braceRegExp;
inBraces = false;
braceVal = '';
break;
case ']':
regEx += ('[' + bracketVal + ']');
inBrackets = false;
bracketVal = '';
break;
case '?':
regEx += NO_PATH_REGEX; // 1 ? matches any single character except path separator (/ and \)
continue;
case '*':
regEx += starsToRegExp(1);
continue;
default:
regEx += strings.escapeRegExpCharacters(char);
// Tail: Add the slash we had split on if there is more to
// come and the remaining pattern is not a globstar
// For example if pattern: some/**/*.js we want the "/" after
// some to be included in the RegEx to prevent a folder called
// "something" to match as well.
if (
index < segments.length - 1 && // more segments to come after this
(
segments[index + 1] !== GLOBSTAR || // next segment is not **, or...
index + 2 < segments.length // ...next segment is ** but there is more segments after that
)
) {
regEx += PATH_REGEX;
}
}
// Tail: Add the slash we had split on if there is more to come and the remaining pattern is not a globstar
// For example if pattern: some/**/*.js we want the "/" after some to be included in the RegEx to prevent
// a folder called "something" to match as well.
// However, if pattern: some/**, we tolerate that we also match on "something" because our globstar behaviour
// is to match 0-N segments.
if (index < segments.length - 1 && (segments[index + 1] !== GLOBSTAR || index + 2 < segments.length)) {
regEx += PATH_REGEX;
}
// reset state
previousSegmentWasGlobStar = false;
// update globstar state
previousSegmentWasGlobStar = (segment === GLOBSTAR);
});
}
@@ -230,21 +257,25 @@ function parseRegExp(pattern: string): string {
}
// regexes to check for trivial glob patterns that just check for String#endsWith
const T1 = /^\*\*\/\*\.[\w\.-]+$/; // **/*.something
const T2 = /^\*\*\/([\w\.-]+)\/?$/; // **/something
const T3 = /^{\*\*\/[\*\.]?[\w\.-]+\/?(,\*\*\/[\*\.]?[\w\.-]+\/?)*}$/; // {**/*.something,**/*.else} or {**/package.json,**/project.json}
const T3_2 = /^{\*\*\/[\*\.]?[\w\.-]+(\/(\*\*)?)?(,\*\*\/[\*\.]?[\w\.-]+(\/(\*\*)?)?)*}$/; // Like T3, with optional trailing /**
const T4 = /^\*\*((\/[\w\.-]+)+)\/?$/; // **/something/else
const T5 = /^([\w\.-]+(\/[\w\.-]+)*)\/?$/; // something/else
const T1 = /^\*\*\/\*\.[\w\.-]+$/; // **/*.something
const T2 = /^\*\*\/([\w\.-]+)\/?$/; // **/something
const T3 = /^{\*\*\/\*?[\w\.-]+\/?(,\*\*\/\*?[\w\.-]+\/?)*}$/; // {**/*.something,**/*.else} or {**/package.json,**/project.json}
const T3_2 = /^{\*\*\/\*?[\w\.-]+(\/(\*\*)?)?(,\*\*\/\*?[\w\.-]+(\/(\*\*)?)?)*}$/; // Like T3, with optional trailing /**
const T4 = /^\*\*((\/[\w\.-]+)+)\/?$/; // **/something/else
const T5 = /^([\w\.-]+(\/[\w\.-]+)*)\/?$/; // something/else
export type ParsedPattern = (path: string, basename?: string) => boolean;
// The ParsedExpression returns a Promise iff hasSibling returns a Promise.
// The `ParsedExpression` returns a `Promise`
// iff `hasSibling` returns a `Promise`.
export type ParsedExpression = (path: string, basename?: string, hasSibling?: (name: string) => boolean | Promise<boolean>) => string | null | Promise<string | null> /* the matching pattern */;
export interface IGlobOptions {
interface IGlobOptions {
/**
* Simplify patterns for use as exclusion filters during tree traversal to skip entire subtrees. Cannot be used outside of a tree traversal.
* Simplify patterns for use as exclusion filters during
* tree traversal to skip entire subtrees. Cannot be used
* outside of a tree traversal.
*/
trimForExclusions?: boolean;
}
@@ -256,6 +287,7 @@ interface ParsedStringPattern {
allBasenames?: string[];
allPaths?: string[];
}
interface ParsedExpressionPattern {
(path: string, basename?: string, name?: string, hasSibling?: (name: string) => boolean | Promise<boolean>): string | null | Promise<string | null> /* the matching pattern */;
requiresSiblings?: boolean;
@@ -278,7 +310,7 @@ function parsePattern(arg1: string | IRelativePattern, options: IGlobOptions): P
return NULL;
}
// Handle IRelativePattern
// Handle relative patterns
let pattern: string;
if (typeof arg1 !== 'string') {
pattern = arg1.pattern;
@@ -298,18 +330,15 @@ function parsePattern(arg1: string | IRelativePattern, options: IGlobOptions): P
// Check for Trivials
let match: RegExpExecArray | null;
if (T1.test(pattern)) { // common pattern: **/*.txt just need endsWith check
const base = pattern.substr(4); // '**/*'.length === 4
parsedPattern = function (path, basename) {
return typeof path === 'string' && path.endsWith(base) ? pattern : null;
};
} else if (match = T2.exec(trimForExclusions(pattern, options))) { // common pattern: **/some.txt just need basename check
if (T1.test(pattern)) {
parsedPattern = trivia1(pattern.substr(4), pattern); // common pattern: **/*.txt just need endsWith check
} else if (match = T2.exec(trimForExclusions(pattern, options))) { // common pattern: **/some.txt just need basename check
parsedPattern = trivia2(match[1], pattern);
} else if ((options.trimForExclusions ? T3_2 : T3).test(pattern)) { // repetition of common patterns (see above) {**/*.txt,**/*.png}
parsedPattern = trivia3(pattern, options);
} else if (match = T4.exec(trimForExclusions(pattern, options))) { // common pattern: **/something/else just need endsWith check
} else if (match = T4.exec(trimForExclusions(pattern, options))) { // common pattern: **/something/else just need endsWith check
parsedPattern = trivia4and5(match[1].substr(1), pattern, true);
} else if (match = T5.exec(trimForExclusions(pattern, options))) { // common pattern: something/else just need equals check
} else if (match = T5.exec(trimForExclusions(pattern, options))) { // common pattern: something/else just need equals check
parsedPattern = trivia4and5(match[1], pattern, false);
}
@@ -329,88 +358,122 @@ function wrapRelativePattern(parsedPattern: ParsedStringPattern, arg2: string |
return parsedPattern;
}
return function (path, basename) {
if (!extpath.isEqualOrParent(path, arg2.base)) {
const wrappedPattern: ParsedStringPattern = function (path, basename) {
if (!isEqualOrParent(path, arg2.base, !isLinux)) {
// skip glob matching if `base` is not a parent of `path`
return null;
}
return parsedPattern(paths.relative(arg2.base, path), basename);
// Given we have checked `base` being a parent of `path`,
// we can now remove the `base` portion of the `path`
// and only match on the remaining path components
return parsedPattern(path.substr(arg2.base.length + 1), basename);
};
// Make sure to preserve associated metadata
wrappedPattern.allBasenames = parsedPattern.allBasenames;
wrappedPattern.allPaths = parsedPattern.allPaths;
wrappedPattern.basenames = parsedPattern.basenames;
wrappedPattern.patterns = parsedPattern.patterns;
return wrappedPattern;
}
function trimForExclusions(pattern: string, options: IGlobOptions): string {
return options.trimForExclusions && pattern.endsWith('/**') ? pattern.substr(0, pattern.length - 2) : pattern; // dropping **, tailing / is dropped later
}
// common pattern: **/*.txt just need endsWith check
function trivia1(base: string, pattern: string): ParsedStringPattern {
return function (path: string, basename?: string) {
return typeof path === 'string' && path.endsWith(base) ? pattern : null;
};
}
// common pattern: **/some.txt just need basename check
function trivia2(base: string, originalPattern: string): ParsedStringPattern {
function trivia2(base: string, pattern: string): ParsedStringPattern {
const slashBase = `/${base}`;
const backslashBase = `\\${base}`;
const parsedPattern: ParsedStringPattern = function (path, basename) {
const parsedPattern: ParsedStringPattern = function (path: string, basename?: string) {
if (typeof path !== 'string') {
return null;
}
if (basename) {
return basename === base ? originalPattern : null;
return basename === base ? pattern : null;
}
return path === base || path.endsWith(slashBase) || path.endsWith(backslashBase) ? originalPattern : null;
return path === base || path.endsWith(slashBase) || path.endsWith(backslashBase) ? pattern : null;
};
const basenames = [base];
parsedPattern.basenames = basenames;
parsedPattern.patterns = [originalPattern];
parsedPattern.patterns = [pattern];
parsedPattern.allBasenames = basenames;
return parsedPattern;
}
// repetition of common patterns (see above) {**/*.txt,**/*.png}
function trivia3(pattern: string, options: IGlobOptions): ParsedStringPattern {
const parsedPatterns = aggregateBasenameMatches(pattern.slice(1, -1).split(',')
const parsedPatterns = aggregateBasenameMatches(pattern.slice(1, -1)
.split(',')
.map(pattern => parsePattern(pattern, options))
.filter(pattern => pattern !== NULL), pattern);
const n = parsedPatterns.length;
if (!n) {
const patternsLength = parsedPatterns.length;
if (!patternsLength) {
return NULL;
}
if (n === 1) {
return <ParsedStringPattern>parsedPatterns[0];
if (patternsLength === 1) {
return parsedPatterns[0];
}
const parsedPattern: ParsedStringPattern = function (path: string, basename?: string) {
for (let i = 0, n = parsedPatterns.length; i < n; i++) {
if ((<ParsedStringPattern>parsedPatterns[i])(path, basename)) {
if (parsedPatterns[i](path, basename)) {
return pattern;
}
}
return null;
};
const withBasenames = parsedPatterns.find(pattern => !!(<ParsedStringPattern>pattern).allBasenames);
const withBasenames = parsedPatterns.find(pattern => !!pattern.allBasenames);
if (withBasenames) {
parsedPattern.allBasenames = (<ParsedStringPattern>withBasenames).allBasenames;
parsedPattern.allBasenames = withBasenames.allBasenames;
}
const allPaths = parsedPatterns.reduce((all, current) => current.allPaths ? all.concat(current.allPaths) : all, <string[]>[]);
const allPaths = parsedPatterns.reduce((all, current) => current.allPaths ? all.concat(current.allPaths) : all, [] as string[]);
if (allPaths.length) {
parsedPattern.allPaths = allPaths;
}
return parsedPattern;
}
// common patterns: **/something/else just need endsWith check, something/else just needs and equals check
function trivia4and5(targetPath: string, pattern: string, matchPathEnds: boolean): ParsedStringPattern {
const usingPosixSep = paths.sep === paths.posix.sep;
const nativePath = usingPosixSep ? targetPath : targetPath.replace(ALL_FORWARD_SLASHES, paths.sep);
const nativePathEnd = paths.sep + nativePath;
const targetPathEnd = paths.posix.sep + targetPath;
const usingPosixSep = sep === posix.sep;
const nativePath = usingPosixSep ? targetPath : targetPath.replace(ALL_FORWARD_SLASHES, sep);
const nativePathEnd = sep + nativePath;
const targetPathEnd = posix.sep + targetPath;
let parsedPattern: ParsedStringPattern;
if (matchPathEnds) {
parsedPattern = function (path: string, basename?: string) {
return typeof path === 'string' && ((path === nativePath || path.endsWith(nativePathEnd)) || !usingPosixSep && (path === targetPath || path.endsWith(targetPathEnd))) ? pattern : null;
};
} else {
parsedPattern = function (path: string, basename?: string) {
return typeof path === 'string' && (path === nativePath || (!usingPosixSep && path === targetPath)) ? pattern : null;
};
}
const parsedPattern: ParsedStringPattern = matchPathEnds ? function (testPath, basename) {
return typeof testPath === 'string' &&
((testPath === nativePath || testPath.endsWith(nativePathEnd))
|| !usingPosixSep && (testPath === targetPath || testPath.endsWith(targetPathEnd)))
? pattern : null;
} : function (testPath, basename) {
return typeof testPath === 'string' &&
(testPath === nativePath
|| (!usingPosixSep && testPath === targetPath))
? pattern : null;
};
parsedPattern.allPaths = [(matchPathEnds ? '*/' : './') + targetPath];
return parsedPattern;
}
@@ -419,6 +482,7 @@ function toRegExp(pattern: string): ParsedStringPattern {
const regExp = new RegExp(`^${parseRegExp(pattern)}$`);
return function (path: string) {
regExp.lastIndex = 0; // reset RegExp to its initial state to reuse it!
return typeof path === 'string' && regExp.test(path) ? pattern : null;
};
} catch (error) {
@@ -428,11 +492,12 @@ function toRegExp(pattern: string): ParsedStringPattern {
/**
* Simplified glob matching. Supports a subset of glob patterns:
* - * matches anything inside a path segment
* - ? matches 1 character inside a path segment
* - ** matches anything including an empty path segment
* - simple brace expansion ({js,ts} => js or ts)
* - character ranges (using [...])
* * `*` to match zero or more characters in a path segment
* * `?` to match on one character in a path segment
* * `**` to match any number of path segments, including none
* * `{}` to group conditions (e.g. *.{ts,js} matches all TypeScript and JavaScript files)
* * `[]` to declare a range of characters to match in a path segment (e.g., `example.[0-9]` to match on `example.0`, `example.1`, …)
* * `[!...]` to negate a range of characters to match in a path segment (e.g., `example.[!0-9]` to match on `example.a`, `example.b`, but not `example.0`)
*/
export function match(pattern: string | IRelativePattern, path: string): boolean;
export function match(expression: IExpression, path: string, hasSibling?: (name: string) => boolean): string /* the matching pattern */;
@@ -441,19 +506,21 @@ export function match(arg1: string | IExpression | IRelativePattern, path: strin
return false;
}
return parse(<IExpression>arg1)(path, undefined, hasSibling);
return parse(arg1)(path, undefined, hasSibling);
}
/**
* Simplified glob matching. Supports a subset of glob patterns:
* - * matches anything inside a path segment
* - ? matches 1 character inside a path segment
* - ** matches anything including an empty path segment
* - simple brace expansion ({js,ts} => js or ts)
* - character ranges (using [...])
* * `*` to match zero or more characters in a path segment
* * `?` to match on one character in a path segment
* * `**` to match any number of path segments, including none
* * `{}` to group conditions (e.g. *.{ts,js} matches all TypeScript and JavaScript files)
* * `[]` to declare a range of characters to match in a path segment (e.g., `example.[0-9]` to match on `example.0`, `example.1`, …)
* * `[!...]` to negate a range of characters to match in a path segment (e.g., `example.[!0-9]` to match on `example.a`, `example.b`, but not `example.0`)
*/
export function parse(pattern: string | IRelativePattern, options?: IGlobOptions): ParsedPattern;
export function parse(expression: IExpression, options?: IGlobOptions): ParsedExpression;
export function parse(arg1: string | IExpression | IRelativePattern, options?: IGlobOptions): ParsedPattern | ParsedExpression;
export function parse(arg1: string | IExpression | IRelativePattern, options: IGlobOptions = {}): ParsedPattern | ParsedExpression {
if (!arg1) {
return FALSE;
@@ -465,15 +532,19 @@ export function parse(arg1: string | IExpression | IRelativePattern, options: IG
if (parsedPattern === NULL) {
return FALSE;
}
const resultPattern: ParsedPattern & { allBasenames?: string[]; allPaths?: string[]; } = function (path: string, basename?: string) {
const resultPattern: ParsedPattern & { allBasenames?: string[]; allPaths?: string[] } = function (path: string, basename?: string) {
return !!parsedPattern(path, basename);
};
if (parsedPattern.allBasenames) {
resultPattern.allBasenames = parsedPattern.allBasenames;
}
if (parsedPattern.allPaths) {
resultPattern.allPaths = parsedPattern.allPaths;
}
return resultPattern;
}
@@ -481,48 +552,13 @@ export function parse(arg1: string | IExpression | IRelativePattern, options: IG
return parsedExpression(<IExpression>arg1, options);
}
export function hasSiblingPromiseFn(siblingsFn?: () => Promise<string[]>) {
if (!siblingsFn) {
return undefined;
}
let siblings: Promise<Record<string, true>>;
return (name: string) => {
if (!siblings) {
siblings = (siblingsFn() || Promise.resolve([]))
.then(list => list ? listToMap(list) : {});
}
return siblings.then(map => !!map[name]);
};
}
export function hasSiblingFn(siblingsFn?: () => string[]) {
if (!siblingsFn) {
return undefined;
}
let siblings: Record<string, true>;
return (name: string) => {
if (!siblings) {
const list = siblingsFn();
siblings = list ? listToMap(list) : {};
}
return !!siblings[name];
};
}
function listToMap(list: string[]) {
const map: Record<string, true> = {};
for (const key of list) {
map[key] = true;
}
return map;
}
export function isRelativePattern(obj: unknown): obj is IRelativePattern {
const rp = obj as IRelativePattern;
const rp = obj as IRelativePattern | undefined | null;
if (!rp) {
return false;
}
return rp && typeof rp.base === 'string' && typeof rp.pattern === 'string';
return typeof rp.base === 'string' && typeof rp.pattern === 'string';
}
export function getBasenameTerms(patternOrExpression: ParsedPattern | ParsedExpression): string[] {
@@ -538,34 +574,60 @@ function parsedExpression(expression: IExpression, options: IGlobOptions): Parse
.map(pattern => parseExpressionPattern(pattern, expression[pattern], options))
.filter(pattern => pattern !== NULL));
const n = parsedPatterns.length;
if (!n) {
const patternsLength = parsedPatterns.length;
if (!patternsLength) {
return NULL;
}
if (!parsedPatterns.some(parsedPattern => !!(<ParsedExpressionPattern>parsedPattern).requiresSiblings)) {
if (n === 1) {
return <ParsedStringPattern>parsedPatterns[0];
if (patternsLength === 1) {
return parsedPatterns[0] as ParsedStringPattern;
}
const resultExpression: ParsedStringPattern = function (path: string, basename?: string) {
let resultPromises: Promise<string | null>[] | undefined = undefined;
for (let i = 0, n = parsedPatterns.length; i < n; i++) {
// Pattern matches path
const result = (<ParsedStringPattern>parsedPatterns[i])(path, basename);
if (result) {
return result;
const result = parsedPatterns[i](path, basename);
if (typeof result === 'string') {
return result; // immediately return as soon as the first expression matches
}
// If the result is a promise, we have to keep it for
// later processing and await the result properly.
if (isThenable(result)) {
if (!resultPromises) {
resultPromises = [];
}
resultPromises.push(result);
}
}
// With result promises, we have to loop over each and
// await the result before we can return any result.
if (resultPromises) {
return (async () => {
for (const resultPromise of resultPromises) {
const result = await resultPromise;
if (typeof result === 'string') {
return result;
}
}
return null;
})();
}
return null;
};
const withBasenames = parsedPatterns.find(pattern => !!(<ParsedStringPattern>pattern).allBasenames);
const withBasenames = parsedPatterns.find(pattern => !!pattern.allBasenames);
if (withBasenames) {
resultExpression.allBasenames = (<ParsedStringPattern>withBasenames).allBasenames;
resultExpression.allBasenames = withBasenames.allBasenames;
}
const allPaths = parsedPatterns.reduce((all, current) => current.allPaths ? all.concat(current.allPaths) : all, <string[]>[]);
const allPaths = parsedPatterns.reduce((all, current) => current.allPaths ? all.concat(current.allPaths) : all, [] as string[]);
if (allPaths.length) {
resultExpression.allPaths = allPaths;
}
@@ -573,35 +635,64 @@ function parsedExpression(expression: IExpression, options: IGlobOptions): Parse
return resultExpression;
}
const resultExpression: ParsedStringPattern = function (path: string, basename?: string, hasSibling?: (name: string) => boolean | Promise<boolean>) {
const resultExpression: ParsedStringPattern = function (path: string, base?: string, hasSibling?: (name: string) => boolean | Promise<boolean>) {
let name: string | undefined = undefined;
let resultPromises: Promise<string | null>[] | undefined = undefined;
for (let i = 0, n = parsedPatterns.length; i < n; i++) {
// Pattern matches path
const parsedPattern = (<ParsedExpressionPattern>parsedPatterns[i]);
if (parsedPattern.requiresSiblings && hasSibling) {
if (!basename) {
basename = paths.basename(path);
if (!base) {
base = basename(path);
}
if (!name) {
name = basename.substr(0, basename.length - paths.extname(path).length);
name = base.substr(0, base.length - extname(path).length);
}
}
const result = parsedPattern(path, basename, name, hasSibling);
if (result) {
return result;
const result = parsedPattern(path, base, name, hasSibling);
if (typeof result === 'string') {
return result; // immediately return as soon as the first expression matches
}
// If the result is a promise, we have to keep it for
// later processing and await the result properly.
if (isThenable(result)) {
if (!resultPromises) {
resultPromises = [];
}
resultPromises.push(result);
}
}
// With result promises, we have to loop over each and
// await the result before we can return any result.
if (resultPromises) {
return (async () => {
for (const resultPromise of resultPromises) {
const result = await resultPromise;
if (typeof result === 'string') {
return result;
}
}
return null;
})();
}
return null;
};
const withBasenames = parsedPatterns.find(pattern => !!(<ParsedStringPattern>pattern).allBasenames);
const withBasenames = parsedPatterns.find(pattern => !!pattern.allBasenames);
if (withBasenames) {
resultExpression.allBasenames = (<ParsedStringPattern>withBasenames).allBasenames;
resultExpression.allBasenames = withBasenames.allBasenames;
}
const allPaths = parsedPatterns.reduce((all, current) => current.allPaths ? all.concat(current.allPaths) : all, <string[]>[]);
const allPaths = parsedPatterns.reduce((all, current) => current.allPaths ? all.concat(current.allPaths) : all, [] as string[]);
if (allPaths.length) {
resultExpression.allPaths = allPaths;
}
@@ -626,7 +717,7 @@ function parseExpressionPattern(pattern: string, value: boolean | SiblingClause,
// Expression Pattern is <SiblingClause>
if (value) {
const when = (<SiblingClause>value).when;
const when = value.when;
if (typeof when === 'string') {
const result: ParsedExpressionPattern = (path: string, basename?: string, name?: string, hasSibling?: (name: string) => boolean | Promise<boolean>) => {
if (!hasSibling || !parsedPattern(path, basename)) {
@@ -636,15 +727,17 @@ function parseExpressionPattern(pattern: string, value: boolean | SiblingClause,
const clausePattern = when.replace('$(basename)', name!);
const matched = hasSibling(clausePattern);
return isThenable(matched) ?
matched.then(m => m ? pattern : null) :
matched.then(match => match ? pattern : null) :
matched ? pattern : null;
};
result.requiresSiblings = true;
return result;
}
}
// Expression is Anything
// Expression is anything
return parsedPattern;
}
@@ -656,24 +749,30 @@ function aggregateBasenameMatches(parsedPatterns: Array<ParsedStringPattern | Pa
const basenames = basenamePatterns.reduce<string[]>((all, current) => {
const basenames = (<ParsedStringPattern>current).basenames;
return basenames ? all.concat(basenames) : all;
}, <string[]>[]);
}, [] as string[]);
let patterns: string[];
if (result) {
patterns = [];
for (let i = 0, n = basenames.length; i < n; i++) {
patterns.push(result);
}
} else {
patterns = basenamePatterns.reduce((all, current) => {
const patterns = (<ParsedStringPattern>current).patterns;
return patterns ? all.concat(patterns) : all;
}, <string[]>[]);
}, [] as string[]);
}
const aggregate: ParsedStringPattern = function (path, basename) {
const aggregate: ParsedStringPattern = function (path: string, basename?: string) {
if (typeof path !== 'string') {
return null;
}
if (!basename) {
let i: number;
for (i = path.length; i > 0; i--) {
@@ -682,16 +781,34 @@ function aggregateBasenameMatches(parsedPatterns: Array<ParsedStringPattern | Pa
break;
}
}
basename = path.substr(i);
}
const index = basenames.indexOf(basename);
return index !== -1 ? patterns[index] : null;
};
aggregate.basenames = basenames;
aggregate.patterns = patterns;
aggregate.allBasenames = basenames;
const aggregatedPatterns = parsedPatterns.filter(parsedPattern => !(<ParsedStringPattern>parsedPattern).basenames);
aggregatedPatterns.push(aggregate);
return aggregatedPatterns;
}
export function patternsEquals(patternsA: Array<string | IRelativePattern> | undefined, patternsB: Array<string | IRelativePattern> | undefined): boolean {
return equals(patternsA, patternsB, (a, b) => {
if (typeof a === 'string' && typeof b === 'string') {
return a === b;
}
if (typeof a !== 'string' && typeof b !== 'string') {
return a.base === b.base && a.pattern === b.pattern;
}
return false;
});
}
src/vs/base/common/history.ts
+6 -1
View File
@@ -147,8 +147,13 @@ export class HistoryNavigator2<T> {
}
}
replaceLast(value: T): void {
/**
* @returns old last value
*/
replaceLast(value: T): T {
const oldValue = this.tail.value;
this.tail.value = value;
return oldValue;
}
isAtEnd(): boolean {
src/vs/base/common/htmlContent.ts
+35 -4
View File
@@ -5,13 +5,16 @@
import { illegalArgument } from 'vs/base/common/errors';
import { escapeIcons } from 'vs/base/common/iconLabels';
import { UriComponents } from 'vs/base/common/uri';
import { isEqual } from 'vs/base/common/resources';
import { escapeRegExpCharacters } from 'vs/base/common/strings';
import { URI, UriComponents } from 'vs/base/common/uri';
export interface IMarkdownString {
readonly value: string;
readonly isTrusted?: boolean;
readonly supportThemeIcons?: boolean;
readonly supportHtml?: boolean;
readonly baseUri?: UriComponents;
uris?: { [href: string]: UriComponents };
}
@@ -26,10 +29,11 @@ export class MarkdownString implements IMarkdownString {
public isTrusted?: boolean;
public supportThemeIcons?: boolean;
public supportHtml?: boolean;
public baseUri?: URI;
constructor(
value: string = '',
isTrustedOrOptions: boolean | { isTrusted?: boolean, supportThemeIcons?: boolean, supportHtml?: boolean } = false,
isTrustedOrOptions: boolean | { isTrusted?: boolean; supportThemeIcons?: boolean; supportHtml?: boolean } = false,
) {
this.value = value;
if (typeof this.value !== 'string') {
@@ -70,6 +74,29 @@ export class MarkdownString implements IMarkdownString {
this.value += '\n```\n';
return this;
}
appendLink(target: URI | string, label: string, title?: string): MarkdownString {
this.value += '[';
this.value += this._escape(label, ']');
this.value += '](';
this.value += this._escape(String(target), ')');
if (title) {
this.value += ` "${this._escape(this._escape(title, '"'), ')')}"`;
}
this.value += ')';
return this;
}
private _escape(value: string, ch: string): string {
const r = new RegExp(escapeRegExpCharacters(ch), 'g');
return value.replace(r, (match, offset) => {
if (value.charAt(offset - 1) !== '\\') {
return `\\${match}`;
} else {
return match;
}
});
}
}
export function isEmptyMarkdownString(oneOrMany: IMarkdownString | IMarkdownString[] | null | undefined): boolean {
@@ -99,7 +126,11 @@ export function markdownStringEqual(a: IMarkdownString, b: IMarkdownString): boo
} else if (!a || !b) {
return false;
} else {
return a.value === b.value && a.isTrusted === b.isTrusted && a.supportThemeIcons === b.supportThemeIcons;
return a.value === b.value
&& a.isTrusted === b.isTrusted
&& a.supportThemeIcons === b.supportThemeIcons
&& a.supportHtml === b.supportHtml
&& (a.baseUri === b.baseUri || !!a.baseUri && !!b.baseUri && isEqual(URI.from(a.baseUri), URI.from(b.baseUri)));
}
}
@@ -115,7 +146,7 @@ export function removeMarkdownEscapes(text: string): string {
return text.replace(/\\([\\`*_{}[\]()#+\-.!])/g, '$1');
}
export function parseHrefAndDimensions(href: string): { href: string, dimensions: string[] } {
export function parseHrefAndDimensions(href: string): { href: string; dimensions: string[] } {
const dimensions: string[] = [];
const splitted = href.split('|').map(s => s.trim());
href = splitted[0];
src/vs/base/common/iconLabels.ts
+2 -1
View File
@@ -10,6 +10,7 @@ import { ltrim } from 'vs/base/common/strings';
export const iconStartMarker = '$(';
const iconsRegex = new RegExp(`\\$\\(${CSSIcon.iconNameExpression}(?:${CSSIcon.iconModifierExpression})?\\)`, 'g'); // no capturing groups
const iconNameCharacterRegexp = new RegExp(CSSIcon.iconNameCharacter);
const escapeIconsRegex = new RegExp(`(\\\\)?${iconsRegex.source}`, 'g');
export function escapeIcons(text: string): string {
@@ -103,7 +104,7 @@ function doParseLabelWithIcons(text: string, firstIconIndex: number): IParsedLab
// within icon
else if (currentIconStart !== -1) {
// Make sure this is a real icon name
if (/^[a-z0-9\-]$/i.test(char)) {
if (iconNameCharacterRegexp.test(char)) {
currentIconValue += char;
} else {
// This is not a real icon, treat it as text
src/vs/base/common/iterator.ts
+15
View File
@@ -92,6 +92,13 @@ export namespace Iterable {
return value;
}
export function forEach<T>(iterable: Iterable<T>, fn: (t: T, index: number) => any): void {
let index = 0;
for (const element of iterable) {
fn(element, index++);
}
}
/**
* Returns an iterable slice of the array, with the same semantics as `array.slice()`.
*/
@@ -137,6 +144,14 @@ export namespace Iterable {
return [consumed, { [Symbol.iterator]() { return iterator; } }];
}
/**
* Consumes `atMost` elements from iterable and returns the consumed elements,
* and an iterable for the rest of the elements.
*/
export function collect<T>(iterable: Iterable<T>): T[] {
return consume(iterable)[0];
}
/**
* Returns whether the iterables are the same length and all items are
* equal using the comparator function.
src/vs/base/common/json.ts
+8 -5
View File
@@ -332,7 +332,7 @@ export function createScanner(text: string, ignoreTrivia: boolean = false): JSON
case CharacterCodes.t:
result += '\t';
break;
case CharacterCodes.u:
case CharacterCodes.u: {
const ch3 = scanHexDigits(4);
if (ch3 >= 0) {
result += String.fromCharCode(ch3);
@@ -340,6 +340,7 @@ export function createScanner(text: string, ignoreTrivia: boolean = false): JSON
scanError = ScanError.InvalidUnicode;
}
break;
}
default:
scanError = ScanError.InvalidEscapeCharacter;
}
@@ -425,7 +426,7 @@ export function createScanner(text: string, ignoreTrivia: boolean = false): JSON
return token = SyntaxKind.StringLiteral;
// comments
case CharacterCodes.slash:
case CharacterCodes.slash: {
const start = pos - 1;
// Single-line comment
if (text.charCodeAt(pos + 1) === CharacterCodes.slash) {
@@ -471,7 +472,7 @@ export function createScanner(text: string, ignoreTrivia: boolean = false): JSON
value += String.fromCharCode(code);
pos++;
return token = SyntaxKind.Unknown;
}
// numbers
case CharacterCodes.minus:
value += String.fromCharCode(code);
@@ -1016,7 +1017,7 @@ export function getNodeValue(node: Node): any {
switch (node.type) {
case 'array':
return node.children!.map(getNodeValue);
case 'object':
case 'object': {
const obj = Object.create(null);
for (let prop of node.children!) {
const valueNode = prop.children![1];
@@ -1025,6 +1026,7 @@ export function getNodeValue(node: Node): any {
}
}
return obj;
}
case 'null':
case 'string':
case 'number':
@@ -1162,7 +1164,7 @@ export function visit(text: string, visitor: JSONVisitor, options: ParseOptions
function parseLiteral(): boolean {
switch (_scanner.getToken()) {
case SyntaxKind.NumericLiteral:
case SyntaxKind.NumericLiteral: {
let value = 0;
try {
value = JSON.parse(_scanner.getTokenValue());
@@ -1175,6 +1177,7 @@ export function visit(text: string, visitor: JSONVisitor, options: ParseOptions
}
onLiteralValue(value);
break;
}
case SyntaxKind.NullKeyword:
onLiteralValue(null);
break;
src/vs/base/common/jsonFormatter.ts
+13
View File
@@ -202,6 +202,19 @@ export function format(documentText: string, range: Range | undefined, options:
return editOperations;
}
/**
* Creates a formatted string out of the object passed as argument, using the given formatting options
* @param any The object to stringify and format
* @param options The formatting options to use
*/
export function toFormattedString(obj: any, options: FormattingOptions) {
const content = JSON.stringify(obj, undefined, options.insertSpaces ? options.tabSize || 4 : '\t');
if (options.eol !== undefined) {
return content.replace(/\r\n|\r|\n/g, options.eol);
}
return content;
}
function repeat(s: string, count: number): string {
let result = '';
for (let i = 0; i < count; i++) {

Some files were not shown because too many files have changed in this diff Show More