@codingame/monaco-vscode-api 20.1.1 → 20.2.0

package/vscode/src/vs/base/browser/performance.d.ts

@@ -1,9 +1,27 @@
 export declare namespace inputLatency {
+    /**
+     * Record the start of the keydown event.
+     */
     function onKeyDown(): void;
+    /**
+     * Record the start of the beforeinput event.
+     */
     function onBeforeInput(): void;
+    /**
+     * Record the start of the input event.
+     */
     function onInput(): void;
+    /**
+     * Record the start of the keyup event.
+     */
     function onKeyUp(): void;
+    /**
+     * Record the start of the selectionchange event.
+     */
     function onSelectionChange(): void;
+    /**
+     * Record the start of the animation frame performing the rendering.
+     */
     function onRenderStart(): void;
     interface IInputLatencyMeasurements {
         keydown: IInputLatencySingleMeasurement;
@@ -17,5 +35,9 @@ export declare namespace inputLatency {
         min: number;
         max: number;
     }
+    /**
+     * Gets all input latency samples and clears the internal buffers to start recording a new set
+     * of samples.
+     */
     function getAndClearMeasurements(): IInputLatencyMeasurements | undefined;
 }

package/vscode/src/vs/base/browser/pixelRatio.d.ts

@@ -8,5 +8,12 @@ declare class PixelRatioMonitorFacade {
     private _getOrCreatePixelRatioMonitor;
     getInstance(targetWindow: Window): IPixelRatioMonitor;
 }
+/**
+ * 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 declare const PixelRatio: PixelRatioMonitorFacade;
 export {};

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

@@ -1,7 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 .monaco-action-bar {
 	white-space: nowrap;
 	height: 100%;
 }
+
 .monaco-action-bar .actions-container {
 	display: flex;
 	margin: 0 auto;
@@ -10,51 +16,65 @@
 	width: 100%;
 	align-items: center;
 }
+
 .monaco-action-bar.vertical .actions-container {
 	display: inline-block;
 }
+
 .monaco-action-bar .action-item {
 	display: block;
 	align-items: center;
 	justify-content: center;
 	cursor: pointer;
-	position: relative;
+	position: relative;  /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */
 }
+
 .monaco-action-bar .action-item.disabled {
 	cursor: default;
 }
+
 .monaco-action-bar .action-item .icon,
 .monaco-action-bar .action-item .codicon {
 	display: block;
 }
+
 .monaco-action-bar .action-item .codicon {
 	display: flex;
 	align-items: center;
 	width: 16px;
 	height: 16px;
 }
+
 .monaco-action-bar .action-label {
 	display: flex;
 	font-size: 11px;
 	padding: 3px;
 	border-radius: 5px;
 }
+
 .monaco-action-bar .action-item.disabled .action-label:not(.icon) ,
 .monaco-action-bar .action-item.disabled .action-label:not(.icon)::before,
 .monaco-action-bar .action-item.disabled .action-label:not(.icon):hover {
 	color: var(--vscode-disabledForeground);
 }
+
+/* Unable to change color of SVGs, hence opacity is used */
 .monaco-action-bar .action-item.disabled .action-label.icon ,
 .monaco-action-bar .action-item.disabled .action-label.icon::before,
 .monaco-action-bar .action-item.disabled .action-label.icon:hover {
 	opacity: 0.6;
 }
+
+/* Vertical actions */
+
 .monaco-action-bar.vertical {
 	text-align: left;
 }
+
 .monaco-action-bar.vertical .action-item {
 	display: block;
 }
+
 .monaco-action-bar.vertical .action-label.separator {
 	display: block;
 	border-bottom: 1px solid #bbb;
@@ -62,6 +82,7 @@
 	margin-left: .8em;
 	margin-right: .8em;
 }
+
 .monaco-action-bar .action-item .action-label.separator {
 	width: 1px;
 	height: 16px;
@@ -71,11 +92,14 @@
 	padding: 0;
 	background-color: #bbb;
 }
+
 .secondary-actions .monaco-action-bar .action-label {
 	margin-left: 6px;
 }
+
+/* Action Items */
 .monaco-action-bar .action-item.select-container {
-	overflow: hidden;
+	overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */
 	flex: 1;
 	max-width: 170px;
 	min-width: 60px;
@@ -84,14 +108,17 @@
 	justify-content: center;
 	margin-right: 10px;
 }
+
 .monaco-action-bar .action-item.action-dropdown-item {
 	display: flex;
 }
+
 .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator {
 	display: flex;
 	align-items: center;
 	cursor: default;
 }
+
 .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div {
 	width: 1px;
 }

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

@@ -36,6 +36,11 @@ export interface IActionBarOptions {
     readonly preventLoopNavigation?: boolean;
     readonly focusOnlyEnabledItems?: boolean;
     readonly hoverDelegate?: IHoverDelegate;
+    /**
+     * If true, toggled primary items are highlighted with a background color.
+     * Some action bars exclusively use icon states, we don't want to enable this for them.
+     * Thus, this is opt-in.
+     */
     readonly highlightToggledItems?: boolean;
 }
 export interface IActionOptions extends IActionViewItemOptions {

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

@@ -1,4 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 .monaco-aria-container {
-	position: absolute;
+	position: absolute; /* try to hide from window but not from screen readers */
 	left:-999em;
 }

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

@@ -1,4 +1,10 @@
 export declare function setARIAContainer(parent: HTMLElement): void;
+/**
+ * Given the provided message, will make sure that it is read as alert to screen readers.
+ */
 export declare function alert(msg: string): void;
+/**
+ * Given the provided message, will make sure that it is read as status to screen readers.
+ */
 export declare function status(msg: string): void;
 export type AriaRole = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem" | (string & {});

package/vscode/src/vs/base/browser/ui/button/button.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-text-button {
 	box-sizing: border-box;
 	display: flex;
@@ -11,21 +16,26 @@
 	border: 1px solid var(--vscode-button-border, transparent);
 	line-height: 18px;
 }
+
 .monaco-text-button:focus {
 	outline-offset: 2px !important;
 }
+
 .monaco-text-button:hover {
 	text-decoration: none !important;
 }
+
 .monaco-button.disabled:focus,
 .monaco-button.disabled {
 	opacity: 0.4 !important;
 	cursor: default;
 }
+
 .monaco-text-button .codicon {
 	margin: 0 0.2em;
 	color: inherit !important;
 }
+
 .monaco-text-button.monaco-text-button-with-short-label {
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -33,14 +43,17 @@
 	overflow: hidden;
 	height: 28px;
 }
+
 .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label {
 	flex-basis: 100%;
 }
+
 .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
 	flex-grow: 1;
 	width: 0;
 	overflow: hidden;
 }
+
 .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label,
 .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
 	display: flex;
@@ -50,32 +63,40 @@
 	font-style: inherit;
 	padding: 4px 0;
 }
+
 .monaco-button-dropdown {
 	display: flex;
 	cursor: pointer;
 }
+
 .monaco-button-dropdown.disabled {
 	cursor: default;
 }
+
 .monaco-button-dropdown > .monaco-button:focus {
 	outline-offset: -1px !important;
 }
+
 .monaco-button-dropdown.disabled > .monaco-button.disabled,
 .monaco-button-dropdown.disabled > .monaco-button.disabled:focus,
 .monaco-button-dropdown.disabled > .monaco-button-dropdown-separator {
 	opacity: 0.4 !important;
 }
+
 .monaco-button-dropdown > .monaco-button.monaco-text-button {
 	border-right-width: 0 !important;
 }
+
 .monaco-button-dropdown .monaco-button-dropdown-separator {
 	padding: 4px 0;
 	cursor: default;
 }
+
 .monaco-button-dropdown .monaco-button-dropdown-separator > div {
 	height: 100%;
 	width: 1px;
 }
+
 .monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
 	border: 1px solid var(--vscode-button-border, transparent);
 	border-left-width: 0 !important;
@@ -83,57 +104,71 @@
 	display: flex;
 	align-items: center;
 }
+
 .monaco-button-dropdown > .monaco-button.monaco-text-button {
 	border-radius: 2px 0 0 2px;
 }
+
 .monaco-description-button {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin: 4px 5px;
+	margin: 4px 5px; /* allows button focus outline to be visible */
 }
+
 .monaco-description-button .monaco-button-description {
 	font-style: italic;
 	font-size: 11px;
 	padding: 4px 20px;
 }
+
 .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;
 }
+
+/* default color styles - based on CSS variables */
+
 .monaco-button.default-colors,
 .monaco-button-dropdown.default-colors > .monaco-button{
 	color: var(--vscode-button-foreground);
 	background-color: var(--vscode-button-background);
 }
+
 .monaco-button.default-colors:hover,
 .monaco-button-dropdown.default-colors > .monaco-button:hover {
 	background-color: var(--vscode-button-hoverBackground);
 }
+
 .monaco-button.default-colors.secondary,
 .monaco-button-dropdown.default-colors > .monaco-button.secondary {
 	color: var(--vscode-button-secondaryForeground);
 	background-color: var(--vscode-button-secondaryBackground);
 }
+
 .monaco-button.default-colors.secondary:hover,
 .monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
 	background-color: var(--vscode-button-secondaryHoverBackground);
 }
+
 .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
 	background-color: var(--vscode-button-background);
 	border-top: 1px solid var(--vscode-button-border);
 	border-bottom: 1px solid var(--vscode-button-border);
 }
+
 .monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
 	background-color: var(--vscode-button-secondaryBackground);
 }
+
 .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
 	background-color: var(--vscode-button-separator);
 }

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

@@ -8,6 +8,9 @@ import { ThemeIcon } from "../../../common/themables.js";
 import { IActionProvider } from "../dropdown/dropdown.js";
 export interface IButtonOptions extends Partial<IButtonStyles> {
     readonly title?: boolean | string;
+    /**
+     * Will fallback to `title` if not set.
+     */
     readonly ariaLabel?: string;
     readonly supportIcons?: boolean;
     readonly supportShortLabel?: boolean;
@@ -74,6 +77,9 @@ export interface IButtonWithDropdownOptions extends IButtonOptions {
     readonly actions: readonly IAction[] | IActionProvider;
     readonly actionRunner?: IActionRunner;
     readonly addPrimaryActionToDropdown?: boolean;
+    /**
+     * dropdown menus with higher layers are rendered higher in z-index order
+     */
     readonly dropdownLayer?: number;
 }
 export declare class ButtonWithDropdown extends Disposable implements IButton {
@@ -135,6 +141,9 @@ export declare class ButtonBar {
     addButtonWithDropdown(options: IButtonWithDropdownOptions): IButton;
     private pushButton;
 }
+/**
+ * This is a Button that supports an icon to the left, and markdown to the right, with proper separation and wrapping the markdown label, which Button doesn't do.
+ */
 export declare class ButtonWithIcon extends Button {
     private _iconElement;
     private _mdlabelElement;

package/vscode/src/vs/base/browser/ui/codicons/codicon/codicon-modifiers.css

@@ -1,20 +1,31 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 .codicon-wrench-subaction {
 	opacity: 0.5;
 }
+
 @keyframes codicon-spin {
 	100% {
 		transform:rotate(360deg);
 	}
 }
+
 .codicon-sync.codicon-modifier-spin,
 .codicon-loading.codicon-modifier-spin,
 .codicon-gear.codicon-modifier-spin,
 .codicon-notebook-state-executing.codicon-modifier-spin {
+	/* Use steps to throttle FPS to reduce CPU usage */
 	animation: codicon-spin 1.5s steps(30) infinite;
 }
+
 .codicon-modifier-disabled {
 	opacity: 0.4;
 }
+
+/* custom speed & easing for loading icon */
 .codicon-loading,
 .codicon-tree-item-loading::before {
 	animation-duration: 1s !important;

package/vscode/src/vs/base/browser/ui/codicons/codicon/codicon.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.
+ *--------------------------------------------------------------------------------------------*/
+
 @font-face {
 	font-family: "codicon";
 	font-display: block;
 	src: url("./codicon.ttf") format("truetype");
 }
+
 .codicon[class*='codicon-'] {
 	font: normal normal normal 16px/1 codicon;
 	display: inline-block;
@@ -15,3 +21,5 @@
 	user-select: none;
 	-webkit-user-select: none;
 }
+
+/* icon rules are dynamically created by the platform theme service (see iconsStyleSheet.ts) */

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

@@ -1,6 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 .context-view {
 	position: absolute;
 }
+
 .context-view.fixed {
 	all: initial;
 	font-family: inherit;

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

@@ -26,6 +26,12 @@ export declare enum AnchorAxisAlignment {
     HORIZONTAL = 1
 }
 export interface IDelegate {
+    /**
+     * The anchor where to position the context view.
+     * Use a `HTMLElement` to position the view at the element,
+     * a `StandardMouseEvent` to position it at the mouse position
+     * or an `IAnchor` to position it at a specific location.
+     */
     getAnchor(): HTMLElement | StandardMouseEvent | IAnchor;
     render(container: HTMLElement): IDisposable | null;
     focus?(): void;
@@ -36,6 +42,9 @@ export interface IDelegate {
     canRelayout?: boolean;
     onDOMEvent?(e: Event, activeElement: HTMLElement): void;
     onHide?(data?: unknown): void;
+    /**
+     * context views with higher layers are rendered higher in z-index order
+     */
     layer?: number;
 }
 export interface IContextViewProvider {
@@ -67,6 +76,11 @@ export interface ILayoutAnchor {
     mode?: LayoutAnchorMode;
     position: LayoutAnchorPosition;
 }
+/**
+ * Lays out a one dimensional view next to an anchor in a viewport.
+ *
+ * @returns The view offset within the viewport.
+ */
 export declare function layout(viewportSize: number, viewSize: number, anchor: ILayoutAnchor): number;
 export declare class ContextView extends Disposable {
     private static readonly BUBBLE_UP_EVENTS;

package/vscode/src/vs/base/browser/ui/countBadge/countBadge.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-count-badge {
 	padding: 3px 6px;
 	border-radius: 11px;
@@ -10,6 +15,7 @@
 	display: inline-block;
 	box-sizing: border-box;
 }
+
 .monaco-count-badge.long {
 	padding: 2px 3px;
 	border-radius: 2px;

package/vscode/src/vs/base/browser/ui/dnd/dnd.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-drag-image {
 	display: inline-block;
 	padding: 1px 7px;
@@ -5,10 +10,17 @@
 	font-size: 12px;
 	position: absolute;
 	z-index: 1000;
+
+	/* Default styles */
 	background-color: var(--vscode-list-activeSelectionBackground);
 	color: var(--vscode-list-activeSelectionForeground);
 	outline: 1px solid var(--vscode-list-focusOutline);
 	outline-offset: -1px;
+
+	/*
+	 * Browsers apply an effect to the drag image when the div becomes too
+	 * large which makes them unreadable. Use max width so it does not happen
+	 */
 	max-width: 120px;
 	overflow: hidden;
 	text-overflow: ellipsis;

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

@@ -1,7 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 .monaco-dropdown {
 	height: 100%;
 	padding: 0;
 }
+
 .monaco-dropdown > .dropdown-label {
 	cursor: pointer;
 	height: 100%;
@@ -9,17 +15,21 @@
 	align-items: center;
 	justify-content: center;
 }
+
 .monaco-dropdown > .dropdown-label > .action-label.disabled {
 	cursor: default;
 }
+
 .monaco-dropdown-with-primary {
 	display: flex !important;
 	flex-direction: row;
 	border-radius: 5px;
 }
+
 .monaco-dropdown-with-primary > .action-container > .action-label {
 	margin-right: 0;
 }
+
 .monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
 	font-size: 12px;
 	padding-left: 0px;
@@ -27,6 +37,7 @@
 	line-height: 16px;
 	margin-left: -3px;
 }
+
 .monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
 	display: block;
 	background-size: 16px;

package/vscode/src/vs/base/browser/ui/findinput/findInput.css

@@ -1,50 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+/* ---------- Find input ---------- */
+
 .monaco-findInput {
 	position: relative;
 }
+
 .monaco-findInput .monaco-inputbox {
 	font-size: 13px;
 	width: 100%;
 }
+
 .monaco-findInput > .controls {
 	position: absolute;
 	top: 3px;
 	right: 2px;
 }
+
 .vs .monaco-findInput.disabled {
 	background-color: #E1E1E1;
 }
+
+/* Theming */
 .vs-dark .monaco-findInput.disabled {
 	background-color: #333;
 }
+
+/* Highlighting */
 .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,
 .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;
 }
+
 @keyframes monaco-findInput-highlight-0 {
 	0% { background: rgba(253, 255, 0, 0.8); }
 	100% { background: transparent; }
 }
 @keyframes monaco-findInput-highlight-1 {
 	0% { background: rgba(253, 255, 0, 0.8); }
+	/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
 	99% { background: transparent; }
 }
+
 @keyframes monaco-findInput-highlight-dark-0 {
 	0% { background: rgba(255, 255, 255, 0.44); }
 	100% { background: transparent; }
 }
 @keyframes monaco-findInput-highlight-dark-1 {
 	0% { background: rgba(255, 255, 255, 0.44); }
+	/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
 	99% { background: transparent; }
 }