Merge from vscode 073a24de05773f2261f89172987002dc0ae2f1cd (#9711)

This commit is contained in:
Anthony Dresser
2020-03-24 00:24:15 -07:00
committed by GitHub
parent 29741d684e
commit 89ef1b0c2e
226 changed files with 6161 additions and 3288 deletions

View File

@@ -65,7 +65,7 @@ export interface IIdentityProvider<T> {
export enum ListAriaRootRole {
/** default list structure role */
LIST = 'listbox',
LIST = 'list',
/** default tree structure role */
TREE = 'tree',

View File

@@ -182,17 +182,19 @@ class Trait<T> implements ISpliceable<boolean>, IDisposable {
class SelectionTrait<T> extends Trait<T> {
constructor() {
constructor(private setAriaSelected: boolean) {
super('selected');
}
renderIndex(index: number, container: HTMLElement): void {
super.renderIndex(index, container);
if (this.contains(index)) {
container.setAttribute('aria-selected', 'true');
} else {
container.setAttribute('aria-selected', 'false');
if (this.setAriaSelected) {
if (this.contains(index)) {
container.setAttribute('aria-selected', 'true');
} else {
container.setAttribute('aria-selected', 'false');
}
}
}
}
@@ -1198,7 +1200,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
renderers: IListRenderer<any /* TODO@joao */, any>[],
private _options: IListOptions<T> = DefaultOptions
) {
this.selection = new SelectionTrait();
this.selection = new SelectionTrait(this._options.ariaRole !== 'listbox');
this.focus = new Trait('focused');
mixin(_options, defaultStyles, false);
@@ -1501,9 +1503,13 @@ export class List<T> implements ISpliceable<T>, IDisposable {
}
focusFirst(browserEvent?: UIEvent, filter?: (element: T) => boolean): void {
this.focusNth(0, browserEvent, filter);
}
focusNth(n: number, browserEvent?: UIEvent, filter?: (element: T) => boolean): void {
if (this.length === 0) { return; }
const index = this.findNextIndex(0, false, filter);
const index = this.findNextIndex(n, false, filter);
if (index > -1) {
this.setFocus([index], browserEvent);

View File

@@ -357,7 +357,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.option-disabled:hover { background-color: ${this.styles.selectBackground} !important; }`);
}
// Match quickOpen outline styles - ignore for disabled options
// Match quick input outline styles - ignore for disabled options
if (this.styles.listFocusOutline) {
content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.focused { outline: 1.6px dotted ${this.styles.listFocusOutline} !important; outline-offset: -1.6px !important; }`);
}

View File

@@ -9,7 +9,7 @@ import { Event, Emitter } from 'vs/base/common/event';
import { domEvent } from 'vs/base/browser/event';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { $, append, addClass, removeClass, toggleClass, trackFocus, EventHelper } from 'vs/base/browser/dom';
import { $, append, addClass, removeClass, toggleClass, trackFocus, EventHelper, clearNode } from 'vs/base/browser/dom';
import { firstIndex } from 'vs/base/common/arrays';
import { Color, RGBA } from 'vs/base/common/color';
import { SplitView, IView } from './splitview';
@@ -52,7 +52,6 @@ export abstract class Pane extends Disposable implements IView {
protected _expanded: boolean;
protected _orientation: Orientation;
protected _preventCollapse?: boolean;
private expandedSize: number | undefined = undefined;
private _headerVisible = true;
@@ -106,7 +105,7 @@ export abstract class Pane extends Disposable implements IView {
get minimumSize(): number {
const headerSize = this.headerSize;
const expanded = !this.headerVisible || this.isExpanded();
const minimumBodySize = expanded ? this._minimumBodySize : 0;
const minimumBodySize = expanded ? this._minimumBodySize : this._orientation === Orientation.HORIZONTAL ? 50 : 0;
return headerSize + minimumBodySize;
}
@@ -114,7 +113,7 @@ export abstract class Pane extends Disposable implements IView {
get maximumSize(): number {
const headerSize = this.headerSize;
const expanded = !this.headerVisible || this.isExpanded();
const maximumBodySize = expanded ? this._maximumBodySize : 0;
const maximumBodySize = expanded ? this._maximumBodySize : this._orientation === Orientation.HORIZONTAL ? 50 : 0;
return headerSize + maximumBodySize;
}
@@ -174,6 +173,18 @@ export abstract class Pane extends Disposable implements IView {
this._onDidChange.fire(undefined);
}
get orientation(): Orientation {
return this._orientation;
}
set orientation(orientation: Orientation) {
if (this._orientation === orientation) {
return;
}
this._orientation = orientation;
}
render(): void {
this.header = $('.pane-header');
append(this.element, this.header);
@@ -190,22 +201,20 @@ export abstract class Pane extends Disposable implements IView {
this.updateHeader();
if (!this._preventCollapse) {
const onHeaderKeyDown = Event.chain(domEvent(this.header, 'keydown'))
.map(e => new StandardKeyboardEvent(e));
const onHeaderKeyDown = Event.chain(domEvent(this.header, 'keydown'))
.map(e => new StandardKeyboardEvent(e));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space)
.event(() => this.setExpanded(!this.isExpanded()), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space)
.event(() => this.setExpanded(!this.isExpanded()), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.LeftArrow)
.event(() => this.setExpanded(false), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.LeftArrow)
.event(() => this.setExpanded(false), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.RightArrow)
.event(() => this.setExpanded(true), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.RightArrow)
.event(() => this.setExpanded(true), null));
this._register(domEvent(this.header, 'click')
(() => this.setExpanded(!this.isExpanded()), null));
}
this._register(domEvent(this.header, 'click')
(() => this.setExpanded(!this.isExpanded()), null));
this.body = append(this.element, $('.pane-body'));
this.renderBody(this.body);
@@ -402,13 +411,14 @@ export class PaneView extends Disposable {
private el: HTMLElement;
private paneItems: IPaneItem[] = [];
private orthogonalSize: number = 0;
private size: number = 0;
private splitview: SplitView;
private orientation: Orientation;
private animationTimer: number | undefined = undefined;
private _onDidDrop = this._register(new Emitter<{ from: Pane, to: Pane }>());
readonly onDidDrop: Event<{ from: Pane, to: Pane }> = this._onDidDrop.event;
orientation: Orientation;
readonly onDidSashChange: Event<number>;
constructor(container: HTMLElement, options: IPaneViewOptions = {}) {
@@ -427,6 +437,7 @@ export class PaneView extends Disposable {
const paneItem = { pane: pane, disposable: disposables };
this.paneItems.splice(index, 0, paneItem);
pane.orientation = this.orientation;
pane.orthogonalSize = this.orthogonalSize;
this.splitview.addView(pane, size, index);
@@ -485,12 +496,39 @@ export class PaneView extends Disposable {
layout(height: number, width: number): void {
this.orthogonalSize = this.orientation === Orientation.VERTICAL ? width : height;
this.size = this.orientation === Orientation.HORIZONTAL ? width : height;
for (const paneItem of this.paneItems) {
paneItem.pane.orthogonalSize = this.orthogonalSize;
}
this.splitview.layout(this.orientation === Orientation.HORIZONTAL ? width : height);
this.splitview.layout(this.size);
}
flipOrientation(height: number, width: number): void {
this.orientation = this.orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL;
const paneSizes = this.paneItems.map(pane => this.getPaneSize(pane.pane));
this.splitview.dispose();
clearNode(this.el);
this.splitview = this._register(new SplitView(this.el, { orientation: this.orientation }));
const newOrthogonalSize = this.orientation === Orientation.VERTICAL ? width : height;
const newSize = this.orientation === Orientation.HORIZONTAL ? width : height;
this.paneItems.forEach((pane, index) => {
pane.pane.orthogonalSize = newOrthogonalSize;
pane.pane.orientation = this.orientation;
const viewSize = this.size === 0 ? 0 : (newSize * paneSizes[index]) / this.size;
this.splitview.addView(pane.pane, viewSize, index);
});
this.size = newSize;
this.orthogonalSize = newOrthogonalSize;
this.splitview.layout(this.size);
}
private setupAnimation(): void {