ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-10 02:02:35 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge from vscode 8e0f348413f4f616c23a88ae30030efa85811973 (#6381)

Browse Source 
* Merge from vscode 8e0f348413f4f616c23a88ae30030efa85811973

* disable strict null check
This commit is contained in:
Anthony Dresser
2019-07-15 22:35:46 -07:00
committed by GitHub
parent f720ec642f
commit 0b7e7ddbf9
2406 changed files with 59140 additions and 35464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/vs/base/browser/ui/actionbar/actionbar.ts
View File

@@ -6,7 +6,7 @@
import 'vs/css!./actionbar';
import * as platform from 'vs/base/common/platform';
import * as nls from 'vs/nls';
import { Disposable, dispose } from 'vs/base/common/lifecycle';
import { Disposable, dispose, IDisposable } from 'vs/base/common/lifecycle';
import { SelectBox, ISelectOptionItem, ISelectBoxOptions } from 'vs/base/browser/ui/selectBox/selectBox';
import { IAction, IActionRunner, Action, IActionChangeEvent, ActionRunner, IRunEvent } from 'vs/base/common/actions';
import * as DOM from 'vs/base/browser/dom';
@@ -16,16 +16,14 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
import { Event, Emitter } from 'vs/base/common/event';
import { asArray } from 'vs/base/common/arrays';
export interface IActionViewItem {
export interface IActionViewItem extends IDisposable {
actionRunner: IActionRunner;
setActionContext(context: any): void;
render(element: HTMLElement): void;
isEnabled(): boolean;
focus(fromRight?: boolean): void;
blur(): void;
dispose(): void;
}
export interface IBaseActionViewItemOptions {
@@ -407,16 +405,16 @@ export class ActionBar extends Disposable implements IActionRunner {
protected actionsList: HTMLElement;
private _onDidBlur = this._register(new Emitter<void>());
get onDidBlur(): Event<void> { return this._onDidBlur.event; }
readonly onDidBlur: Event<void> = this._onDidBlur.event;
private _onDidCancel = this._register(new Emitter<void>());
get onDidCancel(): Event<void> { return this._onDidCancel.event; }
readonly onDidCancel: Event<void> = this._onDidCancel.event;
private _onDidRun = this._register(new Emitter<IRunEvent>());
get onDidRun(): Event<IRunEvent> { return this._onDidRun.event; }
readonly onDidRun: Event<IRunEvent> = this._onDidRun.event;
private _onDidBeforeRun = this._register(new Emitter<IRunEvent>());
get onDidBeforeRun(): Event<IRunEvent> { return this._onDidBeforeRun.event; }
readonly onDidBeforeRun: Event<IRunEvent> = this._onDidBeforeRun.event;
constructor(container: HTMLElement, options: IActionBarOptions = defaultOptions) {
super();
@@ -593,8 +591,8 @@ export class ActionBar extends Disposable implements IActionRunner {
return this.domNode;
}
push(arg: IAction | IAction[], options: IActionOptions = {}): void {
const actions: IAction[] = asArray(arg);
push(arg: IAction | ReadonlyArray<IAction>, options: IActionOptions = {}): void {
const actions: ReadonlyArray<IAction> = Array.isArray(arg) ? arg : [arg];
let index = types.isNumber(options.index) ? options.index : null;

8
src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.css
View File

@@ -31,12 +31,16 @@
}
.monaco-breadcrumbs .monaco-breadcrumb-item:not(:nth-child(2))::before {
background-image: url(./collapsed.svg);
background-image: url(./tree-collapsed-light.svg);
opacity: .7;
background-size: 16px;
background-position: 50% 50%;
}
.vs-dark .monaco-breadcrumbs .monaco-breadcrumb-item:not(:nth-child(2))::before {
background-image: url(./collpased-dark.svg);
background-image: url(./tree-collapsed-dark.svg);
}
.hc-black .monaco-breadcrumbs .monaco-breadcrumb-item:not(:nth-child(2))::before {
background-image: url(./tree-collapsed-hc.svg);
}

27
src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts
View File

@@ -9,7 +9,7 @@ import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableEle
import { commonPrefixLength } from 'vs/base/common/arrays';
import { Color } from 'vs/base/common/color';
import { Emitter, Event } from 'vs/base/common/event';
import { dispose, IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
import { dispose, IDisposable, DisposableStore } from 'vs/base/common/lifecycle';
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import 'vs/css!./breadcrumbsWidget';
@@ -57,7 +57,7 @@ export interface IBreadcrumbsItemEvent {
export class BreadcrumbsWidget {
private readonly _disposables = new Array<IDisposable>();
private readonly _disposables = new DisposableStore();
private readonly _domNode: HTMLDivElement;
private readonly _styleElement: HTMLStyleElement;
private readonly _scrollable: DomScrollableElement;
@@ -94,26 +94,25 @@ export class BreadcrumbsWidget {
useShadows: false,
scrollYToX: true
});
this._disposables.push(this._scrollable);
this._disposables.push(dom.addStandardDisposableListener(this._domNode, 'click', e => this._onClick(e)));
this._disposables.add(this._scrollable);
this._disposables.add(dom.addStandardDisposableListener(this._domNode, 'click', e => this._onClick(e)));
container.appendChild(this._scrollable.getDomNode());
this._styleElement = dom.createStyleSheet(this._domNode);
let focusTracker = dom.trackFocus(this._domNode);
this._disposables.push(focusTracker);
this._disposables.push(focusTracker.onDidBlur(_ => this._onDidChangeFocus.fire(false)));
this._disposables.push(focusTracker.onDidFocus(_ => this._onDidChangeFocus.fire(true)));
const focusTracker = dom.trackFocus(this._domNode);
this._disposables.add(focusTracker);
this._disposables.add(focusTracker.onDidBlur(_ => this._onDidChangeFocus.fire(false)));
this._disposables.add(focusTracker.onDidFocus(_ => this._onDidChangeFocus.fire(true)));
}
dispose(): void {
dispose(this._disposables);
this._disposables.dispose();
dispose(this._pendingLayout);
this._onDidSelectItem.dispose();
this._onDidFocusItem.dispose();
this._onDidChangeFocus.dispose();
this._domNode.remove();
this._disposables.length = 0;
this._nodes.length = 0;
this._freeNodes.length = 0;
}
@@ -134,14 +133,14 @@ export class BreadcrumbsWidget {
}
private _updateDimensions(dim: dom.Dimension): IDisposable {
let disposables: IDisposable[] = [];
disposables.push(dom.modify(() => {
const disposables = new DisposableStore();
disposables.add(dom.modify(() => {
this._dimension = dim;
this._domNode.style.width = `${dim.width}px`;
this._domNode.style.height = `${dim.height}px`;
disposables.push(this._updateScrollbar());
disposables.add(this._updateScrollbar());
}));
return combinedDisposable(disposables);
return disposables;
}
private _updateScrollbar(): IDisposable {

1
src/vs/base/browser/ui/breadcrumbs/collapsed.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#646465" d="M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 139 B

1
src/vs/base/browser/ui/breadcrumbs/collpased-dark.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#E8E8E8" d="M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 139 B

3
src/vs/base/browser/ui/breadcrumbs/tree-collapsed-dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.7146 12.3573L6.33332 12.976L11 8.30935V7.69064L6.33332 3.02397L5.7146 3.64269L10.0719 7.99999Z" fill="#C5C5C5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

3
src/vs/base/browser/ui/breadcrumbs/tree-collapsed-hc.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.7146 12.3573L6.33332 12.976L11 8.30935V7.69063L6.33332 3.02396L5.7146 3.64268L10.0719 7.99999Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

3
src/vs/base/browser/ui/breadcrumbs/tree-collapsed-light.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.7146 12.3573L6.33332 12.976L11 8.30935V7.69063L6.33332 3.02396L5.7146 3.64268L10.0719 7.99999Z" fill="#424242"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

14
src/vs/base/browser/ui/centered/centeredViewLayout.ts
View File

@@ -7,7 +7,7 @@ import { SplitView, Orientation, ISplitViewStyles, IView as ISplitViewView } fro
import { $ } from 'vs/base/browser/dom';
import { Event } from 'vs/base/common/event';
import { IView } from 'vs/base/browser/ui/grid/gridview';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { IDisposable, DisposableStore } from 'vs/base/common/lifecycle';
import { Color } from 'vs/base/common/color';
export interface CenteredViewState {
@@ -48,7 +48,7 @@ export interface ICenteredViewStyles extends ISplitViewStyles {
background: Color;
}
export class CenteredViewLayout {
export class CenteredViewLayout implements IDisposable {
private splitView?: SplitView;
private width: number = 0;
@@ -56,7 +56,7 @@ export class CenteredViewLayout {
private style: ICenteredViewStyles;
private didLayout = false;
private emptyViews: ISplitViewView[] | undefined;
private splitViewDisposables: IDisposable[] = [];
private readonly splitViewDisposables = new DisposableStore();
constructor(private container: HTMLElement, private view: IView, public readonly state: CenteredViewState = { leftMarginRatio: GOLDEN_RATIO.leftMarginRatio, rightMarginRatio: GOLDEN_RATIO.rightMarginRatio }) {
this.container.appendChild(this.view.element);
@@ -117,13 +117,13 @@ export class CenteredViewLayout {
styles: this.style
});
this.splitViewDisposables.push(this.splitView.onDidSashChange(() => {
this.splitViewDisposables.add(this.splitView.onDidSashChange(() => {
if (this.splitView) {
this.state.leftMarginRatio = this.splitView.getViewSize(0) / this.width;
this.state.rightMarginRatio = this.splitView.getViewSize(2) / this.width;
}
}));
this.splitViewDisposables.push(this.splitView.onDidSashReset(() => {
this.splitViewDisposables.add(this.splitView.onDidSashReset(() => {
this.state.leftMarginRatio = GOLDEN_RATIO.leftMarginRatio;
this.state.rightMarginRatio = GOLDEN_RATIO.rightMarginRatio;
this.resizeMargins();
@@ -138,7 +138,7 @@ export class CenteredViewLayout {
if (this.splitView) {
this.container.removeChild(this.splitView.el);
}
this.splitViewDisposables = dispose(this.splitViewDisposables);
this.splitViewDisposables.clear();
if (this.splitView) {
this.splitView.dispose();
}
@@ -153,7 +153,7 @@ export class CenteredViewLayout {
}
dispose(): void {
this.splitViewDisposables = dispose(this.splitViewDisposables);
this.splitViewDisposables.dispose();
if (this.splitView) {
this.splitView.dispose();

17
src/vs/base/browser/ui/checkbox/checkbox.ts
View File

@@ -12,7 +12,7 @@ import { Emitter, Event } from 'vs/base/common/event';
import { KeyCode } from 'vs/base/common/keyCodes';
import * as objects from 'vs/base/common/objects';
import { BaseActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { DisposableStore } from 'vs/base/common/lifecycle';
export interface ICheckboxOpts extends ICheckboxStyles {
readonly actionClassName?: string;
@@ -31,19 +31,19 @@ const defaultOpts = {
export class CheckboxActionViewItem extends BaseActionViewItem {
private checkbox: Checkbox;
private disposables: IDisposable[] = [];
private readonly disposables = new DisposableStore();
render(container: HTMLElement): void {
this.element = container;
this.disposables = dispose(this.disposables);
this.disposables.clear();
this.checkbox = new Checkbox({
actionClassName: this._action.class,
isChecked: this._action.checked,
title: this._action.label
});
this.disposables.push(this.checkbox);
this.checkbox.onChange(() => this._action.checked = this.checkbox.checked, this, this.disposables);
this.disposables.add(this.checkbox);
this.disposables.add(this.checkbox.onChange(() => this._action.checked = this.checkbox.checked, this));
this.element.appendChild(this.checkbox.domNode);
}
@@ -64,19 +64,18 @@ export class CheckboxActionViewItem extends BaseActionViewItem {
}
dipsose(): void {
this.disposables = dispose(this.disposables);
this.disposables.dispose();
super.dispose();
}
}
export class Checkbox extends Widget {
private readonly _onChange = this._register(new Emitter<boolean>());
get onChange(): Event<boolean /* via keyboard */> { return this._onChange.event; }
readonly onChange: Event<boolean /* via keyboard */> = this._onChange.event;
private readonly _onKeyDown = this._register(new Emitter<IKeyboardEvent>());
get onKeyDown(): Event<IKeyboardEvent> { return this._onKeyDown.event; }
readonly onKeyDown: Event<IKeyboardEvent> = this._onKeyDown.event;
private readonly _opts: ICheckboxOpts;
readonly domNode: HTMLElement;

19
src/vs/base/browser/ui/contextview/contextview.ts
View File

@@ -5,7 +5,7 @@
import 'vs/css!./contextview';
import * as DOM from 'vs/base/browser/dom';
import { IDisposable, dispose, toDisposable, combinedDisposable, Disposable } from 'vs/base/common/lifecycle';
import { IDisposable, dispose, toDisposable, Disposable, DisposableStore } from 'vs/base/common/lifecycle';
import { Range } from 'vs/base/common/range';
export interface IAnchor {
@@ -128,21 +128,21 @@ export class ContextView extends Disposable {
this.container = container;
this.container.appendChild(this.view);
const toDisposeOnSetContainer: IDisposable[] = [];
const toDisposeOnSetContainer = new DisposableStore();
ContextView.BUBBLE_UP_EVENTS.forEach(event => {
toDisposeOnSetContainer.push(DOM.addStandardDisposableListener(this.container!, event, (e: Event) => {
toDisposeOnSetContainer.add(DOM.addStandardDisposableListener(this.container!, event, (e: Event) => {
this.onDOMEvent(e, false);
}));
});
ContextView.BUBBLE_DOWN_EVENTS.forEach(event => {
toDisposeOnSetContainer.push(DOM.addStandardDisposableListener(this.container!, event, (e: Event) => {
toDisposeOnSetContainer.add(DOM.addStandardDisposableListener(this.container!, event, (e: Event) => {
this.onDOMEvent(e, true);
}, true));
});
this.toDisposeOnSetContainer = combinedDisposable(toDisposeOnSetContainer);
this.toDisposeOnSetContainer = toDisposeOnSetContainer;
}
}
@@ -260,12 +260,13 @@ export class ContextView extends Disposable {
}
hide(data?: any): void {
if (this.delegate && this.delegate.onHide) {
this.delegate.onHide(data);
}
const delegate = this.delegate;
this.delegate = null;
if (delegate && delegate.onHide) {
delegate.onHide(data);
}
if (this.toDisposeOnClean) {
this.toDisposeOnClean.dispose();
this.toDisposeOnClean = null;

11
src/vs/base/browser/ui/countBadge/countBadge.css
View File

@@ -4,11 +4,12 @@
*--------------------------------------------------------------------------------------------*/
.monaco-count-badge {
padding: 0.3em 0.5em;
border-radius: 1em;
font-size: 85%;
min-width: 1.6em;
line-height: 1em;
padding: 3px 5px;
border-radius: 11px;
font-size: 11px;
min-width: 18px;
min-height: 18px;
line-height: 11px;
font-weight: normal;
text-align: center;
display: inline-block;

3
src/vs/base/browser/ui/dialog/close-dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 8.70714L11.6465 12.3536L12.3536 11.6465L8.70711 8.00004L12.3536 4.35359L11.6465 3.64648L8.00001 7.29293L4.35356 3.64648L3.64645 4.35359L7.2929 8.00004L3.64645 11.6465L4.35356 12.3536L8.00001 8.70714Z" fill="#C5C5C5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 379 B

1
src/vs/base/browser/ui/dialog/close-inverse.svg
View File

@@ -1 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.784 8L13 11.217 11.215 13 8.001 9.786 4.785 13 3 11.216l3.214-3.215L3 4.785 4.784 3 8 6.216 11.216 3 13 4.785 9.784 8.001z" fill="#C5C5C5"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 253 B

3
src/vs/base/browser/ui/dialog/close-light.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 8.70714L11.6465 12.3536L12.3536 11.6465L8.70711 8.00004L12.3536 4.35359L11.6465 3.64648L8.00001 7.29293L4.35356 3.64648L3.64645 4.35359L7.2929 8.00004L3.64645 11.6465L4.35356 12.3536L8.00001 8.70714Z" fill="#424242"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 379 B

1
src/vs/base/browser/ui/dialog/close.svg
View File

@@ -1 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.784 8L13 11.217 11.215 13 8.001 9.786 4.785 13 3 11.216l3.214-3.215L3 4.785 4.784 3 8 6.216 11.216 3 13 4.785 9.784 8.001z" fill="#424242"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 253 B

24
src/vs/base/browser/ui/dialog/dialog.css
View File

@@ -47,12 +47,12 @@
.monaco-workbench .dialog-box .dialog-close-action {
background: url('close.svg') center center no-repeat;
background: url('close-light.svg') center center no-repeat;
}
.vs-dark .monaco-workbench .dialog-box .dialog-close-action,
.hc-black .monaco-workbench .dialog-box .dialog-close-action {
background: url('close-inverse.svg') center center no-repeat;
background: url('close-dark.svg') center center no-repeat;
}
/** Dialog: Message Row */
@@ -64,12 +64,12 @@
}
.monaco-workbench .dialog-box .dialog-message-row .dialog-icon {
flex: 0 0 30px;
height: 30px;
padding-right: 4px;
padding-left: 4px;
flex: 0 0 40px;
height: 40px;
align-self: baseline;
background-position: center;
background-repeat: no-repeat;
background-size: 40px;
}
.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {
@@ -77,15 +77,15 @@
}
.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info {
background-image: url('info.svg');
background-image: url('info-light.svg');
}
.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-warning {
background-image: url('warning.svg');
background-image: url('warning-light.svg');
}
.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-error {
background-image: url('error.svg');
background-image: url('error-light.svg');
}
.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {
@@ -94,17 +94,17 @@
.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info,
.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info {
background-image: url('info-inverse.svg');
background-image: url('info-dark.svg');
}
.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-warning,
.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-warning {
background-image: url('warning-inverse.svg');
background-image: url('warning-dark.svg');
}
.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-error,
.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-error {
background-image: url('error-inverse.svg');
background-image: url('error-dark.svg');
}
.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending {

41
src/vs/base/browser/ui/dialog/dialog.ts
View File

@@ -15,7 +15,7 @@ import { ButtonGroup, IButtonStyles } from 'vs/base/browser/ui/button/button';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { Action } from 'vs/base/common/actions';
import { mnemonicButtonLabel } from 'vs/base/common/labels';
import { isMacintosh } from 'vs/base/common/platform';
import { isMacintosh, isLinux } from 'vs/base/common/platform';
export interface IDialogOptions {
cancelId?: number;
@@ -97,9 +97,17 @@ export class Dialog extends Disposable {
clearNode(this.buttonsContainer);
let focusedButton = 0;
this.buttonGroup = new ButtonGroup(this.buttonsContainer, this.buttons.length, { title: true });
const buttonGroup = this.buttonGroup = new ButtonGroup(this.buttonsContainer, this.buttons.length, { title: true });
const buttonMap = this.rearrangeButtons(this.buttons, this.options.cancelId);
this.buttonGroup.buttons.forEach((button, index) => {
// Set focused button to UI index
buttonMap.forEach((value, index) => {
if (value.index === 0) {
focusedButton = index;
}
});
buttonGroup.buttons.forEach((button, index) => {
button.label = mnemonicButtonLabel(buttonMap[index].label, true);
this._register(button.onDidClick(e => {
@@ -115,18 +123,16 @@ export class Dialog extends Disposable {
}
let eventHandled = false;
if (this.buttonGroup) {
if (evt.equals(KeyMod.Shift | KeyCode.Tab) || evt.equals(KeyCode.LeftArrow)) {
focusedButton = focusedButton + this.buttonGroup.buttons.length - 1;
focusedButton = focusedButton % this.buttonGroup.buttons.length;
this.buttonGroup.buttons[focusedButton].focus();
eventHandled = true;
} else if (evt.equals(KeyCode.Tab) || evt.equals(KeyCode.RightArrow)) {
focusedButton++;
focusedButton = focusedButton % this.buttonGroup.buttons.length;
this.buttonGroup.buttons[focusedButton].focus();
eventHandled = true;
}
if (evt.equals(KeyMod.Shift | KeyCode.Tab) || evt.equals(KeyCode.LeftArrow)) {
focusedButton = focusedButton + buttonGroup.buttons.length - 1;
focusedButton = focusedButton % buttonGroup.buttons.length;
buttonGroup.buttons[focusedButton].focus();
eventHandled = true;
} else if (evt.equals(KeyCode.Tab) || evt.equals(KeyCode.RightArrow)) {
focusedButton++;
focusedButton = focusedButton % buttonGroup.buttons.length;
buttonGroup.buttons[focusedButton].focus();
eventHandled = true;
}
if (eventHandled) {
@@ -192,7 +198,7 @@ export class Dialog extends Disposable {
show(this.element);
// Focus first element
this.buttonGroup.buttons[focusedButton].focus();
buttonGroup.buttons[focusedButton].focus();
});
}
@@ -243,7 +249,8 @@ export class Dialog extends Disposable {
buttonMap.push({ label: button, index: index });
});
if (isMacintosh) {
// macOS/linux: reverse button order
if (isMacintosh || isLinux) {
if (cancelId !== undefined) {
const cancelButton = buttonMap.splice(cancelId, 1)[0];
buttonMap.reverse();

3
src/vs/base/browser/ui/dialog/error-dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.58318 2.02842C9.96435 2.16331 11.2561 2.77279 12.2383 3.75307C13.3643 4.87923 13.9978 6.40584 14 7.99829C14.0004 9.38617 13.5196 10.7313 12.6396 11.8045C11.7595 12.8778 10.5345 13.6127 9.17333 13.8841C7.81215 14.1556 6.39895 13.9467 5.1745 13.2931C3.95005 12.6394 2.99008 11.5815 2.45814 10.2995C1.92619 9.0175 1.85517 7.59072 2.25717 6.26222C2.65917 4.93373 3.50933 3.7857 4.66282 3.0137C5.8163 2.24171 7.20177 1.89351 8.58318 2.02842ZM8.68038 1.03316C10.292 1.19055 11.7993 1.90184 12.9453 3.04585C14.2587 4.35938 14.9976 6.14013 15 7.99764C15.0005 9.61695 14.4396 11.1864 13.4129 12.4385C12.3861 13.6907 10.9569 14.5482 9.36889 14.8648C7.78084 15.1815 6.13211 14.9378 4.70359 14.1752C3.27506 13.4127 2.1551 12.1784 1.53449 10.6828C0.913887 9.18708 0.831027 7.52251 1.30003 5.97259C1.76903 4.42268 2.76089 3.08331 4.10662 2.18265C5.45236 1.28199 7.06873 0.875761 8.68038 1.03316ZM5.52498 5L8.00004 7.47506L10.4751 5L11.1822 5.70711L8.70714 8.18217L11.1818 10.6569L10.4747 11.364L8.00004 8.88927L5.52535 11.364L4.81824 10.6569L7.29293 8.18217L4.81787 5.70711L5.52498 5Z" fill="#F48771"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

26
src/vs/base/browser/ui/dialog/error-inverse.svg
View File

@@ -1,26 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#CACACC;}
.st1{fill:#E51400;}
.st2{fill:#FFFFFF;}
.st3{fill:#F6F6F6;fill-opacity:0;}
.st4{fill:#1A1A1A;}
</style>
<path id="outline_2_" class="st0" d="M-169.7-71.2c0,1.4-1.2,2.6-2.6,2.6c-1.4,0-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6
C-170.9-73.8-169.7-72.6-169.7-71.2z"/>
<path id="iconBg_2_" class="st1" d="M-172.3-73.5c-1.3,0-2.3,1-2.3,2.3s1,2.3,2.3,2.3s2.3-1,2.3-2.3S-171.1-73.5-172.3-73.5z
M-170.9-70.2l-0.5,0.5l-1-1l-1,1l-0.5-0.5l1-1l-1-1l0.5-0.5l1,1l1-1l0.5,0.5l-1,1L-170.9-70.2z"/>
<g id="iconFg_2_">
<path class="st2" d="M-171.9-71.2l1,1l-0.5,0.5l-1-1l-1,1l-0.5-0.5l1-1l-1-1l0.5-0.5l1,1l1-1l0.5,0.5L-171.9-71.2z"/>
</g>
<path id="canvas_1_" class="st3" d="M16,16H0V0h16V16z"/>
<path id="outline_1_" class="st4" d="M16,8c0,4.4-3.6,8-8,8s-8-3.6-8-8s3.6-8,8-8S16,3.6,16,8z"/>
<path id="iconBg_1_" class="st1" d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M12.4,11L11,12.4l-3-3l-3,3L3.6,11
l3-3l-3-3L5,3.6l3,3l3-3L12.4,5l-3,3L12.4,11z"/>
<g id="iconFg_1_">
<path class="st2" d="M9.4,8l3,3L11,12.4l-3-3l-3,3L3.6,11l3-3l-3-3L5,3.6l3,3l3-3L12.4,5L9.4,8z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

3
src/vs/base/browser/ui/dialog/error-light.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.58318 2.02842C9.96435 2.16331 11.2561 2.77279 12.2383 3.75307C13.3643 4.87923 13.9978 6.40584 14 7.99829C14.0004 9.38617 13.5196 10.7313 12.6396 11.8045C11.7595 12.8778 10.5345 13.6127 9.17333 13.8841C7.81215 14.1556 6.39895 13.9467 5.1745 13.2931C3.95005 12.6394 2.99008 11.5815 2.45814 10.2995C1.92619 9.0175 1.85517 7.59072 2.25717 6.26222C2.65917 4.93373 3.50933 3.7857 4.66282 3.0137C5.8163 2.24171 7.20177 1.89351 8.58318 2.02842ZM8.68038 1.03316C10.292 1.19055 11.7993 1.90184 12.9453 3.04585C14.2587 4.35938 14.9976 6.14013 15 7.99764C15.0005 9.61695 14.4396 11.1864 13.4129 12.4385C12.3861 13.6907 10.9569 14.5482 9.36889 14.8648C7.78084 15.1815 6.13211 14.9378 4.70359 14.1752C3.27506 13.4127 2.1551 12.1784 1.53449 10.6828C0.913887 9.18708 0.831027 7.52251 1.30003 5.97259C1.76903 4.42268 2.76089 3.08331 4.10662 2.18265C5.45236 1.28199 7.06873 0.875761 8.68038 1.03316ZM5.52498 5L8.00004 7.47506L10.4751 5L11.1822 5.70711L8.70714 8.18217L11.1818 10.6569L10.4747 11.364L8.00004 8.88927L5.52535 11.364L4.81824 10.6569L7.29293 8.18217L4.81787 5.70711L5.52498 5Z" fill="#A1260D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

25
src/vs/base/browser/ui/dialog/error.svg
View File

@@ -1,25 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#CACACC;}
.st1{fill:#E51400;}
.st2{fill:#FFFFFF;}
.st3{fill:#F6F6F6;fill-opacity:0;}
</style>
<path id="outline" class="st0" d="M16,8c0,4.4-3.6,8-8,8s-8-3.6-8-8s3.6-8,8-8S16,3.6,16,8z"/>
<path id="iconBg" class="st1" d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M12.4,11L11,12.4l-3-3l-3,3L3.6,11
l3-3l-3-3L5,3.6l3,3l3-3L12.4,5l-3,3L12.4,11z"/>
<g id="iconFg">
<path class="st2" d="M9.4,8l3,3L11,12.4l-3-3l-3,3L3.6,11l3-3l-3-3L5,3.6l3,3l3-3L12.4,5L9.4,8z"/>
</g>
<path id="canvas_4_" class="st3" d="M16,16H0V0h16V16z"/>
<path id="outline_2_" class="st0" d="M-192.7-71.2c0,1.4-1.2,2.6-2.6,2.6s-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6S-192.7-72.6-192.7-71.2z
"/>
<path id="iconBg_2_" class="st1" d="M-195.4-73.5c-1.3,0-2.3,1-2.3,2.3s1,2.3,2.3,2.3c1.3,0,2.3-1,2.3-2.3S-194.1-73.5-195.4-73.5z
M-193.9-70.2l-0.5,0.5l-1-1l-1,1l-0.5-0.5l1-1l-1-1l0.5-0.5l1,1l1-1l0.5,0.5l-1,1L-193.9-70.2z"/>
<g id="iconFg_2_">
<path class="st2" d="M-194.9-71.2l1,1l-0.5,0.5l-1-1l-1,1l-0.5-0.5l1-1l-1-1l0.5-0.5l1,1l1-1l0.5,0.5L-194.9-71.2z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

3
src/vs/base/browser/ui/dialog/info-dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 7.5C3 4.46243 5.46243 2 8.5 2C11.5376 2 14 4.46243 14 7.5C14 10.5376 11.5376 13 8.5 13C5.46243 13 3 10.5376 3 7.5ZM2 7.5C2 3.91015 4.91015 1 8.5 1C12.0899 1 15 3.91015 15 7.5C15 11.0899 12.0899 14 8.5 14C4.91015 14 2 11.0899 2 7.5ZM8 4V5H9V4H8ZM8 6L8 10H9L9 6H8Z" fill="#75BEFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 436 B

17
src/vs/base/browser/ui/dialog/info-inverse.svg
View File

@@ -1,17 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F6F6F6;fill-opacity:0;}
.st1{fill:#1A1A1A;}
.st2{fill:#1BA1E2;}
.st3{fill:#FFFFFF;}
</style>
<path id="canvas_1_" class="st0" d="M16,16H0V0h16V16z"/>
<path id="outline_1_" class="st1" d="M0,8c0-4.4,3.6-8,8-8s8,3.6,8,8s-3.6,8-8,8S0,12.4,0,8z"/>
<path id="iconBg_1_" class="st2" d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M9,13H7V6h2V13z M9,5H7V3h2V5z"/>
<g id="iconFg_1_">
<path class="st3" d="M7,6h2v7H7V6z M7,5h2V3H7V5z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 834 B

4
src/vs/base/browser/ui/dialog/info-light.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 7.5C3 4.46243 5.46243 2 8.5 2C11.5376 2 14 4.46243 14 7.5C14 10.5376 11.5376 13 8.5 13C5.46243 13 3 10.5376 3 7.5ZM2 7.5C2 3.91015 4.91015 1 8.5 1C12.0899 1 15 3.91015 15 7.5C15 11.0899 12.0899 14 8.5 14C4.91015 14 2 11.0899 2 7.5ZM8 4V5H9V4H8ZM8 6L8 10H9L9 6H8Z" fill="#007ACC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 7.5C3 4.46243 5.46243 2 8.5 2C11.5376 2 14 4.46243 14 7.5C14 10.5376 11.5376 13 8.5 13C5.46243 13 3 10.5376 3 7.5ZM2 7.5C2 3.91015 4.91015 1 8.5 1C12.0899 1 15 3.91015 15 7.5C15 11.0899 12.0899 14 8.5 14C4.91015 14 2 11.0899 2 7.5ZM8 4V5H9V4H8ZM8 6L8 10H9L9 6H8Z" fill="#007ACC"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 769 B

17
src/vs/base/browser/ui/dialog/info.svg
View File

@@ -1,17 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F6F6F6;fill-opacity:0;}
.st1{fill:#CACACC;}
.st2{fill:#1BA1E2;}
.st3{fill:#FFFFFF;}
</style>
<path id="canvas" class="st0" d="M16,16H0V0h16V16z"/>
<path id="outline" class="st1" d="M0,8c0-4.4,3.6-8,8-8s8,3.6,8,8s-3.6,8-8,8S0,12.4,0,8z"/>
<path id="iconBg" class="st2" d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.8,1,8,1z M9,13H7V6h2V13z M9,5H7V3h2V5z"/>
<g id="iconFg">
<path class="st3" d="M7,6h2v7H7V6z M7,5h2V3H7V5z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 822 B

3
src/vs/base/browser/ui/dialog/warning-dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.12 13.9725L15 12.5L9.37927 2H7.61924L1.9985 12.5L2.87852 13.9725H14.12ZM2.87852 12.9725L8.49925 2.47249L14.12 12.9725H2.87852ZM7.98952 6H8.98802V10H7.98952V6ZM7.98952 11H8.98802V12H7.98952V11Z" fill="#FFCC00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 367 B

15
src/vs/base/browser/ui/dialog/warning-inverse.svg
View File

@@ -1,15 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F6F6F6;fill-opacity:0;}
.st1{fill:#1A1A1A;}
.st2{fill:#FFCC00;}
</style>
<title>StatusWarning_16x</title>
<path class="st0" d="M16,0v16H0V0H16z"/>
<path class="st1" d="M16,14l-2,2H2l-2-2L7,0h2L16,14z"/>
<path class="st2" d="M8.4,1H7.6L1.2,13.8L2.5,15h11l1.3-1.2L8.4,1z M9,13H7v-2h2V13z M9,10H7V5h2V10z"/>
<path d="M7,11h2v2H7V11z M7,5v5h2V5H7z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 737 B

4
src/vs/base/browser/ui/dialog/warning-light.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.12 13.9725L15 12.5L9.37927 2H7.61924L1.9985 12.5L2.87852 13.9725H14.12ZM2.87852 12.9725L8.49925 2.47249L14.12 12.9725H2.87852ZM7.98952 6H8.98802V10H7.98952V6ZM7.98952 11H8.98802V12H7.98952V11Z" fill="#FFCC00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.12 13.9725L15 12.5L9.37927 2H7.61924L1.9985 12.5L2.87852 13.9725H14.12ZM2.87852 12.9725L8.49925 2.47249L14.12 12.9725H2.87852ZM7.98952 6H8.98802V10H7.98952V6ZM7.98952 11H8.98802V12H7.98952V11Z" fill="#DDB100"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 631 B

15
src/vs/base/browser/ui/dialog/warning.svg
View File

@@ -1,15 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F6F6F6;fill-opacity:0;}
.st1{fill:#CACACC;}
.st2{fill:#FFCC00;}
</style>
<title>StatusWarning_16x</title>
<path class="st0" d="M16,0v16H0V0H16z"/>
<path class="st1" d="M16,14l-2,2H2l-2-2L7,0h2L16,14z"/>
<path class="st2" d="M8.4,1H7.6L1.2,13.8L2.5,15h11l1.3-1.2L8.4,1z M9,13H7v-2h2V13z M9,10H7V5h2V10z"/>
<path d="M7,11h2v2H7V11z M7,5v5h2V5H7z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 737 B

16
src/vs/base/browser/ui/dropdown/dropdown.ts
View File

@@ -108,6 +108,10 @@ export class BaseDropdown extends ActionRunner {
this.visible = false;
}
isVisible(): boolean {
return this.visible;
}
protected onEvent(e: Event, activeElement: HTMLElement): void {
this.hide();
}
@@ -192,12 +196,12 @@ export interface IContextMenuProvider {
}
export interface IActionProvider {
getActions(): IAction[];
getActions(): ReadonlyArray<IAction>;
}
export interface IDropdownMenuOptions extends IBaseDropdownOptions {
contextMenuProvider: IContextMenuProvider;
actions?: IAction[];
actions?: ReadonlyArray<IAction>;
actionProvider?: IActionProvider;
menuClassName?: string;
}
@@ -205,7 +209,7 @@ export interface IDropdownMenuOptions extends IBaseDropdownOptions {
export class DropdownMenu extends BaseDropdown {
private _contextMenuProvider: IContextMenuProvider;
private _menuOptions: IMenuOptions;
private _actions: IAction[];
private _actions: ReadonlyArray<IAction>;
private actionProvider?: IActionProvider;
private menuClassName: string;
@@ -226,7 +230,7 @@ export class DropdownMenu extends BaseDropdown {
return this._menuOptions;
}
private get actions(): IAction[] {
private get actions(): ReadonlyArray<IAction> {
if (this.actionProvider) {
return this.actionProvider.getActions();
}
@@ -234,7 +238,7 @@ export class DropdownMenu extends BaseDropdown {
return this._actions;
}
private set actions(actions: IAction[]) {
private set actions(actions: ReadonlyArray<IAction>) {
this._actions = actions;
}
@@ -275,7 +279,7 @@ export class DropdownMenuActionViewItem extends BaseActionViewItem {
private clazz: string | undefined;
private anchorAlignmentProvider: (() => AnchorAlignment) | undefined;
constructor(action: IAction, menuActions: IAction[], contextMenuProvider: IContextMenuProvider, actionViewItemProvider: IActionViewItemProvider | undefined, actionRunner: IActionRunner, keybindings: ((action: IAction) => ResolvedKeybinding | undefined) | undefined, clazz: string | undefined, anchorAlignmentProvider?: () => AnchorAlignment);
constructor(action: IAction, menuActions: ReadonlyArray<IAction>, contextMenuProvider: IContextMenuProvider, actionViewItemProvider: IActionViewItemProvider | undefined, actionRunner: IActionRunner, keybindings: ((action: IAction) => ResolvedKeybinding | undefined) | undefined, clazz: string | undefined, anchorAlignmentProvider?: () => AnchorAlignment);
constructor(action: IAction, actionProvider: IActionProvider, contextMenuProvider: IContextMenuProvider, actionViewItemProvider: IActionViewItemProvider | undefined, actionRunner: IActionRunner, keybindings: ((action: IAction) => ResolvedKeybinding) | undefined, clazz: string | undefined, anchorAlignmentProvider?: () => AnchorAlignment);
constructor(action: IAction, menuActionsOrProvider: any, contextMenuProvider: IContextMenuProvider, actionViewItemProvider: IActionViewItemProvider | undefined, actionRunner: IActionRunner, keybindings: ((action: IAction) => ResolvedKeybinding | undefined) | undefined, clazz: string | undefined, anchorAlignmentProvider?: () => AnchorAlignment) {
super(null, action);

4
src/vs/base/browser/ui/findinput/case-sensitive-dark.svg
View File

@@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><style type="text/css">.st0{opacity:0;fill:#262626;} .st1{fill:#262626;} .st2{fill:#C5C5C5;}</style><g id="outline"><rect class="st0" width="16" height="16"/><path class="st1" d="M14.176 5.592c-.555-.6-1.336-.904-2.322-.904-.258 0-.521.024-.784.072-.246.044-.479.101-.7.169-.228.07-.432.147-.613.229-.22.099-.389.196-.512.284l-.419.299v2.701c-.086.108-.162.223-.229.344l-2.45-6.354h-2.394l-3.753 9.804v.598h3.025l.838-2.35h2.167l.891 2.35h3.237l-.001-.003c.305.092.633.15.993.15.344 0 .671-.049.978-.146h2.853v-4.903c-.001-.975-.271-1.763-.805-2.34z"/></g><g id="icon_x5F_bg"><path class="st2" d="M7.611 11.834l-.891-2.35h-3.562l-.838 2.35h-1.095l3.217-8.402h1.02l3.24 8.402h-1.091zm-2.531-6.814l-.044-.135-.038-.156-.029-.152-.024-.126h-.023l-.021.126-.032.152-.038.156-.044.135-1.307 3.574h2.918l-1.318-3.574z"/><path class="st2" d="M13.02 11.834v-.938h-.023c-.199.352-.456.62-.771.806s-.673.278-1.075.278c-.313 0-.588-.045-.826-.135s-.438-.212-.598-.366-.281-.338-.363-.551-.124-.442-.124-.688c0-.262.039-.502.117-.721s.198-.412.36-.58.367-.308.615-.419.544-.19.888-.237l1.811-.252c0-.273-.029-.507-.088-.7s-.143-.351-.252-.472-.241-.21-.396-.267-.325-.085-.513-.085c-.363 0-.714.064-1.052.193s-.638.31-.904.54v-.984c.082-.059.196-.121.343-.188s.312-.128.495-.185.378-.104.583-.141.407-.056.606-.056c.699 0 1.229.194 1.588.583s.539.942.539 1.661v3.902h-.96zm-1.454-2.83c-.273.035-.498.085-.674.149s-.313.144-.41.237-.165.205-.202.334-.055.276-.055.44c0 .141.025.271.076.393s.124.227.22.316.215.16.357.211.308.076.495.076c.242 0 .465-.045.668-.135s.378-.214.524-.372.261-.344.343-.557.123-.442.123-.688v-.609l-1.465.205z"/></g></svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.495 9.052L8.386 11.402H9.477L6.237 3H5.217L2 11.402H3.095L3.933 9.052H7.495ZM5.811 4.453L5.855 4.588L7.173 8.162H4.255L5.562 4.588L5.606 4.453L5.644 4.297L5.676 4.145L5.697 4.019H5.72L5.744 4.145L5.773 4.297L5.811 4.453ZM13.795 10.464V11.4H14.755V7.498C14.755 6.779 14.575 6.226 14.216 5.837C13.857 5.448 13.327 5.254 12.628 5.254C12.429 5.254 12.227 5.273 12.022 5.31C11.817 5.347 11.622 5.394 11.439 5.451C11.256 5.508 11.091 5.569 10.944 5.636C10.797 5.703 10.683 5.765 10.601 5.824V6.808C10.867 6.578 11.167 6.397 11.505 6.268C11.843 6.139 12.194 6.075 12.557 6.075C12.745 6.075 12.915 6.103 13.07 6.16C13.225 6.217 13.357 6.306 13.466 6.427C13.575 6.548 13.659 6.706 13.718 6.899C13.777 7.092 13.806 7.326 13.806 7.599L11.995 7.851C11.651 7.898 11.355 7.977 11.107 8.088C10.859 8.199 10.654 8.339 10.492 8.507C10.33 8.675 10.21 8.868 10.132 9.087C10.054 9.306 10.015 9.546 10.015 9.808C10.015 10.054 10.057 10.283 10.139 10.496C10.221 10.709 10.342 10.893 10.502 11.047C10.662 11.201 10.862 11.323 11.1 11.413C11.338 11.503 11.613 11.548 11.926 11.548C12.328 11.548 12.686 11.456 13.001 11.27C13.316 11.084 13.573 10.816 13.772 10.464H13.795ZM11.667 8.721C11.843 8.657 12.068 8.607 12.341 8.572L13.806 8.367V8.976C13.806 9.222 13.765 9.451 13.683 9.664C13.601 9.877 13.486 10.063 13.34 10.221C13.194 10.379 13.019 10.503 12.816 10.593C12.613 10.683 12.39 10.728 12.148 10.728C11.961 10.728 11.795 10.703 11.653 10.652C11.511 10.601 11.392 10.53 11.296 10.441C11.2 10.352 11.127 10.247 11.076 10.125C11.025 10.003 11 9.873 11 9.732C11 9.568 11.018 9.421 11.055 9.292C11.092 9.163 11.16 9.051 11.257 8.958C11.354 8.865 11.491 8.785 11.667 8.721Z" fill="#C5C5C5"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

3
src/vs/base/browser/ui/findinput/case-sensitive-hc.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.495 9.052L8.386 11.402H9.477L6.237 3H5.217L2 11.402H3.095L3.933 9.052H7.495ZM5.811 4.453L5.855 4.588L7.173 8.162H4.255L5.562 4.588L5.606 4.453L5.644 4.297L5.676 4.145L5.697 4.019H5.72L5.744 4.145L5.773 4.297L5.811 4.453ZM13.795 10.464V11.4H14.755V7.498C14.755 6.779 14.575 6.226 14.216 5.837C13.857 5.448 13.327 5.254 12.628 5.254C12.429 5.254 12.227 5.273 12.022 5.31C11.817 5.347 11.622 5.394 11.439 5.451C11.256 5.508 11.091 5.569 10.944 5.636C10.797 5.703 10.683 5.765 10.601 5.824V6.808C10.867 6.578 11.167 6.397 11.505 6.268C11.843 6.139 12.194 6.075 12.557 6.075C12.745 6.075 12.915 6.103 13.07 6.16C13.225 6.217 13.357 6.306 13.466 6.427C13.575 6.548 13.659 6.706 13.718 6.899C13.777 7.092 13.806 7.326 13.806 7.599L11.995 7.851C11.651 7.898 11.355 7.977 11.107 8.088C10.859 8.199 10.654 8.339 10.492 8.507C10.33 8.675 10.21 8.868 10.132 9.087C10.054 9.306 10.015 9.546 10.015 9.808C10.015 10.054 10.057 10.283 10.139 10.496C10.221 10.709 10.342 10.893 10.502 11.047C10.662 11.201 10.862 11.323 11.1 11.413C11.338 11.503 11.613 11.548 11.926 11.548C12.328 11.548 12.686 11.456 13.001 11.27C13.316 11.084 13.573 10.816 13.772 10.464H13.795ZM11.667 8.721C11.843 8.657 12.068 8.607 12.341 8.572L13.806 8.367V8.976C13.806 9.222 13.765 9.451 13.683 9.664C13.601 9.877 13.486 10.063 13.34 10.221C13.194 10.379 13.019 10.503 12.816 10.593C12.613 10.683 12.39 10.728 12.148 10.728C11.961 10.728 11.795 10.703 11.653 10.652C11.511 10.601 11.392 10.53 11.296 10.441C11.2 10.352 11.127 10.247 11.076 10.125C11.025 10.003 11 9.873 11 9.732C11 9.568 11.018 9.421 11.055 9.292C11.092 9.163 11.16 9.051 11.257 8.958C11.354 8.865 11.491 8.785 11.667 8.721Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

3
src/vs/base/browser/ui/findinput/case-sensitive-light.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.495 9.052L8.386 11.402H9.477L6.237 3H5.217L2 11.402H3.095L3.933 9.052H7.495ZM5.811 4.453L5.855 4.588L7.173 8.162H4.255L5.562 4.588L5.606 4.453L5.644 4.297L5.676 4.145L5.697 4.019H5.72L5.744 4.145L5.773 4.297L5.811 4.453ZM13.795 10.464V11.4H14.755V7.498C14.755 6.779 14.575 6.226 14.216 5.837C13.857 5.448 13.327 5.254 12.628 5.254C12.429 5.254 12.227 5.273 12.022 5.31C11.817 5.347 11.622 5.394 11.439 5.451C11.256 5.508 11.091 5.569 10.944 5.636C10.797 5.703 10.683 5.765 10.601 5.824V6.808C10.867 6.578 11.167 6.397 11.505 6.268C11.843 6.139 12.194 6.075 12.557 6.075C12.745 6.075 12.915 6.103 13.07 6.16C13.225 6.217 13.357 6.306 13.466 6.427C13.575 6.548 13.659 6.706 13.718 6.899C13.777 7.092 13.806 7.326 13.806 7.599L11.995 7.851C11.651 7.898 11.355 7.977 11.107 8.088C10.859 8.199 10.654 8.339 10.492 8.507C10.33 8.675 10.21 8.868 10.132 9.087C10.054 9.306 10.015 9.546 10.015 9.808C10.015 10.054 10.057 10.283 10.139 10.496C10.221 10.709 10.342 10.893 10.502 11.047C10.662 11.201 10.862 11.323 11.1 11.413C11.338 11.503 11.613 11.548 11.926 11.548C12.328 11.548 12.686 11.456 13.001 11.27C13.316 11.084 13.573 10.816 13.772 10.464H13.795ZM11.667 8.721C11.843 8.657 12.068 8.607 12.341 8.572L13.806 8.367V8.976C13.806 9.222 13.765 9.451 13.683 9.664C13.601 9.877 13.486 10.063 13.34 10.221C13.194 10.379 13.019 10.503 12.816 10.593C12.613 10.683 12.39 10.728 12.148 10.728C11.961 10.728 11.795 10.703 11.653 10.652C11.511 10.601 11.392 10.53 11.296 10.441C11.2 10.352 11.127 10.247 11.076 10.125C11.025 10.003 11 9.873 11 9.732C11 9.568 11.018 9.421 11.055 9.292C11.092 9.163 11.16 9.051 11.257 8.958C11.354 8.865 11.491 8.785 11.667 8.721Z" fill="#424242"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
src/vs/base/browser/ui/findinput/case-sensitive.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><style type="text/css">.st0{opacity:0;fill:#F6F6F6;} .st1{fill:#F6F6F6;} .st2{fill:#424242;}</style><g id="outline"><rect class="st0" width="16" height="16"/><path class="st1" d="M14.176 5.592c-.555-.6-1.336-.904-2.322-.904-.258 0-.521.024-.784.072-.246.044-.479.101-.7.169-.228.07-.432.147-.613.229-.22.099-.389.196-.512.284l-.419.299v2.701c-.086.108-.162.223-.229.344l-2.45-6.354h-2.394l-3.753 9.804v.598h3.025l.838-2.35h2.167l.891 2.35h3.237l-.001-.003c.305.092.633.15.993.15.344 0 .671-.049.978-.146h2.853v-4.903c-.001-.975-.271-1.763-.805-2.34z"/></g><g id="icon_x5F_bg"><path class="st2" d="M7.611 11.834l-.891-2.35h-3.562l-.838 2.35h-1.095l3.217-8.402h1.02l3.24 8.402h-1.091zm-2.531-6.814l-.044-.135-.038-.156-.029-.152-.024-.126h-.023l-.021.126-.032.152-.038.156-.044.135-1.307 3.574h2.918l-1.318-3.574z"/><path class="st2" d="M13.02 11.834v-.938h-.023c-.199.352-.456.62-.771.806s-.673.278-1.075.278c-.313 0-.588-.045-.826-.135s-.438-.212-.598-.366-.281-.338-.363-.551-.124-.442-.124-.688c0-.262.039-.502.117-.721s.198-.412.36-.58.367-.308.615-.419.544-.19.888-.237l1.811-.252c0-.273-.029-.507-.088-.7s-.143-.351-.252-.472-.241-.21-.396-.267-.325-.085-.513-.085c-.363 0-.714.064-1.052.193s-.638.31-.904.54v-.984c.082-.059.196-.121.343-.188s.312-.128.495-.185.378-.104.583-.141.407-.056.606-.056c.699 0 1.229.194 1.588.583s.539.942.539 1.661v3.902h-.96zm-1.454-2.83c-.273.035-.498.085-.674.149s-.313.144-.41.237-.165.205-.202.334-.055.276-.055.44c0 .141.025.271.076.393s.124.227.22.316.215.16.357.211.308.076.495.076c.242 0 .465-.045.668-.135s.378-.214.524-.372.261-.344.343-.557.123-.442.123-.688v-.609l-1.465.205z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

34
src/vs/base/browser/ui/findinput/findInputCheckboxes.css
View File

@@ -4,28 +4,40 @@
*--------------------------------------------------------------------------------------------*/
.vs .monaco-custom-checkbox.monaco-case-sensitive {
background: url('case-sensitive.svg') center center no-repeat;
background: url('case-sensitive-light.svg') center center no-repeat;
}
.hc-black .monaco-custom-checkbox.monaco-case-sensitive,
.hc-black .monaco-custom-checkbox.monaco-case-sensitive:hover,
.vs-dark .monaco-custom-checkbox.monaco-case-sensitive {
background: url('case-sensitive-dark.svg') center center no-repeat;
}
.vs .monaco-custom-checkbox.monaco-whole-word {
background: url('whole-word.svg') center center no-repeat;
.hc-black .monaco-custom-checkbox.monaco-case-sensitive,
.hc-black .monaco-custom-checkbox.monaco-case-sensitive:hover {
background: url('case-sensitive-hc.svg') center center no-repeat;
}
.hc-black .monaco-custom-checkbox.monaco-whole-word,
.hc-black .monaco-custom-checkbox.monaco-whole-word:hover,
.vs .monaco-custom-checkbox.monaco-whole-word {
background: url('whole-word-light.svg') center center no-repeat;
}
.vs-dark .monaco-custom-checkbox.monaco-whole-word {
background: url('whole-word-dark.svg') center center no-repeat;
}
.vs .monaco-custom-checkbox.monaco-regex {
background: url('regex.svg') center center no-repeat;
.hc-black .monaco-custom-checkbox.monaco-whole-word,
.hc-black .monaco-custom-checkbox.monaco-whole-word:hover {
background: url('whole-word-hc.svg') center center no-repeat;
}
.hc-black .monaco-custom-checkbox.monaco-regex,
.hc-black .monaco-custom-checkbox.monaco-regex:hover,
.vs .monaco-custom-checkbox.monaco-regex {
background: url('regex-light.svg') center center no-repeat;
}
.vs-dark .monaco-custom-checkbox.monaco-regex {
background: url('regex-dark.svg') center center no-repeat;
}
.hc-black .monaco-custom-checkbox.monaco-regex,
.hc-black .monaco-custom-checkbox.monaco-regex:hover {
background: url('regex-hc.svg') center center no-repeat;
}

4
src/vs/base/browser/ui/findinput/regex-dark.svg
View File

@@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><polygon fill="#2d2d30" points="13.64,7.396 12.169,2.898 10.706,3.761 11.087,2 6.557,2 6.936,3.762 5.473,2.898 4,7.396 5.682,7.554 4.513,8.561 5.013,9 2,9 2,14 7,14 7,10.747 7.978,11.606 8.82,9.725 9.661,11.602 13.144,8.562 11.968,7.554"/><g fill="#C5C5C5"><path d="M12.301 6.518l-2.772.262 2.086 1.788-1.594 1.392-1.201-2.682-1.201 2.682-1.583-1.392 2.075-1.788-2.771-.262.696-2.126 2.358 1.392-.599-2.784h2.053l-.602 2.783 2.359-1.392.696 2.127z"/><rect x="3" y="10" width="3" height="3"/></g></svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0122 2H10.9879V5.11346L13.5489 3.55609L14.034 4.44095L11.4702 6L14.034 7.55905L13.5489 8.44391L10.9879 6.88654V10H10.0122V6.88654L7.45114 8.44391L6.96606 7.55905L9.5299 6L6.96606 4.44095L7.45114 3.55609L10.0122 5.11346V2ZM2 10H6V14H2V10Z" fill="#C5C5C5"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 564 B

After

Width:  |  Height:  |  Size: 412 B

3
src/vs/base/browser/ui/findinput/regex-hc.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0122 2H10.9879V5.11346L13.5489 3.55609L14.034 4.44095L11.4702 6L14.034 7.55905L13.5489 8.44391L10.9879 6.88654V10H10.0122V6.88654L7.45114 8.44391L6.96606 7.55905L9.5299 6L6.96606 4.44095L7.45114 3.55609L10.0122 5.11346V2ZM2 10H6V14H2V10Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 410 B

3
src/vs/base/browser/ui/findinput/regex-light.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0122 2H10.9879V5.11346L13.5489 3.55609L14.034 4.44095L11.4702 6L14.034 7.55905L13.5489 8.44391L10.9879 6.88654V10H10.0122V6.88654L7.45114 8.44391L6.96606 7.55905L9.5299 6L6.96606 4.44095L7.45114 3.55609L10.0122 5.11346V2ZM2 10H6V14H2V10Z" fill="#424242"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 412 B

1
src/vs/base/browser/ui/findinput/regex.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><polygon fill="#F6F6F6" points="13.64,7.396 12.169,2.898 10.706,3.761 11.087,2 6.557,2 6.936,3.762 5.473,2.898 4,7.396 5.682,7.554 4.513,8.561 5.013,9 2,9 2,14 7,14 7,10.747 7.978,11.606 8.82,9.725 9.661,11.602 13.144,8.562 11.968,7.554"/><g fill="#424242"><path d="M12.301 6.518l-2.772.262 2.086 1.788-1.594 1.392-1.201-2.682-1.201 2.682-1.583-1.392 2.075-1.788-2.771-.262.696-2.126 2.358 1.392-.599-2.784h2.053l-.602 2.783 2.359-1.392.696 2.127z"/><rect x="3" y="10" width="3" height="3"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 564 B

4
src/vs/base/browser/ui/findinput/whole-word-dark.svg
View File

@@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><style type="text/css">.st0{opacity:0;fill:#262626;} .st1{fill:#262626;} .st2{fill:#C5C5C5;}</style><g id="outline"><rect class="st0" width="16" height="16"/><path class="st1" d="M16 4.022v-3.022h-16.014v3.022h3.046l-3.043 7.945h-.004v.01l.015 1.023h-.014v1.991h16.014v-3.023h-1v-7.946h1zm-5.914 5.301c0 .233-.023.441-.066.595-.047.164-.099.247-.127.284l-.078.069-.151.026-.115-.017-.139-.137c-.031-.078-.112-.332-.112-.566 0-.254.091-.561.126-.656l.069-.141.109-.082.178-.027c.077 0 .117.014.177.056l.087.179.051.237-.009.18zm-3.695-5.301v2.893l-1.116-2.893h1.116zm-3.026 7.02h1.573l.351.926h-2.254l.33-.926zm8.635-4.354c-.206-.2-.431-.38-.695-.512-.396-.198-.853-.298-1.355-.298-.215 0-.423.02-.621.058v-1.914h2.671v2.666z"/></g><g id="icon_x5F_bg"><rect x="13" y="4" class="st2" width="1" height="8"/><path class="st2" d="M11.225 8.387c-.078-.299-.199-.562-.36-.786s-.365-.401-.609-.53-.534-.193-.866-.193c-.198 0-.38.024-.547.073-.165.049-.316.117-.453.205-.136.088-.257.194-.365.318l-.179.258v-3.154h-.893v7.422h.893v-.575l.126.175c.087.102.189.19.304.269.117.078.249.14.398.186.149.046.314.068.498.068.353 0 .666-.071.937-.212.272-.143.499-.338.682-.586.183-.25.321-.543.414-.879.093-.338.14-.703.14-1.097-.001-.342-.04-.663-.12-.962zm-1.479-.607c.151.071.282.176.39.314.109.14.194.313.255.517.051.174.082.371.089.587l-.007.125c0 .327-.033.62-.1.869-.067.246-.161.453-.278.614-.117.162-.26.285-.421.366-.322.162-.76.166-1.069.015-.153-.075-.286-.175-.393-.296-.085-.096-.156-.216-.218-.367 0 0-.179-.447-.179-.947 0-.5.179-1.002.179-1.002.062-.177.136-.318.224-.43.114-.143.256-.259.424-.345.168-.086.365-.129.587-.129.19 0 .364.037.517.109z"/><rect x=".987" y="2" class="st2" width="14.013" height="1.023"/><rect x=".987" y="12.968" class="st2" width="14.013" height="1.023"/><path class="st2" d="M1.991 12.031l.728-2.031h2.219l.778 2.031h1.082l-2.485-7.158h-.941l-2.441 7.086-.025.072h1.085zm1.827-5.609h.022l.914 2.753h-1.841l.905-2.753z"/></g></svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2H15V3H1V2ZM14 4H13V12H14V4ZM11.272 8.387C11.194 8.088 11.073 7.825 10.912 7.601C10.751 7.377 10.547 7.2 10.303 7.071C10.059 6.942 9.769 6.878 9.437 6.878C9.239 6.878 9.057 6.902 8.89 6.951C8.725 7 8.574 7.068 8.437 7.156C8.301 7.244 8.18 7.35 8.072 7.474L7.893 7.732V4.578H7V12H7.893V11.425L8.019 11.6C8.106 11.702 8.208 11.79 8.323 11.869C8.44 11.947 8.572 12.009 8.721 12.055C8.87 12.101 9.035 12.123 9.219 12.123C9.572 12.123 9.885 12.052 10.156 11.911C10.428 11.768 10.655 11.573 10.838 11.325C11.021 11.075 11.159 10.782 11.252 10.446C11.345 10.108 11.392 9.743 11.392 9.349C11.391 9.007 11.352 8.686 11.272 8.387ZM9.793 7.78C9.944 7.851 10.075 7.956 10.183 8.094C10.292 8.234 10.377 8.407 10.438 8.611C10.489 8.785 10.52 8.982 10.527 9.198L10.52 9.323C10.52 9.65 10.487 9.943 10.42 10.192C10.353 10.438 10.259 10.645 10.142 10.806C10.025 10.968 9.882 11.091 9.721 11.172C9.399 11.334 8.961 11.338 8.652 11.187C8.499 11.112 8.366 11.012 8.259 10.891C8.174 10.795 8.103 10.675 8.041 10.524C8.041 10.524 7.862 10.077 7.862 9.577C7.862 9.077 8.041 8.575 8.041 8.575C8.103 8.398 8.177 8.257 8.265 8.145C8.379 8.002 8.521 7.886 8.689 7.8C8.857 7.714 9.054 7.671 9.276 7.671C9.466 7.671 9.64 7.708 9.793 7.78ZM15 13H1V14H15V13ZM2.813 10L2.085 12.031H1L1.025 11.959L3.466 4.87305H4.407L6.892 12.031H5.81L5.032 10H2.813ZM3.934 6.42205H3.912L3.007 9.17505H4.848L3.934 6.42205Z" fill="#C5C5C5"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

3
src/vs/base/browser/ui/findinput/whole-word-hc.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2H15V3H1V2ZM14 4H13V12H14V4ZM11.272 8.387C11.194 8.088 11.073 7.825 10.912 7.601C10.751 7.377 10.547 7.2 10.303 7.071C10.059 6.942 9.769 6.878 9.437 6.878C9.239 6.878 9.057 6.902 8.89 6.951C8.725 7 8.574 7.068 8.437 7.156C8.301 7.244 8.18 7.35 8.072 7.474L7.893 7.732V4.578H7V12H7.893V11.425L8.019 11.6C8.106 11.702 8.208 11.79 8.323 11.869C8.44 11.947 8.572 12.009 8.721 12.055C8.87 12.101 9.035 12.123 9.219 12.123C9.572 12.123 9.885 12.052 10.156 11.911C10.428 11.768 10.655 11.573 10.838 11.325C11.021 11.075 11.159 10.782 11.252 10.446C11.345 10.108 11.392 9.743 11.392 9.349C11.391 9.007 11.352 8.686 11.272 8.387ZM9.793 7.78C9.944 7.851 10.075 7.956 10.183 8.094C10.292 8.234 10.377 8.407 10.438 8.611C10.489 8.785 10.52 8.982 10.527 9.198L10.52 9.323C10.52 9.65 10.487 9.943 10.42 10.192C10.353 10.438 10.259 10.645 10.142 10.806C10.025 10.968 9.882 11.091 9.721 11.172C9.399 11.334 8.961 11.338 8.652 11.187C8.499 11.112 8.366 11.012 8.259 10.891C8.174 10.795 8.103 10.675 8.041 10.524C8.041 10.524 7.862 10.077 7.862 9.577C7.862 9.077 8.041 8.575 8.041 8.575C8.103 8.398 8.177 8.257 8.265 8.145C8.379 8.002 8.521 7.886 8.689 7.8C8.857 7.714 9.054 7.671 9.276 7.671C9.466 7.671 9.64 7.708 9.793 7.78ZM15 13H1V14H15V13ZM2.813 10L2.085 12.031H1L1.025 11.959L3.466 4.87305H4.407L6.892 12.031H5.81L5.032 10H2.813ZM3.934 6.42205H3.912L3.007 9.17505H4.848L3.934 6.42205Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
src/vs/base/browser/ui/findinput/whole-word-light.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2H15V3H1V2ZM14 4H13V12H14V4ZM11.272 8.387C11.194 8.088 11.073 7.825 10.912 7.601C10.751 7.377 10.547 7.2 10.303 7.071C10.059 6.942 9.769 6.878 9.437 6.878C9.239 6.878 9.057 6.902 8.89 6.951C8.725 7 8.574 7.068 8.437 7.156C8.301 7.244 8.18 7.35 8.072 7.474L7.893 7.732V4.578H7V12H7.893V11.425L8.019 11.6C8.106 11.702 8.208 11.79 8.323 11.869C8.44 11.947 8.572 12.009 8.721 12.055C8.87 12.101 9.035 12.123 9.219 12.123C9.572 12.123 9.885 12.052 10.156 11.911C10.428 11.768 10.655 11.573 10.838 11.325C11.021 11.075 11.159 10.782 11.252 10.446C11.345 10.108 11.392 9.743 11.392 9.349C11.391 9.007 11.352 8.686 11.272 8.387ZM9.793 7.78C9.944 7.851 10.075 7.956 10.183 8.094C10.292 8.234 10.377 8.407 10.438 8.611C10.489 8.785 10.52 8.982 10.527 9.198L10.52 9.323C10.52 9.65 10.487 9.943 10.42 10.192C10.353 10.438 10.259 10.645 10.142 10.806C10.025 10.968 9.882 11.091 9.721 11.172C9.399 11.334 8.961 11.338 8.652 11.187C8.499 11.112 8.366 11.012 8.259 10.891C8.174 10.795 8.103 10.675 8.041 10.524C8.041 10.524 7.862 10.077 7.862 9.577C7.862 9.077 8.041 8.575 8.041 8.575C8.103 8.398 8.177 8.257 8.265 8.145C8.379 8.002 8.521 7.886 8.689 7.8C8.857 7.714 9.054 7.671 9.276 7.671C9.466 7.671 9.64 7.708 9.793 7.78ZM15 13H1V14H15V13ZM2.813 10L2.085 12.031H1L1.025 11.959L3.466 4.87305H4.407L6.892 12.031H5.81L5.032 10H2.813ZM3.934 6.42205H3.912L3.007 9.17505H4.848L3.934 6.42205Z" fill="#424242"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/vs/base/browser/ui/findinput/whole-word.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><style type="text/css">.st0{opacity:0;fill:#F6F6F6;} .st1{fill:#F6F6F6;} .st2{fill:#424242;}</style><g id="outline"><rect class="st0" width="16" height="16"/><path class="st1" d="M16 4.022v-3.022h-16.014v3.022h3.046l-3.043 7.945h-.004v.01l.015 1.023h-.014v1.991h16.014v-3.023h-1v-7.946h1zm-5.914 5.301c0 .233-.023.441-.066.595-.047.164-.099.247-.127.284l-.078.069-.151.026-.115-.017-.139-.137c-.031-.078-.112-.332-.112-.566 0-.254.091-.561.126-.656l.069-.141.109-.082.178-.027c.077 0 .117.014.177.056l.087.179.051.237-.009.18zm-3.695-5.301v2.893l-1.116-2.893h1.116zm-3.026 7.02h1.573l.351.926h-2.254l.33-.926zm8.635-4.354c-.206-.2-.431-.38-.695-.512-.396-.198-.853-.298-1.355-.298-.215 0-.423.02-.621.058v-1.914h2.671v2.666z"/></g><g id="icon_x5F_bg"><rect x="13" y="4" class="st2" width="1" height="8"/><path class="st2" d="M11.225 8.387c-.078-.299-.199-.562-.36-.786s-.365-.401-.609-.53-.534-.193-.866-.193c-.198 0-.38.024-.547.073-.165.049-.316.117-.453.205-.136.088-.257.194-.365.318l-.179.258v-3.154h-.893v7.422h.893v-.575l.126.175c.087.102.189.19.304.269.117.078.249.14.398.186.149.046.314.068.498.068.353 0 .666-.071.937-.212.272-.143.499-.338.682-.586.183-.25.321-.543.414-.879.093-.338.14-.703.14-1.097-.001-.342-.04-.663-.12-.962zm-1.479-.607c.151.071.282.176.39.314.109.14.194.313.255.517.051.174.082.371.089.587l-.007.125c0 .327-.033.62-.1.869-.067.246-.161.453-.278.614-.117.162-.26.285-.421.366-.322.162-.76.166-1.069.015-.153-.075-.286-.175-.393-.296-.085-.096-.156-.216-.218-.367 0 0-.179-.447-.179-.947 0-.5.179-1.002.179-1.002.062-.177.136-.318.224-.43.114-.143.256-.259.424-.345.168-.086.365-.129.587-.129.19 0 .364.037.517.109z"/><rect x=".987" y="2" class="st2" width="14.013" height="1.023"/><rect x=".987" y="12.968" class="st2" width="14.013" height="1.023"/><path class="st2" d="M1.991 12.031l.728-2.031h2.219l.778 2.031h1.082l-2.485-7.158h-.941l-2.441 7.086-.025.072h1.085zm1.827-5.609h.022l.914 2.753h-1.841l.905-2.753z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

127
src/vs/base/browser/ui/grid/grid.ts
View File

@@ -5,14 +5,12 @@
import 'vs/css!./gridview';
import { Orientation } from 'vs/base/browser/ui/sash/sash';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { Disposable } from 'vs/base/common/lifecycle';
import { tail2 as tail, equals } from 'vs/base/common/arrays';
import { orthogonal, IView, GridView, Sizing as GridViewSizing, Box, IGridViewStyles } from './gridview';
import { Event, Emitter } from 'vs/base/common/event';
import { $ } from 'vs/base/browser/dom';
import { LayoutPriority } from 'vs/base/browser/ui/splitview/splitview';
import { orthogonal, IView, GridView, Sizing as GridViewSizing, Box, IGridViewStyles, IViewSize } from './gridview';
import { Event } from 'vs/base/common/event';
export { Orientation } from './gridview';
export { Orientation, Sizing as GridViewSizing } from './gridview';
export const enum Direction {
Up,
@@ -117,10 +115,6 @@ function getDirectionOrientation(direction: Direction): Orientation {
return direction === Direction.Up || direction === Direction.Down ? Orientation.VERTICAL : Orientation.HORIZONTAL;
}
function getSize(dimensions: { width: number; height: number; }, orientation: Orientation) {
return orientation === Orientation.HORIZONTAL ? dimensions.width : dimensions.height;
}
export function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Direction): number[] {
const orientation = getLocationOrientation(rootOrientation, location);
const directionOrientation = getDirectionOrientation(direction);
@@ -191,12 +185,10 @@ export interface IGridOptions {
proportionalLayout?: boolean;
}
export class Grid<T extends IView> implements IDisposable {
export class Grid<T extends IView = IView> extends Disposable {
protected gridview: GridView;
private views = new Map<T, HTMLElement>();
private disposables: IDisposable[] = [];
get orientation(): Orientation { return this.gridview.orientation; }
set orientation(orientation: Orientation) { this.gridview.orientation = orientation; }
@@ -211,13 +203,12 @@ export class Grid<T extends IView> implements IDisposable {
get element(): HTMLElement { return this.gridview.element; }
sashResetSizing: Sizing = Sizing.Distribute;
constructor(view: T, options: IGridOptions = {}) {
super();
this.gridview = new GridView(options);
this.disposables.push(this.gridview);
this._register(this.gridview);
this.gridview.onDidSashReset(this.doResetViewSize, this, this.disposables);
this._register(this.gridview.onDidSashReset(this.doResetViewSize, this));
this._addView(view, 0, [0]);
}
@@ -299,15 +290,14 @@ export class Grid<T extends IView> implements IDisposable {
return this.gridview.swapViews(fromLocation, toLocation);
}
resizeView(view: T, size: number): void {
resizeView(view: T, size: IViewSize): void {
const location = this.getViewLocation(view);
return this.gridview.resizeView(location, size);
}
getViewSize(view: T): number {
getViewSize(view: T): IViewSize {
const location = this.getViewLocation(view);
const viewSize = this.gridview.getViewSize(location);
return getLocationOrientation(this.orientation, location) === Orientation.HORIZONTAL ? viewSize.width : viewSize.height;
return this.gridview.getViewSize(location);
}
// TODO@joao cleanup
@@ -325,6 +315,16 @@ export class Grid<T extends IView> implements IDisposable {
this.gridview.distributeViewSizes();
}
isViewVisible(view: T): boolean {
const location = this.getViewLocation(view);
return this.gridview.isViewVisible(location);
}
setViewVisible(view: T, visible: boolean): void {
const location = this.getViewLocation(view);
this.gridview.setViewVisible(location, visible);
}
getViews(): GridBranchNode<T> {
return this.gridview.getViews() as GridBranchNode<T>;
}
@@ -362,22 +362,8 @@ export class Grid<T extends IView> implements IDisposable {
}
private doResetViewSize(location: number[]): void {
if (this.sashResetSizing === Sizing.Split) {
const orientation = getLocationOrientation(this.orientation, location);
const firstViewSize = getSize(this.gridview.getViewSize(location), orientation);
const [parentLocation, index] = tail(location);
const secondViewSize = getSize(this.gridview.getViewSize([...parentLocation, index + 1]), orientation);
const totalSize = firstViewSize + secondViewSize;
this.gridview.resizeView(location, Math.floor(totalSize / 2));
} else {
const [parentLocation,] = tail(location);
this.gridview.distributeViewSizes(parentLocation);
}
}
dispose(): void {
this.disposables = dispose(this.disposables);
const [parentLocation,] = tail(location);
this.gridview.distributeViewSizes(parentLocation);
}
}
@@ -568,8 +554,11 @@ export class SerializableGrid<T extends ISerializableView> extends Grid<T> {
const childLocation = [...location, i];
if (i < node.children.length - 1) {
const size = orientation === Orientation.VERTICAL ? child.box.height : child.box.width;
this.gridview.resizeView(childLocation, Math.floor(size * scale));
const size = orientation === Orientation.VERTICAL
? { height: Math.floor(child.box.height * scale) }
: { width: Math.floor(child.box.width * scale) };
this.gridview.resizeView(childLocation, size);
}
this.restoreViewsSize(childLocation, child, orthogonal(orientation), widthScale, heightScale);
@@ -653,63 +642,3 @@ export function createSerializedGrid(gridDescriptor: GridDescriptor): ISerialize
height: height || 1
};
}
export class View implements IView {
readonly element = $('.grid-view-view');
private visible = false;
private width: number | undefined;
private height: number | undefined;
private orientation: Orientation = Orientation.HORIZONTAL;
get minimumWidth(): number { return this.visible ? this.view.minimumWidth : 0; }
get maximumWidth(): number { return this.visible ? this.view.maximumWidth : (this.orientation === Orientation.HORIZONTAL ? 0 : Number.POSITIVE_INFINITY); }
get minimumHeight(): number { return this.visible ? this.view.minimumHeight : 0; }
get maximumHeight(): number { return this.visible ? this.view.maximumHeight : (this.orientation === Orientation.VERTICAL ? 0 : Number.POSITIVE_INFINITY); }
private onDidChangeVisibility = new Emitter<{ width: number; height: number; } | undefined>();
readonly onDidChange: Event<{ width: number; height: number; } | undefined>;
get priority(): LayoutPriority | undefined { return this.view.priority; }
get snapSize(): number | undefined { return this.visible ? this.view.snapSize : undefined; }
constructor(private view: IView) {
this.show();
this.onDidChange = Event.any(this.onDidChangeVisibility.event, Event.filter(view.onDidChange, () => this.visible));
}
show(): void {
if (this.visible) {
return;
}
this.visible = true;
this.element.appendChild(this.view.element);
this.onDidChangeVisibility.fire(typeof this.width === 'number' ? { width: this.width, height: this.height! } : undefined);
}
hide(): void {
if (!this.visible) {
return;
}
this.visible = false;
this.element.removeChild(this.view.element);
this.onDidChangeVisibility.fire(undefined);
}
layout(width: number, height: number, orientation: Orientation): void {
this.orientation = orientation;
if (!this.visible) {
return;
}
this.view.layout(width, height, orientation);
this.width = width;
this.height = height;
}
}

89
src/vs/base/browser/ui/grid/gridview.ts
View File

@@ -15,16 +15,22 @@ import { Color } from 'vs/base/common/color';
export { Sizing, LayoutPriority } from 'vs/base/browser/ui/splitview/splitview';
export { Orientation } from 'vs/base/browser/ui/sash/sash';
export interface IViewSize {
readonly width: number;
readonly height: number;
}
export interface IView {
readonly element: HTMLElement;
readonly minimumWidth: number;
readonly maximumWidth: number;
readonly minimumHeight: number;
readonly maximumHeight: number;
readonly onDidChange: Event<{ width: number; height: number; } | undefined>;
readonly onDidChange: Event<IViewSize | undefined>;
readonly priority?: LayoutPriority;
readonly snapSize?: number;
readonly snap?: boolean;
layout(width: number, height: number, orientation: Orientation): void;
setVisible?(visible: boolean): void;
}
export function orthogonal(orientation: Orientation): Orientation {
@@ -173,6 +179,12 @@ class BranchNode implements ISplitView, IDisposable {
}
}
setVisible(visible: boolean): void {
for (const child of this.children) {
child.setVisible(visible);
}
}
orthogonalLayout(size: number): void {
this._size = size;
this.splitview.layout(size);
@@ -299,6 +311,22 @@ class BranchNode implements ISplitView, IDisposable {
return this.splitview.getViewSize(index);
}
isChildVisible(index: number): boolean {
if (index < 0 || index >= this.children.length) {
throw new Error('Invalid index');
}
return this.splitview.isViewVisible(index);
}
setChildVisible(index: number, visible: boolean): void {
if (index < 0 || index >= this.children.length) {
throw new Error('Invalid index');
}
this.splitview.setViewVisible(index, visible);
}
private onDidChildrenChange(): void {
const onDidChildrenChange = Event.map(Event.any(...this.children.map(c => c.onDidChange)), () => undefined);
this.childrenChangeDisposable.dispose();
@@ -458,8 +486,8 @@ class LeafNode implements ISplitView, IDisposable {
return this.view.priority;
}
get snapSize(): number | undefined {
return this.view.snapSize;
get snap(): boolean | undefined {
return this.view.snap;
}
get minimumOrthogonalSize(): number {
@@ -483,6 +511,12 @@ class LeafNode implements ISplitView, IDisposable {
return this.view.layout(this.width, this.height, orthogonal(this.orientation));
}
setVisible(visible: boolean): void {
if (this.view.setVisible) {
this.view.setVisible(visible);
}
}
orthogonalLayout(size: number): void {
this._orthogonalSize = size;
return this.view.layout(this.width, this.height, orthogonal(this.orientation));
@@ -573,7 +607,7 @@ export class GridView implements IDisposable {
get maximumWidth(): number { return this.root.maximumHeight; }
get maximumHeight(): number { return this.root.maximumHeight; }
private _onDidChange = new Relay<{ width: number; height: number; } | undefined>();
private _onDidChange = new Relay<IViewSize | undefined>();
readonly onDidChange = this._onDidChange.event;
constructor(options: IGridViewOptions = {}) {
@@ -747,18 +781,33 @@ export class GridView implements IDisposable {
}
}
resizeView(location: number[], size: number): void {
resizeView(location: number[], { width, height }: Partial<IViewSize>): void {
const [rest, index] = tail(location);
const [, parent] = this.getNode(rest);
const [pathToParent, parent] = this.getNode(rest);
if (!(parent instanceof BranchNode)) {
throw new Error('Invalid location');
}
parent.resizeChild(index, size);
if (!width && !height) {
return;
}
const [parentSize, grandParentSize] = parent.orientation === Orientation.HORIZONTAL ? [width, height] : [height, width];
if (typeof grandParentSize === 'number' && pathToParent.length > 0) {
const [, grandParent] = tail(pathToParent);
const [, parentIndex] = tail(rest);
grandParent.resizeChild(parentIndex, grandParentSize);
}
if (typeof parentSize === 'number') {
parent.resizeChild(index, parentSize);
}
}
getViewSize(location: number[]): { width: number; height: number; } {
getViewSize(location: number[]): IViewSize {
const [, node] = this.getNode(location);
return { width: node.width, height: node.height };
}
@@ -790,6 +839,28 @@ export class GridView implements IDisposable {
node.distributeViewSizes();
}
isViewVisible(location: number[]): boolean {
const [rest, index] = tail(location);
const [, parent] = this.getNode(rest);
if (!(parent instanceof BranchNode)) {
throw new Error('Invalid from location');
}
return parent.isChildVisible(index);
}
setViewVisible(location: number[], visible: boolean): void {
const [rest, index] = tail(location);
const [, parent] = this.getNode(rest);
if (!(parent instanceof BranchNode)) {
throw new Error('Invalid from location');
}
parent.setChildVisible(index, visible);
}
getViews(): GridBranchNode {
return this._getViews(this.root, this.orientation, { top: 0, left: 0, width: this.width, height: this.height }) as GridBranchNode;
}

22
src/vs/base/browser/ui/inputbox/inputBox.ts
View File

@@ -28,7 +28,8 @@ export interface IInputOptions extends IInputBoxStyles {
readonly type?: string;
readonly validationOptions?: IInputValidationOptions;
readonly flexibleHeight?: boolean;
readonly actions?: IAction[];
readonly actions?: ReadonlyArray<IAction>;
// {{SQL CARBON EDIT}} Candidate for addition to vscode
readonly min?: string;
@@ -99,7 +100,7 @@ export class InputBox extends Widget {
private placeholder: string;
private ariaLabel: string;
private validation?: IInputValidator;
private state: string | null = 'idle';
private state: 'idle' | 'open' | 'closed' = 'idle';
private cachedHeight: number | null;
// {{SQL CARBON EDIT}} - Add showValidationMessage and set inputBackground, inputForeground, and inputBorder as protected
@@ -422,8 +423,6 @@ export class InputBox extends Widget {
let div: HTMLElement;
let layout = () => div.style.width = dom.getTotalWidth(this.element) + 'px';
this.state = 'open';
this.contextViewProvider.showContextView({
getAnchor: () => this.element,
anchorAlignment: AnchorAlignment.RIGHT,
@@ -454,18 +453,25 @@ export class InputBox extends Widget {
return null;
},
onHide: () => {
this.state = 'closed';
},
layout: layout
});
this.state = 'open';
}
private _hideMessage(): void {
if (!this.contextViewProvider || this.state !== 'open') {
if (!this.contextViewProvider) {
return;
}
this.state = 'idle';
if (this.state === 'open') {
this.contextViewProvider.hideContextView();
}
this.contextViewProvider.hideContextView();
this.state = 'idle';
}
private onValueChange(): void {
@@ -555,7 +561,7 @@ export class InputBox extends Widget {
this.contextViewProvider = undefined;
this.message = null;
this.validation = undefined;
this.state = null;
this.state = null!; // StrictNullOverride: nulling out ok in dispose
this.actionbar = undefined;
super.dispose();

4
src/vs/base/browser/ui/list/list.css
View File

@@ -186,9 +186,9 @@
/* Electron */
.monaco-list-type-filter {
cursor: -webkit-grab;
cursor: grab;
}
.monaco-list-type-filter.dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}

21
src/vs/base/browser/ui/list/listView.ts
View File

@@ -41,9 +41,11 @@ export interface IListViewDragAndDrop<T> extends IListDragAndDrop<T> {
getDragElements(element: T): T[];
}
export interface IAriaSetProvider<T> {
export interface IAriaProvider<T> {
getSetSize(element: T, index: number, listLength: number): number;
getPosInSet(element: T, index: number): number;
getRole?(element: T): string;
isChecked?(element: T): boolean;
}
export interface IListViewOptions<T> {
@@ -54,7 +56,7 @@ export interface IListViewOptions<T> {
readonly supportDynamicHeights?: boolean;
readonly mouseSupport?: boolean;
readonly horizontalScrolling?: boolean;
readonly ariaSetProvider?: IAriaSetProvider<T>;
readonly ariaProvider?: IAriaProvider<T>;
}
const DefaultOptions = {
@@ -174,7 +176,7 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
private setRowLineHeight: boolean;
private supportDynamicHeights: boolean;
private horizontalScrolling: boolean;
private ariaSetProvider: IAriaSetProvider<T>;
private ariaProvider: IAriaProvider<T>;
private scrollWidth: number | undefined;
private canUseTranslate3d: boolean | undefined = undefined;
@@ -227,7 +229,7 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
this.horizontalScrolling = getOrDefault(options, o => o.horizontalScrolling, DefaultOptions.horizontalScrolling);
DOM.toggleClass(this.domNode, 'horizontal-scrolling', this.horizontalScrolling);
this.ariaSetProvider = options.ariaSetProvider || { getSetSize: (e, i, length) => length, getPosInSet: (_, index) => index + 1 };
this.ariaProvider = options.ariaProvider || { getSetSize: (e, i, length) => length, getPosInSet: (_, index) => index + 1 };
this.rowsContainer = document.createElement('div');
this.rowsContainer.className = 'monaco-list-rows';
@@ -566,7 +568,12 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
if (!item.row) {
item.row = this.cache.alloc(item.templateId);
item.row!.domNode!.setAttribute('role', 'treeitem');
const role = this.ariaProvider.getRole ? this.ariaProvider.getRole(item.element) : 'treeitem';
item.row!.domNode!.setAttribute('role', role);
const checked = this.ariaProvider.isChecked ? this.ariaProvider.isChecked(item.element) : undefined;
if (typeof checked !== 'undefined') {
item.row!.domNode!.setAttribute('aria-checked', String(checked));
}
}
if (!item.row.domNode!.parentElement) {
@@ -634,8 +641,8 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
item.row!.domNode!.setAttribute('data-index', `${index}`);
item.row!.domNode!.setAttribute('data-last-element', index === this.length - 1 ? 'true' : 'false');
item.row!.domNode!.setAttribute('aria-setsize', String(this.ariaSetProvider.getSetSize(item.element, index, this.length)));
item.row!.domNode!.setAttribute('aria-posinset', String(this.ariaSetProvider.getPosInSet(item.element, index)));
item.row!.domNode!.setAttribute('aria-setsize', String(this.ariaProvider.getSetSize(item.element, index, this.length)));
item.row!.domNode!.setAttribute('aria-posinset', String(this.ariaProvider.getPosInSet(item.element, index)));
item.row!.domNode!.setAttribute('id', this.getElementDomId(index));
DOM.toggleClass(item.row!.domNode!, 'drop-target', item.dropTarget);

57
src/vs/base/browser/ui/list/listWidget.ts
View File

@@ -5,7 +5,7 @@
import 'vs/css!./list';
import { localize } from 'vs/nls';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { IDisposable, dispose, DisposableStore } from 'vs/base/common/lifecycle';
import { isNumber } from 'vs/base/common/types';
import { range, firstIndex, binarySearch } from 'vs/base/common/arrays';
import { memoize } from 'vs/base/common/decorators';
@@ -17,7 +17,7 @@ import { StandardKeyboardEvent, IKeyboardEvent } from 'vs/base/browser/keyboardE
import { Event, Emitter, EventBufferer } from 'vs/base/common/event';
import { domEvent } from 'vs/base/browser/event';
import { IListVirtualDelegate, IListRenderer, IListEvent, IListContextMenuEvent, IListMouseEvent, IListTouchEvent, IListGestureEvent, IIdentityProvider, IKeyboardNavigationLabelProvider, IListDragAndDrop, IListDragOverReaction, ListAriaRootRole } from './list';
import { ListView, IListViewOptions, IListViewDragAndDrop, IAriaSetProvider } from './listView';
import { ListView, IListViewOptions, IListViewDragAndDrop, IAriaProvider } from './listView';
import { Color } from 'vs/base/common/color';
import { mixin } from 'vs/base/common/objects';
import { ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable';
@@ -111,7 +111,7 @@ class Trait<T> implements ISpliceable<boolean>, IDisposable {
private sortedIndexes: number[] = [];
private _onChange = new Emitter<ITraitChangeEvent>();
get onChange(): Event<ITraitChangeEvent> { return this._onChange.event; }
readonly onChange: Event<ITraitChangeEvent> = this._onChange.event;
get trait(): string { return this._trait; }
@@ -228,7 +228,7 @@ function isInputElement(e: HTMLElement): boolean {
class KeyboardController<T> implements IDisposable {
private disposables: IDisposable[];
private readonly disposables = new DisposableStore();
private openController: IOpenController;
constructor(
@@ -237,7 +237,6 @@ class KeyboardController<T> implements IDisposable {
options: IListOptions<T>
) {
const multipleSelectionSupport = !(options.multipleSelectionSupport === false);
this.disposables = [];
this.openController = options.openController || DefaultOpenController;
@@ -314,7 +313,7 @@ class KeyboardController<T> implements IDisposable {
}
dispose() {
this.disposables = dispose(this.disposables);
this.disposables.dispose();
}
}
@@ -330,6 +329,7 @@ export function mightProducePrintableCharacter(event: IKeyboardEvent): boolean {
return (event.keyCode >= KeyCode.KEY_A && event.keyCode <= KeyCode.KEY_Z)
|| (event.keyCode >= KeyCode.KEY_0 && event.keyCode <= KeyCode.KEY_9)
|| (event.keyCode >= KeyCode.NUMPAD_0 && event.keyCode <= KeyCode.NUMPAD_9)
|| (event.keyCode >= KeyCode.US_SEMICOLON && event.keyCode <= KeyCode.US_QUOTE);
}
@@ -341,8 +341,8 @@ class TypeLabelController<T> implements IDisposable {
private automaticKeyboardNavigation = true;
private triggered = false;
private enabledDisposables: IDisposable[] = [];
private disposables: IDisposable[] = [];
private readonly enabledDisposables = new DisposableStore();
private readonly disposables = new DisposableStore();
constructor(
private list: List<T>,
@@ -398,7 +398,7 @@ class TypeLabelController<T> implements IDisposable {
return;
}
this.enabledDisposables = dispose(this.enabledDisposables);
this.enabledDisposables.clear();
this.enabled = false;
this.triggered = false;
}
@@ -430,20 +430,19 @@ class TypeLabelController<T> implements IDisposable {
dispose() {
this.disable();
this.disposables = dispose(this.disposables);
this.enabledDisposables.dispose();
this.disposables.dispose();
}
}
class DOMFocusController<T> implements IDisposable {
private disposables: IDisposable[] = [];
private readonly disposables = new DisposableStore();
constructor(
private list: List<T>,
private view: ListView<T>
) {
this.disposables = [];
const onKeyDown = Event.chain(domEvent(view.domNode, 'keydown'))
.filter(e => !isInputElement(e.target as HTMLElement))
.map(e => new StandardKeyboardEvent(e));
@@ -486,7 +485,7 @@ class DOMFocusController<T> implements IDisposable {
}
dispose() {
this.disposables = dispose(this.disposables);
this.disposables.dispose();
}
}
@@ -523,7 +522,7 @@ export class MouseController<T> implements IDisposable {
readonly multipleSelectionController: IMultipleSelectionController<T>;
private openController: IOpenController;
private mouseSupport: boolean;
private disposables: IDisposable[] = [];
private readonly disposables = new DisposableStore();
constructor(protected list: List<T>) {
this.multipleSelectionSupport = !(list.options.multipleSelectionSupport === false);
@@ -663,7 +662,7 @@ export class MouseController<T> implements IDisposable {
}
dispose() {
this.disposables = dispose(this.disposables);
this.disposables.dispose();
}
}
@@ -833,7 +832,7 @@ export interface IListOptions<T> extends IListStyles {
readonly supportDynamicHeights?: boolean;
readonly mouseSupport?: boolean;
readonly horizontalScrolling?: boolean;
readonly ariaSetProvider?: IAriaSetProvider<T>;
readonly ariaProvider?: IAriaProvider<T>;
}
export interface IListStyles {
@@ -857,6 +856,7 @@ export interface IListStyles {
listFilterWidgetOutline?: Color;
listFilterWidgetNoMatchesOutline?: Color;
listMatchesShadow?: Color;
treeIndentGuidesStroke?: Color;
}
const defaultStyles: IListStyles = {
@@ -867,7 +867,8 @@ const defaultStyles: IListStyles = {
listFocusAndSelectionForeground: Color.fromHex('#FFFFFF'),
listInactiveSelectionBackground: Color.fromHex('#3F3F46'),
listHoverBackground: Color.fromHex('#2A2D2E'),
listDropBackground: Color.fromHex('#383B3D')
listDropBackground: Color.fromHex('#383B3D'),
treeIndentGuidesStroke: Color.fromHex('#a9a9a9')
};
const DefaultOptions = {
@@ -1094,7 +1095,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
private styleController: IStyleController;
private typeLabelController?: TypeLabelController<T>;
protected disposables: IDisposable[];
protected readonly disposables = new DisposableStore();
@memoize get onFocusChange(): Event<IListEvent<T>> {
return Event.map(this.eventBufferer.wrapEvent(this.focus.onChange), e => this.toListEvent(e));
@@ -1112,6 +1113,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
return Event.map(this._onPin.event, indexes => this.toListEvent({ indexes }));
}
get domId(): string { return this.view.domId; }
get onDidScroll(): Event<ScrollEvent> { return this.view.onDidScroll; }
get onMouseClick(): Event<IListMouseEvent<T>> { return this.view.onMouseClick; }
get onMouseDblClick(): Event<IListMouseEvent<T>> { return this.view.onMouseDblClick; }
@@ -1163,7 +1165,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
readonly onDidBlur: Event<void>;
private _onDidDispose = new Emitter<void>();
get onDidDispose(): Event<void> { return this._onDidDispose.event; }
readonly onDidDispose: Event<void> = this._onDidDispose.event;
constructor(
container: HTMLElement,
@@ -1207,24 +1209,27 @@ export class List<T> implements ISpliceable<T>, IDisposable {
this.view
]);
this.disposables = [this.focus, this.selection, this.view, this._onDidDispose];
this.disposables.add(this.focus);
this.disposables.add(this.selection);
this.disposables.add(this.view);
this.disposables.add(this._onDidDispose);
this.onDidFocus = Event.map(domEvent(this.view.domNode, 'focus', true), () => null!);
this.onDidBlur = Event.map(domEvent(this.view.domNode, 'blur', true), () => null!);
this.disposables.push(new DOMFocusController(this, this.view));
this.disposables.add(new DOMFocusController(this, this.view));
if (typeof _options.keyboardSupport !== 'boolean' || _options.keyboardSupport) {
const controller = new KeyboardController(this, this.view, _options);
this.disposables.push(controller);
this.disposables.add(controller);
}
if (_options.keyboardNavigationLabelProvider) {
this.typeLabelController = new TypeLabelController(this, this.view, _options.keyboardNavigationLabelProvider);
this.disposables.push(this.typeLabelController);
this.disposables.add(this.typeLabelController);
}
this.disposables.push(this.createMouseController(_options));
this.disposables.add(this.createMouseController(_options));
this.onFocusChange(this._onFocusChange, this, this.disposables);
this.onSelectionChange(this._onSelectionChange, this, this.disposables);
@@ -1607,7 +1612,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
dispose(): void {
this._onDidDispose.fire();
this.disposables = dispose(this.disposables);
this.disposables.dispose();
this._onDidOpen.dispose();
this._onPin.dispose();

4
src/vs/base/browser/ui/menu/check.svg
View File

@@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-2 -2 16 16" enable-background="new -2 -2 16 16"><polygon fill="#424242" points="9,0 4.5,9 3,6 0,6 3,12 6,12 12,0"/></svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 3.76345L5.80687 11.9351L5.08584 11.8927L1 7.29614L1.76345 6.61752L5.50997 10.8324L14.3214 3L15 3.76345Z" fill="#C5C5C5"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 194 B

After

Width:  |  Height:  |  Size: 278 B

6
src/vs/base/browser/ui/menu/ellipsis.svg
View File

@@ -1 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#424242;}</style></defs><title>Ellipsis_bold_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M6,7.5A2.5,2.5,0,1,1,3.5,5,2.5,2.5,0,0,1,6,7.5ZM8.5,5A2.5,2.5,0,1,0,11,7.5,2.5,2.5,0,0,0,8.5,5Zm5,0A2.5,2.5,0,1,0,16,7.5,2.5,2.5,0,0,0,13.5,5Z" style="display: none;"/></g><g id="iconBg"><path class="icon-vs-bg" d="M5,7.5A1.5,1.5,0,1,1,3.5,6,1.5,1.5,0,0,1,5,7.5ZM8.5,6A1.5,1.5,0,1,0,10,7.5,1.5,1.5,0,0,0,8.5,6Zm5,0A1.5,1.5,0,1,0,15,7.5,1.5,1.5,0,0,0,13.5,6Z"/></g></svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 8C4 8.19778 3.94135 8.39112 3.83147 8.55557C3.72159 8.72002 3.56541 8.84819 3.38268 8.92388C3.19996 8.99957 2.99889 9.01937 2.80491 8.98079C2.61093 8.9422 2.43275 8.84696 2.29289 8.70711C2.15304 8.56725 2.0578 8.38907 2.01922 8.19509C1.98063 8.00111 2.00043 7.80004 2.07612 7.61732C2.15181 7.43459 2.27998 7.27841 2.44443 7.16853C2.60888 7.05865 2.80222 7 3 7C3.26522 7 3.51957 7.10536 3.70711 7.29289C3.89464 7.48043 4 7.73478 4 8Z" fill="#C5C5C5"/>
<path d="M9 8C9 8.19778 8.94135 8.39112 8.83147 8.55557C8.72159 8.72002 8.56541 8.84819 8.38268 8.92388C8.19996 8.99957 7.99889 9.01937 7.80491 8.98079C7.61093 8.9422 7.43275 8.84696 7.29289 8.70711C7.15304 8.56725 7.0578 8.38907 7.01922 8.19509C6.98063 8.00111 7.00043 7.80004 7.07612 7.61732C7.15181 7.43459 7.27998 7.27841 7.44443 7.16853C7.60888 7.05865 7.80222 7 8 7C8.26522 7 8.51957 7.10536 8.70711 7.29289C8.89464 7.48043 9 7.73478 9 8Z" fill="#C5C5C5"/>
<path d="M14 8C14 8.19778 13.9414 8.39112 13.8315 8.55557C13.7216 8.72002 13.5654 8.84819 13.3827 8.92388C13.2 8.99957 12.9989 9.01937 12.8049 8.98079C12.6109 8.9422 12.4327 8.84696 12.2929 8.70711C12.153 8.56725 12.0578 8.38907 12.0192 8.19509C11.9806 8.00111 12.0004 7.80004 12.0761 7.61732C12.1518 7.43459 12.28 7.27841 12.4444 7.16853C12.6089 7.05865 12.8022 7 13 7C13.2652 7 13.5196 7.10536 13.7071 7.29289C13.8946 7.48043 14 7.73478 14 8Z" fill="#C5C5C5"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 748 B

After

Width:  |  Height:  |  Size: 1.5 KiB

2
src/vs/base/browser/ui/menu/menu.css
View File

@@ -133,7 +133,7 @@
}
.monaco-menu .monaco-action-bar.vertical .action-item {
border: 1px solid transparent; /* prevents jumping behaviour on hover or focus */
border: thin solid transparent; /* prevents jumping behaviour on hover or focus */
}

42
src/vs/base/browser/ui/menu/menu.ts
View File

@@ -12,13 +12,13 @@ import { ResolvedKeybinding, KeyCode } from 'vs/base/common/keyCodes';
import { addClass, EventType, EventHelper, EventLike, removeTabIndexAndUpdateFocus, isAncestor, hasClass, addDisposableListener, removeClass, append, $, addClasses, removeClasses } from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { RunOnceScheduler } from 'vs/base/common/async';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { DisposableStore } from 'vs/base/common/lifecycle';
import { Color } from 'vs/base/common/color';
import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
import { ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable';
import { Event, Emitter } from 'vs/base/common/event';
import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
import { isLinux } from 'vs/base/common/platform';
import { isLinux, isMacintosh } from 'vs/base/common/platform';
function createMenuMnemonicRegExp() {
try {
@@ -59,7 +59,7 @@ export interface IMenuStyles {
}
export class SubmenuAction extends Action {
constructor(label: string, public entries: Array<SubmenuAction | IAction>, cssClass?: string) {
constructor(label: string, public entries: ReadonlyArray<SubmenuAction | IAction>, cssClass?: string) {
super(!!cssClass ? cssClass : 'submenu', label, '', true);
}
}
@@ -71,15 +71,14 @@ interface ISubMenuData {
export class Menu extends ActionBar {
private mnemonics: Map<string, Array<BaseMenuActionViewItem>>;
private menuDisposables: IDisposable[];
private readonly menuDisposables: DisposableStore;
private scrollableElement: DomScrollableElement;
private menuElement: HTMLElement;
private scrollTopHold: number | undefined;
private readonly _onScroll: Emitter<void>;
constructor(container: HTMLElement, actions: IAction[], options: IMenuOptions = {}) {
constructor(container: HTMLElement, actions: ReadonlyArray<IAction>, options: IMenuOptions = {}) {
addClass(container, 'monaco-menu-container');
container.setAttribute('role', 'presentation');
const menuElement = document.createElement('div');
@@ -92,7 +91,7 @@ export class Menu extends ActionBar {
context: options.context,
actionRunner: options.actionRunner,
ariaLabel: options.ariaLabel,
triggerKeys: { keys: [KeyCode.Enter], keyDown: true }
triggerKeys: { keys: [KeyCode.Enter, ...(isMacintosh ? [KeyCode.Space] : [])], keyDown: true }
});
this.menuElement = menuElement;
@@ -103,19 +102,19 @@ export class Menu extends ActionBar {
this.actionsList.tabIndex = 0;
this.menuDisposables = [];
this.menuDisposables = this._register(new DisposableStore());
addDisposableListener(menuElement, EventType.KEY_DOWN, (e) => {
const event = new StandardKeyboardEvent(e);
// Stop tab navigation of menus
if (event.equals(KeyCode.Tab)) {
EventHelper.stop(e, true);
e.preventDefault();
}
});
if (options.enableMnemonics) {
this.menuDisposables.push(addDisposableListener(menuElement, EventType.KEY_DOWN, (e) => {
this.menuDisposables.add(addDisposableListener(menuElement, EventType.KEY_DOWN, (e) => {
const key = e.key.toLocaleLowerCase();
if (this.mnemonics.has(key)) {
EventHelper.stop(e, true);
@@ -217,9 +216,9 @@ export class Menu extends ActionBar {
menuElement.style.maxHeight = `${Math.max(10, window.innerHeight - container.getBoundingClientRect().top - 30)}px`;
this.scrollableElement.onScroll(() => {
this.menuDisposables.add(this.scrollableElement.onScroll(() => {
this._onScroll.fire();
}, this, this.menuDisposables);
}, this));
this._register(addDisposableListener(this.menuElement, EventType.SCROLL, (e: ScrollEvent) => {
if (this.scrollTopHold !== undefined) {
@@ -557,7 +556,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
const isSelected = this.element && hasClass(this.element, 'focused');
const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;
const bgColor = isSelected && this.menuStyle.selectionBackgroundColor ? this.menuStyle.selectionBackgroundColor : this.menuStyle.backgroundColor;
const border = isSelected && this.menuStyle.selectionBorderColor ? `1px solid ${this.menuStyle.selectionBorderColor}` : null;
const border = isSelected && this.menuStyle.selectionBorderColor ? `thin solid ${this.menuStyle.selectionBorderColor}` : null;
this.item.style.color = fgColor ? `${fgColor}` : null;
this.check.style.backgroundColor = fgColor ? `${fgColor}` : null;
@@ -575,14 +574,14 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
private mysubmenu: Menu | null;
private submenuContainer: HTMLElement | undefined;
private submenuIndicator: HTMLElement;
private submenuDisposables: IDisposable[] = [];
private readonly submenuDisposables = this._register(new DisposableStore());
private mouseOver: boolean;
private showScheduler: RunOnceScheduler;
private hideScheduler: RunOnceScheduler;
constructor(
action: IAction,
private submenuActions: IAction[],
private submenuActions: ReadonlyArray<IAction>,
private parentData: ISubMenuData,
private submenuOptions?: IMenuOptions
) {
@@ -675,7 +674,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
this.parentData.submenu = undefined;
if (this.submenuContainer) {
this.submenuDisposables = dispose(this.submenuDisposables);
this.submenuDisposables.clear();
this.submenuContainer = undefined;
}
}
@@ -708,7 +707,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
this.submenuContainer.style.top = `${this.element.offsetTop - this.parentData.parent.scrollOffset - paddingTop}px`;
}
this.submenuDisposables.push(addDisposableListener(this.submenuContainer, EventType.KEY_UP, e => {
this.submenuDisposables.add(addDisposableListener(this.submenuContainer, EventType.KEY_UP, e => {
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.LeftArrow)) {
EventHelper.stop(e, true);
@@ -720,12 +719,12 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
this.parentData.submenu = undefined;
}
this.submenuDisposables = dispose(this.submenuDisposables);
this.submenuDisposables.clear();
this.submenuContainer = undefined;
}
}));
this.submenuDisposables.push(addDisposableListener(this.submenuContainer, EventType.KEY_DOWN, e => {
this.submenuDisposables.add(addDisposableListener(this.submenuContainer, EventType.KEY_DOWN, e => {
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.LeftArrow)) {
EventHelper.stop(e, true);
@@ -733,7 +732,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
}));
this.submenuDisposables.push(this.parentData.submenu.onDidCancel(() => {
this.submenuDisposables.add(this.parentData.submenu.onDidCancel(() => {
this.parentData.parent.focus();
if (this.parentData.submenu) {
@@ -741,7 +740,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
this.parentData.submenu = undefined;
}
this.submenuDisposables = dispose(this.submenuDisposables);
this.submenuDisposables.clear();
this.submenuContainer = undefined;
}));
@@ -781,7 +780,6 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
}
if (this.submenuContainer) {
this.submenuDisposables = dispose(this.submenuDisposables);
this.submenuContainer = undefined;
}
}

48
src/vs/base/browser/ui/menu/menubar.ts
View File

@@ -14,22 +14,25 @@ import { cleanMnemonic, IMenuOptions, Menu, MENU_ESCAPED_MNEMONIC_REGEX, MENU_MN
import { ActionRunner, IAction, IActionRunner } from 'vs/base/common/actions';
import { RunOnceScheduler } from 'vs/base/common/async';
import { Event, Emitter } from 'vs/base/common/event';
import { KeyCode, ResolvedKeybinding } from 'vs/base/common/keyCodes';
import { Disposable, dispose, IDisposable } from 'vs/base/common/lifecycle';
import { KeyCode, ResolvedKeybinding, KeyMod } from 'vs/base/common/keyCodes';
import { Disposable, dispose, IDisposable, DisposableStore } from 'vs/base/common/lifecycle';
import { withNullAsUndefined } from 'vs/base/common/types';
import { asArray } from 'vs/base/common/arrays';
import { ScanCodeUtils, ScanCode } from 'vs/base/common/scanCode';
import { isMacintosh } from 'vs/base/common/platform';
const $ = DOM.$;
export interface IMenuBarOptions {
enableMnemonics?: boolean;
disableAltFocus?: boolean;
visibility?: string;
getKeybinding?: (action: IAction) => ResolvedKeybinding | undefined;
alwaysOnMnemonics?: boolean;
}
export interface MenuBarMenu {
actions: IAction[];
actions: ReadonlyArray<IAction>;
label: string;
}
@@ -48,7 +51,7 @@ export class MenuBar extends Disposable {
buttonElement: HTMLElement;
titleElement: HTMLElement;
label: string;
actions?: IAction[];
actions?: ReadonlyArray<IAction>;
}[];
private overflowMenu: {
@@ -114,9 +117,9 @@ export class MenuBar extends Disposable {
let eventHandled = true;
const key = !!e.key ? e.key.toLocaleLowerCase() : '';
if (event.equals(KeyCode.LeftArrow)) {
if (event.equals(KeyCode.LeftArrow) || (isMacintosh && event.equals(KeyCode.Tab | KeyMod.Shift))) {
this.focusPrevious();
} else if (event.equals(KeyCode.RightArrow)) {
} else if (event.equals(KeyCode.RightArrow) || (isMacintosh && event.equals(KeyCode.Tab))) {
this.focusNext();
} else if (event.equals(KeyCode.Escape) && this.isFocused && !this.isOpen) {
this.setUnfocusedState();
@@ -127,6 +130,11 @@ export class MenuBar extends Disposable {
eventHandled = false;
}
// Never allow default tab behavior
if (event.equals(KeyCode.Tab | KeyMod.Shift) || event.equals(KeyCode.Tab)) {
event.preventDefault();
}
if (eventHandled) {
event.preventDefault();
event.stopPropagation();
@@ -776,6 +784,13 @@ export class MenuBar extends Disposable {
return;
}
// Prevent alt-key default if the menu is not hidden and we use alt to focus
if (modifierKeyStatus.event && !this.options.disableAltFocus) {
if (ScanCodeUtils.toEnum(modifierKeyStatus.event.code) === ScanCode.AltLeft) {
modifierKeyStatus.event.preventDefault();
}
}
// Alt key pressed while menu is focused. This should return focus away from the menubar
if (this.isFocused && modifierKeyStatus.lastKeyPressed === 'alt' && modifierKeyStatus.altKey) {
this.setUnfocusedState();
@@ -786,7 +801,7 @@ export class MenuBar extends Disposable {
// Clean alt key press and release
if (allModifiersReleased && modifierKeyStatus.lastKeyPressed === 'alt' && modifierKeyStatus.lastKeyReleased === 'alt') {
if (!this.awaitingAltRelease) {
if (!this.isFocused) {
if (!this.isFocused && !(this.options.disableAltFocus && this.options.visibility !== 'toggle')) {
this.mnemonicsInUse = true;
this.focusedMenu = { index: this.numMenusShown > 0 ? 0 : MenuBar.OVERFLOW_INDEX };
this.focusState = MenubarState.FOCUSED;
@@ -891,12 +906,13 @@ interface IModifierKeyStatus {
ctrlKey: boolean;
lastKeyPressed?: ModifierKey;
lastKeyReleased?: ModifierKey;
event?: KeyboardEvent;
}
class ModifierKeyEmitter extends Emitter<IModifierKeyStatus> {
private _subscriptions: IDisposable[] = [];
private readonly _subscriptions = new DisposableStore();
private _keyStatus: IModifierKeyStatus;
private static instance: ModifierKeyEmitter;
@@ -909,7 +925,7 @@ class ModifierKeyEmitter extends Emitter<IModifierKeyStatus> {
ctrlKey: false
};
this._subscriptions.push(domEvent(document.body, 'keydown', true)(e => {
this._subscriptions.add(domEvent(document.body, 'keydown', true)(e => {
const event = new StandardKeyboardEvent(e);
if (e.altKey && !this._keyStatus.altKey) {
@@ -929,11 +945,12 @@ class ModifierKeyEmitter extends Emitter<IModifierKeyStatus> {
this._keyStatus.shiftKey = e.shiftKey;
if (this._keyStatus.lastKeyPressed) {
this._keyStatus.event = e;
this.fire(this._keyStatus);
}
}));
this._subscriptions.push(domEvent(document.body, 'keyup', true)(e => {
this._subscriptions.add(domEvent(document.body, 'keyup', true)(e => {
if (!e.altKey && this._keyStatus.altKey) {
this._keyStatus.lastKeyReleased = 'alt';
} else if (!e.ctrlKey && this._keyStatus.ctrlKey) {
@@ -953,25 +970,26 @@ class ModifierKeyEmitter extends Emitter<IModifierKeyStatus> {
this._keyStatus.shiftKey = e.shiftKey;
if (this._keyStatus.lastKeyReleased) {
this._keyStatus.event = e;
this.fire(this._keyStatus);
}
}));
this._subscriptions.push(domEvent(document.body, 'mousedown', true)(e => {
this._subscriptions.add(domEvent(document.body, 'mousedown', true)(e => {
this._keyStatus.lastKeyPressed = undefined;
}));
this._subscriptions.push(domEvent(document.body, 'mouseup', true)(e => {
this._subscriptions.add(domEvent(document.body, 'mouseup', true)(e => {
this._keyStatus.lastKeyPressed = undefined;
}));
this._subscriptions.push(domEvent(document.body, 'mousemove', true)(e => {
this._subscriptions.add(domEvent(document.body, 'mousemove', true)(e => {
if (e.buttons) {
this._keyStatus.lastKeyPressed = undefined;
}
}));
this._subscriptions.push(domEvent(window, 'blur')(e => {
this._subscriptions.add(domEvent(window, 'blur')(e => {
this._keyStatus.lastKeyPressed = undefined;
this._keyStatus.lastKeyReleased = undefined;
this._keyStatus.altKey = false;
@@ -992,6 +1010,6 @@ class ModifierKeyEmitter extends Emitter<IModifierKeyStatus> {
dispose() {
super.dispose();
this._subscriptions = dispose(this._subscriptions);
this._subscriptions.dispose();
}
}

22
src/vs/base/browser/ui/octiconLabel/octicons/octicons.css vendored
View File

@@ -1,7 +1,7 @@
@font-face {
font-family: "octicons";
src: url("./octicons.ttf?91284a5a76ea88faeb754359b7f7cd03") format("truetype"),
url("./octicons.svg?91284a5a76ea88faeb754359b7f7cd03#octicons") format("svg");
src: url("./octicons.ttf?1b0f2a9535896866c74dd24eedeb4374") format("truetype"),
url("./octicons.svg?1b0f2a9535896866c74dd24eedeb4374#octicons") format("svg");
}
.octicon, .mega-octicon {
@@ -235,10 +235,14 @@ url("./octicons.svg?91284a5a76ea88faeb754359b7f7cd03#octicons") format("svg");
.octicon-zap:before { content: "\26a1" }
.octicon-archive:before { content: "\f101" }
.octicon-arrow-both:before { content: "\f102" }
.octicon-eye-closed:before { content: "\f103" }
.octicon-fold-down:before { content: "\f104" }
.octicon-fold-up:before { content: "\f105" }
.octicon-github-action:before { content: "\f106" }
.octicon-play:before { content: "\f107" }
.octicon-remote:before { content: "\f108" }
.octicon-request-changes:before { content: "\f109" }
.octicon-error:before { content: "\f103" }
.octicon-eye-closed:before { content: "\f104" }
.octicon-fold-down:before { content: "\f105" }
.octicon-fold-up:before { content: "\f106" }
.octicon-github-action:before { content: "\f107" }
.octicon-info-outline:before { content: "\f108" }
.octicon-play:before { content: "\f109" }
.octicon-remote:before { content: "\f10a" }
.octicon-request-changes:before { content: "\f10b" }
.octicon-smiley-outline:before { content: "\f10c" }
.octicon-warning:before { content: "\f10d" }

38
src/vs/base/browser/ui/octiconLabel/octicons/octicons.svg
View File

@@ -42,10 +42,10 @@
horiz-adv-x="625" d=" M312.5 632.5L0 257.5H187.5V7.5H437.5V257.5H625L312.5 632.5z" />
<glyph glyph-name="beaker"
unicode="&#xF0DD;"
horiz-adv-x="1000" d=" M898.75 -91.875L687.5 382.5V632.5H750V695H187.5V632.5H250V382.5L39.375 -91.875A62.5 62.5 0 0 1 96.25 -180H842.5C887.5000000000001 -180 917.5 -133.125 899.375 -91.875H898.75zM234.375 195L312.5 382.5V632.5H625V382.5L703.125 195H234.375zM500 320H562.5V257.5H500V320zM437.5 382.5H375V445H437.5V382.5zM437.5 570H500V507.5H437.5V570zM437.5 757.5H375V820H437.5V757.5z" />
horiz-adv-x="1000" d=" M881.8625 -40.39375L697.0187500000001 374.6875V593.4375H751.7062500000001V648.125H259.51625V593.4375H314.20375V374.6875L129.906875 -40.39375C113.500625 -76.4874999999999 140.2975 -117.5 179.6725 -117.5H832.6437500000001C872.01875 -117.5 898.26875 -76.4874999999999 882.40625 -40.39375H881.8625zM300.531875 210.625L368.89125 374.6875V593.4375H642.3312500000001V374.6875L710.6875 210.625H300.531875V210.625zM532.95375 320H587.64125V265.3125H532.95375V320V320zM478.26625 374.6875H423.57875V429.375H478.26625V374.6875V374.6875zM478.26625 538.75H532.95375V484.0625H478.26625V538.75V538.75zM478.26625 702.8125H423.57875V757.5H478.26625V702.8125V702.8125z" />
<glyph glyph-name="bell"
unicode="&#xF0DE;"
horiz-adv-x="937.5" d=" M875 70V7.5H0V70L45.625 106.25C93.75 154.375 96.25 265.6249999999999 120 382.5C168.125 618.125 375 695 375 695C375 729.375 403.125 757.5 437.5 757.5S500 729.375 500 695C500 695 711.875 618.125 760 382.5C783.7500000000001 265.0000000000001 786.25 153.75 834.375 106.25L875.625 70H875zM437.5 -180C506.8749999999999 -180 562.5 -124.375 562.5 -55H312.5C312.5 -124.375 368.125 -180 437.5 -180z" />
horiz-adv-x="875" d=" M816.66875 115.83125V57.5H0V115.83125L42.5833125 149.6687499999999C87.5 194.58125 89.833125 298.416875 112 407.5C156.916875 627.416875 350 699.166875 350 699.166875C350 731.25 376.25 757.5 408.333125 757.5C440.416875 757.5 466.666875 731.25 466.666875 699.166875C466.666875 699.166875 664.4187499999999 627.416875 709.33125 407.5C731.5 297.833125 733.8312500000001 194 778.75 149.6687499999999L817.25 115.83125H816.66875zM408.333125 -117.5C473.083125 -117.5 525 -65.5812499999999 525 -0.8312500000001H291.666875C291.666875 -65.5812499999999 343.583125 -117.5 408.333125 -117.5V-117.5z" />
<glyph glyph-name="bold"
unicode="&#xF282;"
horiz-adv-x="625" d=" M62.5 695H301.875C456.8750000000001 695 570.6249999999999 648.125 570.6249999999999 510.625C570.6249999999999 439.375 531.2499999999999 371.25 466.2499999999999 347.5V343.75C549.375 325 609.9999999999999 266.875 609.9999999999999 165C609.9999999999999 15.6249999999999 486.8749999999999 -55 321.8749999999999 -55H62.5V695zM291.25 385.625C395.625 385.625 440 426.875 440 491.25C440 564.375 391.25 591.875 293.75 591.875H195.625V385.6250000000001H291.25zM308.125 48.75C418.75 48.75 480 88.75 480 172.5C480 251.875 420.625 285.6250000000001 308.125 285.6250000000001H195.625V48.1250000000001H308.125V48.7500000000001z" />
@@ -166,8 +166,11 @@
<glyph glyph-name="ellipsis"
unicode="&#xF09A;"
horiz-adv-x="750" d=" M687.5 507.5H62.5C28.125 507.5 0 479.375 0 445V195C0 160.625 28.125 132.5 62.5 132.5H687.5C721.875 132.5 750 160.625 750 195V445C750 479.375 721.875 507.5 687.5 507.5zM250 257.5H125V382.5H250V257.5zM437.5 257.5H312.5V382.5H437.5V257.5zM625 257.5H500V382.5H625V257.5z" />
<glyph glyph-name="eye-closed"
<glyph glyph-name="error"
unicode="&#xF103;"
horiz-adv-x="1000" d=" M500 757.5C258.365625 757.5 62.5 561.6343750000001 62.5 320C62.5 78.3625000000001 258.365625 -117.5 500 -117.5C741.6374999999999 -117.5 937.5 78.3625000000001 937.5 320C937.5 561.6343750000001 741.6374999999999 757.5 500 757.5zM762.5 145L675 57.5L500 232.5L325 57.5L237.5 145L412.5 322.355625L237.5 495L325 582.5L500 407.5L675 582.5L762.5 495L587.5 322.355625L762.5 145z" />
<glyph glyph-name="eye-closed"
unicode="&#xF104;"
horiz-adv-x="1142.857142857143" d=" M1057.142857142857 812.8571428571429C1042.857142857143 827.1428571428571 1021.4285714285716 827.1428571428571 1007.1428571428572 812.8571428571429L857.1428571428573 655.7142857142857C778.5714285714288 712.8571428571429 685.7142857142858 748.5714285714286 578.5714285714287 748.5714285714286C214.2857142857144 755.7142857142857 1e-13 327.1428571428571 1e-13 327.1428571428571S85.7142857142858 162.8571428571429 235.7142857142859 34.2857142857142L85.7142857142858 -115.7142857142857C71.4285714285716 -130 71.4285714285716 -151.4285714285714 85.7142857142858 -165.7142857142857S121.4285714285716 -179.9999999999999 135.7142857142858 -165.7142857142857L1057.1428571428573 755.7142857142858C1071.4285714285716 770.0000000000001 1071.4285714285716 798.5714285714287 1057.1428571428573 812.857142857143zM642.8571428571429 448.5714285714286C621.4285714285714 462.8571428571429 600 470 571.4285714285714 470C492.8571428571429 470 428.5714285714286 405.7142857142857 428.5714285714286 327.1428571428572C428.5714285714286 298.5714285714286 435.7142857142857 277.1428571428571 450 255.7142857142858L350.0000000000001 148.5714285714287C307.1428571428572 198.5714285714286 285.7142857142857 255.7142857142858 285.7142857142857 327.1428571428572C285.7142857142857 484.2857142857144 414.2857142857143 612.8571428571429 571.4285714285714 612.8571428571429C635.7142857142858 612.8571428571429 700.0000000000001 591.4285714285716 750 548.5714285714287z M992.8571428571428 541.4285714285714L850 398.5714285714286C857.1428571428571 377.1428571428571 857.1428571428571 348.5714285714285 857.1428571428571 327.1428571428571C857.1428571428571 169.9999999999999 728.5714285714286 41.4285714285713 571.4285714285714 41.4285714285713C542.8571428571429 41.4285714285713 521.4285714285714 41.4285714285713 500 48.5714285714286L385.7142857142857 -65.7142857142858C442.8571428571429 -94.2857142857143 507.1428571428572 -108.5714285714285 578.5714285714287 -108.5714285714285C928.5714285714286 -108.5714285714285 1142.857142857143 320 1142.857142857143 320C1100 405.7142857142857 1050 477.1428571428572 992.8571428571428 541.4285714285714z" />
<glyph glyph-name="eye"
unicode="&#xF04E;"
@@ -206,10 +209,10 @@
unicode="&#xF0D2;"
horiz-adv-x="750" d=" M315.625 800.625C366.25 665 341.25 589.375 283.125 531.25C221.875 465.625 123.75 416.875 56.25 321.25C-34.375 193.1249999999999 -50 -86.8750000000001 276.875 -160C139.375 -87.5 110 122.5 258.125 253.125C220 126.25 291.25 45 379.375 74.375C466.25 103.7500000000001 523.1250000000001 41.2500000000001 521.25 -30C520 -78.7499999999999 501.8749999999999 -120 450.625 -143.125C664.3749999999999 -106.25 749.375 70.625 749.375 204.3749999999999C749.375 381.8749999999999 591.25 405.625 671.25 555C576.25 546.875 544.375 484.3749999999999 553.125 383.125C558.75 315.625 489.375 270.6249999999999 436.875 300C395 325.625 395.625 374.375 433.125 411.25C511.25 488.125 542.5 666.875 315.625 800L314.375 801.25L315.625 800.625z" />
<glyph glyph-name="fold-down"
unicode="&#xF104;"
unicode="&#xF105;"
horiz-adv-x="875" d=" M250 132.5L437.5 -55L625 132.5H500V507.5H375V132.5H250zM0 132.5C0 98.125 28.125 70 62.5 70H218.75L156.25 132.5H93.75L218.75 257.5H312.5V320H218.75L93.75 445H312.5V507.5H62.5C28.125 507.5 0 479.375 0 445L156.25 288.75L0 132.5zM656.25 257.5H562.5V320H656.25L781.25 445H562.5V507.5H812.5C846.875 507.5 875 479.375 875 445L718.75 288.75L875 132.5C875 98.125 846.875 70 812.5 70H656.25L718.75 132.5H781.25L656.25 257.5z" />
<glyph glyph-name="fold-up"
unicode="&#xF105;"
unicode="&#xF106;"
horiz-adv-x="875" d=" M625 445L437.5 632.5L250 445H375V70H500V445H625zM875 445C875 479.375 846.875 507.5 812.5 507.5H656.25L718.75 445H781.25L656.25 320H562.5V257.5H656.25L781.25 132.5H562.5V70H812.5C846.875 70 875 98.125 875 132.5L718.75 288.75L875 445zM218.75 320H312.5V257.5H218.75L93.75 132.5H312.5V70H62.5C28.125 70 0 98.125 0 132.5L156.25 288.75L0 445C0 479.375 28.125 507.5 62.5 507.5H218.75L156.25 445H93.75L218.75 320z" />
<glyph glyph-name="fold"
unicode="&#xF0CC;"
@@ -242,7 +245,7 @@
unicode="&#xF009;"
horiz-adv-x="750" d=" M687.5 115V507.5C685.625 556.25 666.25 599.375 628.75 636.25C591.25 673.125 548.75 693.125 500 695H437.5V820L250 632.5L437.5 445V570H500C516.875 568.75 530 563.125 543.125 550.625C556.25 538.125 561.875 524.375 562.5 507.5V114.9999999999999A124.56250000000001 124.56250000000001 0 0 1 625 -117.5A124.56250000000001 124.56250000000001 0 0 1 687.5 115zM625 -67.5C583.75 -67.5 550 -33.1249999999999 550 7.5C550 48.125 584.3750000000001 82.5 625 82.5C665.625 82.5 700 48.1249999999999 700 7.5C700 -33.125 665.6249999999999 -67.5 625 -67.5zM250 632.5C250 701.875 194.375 757.5 125 757.5A124.56250000000001 124.56250000000001 0 0 1 62.5 525V114.9999999999999A124.56250000000001 124.56250000000001 0 0 1 125 -117.5A124.56250000000001 124.56250000000001 0 0 1 187.5 115V525C224.375 546.25 250 586.25 250 632.5zM200 7.5C200 -33.75 165.625 -67.5 125 -67.5C84.375 -67.5 50 -33.1249999999999 50 7.5C50 48.125 84.375 82.5 125 82.5C165.625 82.5 200 48.1249999999999 200 7.5zM125 557.5C83.75 557.5 50 591.875 50 632.5C50 673.125 84.375 707.5 125 707.5C165.625 707.5 200 673.125 200 632.5C200 591.875 165.625 557.5 125 557.5z" />
<glyph glyph-name="github-action"
unicode="&#xF106;"
unicode="&#xF107;"
horiz-adv-x="1000" d=" M687.5 476.25C687.5 424.4733047033631 729.4733047033632 382.5 781.25 382.5C833.0266952966368 382.5 875 424.4733047033631 875 476.25C875 528.026695296637 833.0266952966368 570 781.25 570C729.4733047033632 570 687.5 528.026695296637 687.5 476.25z M937.5 695H562.5C562.5 732.5 537.5 757.5 500 757.5S437.5 732.5 437.5 695H62.5C31.25 695 0 663.75 0 632.5V7.5C0 -23.75 31.25 -55 62.5 -55H437.5C437.5 -92.5 462.5 -117.5 500 -117.5S562.5 -92.5 562.5 -55H937.5C968.75 -55 1000 -23.75 1000 7.5V632.5C1000 663.75 968.75 695 937.5 695zM937.5 7.5H62.5V632.5H937.5z" />
<glyph glyph-name="globe"
unicode="&#xF0B6;"
@@ -271,9 +274,12 @@
<glyph glyph-name="inbox"
unicode="&#xF0CF;"
horiz-adv-x="875" d=" M875 257.5L804.3750000000001 703.75C799.3750000000001 733.75 773.1250000000001 757.5 741.8750000000001 757.5H133.125C101.875 757.5 75.625 733.75 70.625 703.75L0 257.5V-55C0 -89.375 28.125 -117.5 62.5 -117.5H812.5C846.875 -117.5 875 -89.375 875 -55V257.5zM670 223.125L642.5000000000001 167.4999999999999C631.8750000000001 146.2499999999999 610.0000000000001 132.4999999999999 585.6250000000001 132.4999999999999H288.125C264.375 132.4999999999999 243.1250000000001 146.2499999999999 232.5 166.8749999999999L205 223.7499999999999C194.375 244.375 172.5 258.125 149.375 258.125H62.5L125 695.625H750L812.5 258.125H726.2500000000001C701.875 258.125 680.625 244.375 669.375 223.7499999999999L670 223.125z" />
<glyph glyph-name="info-outline"
unicode="&#xF108;"
horiz-adv-x="875" d=" M393.75 464.37625C381.875 476.25125 376.25 490.62625 376.25 508.12625C376.25 525.62625 381.875 540.62625 393.75 551.87625C405.625 563.12625 420 569.37625 437.5 569.37625C455 569.37625 470 563.75125 481.25 551.87625C492.5 540.00125 498.75 525.62625 498.75 508.12625C498.75 490.62625 493.125 475.62625 481.25 464.37625C469.375 453.12625 455 445.62625 437.5 445.62625C420 445.62625 405 452.50125 393.75 464.37625zM500 320.6268750000001C498.75 336.2518750000001 493.125 350.626875 480.625 363.751875C468.125 375.6268750000001 454.375 382.5012500000001 437.5 383.1268750000001H375C358.125 381.876875 345 375.0012500000001 331.875 363.751875C319.375 351.2512500000001 313.125 336.2518750000001 312.5 320.6268750000001H375V133.125C376.25 116.25 381.875 101.875 394.375 90C406.875 77.5 420.625 70.625 437.5 70.625H500C516.875 70.625 530 77.5 543.125 90C555.625 101.875 561.875 116.25 562.5 133.125H500V321.2518750000001V320.6268750000001zM437.5 676.25125C241.25 676.25125 81.25 517.50125 81.25 321.25125C81.25 125 241.25 -35 437.5 -35C633.75 -35 793.75 124.375 793.75 321.25125C793.75 518.12625 633.75 676.87625 437.5 676.87625V676.25125zM437.5 758.75125C678.75 758.75125 875 562.50125 875 321.25125C875 80 678.75 -116.25 437.5 -116.25C196.25 -116.25 0 78.75 0 321.25125C0 563.75125 196.25 758.75125 437.5 758.75125z" />
<glyph glyph-name="info"
unicode="&#xF059;"
horiz-adv-x="875" d=" M393.75 464.375A58.875 58.875 0 0 0 376.25 508.125C376.25 525.625 381.875 540.625 393.75 551.875C405.625 563.125 420 569.375 437.5 569.375C455 569.375 470 563.75 481.25 551.875C492.5 540 498.75 525.625 498.75 508.125C498.75 490.6249999999999 493.1250000000001 475.625 481.25 464.375A62.5 62.5 0 0 0 437.5 445.625C420 445.625 405 452.5 393.75 464.375zM500 320.625C498.75 336.25 493.125 350.625 480.625 363.75C468.125 375.625 454.3750000000001 382.5 437.5 383.125H375C358.125 381.875 345 375 331.8750000000001 363.75C319.375 351.25 313.1250000000001 336.25 312.5000000000001 320.625H375.0000000000001V133.125C376.2500000000001 116.25 381.8750000000001 101.875 394.3750000000001 90C406.8750000000001 77.5000000000001 420.625 70.625 437.5 70.625H500C516.875 70.625 530 77.5 543.125 90C555.6249999999999 101.875 561.875 116.25 562.5 133.125H500V321.25V320.625zM437.5 676.25C241.25 676.25 81.25 517.5 81.25 321.2500000000001C81.25 125 241.25 -35 437.5 -35S793.75 124.3750000000001 793.75 321.2500000000001C793.75 518.125 633.7499999999999 676.875 437.5 676.875V676.25zM437.5 758.75C678.75 758.75 875 562.5 875 321.25S678.75 -116.25 437.5 -116.25S0 78.75 0 321.25S196.25 758.75 437.5 758.75z" />
horiz-adv-x="1000" d=" M500 757.5C257.6925 757.5 62.5 562.3075 62.5 320C62.5 77.69375 257.6925 -117.5 500 -117.5C742.30625 -117.5 937.5 77.69375 937.5 320C937.5 562.3075 742.30625 757.5 500 757.5zM560.57625 10.3812499999999H432.6925V447.884375H560.57625V10.3812499999999zM560.57625 508.460625H432.6925V636.346875H560.57625V508.460625z" />
<glyph glyph-name="issue-closed"
unicode="&#xF028;"
horiz-adv-x="1000" d=" M437.5 195H562.5V70H437.5V195zM562.5 570H437.5V257.5H562.5V570zM656.25 476.25L593.75 413.75L750 257.5L1000 538.75L937.5 601.25L750 382.5L656.25 476.25zM500 -36.25A356.87500000000006 356.87500000000006 0 0 0 143.75 320C143.75 516.25 303.75 676.25 500 676.25C614.375 676.25 715.625 621.25 781.25 538.75L838.75 596.25A434.18749999999994 434.18749999999994 0 0 1 500 757.5C258.75 757.5 62.5 561.25 62.5 320S258.7500000000001 -117.5 500 -117.5S937.5 78.75 937.5 320L842.5 225C801.25 74.375 663.7500000000001 -36.875 500 -36.875V-36.2500000000001z" />
@@ -392,7 +398,7 @@
unicode="&#xF041;"
horiz-adv-x="1000" d=" M625 745V695L656.25 632.5L375 445H137.5C110 445 95.625 411.875 116.25 391.25L312.5 195L62.5 -117.5L375 132.5L571.25 -63.75A31.25 31.25 0 0 1 625 -42.5V195L812.5 476.25L875 445H925C952.5 445 966.875 478.125 946.25 498.75L678.75 766.25A31.25 31.25 0 0 1 625 745z" />
<glyph glyph-name="play"
unicode="&#xF107;"
unicode="&#xF109;"
horiz-adv-x="875" d=" M875 320A437.49999999999994 437.49999999999994 0 1 0 0 320A437.49999999999994 437.49999999999994 0 0 0 875 320zM361.0625 102.375L648.5 294A31.25 31.25 0 0 1 648.5 346L361.0625 537.625A31.25 31.25 0 0 1 312.5 511.625V128.3750000000001A31.25 31.25 0 0 1 361.0625 102.375z" />
<glyph glyph-name="plug"
unicode="&#xF0D4;"
@@ -408,7 +414,7 @@
horiz-adv-x="500" d=" M500 70H0V570H500V70z" />
<glyph glyph-name="project"
unicode="&#xF28B;"
horiz-adv-x="937.5" d=" M375 695H562.5V195H375z M125 695H312.5V-55H125z M625 695H812.5V70H625z M875 820H62.5C25 820 0 795 0 757.5V-117.5C0 -155 25 -180 62.5 -180H875C912.5 -180 937.5 -155 937.5 -117.5V757.5C937.5 795 912.5 820 875 820zM875 -117.5H62.5V757.5H875z" />
horiz-adv-x="937.5" d=" M605.46875 101.25H769.53125V648.125H605.46875V101.25V101.25zM386.71875 210.625H550.78125V648.125H386.71875V210.625V210.625zM167.96875 -8.125H332.03125V648.125H167.96875V-8.125V-8.125zM113.28125 -62.8125H824.21875V702.8125H113.28125V-62.8125V-62.8125zM824.21875 757.5H113.28125C83.09375 757.5 58.59375 733 58.59375 702.8125V-62.8125C58.59375 -93 83.09375 -117.5 113.28125 -117.5H824.21875C854.40625 -117.5 878.90625 -93 878.90625 -62.8125V702.8125C878.90625 733 854.40625 757.5 824.21875 757.5V757.5V757.5z" />
<glyph glyph-name="pulse"
unicode="&#xF085;"
horiz-adv-x="875" d=" M718.75 320L550 482.5L412.5 288.75L343.75 720L148.75 320H0V195H225L281.25 307.5L337.5 -30L562.5 288.75L662.5 195H875V320H718.75z" />
@@ -422,7 +428,7 @@
unicode="&#xF030;"
horiz-adv-x="1000" d=" M299.375 438.125C315 453.75 315 480 299.375 495.625C279.375 516.25 269.3750000000001 543.125 269.3750000000001 570C269.3750000000001 596.875 279.3750000000001 623.75 299.3750000000001 644.375C315.0000000000001 660.625 315.0000000000001 686.25 299.3750000000001 701.875A38.3125 38.3125 0 0 1 271.2500000000001 713.75C261.2500000000001 713.75 250.6250000000001 710 243.1250000000001 701.875C207.5000000000001 665.625 190 617.5 190 570C190 522.5 208.125 474.375 243.1250000000001 438.1250000000001C258.7500000000001 422.5000000000001 284.3750000000001 422.5000000000001 299.3750000000001 438.1250000000001zM145.625 787.5A40.6875 40.6875 0 0 1 88.125 787.5C30 727.5 0.625 648.75 0.625 570.625C0.625 491.875 30 413.125 88.125 353.125C103.75 336.875 129.375 336.875 145 353.125S160.625 395.625 145 411.875C102.5 455.6249999999999 81.25 513.125 81.25 570.625C81.25 628.1249999999999 102.5 685.6249999999999 145 729.3749999999999A41.25 41.25 0 0 1 145.625 787.4999999999999zM501.25 468.7500000000001A101.25 101.25 0 1 1 400 570C399.3750000000001 514.375 445 468.75 501.25 468.75zM911.875 786.875A39.25 39.25 0 0 1 855 786.875C839.375 770.625 839.375 744.375 855 728.125C897.5 684.375 918.75 626.875 918.75 569.375C918.75 511.875 897.5 455 855 410.625C839.375 394.375 839.375 368.1250000000001 855 351.875A40.6875 40.6875 0 0 1 912.5 351.875C970.625 411.875 1000 490.625 1000 569.375A315.5 315.5 0 0 1 911.875 786.875zM501.25 387.5C475.6249999999999 387.5 449.375 393.75 426.25 406.25L229.375 -116.8749999999999H322.5L376.25 -54.3749999999999H626.25L678.75 -116.8749999999999H771.875L575.625 406.25C551.875 393.75 526.8750000000001 387.5 501.2500000000001 387.5zM500.625 357.5L563.75 132.5H438.75L500.625 357.5zM376.25 8.125L438.75 70.625H563.75L626.25 8.125H376.25zM700.625 701.875C685 686.25 685 660 700.625 644.375C720.6250000000001 623.75 730.6250000000001 596.875 730.6250000000001 570C730.6250000000001 543.125 720.6250000000001 516.25 700.625 495.6250000000001C685 479.3750000000001 685 453.7500000000001 700.625 438.1250000000001A39.375 39.375 0 0 1 756.8750000000001 438.1250000000001C792.5000000000001 474.3750000000001 810 522.5 810 570C810 617.5 792.5000000000001 665.625 756.8750000000001 701.875A39.625 39.625 0 0 1 700.625 701.875z" />
<glyph glyph-name="remote"
unicode="&#xF108;"
unicode="&#xF10A;"
horiz-adv-x="1000" d=" M524.97125 425.9231250000001L794.09375 156.8L875 237.615625L686.69375 425.9231250000001L875 614.184375L794.09375 695L524.97125 425.9231250000001zM313.3075 225.89875L125 414.20625L205.9075 495.02125L474.984375 225.89875L205.9075 -43.2687500000001L125 37.59375L313.3075 225.89875z" />
<glyph glyph-name="reply"
unicode="&#xF28C;"
@@ -449,7 +455,7 @@
unicode="&#xF28D;"
horiz-adv-x="1000" d=" M437.5 320H562.5V195H437.5z M437.5 632.5H562.5V382.5H437.5z M937.5 757.5H62.5C25 757.5 0 732.5 0 695V132.5C0 95 25 70 62.5 70H187.5V-180L437.5 70H937.5C975 70 1000 95 1000 132.5V695C1000 732.5 975 757.5 937.5 757.5zM937.5 132.5H406.25L250 -23.75V132.5H62.5V695H937.5z" />
<glyph glyph-name="request-changes"
unicode="&#xF109;"
unicode="&#xF10B;"
horiz-adv-x="1000" d=" M0 757.5A62.5 62.5 0 0 0 62.5 820H937.5A62.5 62.5 0 0 0 1000 757.5V132.5A62.5 62.5 0 0 0 937.5 70H468.75L250 -148.75V70H62.5A62.5 62.5 0 0 0 0 132.5V757.5zM62.5 757.5V132.5H312.5V7.5L437.5 132.5H937.5V757.5H62.5zM531.25 570H656.25V507.5H531.25V382.5H468.75V507.5H343.75V570H468.75V695H531.25V570zM656.25 257.5H343.75V320H656.25V257.5z" />
<glyph glyph-name="rocket"
unicode="&#xF033;"
@@ -484,9 +490,12 @@
<glyph glyph-name="sign-out"
unicode="&#xF032;"
horiz-adv-x="941.1764705882352" d=" M705.8823529411765 290.5882352941177V408.2352941176471H470.5882352941176V525.8823529411765H705.8823529411765V643.5294117647059L941.1764705882352 467.0588235294118L705.8823529411765 290.5882352941177zM588.2352941176471 114.1176470588235H352.9411764705883V643.5294117647059L117.6470588235294 761.1764705882352H588.2352941176471V584.7058823529412H647.0588235294117V761.1764705882352C647.0588235294117 793.5294117647059 620.5882352941177 820 588.2352941176471 820H58.8235294117647C26.4705882352941 820 0 793.5294117647059 0 761.1764705882352V91.7647058823529C0 68.8235294117646 12.9411764705882 48.8235294117646 32.3529411764706 38.2352941176471L352.9411764705883 -121.764705882353V55.2941176470589H588.2352941176471C620.5882352941177 55.2941176470589 647.0588235294117 81.7647058823529 647.0588235294117 114.1176470588235V349.4117647058824H588.2352941176471V114.1176470588235z" />
<glyph glyph-name="smiley-outline"
unicode="&#xF10C;"
horiz-adv-x="1000" d=" M500 820C223.75 820 0 596.25 0 320C0 43.75 223.75 -180 500 -180C776.25 -180 1000 43.75 1000 320C1000 596.25 776.25 820 500 820zM800.625 19.375C761.25 -20 715.625 -50 665 -71.25C613.125 -93.75 557.5 -104.375 500 -104.375C442.5 -104.375 386.875 -93.75 335 -71.25C284.375 -50 238.125 -19.375 199.375 19.375C160.625 58.125 130 104.375 108.75 155C86.25 206.875 75.625 262.5 75.625 320C75.625 377.5 86.25 433.125 108.75 485C130 535.625 160.625 581.875 199.375 620.625C238.125 659.375 284.375 690 335 711.25C386.875 733.75 442.5 744.375 500 744.375C557.5 744.375 613.125 733.75 665 711.25C715.625 690 761.875 659.375 800.625 620.625C839.375 581.875 870 535.625 891.25 485C913.75 433.125 924.375 377.5 924.375 320C924.375 262.5 913.75 206.875 891.25 155C870 104.375 839.375 58.125 800.625 19.375zM250 395V431.875C250 473.125 283.125 506.25 325 506.25H361.875C403.125 506.25 436.25 473.125 436.25 431.875V395C436.25 353.125 403.125 320 361.875 320H325C283.125 320 250 353.125 250 395zM562.5 395V431.875C562.5 473.125 595.625 506.25 637.5 506.25H674.375C715.625 506.25 748.75 473.125 748.75 431.875V395C748.75 353.125 715.625 320 674.375 320H637.5C595.625 320 562.5 353.125 562.5 395zM812.5 195C767.5 77.5 630.625 7.5 500 7.5C369.375 7.5 232.5 78.125 187.5 195C178.75 219.375 201.875 257.5 228.75 257.5H765.625C791.25 257.5 821.25 219.375 812.5 195z" />
<glyph glyph-name="smiley"
unicode="&#xF27D;"
horiz-adv-x="1000" d=" M500 820C223.75 820 0 596.25 0 320S223.75 -180 500 -180S1000 43.75 1000 320S776.25 820 500 820zM800.6249999999999 19.375A419.99999999999994 419.99999999999994 0 0 0 664.9999999999999 -71.25C613.1249999999999 -93.75 557.4999999999999 -104.375 499.9999999999999 -104.375C442.4999999999999 -104.375 386.8749999999999 -93.75 334.9999999999999 -71.25C284.3749999999999 -50 238.1249999999999 -19.375 199.3749999999999 19.375A423.31249999999994 423.31249999999994 0 0 0 108.7499999999999 155A411.875 411.875 0 0 0 75.625 320C75.625 377.5 86.25 433.1250000000001 108.75 485.0000000000001C130 535.625 160.625 581.875 199.375 620.625C238.125 659.375 284.375 690 335 711.25A411.875 411.875 0 0 0 500 744.375C557.5 744.375 613.125 733.75 665 711.25C715.6250000000001 690 761.8750000000001 659.375 800.625 620.625C839.375 581.875 870 535.625 891.25 485.0000000000001C913.75 433.1250000000001 924.375 377.5000000000001 924.375 320C924.375 262.5 913.75 206.875 891.25 155C870 104.3749999999999 839.375 58.1249999999999 800.625 19.375zM250 395V431.875C250 473.125 283.125 506.25 325 506.25H361.875C403.125 506.25 436.25 473.125 436.25 431.8750000000001V395.0000000000001C436.25 353.1250000000001 403.125 320.0000000000001 361.8750000000001 320.0000000000001H325C283.125 320 250 353.125 250 395zM562.5 395V431.875C562.5 473.125 595.625 506.25 637.5 506.25H674.375C715.625 506.25 748.7499999999999 473.125 748.7499999999999 431.8750000000001V395.0000000000001C748.7499999999999 353.1250000000001 715.625 320.0000000000001 674.375 320.0000000000001H637.5C595.625 320 562.5 353.125 562.5 395zM812.5 195C767.5 77.5000000000001 630.625 7.5 500 7.5S232.5 78.1249999999999 187.5 195C178.75 219.375 201.875 257.5 228.75 257.5H765.625C791.25 257.5 821.25 219.375 812.5 195z" />
horiz-adv-x="1000" d=" M500 757.5C258.375 757.5 62.5 561.625 62.5 320C62.5 78.375 258.375 -117.5 500 -117.5C741.625 -117.5 937.5 78.375 937.5 320C937.5 561.625 741.625 757.5 500 757.5zM653.125 582.5C689.375 582.5 718.75 543.3125 718.75 495C718.75 446.6875 689.375 407.5 653.125 407.5C616.875 407.5 587.5 446.6875 587.5 495C587.5 543.3125 616.875 582.5 653.125 582.5zM346.875 582.5C383.125 582.5 412.5 543.3125 412.5 495C412.5 446.6875 383.125 407.5 346.875 407.5C310.625 407.5 281.25 446.6875 281.25 495C281.25 543.3125 310.625 582.5 346.875 582.5zM778.1875 221.5625C736.4375 103.8125 624.6875 24.6875 500 24.6875C375.3125 24.6875 263.5 103.8125 221.8125 221.5C215.75 238.5625 224.6875 257.3125 241.75 263.375C258.9375 269.4375 277.625 260.4375 283.625 243.375C316.0625 151.8125 403 90.25 499.9375 90.25C596.875 90.25 683.75 151.75 716.25 243.375C722.3125 260.4375 741.25 269.4375 758.125 263.375C775.25 257.375 784.25 238.625 778.1875 221.5625z" />
<glyph glyph-name="squirrel"
unicode="&#xF0B2;"
horiz-adv-x="1000" d=" M750 757.5C611.875 757.5 500 675.625 500 575C500 453.7500000000001 531.25 385.6250000000001 500 195C500 476.25 326.875 591.25 250 591.25C253.125 622.5 220 632.5 220 632.5S206.25 625.625 201.25 611.25C184.375 630.625 166.25 628.125 166.25 628.125L158.125 591.875S43.75 551.875 42.5 390.625C55 370 138.125 353.125 196.875 363.75C252.5 360.625 238.7500000000001 314.375 226.25 301.875C173.75 249.375 125 320 62.5 320S0 257.5 62.5 257.5S125 195 250 195C56.875 120 250 -55 250 -55H187.5C125 -55 125 -117.5 125 -117.5H500C687.5 -117.5 812.5 -55 812.5 99.375C812.5 152.5 785.625 211.2500000000001 750 257.5C680.625 348.75 764.375 425 812.5 382.5C860.625 340 1000 320 1000 507.5C1000 645.625 888.125 757.5 750 757.5zM156.25 445C138.75 445 125 458.75 125 476.25S138.75 507.5 156.25 507.5S187.5 493.75 187.5 476.25S173.75 445 156.25 445z" />
@@ -525,7 +534,7 @@
horiz-adv-x="1000" d=" M998.75 309.375L938.125 -62.5000000000001C927.5 -148.75 820.625 -180 750 -180H355.625C343.125 -180 331.8750000000001 -176.875 322.5 -171.25L232.5 -117.5H125C58.75 -117.5 0 -58.75 0 7.5V257.5C0 323.7500000000001 58.75 383.75 125 382.5H250C306.875 382.5 336.875 410.625 399.3750000000001 479.375C456.2500000000001 541.875 454.3750000000001 591.875 438.7500000000001 683.75C433.75 715 442.5 746.25 465 772.5C489.375 801.875 526.25 820 562.5 820C676.875 820 750 588.125 750 506.875L748.75 445.625H876.25C948.75 445.625 998.1249999999998 395.625 1000 322.5C1000 315.625 998.75 309.375 998.75 309.375zM875.625 383.75H751.25C707.5 383.75 686.875 401.25 686.875 444.375L688.75 508.75C688.75 588.125 615.625 758.75 563.75 758.75C532.5 758.75 496.2499999999999 727.5 501.25 696.25C516.875 597.5 522.5 522.5 445.625 437.5C381.875 366.875 335 320 250 320V-55L354.375 -117.5H750C795.625 -117.5 871.875 -98.125 875 -55L876.25 -53.75L938.75 321.25C936.875 361.25 914.9999999999998 383.75 876.25 383.75H875.625z" />
<glyph glyph-name="tools"
unicode="&#xF031;"
horiz-adv-x="1000" d=" M280 365.625C296.25 349.3750000000001 360.0000000000001 282.5 360.0000000000001 282.5L395 318.75L340 375.6250000000001L445.6250000000001 488.125S398.1250000000001 534.375 418.7500000000001 516.25C438.7500000000001 590.625 420.6250000000001 673.125 364.3750000000001 731.25C308.125 788.75 228.75 807.5 157.5 788.125L278.125 663.125L246.2500000000001 540.625L128.1250000000001 508.125L7.5 633.125C-11.875 559.375 6.25 477.5 62.5 420C121.25 358.75 205.625 341.25 280 365.625zM682.5000000000001 244.3750000000001L536.8750000000001 100.6250000000001L776.8750000000001 -148.1249999999999C796.2500000000001 -168.7499999999999 822.5000000000001 -178.7499999999999 848.1250000000001 -178.7499999999999C873.7500000000001 -178.7499999999999 899.3750000000001 -168.7499999999999 919.3750000000002 -148.1249999999999C958.7500000000002 -107.4999999999999 958.7500000000002 -41.875 919.3750000000002 -1.2499999999999L682.5000000000001 244.3750000000001zM1000 661.875L846.875 820L395.625 353.75L450.625 296.875L181.25 18.1250000000001L119.375 -14.9999999999999L32.5 -156.8749999999998L54.375 -179.9999999999998L191.8750000000001 -89.9999999999998L223.7500000000001 -26.2499999999999L493.75 252.5L548.7500000000001 195.625L1000 661.875z" />
horiz-adv-x="1000" d=" M307.5 359.920625C321.71875 345.701875 377.5 287.18625 377.5 287.18625L408.125 318.9050000000001L360 368.6706250000001L452.421875 467.108125C452.421875 467.108125 410.859375 507.576875 428.90625 491.7175C446.40625 556.795625 430.546875 628.983125 381.328125 679.8425C332.109375 730.155 262.65625 746.56125 200.3125 729.608125L305.859375 620.233125L277.96875 513.045625L174.609375 484.608125L69.0625 593.983125C52.1095625 529.451875 67.96875 457.81125 117.1875 407.4987500000001C168.59375 353.9050000000001 242.421875 338.5925000000001 307.5 359.920625V359.920625zM659.6875 253.826875L532.265625 128.0437499999999L742.2687500000001 -89.6125000000001C759.21875 -107.65625 782.1875 -116.40625 804.6125 -116.40625C827.03125 -116.40625 849.4562500000001 -107.65625 866.95625 -89.6125000000001C901.40625 -54.0625 901.40625 3.35625 866.95625 38.90625L659.6875 253.826875V253.826875zM937.5 619.140625L803.51875 757.5L408.671875 349.53125L456.796875 299.765625L221.09375 55.8625L166.953125 26.875L90.9375 -97.2687499999999L110.078125 -117.5L230.390625 -38.75L258.28125 17.03125L494.53125 260.9375L542.65625 211.171875L937.5 619.140625V619.140625z" />
<glyph glyph-name="trashcan"
unicode="&#xF0D0;"
horiz-adv-x="750" d=" M687.5 695H562.5C562.5 729.375 534.375 757.5 500 757.5H312.5C278.125 757.5 250 729.375 250 695H125C90.625 695 62.5 666.875 62.5 632.5V570C62.5 535.625 90.625 507.5 125 507.5V-55C125 -89.375 153.125 -117.5 187.5 -117.5H625C659.375 -117.5 687.5 -89.375 687.5 -55V507.5C721.875 507.5 750 535.625 750 570V632.5C750 666.875 721.875 695 687.5 695zM625 -55H187.5V507.5H250V7.5H312.5V507.5H375V7.5H437.5V507.5H500V7.5H562.5V507.5H625V-55zM687.5 570H125V632.5H687.5V570z" />
@@ -556,6 +565,9 @@
<glyph glyph-name="versions"
unicode="&#xF064;"
horiz-adv-x="875" d=" M812.5 632.5H437.5C403.125 632.5 375 604.375 375 570V70C375 35.625 403.125 7.5 437.5 7.5H812.5C846.875 7.5 875 35.625 875 70V570C875 604.375 846.875 632.5 812.5 632.5zM750 132.5H500V507.5H750V132.5zM250 570H312.5V507.5H250V132.5H312.5V70H250C215.625 70 187.5 98.125 187.5 132.5V507.5C187.5 541.875 215.625 570 250 570zM62.5 507.5H125V445H62.5V195H125V132.5H62.5C28.125 132.5 0 160.625 0 195V445C0 479.375 28.125 507.5 62.5 507.5z" />
<glyph glyph-name="warning"
unicode="&#xF10D;"
horiz-adv-x="1000" d=" M543.75 757.5H456.25L62.5 -30L150 -117.5H850L937.5 -30L543.75 757.5zM543.75 -30H456.25V57.5H543.75V-30zM543.75 145H456.25V495H543.75V145z" />
<glyph glyph-name="watch"
unicode="&#xF0E0;"
horiz-adv-x="750" d=" M375 320H500V257.5H312.5V507.5H375V320zM750 320C750 181.25 675 60 562.5 -4.3750000000001V-117.5C562.5 -151.875 534.375 -180 500 -180H250C215.625 -180 187.5 -151.875 187.5 -117.5V-4.375C75 60 0 181.25 0 320S75 580 187.5 644.375V757.5C187.5 791.875 215.625 820 250 820H500C534.375 820 562.5 791.875 562.5 757.5V644.375C675 580 750 458.75 750 320zM687.5 320C687.5 493.125 548.125 632.5 375 632.5S62.5 493.125 62.5 320S201.875 7.5 375 7.5S687.5 146.875 687.5 320z" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 127 KiB

After

Width:  |  Height:  |  Size: 130 KiB

BIN
src/vs/base/browser/ui/octiconLabel/octicons/octicons.ttf
View File

Binary file not shown.

30
src/vs/base/browser/ui/sash/sash.ts
View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./sash';
import { IDisposable, dispose, Disposable } from 'vs/base/common/lifecycle';
import { IDisposable, dispose, Disposable, DisposableStore } from 'vs/base/common/lifecycle';
import { isIPad } from 'vs/base/browser/browser';
import { isMacintosh } from 'vs/base/common/platform';
import * as types from 'vs/base/common/types';
@@ -95,14 +95,14 @@ export class Sash extends Disposable {
linkedSash: Sash | undefined = undefined;
private orthogonalStartSashDisposables: IDisposable[] = [];
private readonly orthogonalStartSashDisposables = this._register(new DisposableStore());
private _orthogonalStartSash: Sash | undefined;
get orthogonalStartSash(): Sash | undefined { return this._orthogonalStartSash; }
set orthogonalStartSash(sash: Sash | undefined) {
this.orthogonalStartSashDisposables = dispose(this.orthogonalStartSashDisposables);
this.orthogonalStartSashDisposables.clear();
if (sash) {
sash.onDidEnablementChange(this.onOrthogonalStartSashEnablementChange, this, this.orthogonalStartSashDisposables);
this.orthogonalStartSashDisposables.add(sash.onDidEnablementChange(this.onOrthogonalStartSashEnablementChange, this));
this.onOrthogonalStartSashEnablementChange(sash.state);
} else {
this.onOrthogonalStartSashEnablementChange(SashState.Disabled);
@@ -111,14 +111,14 @@ export class Sash extends Disposable {
this._orthogonalStartSash = sash;
}
private orthogonalEndSashDisposables: IDisposable[] = [];
private readonly orthogonalEndSashDisposables = this._register(new DisposableStore());
private _orthogonalEndSash: Sash | undefined;
get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; }
set orthogonalEndSash(sash: Sash | undefined) {
this.orthogonalEndSashDisposables = dispose(this.orthogonalEndSashDisposables);
this.orthogonalEndSashDisposables.clear();
if (sash) {
sash.onDidEnablementChange(this.onOrthogonalEndSashEnablementChange, this, this.orthogonalEndSashDisposables);
this.orthogonalEndSashDisposables.add(sash.onDidEnablementChange(this.onOrthogonalEndSashEnablementChange, this));
this.onOrthogonalEndSashEnablementChange(sash.state);
} else {
this.onOrthogonalEndSashEnablementChange(SashState.Disabled);
@@ -212,7 +212,13 @@ export class Sash extends Disposable {
return;
}
const iframes = getElementsByTagName('iframe');
// Select both iframes and webviews; internally Electron nests an iframe
// in its <webview> component, but this isn't queryable.
const iframes = [
...getElementsByTagName('iframe'),
...getElementsByTagName('webview'),
];
for (const iframe of iframes) {
iframe.style.pointerEvents = 'none'; // disable mouse events on iframes as long as we drag the sash
}
@@ -254,7 +260,7 @@ export class Sash extends Disposable {
style.innerHTML = `* { cursor: ${cursor} !important; }`;
};
const disposables: IDisposable[] = [];
const disposables = new DisposableStore();
updateStyle();
@@ -278,9 +284,8 @@ export class Sash extends Disposable {
removeClass(this.el, 'active');
this._onDidEnd.fire();
dispose(disposables);
disposables.dispose();
const iframes = getElementsByTagName('iframe');
for (const iframe of iframes) {
iframe.style.pointerEvents = 'auto';
}
@@ -384,9 +389,6 @@ export class Sash extends Disposable {
dispose(): void {
super.dispose();
this.orthogonalStartSashDisposables = dispose(this.orthogonalStartSashDisposables);
this.orthogonalEndSashDisposables = dispose(this.orthogonalEndSashDisposables);
if (this.el && this.el.parentElement) {
this.el.parentElement.removeChild(this.el);
}

6
src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts
View File

@@ -108,6 +108,12 @@ export abstract class AbstractScrollbar extends Widget {
this._sliderMouseDown(e, () => { /*nothing to do*/ });
}
});
this.onclick(this.slider.domNode, e => {
if (e.leftButton) {
e.stopPropagation();
}
});
}
// ----------------- Update state

5
src/vs/base/browser/ui/selectBox/selectBox.ts
View File

@@ -14,11 +14,12 @@ import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
import { SelectBoxNative } from 'vs/base/browser/ui/selectBox/selectBoxNative';
import { SelectBoxList } from 'vs/base/browser/ui/selectBox/selectBoxCustom';
import { isMacintosh } from 'vs/base/common/platform';
import { IDisposable } from 'vs/base/common/lifecycle';
// Public SelectBox interface - Calls routed to appropriate select implementation class
export interface ISelectBoxDelegate {
export interface ISelectBoxDelegate extends IDisposable {
// Public SelectBox Interface
readonly onDidSelect: Event<ISelectData>;
@@ -27,7 +28,6 @@ export interface ISelectBoxDelegate {
setAriaLabel(label: string): void;
focus(): void;
blur(): void;
dispose(): void;
// Delegated Widget interface
render(container: HTMLElement): void;
@@ -147,5 +147,4 @@ export class SelectBox extends Widget implements ISelectBoxDelegate {
return option;
}
}

65
src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
View File

@@ -5,7 +5,7 @@
import 'vs/css!./selectBoxCustom';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { IDisposable, dispose, Disposable } from 'vs/base/common/lifecycle';
import { Event, Emitter } from 'vs/base/common/event';
import { KeyCode, KeyCodeUtils } from 'vs/base/common/keyCodes';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -85,7 +85,7 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
}
}
export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<ISelectOptionItem> {
export class SelectBoxList extends Disposable implements ISelectBoxDelegate, IListVirtualDelegate<ISelectOptionItem> {
private static readonly DEFAULT_DROPDOWN_MINIMUM_BOTTOM_MARGIN = 32;
private static readonly DEFAULT_DROPDOWN_MINIMUM_TOP_MARGIN = 2;
@@ -98,7 +98,6 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
private options: ISelectOptionItem[];
private selected: number;
private readonly _onDidSelect: Emitter<ISelectData>;
private toDispose: IDisposable[];
private styles: ISelectBoxStyles;
private listRenderer: SelectListRenderer;
private contextViewProvider: IContextViewProvider;
@@ -117,7 +116,7 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
constructor(options: ISelectOptionItem[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles, selectBoxOptions?: ISelectBoxOptions) {
this.toDispose = [];
super();
this._isVisible = false;
this.selectBoxOptions = selectBoxOptions || Object.create(null);
@@ -137,7 +136,7 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
}
this._onDidSelect = new Emitter<ISelectData>();
this.toDispose.push(this._onDidSelect);
this._register(this._onDidSelect);
this.styles = styles;
@@ -191,18 +190,21 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
// Parent native select keyboard listeners
this.toDispose.push(dom.addStandardDisposableListener(this.selectElement, 'change', (e) => {
this._register(dom.addStandardDisposableListener(this.selectElement, 'change', (e) => {
this.selected = e.target.selectedIndex;
this._onDidSelect.fire({
index: e.target.selectedIndex,
selected: e.target.value
});
if (!!this.options[this.selected] && !!this.options[this.selected].text) {
this.selectElement.title = this.options[this.selected].text;
}
}));
// Have to implement both keyboard and mouse controllers to handle disabled options
// Intercept mouse events to override normal select actions on parents
this.toDispose.push(dom.addDisposableListener(this.selectElement, dom.EventType.CLICK, (e) => {
this._register(dom.addDisposableListener(this.selectElement, dom.EventType.CLICK, (e) => {
dom.EventHelper.stop(e);
if (this._isVisible) {
@@ -212,13 +214,13 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
}
}));
this.toDispose.push(dom.addDisposableListener(this.selectElement, dom.EventType.MOUSE_DOWN, (e) => {
this._register(dom.addDisposableListener(this.selectElement, dom.EventType.MOUSE_DOWN, (e) => {
dom.EventHelper.stop(e);
}));
// Intercept keyboard handling
this.toDispose.push(dom.addDisposableListener(this.selectElement, dom.EventType.KEY_DOWN, (e: KeyboardEvent) => {
this._register(dom.addDisposableListener(this.selectElement, dom.EventType.KEY_DOWN, (e: KeyboardEvent) => {
const event = new StandardKeyboardEvent(e);
let showDropDown = false;
@@ -288,6 +290,9 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
}
this.selectElement.selectedIndex = this.selected;
if (!!this.options[this.selected] && !!this.options[this.selected].text) {
this.selectElement.title = this.options[this.selected].text;
}
}
public setAriaLabel(label: string): void {
@@ -410,7 +415,7 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
let listBackground = this.styles.selectListBackground ? this.styles.selectListBackground.toString() : background;
this.selectDropDownListContainer.style.backgroundColor = listBackground;
this.selectionDetailsPane.style.backgroundColor = listBackground;
const optionsBorder = this.styles.focusBorder ? this.styles.focusBorder.toString() : null;
const optionsBorder = this.styles.focusBorder ? this.styles.focusBorder.toString() : '';
this.selectDropDownContainer.style.outlineColor = optionsBorder;
this.selectDropDownContainer.style.outlineOffset = '-1px';
}
@@ -744,27 +749,26 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
.filter(() => this.selectList.length > 0)
.map(e => new StandardKeyboardEvent(e));
onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.Enter).on(e => this.onEnter(e), this, this.toDispose);
onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.Escape).on(e => this.onEscape(e), this, this.toDispose);
onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.UpArrow).on(this.onUpArrow, this, this.toDispose);
onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.DownArrow).on(this.onDownArrow, this, this.toDispose);
onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.PageDown).on(this.onPageDown, this, this.toDispose);
onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.PageUp).on(this.onPageUp, this, this.toDispose);
onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.Home).on(this.onHome, this, this.toDispose);
onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.End).on(this.onEnd, this, this.toDispose);
onSelectDropDownKeyDown.filter(e => (e.keyCode >= KeyCode.KEY_0 && e.keyCode <= KeyCode.KEY_Z) || (e.keyCode >= KeyCode.US_SEMICOLON && e.keyCode <= KeyCode.NUMPAD_DIVIDE)).on(this.onCharacter, this, this.toDispose);
this._register(onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.Enter).on(e => this.onEnter(e), this));
this._register(onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.Escape).on(e => this.onEscape(e), this));
this._register(onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.UpArrow).on(this.onUpArrow, this));
this._register(onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.DownArrow).on(this.onDownArrow, this));
this._register(onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.PageDown).on(this.onPageDown, this));
this._register(onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.PageUp).on(this.onPageUp, this));
this._register(onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.Home).on(this.onHome, this));
this._register(onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.End).on(this.onEnd, this));
this._register(onSelectDropDownKeyDown.filter(e => (e.keyCode >= KeyCode.KEY_0 && e.keyCode <= KeyCode.KEY_Z) || (e.keyCode >= KeyCode.US_SEMICOLON && e.keyCode <= KeyCode.NUMPAD_DIVIDE)).on(this.onCharacter, this));
// SetUp list mouse controller - control navigation, disabled items, focus
Event.chain(domEvent(this.selectList.getHTMLElement(), 'mouseup'))
this._register(Event.chain(domEvent(this.selectList.getHTMLElement(), 'mouseup'))
.filter(() => this.selectList.length > 0)
.on(e => this.onMouseUp(e), this, this.toDispose);
.on(e => this.onMouseUp(e), this));
this.toDispose.push(
this.selectList.onDidBlur(_ => this.onListBlur()),
this.selectList.onMouseOver(e => typeof e.index !== 'undefined' && this.selectList.setFocus([e.index])),
this.selectList.onFocusChange(e => this.onListFocus(e))
);
this._register(this.selectList.onDidBlur(_ => this.onListBlur()));
this._register(this.selectList.onMouseOver(e => typeof e.index !== 'undefined' && this.selectList.setFocus([e.index])));
this._register(this.selectList.onFocusChange(e => this.onListFocus(e)));
this.selectList.getHTMLElement().setAttribute('aria-label', this.selectBoxOptions.ariaLabel || '');
this.selectList.getHTMLElement().setAttribute('aria-expanded', 'true');
@@ -816,7 +820,11 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
this._onDidSelect.fire({
index: this.selectElement.selectedIndex,
selected: this.options[this.selected].text
});
if (!!this.options[this.selected] && !!this.options[this.selected].text) {
this.selectElement.title = this.options[this.selected].text;
}
}
}
}
@@ -907,6 +915,9 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
index: this.selectElement.selectedIndex,
selected: this.options[this.selected].text
});
if (!!this.options[this.selected] && !!this.options[this.selected].text) {
this.selectElement.title = this.options[this.selected].text;
}
}
this.hideSelectDropDown(true);
@@ -1037,6 +1048,6 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
public dispose(): void {
this.hideSelectDropDown(false);
this.toDispose = dispose(this.toDispose);
super.dispose();
}
}

18
src/vs/base/browser/ui/selectBox/selectBoxNative.ts
View File

@@ -3,7 +3,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { Disposable } from 'vs/base/common/lifecycle';
import { Event, Emitter } from 'vs/base/common/event';
import { KeyCode } from 'vs/base/common/keyCodes';
import * as dom from 'vs/base/browser/dom';
@@ -11,7 +11,7 @@ import * as arrays from 'vs/base/common/arrays';
import { ISelectBoxDelegate, ISelectOptionItem, ISelectBoxOptions, ISelectBoxStyles, ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
import { isMacintosh } from 'vs/base/common/platform';
export class SelectBoxNative implements ISelectBoxDelegate {
export class SelectBoxNative extends Disposable implements ISelectBoxDelegate {
// {{SQL CARBON EDIT}}
public selectElement: HTMLSelectElement;
@@ -19,11 +19,10 @@ export class SelectBoxNative implements ISelectBoxDelegate {
private options: ISelectOptionItem[];
private selected: number;
private readonly _onDidSelect: Emitter<ISelectData>;
private toDispose: IDisposable[];
private styles: ISelectBoxStyles;
constructor(options: ISelectOptionItem[], selected: number, styles: ISelectBoxStyles, selectBoxOptions?: ISelectBoxOptions) {
this.toDispose = [];
super();
this.selectBoxOptions = selectBoxOptions || Object.create(null);
this.options = [];
@@ -36,8 +35,7 @@ export class SelectBoxNative implements ISelectBoxDelegate {
this.selectElement.setAttribute('aria-label', this.selectBoxOptions.ariaLabel);
}
this._onDidSelect = new Emitter<ISelectData>();
this.toDispose.push(this._onDidSelect);
this._onDidSelect = this._register(new Emitter<ISelectData>());
this.styles = styles;
@@ -47,7 +45,7 @@ export class SelectBoxNative implements ISelectBoxDelegate {
private registerListeners() {
this.toDispose.push(dom.addStandardDisposableListener(this.selectElement, 'change', (e) => {
this._register(dom.addStandardDisposableListener(this.selectElement, 'change', (e) => {
this.selectElement.title = e.target.value;
this._onDidSelect.fire({
index: e.target.selectedIndex,
@@ -55,7 +53,7 @@ export class SelectBoxNative implements ISelectBoxDelegate {
});
}));
this.toDispose.push(dom.addStandardDisposableListener(this.selectElement, 'keydown', (e) => {
this._register(dom.addStandardDisposableListener(this.selectElement, 'keydown', (e) => {
let showSelect = false;
if (isMacintosh) {
@@ -169,8 +167,4 @@ export class SelectBoxNative implements ISelectBoxDelegate {
return option;
}
public dispose(): void {
this.toDispose = dispose(this.toDispose);
}
}

1
src/vs/base/browser/ui/splitview/arrow-collapse-dark.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#e8e8e8" d="M6 4v8l4-4-4-4zm1 2.414l1.586 1.586-1.586 1.586v-3.172z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 151 B

1
src/vs/base/browser/ui/splitview/arrow-collapse.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#646465" d="M6 4v8l4-4-4-4zm1 2.414l1.586 1.586-1.586 1.586v-3.172z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 151 B

1
src/vs/base/browser/ui/splitview/arrow-expand-dark.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#e8e8e8" d="M11 10.07h-5.656l5.656-5.656v5.656z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 131 B

1
src/vs/base/browser/ui/splitview/arrow-expand.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#646465" d="M11 10.07h-5.656l5.656-5.656v5.656z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 131 B

16
src/vs/base/browser/ui/splitview/panelview.css
View File

@@ -27,23 +27,31 @@
}
.monaco-panel-view .panel > .panel-header {
background-image: url('arrow-collapse.svg');
background-image: url('tree-collapsed-light.svg');
background-position: 2px center;
background-repeat: no-repeat;
}
.monaco-panel-view .panel > .panel-header.expanded {
background-image: url('arrow-expand.svg');
background-image: url('tree-expanded-light.svg');
background-position: 2px center;
background-repeat: no-repeat;
}
.vs-dark .monaco-panel-view .panel > .panel-header {
background-image: url('arrow-collapse-dark.svg');
background-image: url('tree-collapsed-dark.svg');
}
.vs-dark .monaco-panel-view .panel > .panel-header.expanded {
background-image: url('arrow-expand-dark.svg');
background-image: url('tree-expanded-dark.svg');
}
.hc-black .monaco-panel-view .panel > .panel-header {
background-image: url('tree-collapsed-hc.svg');
}
.hc-black .monaco-panel-view .panel > .panel-header.expanded {
background-image: url('tree-expanded-hc.svg');
}
/* TODO: actions should be part of the panel, but they aren't yet */

51
src/vs/base/browser/ui/splitview/panelview.ts
View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./panelview';
import { IDisposable, dispose, combinedDisposable, Disposable } from 'vs/base/common/lifecycle';
import { IDisposable, Disposable, DisposableStore } from 'vs/base/common/lifecycle';
import { Event, Emitter } from 'vs/base/common/event';
import { domEvent } from 'vs/base/browser/event';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -37,7 +37,7 @@ export interface IPanelStyles {
* Subclasses wouldn't be able to set own properties
* before the `render()` call, thus forbiding their use.
*/
export abstract class Panel implements IView {
export abstract class Panel extends Disposable implements IView {
private static readonly HEADER_SIZE = 22;
@@ -55,11 +55,9 @@ export abstract class Panel implements IView {
private styles: IPanelStyles = {};
private animationTimer: number | undefined = undefined;
private _onDidChange = new Emitter<number | undefined>();
private readonly _onDidChange = this._register(new Emitter<number | undefined>());
readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
protected disposables: IDisposable[] = [];
get draggableElement(): HTMLElement {
return this.header;
}
@@ -114,6 +112,7 @@ export abstract class Panel implements IView {
width: number;
constructor(options: IPanelOptions = {}) {
super();
this._expanded = typeof options.expanded === 'undefined' ? true : !!options.expanded;
this.ariaHeaderLabel = options.ariaHeaderLabel || '';
this._minimumBodySize = typeof options.minimumBodySize === 'number' ? options.minimumBodySize : 120;
@@ -172,26 +171,26 @@ export abstract class Panel implements IView {
this.renderHeader(this.header);
const focusTracker = trackFocus(this.header);
this.disposables.push(focusTracker);
focusTracker.onDidFocus(() => addClass(this.header, 'focused'), null, this.disposables);
focusTracker.onDidBlur(() => removeClass(this.header, 'focused'), null, this.disposables);
this._register(focusTracker);
this._register(focusTracker.onDidFocus(() => addClass(this.header, 'focused'), null));
this._register(focusTracker.onDidBlur(() => removeClass(this.header, 'focused'), null));
this.updateHeader();
const onHeaderKeyDown = Event.chain(domEvent(this.header, 'keydown'))
.map(e => new StandardKeyboardEvent(e));
onHeaderKeyDown.filter(e => e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space)
.event(() => this.setExpanded(!this.isExpanded()), null, this.disposables);
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space)
.event(() => this.setExpanded(!this.isExpanded()), null));
onHeaderKeyDown.filter(e => e.keyCode === KeyCode.LeftArrow)
.event(() => this.setExpanded(false), null, this.disposables);
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.LeftArrow)
.event(() => this.setExpanded(false), null));
onHeaderKeyDown.filter(e => e.keyCode === KeyCode.RightArrow)
.event(() => this.setExpanded(true), null, this.disposables);
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.RightArrow)
.event(() => this.setExpanded(true), null));
domEvent(this.header, 'click')
(() => this.setExpanded(!this.isExpanded()), null, this.disposables);
this._register(domEvent(this.header, 'click')
(() => this.setExpanded(!this.isExpanded()), null));
this.body = append(this.element, $('.panel-body'));
this.renderBody(this.body);
@@ -234,12 +233,6 @@ export abstract class Panel implements IView {
protected abstract renderHeader(container: HTMLElement): void;
protected abstract renderBody(container: HTMLElement): void;
protected abstract layoutBody(height: number, width: number): void;
dispose(): void {
this.disposables = dispose(this.disposables);
this._onDidChange.dispose();
}
}
interface IDndContext {
@@ -397,24 +390,24 @@ export class PanelView extends Disposable {
}
addPanel(panel: Panel, size: number, index = this.splitview.length): void {
const disposables: IDisposable[] = [];
const disposables = new DisposableStore();
// https://github.com/Microsoft/vscode/issues/59950
let shouldAnimate = false;
disposables.push(scheduleAtNextAnimationFrame(() => shouldAnimate = true));
disposables.add(scheduleAtNextAnimationFrame(() => shouldAnimate = true));
Event.filter(panel.onDidChange, () => shouldAnimate)
(this.setupAnimation, this, disposables);
disposables.add(Event.filter(panel.onDidChange, () => shouldAnimate)
(this.setupAnimation, this));
const panelItem = { panel, disposable: combinedDisposable(disposables) };
const panelItem = { panel, disposable: disposables };
this.panelItems.splice(index, 0, panelItem);
panel.width = this.width;
this.splitview.addView(panel, size, index);
if (this.dnd) {
const draggable = new PanelDraggable(panel, this.dnd, this.dndContext);
disposables.push(draggable);
draggable.onDidDrop(this._onDidDrop.fire, this._onDidDrop, disposables);
disposables.add(draggable);
disposables.add(draggable.onDidDrop(this._onDidDrop.fire, this._onDidDrop));
}
}

4
src/vs/base/browser/ui/splitview/splitview.css
View File

@@ -41,6 +41,10 @@
position: relative;
}
.monaco-split-view2 > .split-view-container > .split-view-view:not(.visible) {
display: none;
}
.monaco-split-view2.vertical > .split-view-container > .split-view-view {
width: 100%;
}

329
src/vs/base/browser/ui/splitview/splitview.ts
View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./splitview';
import { IDisposable, combinedDisposable, toDisposable, Disposable } from 'vs/base/common/lifecycle';
import { IDisposable, toDisposable, Disposable, combinedDisposable } from 'vs/base/common/lifecycle';
import { Event, Emitter } from 'vs/base/common/event';
import * as types from 'vs/base/common/types';
import * as dom from 'vs/base/browser/dom';
@@ -47,7 +47,9 @@ export interface IView {
readonly maximumSize: number;
readonly onDidChange: Event<number | undefined>;
readonly priority?: LayoutPriority;
readonly snap?: boolean;
layout(size: number, orientation: Orientation): void;
setVisible?(visible: boolean): void;
}
interface ISashEvent {
@@ -57,12 +59,81 @@ interface ISashEvent {
alt: boolean;
}
interface IViewItem {
view: IView;
size: number;
container: HTMLElement;
disposable: IDisposable;
layout(): void;
abstract class ViewItem {
set size(size: number) {
this._size = size;
}
get size(): number {
return this._size;
}
private cachedSize: number | undefined = undefined;
get visible(): boolean {
return typeof this.cachedSize === 'undefined';
}
set visible(visible: boolean) {
if (visible === this.visible) {
return;
}
if (visible) {
this.size = this.cachedSize!;
this.cachedSize = undefined;
} else {
this.cachedSize = this.size;
this.size = 0;
}
dom.toggleClass(this.container, 'visible', visible);
if (this.view.setVisible) {
this.view.setVisible(visible);
}
}
get minimumSize(): number { return this.visible ? this.view.minimumSize : 0; }
get viewMinimumSize(): number { return this.view.minimumSize; }
get maximumSize(): number { return this.visible ? this.view.maximumSize : 0; }
get viewMaximumSize(): number { return this.view.maximumSize; }
get priority(): LayoutPriority | undefined { return this.view.priority; }
get snap(): boolean { return !!this.view.snap; }
constructor(protected container: HTMLElement, private view: IView, private _size: number, private disposable: IDisposable) {
dom.addClass(container, 'visible');
}
abstract layout(): void;
layoutView(orientation: Orientation): void {
this.view.layout(this.size, orientation);
}
dispose(): IView {
this.disposable.dispose();
return this.view;
}
}
class VerticalViewItem extends ViewItem {
layout(): void {
this.container.style.height = `${this.size}px`;
this.layoutView(Orientation.VERTICAL);
}
}
class HorizontalViewItem extends ViewItem {
layout(): void {
this.container.style.width = `${this.size}px`;
this.layoutView(Orientation.HORIZONTAL);
}
}
interface ISashItem {
@@ -70,6 +141,11 @@ interface ISashItem {
disposable: IDisposable;
}
interface ISashDragSnapState {
readonly index: number;
readonly limitDelta: number;
}
interface ISashDragState {
index: number;
start: number;
@@ -78,6 +154,8 @@ interface ISashDragState {
minDelta: number;
maxDelta: number;
alt: boolean;
snapBefore: ISashDragSnapState | undefined;
snapAfter: ISashDragSnapState | undefined;
disposable: IDisposable;
}
@@ -104,7 +182,7 @@ export class SplitView extends Disposable {
private size = 0;
private contentSize = 0;
private proportions: undefined | number[] = undefined;
private viewItems: IViewItem[] = [];
private viewItems: ViewItem[] = [];
private sashItems: ISashItem[] = [];
private sashDragState: ISashDragState;
private state: State = State.Idle;
@@ -122,11 +200,11 @@ export class SplitView extends Disposable {
}
get minimumSize(): number {
return this.viewItems.reduce((r, item) => r + item.view.minimumSize, 0);
return this.viewItems.reduce((r, item) => r + item.minimumSize, 0);
}
get maximumSize(): number {
return this.length === 0 ? Number.POSITIVE_INFINITY : this.viewItems.reduce((r, item) => r + item.view.maximumSize, 0);
return this.length === 0 ? Number.POSITIVE_INFINITY : this.viewItems.reduce((r, item) => r + item.maximumSize, 0);
}
private _orthogonalStartSash: Sash | undefined;
@@ -199,16 +277,7 @@ export class SplitView extends Disposable {
const onChangeDisposable = view.onDidChange(size => this.onViewChange(item, size));
const containerDisposable = toDisposable(() => this.viewContainer.removeChild(container));
const disposable = combinedDisposable([onChangeDisposable, containerDisposable]);
const layoutContainer = this.orientation === Orientation.VERTICAL
? () => item.container.style.height = `${item.size}px`
: () => item.container.style.width = `${item.size}px`;
const layout = () => {
layoutContainer();
item.view.layout(item.size, this.orientation);
};
const disposable = combinedDisposable(onChangeDisposable, containerDisposable);
let viewSize: number;
@@ -220,7 +289,10 @@ export class SplitView extends Disposable {
viewSize = view.minimumSize;
}
const item: IViewItem = { view, container, size: viewSize, layout, disposable };
const item = this.orientation === Orientation.VERTICAL
? new VerticalViewItem(container, view, viewSize, disposable)
: new HorizontalViewItem(container, view, viewSize, disposable);
this.viewItems.splice(index, 0, item);
// Add sash
@@ -245,7 +317,7 @@ export class SplitView extends Disposable {
const onEndDisposable = onEnd(this.onSashEnd, this);
const onDidResetDisposable = sash.onDidReset(() => this._onDidSashReset.fire(firstIndex(this.sashItems, item => item.sash === sash)));
const disposable = combinedDisposable([onStartDisposable, onChangeDisposable, onEndDisposable, onDidResetDisposable, sash]);
const disposable = combinedDisposable(onStartDisposable, onChangeDisposable, onEndDisposable, onDidResetDisposable, sash);
const sashItem: ISashItem = { sash, disposable };
this.sashItems.splice(index - 1, 0, sashItem);
@@ -280,7 +352,7 @@ export class SplitView extends Disposable {
// Remove view
const viewItem = this.viewItems.splice(index, 1)[0];
viewItem.disposable.dispose();
const view = viewItem.dispose();
// Remove sash
if (this.viewItems.length >= 1) {
@@ -296,7 +368,7 @@ export class SplitView extends Disposable {
this.distributeViewSizes();
}
return viewItem.view;
return view;
}
moveView(from: number, to: number): void {
@@ -327,6 +399,27 @@ export class SplitView extends Disposable {
this.addView(fromView, toSize, to);
}
isViewVisible(index: number): boolean {
if (index < 0 || index >= this.viewItems.length) {
throw new Error('Index out of bounds');
}
const viewItem = this.viewItems[index];
return viewItem.visible;
}
setViewVisible(index: number, visible: boolean): void {
if (index < 0 || index >= this.viewItems.length) {
throw new Error('Index out of bounds');
}
const viewItem = this.viewItems[index];
viewItem.visible = visible;
this.distributeEmptySpace(index);
this.layoutViews();
}
private relayout(lowPriorityIndex?: number, highPriorityIndex?: number): void {
const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
const lowPriorityIndexes = typeof lowPriorityIndex === 'number' ? [lowPriorityIndex] : undefined;
@@ -344,14 +437,14 @@ export class SplitView extends Disposable {
if (!this.proportions) {
const indexes = range(this.viewItems.length);
const lowPriorityIndexes = indexes.filter(i => this.viewItems[i].view.priority === LayoutPriority.Low);
const highPriorityIndexes = indexes.filter(i => this.viewItems[i].view.priority === LayoutPriority.High);
const lowPriorityIndexes = indexes.filter(i => this.viewItems[i].priority === LayoutPriority.Low);
const highPriorityIndexes = indexes.filter(i => this.viewItems[i].priority === LayoutPriority.High);
this.resize(this.viewItems.length - 1, size - previousSize, undefined, lowPriorityIndexes, highPriorityIndexes);
} else {
for (let i = 0; i < this.viewItems.length; i++) {
const item = this.viewItems[i];
item.size = clamp(Math.round(this.proportions[i] * size), item.view.minimumSize, item.view.maximumSize);
item.size = clamp(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize);
}
}
@@ -369,10 +462,10 @@ export class SplitView extends Disposable {
const index = firstIndex(this.sashItems, item => item.sash === sash);
// This way, we can press Alt while we resize a sash, macOS style!
const disposable = combinedDisposable([
const disposable = combinedDisposable(
domEvent(document.body, 'keydown')(e => resetSashDragState(this.sashDragState.current, e.altKey)),
domEvent(document.body, 'keyup')(() => resetSashDragState(this.sashDragState.current, false))
]);
);
const resetSashDragState = (start: number, alt: boolean) => {
const sizes = this.viewItems.map(i => i.size);
@@ -391,35 +484,71 @@ export class SplitView extends Disposable {
if (isLastSash) {
const viewItem = this.viewItems[index];
minDelta = (viewItem.view.minimumSize - viewItem.size) / 2;
maxDelta = (viewItem.view.maximumSize - viewItem.size) / 2;
minDelta = (viewItem.minimumSize - viewItem.size) / 2;
maxDelta = (viewItem.maximumSize - viewItem.size) / 2;
} else {
const viewItem = this.viewItems[index + 1];
minDelta = (viewItem.size - viewItem.view.maximumSize) / 2;
maxDelta = (viewItem.size - viewItem.view.minimumSize) / 2;
minDelta = (viewItem.size - viewItem.maximumSize) / 2;
maxDelta = (viewItem.size - viewItem.minimumSize) / 2;
}
}
this.sashDragState = { start, current: start, index, sizes, minDelta, maxDelta, alt, disposable };
let snapBefore: ISashDragSnapState | undefined;
let snapAfter: ISashDragSnapState | undefined;
if (!alt) {
const upIndexes = range(index, -1);
const downIndexes = range(index + 1, this.viewItems.length);
const minDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].minimumSize - sizes[i]), 0);
const maxDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].viewMaximumSize - sizes[i]), 0);
const maxDeltaDown = downIndexes.length === 0 ? Number.POSITIVE_INFINITY : downIndexes.reduce((r, i) => r + (sizes[i] - this.viewItems[i].minimumSize), 0);
const minDeltaDown = downIndexes.length === 0 ? Number.NEGATIVE_INFINITY : downIndexes.reduce((r, i) => r + (sizes[i] - this.viewItems[i].viewMaximumSize), 0);
const minDelta = Math.max(minDeltaUp, minDeltaDown);
const maxDelta = Math.min(maxDeltaDown, maxDeltaUp);
const snapBeforeIndex = this.findFirstSnapIndex(upIndexes);
const snapAfterIndex = this.findFirstSnapIndex(downIndexes);
if (typeof snapBeforeIndex === 'number') {
const viewItem = this.viewItems[snapBeforeIndex];
const halfSize = Math.floor(viewItem.viewMinimumSize / 2);
snapBefore = {
index: snapBeforeIndex,
limitDelta: viewItem.visible ? minDelta - halfSize : minDelta + halfSize
};
}
if (typeof snapAfterIndex === 'number') {
const viewItem = this.viewItems[snapAfterIndex];
const halfSize = Math.floor(viewItem.viewMinimumSize / 2);
snapAfter = {
index: snapAfterIndex,
limitDelta: viewItem.visible ? maxDelta + halfSize : maxDelta - halfSize
};
}
}
this.sashDragState = { start, current: start, index, sizes, minDelta, maxDelta, alt, snapBefore, snapAfter, disposable };
};
resetSashDragState(start, alt);
}
private onSashChange({ current }: ISashEvent): void {
const { index, start, sizes, alt, minDelta, maxDelta } = this.sashDragState;
const { index, start, sizes, alt, minDelta, maxDelta, snapBefore, snapAfter } = this.sashDragState;
this.sashDragState.current = current;
const delta = current - start;
const newDelta = this.resize(index, delta, sizes, undefined, undefined, minDelta, maxDelta);
const newDelta = this.resize(index, delta, sizes, undefined, undefined, minDelta, maxDelta, snapBefore, snapAfter);
if (alt) {
const isLastSash = index === this.sashItems.length - 1;
const newSizes = this.viewItems.map(i => i.size);
const viewItemIndex = isLastSash ? index : index + 1;
const viewItem = this.viewItems[viewItemIndex];
const newMinDelta = viewItem.size - viewItem.view.maximumSize;
const newMaxDelta = viewItem.size - viewItem.view.minimumSize;
const newMinDelta = viewItem.size - viewItem.maximumSize;
const newMaxDelta = viewItem.size - viewItem.minimumSize;
const resizeIndex = isLastSash ? index - 1 : index + 1;
this.resize(resizeIndex, -newDelta, newSizes, undefined, undefined, newMinDelta, newMaxDelta);
@@ -435,7 +564,7 @@ export class SplitView extends Disposable {
this.saveProportions();
}
private onViewChange(item: IViewItem, size: number | undefined): void {
private onViewChange(item: ViewItem, size: number | undefined): void {
const index = this.viewItems.indexOf(item);
if (index < 0 || index >= this.viewItems.length) {
@@ -443,7 +572,7 @@ export class SplitView extends Disposable {
}
size = typeof size === 'number' ? size : item.size;
size = clamp(size, item.view.minimumSize, item.view.maximumSize);
size = clamp(size, item.minimumSize, item.maximumSize);
if (this.inverseAltBehavior && index > 0) {
// In this case, we want the view to grow or shrink both sides equally
@@ -470,13 +599,13 @@ export class SplitView extends Disposable {
const item = this.viewItems[index];
size = Math.round(size);
size = clamp(size, item.view.minimumSize, item.view.maximumSize);
size = clamp(size, item.minimumSize, item.maximumSize);
let delta = size - item.size;
if (delta !== 0 && index < this.viewItems.length - 1) {
const downIndexes = range(index + 1, this.viewItems.length);
const collapseDown = downIndexes.reduce((r, i) => r + (this.viewItems[i].size - this.viewItems[i].view.minimumSize), 0);
const expandDown = downIndexes.reduce((r, i) => r + (this.viewItems[i].view.maximumSize - this.viewItems[i].size), 0);
const collapseDown = downIndexes.reduce((r, i) => r + (this.viewItems[i].size - this.viewItems[i].minimumSize), 0);
const expandDown = downIndexes.reduce((r, i) => r + (this.viewItems[i].maximumSize - this.viewItems[i].size), 0);
const deltaDown = clamp(delta, -expandDown, collapseDown);
this.resize(index, deltaDown);
@@ -485,8 +614,8 @@ export class SplitView extends Disposable {
if (delta !== 0 && index > 0) {
const upIndexes = range(index - 1, -1);
const collapseUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].size - this.viewItems[i].view.minimumSize), 0);
const expandUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].view.maximumSize - this.viewItems[i].size), 0);
const collapseUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].size - this.viewItems[i].minimumSize), 0);
const expandUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].maximumSize - this.viewItems[i].size), 0);
const deltaUp = clamp(-delta, -collapseUp, expandUp);
this.resize(index - 1, deltaUp);
@@ -521,7 +650,9 @@ export class SplitView extends Disposable {
lowPriorityIndexes?: number[],
highPriorityIndexes?: number[],
overloadMinDelta: number = Number.NEGATIVE_INFINITY,
overloadMaxDelta: number = Number.POSITIVE_INFINITY
overloadMaxDelta: number = Number.POSITIVE_INFINITY,
snapBefore?: ISashDragSnapState,
snapAfter?: ISashDragSnapState
): number {
if (index < 0 || index >= this.viewItems.length) {
return 0;
@@ -550,18 +681,38 @@ export class SplitView extends Disposable {
const downItems = downIndexes.map(i => this.viewItems[i]);
const downSizes = downIndexes.map(i => sizes[i]);
const minDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].view.minimumSize - sizes[i]), 0);
const maxDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].view.maximumSize - sizes[i]), 0);
const maxDeltaDown = downIndexes.length === 0 ? Number.POSITIVE_INFINITY : downIndexes.reduce((r, i) => r + (sizes[i] - this.viewItems[i].view.minimumSize), 0);
const minDeltaDown = downIndexes.length === 0 ? Number.NEGATIVE_INFINITY : downIndexes.reduce((r, i) => r + (sizes[i] - this.viewItems[i].view.maximumSize), 0);
const minDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].minimumSize - sizes[i]), 0);
const maxDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].maximumSize - sizes[i]), 0);
const maxDeltaDown = downIndexes.length === 0 ? Number.POSITIVE_INFINITY : downIndexes.reduce((r, i) => r + (sizes[i] - this.viewItems[i].minimumSize), 0);
const minDeltaDown = downIndexes.length === 0 ? Number.NEGATIVE_INFINITY : downIndexes.reduce((r, i) => r + (sizes[i] - this.viewItems[i].maximumSize), 0);
const minDelta = Math.max(minDeltaUp, minDeltaDown, overloadMinDelta);
const maxDelta = Math.min(maxDeltaDown, maxDeltaUp, overloadMaxDelta);
let snapped = false;
if (snapBefore) {
const snapView = this.viewItems[snapBefore.index];
const visible = delta >= snapBefore.limitDelta;
snapped = visible !== snapView.visible;
snapView.visible = visible;
}
if (!snapped && snapAfter) {
const snapView = this.viewItems[snapAfter.index];
const visible = delta < snapAfter.limitDelta;
snapped = visible !== snapView.visible;
snapView.visible = visible;
}
if (snapped) {
return this.resize(index, delta, sizes, lowPriorityIndexes, highPriorityIndexes, overloadMinDelta, overloadMaxDelta);
}
delta = clamp(delta, minDelta, maxDelta);
for (let i = 0, deltaUp = delta; i < upItems.length; i++) {
const item = upItems[i];
const size = clamp(upSizes[i] + deltaUp, item.view.minimumSize, item.view.maximumSize);
const size = clamp(upSizes[i] + deltaUp, item.minimumSize, item.maximumSize);
const viewDelta = size - upSizes[i];
deltaUp -= viewDelta;
@@ -570,7 +721,7 @@ export class SplitView extends Disposable {
for (let i = 0, deltaDown = delta; i < downItems.length; i++) {
const item = downItems[i];
const size = clamp(downSizes[i] - deltaDown, item.view.minimumSize, item.view.maximumSize);
const size = clamp(downSizes[i] - deltaDown, item.minimumSize, item.maximumSize);
const viewDelta = size - downSizes[i];
deltaDown += viewDelta;
@@ -580,13 +731,19 @@ export class SplitView extends Disposable {
return delta;
}
private distributeEmptySpace(): void {
let contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
private distributeEmptySpace(lowPriorityIndex?: number): void {
const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
let emptyDelta = this.size - contentSize;
for (let i = this.viewItems.length - 1; emptyDelta !== 0 && i >= 0; i--) {
const item = this.viewItems[i];
const size = clamp(item.size + emptyDelta, item.view.minimumSize, item.view.maximumSize);
const indexes = range(this.viewItems.length - 1, -1);
if (typeof lowPriorityIndex === 'number') {
pushToEnd(indexes, lowPriorityIndex);
}
for (let i = 0; emptyDelta !== 0 && i < indexes.length; i++) {
const item = this.viewItems[indexes[i]];
const size = clamp(item.size + emptyDelta, item.minimumSize, item.maximumSize);
const viewDelta = size - item.size;
emptyDelta -= viewDelta;
@@ -606,31 +763,43 @@ export class SplitView extends Disposable {
// Update sashes enablement
let previous = false;
const collapsesDown = this.viewItems.map(i => previous = (i.size - i.view.minimumSize > 0) || previous);
const collapsesDown = this.viewItems.map(i => previous = (i.size - i.minimumSize > 0) || previous);
previous = false;
const expandsDown = this.viewItems.map(i => previous = (i.view.maximumSize - i.size > 0) || previous);
const expandsDown = this.viewItems.map(i => previous = (i.maximumSize - i.size > 0) || previous);
const reverseViews = [...this.viewItems].reverse();
previous = false;
const collapsesUp = reverseViews.map(i => previous = (i.size - i.view.minimumSize > 0) || previous).reverse();
const collapsesUp = reverseViews.map(i => previous = (i.size - i.minimumSize > 0) || previous).reverse();
previous = false;
const expandsUp = reverseViews.map(i => previous = (i.view.maximumSize - i.size > 0) || previous).reverse();
const expandsUp = reverseViews.map(i => previous = (i.maximumSize - i.size > 0) || previous).reverse();
this.sashItems.forEach((s, i) => {
const min = !(collapsesDown[i] && expandsUp[i + 1]);
const max = !(expandsDown[i] && collapsesUp[i + 1]);
this.sashItems.forEach(({ sash }, index) => {
const min = !(collapsesDown[index] && expandsUp[index + 1]);
const max = !(expandsDown[index] && collapsesUp[index + 1]);
if (min && max) {
s.sash.state = SashState.Disabled;
const upIndexes = range(index, -1);
const downIndexes = range(index + 1, this.viewItems.length);
const snapBeforeIndex = this.findFirstSnapIndex(upIndexes);
const snapAfterIndex = this.findFirstSnapIndex(downIndexes);
if (typeof snapBeforeIndex === 'number' && !this.viewItems[snapBeforeIndex].visible) {
sash.state = SashState.Minimum;
} else if (typeof snapAfterIndex === 'number' && !this.viewItems[snapAfterIndex].visible) {
sash.state = SashState.Maximum;
} else {
sash.state = SashState.Disabled;
}
} else if (min && !max) {
s.sash.state = SashState.Minimum;
sash.state = SashState.Minimum;
} else if (!min && max) {
s.sash.state = SashState.Maximum;
sash.state = SashState.Maximum;
} else {
s.sash.state = SashState.Enabled;
sash.state = SashState.Enabled;
}
// }
});
}
@@ -648,10 +817,32 @@ export class SplitView extends Disposable {
return 0;
}
private findFirstSnapIndex(indexes: number[]): number | undefined {
// visible views first
for (const index of indexes) {
if (!this.viewItems[index].visible) {
continue;
}
if (this.viewItems[index].snap) {
return index;
}
}
// then, hidden views
for (const index of indexes) {
if (!this.viewItems[index].visible && this.viewItems[index].snap) {
return index;
}
}
return undefined;
}
dispose(): void {
super.dispose();
this.viewItems.forEach(i => i.disposable.dispose());
this.viewItems.forEach(i => i.dispose());
this.viewItems = [];
this.sashItems.forEach(i => i.disposable.dispose());

3
src/vs/base/browser/ui/splitview/tree-collapsed-dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69064L6.33333 3.02397L5.71461 3.64269L10.0719 7.99999Z" fill="#C5C5C5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 286 B

3
src/vs/base/browser/ui/splitview/tree-collapsed-hc.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

3
src/vs/base/browser/ui/splitview/tree-collapsed-light.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="#424242"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 286 B

3
src/vs/base/browser/ui/splitview/tree-expanded-dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="#C5C5C5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

3
src/vs/base/browser/ui/splitview/tree-expanded-hc.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

3
src/vs/base/browser/ui/splitview/tree-expanded-light.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="#424242"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

5
src/vs/base/browser/ui/toolbar/ellipsis-dark.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 8C4 8.19778 3.94135 8.39112 3.83147 8.55557C3.72159 8.72002 3.56541 8.84819 3.38268 8.92388C3.19996 8.99957 2.99889 9.01937 2.80491 8.98079C2.61093 8.9422 2.43275 8.84696 2.29289 8.70711C2.15304 8.56725 2.0578 8.38907 2.01922 8.19509C1.98063 8.00111 2.00043 7.80004 2.07612 7.61732C2.15181 7.43459 2.27998 7.27841 2.44443 7.16853C2.60888 7.05865 2.80222 7 3 7C3.26522 7 3.51957 7.10536 3.70711 7.29289C3.89464 7.48043 4 7.73478 4 8Z" fill="#C5C5C5"/>
<path d="M9 8C9 8.19778 8.94135 8.39112 8.83147 8.55557C8.72159 8.72002 8.56541 8.84819 8.38268 8.92388C8.19996 8.99957 7.99889 9.01937 7.80491 8.98079C7.61093 8.9422 7.43275 8.84696 7.29289 8.70711C7.15304 8.56725 7.0578 8.38907 7.01922 8.19509C6.98063 8.00111 7.00043 7.80004 7.07612 7.61732C7.15181 7.43459 7.27998 7.27841 7.44443 7.16853C7.60888 7.05865 7.80222 7 8 7C8.26522 7 8.51957 7.10536 8.70711 7.29289C8.89464 7.48043 9 7.73478 9 8Z" fill="#C5C5C5"/>
<path d="M14 8C14 8.19778 13.9414 8.39112 13.8315 8.55557C13.7216 8.72002 13.5654 8.84819 13.3827 8.92388C13.2 8.99957 12.9989 9.01937 12.8049 8.98079C12.6109 8.9422 12.4327 8.84696 12.2929 8.70711C12.153 8.56725 12.0578 8.38907 12.0192 8.19509C11.9806 8.00111 12.0004 7.80004 12.0761 7.61732C12.1518 7.43459 12.28 7.27841 12.4444 7.16853C12.6089 7.05865 12.8022 7 13 7C13.2652 7 13.5196 7.10536 13.7071 7.29289C13.8946 7.48043 14 7.73478 14 8Z" fill="#C5C5C5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

5
src/vs/base/browser/ui/toolbar/ellipsis-hc.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 8C4 8.19778 3.94135 8.39112 3.83147 8.55557C3.72159 8.72002 3.56541 8.84819 3.38268 8.92388C3.19996 8.99957 2.99889 9.01937 2.80491 8.98079C2.61093 8.9422 2.43275 8.84696 2.29289 8.70711C2.15304 8.56725 2.0578 8.38907 2.01922 8.19509C1.98063 8.00111 2.00043 7.80004 2.07612 7.61732C2.15181 7.43459 2.27998 7.27841 2.44443 7.16853C2.60888 7.05865 2.80222 7 3 7C3.26522 7 3.51957 7.10536 3.70711 7.29289C3.89464 7.48043 4 7.73478 4 8Z" fill="white"/>
<path d="M9 8C9 8.19778 8.94135 8.39112 8.83147 8.55557C8.72159 8.72002 8.56541 8.84819 8.38268 8.92388C8.19996 8.99957 7.99889 9.01937 7.80491 8.98079C7.61093 8.9422 7.43275 8.84696 7.29289 8.70711C7.15304 8.56725 7.0578 8.38907 7.01922 8.19509C6.98063 8.00111 7.00043 7.80004 7.07612 7.61732C7.15181 7.43459 7.27998 7.27841 7.44443 7.16853C7.60888 7.05865 7.80222 7 8 7C8.26522 7 8.51957 7.10536 8.70711 7.29289C8.89464 7.48043 9 7.73478 9 8Z" fill="white"/>
<path d="M14 8C14 8.19778 13.9414 8.39112 13.8315 8.55557C13.7216 8.72002 13.5654 8.84819 13.3827 8.92388C13.2 8.99957 12.9989 9.01937 12.8049 8.98079C12.6109 8.9422 12.4327 8.84696 12.2929 8.70711C12.153 8.56725 12.0578 8.38907 12.0192 8.19509C11.9806 8.00111 12.0004 7.80004 12.0761 7.61732C12.1518 7.43459 12.28 7.27841 12.4444 7.16853C12.6089 7.05865 12.8022 7 13 7C13.2652 7 13.5196 7.10536 13.7071 7.29289C13.8946 7.48043 14 7.73478 14 8Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/vs/base/browser/ui/toolbar/ellipsis-inverse.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#252526;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#c5c5c5;}</style></defs><title>Ellipsis_bold_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M6,7.5A2.5,2.5,0,1,1,3.5,5,2.5,2.5,0,0,1,6,7.5ZM8.5,5A2.5,2.5,0,1,0,11,7.5,2.5,2.5,0,0,0,8.5,5Zm5,0A2.5,2.5,0,1,0,16,7.5,2.5,2.5,0,0,0,13.5,5Z" style="display: none;"/></g><g id="iconBg"><path class="icon-vs-bg" d="M5,7.5A1.5,1.5,0,1,1,3.5,6,1.5,1.5,0,0,1,5,7.5ZM8.5,6A1.5,1.5,0,1,0,10,7.5,1.5,1.5,0,0,0,8.5,6Zm5,0A1.5,1.5,0,1,0,15,7.5,1.5,1.5,0,0,0,13.5,6Z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 748 B

5
src/vs/base/browser/ui/toolbar/ellipsis-light.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 8C4 8.19778 3.94135 8.39112 3.83147 8.55557C3.72159 8.72002 3.56541 8.84819 3.38268 8.92388C3.19996 8.99957 2.99889 9.01937 2.80491 8.98079C2.61093 8.9422 2.43275 8.84696 2.29289 8.70711C2.15304 8.56725 2.0578 8.38907 2.01922 8.19509C1.98063 8.00111 2.00043 7.80004 2.07612 7.61732C2.15181 7.43459 2.27998 7.27841 2.44443 7.16853C2.60888 7.05865 2.80222 7 3 7C3.26522 7 3.51957 7.10536 3.70711 7.29289C3.89464 7.48043 4 7.73478 4 8Z" fill="#424242"/>
<path d="M9 8C9 8.19778 8.94135 8.39112 8.83147 8.55557C8.72159 8.72002 8.56541 8.84819 8.38268 8.92388C8.19996 8.99957 7.99889 9.01937 7.80491 8.98079C7.61093 8.9422 7.43275 8.84696 7.29289 8.70711C7.15304 8.56725 7.0578 8.38907 7.01922 8.19509C6.98063 8.00111 7.00043 7.80004 7.07612 7.61732C7.15181 7.43459 7.27998 7.27841 7.44443 7.16853C7.60888 7.05865 7.80222 7 8 7C8.26522 7 8.51957 7.10536 8.70711 7.29289C8.89464 7.48043 9 7.73478 9 8Z" fill="#424242"/>
<path d="M14 8C14 8.19778 13.9414 8.39112 13.8315 8.55557C13.7216 8.72002 13.5654 8.84819 13.3827 8.92388C13.2 8.99957 12.9989 9.01937 12.8049 8.98079C12.6109 8.9422 12.4327 8.84696 12.2929 8.70711C12.153 8.56725 12.0578 8.38907 12.0192 8.19509C11.9806 8.00111 12.0004 7.80004 12.0761 7.61732C12.1518 7.43459 12.28 7.27841 12.4444 7.16853C12.6089 7.05865 12.8022 7 13 7C13.2652 7 13.5196 7.10536 13.7071 7.29289C13.8946 7.48043 14 7.73478 14 8Z" fill="#424242"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/vs/base/browser/ui/toolbar/ellipsis.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#424242;}</style></defs><title>Ellipsis_bold_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M6,7.5A2.5,2.5,0,1,1,3.5,5,2.5,2.5,0,0,1,6,7.5ZM8.5,5A2.5,2.5,0,1,0,11,7.5,2.5,2.5,0,0,0,8.5,5Zm5,0A2.5,2.5,0,1,0,16,7.5,2.5,2.5,0,0,0,13.5,5Z" style="display: none;"/></g><g id="iconBg"><path class="icon-vs-bg" d="M5,7.5A1.5,1.5,0,1,1,3.5,6,1.5,1.5,0,0,1,5,7.5ZM8.5,6A1.5,1.5,0,1,0,10,7.5,1.5,1.5,0,0,0,8.5,6Zm5,0A1.5,1.5,0,1,0,15,7.5,1.5,1.5,0,0,0,13.5,6Z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 748 B

9
src/vs/base/browser/ui/toolbar/toolbar.css
View File

@@ -9,10 +9,13 @@
}
.vs .monaco-toolbar .action-label.toolbar-toggle-more {
background-image: url('ellipsis.svg');
background-image: url('ellipsis-light.svg');
}
.hc-black .monaco-toolbar .action-label.toolbar-toggle-more,
.vs-dark .monaco-toolbar .action-label.toolbar-toggle-more {
background-image: url('ellipsis-inverse.svg');
background-image: url('ellipsis-dark.svg');
}
.hc-black .monaco-toolbar .action-label.toolbar-toggle-more {
background-image: url('ellipsis-hc.svg');
}

38
src/vs/base/browser/ui/toolbar/toolbar.ts
View File

@@ -9,7 +9,7 @@ import { Action, IActionRunner, IAction } from 'vs/base/common/actions';
import { ActionBar, ActionsOrientation, IActionViewItemProvider } from 'vs/base/browser/ui/actionbar/actionbar';
import { IContextMenuProvider, DropdownMenuActionViewItem } from 'vs/base/browser/ui/dropdown/dropdown';
import { ResolvedKeybinding } from 'vs/base/common/keyCodes';
import { Disposable } from 'vs/base/common/lifecycle';
import { Disposable, MutableDisposable } from 'vs/base/common/lifecycle';
import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
import { withNullAsUndefined } from 'vs/base/common/types';
@@ -32,7 +32,7 @@ export class ToolBar extends Disposable {
private options: IToolBarOptions;
private actionBar: ActionBar;
private toggleMenuAction: ToggleMenuAction;
private toggleMenuActionViewItem?: DropdownMenuActionViewItem;
private toggleMenuActionViewItem = this._register(new MutableDisposable<DropdownMenuActionViewItem>());
private hasSecondaryActions: boolean;
private lookupKeybindings: boolean;
@@ -42,7 +42,7 @@ export class ToolBar extends Disposable {
this.options = options;
this.lookupKeybindings = typeof this.options.getKeyBinding === 'function';
this.toggleMenuAction = this._register(new ToggleMenuAction(() => this.toggleMenuActionViewItem && this.toggleMenuActionViewItem.show(), options.toggleMenuTitle));
this.toggleMenuAction = this._register(new ToggleMenuAction(() => this.toggleMenuActionViewItem.value && this.toggleMenuActionViewItem.value.show(), options.toggleMenuTitle));
let element = document.createElement('div');
element.className = 'monaco-toolbar';
@@ -57,13 +57,8 @@ export class ToolBar extends Disposable {
// Return special action item for the toggle menu action
if (action.id === ToggleMenuAction.ID) {
// Dispose old
if (this.toggleMenuActionViewItem) {
this.toggleMenuActionViewItem.dispose();
}
// Create new
this.toggleMenuActionViewItem = new DropdownMenuActionViewItem(
this.toggleMenuActionViewItem.value = new DropdownMenuActionViewItem(
action,
(<ToggleMenuAction>action).menuActions,
contextMenuProvider,
@@ -73,9 +68,9 @@ export class ToolBar extends Disposable {
'toolbar-toggle-more',
this.options.anchorAlignmentProvider
);
this.toggleMenuActionViewItem!.setActionContext(this.actionBar.context);
this.toggleMenuActionViewItem.value.setActionContext(this.actionBar.context);
return this.toggleMenuActionViewItem;
return this.toggleMenuActionViewItem.value;
}
return options.actionViewItemProvider ? options.actionViewItemProvider(action) : undefined;
@@ -93,8 +88,8 @@ export class ToolBar extends Disposable {
set context(context: any) {
this.actionBar.context = context;
if (this.toggleMenuActionViewItem) {
this.toggleMenuActionViewItem.setActionContext(context);
if (this.toggleMenuActionViewItem.value) {
this.toggleMenuActionViewItem.value.setActionContext(context);
}
}
@@ -114,7 +109,7 @@ export class ToolBar extends Disposable {
this.actionBar.setAriaLabel(label);
}
setActions(primaryActions: IAction[], secondaryActions?: IAction[]): () => void {
setActions(primaryActions: ReadonlyArray<IAction>, secondaryActions?: ReadonlyArray<IAction>): () => void {
return () => {
let primaryActionsToSet = primaryActions ? primaryActions.slice(0) : [];
@@ -154,22 +149,13 @@ export class ToolBar extends Disposable {
}
};
}
dispose(): void {
if (this.toggleMenuActionViewItem) {
this.toggleMenuActionViewItem.dispose();
this.toggleMenuActionViewItem = undefined;
}
super.dispose();
}
}
class ToggleMenuAction extends Action {
static readonly ID = 'toolbar.toggle.more';
private _menuActions: IAction[];
private _menuActions: ReadonlyArray<IAction>;
private toggleDropdownMenu: () => void;
constructor(toggleDropdownMenu: () => void, title?: string) {
@@ -185,11 +171,11 @@ class ToggleMenuAction extends Action {
return Promise.resolve(true);
}
get menuActions() {
get menuActions(): ReadonlyArray<IAction> {
return this._menuActions;
}
set menuActions(actions: IAction[]) {
set menuActions(actions: ReadonlyArray<IAction>) {
this._menuActions = actions;
}
}

204
src/vs/base/browser/ui/tree/abstractTree.ts
View File

@@ -4,14 +4,14 @@
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/tree';
import { IDisposable, dispose, Disposable, toDisposable } from 'vs/base/common/lifecycle';
import { IDisposable, dispose, Disposable, toDisposable, DisposableStore } from 'vs/base/common/lifecycle';
import { IListOptions, List, IListStyles, mightProducePrintableCharacter, MouseController } from 'vs/base/browser/ui/list/listWidget';
import { IListVirtualDelegate, IListRenderer, IListMouseEvent, IListEvent, IListContextMenuEvent, IListDragAndDrop, IListDragOverReaction, IKeyboardNavigationLabelProvider, IIdentityProvider } from 'vs/base/browser/ui/list/list';
import { append, $, toggleClass, getDomNodePagePosition, removeClass, addClass, hasClass } from 'vs/base/browser/dom';
import { append, $, toggleClass, getDomNodePagePosition, removeClass, addClass, hasClass, hasParentWithClass, createStyleSheet, clearNode } from 'vs/base/browser/dom';
import { Event, Relay, Emitter, EventBufferer } from 'vs/base/common/event';
import { StandardKeyboardEvent, IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { ITreeModel, ITreeNode, ITreeRenderer, ITreeEvent, ITreeMouseEvent, ITreeContextMenuEvent, ITreeFilter, ITreeNavigator, ICollapseStateChangeEvent, ITreeDragAndDrop, TreeDragOverBubble, TreeVisibility, TreeFilterResult, ITreeModelSpliceEvent } from 'vs/base/browser/ui/tree/tree';
import { ITreeModel, ITreeNode, ITreeRenderer, ITreeEvent, ITreeMouseEvent, ITreeContextMenuEvent, ITreeFilter, ITreeNavigator, ICollapseStateChangeEvent, ITreeDragAndDrop, TreeDragOverBubble, TreeVisibility, TreeFilterResult, ITreeModelSpliceEvent, TreeMouseEventTarget } from 'vs/base/browser/ui/tree/tree';
import { ISpliceable } from 'vs/base/common/sequence';
import { IDragAndDropData, StaticDND, DragAndDropData } from 'vs/base/browser/dnd';
import { range, equals, distinctES6 } from 'vs/base/common/arrays';
@@ -25,6 +25,7 @@ import { isMacintosh } from 'vs/base/common/platform';
import { values } from 'vs/base/common/map';
import { clamp } from 'vs/base/common/numbers';
import { ScrollEvent } from 'vs/base/common/scrollable';
import { SetMap } from 'vs/base/common/collections';
function asTreeDragAndDropData<T, TFilterData>(data: IDragAndDropData): IDragAndDropData {
if (data instanceof ElementsDragAndDropData) {
@@ -152,7 +153,7 @@ function asListOptions<T, TFilterData, TRef>(modelProvider: () => ITreeModel<T,
}
},
enableKeyboardNavigation: options.simpleKeyboardNavigation,
ariaSetProvider: {
ariaProvider: {
getSetSize(node) {
return node.parent!.visibleChildrenCount;
},
@@ -188,12 +189,48 @@ export class ComposedTreeDelegate<T, N extends { element: T }> implements IListV
interface ITreeListTemplateData<T> {
readonly container: HTMLElement;
readonly indent: HTMLElement;
readonly twistie: HTMLElement;
indentGuidesDisposable: IDisposable;
readonly templateData: T;
}
export enum RenderIndentGuides {
None = 'none',
OnHover = 'onHover',
Always = 'always'
}
interface ITreeRendererOptions {
readonly indent?: number;
readonly renderIndentGuides?: RenderIndentGuides;
}
interface IRenderData<TTemplateData> {
templateData: ITreeListTemplateData<TTemplateData>;
height: number;
}
interface Collection<T> {
readonly elements: T[];
readonly onDidChange: Event<T[]>;
}
class EventCollection<T> implements Collection<T> {
private disposables = new DisposableStore();
get elements(): T[] {
return this._elements;
}
constructor(readonly onDidChange: Event<T[]>, private _elements: T[] = []) {
onDidChange(e => this._elements = e, null, this.disposables);
}
dispose() {
this.disposables.dispose();
}
}
class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITreeNode<T, TFilterData>, ITreeListTemplateData<TTemplateData>> {
@@ -202,13 +239,20 @@ class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITree
readonly templateId: string;
private renderedElements = new Map<T, ITreeNode<T, TFilterData>>();
private renderedNodes = new Map<ITreeNode<T, TFilterData>, ITreeListTemplateData<TTemplateData>>();
private renderedNodes = new Map<ITreeNode<T, TFilterData>, IRenderData<TTemplateData>>();
private indent: number = TreeRenderer.DefaultIndent;
private _renderIndentGuides: RenderIndentGuides = RenderIndentGuides.None;
private renderedIndentGuides = new SetMap<ITreeNode<T, TFilterData>, HTMLDivElement>();
private activeParentNodes = new Set<ITreeNode<T, TFilterData>>();
private indentGuidesDisposable: IDisposable = Disposable.None;
private disposables: IDisposable[] = [];
constructor(
private renderer: ITreeRenderer<T, TFilterData, TTemplateData>,
onDidChangeCollapseState: Event<ICollapseStateChangeEvent<T, TFilterData>>,
private activeNodes: Collection<ITreeNode<T, TFilterData>>,
options: ITreeRendererOptions = {}
) {
this.templateId = renderer.templateId;
@@ -226,34 +270,57 @@ class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITree
this.indent = clamp(options.indent, 0, 40);
}
this.renderedNodes.forEach((templateData, node) => {
templateData.twistie.style.marginLeft = `${node.depth * this.indent}px`;
});
if (typeof options.renderIndentGuides !== 'undefined') {
const renderIndentGuides = options.renderIndentGuides;
if (renderIndentGuides !== this._renderIndentGuides) {
this._renderIndentGuides = renderIndentGuides;
if (renderIndentGuides) {
const disposables = new DisposableStore();
this.activeNodes.onDidChange(this._onDidChangeActiveNodes, this, disposables);
this.indentGuidesDisposable = disposables;
this._onDidChangeActiveNodes(this.activeNodes.elements);
} else {
this.indentGuidesDisposable.dispose();
}
}
}
}
renderTemplate(container: HTMLElement): ITreeListTemplateData<TTemplateData> {
const el = append(container, $('.monaco-tl-row'));
const indent = append(el, $('.monaco-tl-indent'));
const twistie = append(el, $('.monaco-tl-twistie'));
const contents = append(el, $('.monaco-tl-contents'));
const templateData = this.renderer.renderTemplate(contents);
return { container, twistie, templateData };
return { container, indent, twistie, indentGuidesDisposable: Disposable.None, templateData };
}
renderElement(node: ITreeNode<T, TFilterData>, index: number, templateData: ITreeListTemplateData<TTemplateData>, height: number | undefined): void {
if (typeof height === 'number') {
this.renderedNodes.set(node, templateData);
this.renderedNodes.set(node, { templateData, height });
this.renderedElements.set(node.element, node);
}
const indent = TreeRenderer.DefaultIndent + (node.depth - 1) * this.indent;
templateData.twistie.style.marginLeft = `${indent}px`;
this.update(node, templateData);
templateData.indent.style.width = `${indent + this.indent - 16}px`;
this.renderTwistie(node, templateData);
if (typeof height === 'number') {
this.renderIndentGuides(node, templateData);
}
this.renderer.renderElement(node, index, templateData.templateData, height);
}
disposeElement(node: ITreeNode<T, TFilterData>, index: number, templateData: ITreeListTemplateData<TTemplateData>, height: number | undefined): void {
templateData.indentGuidesDisposable.dispose();
if (this.renderer.disposeElement) {
this.renderer.disposeElement(node, index, templateData.templateData, height);
}
@@ -279,16 +346,17 @@ class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITree
}
private onDidChangeNodeTwistieState(node: ITreeNode<T, TFilterData>): void {
const templateData = this.renderedNodes.get(node);
const data = this.renderedNodes.get(node);
if (!templateData) {
if (!data) {
return;
}
this.update(node, templateData);
this.renderTwistie(node, data.templateData);
this.renderIndentGuides(node, data.templateData);
}
private update(node: ITreeNode<T, TFilterData>, templateData: ITreeListTemplateData<TTemplateData>) {
private renderTwistie(node: ITreeNode<T, TFilterData>, templateData: ITreeListTemplateData<TTemplateData>) {
if (this.renderer.renderTwistie) {
this.renderer.renderTwistie(node.element, templateData.twistie);
}
@@ -303,9 +371,72 @@ class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITree
}
}
private renderIndentGuides(target: ITreeNode<T, TFilterData>, templateData: ITreeListTemplateData<TTemplateData>): void {
clearNode(templateData.indent);
templateData.indentGuidesDisposable.dispose();
if (this._renderIndentGuides === RenderIndentGuides.None) {
return;
}
const disposableStore = new DisposableStore();
let node = target;
while (node.parent && node.parent.parent) {
const parent = node.parent;
const guide = $<HTMLDivElement>('.indent-guide', { style: `width: ${this.indent}px` });
if (this.activeParentNodes.has(parent)) {
addClass(guide, 'active');
}
if (templateData.indent.childElementCount === 0) {
templateData.indent.appendChild(guide);
} else {
templateData.indent.insertBefore(guide, templateData.indent.firstElementChild);
}
this.renderedIndentGuides.add(parent, guide);
disposableStore.add(toDisposable(() => this.renderedIndentGuides.delete(parent, guide)));
node = parent;
}
templateData.indentGuidesDisposable = disposableStore;
}
private _onDidChangeActiveNodes(nodes: ITreeNode<T, TFilterData>[]): void {
if (this._renderIndentGuides === RenderIndentGuides.None) {
return;
}
const set = new Set<ITreeNode<T, TFilterData>>();
nodes.forEach(node => {
if (node.parent) {
set.add(node.parent);
}
});
this.activeParentNodes.forEach(node => {
if (!set.has(node)) {
this.renderedIndentGuides.forEach(node, line => removeClass(line, 'active'));
}
});
set.forEach(node => {
if (!this.activeParentNodes.has(node)) {
this.renderedIndentGuides.forEach(node, line => addClass(line, 'active'));
}
});
this.activeParentNodes = set;
}
dispose(): void {
this.renderedNodes.clear();
this.renderedElements.clear();
this.indentGuidesDisposable.dispose();
this.disposables = dispose(this.disposables);
}
}
@@ -722,9 +853,18 @@ function asTreeEvent<T>(event: IListEvent<ITreeNode<T, any>>): ITreeEvent<T> {
}
function asTreeMouseEvent<T>(event: IListMouseEvent<ITreeNode<T, any>>): ITreeMouseEvent<T> {
let target: TreeMouseEventTarget = TreeMouseEventTarget.Unknown;
if (hasParentWithClass(event.browserEvent.target as HTMLElement, 'monaco-tl-twistie', 'monaco-tl-row')) {
target = TreeMouseEventTarget.Twistie;
} else if (hasParentWithClass(event.browserEvent.target as HTMLElement, 'monaco-tl-contents', 'monaco-tl-row')) {
target = TreeMouseEventTarget.Element;
}
return {
browserEvent: event.browserEvent,
element: event.element ? event.element.element : null
element: event.element ? event.element.element : null,
target
};
}
@@ -811,6 +951,10 @@ class Trait<T> {
return [...this.elements];
}
getNodes(): readonly ITreeNode<T, any>[] {
return this.nodes;
}
has(node: ITreeNode<T, any>): boolean {
return this.nodeSet.has(node);
}
@@ -999,6 +1143,7 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
private eventBufferer = new EventBufferer();
private typeFilterController?: TypeFilterController<T, TFilterData>;
private focusNavigationFilter: ((node: ITreeNode<T, TFilterData>) => boolean) | undefined;
private styleElement: HTMLStyleElement;
protected disposables: IDisposable[] = [];
get onDidScroll(): Event<ScrollEvent> { return this.view.onDidScroll; }
@@ -1027,7 +1172,6 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
get filterOnType(): boolean { return !!this._options.filterOnType; }
get onDidChangeTypeFilterPattern(): Event<string> { return this.typeFilterController ? this.typeFilterController.onDidChangePattern : Event.None; }
// Options TODO@joao expose options only, not Optional<>
get openOnSingleClick(): boolean { return typeof this._options.openOnSingleClick === 'undefined' ? true : this._options.openOnSingleClick; }
get expandOnlyOnTwistieClick(): boolean | ((e: T) => boolean) { return typeof this._options.expandOnlyOnTwistieClick === 'undefined' ? false : this._options.expandOnlyOnTwistieClick; }
@@ -1045,7 +1189,11 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
const treeDelegate = new ComposedTreeDelegate<T, ITreeNode<T, TFilterData>>(delegate);
const onDidChangeCollapseStateRelay = new Relay<ICollapseStateChangeEvent<T, TFilterData>>();
this.renderers = renderers.map(r => new TreeRenderer<T, TFilterData, any>(r, onDidChangeCollapseStateRelay.event, _options));
const onDidChangeActiveNodes = new Relay<ITreeNode<T, TFilterData>[]>();
const activeNodes = new EventCollection(onDidChangeActiveNodes.event);
this.disposables.push(activeNodes);
this.renderers = renderers.map(r => new TreeRenderer<T, TFilterData, any>(r, onDidChangeCollapseStateRelay.event, activeNodes, _options));
this.disposables.push(...this.renderers);
let filter: TypeFilter<T> | undefined;
@@ -1068,6 +1216,8 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
this.selection.onDidModelSplice(e);
}, null, this.disposables);
onDidChangeActiveNodes.input = Event.map(Event.any<any>(this.focus.onDidChange, this.selection.onDidChange, this.model.onDidSplice), () => [...this.focus.getNodes(), ...this.selection.getNodes()]);
if (_options.keyboardSupport !== false) {
const onKeyDown = Event.chain(this.view.onKeyDown)
.filter(e => !isInputElement(e.target as HTMLElement))
@@ -1083,6 +1233,9 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
this.focusNavigationFilter = node => this.typeFilterController!.shouldAllowFocus(node);
this.disposables.push(this.typeFilterController!);
}
this.styleElement = createStyleSheet(this.view.getHTMLElement());
toggleClass(this.getHTMLElement(), 'always', this._options.renderIndentGuides === RenderIndentGuides.Always);
}
updateOptions(optionsUpdate: IAbstractTreeOptionsUpdate = {}): void {
@@ -1102,6 +1255,8 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
}
this._onDidUpdateOptions.fire(this._options);
toggleClass(this.getHTMLElement(), 'always', this._options.renderIndentGuides === RenderIndentGuides.Always);
}
get options(): IAbstractTreeOptions<T, TFilterData> {
@@ -1183,6 +1338,19 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
}
style(styles: IListStyles): void {
const suffix = `.${this.view.domId}`;
const content: string[] = [];
if (styles.treeIndentGuidesStroke) {
content.push(`.monaco-list${suffix}:hover .monaco-tl-indent > .indent-guide, .monaco-list${suffix}.always .monaco-tl-indent > .indent-guide { border-color: ${styles.treeIndentGuidesStroke.transparent(0.4)}; }`);
content.push(`.monaco-list${suffix} .monaco-tl-indent > .indent-guide.active { border-color: ${styles.treeIndentGuidesStroke}; }`);
}
const newStyles = content.join('\n');
if (newStyles !== this.styleElement.innerHTML) {
this.styleElement.innerHTML = newStyles;
}
this.view.style(styles);
}

69
src/vs/base/browser/ui/tree/asyncDataTree.ts
View File

@@ -28,6 +28,7 @@ interface IAsyncDataTreeNode<TInput, T> {
hasChildren: boolean;
stale: boolean;
slow: boolean;
collapsedByDefault: boolean | undefined;
}
interface IAsyncDataTreeNodeRequiredProps<TInput, T> extends Partial<IAsyncDataTreeNode<TInput, T>> {
@@ -42,7 +43,8 @@ function createAsyncDataTreeNode<TInput, T>(props: IAsyncDataTreeNodeRequiredPro
children: [],
loading: false,
stale: true,
slow: false
slow: false,
collapsedByDefault: undefined
};
}
@@ -133,7 +135,8 @@ function asTreeEvent<TInput, T>(e: ITreeEvent<IAsyncDataTreeNode<TInput, T>>): I
function asTreeMouseEvent<TInput, T>(e: ITreeMouseEvent<IAsyncDataTreeNode<TInput, T>>): ITreeMouseEvent<T> {
return {
browserEvent: e.browserEvent,
element: e.element && e.element.element as T
element: e.element && e.element.element as T,
target: e.target
};
}
@@ -224,6 +227,7 @@ function asObjectTreeOptions<TInput, T, TFilterData>(options?: IAsyncDataTreeOpt
}
},
keyboardNavigationLabelProvider: options.keyboardNavigationLabelProvider && {
...options.keyboardNavigationLabelProvider,
getKeyboardNavigationLabel(e) {
return options.keyboardNavigationLabelProvider!.getKeyboardNavigationLabel(e.element as T);
}
@@ -234,17 +238,21 @@ function asObjectTreeOptions<TInput, T, TFilterData>(options?: IAsyncDataTreeOpt
e => (options.expandOnlyOnTwistieClick as ((e: T) => boolean))(e.element as T)
)
),
ariaSetProvider: undefined
ariaProvider: undefined
};
}
function asTreeElement<TInput, T>(node: IAsyncDataTreeNode<TInput, T>, viewStateContext?: IAsyncDataTreeViewStateContext<TInput, T>): ITreeElement<IAsyncDataTreeNode<TInput, T>> {
let collapsed: boolean | undefined;
if (viewStateContext && viewStateContext.viewState.expanded && node.id) {
collapsed = viewStateContext.viewState.expanded.indexOf(node.id) === -1;
if (viewStateContext && viewStateContext.viewState.expanded && node.id && viewStateContext.viewState.expanded.indexOf(node.id) > -1) {
collapsed = false;
} else {
collapsed = node.collapsedByDefault;
}
node.collapsedByDefault = undefined;
return {
element: node,
children: node.hasChildren ? Iterator.map(Iterator.fromArray(node.children), child => asTreeElement(child, viewStateContext)) : [],
@@ -255,10 +263,11 @@ function asTreeElement<TInput, T>(node: IAsyncDataTreeNode<TInput, T>, viewState
export interface IAsyncDataTreeOptionsUpdate extends IAbstractTreeOptionsUpdate { }
export interface IAsyncDataTreeOptions<T, TFilterData = void> extends IAsyncDataTreeOptionsUpdate, IAbstractTreeOptions<T, TFilterData> {
identityProvider?: IIdentityProvider<T>;
sorter?: ITreeSorter<T>;
autoExpandSingleChildren?: boolean;
export interface IAsyncDataTreeOptions<T, TFilterData = void> extends IAsyncDataTreeOptionsUpdate, Pick<IAbstractTreeOptions<T, TFilterData>, Exclude<keyof IAbstractTreeOptions<T, TFilterData>, 'collapseByDefault'>> {
readonly collapseByDefault?: { (e: T): boolean; };
readonly identityProvider?: IIdentityProvider<T>;
readonly sorter?: ITreeSorter<T>;
readonly autoExpandSingleChildren?: boolean;
}
export interface IAsyncDataTreeViewState {
@@ -285,6 +294,7 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
private 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 subTreeRefreshPromises = new Map<IAsyncDataTreeNode<TInput, T>, Promise<void>>();
private readonly refreshPromises = new Map<IAsyncDataTreeNode<TInput, T>, CancelablePromise<T[]>>();
@@ -310,10 +320,20 @@ 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 onDidChangeCollapseState(): Event<ICollapseStateChangeEvent<IAsyncDataTreeNode<TInput, T>, TFilterData>> { return this.tree.onDidChangeCollapseState; }
get onDidUpdateOptions(): Event<IAsyncDataTreeOptionsUpdate> { return this.tree.onDidUpdateOptions; }
get filterOnType(): boolean { return this.tree.filterOnType; }
get openOnSingleClick(): boolean { return this.tree.openOnSingleClick; }
get expandOnlyOnTwistieClick(): boolean | ((e: T) => boolean) {
if (typeof this.tree.expandOnlyOnTwistieClick === 'boolean') {
return this.tree.expandOnlyOnTwistieClick;
}
const fn = this.tree.expandOnlyOnTwistieClick;
return element => fn(this.nodes.get((element === this.root.element ? null : element) as T) || null);
}
get onDidDispose(): Event<void> { return this.tree.onDidDispose; }
@@ -327,6 +347,7 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
this.identityProvider = options.identityProvider;
this.autoExpandSingleChildren = typeof options.autoExpandSingleChildren === 'undefined' ? false : options.autoExpandSingleChildren;
this.sorter = options.sorter;
this.collapseByDefault = options.collapseByDefault;
const objectTreeDelegate = new ComposedTreeDelegate<TInput | T, IAsyncDataTreeNode<TInput, T>>(delegate);
const objectTreeRenderers = renderers.map(r => new DataTreeRenderer(r, this._onDidChangeNodeSlowState.event));
@@ -762,12 +783,17 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
const childrenToRefresh: IAsyncDataTreeNode<TInput, T>[] = [];
const children = childrenElements.map<IAsyncDataTreeNode<TInput, T>>(element => {
const hasChildren = !!this.dataSource.hasChildren(element);
if (!this.identityProvider) {
return createAsyncDataTreeNode({
element,
parent: node,
hasChildren: !!this.dataSource.hasChildren(element)
});
const asyncDataTreeNode = createAsyncDataTreeNode({ element, parent: node, hasChildren });
if (hasChildren && this.collapseByDefault && !this.collapseByDefault(element)) {
asyncDataTreeNode.collapsedByDefault = false;
childrenToRefresh.push(asyncDataTreeNode);
}
return asyncDataTreeNode;
}
const id = this.identityProvider.getId(element).toString();
@@ -781,7 +807,7 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
this.nodes.set(element, asyncDataTreeNode);
asyncDataTreeNode.element = element;
asyncDataTreeNode.hasChildren = !!this.dataSource.hasChildren(element);
asyncDataTreeNode.hasChildren = hasChildren;
if (recursive) {
if (childNode.collapsed) {
@@ -789,17 +815,15 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
} else {
childrenToRefresh.push(asyncDataTreeNode);
}
} else if (hasChildren && this.collapseByDefault && !this.collapseByDefault(element)) {
asyncDataTreeNode.collapsedByDefault = false;
childrenToRefresh.push(asyncDataTreeNode);
}
return asyncDataTreeNode;
}
const childAsyncDataTreeNode = createAsyncDataTreeNode({
element,
parent: node,
id,
hasChildren: !!this.dataSource.hasChildren(element)
});
const childAsyncDataTreeNode = createAsyncDataTreeNode({ element, parent: node, id, hasChildren });
if (viewStateContext && viewStateContext.viewState.focus && viewStateContext.viewState.focus.indexOf(id) > -1) {
viewStateContext.focus.push(childAsyncDataTreeNode);
@@ -811,6 +835,9 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
if (viewStateContext && viewStateContext.viewState.expanded && viewStateContext.viewState.expanded.indexOf(id) > -1) {
childrenToRefresh.push(childAsyncDataTreeNode);
} else if (hasChildren && this.collapseByDefault && !this.collapseByDefault(element)) {
childAsyncDataTreeNode.collapsedByDefault = false;
childrenToRefresh.push(childAsyncDataTreeNode);
}
return childAsyncDataTreeNode;

7
src/vs/base/browser/ui/tree/dataTree.ts
View File

@@ -18,6 +18,7 @@ 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> {
@@ -80,6 +81,10 @@ export class DataTree<TInput, T, TFilterData = void> extends AbstractTree<T | nu
this._refresh(input, isCollapsed, onDidCreateNode);
this.setFocus(focus);
this.setSelection(selection);
if (viewState && typeof viewState.scrollTop === 'number') {
this.scrollTop = viewState.scrollTop;
}
}
updateChildren(element: TInput | T = this.input!): void {
@@ -193,6 +198,6 @@ export class DataTree<TInput, T, TFilterData = void> extends AbstractTree<T | nu
queue.push(...node.children);
}
return { focus, selection, expanded };
return { focus, selection, expanded, scrollTop: this.scrollTop };
}
}

1
src/vs/base/browser/ui/tree/media/collapsed-dark.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#E8E8E8" d="M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 139 B

1
src/vs/base/browser/ui/tree/media/collapsed-hc.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#fff" d="M6 4v8l4-4-4-4zm1 2.414l1.586 1.586-1.586 1.586v-3.172z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 148 B

1
src/vs/base/browser/ui/tree/media/collapsed.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#646465" d="M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 139 B

1
src/vs/base/browser/ui/tree/media/expanded-dark.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#E8E8E8" d="M11 10H5.344L11 4.414V10z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 118 B

1
src/vs/base/browser/ui/tree/media/expanded-hc.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#fff" d="M11 10.07h-5.656l5.656-5.656v5.656z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 128 B

1
src/vs/base/browser/ui/tree/media/expanded.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#646465" d="M11 10H5.344L11 4.414V10z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 118 B

3
src/vs/base/browser/ui/tree/media/tree-collapsed-dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69064L6.33333 3.02397L5.71461 3.64269L10.0719 7.99999Z" fill="#C5C5C5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 286 B

3
src/vs/base/browser/ui/tree/media/tree-collapsed-hc.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

3
src/vs/base/browser/ui/tree/media/tree-collapsed-light.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="#424242"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 286 B

3
src/vs/base/browser/ui/tree/media/tree-expanded-dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="#C5C5C5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

3
src/vs/base/browser/ui/tree/media/tree-expanded-hc.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

3
src/vs/base/browser/ui/tree/media/tree-expanded-light.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="#424242"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

38
src/vs/base/browser/ui/tree/media/tree.css
View File

@@ -7,6 +7,30 @@
display: flex;
height: 100%;
align-items: center;
position: relative;
}
.monaco-tl-indent {
height: 100%;
position: absolute;
top: 0;
left: 18px;
pointer-events: none;
}
.hide-arrows .monaco-tl-indent {
left: 12px;
}
.monaco-tl-indent > .indent-guide {
display: inline-block;
box-sizing: border-box;
height: 100%;
border-left: 1px solid transparent;
}
.monaco-tl-indent > .indent-guide {
transition: border-color 0.1s linear;
}
.monaco-tl-twistie,
@@ -31,28 +55,28 @@
background-size: 16px;
background-position: 3px 50%;
background-repeat: no-repeat;
background-image: url("expanded.svg");
background-image: url("tree-expanded-light.svg");
}
.monaco-tl-twistie.collapsible.collapsed:not(.loading) {
display: inline-block;
background-image: url("collapsed.svg");
background-image: url("tree-collapsed-light.svg");
}
.vs-dark .monaco-tl-twistie.collapsible:not(.loading) {
background-image: url("expanded-dark.svg");
background-image: url("tree-expanded-dark.svg");
}
.vs-dark .monaco-tl-twistie.collapsible.collapsed:not(.loading) {
background-image: url("collapsed-dark.svg");
background-image: url("tree-collapsed-dark.svg");
}
.hc-black .monaco-tl-twistie.collapsible:not(.loading) {
background-image: url("expanded-hc.svg");
background-image: url("tree-expanded-hc.svg");
}
.hc-black .monaco-tl-twistie.collapsible.collapsed:not(.loading) {
background-image: url("collapsed-hc.svg");
background-image: url("tree-collapsed-hc.svg");
}
.monaco-tl-twistie.loading {
@@ -66,4 +90,4 @@
.hc-black .monaco-tl-twistie.loading {
background-image: url("loading-hc.svg");
}
}

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