@codingame/monaco-vscode-api 20.1.1 → 20.2.1

package/vscode/src/vs/base/browser/ui/iconLabel/iconlabel.css

@@ -1,9 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* ---------- Icon label ---------- */
+
 .monaco-icon-label {
-	display: flex;
+	display: flex; /* required for icons support :before rule */
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+
 .monaco-icon-label::before {
+
+	/* svg icons rendered as background image */
 	background-size: 16px;
 	background-position: left center;
 	background-repeat: no-repeat;
@@ -12,11 +22,15 @@
 	height: 22px;
 	line-height: inherit !important;
 	display: inline-block;
+
+	/* fonts icons */
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	vertical-align: top;
-	flex-shrink: 0;
+
+	flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */
 }
+
 .monaco-icon-label-iconpath {
 	width: 16px;
 	height: 16px;
@@ -24,6 +38,7 @@
 	margin-top: 2px;
 	display: flex;
 }
+
 .monaco-icon-label-container.disabled {
 	color: var(--vscode-disabledForeground);
 }
@@ -33,54 +48,67 @@
 	text-overflow: ellipsis;
 	flex: 1;
 }
+
 .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
 	color: inherit;
-	white-space: pre;
+	white-space: pre; /* enable to show labels that include multiple whitespaces */
 }
+
 .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator {
 	margin: 0 2px;
 	opacity: 0.5;
 }
+
 .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
 	opacity: .7;
 	white-space: pre;
 }
+
 .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
 	opacity: .7;
 	margin-left: 0.5em;
 	font-size: 0.9em;
-	white-space: pre;
+	white-space: pre; /* enable to show labels that include multiple whitespaces */
 }
+
 .monaco-icon-label.nowrap > .monaco-icon-label-container > .monaco-icon-description-container > .label-description{
 	white-space: nowrap
 }
+
 .vs .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
 	opacity: .95;
 }
+
 .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
 .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
 	font-style: italic;
 }
+
 .monaco-icon-label.deprecated {
 	text-decoration: line-through;
 	opacity: 0.66;
 }
+
 .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
 .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
 	text-decoration: line-through;
 }
+
 .monaco-icon-label::after {
 	opacity: 0.75;
 	font-size: 90%;
 	font-weight: 600;
-	margin: auto 16px 0 5px;
+	margin: auto 16px 0 5px; /* https://github.com/microsoft/vscode/issues/113223 */
 	text-align: center;
 }
-.monaco-list:focus .selected .monaco-icon-label,
+
+/* make sure selection color wins when a label is being selected */
+.monaco-list:focus .selected .monaco-icon-label, /* list */
 .monaco-list:focus .selected .monaco-icon-label::after
 {
 	color: inherit !important;
 }
+
 .monaco-list-row.focused.selected .label-description,
 .monaco-list-row.selected .label-description {
 	opacity: .8;

package/vscode/src/vs/base/browser/ui/inputbox/inputBox.css

@@ -1,19 +1,31 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 .monaco-inputbox {
 	position: relative;
 	display: block;
 	padding: 0;
 	box-sizing:	border-box;
 	border-radius: 2px;
+
+	/* Customizable */
 	font-size: inherit;
 }
+
 .monaco-inputbox > .ibwrapper > .input,
 .monaco-inputbox > .ibwrapper > .mirror {
+
+	/* Customizable */
 	padding: 4px 6px;
 }
+
 .monaco-inputbox > .ibwrapper {
 	position: relative;
 	width: 100%;
 }
+
 .monaco-inputbox > .ibwrapper > .input {
 	display: inline-block;
 	box-sizing:	border-box;
@@ -26,20 +38,25 @@
 	resize: none;
 	color: inherit;
 }
+
 .monaco-inputbox > .ibwrapper > input {
 	text-overflow: ellipsis;
 }
+
 .monaco-inputbox > .ibwrapper > textarea.input {
 	display: block;
-	scrollbar-width: none;
+	scrollbar-width: none; /* Firefox: hide scrollbars */
 	outline: none;
 }
+
 .monaco-inputbox > .ibwrapper > textarea.input::-webkit-scrollbar {
-	display: none;
+	display: none; /* Chrome + Safari: hide scrollbar */
 }
+
 .monaco-inputbox > .ibwrapper > textarea.input.empty {
 	white-space: nowrap;
 }
+
 .monaco-inputbox > .ibwrapper > .mirror {
 	position: absolute;
 	display: inline-block;
@@ -51,9 +68,13 @@
 	visibility: hidden;
 	word-wrap: break-word;
 }
+
+/* Context view */
+
 .monaco-inputbox-container {
 	text-align: right;
 }
+
 .monaco-inputbox-container .monaco-inputbox-message {
 	display: inline-block;
 	overflow: hidden;
@@ -66,14 +87,18 @@
 	margin-top: -1px;
 	word-wrap: break-word;
 }
+
+/* Action bar support */
 .monaco-inputbox .monaco-action-bar {
 	position: absolute;
 	right: 2px;
 	top: 4px;
 }
+
 .monaco-inputbox .monaco-action-bar .action-item {
 	margin-left: 2px;
 }
+
 .monaco-inputbox .monaco-action-bar .action-item .codicon {
 	background-repeat: no-repeat;
 	width: 16px;

package/vscode/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css

@@ -1,8 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 .monaco-keybinding {
 	display: flex;
 	align-items: center;
 	line-height: 10px;
 }
+
 .monaco-keybinding > .monaco-keybinding-key {
 	display: inline-block;
 	border-style: solid;
@@ -13,15 +19,19 @@
 	padding: 3px 5px;
 	margin: 0 2px;
 }
+
 .monaco-keybinding > .monaco-keybinding-key:first-child {
 	margin-left: 0;
 }
+
 .monaco-keybinding > .monaco-keybinding-key:last-child {
 	margin-right: 0;
 }
+
 .monaco-keybinding > .monaco-keybinding-key-separator {
 	display: inline-block;
 }
+
 .monaco-keybinding > .monaco-keybinding-key-chord-separator {
 	width: 6px;
 }

package/vscode/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.d.ts

@@ -14,6 +14,9 @@ export interface Matches {
 }
 export interface KeybindingLabelOptions extends IKeybindingLabelStyles {
     renderUnboundKeybindings?: boolean;
+    /**
+     * Default false.
+     */
     disableTitle?: boolean;
 }
 export interface IKeybindingLabelStyles {

package/vscode/src/vs/base/browser/ui/list/list.css

@@ -1,47 +1,67 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 .monaco-list {
 	position: relative;
 	height: 100%;
 	width: 100%;
 	white-space: nowrap;
 }
+
 .monaco-list.mouse-support {
 	user-select: none;
 	-webkit-user-select: none;
 }
+
 .monaco-list > .monaco-scrollable-element {
 	height: 100%;
 }
+
 .monaco-list-rows {
 	position: relative;
 	width: 100%;
 	height: 100%;
 }
+
 .monaco-list.horizontal-scrolling .monaco-list-rows {
 	width: auto;
 	min-width: 100%;
 }
+
 .monaco-list-row {
 	position: absolute;
 	box-sizing: border-box;
 	overflow: hidden;
 	width: 100%;
 }
+
 .monaco-list.mouse-support .monaco-list-row {
 	cursor: pointer;
 	touch-action: none;
 }
+
+/* Make sure the scrollbar renders above overlays (sticky scroll) */
 .monaco-list .monaco-scrollable-element > .scrollbar.vertical,
 .monaco-pane-view > .monaco-split-view2.vertical > .monaco-scrollable-element > .scrollbar.vertical {
 	z-index: 14;
 }
+
+/* for OS X ballistic scrolling */
 .monaco-list-row.scrolling {
 	display: none !important;
 }
+
+/* Focus */
 .monaco-list.element-focused,
 .monaco-list.selection-single,
 .monaco-list.selection-multiple {
 	outline: 0 !important;
 }
+
+/* Filter */
+
 .monaco-list-type-filter-message {
 	position: absolute;
 	box-sizing: border-box;
@@ -55,6 +75,7 @@
 	opacity: 0.7;
 	pointer-events: none;
 }
+
 .monaco-list-type-filter-message:empty {
 	display: none;
 }

package/vscode/src/vs/base/browser/ui/list/list.d.ts

@@ -63,6 +63,11 @@ export interface IIdentityProvider<T> {
     };
 }
 export interface IKeyboardNavigationLabelProvider<T> {
+    /**
+     * Return a keyboard navigation label(s) which will be used by
+     * the list for filtering/navigating. Return `undefined` to make
+     * an element always match.
+     */
     getKeyboardNavigationLabel(element: T): {
         toString(): string | undefined;
     } | {
@@ -94,6 +99,10 @@ export declare const ListDragOverReactions: {
     reject(): IListDragOverReaction;
     accept(): IListDragOverReaction;
 };
+/**
+ * Warning: Once passed to a list, that list takes up
+ * the responsibility of disposing it.
+ */
 export interface IListDragAndDrop<T> extends IDisposable {
     getDragURI(element: T): string | null;
     getDragLabel?(elements: T[], originalEvent: DragEvent): string | undefined;

package/vscode/src/vs/base/browser/ui/list/listView.d.ts

@@ -13,9 +13,9 @@ export interface IListViewDragAndDrop<T> extends IListDragAndDrop<T> {
     getDragElements(element: T): T[];
 }
 export declare enum ListViewTargetSector {
-    TOP = 0,
-    CENTER_TOP = 1,
-    CENTER_BOTTOM = 2,
+    TOP = 0,// [0%-25%)
+    CENTER_TOP = 1,// [25%-50%)
+    CENTER_BOTTOM = 2,// [50%-75%)
     BOTTOM = 3
 }
 export interface IListViewAccessibilityProvider<T> {
@@ -121,6 +121,16 @@ export interface IListView<T> extends ISpliceable<T>, IDisposable {
     rerender(): void;
     layout(height?: number, width?: number): void;
 }
+/**
+ * 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 declare class ListView<T> implements IListView<T> {
     private virtualDelegate;
     private static InstanceCount;
@@ -246,6 +256,10 @@ export declare class ListView<T> implements IListView<T> {
     private getItemIndexFromEventTarget;
     private getVisibleRange;
     protected getRenderRange(renderTop: number, renderHeight: number): IRange;
+    /**
+     * Given a stable rendered state, checks every rendered element whether it needs
+     * to be probed for dynamic height. Adjusts scroll height and top if necessary.
+     */
     protected _rerender(renderTop: number, renderHeight: number, inSmoothScrolling?: boolean): void;
     private probeDynamicHeight;
     getElementDomId(index: number): string;

package/vscode/src/vs/base/browser/ui/list/listWidget.d.ts

@@ -133,6 +133,21 @@ export interface IListStyles {
     tableOddRowsBackgroundColor: string | undefined;
 }
 export declare const unthemedListStyles: IListStyles;
+/**
+ * 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 declare class List<T> implements ISpliceable<T>, IDisposable {
     private user;
     private _options;
@@ -164,6 +179,13 @@ export declare class List<T> implements ISpliceable<T>, IDisposable {
     get onMouseOut(): Event<IListMouseEvent<T>>;
     get onTouchStart(): Event<IListTouchEvent<T>>;
     get onTap(): Event<IListGestureEvent<T>>;
+    /**
+     * Possible context menu trigger events:
+     * - ContextMenu key
+     * - Shift F10
+     * - Ctrl Option Shift M (macOS with VoiceOver)
+     * - Mouse right click
+     */
     get onContextMenu(): Event<IListContextMenuEvent<T>>;
     get onKeyDown(): Event<KeyboardEvent>;
     get onKeyUp(): Event<KeyboardEvent>;
@@ -222,6 +244,10 @@ export declare class List<T> implements ISpliceable<T>, IDisposable {
     getFocus(): number[];
     getFocusedElements(): T[];
     reveal(index: number, relativeTop?: number, paddingTop?: number): void;
+    /**
+     * Returns the relative position of an element rendered in the list.
+     * Returns `null` if the element isn't *entirely* in the visible viewport.
+     */
     getRelativeTop(index: number, paddingTop?: number): number | null;
     isDOMFocused(): boolean;
     getHTMLElement(): HTMLElement;

package/vscode/src/vs/base/browser/ui/list/rangeMap.d.ts

@@ -6,8 +6,21 @@ export interface IRangedGroup {
     range: IRange;
     size: number;
 }
+/**
+ * Returns the intersection between a ranged group and a range.
+ * Returns `[]` if the intersection is empty.
+ */
 export declare function groupIntersect(range: IRange, groups: IRangedGroup[]): IRangedGroup[];
+/**
+ * Shifts a range by that `much`.
+ */
 export declare function shift({ start, end }: IRange, much: number): IRange;
+/**
+ * Consolidates a collection of ranged groups.
+ *
+ * Consolidation is the process of merging consecutive ranged groups
+ * that share the same `size`.
+ */
 export declare function consolidate(groups: IRangedGroup[]): IRangedGroup[];
 export interface IRangeMap {
     readonly size: number;
@@ -26,9 +39,25 @@ export declare class RangeMap implements IRangeMap {
     set paddingTop(paddingTop: number);
     constructor(topPadding?: number);
     splice(index: number, deleteCount: number, items?: IItem[]): void;
+    /**
+     * Returns the number of items in the range map.
+     */
     get count(): number;
+    /**
+     * Returns the sum of the sizes of all items in the range map.
+     */
     get size(): number;
+    /**
+     * Returns the index of the item at the given position.
+     */
     indexAt(position: number): number;
+    /**
+     * Returns the index of the item right after the item at the
+     * index of the given position.
+     */
     indexAfter(position: number): number;
+    /**
+     * Returns the start position of the item at the given index.
+     */
     positionAt(index: number): number;
 }

package/vscode/src/vs/base/browser/ui/list/rowCache.d.ts

@@ -11,11 +11,23 @@ export declare class RowCache<T> implements IDisposable {
     private readonly transactionNodesPendingRemoval;
     private inTransaction;
     constructor(renderers: Map<string, IListRenderer<T, any>>);
+    /**
+     * Returns a row either by creating a new one or reusing
+     * a previously released row which shares the same templateId.
+     *
+     * @returns A row and `isReusingConnectedDomNode` if the row's node is already in the dom in a stale position.
+     */
     alloc(templateId: string): {
         row: IRow;
         isReusingConnectedDomNode: boolean;
     };
+    /**
+     * Releases the row for eventual reuse.
+     */
     release(row: IRow): void;
+    /**
+     * Begin a set of changes that use the cache. This lets us skip work when a row is removed and then inserted again.
+     */
     transact(makeChanges: () => void): void;
     private releaseRow;
     private doRemoveNode;

package/vscode/src/vs/base/browser/ui/mouseCursor/mouseCursor.css

@@ -1,3 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 .monaco-mouse-cursor-text {
 	cursor: text;
 }

package/vscode/src/vs/base/browser/ui/progressbar/progressbar.css

@@ -1,8 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 .monaco-progress-container {
 	width: 100%;
 	height: 2px;
-	overflow: hidden;
+	overflow: hidden; /* keep progress bit in bounds */
 }
+
 .monaco-progress-container .progress-bit {
 	width: 2%;
 	height: 2px;
@@ -10,16 +16,20 @@
 	left: 0;
 	display: none;
 }
+
 .monaco-progress-container.active .progress-bit {
 	display: inherit;
 }
+
 .monaco-progress-container.discrete .progress-bit {
 	left: 0;
 	transition: width 100ms linear;
 }
+
 .monaco-progress-container.discrete.done .progress-bit {
 	width: 100%;
 }
+
 .monaco-progress-container.infinite .progress-bit {
 	animation-name: progress;
 	animation-duration: 4s;
@@ -27,7 +37,25 @@
 	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);
 }
+
+/**
+ * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
+ * that container. Since translateX is relative to the progress bit size, we have to multiple it with
+ * its relative size to the parent container:
+ * parent width: 5000%
+ *    bit width: 100%
+ * translateX should be as follow:
+ *  50%: 5000% * 50% - 50% (set to center) = 2450%
+ * 100%: 5000% * 100% - 100% (do not overflow) = 4900%
+ */
 @keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }

package/vscode/src/vs/base/browser/ui/progressbar/progressbar.d.ts

@@ -5,7 +5,18 @@ export interface IProgressBarStyles {
     progressBarBackground: string | undefined;
 }
 export declare const unthemedProgressBarOptions: IProgressBarOptions;
+/**
+ * A progress bar with support for infinite or discrete progress.
+ */
 export declare 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;
     private static readonly PROGRESS_SIGNAL_DEFAULT_DELAY;
     private workedVal;
@@ -18,14 +29,36 @@ export declare class ProgressBar extends Disposable {
     constructor(container: HTMLElement, options?: IProgressBarOptions);
     private create;
     private off;
+    /**
+     * Indicates to the progress bar that all work is done.
+     */
     done(): ProgressBar;
+    /**
+     * Stops the progressbar from showing any progress instantly without fading out.
+     */
     stop(): ProgressBar;
     private doDone;
+    /**
+     * Use this mode to indicate progress that has no total number of work units.
+     */
     infinite(): ProgressBar;
     private infiniteLongRunning;
+    /**
+     * 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.
+     */
     total(value: number): ProgressBar;
+    /**
+     * Finds out if this progress bar is configured with total work
+     */
     hasTotal(): boolean;
+    /**
+     * Tells the progress bar that an increment of work has been completed.
+     */
     worked(value: number): ProgressBar;
+    /**
+     * Tells the progress bar the total amount of work that has been completed.
+     */
     setWorked(value: number): ProgressBar;
     private doSetWorked;
     getContainer(): HTMLElement;