awa
This commit is contained in:
@@ -0,0 +1,374 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { isFirefox } from '../../browser.js';
|
||||
import { DataTransfers } from '../../dnd.js';
|
||||
import { addDisposableListener, EventHelper, EventType } from '../../dom.js';
|
||||
import { EventType as TouchEventType, Gesture } from '../../touch.js';
|
||||
import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
|
||||
import { SelectBox } from '../selectBox/selectBox.js';
|
||||
import { Action, ActionRunner, Separator } from '../../../common/actions.js';
|
||||
import { Disposable } from '../../../common/lifecycle.js';
|
||||
import * as platform from '../../../common/platform.js';
|
||||
import * as types from '../../../common/types.js';
|
||||
import './actionbar.css';
|
||||
import * as nls from '../../../../nls.js';
|
||||
import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
|
||||
export class BaseActionViewItem extends Disposable {
|
||||
get action() {
|
||||
return this._action;
|
||||
}
|
||||
constructor(context, action, options = {}) {
|
||||
super();
|
||||
this.options = options;
|
||||
this._context = context || this;
|
||||
this._action = action;
|
||||
if (action instanceof Action) {
|
||||
this._register(action.onDidChange(event => {
|
||||
if (!this.element) {
|
||||
// we have not been rendered yet, so there
|
||||
// is no point in updating the UI
|
||||
return;
|
||||
}
|
||||
this.handleActionChangeEvent(event);
|
||||
}));
|
||||
}
|
||||
}
|
||||
handleActionChangeEvent(event) {
|
||||
if (event.enabled !== undefined) {
|
||||
this.updateEnabled();
|
||||
}
|
||||
if (event.checked !== undefined) {
|
||||
this.updateChecked();
|
||||
}
|
||||
if (event.class !== undefined) {
|
||||
this.updateClass();
|
||||
}
|
||||
if (event.label !== undefined) {
|
||||
this.updateLabel();
|
||||
this.updateTooltip();
|
||||
}
|
||||
if (event.tooltip !== undefined) {
|
||||
this.updateTooltip();
|
||||
}
|
||||
}
|
||||
get actionRunner() {
|
||||
if (!this._actionRunner) {
|
||||
this._actionRunner = this._register(new ActionRunner());
|
||||
}
|
||||
return this._actionRunner;
|
||||
}
|
||||
set actionRunner(actionRunner) {
|
||||
this._actionRunner = actionRunner;
|
||||
}
|
||||
isEnabled() {
|
||||
return this._action.enabled;
|
||||
}
|
||||
setActionContext(newContext) {
|
||||
this._context = newContext;
|
||||
}
|
||||
render(container) {
|
||||
const element = this.element = container;
|
||||
this._register(Gesture.addTarget(container));
|
||||
const enableDragging = this.options && this.options.draggable;
|
||||
if (enableDragging) {
|
||||
container.draggable = true;
|
||||
if (isFirefox) {
|
||||
// Firefox: requires to set a text data transfer to get going
|
||||
this._register(addDisposableListener(container, EventType.DRAG_START, e => e.dataTransfer?.setData(DataTransfers.TEXT, this._action.label)));
|
||||
}
|
||||
}
|
||||
this._register(addDisposableListener(element, TouchEventType.Tap, e => this.onClick(e, true))); // Preserve focus on tap #125470
|
||||
this._register(addDisposableListener(element, EventType.MOUSE_DOWN, e => {
|
||||
if (!enableDragging) {
|
||||
EventHelper.stop(e, true); // do not run when dragging is on because that would disable it
|
||||
}
|
||||
if (this._action.enabled && e.button === 0) {
|
||||
element.classList.add('active');
|
||||
}
|
||||
}));
|
||||
if (platform.isMacintosh) {
|
||||
// macOS: allow to trigger the button when holding Ctrl+key and pressing the
|
||||
// main mouse button. This is for scenarios where e.g. some interaction forces
|
||||
// the Ctrl+key to be pressed and hold but the user still wants to interact
|
||||
// with the actions (for example quick access in quick navigation mode).
|
||||
this._register(addDisposableListener(element, EventType.CONTEXT_MENU, e => {
|
||||
if (e.button === 0 && e.ctrlKey === true) {
|
||||
this.onClick(e);
|
||||
}
|
||||
}));
|
||||
}
|
||||
this._register(addDisposableListener(element, EventType.CLICK, e => {
|
||||
EventHelper.stop(e, true);
|
||||
// menus do not use the click event
|
||||
if (!(this.options && this.options.isMenu)) {
|
||||
this.onClick(e);
|
||||
}
|
||||
}));
|
||||
this._register(addDisposableListener(element, EventType.DBLCLICK, e => {
|
||||
EventHelper.stop(e, true);
|
||||
}));
|
||||
[EventType.MOUSE_UP, EventType.MOUSE_OUT].forEach(event => {
|
||||
this._register(addDisposableListener(element, event, e => {
|
||||
EventHelper.stop(e);
|
||||
element.classList.remove('active');
|
||||
}));
|
||||
});
|
||||
}
|
||||
onClick(event, preserveFocus = false) {
|
||||
EventHelper.stop(event, true);
|
||||
const context = types.isUndefinedOrNull(this._context) ? this.options?.useEventAsContext ? event : { preserveFocus } : this._context;
|
||||
this.actionRunner.run(this._action, context);
|
||||
}
|
||||
// Only set the tabIndex on the element once it is about to get focused
|
||||
// That way this element wont be a tab stop when it is not needed #106441
|
||||
focus() {
|
||||
if (this.element) {
|
||||
this.element.tabIndex = 0;
|
||||
this.element.focus();
|
||||
this.element.classList.add('focused');
|
||||
}
|
||||
}
|
||||
blur() {
|
||||
if (this.element) {
|
||||
this.element.blur();
|
||||
this.element.tabIndex = -1;
|
||||
this.element.classList.remove('focused');
|
||||
}
|
||||
}
|
||||
setFocusable(focusable) {
|
||||
if (this.element) {
|
||||
this.element.tabIndex = focusable ? 0 : -1;
|
||||
}
|
||||
}
|
||||
get trapsArrowNavigation() {
|
||||
return false;
|
||||
}
|
||||
updateEnabled() {
|
||||
// implement in subclass
|
||||
}
|
||||
updateLabel() {
|
||||
// implement in subclass
|
||||
}
|
||||
getClass() {
|
||||
return this.action.class;
|
||||
}
|
||||
getTooltip() {
|
||||
return this.action.tooltip;
|
||||
}
|
||||
getHoverContents() {
|
||||
return this.getTooltip();
|
||||
}
|
||||
updateTooltip() {
|
||||
if (!this.element) {
|
||||
return;
|
||||
}
|
||||
const title = this.getHoverContents() ?? '';
|
||||
this.updateAriaLabel();
|
||||
if (!this.customHover && title !== '') {
|
||||
const hoverDelegate = this.options.hoverDelegate ?? getDefaultHoverDelegate('element');
|
||||
this.customHover = this._store.add(getBaseLayerHoverDelegate().setupManagedHover(hoverDelegate, this.element, title));
|
||||
}
|
||||
else if (this.customHover) {
|
||||
this.customHover.update(title);
|
||||
}
|
||||
}
|
||||
updateAriaLabel() {
|
||||
if (this.element) {
|
||||
const title = this.getTooltip() ?? '';
|
||||
this.element.setAttribute('aria-label', title);
|
||||
}
|
||||
}
|
||||
updateClass() {
|
||||
// implement in subclass
|
||||
}
|
||||
updateChecked() {
|
||||
// implement in subclass
|
||||
}
|
||||
dispose() {
|
||||
if (this.element) {
|
||||
this.element.remove();
|
||||
this.element = undefined;
|
||||
}
|
||||
this._context = undefined;
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
export class ActionViewItem extends BaseActionViewItem {
|
||||
constructor(context, action, options) {
|
||||
options = {
|
||||
...options,
|
||||
icon: options.icon !== undefined ? options.icon : false,
|
||||
label: options.label !== undefined ? options.label : true,
|
||||
};
|
||||
super(context, action, options);
|
||||
this.options = options;
|
||||
this.cssClass = '';
|
||||
}
|
||||
render(container) {
|
||||
super.render(container);
|
||||
types.assertType(this.element);
|
||||
const label = document.createElement('a');
|
||||
label.classList.add('action-label');
|
||||
label.setAttribute('role', this.getDefaultAriaRole());
|
||||
this.label = label;
|
||||
this.element.appendChild(label);
|
||||
if (this.options.label && this.options.keybinding && !this.options.keybindingNotRenderedWithLabel) {
|
||||
const kbLabel = document.createElement('span');
|
||||
kbLabel.classList.add('keybinding');
|
||||
kbLabel.textContent = this.options.keybinding;
|
||||
this.element.appendChild(kbLabel);
|
||||
}
|
||||
this.updateClass();
|
||||
this.updateLabel();
|
||||
this.updateTooltip();
|
||||
this.updateEnabled();
|
||||
this.updateChecked();
|
||||
}
|
||||
getDefaultAriaRole() {
|
||||
if (this._action.id === Separator.ID) {
|
||||
return 'presentation'; // A separator is a presentation item
|
||||
}
|
||||
else {
|
||||
if (this.options.isMenu) {
|
||||
return 'menuitem';
|
||||
}
|
||||
else if (this.options.isTabList) {
|
||||
return 'tab';
|
||||
}
|
||||
else {
|
||||
return 'button';
|
||||
}
|
||||
}
|
||||
}
|
||||
// Only set the tabIndex on the element once it is about to get focused
|
||||
// That way this element wont be a tab stop when it is not needed #106441
|
||||
focus() {
|
||||
if (this.label) {
|
||||
this.label.tabIndex = 0;
|
||||
this.label.focus();
|
||||
}
|
||||
}
|
||||
blur() {
|
||||
if (this.label) {
|
||||
this.label.tabIndex = -1;
|
||||
}
|
||||
}
|
||||
setFocusable(focusable) {
|
||||
if (this.label) {
|
||||
this.label.tabIndex = focusable ? 0 : -1;
|
||||
}
|
||||
}
|
||||
updateLabel() {
|
||||
if (this.options.label && this.label) {
|
||||
this.label.textContent = this.action.label;
|
||||
}
|
||||
}
|
||||
getTooltip() {
|
||||
let title = null;
|
||||
if (this.action.tooltip) {
|
||||
title = this.action.tooltip;
|
||||
}
|
||||
else if (this.action.label) {
|
||||
title = this.action.label;
|
||||
if (this.options.keybinding) {
|
||||
title = nls.localize(0, "{0} ({1})", title, this.options.keybinding);
|
||||
}
|
||||
}
|
||||
return title ?? undefined;
|
||||
}
|
||||
updateClass() {
|
||||
if (this.cssClass && this.label) {
|
||||
this.label.classList.remove(...this.cssClass.split(' '));
|
||||
}
|
||||
if (this.options.icon) {
|
||||
this.cssClass = this.getClass();
|
||||
if (this.label) {
|
||||
this.label.classList.add('codicon');
|
||||
if (this.cssClass) {
|
||||
this.label.classList.add(...this.cssClass.split(' '));
|
||||
}
|
||||
}
|
||||
this.updateEnabled();
|
||||
}
|
||||
else {
|
||||
this.label?.classList.remove('codicon');
|
||||
}
|
||||
}
|
||||
updateEnabled() {
|
||||
if (this.action.enabled) {
|
||||
if (this.label) {
|
||||
this.label.removeAttribute('aria-disabled');
|
||||
this.label.classList.remove('disabled');
|
||||
}
|
||||
this.element?.classList.remove('disabled');
|
||||
}
|
||||
else {
|
||||
if (this.label) {
|
||||
this.label.setAttribute('aria-disabled', 'true');
|
||||
this.label.classList.add('disabled');
|
||||
}
|
||||
this.element?.classList.add('disabled');
|
||||
}
|
||||
}
|
||||
updateAriaLabel() {
|
||||
if (this.label) {
|
||||
const title = this.getTooltip() ?? '';
|
||||
this.label.setAttribute('aria-label', title);
|
||||
}
|
||||
}
|
||||
updateChecked() {
|
||||
if (this.label) {
|
||||
if (this.action.checked !== undefined) {
|
||||
this.label.classList.toggle('checked', this.action.checked);
|
||||
if (this.options.isTabList) {
|
||||
this.label.setAttribute('aria-selected', this.action.checked ? 'true' : 'false');
|
||||
}
|
||||
else {
|
||||
this.label.setAttribute('aria-checked', this.action.checked ? 'true' : 'false');
|
||||
this.label.setAttribute('role', 'checkbox');
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.label.classList.remove('checked');
|
||||
this.label.removeAttribute(this.options.isTabList ? 'aria-selected' : 'aria-checked');
|
||||
this.label.setAttribute('role', this.getDefaultAriaRole());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export class SelectActionViewItem extends BaseActionViewItem {
|
||||
constructor(ctx, action, options, selected, contextViewProvider, styles, selectBoxOptions) {
|
||||
super(ctx, action);
|
||||
this.selectBox = new SelectBox(options, selected, contextViewProvider, styles, selectBoxOptions);
|
||||
this.selectBox.setFocusable(false);
|
||||
this._register(this.selectBox);
|
||||
this.registerListeners();
|
||||
}
|
||||
select(index) {
|
||||
this.selectBox.select(index);
|
||||
}
|
||||
registerListeners() {
|
||||
this._register(this.selectBox.onDidSelect(e => this.runAction(e.selected, e.index)));
|
||||
}
|
||||
runAction(option, index) {
|
||||
this.actionRunner.run(this._action, this.getActionContext(option, index));
|
||||
}
|
||||
getActionContext(option, index) {
|
||||
return option;
|
||||
}
|
||||
setFocusable(focusable) {
|
||||
this.selectBox.setFocusable(focusable);
|
||||
}
|
||||
focus() {
|
||||
this.selectBox?.focus();
|
||||
}
|
||||
blur() {
|
||||
this.selectBox?.blur();
|
||||
}
|
||||
render(container) {
|
||||
this.selectBox.render(container);
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=actionViewItems.js.map
|
||||
File diff suppressed because one or more lines are too long
124
_internal/editor/esm/vs/base/browser/ui/actionbar/actionbar.css
Normal file
124
_internal/editor/esm/vs/base/browser/ui/actionbar/actionbar.css
Normal file
@@ -0,0 +1,124 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-action-bar {
|
||||
white-space: nowrap;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.monaco-action-bar .actions-container {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.monaco-action-bar.vertical .actions-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.monaco-action-bar .action-item {
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
position: relative; /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */
|
||||
}
|
||||
|
||||
.monaco-action-bar .action-item.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.monaco-action-bar .action-item .icon,
|
||||
.monaco-action-bar .action-item .codicon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.monaco-action-bar .action-item .codicon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.monaco-action-bar .action-label {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.monaco-action-bar .action-item.disabled .action-label:not(.icon) ,
|
||||
.monaco-action-bar .action-item.disabled .action-label:not(.icon)::before,
|
||||
.monaco-action-bar .action-item.disabled .action-label:not(.icon):hover {
|
||||
color: var(--vscode-disabledForeground);
|
||||
}
|
||||
|
||||
/* Unable to change color of SVGs, hence opacity is used */
|
||||
.monaco-action-bar .action-item.disabled .action-label.icon ,
|
||||
.monaco-action-bar .action-item.disabled .action-label.icon::before,
|
||||
.monaco-action-bar .action-item.disabled .action-label.icon:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Vertical actions */
|
||||
|
||||
.monaco-action-bar.vertical {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.monaco-action-bar.vertical .action-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.monaco-action-bar.vertical .action-label.separator {
|
||||
display: block;
|
||||
border-bottom: 1px solid var(--vscode-disabledForeground);
|
||||
padding-top: 1px;
|
||||
margin-left: .8em;
|
||||
margin-right: .8em;
|
||||
}
|
||||
|
||||
.monaco-action-bar .action-item .action-label.separator {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
margin: 5px 4px !important;
|
||||
cursor: default;
|
||||
min-width: 1px;
|
||||
padding: 0;
|
||||
background-color: var(--vscode-disabledForeground);
|
||||
}
|
||||
|
||||
.secondary-actions .monaco-action-bar .action-label {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
/* Action Items */
|
||||
.monaco-action-bar .action-item.select-container {
|
||||
overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */
|
||||
flex: 1;
|
||||
max-width: 170px;
|
||||
min-width: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.monaco-action-bar .action-item.action-dropdown-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div {
|
||||
width: 1px;
|
||||
}
|
||||
443
_internal/editor/esm/vs/base/browser/ui/actionbar/actionbar.js
Normal file
443
_internal/editor/esm/vs/base/browser/ui/actionbar/actionbar.js
Normal file
@@ -0,0 +1,443 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import * as DOM from '../../dom.js';
|
||||
import { StandardKeyboardEvent } from '../../keyboardEvent.js';
|
||||
import { ActionViewItem, BaseActionViewItem } from './actionViewItems.js';
|
||||
import { createInstantHoverDelegate } from '../hover/hoverDelegateFactory.js';
|
||||
import { ActionRunner, Separator } from '../../../common/actions.js';
|
||||
import { Emitter } from '../../../common/event.js';
|
||||
import { Disposable, DisposableMap, DisposableStore, dispose } from '../../../common/lifecycle.js';
|
||||
import * as types from '../../../common/types.js';
|
||||
import './actionbar.css';
|
||||
export class ActionBar extends Disposable {
|
||||
get onDidBlur() { return this._onDidBlur.event; }
|
||||
get onDidCancel() { return this._onDidCancel.event; }
|
||||
get onDidRun() { return this._onDidRun.event; }
|
||||
get onWillRun() { return this._onWillRun.event; }
|
||||
constructor(container, options = {}) {
|
||||
super();
|
||||
this._actionRunnerDisposables = this._register(new DisposableStore());
|
||||
this.viewItemDisposables = this._register(new DisposableMap());
|
||||
// Trigger Key Tracking
|
||||
this.triggerKeyDown = false;
|
||||
this.focusable = true;
|
||||
this._onDidBlur = this._register(new Emitter());
|
||||
this._onDidCancel = this._register(new Emitter({ onWillAddFirstListener: () => this.cancelHasListener = true }));
|
||||
this.cancelHasListener = false;
|
||||
this._onDidRun = this._register(new Emitter());
|
||||
this._onWillRun = this._register(new Emitter());
|
||||
this.options = options;
|
||||
this._context = options.context ?? null;
|
||||
this._orientation = this.options.orientation ?? 0 /* ActionsOrientation.HORIZONTAL */;
|
||||
this._triggerKeys = {
|
||||
keyDown: this.options.triggerKeys?.keyDown ?? false,
|
||||
keys: this.options.triggerKeys?.keys ?? [3 /* KeyCode.Enter */, 10 /* KeyCode.Space */]
|
||||
};
|
||||
this._hoverDelegate = options.hoverDelegate ?? this._register(createInstantHoverDelegate());
|
||||
if (this.options.actionRunner) {
|
||||
this._actionRunner = this.options.actionRunner;
|
||||
}
|
||||
else {
|
||||
this._actionRunner = new ActionRunner();
|
||||
this._actionRunnerDisposables.add(this._actionRunner);
|
||||
}
|
||||
this._actionRunnerDisposables.add(this._actionRunner.onDidRun(e => this._onDidRun.fire(e)));
|
||||
this._actionRunnerDisposables.add(this._actionRunner.onWillRun(e => this._onWillRun.fire(e)));
|
||||
this.viewItems = [];
|
||||
this.focusedItem = undefined;
|
||||
this.domNode = document.createElement('div');
|
||||
this.domNode.className = 'monaco-action-bar';
|
||||
let previousKeys;
|
||||
let nextKeys;
|
||||
switch (this._orientation) {
|
||||
case 0 /* ActionsOrientation.HORIZONTAL */:
|
||||
previousKeys = [15 /* KeyCode.LeftArrow */];
|
||||
nextKeys = [17 /* KeyCode.RightArrow */];
|
||||
break;
|
||||
case 1 /* ActionsOrientation.VERTICAL */:
|
||||
previousKeys = [16 /* KeyCode.UpArrow */];
|
||||
nextKeys = [18 /* KeyCode.DownArrow */];
|
||||
this.domNode.className += ' vertical';
|
||||
break;
|
||||
}
|
||||
this._register(DOM.addDisposableListener(this.domNode, DOM.EventType.KEY_DOWN, e => {
|
||||
const event = new StandardKeyboardEvent(e);
|
||||
let eventHandled = true;
|
||||
const focusedItem = typeof this.focusedItem === 'number' ? this.viewItems[this.focusedItem] : undefined;
|
||||
if (previousKeys && (event.equals(previousKeys[0]) || event.equals(previousKeys[1]))) {
|
||||
eventHandled = this.focusPrevious();
|
||||
}
|
||||
else if (nextKeys && (event.equals(nextKeys[0]) || event.equals(nextKeys[1]))) {
|
||||
eventHandled = this.focusNext();
|
||||
}
|
||||
else if (event.equals(9 /* KeyCode.Escape */) && this.cancelHasListener) {
|
||||
this._onDidCancel.fire();
|
||||
}
|
||||
else if (event.equals(14 /* KeyCode.Home */)) {
|
||||
eventHandled = this.focusFirst();
|
||||
}
|
||||
else if (event.equals(13 /* KeyCode.End */)) {
|
||||
eventHandled = this.focusLast();
|
||||
}
|
||||
else if (event.equals(2 /* KeyCode.Tab */) && focusedItem instanceof BaseActionViewItem && focusedItem.trapsArrowNavigation) {
|
||||
// Tab, so forcibly focus next #219199
|
||||
eventHandled = this.focusNext(undefined, true);
|
||||
}
|
||||
else if (this.isTriggerKeyEvent(event)) {
|
||||
// Staying out of the else branch even if not triggered
|
||||
if (this._triggerKeys.keyDown) {
|
||||
this.doTrigger(event);
|
||||
}
|
||||
else {
|
||||
this.triggerKeyDown = true;
|
||||
}
|
||||
}
|
||||
else {
|
||||
eventHandled = false;
|
||||
}
|
||||
if (eventHandled) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
}));
|
||||
this._register(DOM.addDisposableListener(this.domNode, DOM.EventType.KEY_UP, e => {
|
||||
const event = new StandardKeyboardEvent(e);
|
||||
// Run action on Enter/Space
|
||||
if (this.isTriggerKeyEvent(event)) {
|
||||
if (!this._triggerKeys.keyDown && this.triggerKeyDown) {
|
||||
this.triggerKeyDown = false;
|
||||
this.doTrigger(event);
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
// Recompute focused item
|
||||
else if (event.equals(2 /* KeyCode.Tab */) || event.equals(1024 /* KeyMod.Shift */ | 2 /* KeyCode.Tab */) || event.equals(16 /* KeyCode.UpArrow */) || event.equals(18 /* KeyCode.DownArrow */) || event.equals(15 /* KeyCode.LeftArrow */) || event.equals(17 /* KeyCode.RightArrow */)) {
|
||||
this.updateFocusedItem();
|
||||
}
|
||||
}));
|
||||
this.focusTracker = this._register(DOM.trackFocus(this.domNode));
|
||||
this._register(this.focusTracker.onDidBlur(() => {
|
||||
if (DOM.getActiveElement() === this.domNode || !DOM.isAncestor(DOM.getActiveElement(), this.domNode)) {
|
||||
this._onDidBlur.fire();
|
||||
this.previouslyFocusedItem = this.focusedItem;
|
||||
this.focusedItem = undefined;
|
||||
this.triggerKeyDown = false;
|
||||
}
|
||||
}));
|
||||
this._register(this.focusTracker.onDidFocus(() => this.updateFocusedItem()));
|
||||
this.actionsList = document.createElement('ul');
|
||||
this.actionsList.className = 'actions-container';
|
||||
if (this.options.highlightToggledItems) {
|
||||
this.actionsList.classList.add('highlight-toggled');
|
||||
}
|
||||
this.actionsList.setAttribute('role', this.options.ariaRole || 'toolbar');
|
||||
if (this.options.ariaLabel) {
|
||||
this.actionsList.setAttribute('aria-label', this.options.ariaLabel);
|
||||
}
|
||||
this.domNode.appendChild(this.actionsList);
|
||||
container.appendChild(this.domNode);
|
||||
}
|
||||
refreshRole() {
|
||||
if (this.length() >= 1) {
|
||||
this.actionsList.setAttribute('role', this.options.ariaRole || 'toolbar');
|
||||
}
|
||||
else {
|
||||
this.actionsList.setAttribute('role', 'presentation');
|
||||
}
|
||||
}
|
||||
// Some action bars should not be focusable at times
|
||||
// When an action bar is not focusable make sure to make all the elements inside it not focusable
|
||||
// When an action bar is focusable again, make sure the first item can be focused
|
||||
setFocusable(focusable) {
|
||||
this.focusable = focusable;
|
||||
if (this.focusable) {
|
||||
const firstEnabled = this.viewItems.find(vi => vi instanceof BaseActionViewItem && vi.isEnabled());
|
||||
if (firstEnabled instanceof BaseActionViewItem) {
|
||||
firstEnabled.setFocusable(true);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.viewItems.forEach(vi => {
|
||||
if (vi instanceof BaseActionViewItem) {
|
||||
vi.setFocusable(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
isTriggerKeyEvent(event) {
|
||||
let ret = false;
|
||||
this._triggerKeys.keys.forEach(keyCode => {
|
||||
ret = ret || event.equals(keyCode);
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
updateFocusedItem() {
|
||||
for (let i = 0; i < this.actionsList.children.length; i++) {
|
||||
const elem = this.actionsList.children[i];
|
||||
if (DOM.isAncestor(DOM.getActiveElement(), elem)) {
|
||||
this.focusedItem = i;
|
||||
this.viewItems[this.focusedItem]?.showHover?.();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
get context() {
|
||||
return this._context;
|
||||
}
|
||||
set context(context) {
|
||||
this._context = context;
|
||||
this.viewItems.forEach(i => i.setActionContext(context));
|
||||
}
|
||||
get actionRunner() {
|
||||
return this._actionRunner;
|
||||
}
|
||||
set actionRunner(actionRunner) {
|
||||
this._actionRunner = actionRunner;
|
||||
// when setting a new `IActionRunner` make sure to dispose old listeners and
|
||||
// start to forward events from the new listener
|
||||
this._actionRunnerDisposables.clear();
|
||||
this._actionRunnerDisposables.add(this._actionRunner.onDidRun(e => this._onDidRun.fire(e)));
|
||||
this._actionRunnerDisposables.add(this._actionRunner.onWillRun(e => this._onWillRun.fire(e)));
|
||||
this.viewItems.forEach(item => item.actionRunner = actionRunner);
|
||||
}
|
||||
getContainer() {
|
||||
return this.domNode;
|
||||
}
|
||||
getAction(indexOrElement) {
|
||||
// by index
|
||||
if (typeof indexOrElement === 'number') {
|
||||
return this.viewItems[indexOrElement]?.action;
|
||||
}
|
||||
// by element
|
||||
if (DOM.isHTMLElement(indexOrElement)) {
|
||||
while (indexOrElement.parentElement !== this.actionsList) {
|
||||
if (!indexOrElement.parentElement) {
|
||||
return undefined;
|
||||
}
|
||||
indexOrElement = indexOrElement.parentElement;
|
||||
}
|
||||
for (let i = 0; i < this.actionsList.childNodes.length; i++) {
|
||||
if (this.actionsList.childNodes[i] === indexOrElement) {
|
||||
return this.viewItems[i].action;
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
push(arg, options = {}) {
|
||||
const actions = Array.isArray(arg) ? arg : [arg];
|
||||
let index = types.isNumber(options.index) ? options.index : null;
|
||||
actions.forEach((action) => {
|
||||
const actionViewItemElement = document.createElement('li');
|
||||
actionViewItemElement.className = 'action-item';
|
||||
actionViewItemElement.setAttribute('role', 'presentation');
|
||||
let item;
|
||||
const viewItemOptions = { hoverDelegate: this._hoverDelegate, ...options, isTabList: this.options.ariaRole === 'tablist' };
|
||||
if (this.options.actionViewItemProvider) {
|
||||
item = this.options.actionViewItemProvider(action, viewItemOptions);
|
||||
}
|
||||
if (!item) {
|
||||
item = new ActionViewItem(this.context, action, viewItemOptions);
|
||||
}
|
||||
// Prevent native context menu on actions
|
||||
if (!this.options.allowContextMenu) {
|
||||
this.viewItemDisposables.set(item, DOM.addDisposableListener(actionViewItemElement, DOM.EventType.CONTEXT_MENU, (e) => {
|
||||
DOM.EventHelper.stop(e, true);
|
||||
}));
|
||||
}
|
||||
item.actionRunner = this._actionRunner;
|
||||
item.setActionContext(this.context);
|
||||
item.render(actionViewItemElement);
|
||||
if (index === null || index < 0 || index >= this.actionsList.children.length) {
|
||||
this.actionsList.appendChild(actionViewItemElement);
|
||||
this.viewItems.push(item);
|
||||
}
|
||||
else {
|
||||
this.actionsList.insertBefore(actionViewItemElement, this.actionsList.children[index]);
|
||||
this.viewItems.splice(index, 0, item);
|
||||
index++;
|
||||
}
|
||||
});
|
||||
// We need to allow for the first enabled item to be focused on using tab navigation #106441
|
||||
if (this.focusable) {
|
||||
let didFocus = false;
|
||||
for (const item of this.viewItems) {
|
||||
if (!(item instanceof BaseActionViewItem)) {
|
||||
continue;
|
||||
}
|
||||
let focus;
|
||||
if (didFocus) {
|
||||
focus = false; // already focused an item
|
||||
}
|
||||
else if (item.action.id === Separator.ID) {
|
||||
focus = false; // never focus a separator
|
||||
}
|
||||
else if (!item.isEnabled() && this.options.focusOnlyEnabledItems) {
|
||||
focus = false; // never focus a disabled item
|
||||
}
|
||||
else {
|
||||
focus = true;
|
||||
}
|
||||
if (focus) {
|
||||
item.setFocusable(true);
|
||||
didFocus = true;
|
||||
}
|
||||
else {
|
||||
item.setFocusable(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (typeof this.focusedItem === 'number') {
|
||||
// After a clear actions might be re-added to simply toggle some actions. We should preserve focus #97128
|
||||
this.focus(this.focusedItem);
|
||||
}
|
||||
this.refreshRole();
|
||||
}
|
||||
clear() {
|
||||
if (this.isEmpty()) {
|
||||
return;
|
||||
}
|
||||
this.viewItems = dispose(this.viewItems);
|
||||
this.viewItemDisposables.clearAndDisposeAll();
|
||||
DOM.clearNode(this.actionsList);
|
||||
this.refreshRole();
|
||||
}
|
||||
length() {
|
||||
return this.viewItems.length;
|
||||
}
|
||||
isEmpty() {
|
||||
return this.viewItems.length === 0;
|
||||
}
|
||||
focus(arg) {
|
||||
let selectFirst = false;
|
||||
let index = undefined;
|
||||
if (arg === undefined) {
|
||||
selectFirst = true;
|
||||
}
|
||||
else if (typeof arg === 'number') {
|
||||
index = arg;
|
||||
}
|
||||
else if (typeof arg === 'boolean') {
|
||||
selectFirst = arg;
|
||||
}
|
||||
if (selectFirst && typeof this.focusedItem === 'undefined') {
|
||||
const firstEnabled = this.viewItems.findIndex(item => item.isEnabled());
|
||||
// Focus the first enabled item
|
||||
this.focusedItem = firstEnabled === -1 ? undefined : firstEnabled;
|
||||
this.updateFocus(undefined, undefined, true);
|
||||
}
|
||||
else {
|
||||
if (index !== undefined) {
|
||||
this.focusedItem = index;
|
||||
}
|
||||
this.updateFocus(undefined, undefined, true);
|
||||
}
|
||||
}
|
||||
focusFirst() {
|
||||
this.focusedItem = this.length() - 1;
|
||||
return this.focusNext(true);
|
||||
}
|
||||
focusLast() {
|
||||
this.focusedItem = 0;
|
||||
return this.focusPrevious(true);
|
||||
}
|
||||
focusNext(forceLoop, forceFocus) {
|
||||
if (typeof this.focusedItem === 'undefined') {
|
||||
this.focusedItem = this.viewItems.length - 1;
|
||||
}
|
||||
else if (this.viewItems.length <= 1) {
|
||||
return false;
|
||||
}
|
||||
const startIndex = this.focusedItem;
|
||||
let item;
|
||||
do {
|
||||
if (!forceLoop && this.options.preventLoopNavigation && this.focusedItem + 1 >= this.viewItems.length) {
|
||||
this.focusedItem = startIndex;
|
||||
return false;
|
||||
}
|
||||
this.focusedItem = (this.focusedItem + 1) % this.viewItems.length;
|
||||
item = this.viewItems[this.focusedItem];
|
||||
} while (this.focusedItem !== startIndex && ((this.options.focusOnlyEnabledItems && !item.isEnabled()) || item.action.id === Separator.ID));
|
||||
this.updateFocus(undefined, undefined, forceFocus);
|
||||
return true;
|
||||
}
|
||||
focusPrevious(forceLoop) {
|
||||
if (typeof this.focusedItem === 'undefined') {
|
||||
this.focusedItem = 0;
|
||||
}
|
||||
else if (this.viewItems.length <= 1) {
|
||||
return false;
|
||||
}
|
||||
const startIndex = this.focusedItem;
|
||||
let item;
|
||||
do {
|
||||
this.focusedItem = this.focusedItem - 1;
|
||||
if (this.focusedItem < 0) {
|
||||
if (!forceLoop && this.options.preventLoopNavigation) {
|
||||
this.focusedItem = startIndex;
|
||||
return false;
|
||||
}
|
||||
this.focusedItem = this.viewItems.length - 1;
|
||||
}
|
||||
item = this.viewItems[this.focusedItem];
|
||||
} while (this.focusedItem !== startIndex && ((this.options.focusOnlyEnabledItems && !item.isEnabled()) || item.action.id === Separator.ID));
|
||||
this.updateFocus(true);
|
||||
return true;
|
||||
}
|
||||
updateFocus(fromRight, preventScroll, forceFocus = false) {
|
||||
if (typeof this.focusedItem === 'undefined') {
|
||||
this.actionsList.focus({ preventScroll });
|
||||
}
|
||||
if (this.previouslyFocusedItem !== undefined && this.previouslyFocusedItem !== this.focusedItem) {
|
||||
this.viewItems[this.previouslyFocusedItem]?.blur();
|
||||
}
|
||||
const actionViewItem = this.focusedItem !== undefined ? this.viewItems[this.focusedItem] : undefined;
|
||||
if (actionViewItem) {
|
||||
let focusItem = true;
|
||||
if (!types.isFunction(actionViewItem.focus)) {
|
||||
focusItem = false;
|
||||
}
|
||||
if (this.options.focusOnlyEnabledItems && types.isFunction(actionViewItem.isEnabled) && !actionViewItem.isEnabled()) {
|
||||
focusItem = false;
|
||||
}
|
||||
if (actionViewItem.action.id === Separator.ID) {
|
||||
focusItem = false;
|
||||
}
|
||||
if (!focusItem) {
|
||||
this.actionsList.focus({ preventScroll });
|
||||
this.previouslyFocusedItem = undefined;
|
||||
}
|
||||
else if (forceFocus || this.previouslyFocusedItem !== this.focusedItem) {
|
||||
actionViewItem.focus(fromRight);
|
||||
this.previouslyFocusedItem = this.focusedItem;
|
||||
}
|
||||
if (focusItem) {
|
||||
actionViewItem.showHover?.();
|
||||
}
|
||||
}
|
||||
}
|
||||
doTrigger(event) {
|
||||
if (typeof this.focusedItem === 'undefined') {
|
||||
return; //nothing to focus
|
||||
}
|
||||
// trigger action
|
||||
const actionViewItem = this.viewItems[this.focusedItem];
|
||||
if (actionViewItem instanceof BaseActionViewItem) {
|
||||
const context = (actionViewItem._context === null || actionViewItem._context === undefined) ? event : actionViewItem._context;
|
||||
this.run(actionViewItem._action, context);
|
||||
}
|
||||
}
|
||||
async run(action, context) {
|
||||
await this._actionRunner.run(action, context);
|
||||
}
|
||||
dispose() {
|
||||
this._context = undefined;
|
||||
this.viewItems = dispose(this.viewItems);
|
||||
this.getContainer().remove();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=actionbar.js.map
|
||||
File diff suppressed because one or more lines are too long
9
_internal/editor/esm/vs/base/browser/ui/aria/aria.css
Normal file
9
_internal/editor/esm/vs/base/browser/ui/aria/aria.css
Normal file
@@ -0,0 +1,9 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-aria-container {
|
||||
position: absolute; /* try to hide from window but not from screen readers */
|
||||
left:-999em;
|
||||
}
|
||||
82
_internal/editor/esm/vs/base/browser/ui/aria/aria.js
Normal file
82
_internal/editor/esm/vs/base/browser/ui/aria/aria.js
Normal file
@@ -0,0 +1,82 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import * as dom from '../../dom.js';
|
||||
import './aria.css';
|
||||
// Use a max length since we are inserting the whole msg in the DOM and that can cause browsers to freeze for long messages #94233
|
||||
const MAX_MESSAGE_LENGTH = 20000;
|
||||
let ariaContainer;
|
||||
let alertContainer;
|
||||
let alertContainer2;
|
||||
let statusContainer;
|
||||
let statusContainer2;
|
||||
export function setARIAContainer(parent) {
|
||||
ariaContainer = document.createElement('div');
|
||||
ariaContainer.className = 'monaco-aria-container';
|
||||
const createAlertContainer = () => {
|
||||
const element = document.createElement('div');
|
||||
element.className = 'monaco-alert';
|
||||
element.setAttribute('role', 'alert');
|
||||
element.setAttribute('aria-atomic', 'true');
|
||||
ariaContainer.appendChild(element);
|
||||
return element;
|
||||
};
|
||||
alertContainer = createAlertContainer();
|
||||
alertContainer2 = createAlertContainer();
|
||||
const createStatusContainer = () => {
|
||||
const element = document.createElement('div');
|
||||
element.className = 'monaco-status';
|
||||
element.setAttribute('aria-live', 'polite');
|
||||
element.setAttribute('aria-atomic', 'true');
|
||||
ariaContainer.appendChild(element);
|
||||
return element;
|
||||
};
|
||||
statusContainer = createStatusContainer();
|
||||
statusContainer2 = createStatusContainer();
|
||||
parent.appendChild(ariaContainer);
|
||||
}
|
||||
/**
|
||||
* Given the provided message, will make sure that it is read as alert to screen readers.
|
||||
*/
|
||||
export function alert(msg) {
|
||||
if (!ariaContainer) {
|
||||
return;
|
||||
}
|
||||
// Use alternate containers such that duplicated messages get read out by screen readers #99466
|
||||
if (alertContainer.textContent !== msg) {
|
||||
dom.clearNode(alertContainer2);
|
||||
insertMessage(alertContainer, msg);
|
||||
}
|
||||
else {
|
||||
dom.clearNode(alertContainer);
|
||||
insertMessage(alertContainer2, msg);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Given the provided message, will make sure that it is read as status to screen readers.
|
||||
*/
|
||||
export function status(msg) {
|
||||
if (!ariaContainer) {
|
||||
return;
|
||||
}
|
||||
if (statusContainer.textContent !== msg) {
|
||||
dom.clearNode(statusContainer2);
|
||||
insertMessage(statusContainer, msg);
|
||||
}
|
||||
else {
|
||||
dom.clearNode(statusContainer);
|
||||
insertMessage(statusContainer2, msg);
|
||||
}
|
||||
}
|
||||
function insertMessage(target, msg) {
|
||||
dom.clearNode(target);
|
||||
if (msg.length > MAX_MESSAGE_LENGTH) {
|
||||
msg = msg.substr(0, MAX_MESSAGE_LENGTH);
|
||||
}
|
||||
target.textContent = msg;
|
||||
// See https://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/
|
||||
target.style.visibility = 'hidden';
|
||||
target.style.visibility = 'visible';
|
||||
}
|
||||
//# sourceMappingURL=aria.js.map
|
||||
1
_internal/editor/esm/vs/base/browser/ui/aria/aria.js.map
Normal file
1
_internal/editor/esm/vs/base/browser/ui/aria/aria.js.map
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,36 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-breadcrumbs {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
.monaco-breadcrumbs .monaco-breadcrumb-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 1 auto;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
align-self: center;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
}
|
||||
.monaco-breadcrumbs.disabled .monaco-breadcrumb-item {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.monaco-breadcrumbs .monaco-breadcrumb-item .codicon-breadcrumb-separator {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.monaco-breadcrumbs .monaco-breadcrumb-item:first-of-type::before {
|
||||
content: ' ';
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
import './breadcrumbsWidget.css';
|
||||
//# sourceMappingURL=breadcrumbsWidget.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts","vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAC","file":"breadcrumbsWidget.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["\nimport './breadcrumbsWidget.css';\n\nexport interface IBreadcrumbsWidgetStyles {\n\treadonly breadcrumbsBackground: string | undefined;\n\treadonly breadcrumbsForeground: string | undefined;\n\treadonly breadcrumbsHoverForeground: string | undefined;\n\treadonly breadcrumbsFocusForeground: string | undefined;\n\treadonly breadcrumbsFocusAndSelectionForeground: string | undefined;\n}\n","\nimport './breadcrumbsWidget.css';\n\nexport interface IBreadcrumbsWidgetStyles {\n\treadonly breadcrumbsBackground: string | undefined;\n\treadonly breadcrumbsForeground: string | undefined;\n\treadonly breadcrumbsHoverForeground: string | undefined;\n\treadonly breadcrumbsFocusForeground: string | undefined;\n\treadonly breadcrumbsFocusAndSelectionForeground: string | undefined;\n}\n"]}
|
||||
174
_internal/editor/esm/vs/base/browser/ui/button/button.css
Normal file
174
_internal/editor/esm/vs/base/browser/ui/button/button.css
Normal file
@@ -0,0 +1,174 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-text-button {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid var(--vscode-button-border, transparent);
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.monaco-text-button:focus {
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
.monaco-text-button:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.monaco-button.disabled:focus,
|
||||
.monaco-button.disabled {
|
||||
opacity: 0.4 !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.monaco-text-button .codicon {
|
||||
margin: 0 0.2em;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.monaco-text-button.monaco-text-button-with-short-label {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 4px;
|
||||
overflow: hidden;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label,
|
||||
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.monaco-button-dropdown {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.monaco-button-dropdown.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.monaco-button-dropdown > .monaco-button:focus {
|
||||
outline-offset: -1px !important;
|
||||
}
|
||||
|
||||
.monaco-button-dropdown.disabled > .monaco-button.disabled,
|
||||
.monaco-button-dropdown.disabled > .monaco-button.disabled:focus,
|
||||
.monaco-button-dropdown.disabled > .monaco-button-dropdown-separator {
|
||||
opacity: 0.4 !important;
|
||||
}
|
||||
|
||||
.monaco-button-dropdown > .monaco-button.monaco-text-button {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
|
||||
.monaco-button-dropdown .monaco-button-dropdown-separator {
|
||||
padding: 4px 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.monaco-button-dropdown .monaco-button-dropdown-separator > div {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
|
||||
border: 1px solid var(--vscode-button-border, transparent);
|
||||
border-left-width: 0 !important;
|
||||
border-radius: 0 2px 2px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.monaco-button-dropdown > .monaco-button.monaco-text-button {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.monaco-description-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 4px 5px; /* allows button focus outline to be visible */
|
||||
}
|
||||
|
||||
.monaco-description-button .monaco-button-description {
|
||||
font-style: italic;
|
||||
font-size: 11px;
|
||||
padding: 4px 20px;
|
||||
}
|
||||
|
||||
.monaco-description-button .monaco-button-label,
|
||||
.monaco-description-button .monaco-button-description {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.monaco-description-button .monaco-button-label > .codicon,
|
||||
.monaco-description-button .monaco-button-description > .codicon {
|
||||
margin: 0 0.2em;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* default color styles - based on CSS variables */
|
||||
|
||||
.monaco-button.default-colors,
|
||||
.monaco-button-dropdown.default-colors > .monaco-button{
|
||||
color: var(--vscode-button-foreground);
|
||||
background-color: var(--vscode-button-background);
|
||||
}
|
||||
|
||||
.monaco-button.default-colors:hover,
|
||||
.monaco-button-dropdown.default-colors > .monaco-button:hover {
|
||||
background-color: var(--vscode-button-hoverBackground);
|
||||
}
|
||||
|
||||
.monaco-button.default-colors.secondary,
|
||||
.monaco-button-dropdown.default-colors > .monaco-button.secondary {
|
||||
color: var(--vscode-button-secondaryForeground);
|
||||
background-color: var(--vscode-button-secondaryBackground);
|
||||
}
|
||||
|
||||
.monaco-button.default-colors.secondary:hover,
|
||||
.monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
|
||||
background-color: var(--vscode-button-secondaryHoverBackground);
|
||||
}
|
||||
|
||||
.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
|
||||
background-color: var(--vscode-button-background);
|
||||
border-top: 1px solid var(--vscode-button-border);
|
||||
border-bottom: 1px solid var(--vscode-button-border);
|
||||
}
|
||||
|
||||
.monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
|
||||
background-color: var(--vscode-button-secondaryBackground);
|
||||
}
|
||||
|
||||
.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
|
||||
background-color: var(--vscode-button-separator);
|
||||
}
|
||||
230
_internal/editor/esm/vs/base/browser/ui/button/button.js
Normal file
230
_internal/editor/esm/vs/base/browser/ui/button/button.js
Normal file
@@ -0,0 +1,230 @@
|
||||
import { addDisposableListener, EventHelper, EventType, reset, trackFocus } from '../../dom.js';
|
||||
import { StandardKeyboardEvent } from '../../keyboardEvent.js';
|
||||
import { renderMarkdown, renderAsPlaintext } from '../../markdownRenderer.js';
|
||||
import { Gesture, EventType as TouchEventType } from '../../touch.js';
|
||||
import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
|
||||
import { renderLabelWithIcons } from '../iconLabel/iconLabels.js';
|
||||
import { Color } from '../../../common/color.js';
|
||||
import { Emitter } from '../../../common/event.js';
|
||||
import { isMarkdownString, markdownStringEqual } from '../../../common/htmlContent.js';
|
||||
import { Disposable } from '../../../common/lifecycle.js';
|
||||
import { ThemeIcon } from '../../../common/themables.js';
|
||||
import './button.css';
|
||||
import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
|
||||
import { safeSetInnerHtml } from '../../domSanitize.js';
|
||||
export const unthemedButtonStyles = {
|
||||
buttonBackground: '#0E639C',
|
||||
buttonHoverBackground: '#006BB3',
|
||||
buttonSeparator: Color.white.toString(),
|
||||
buttonForeground: Color.white.toString(),
|
||||
buttonBorder: undefined,
|
||||
buttonSecondaryBackground: undefined,
|
||||
buttonSecondaryForeground: undefined,
|
||||
buttonSecondaryHoverBackground: undefined
|
||||
};
|
||||
// Only allow a very limited set of inline html tags
|
||||
const buttonSanitizerConfig = Object.freeze({
|
||||
allowedTags: {
|
||||
override: ['b', 'i', 'u', 'code', 'span'],
|
||||
},
|
||||
allowedAttributes: {
|
||||
override: ['class'],
|
||||
},
|
||||
});
|
||||
export class Button extends Disposable {
|
||||
get onDidClick() { return this._onDidClick.event; }
|
||||
constructor(container, options) {
|
||||
super();
|
||||
this._label = '';
|
||||
this._onDidClick = this._register(new Emitter());
|
||||
this._onDidEscape = this._register(new Emitter());
|
||||
this.options = options;
|
||||
this._element = document.createElement('a');
|
||||
this._element.classList.add('monaco-button');
|
||||
this._element.tabIndex = 0;
|
||||
this._element.setAttribute('role', 'button');
|
||||
this._element.classList.toggle('secondary', !!options.secondary);
|
||||
const background = options.secondary ? options.buttonSecondaryBackground : options.buttonBackground;
|
||||
const foreground = options.secondary ? options.buttonSecondaryForeground : options.buttonForeground;
|
||||
this._element.style.color = foreground || '';
|
||||
this._element.style.backgroundColor = background || '';
|
||||
if (options.supportShortLabel) {
|
||||
this._labelShortElement = document.createElement('div');
|
||||
this._labelShortElement.classList.add('monaco-button-label-short');
|
||||
this._element.appendChild(this._labelShortElement);
|
||||
this._labelElement = document.createElement('div');
|
||||
this._labelElement.classList.add('monaco-button-label');
|
||||
this._element.appendChild(this._labelElement);
|
||||
this._element.classList.add('monaco-text-button-with-short-label');
|
||||
}
|
||||
if (typeof options.title === 'string') {
|
||||
this.setTitle(options.title);
|
||||
}
|
||||
if (typeof options.ariaLabel === 'string') {
|
||||
this._element.setAttribute('aria-label', options.ariaLabel);
|
||||
}
|
||||
container.appendChild(this._element);
|
||||
this.enabled = !options.disabled;
|
||||
this._register(Gesture.addTarget(this._element));
|
||||
[EventType.CLICK, TouchEventType.Tap].forEach(eventType => {
|
||||
this._register(addDisposableListener(this._element, eventType, e => {
|
||||
if (!this.enabled) {
|
||||
EventHelper.stop(e);
|
||||
return;
|
||||
}
|
||||
this._onDidClick.fire(e);
|
||||
}));
|
||||
});
|
||||
this._register(addDisposableListener(this._element, EventType.KEY_DOWN, e => {
|
||||
const event = new StandardKeyboardEvent(e);
|
||||
let eventHandled = false;
|
||||
if (this.enabled && (event.equals(3 /* KeyCode.Enter */) || event.equals(10 /* KeyCode.Space */))) {
|
||||
this._onDidClick.fire(e);
|
||||
eventHandled = true;
|
||||
}
|
||||
else if (event.equals(9 /* KeyCode.Escape */)) {
|
||||
this._onDidEscape.fire(e);
|
||||
this._element.blur();
|
||||
eventHandled = true;
|
||||
}
|
||||
if (eventHandled) {
|
||||
EventHelper.stop(event, true);
|
||||
}
|
||||
}));
|
||||
this._register(addDisposableListener(this._element, EventType.MOUSE_OVER, e => {
|
||||
if (!this._element.classList.contains('disabled')) {
|
||||
this.updateBackground(true);
|
||||
}
|
||||
}));
|
||||
this._register(addDisposableListener(this._element, EventType.MOUSE_OUT, e => {
|
||||
this.updateBackground(false); // restore standard styles
|
||||
}));
|
||||
// Also set hover background when button is focused for feedback
|
||||
this.focusTracker = this._register(trackFocus(this._element));
|
||||
this._register(this.focusTracker.onDidFocus(() => { if (this.enabled) {
|
||||
this.updateBackground(true);
|
||||
} }));
|
||||
this._register(this.focusTracker.onDidBlur(() => { if (this.enabled) {
|
||||
this.updateBackground(false);
|
||||
} }));
|
||||
}
|
||||
dispose() {
|
||||
super.dispose();
|
||||
this._element.remove();
|
||||
}
|
||||
getContentElements(content) {
|
||||
const elements = [];
|
||||
for (let segment of renderLabelWithIcons(content)) {
|
||||
if (typeof (segment) === 'string') {
|
||||
segment = segment.trim();
|
||||
// Ignore empty segment
|
||||
if (segment === '') {
|
||||
continue;
|
||||
}
|
||||
// Convert string segments to <span> nodes
|
||||
const node = document.createElement('span');
|
||||
node.textContent = segment;
|
||||
elements.push(node);
|
||||
}
|
||||
else {
|
||||
elements.push(segment);
|
||||
}
|
||||
}
|
||||
return elements;
|
||||
}
|
||||
updateBackground(hover) {
|
||||
let background;
|
||||
if (this.options.secondary) {
|
||||
background = hover ? this.options.buttonSecondaryHoverBackground : this.options.buttonSecondaryBackground;
|
||||
}
|
||||
else {
|
||||
background = hover ? this.options.buttonHoverBackground : this.options.buttonBackground;
|
||||
}
|
||||
if (background) {
|
||||
this._element.style.backgroundColor = background;
|
||||
}
|
||||
}
|
||||
get element() {
|
||||
return this._element;
|
||||
}
|
||||
set label(value) {
|
||||
if (this._label === value) {
|
||||
return;
|
||||
}
|
||||
if (isMarkdownString(this._label) && isMarkdownString(value) && markdownStringEqual(this._label, value)) {
|
||||
return;
|
||||
}
|
||||
this._element.classList.add('monaco-text-button');
|
||||
const labelElement = this.options.supportShortLabel ? this._labelElement : this._element;
|
||||
if (isMarkdownString(value)) {
|
||||
const rendered = renderMarkdown(value, undefined, document.createElement('span'));
|
||||
rendered.dispose();
|
||||
// Don't include outer `<p>`
|
||||
const root = rendered.element.querySelector('p')?.innerHTML;
|
||||
if (root) {
|
||||
safeSetInnerHtml(labelElement, root, buttonSanitizerConfig);
|
||||
}
|
||||
else {
|
||||
reset(labelElement);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.options.supportIcons) {
|
||||
reset(labelElement, ...this.getContentElements(value));
|
||||
}
|
||||
else {
|
||||
labelElement.textContent = value;
|
||||
}
|
||||
}
|
||||
let title = '';
|
||||
if (typeof this.options.title === 'string') {
|
||||
title = this.options.title;
|
||||
}
|
||||
else if (this.options.title) {
|
||||
title = renderAsPlaintext(value);
|
||||
}
|
||||
this.setTitle(title);
|
||||
this._setAriaLabel();
|
||||
this._label = value;
|
||||
}
|
||||
get label() {
|
||||
return this._label;
|
||||
}
|
||||
_setAriaLabel() {
|
||||
if (typeof this.options.ariaLabel === 'string') {
|
||||
this._element.setAttribute('aria-label', this.options.ariaLabel);
|
||||
}
|
||||
else if (typeof this.options.title === 'string') {
|
||||
this._element.setAttribute('aria-label', this.options.title);
|
||||
}
|
||||
}
|
||||
set icon(icon) {
|
||||
this._setAriaLabel();
|
||||
const oldIcons = Array.from(this._element.classList).filter(item => item.startsWith('codicon-'));
|
||||
this._element.classList.remove(...oldIcons);
|
||||
this._element.classList.add(...ThemeIcon.asClassNameArray(icon));
|
||||
}
|
||||
set enabled(value) {
|
||||
if (value) {
|
||||
this._element.classList.remove('disabled');
|
||||
this._element.setAttribute('aria-disabled', String(false));
|
||||
this._element.tabIndex = 0;
|
||||
}
|
||||
else {
|
||||
this._element.classList.add('disabled');
|
||||
this._element.setAttribute('aria-disabled', String(true));
|
||||
}
|
||||
}
|
||||
get enabled() {
|
||||
return !this._element.classList.contains('disabled');
|
||||
}
|
||||
setTitle(title) {
|
||||
if (!this._hover && title !== '') {
|
||||
this._hover = this._register(getBaseLayerHoverDelegate().setupManagedHover(this.options.hoverDelegate ?? getDefaultHoverDelegate('element'), this._element, title));
|
||||
}
|
||||
else if (this._hover) {
|
||||
this._hover.update(title);
|
||||
}
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=button.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,33 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.codicon-wrench-subaction {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes codicon-spin {
|
||||
100% {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.codicon-sync.codicon-modifier-spin,
|
||||
.codicon-loading.codicon-modifier-spin,
|
||||
.codicon-gear.codicon-modifier-spin,
|
||||
.codicon-notebook-state-executing.codicon-modifier-spin {
|
||||
/* Use steps to throttle FPS to reduce CPU usage */
|
||||
animation: codicon-spin 1.5s steps(30) infinite;
|
||||
}
|
||||
|
||||
.codicon-modifier-disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* custom speed & easing for loading icon */
|
||||
.codicon-loading,
|
||||
.codicon-tree-item-loading::before {
|
||||
animation-duration: 1s !important;
|
||||
animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
@font-face {
|
||||
font-family: "codicon";
|
||||
font-display: block;
|
||||
src: url(./codicon.ttf) format("truetype");
|
||||
}
|
||||
|
||||
.codicon[class*='codicon-'] {
|
||||
font: normal normal normal 16px/1 codicon;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
text-rendering: auto;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* icon rules are dynamically created by the platform theme service (see iconsStyleSheet.ts) */
|
||||
Binary file not shown.
@@ -0,0 +1,7 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import './codicon/codicon.css';
|
||||
import './codicon/codicon-modifiers.css';
|
||||
//# sourceMappingURL=codiconStyles.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/codicons/codiconStyles.ts","vs/base/browser/ui/codicons/codiconStyles.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iCAAiC,CAAC","file":"codiconStyles.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport './codicon/codicon.css';\nimport './codicon/codicon-modifiers.css';\n","/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport './codicon/codicon.css';\nimport './codicon/codicon-modifiers.css';\n"]}
|
||||
@@ -0,0 +1,16 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.context-view {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.context-view.fixed {
|
||||
all: initial;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
position: fixed;
|
||||
color: inherit;
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { BrowserFeatures } from '../../canIUse.js';
|
||||
import * as DOM from '../../dom.js';
|
||||
import { Disposable, DisposableStore, toDisposable } from '../../../common/lifecycle.js';
|
||||
import * as platform from '../../../common/platform.js';
|
||||
import { Range } from '../../../common/range.js';
|
||||
import './contextview.css';
|
||||
export function isAnchor(obj) {
|
||||
const anchor = obj;
|
||||
return !!anchor && typeof anchor.x === 'number' && typeof anchor.y === 'number';
|
||||
}
|
||||
export var LayoutAnchorMode;
|
||||
(function (LayoutAnchorMode) {
|
||||
LayoutAnchorMode[LayoutAnchorMode["AVOID"] = 0] = "AVOID";
|
||||
LayoutAnchorMode[LayoutAnchorMode["ALIGN"] = 1] = "ALIGN";
|
||||
})(LayoutAnchorMode || (LayoutAnchorMode = {}));
|
||||
/**
|
||||
* Lays out a one dimensional view next to an anchor in a viewport.
|
||||
*
|
||||
* @returns The view offset within the viewport.
|
||||
*/
|
||||
export function layout(viewportSize, viewSize, anchor) {
|
||||
const layoutAfterAnchorBoundary = anchor.mode === LayoutAnchorMode.ALIGN ? anchor.offset : anchor.offset + anchor.size;
|
||||
const layoutBeforeAnchorBoundary = anchor.mode === LayoutAnchorMode.ALIGN ? anchor.offset + anchor.size : anchor.offset;
|
||||
if (anchor.position === 0 /* LayoutAnchorPosition.Before */) {
|
||||
if (viewSize <= viewportSize - layoutAfterAnchorBoundary) {
|
||||
return layoutAfterAnchorBoundary; // happy case, lay it out after the anchor
|
||||
}
|
||||
if (viewSize <= layoutBeforeAnchorBoundary) {
|
||||
return layoutBeforeAnchorBoundary - viewSize; // ok case, lay it out before the anchor
|
||||
}
|
||||
return Math.max(viewportSize - viewSize, 0); // sad case, lay it over the anchor
|
||||
}
|
||||
else {
|
||||
if (viewSize <= layoutBeforeAnchorBoundary) {
|
||||
return layoutBeforeAnchorBoundary - viewSize; // happy case, lay it out before the anchor
|
||||
}
|
||||
if (viewSize <= viewportSize - layoutAfterAnchorBoundary) {
|
||||
return layoutAfterAnchorBoundary; // ok case, lay it out after the anchor
|
||||
}
|
||||
return 0; // sad case, lay it over the anchor
|
||||
}
|
||||
}
|
||||
export class ContextView extends Disposable {
|
||||
static { this.BUBBLE_UP_EVENTS = ['click', 'keydown', 'focus', 'blur']; }
|
||||
static { this.BUBBLE_DOWN_EVENTS = ['click']; }
|
||||
constructor(container, domPosition) {
|
||||
super();
|
||||
this.container = null;
|
||||
this.useFixedPosition = false;
|
||||
this.useShadowDOM = false;
|
||||
this.delegate = null;
|
||||
this.toDisposeOnClean = Disposable.None;
|
||||
this.toDisposeOnSetContainer = Disposable.None;
|
||||
this.shadowRoot = null;
|
||||
this.shadowRootHostElement = null;
|
||||
this.view = DOM.$('.context-view');
|
||||
DOM.hide(this.view);
|
||||
this.setContainer(container, domPosition);
|
||||
this._register(toDisposable(() => this.setContainer(null, 1 /* ContextViewDOMPosition.ABSOLUTE */)));
|
||||
}
|
||||
setContainer(container, domPosition) {
|
||||
this.useFixedPosition = domPosition !== 1 /* ContextViewDOMPosition.ABSOLUTE */;
|
||||
const usedShadowDOM = this.useShadowDOM;
|
||||
this.useShadowDOM = domPosition === 3 /* ContextViewDOMPosition.FIXED_SHADOW */;
|
||||
if (container === this.container && usedShadowDOM === this.useShadowDOM) {
|
||||
return; // container is the same and no shadow DOM usage has changed
|
||||
}
|
||||
if (this.container) {
|
||||
this.toDisposeOnSetContainer.dispose();
|
||||
this.view.remove();
|
||||
if (this.shadowRoot) {
|
||||
this.shadowRoot = null;
|
||||
this.shadowRootHostElement?.remove();
|
||||
this.shadowRootHostElement = null;
|
||||
}
|
||||
this.container = null;
|
||||
}
|
||||
if (container) {
|
||||
this.container = container;
|
||||
if (this.useShadowDOM) {
|
||||
this.shadowRootHostElement = DOM.$('.shadow-root-host');
|
||||
this.container.appendChild(this.shadowRootHostElement);
|
||||
this.shadowRoot = this.shadowRootHostElement.attachShadow({ mode: 'open' });
|
||||
const style = document.createElement('style');
|
||||
style.textContent = SHADOW_ROOT_CSS;
|
||||
this.shadowRoot.appendChild(style);
|
||||
this.shadowRoot.appendChild(this.view);
|
||||
this.shadowRoot.appendChild(DOM.$('slot'));
|
||||
}
|
||||
else {
|
||||
this.container.appendChild(this.view);
|
||||
}
|
||||
const toDisposeOnSetContainer = new DisposableStore();
|
||||
ContextView.BUBBLE_UP_EVENTS.forEach(event => {
|
||||
toDisposeOnSetContainer.add(DOM.addStandardDisposableListener(this.container, event, e => {
|
||||
this.onDOMEvent(e, false);
|
||||
}));
|
||||
});
|
||||
ContextView.BUBBLE_DOWN_EVENTS.forEach(event => {
|
||||
toDisposeOnSetContainer.add(DOM.addStandardDisposableListener(this.container, event, e => {
|
||||
this.onDOMEvent(e, true);
|
||||
}, true));
|
||||
});
|
||||
this.toDisposeOnSetContainer = toDisposeOnSetContainer;
|
||||
}
|
||||
}
|
||||
show(delegate) {
|
||||
if (this.isVisible()) {
|
||||
this.hide();
|
||||
}
|
||||
// Show static box
|
||||
DOM.clearNode(this.view);
|
||||
this.view.className = 'context-view monaco-component';
|
||||
this.view.style.top = '0px';
|
||||
this.view.style.left = '0px';
|
||||
this.view.style.zIndex = `${2575 + (delegate.layer ?? 0)}`;
|
||||
this.view.style.position = this.useFixedPosition ? 'fixed' : 'absolute';
|
||||
DOM.show(this.view);
|
||||
// Render content
|
||||
this.toDisposeOnClean = delegate.render(this.view) || Disposable.None;
|
||||
// Set active delegate
|
||||
this.delegate = delegate;
|
||||
// Layout
|
||||
this.doLayout();
|
||||
// Focus
|
||||
this.delegate.focus?.();
|
||||
}
|
||||
getViewElement() {
|
||||
return this.view;
|
||||
}
|
||||
layout() {
|
||||
if (!this.isVisible()) {
|
||||
return;
|
||||
}
|
||||
if (this.delegate.canRelayout === false && !(platform.isIOS && BrowserFeatures.pointerEvents)) {
|
||||
this.hide();
|
||||
return;
|
||||
}
|
||||
this.delegate?.layout?.();
|
||||
this.doLayout();
|
||||
}
|
||||
doLayout() {
|
||||
// Check that we still have a delegate - this.delegate.layout may have hidden
|
||||
if (!this.isVisible()) {
|
||||
return;
|
||||
}
|
||||
// Get anchor
|
||||
const anchor = this.delegate.getAnchor();
|
||||
// Compute around
|
||||
let around;
|
||||
// Get the element's position and size (to anchor the view)
|
||||
if (DOM.isHTMLElement(anchor)) {
|
||||
const elementPosition = DOM.getDomNodePagePosition(anchor);
|
||||
// In areas where zoom is applied to the element or its ancestors, we need to adjust the size of the element
|
||||
// e.g. The title bar has counter zoom behavior meaning it applies the inverse of zoom level.
|
||||
// Window Zoom Level: 1.5, Title Bar Zoom: 1/1.5, Size Multiplier: 1.5
|
||||
const zoom = DOM.getDomNodeZoomLevel(anchor);
|
||||
around = {
|
||||
top: elementPosition.top * zoom,
|
||||
left: elementPosition.left * zoom,
|
||||
width: elementPosition.width * zoom,
|
||||
height: elementPosition.height * zoom
|
||||
};
|
||||
}
|
||||
else if (isAnchor(anchor)) {
|
||||
around = {
|
||||
top: anchor.y,
|
||||
left: anchor.x,
|
||||
width: anchor.width || 1,
|
||||
height: anchor.height || 2
|
||||
};
|
||||
}
|
||||
else {
|
||||
around = {
|
||||
top: anchor.posy,
|
||||
left: anchor.posx,
|
||||
// We are about to position the context view where the mouse
|
||||
// cursor is. To prevent the view being exactly under the mouse
|
||||
// when showing and thus potentially triggering an action within,
|
||||
// we treat the mouse location like a small sized block element.
|
||||
width: 2,
|
||||
height: 2
|
||||
};
|
||||
}
|
||||
const viewSizeWidth = DOM.getTotalWidth(this.view);
|
||||
const viewSizeHeight = DOM.getTotalHeight(this.view);
|
||||
const anchorPosition = this.delegate.anchorPosition ?? 0 /* AnchorPosition.BELOW */;
|
||||
const anchorAlignment = this.delegate.anchorAlignment ?? 0 /* AnchorAlignment.LEFT */;
|
||||
const anchorAxisAlignment = this.delegate.anchorAxisAlignment ?? 0 /* AnchorAxisAlignment.VERTICAL */;
|
||||
let top;
|
||||
let left;
|
||||
const activeWindow = DOM.getActiveWindow();
|
||||
if (anchorAxisAlignment === 0 /* AnchorAxisAlignment.VERTICAL */) {
|
||||
const verticalAnchor = { offset: around.top - activeWindow.pageYOffset, size: around.height, position: anchorPosition === 0 /* AnchorPosition.BELOW */ ? 0 /* LayoutAnchorPosition.Before */ : 1 /* LayoutAnchorPosition.After */ };
|
||||
const horizontalAnchor = { offset: around.left, size: around.width, position: anchorAlignment === 0 /* AnchorAlignment.LEFT */ ? 0 /* LayoutAnchorPosition.Before */ : 1 /* LayoutAnchorPosition.After */, mode: LayoutAnchorMode.ALIGN };
|
||||
top = layout(activeWindow.innerHeight, viewSizeHeight, verticalAnchor) + activeWindow.pageYOffset;
|
||||
// if view intersects vertically with anchor, we must avoid the anchor
|
||||
if (Range.intersects({ start: top, end: top + viewSizeHeight }, { start: verticalAnchor.offset, end: verticalAnchor.offset + verticalAnchor.size })) {
|
||||
horizontalAnchor.mode = LayoutAnchorMode.AVOID;
|
||||
}
|
||||
left = layout(activeWindow.innerWidth, viewSizeWidth, horizontalAnchor);
|
||||
}
|
||||
else {
|
||||
const horizontalAnchor = { offset: around.left, size: around.width, position: anchorAlignment === 0 /* AnchorAlignment.LEFT */ ? 0 /* LayoutAnchorPosition.Before */ : 1 /* LayoutAnchorPosition.After */ };
|
||||
const verticalAnchor = { offset: around.top, size: around.height, position: anchorPosition === 0 /* AnchorPosition.BELOW */ ? 0 /* LayoutAnchorPosition.Before */ : 1 /* LayoutAnchorPosition.After */, mode: LayoutAnchorMode.ALIGN };
|
||||
left = layout(activeWindow.innerWidth, viewSizeWidth, horizontalAnchor);
|
||||
// if view intersects horizontally with anchor, we must avoid the anchor
|
||||
if (Range.intersects({ start: left, end: left + viewSizeWidth }, { start: horizontalAnchor.offset, end: horizontalAnchor.offset + horizontalAnchor.size })) {
|
||||
verticalAnchor.mode = LayoutAnchorMode.AVOID;
|
||||
}
|
||||
top = layout(activeWindow.innerHeight, viewSizeHeight, verticalAnchor) + activeWindow.pageYOffset;
|
||||
}
|
||||
this.view.classList.remove('top', 'bottom', 'left', 'right');
|
||||
this.view.classList.add(anchorPosition === 0 /* AnchorPosition.BELOW */ ? 'bottom' : 'top');
|
||||
this.view.classList.add(anchorAlignment === 0 /* AnchorAlignment.LEFT */ ? 'left' : 'right');
|
||||
this.view.classList.toggle('fixed', this.useFixedPosition);
|
||||
const containerPosition = DOM.getDomNodePagePosition(this.container);
|
||||
// Account for container scroll when positioning the context view
|
||||
const containerScrollTop = this.container.scrollTop || 0;
|
||||
const containerScrollLeft = this.container.scrollLeft || 0;
|
||||
this.view.style.top = `${top - (this.useFixedPosition ? DOM.getDomNodePagePosition(this.view).top : containerPosition.top) + containerScrollTop}px`;
|
||||
this.view.style.left = `${left - (this.useFixedPosition ? DOM.getDomNodePagePosition(this.view).left : containerPosition.left) + containerScrollLeft}px`;
|
||||
this.view.style.width = 'initial';
|
||||
}
|
||||
hide(data) {
|
||||
const delegate = this.delegate;
|
||||
this.delegate = null;
|
||||
if (delegate?.onHide) {
|
||||
delegate.onHide(data);
|
||||
}
|
||||
this.toDisposeOnClean.dispose();
|
||||
DOM.hide(this.view);
|
||||
}
|
||||
isVisible() {
|
||||
return !!this.delegate;
|
||||
}
|
||||
onDOMEvent(e, onCapture) {
|
||||
if (this.delegate) {
|
||||
if (this.delegate.onDOMEvent) {
|
||||
this.delegate.onDOMEvent(e, DOM.getWindow(e).document.activeElement);
|
||||
}
|
||||
else if (onCapture && !DOM.isAncestor(e.target, this.container)) {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
dispose() {
|
||||
this.hide();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
const SHADOW_ROOT_CSS = /* css */ `
|
||||
:host {
|
||||
all: initial; /* 1st rule so subsequent properties are reset. */
|
||||
}
|
||||
|
||||
.codicon[class*='codicon-'] {
|
||||
font: normal normal normal 16px/1 codicon;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
text-rendering: auto;
|
||||
text-align: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
:host {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", system-ui, "Ubuntu", "Droid Sans", sans-serif;
|
||||
}
|
||||
|
||||
:host-context(.mac) { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
:host-context(.mac:lang(zh-Hans)) { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif; }
|
||||
:host-context(.mac:lang(zh-Hant)) { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif; }
|
||||
:host-context(.mac:lang(ja)) { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic Pro", sans-serif; }
|
||||
:host-context(.mac:lang(ko)) { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Nanum Gothic", "AppleGothic", sans-serif; }
|
||||
|
||||
:host-context(.windows) { font-family: "Segoe WPC", "Segoe UI", sans-serif; }
|
||||
:host-context(.windows:lang(zh-Hans)) { font-family: "Segoe WPC", "Segoe UI", "Microsoft YaHei", sans-serif; }
|
||||
:host-context(.windows:lang(zh-Hant)) { font-family: "Segoe WPC", "Segoe UI", "Microsoft Jhenghei", sans-serif; }
|
||||
:host-context(.windows:lang(ja)) { font-family: "Segoe WPC", "Segoe UI", "Yu Gothic UI", "Meiryo UI", sans-serif; }
|
||||
:host-context(.windows:lang(ko)) { font-family: "Segoe WPC", "Segoe UI", "Malgun Gothic", "Dotom", sans-serif; }
|
||||
|
||||
:host-context(.linux) { font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif; }
|
||||
:host-context(.linux:lang(zh-Hans)) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif; }
|
||||
:host-context(.linux:lang(zh-Hant)) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans TC", "Source Han Sans TW", "Source Han Sans", sans-serif; }
|
||||
:host-context(.linux:lang(ja)) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", sans-serif; }
|
||||
:host-context(.linux:lang(ko)) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif; }
|
||||
`;
|
||||
//# sourceMappingURL=contextview.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-count-badge {
|
||||
padding: 3px 6px;
|
||||
border-radius: 11px;
|
||||
font-size: 11px;
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
line-height: 11px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.monaco-count-badge.long {
|
||||
padding: 2px 3px;
|
||||
border-radius: 2px;
|
||||
min-height: auto;
|
||||
line-height: normal;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { $, append } from '../../dom.js';
|
||||
import { format } from '../../../common/strings.js';
|
||||
import './countBadge.css';
|
||||
import { Disposable, MutableDisposable, toDisposable } from '../../../common/lifecycle.js';
|
||||
import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
|
||||
export class CountBadge extends Disposable {
|
||||
constructor(container, options, styles) {
|
||||
super();
|
||||
this.options = options;
|
||||
this.styles = styles;
|
||||
this.count = 0;
|
||||
this.hover = this._register(new MutableDisposable());
|
||||
this.element = append(container, $('.monaco-count-badge'));
|
||||
this._register(toDisposable(() => container.removeChild(this.element)));
|
||||
this.countFormat = this.options.countFormat || '{0}';
|
||||
this.titleFormat = this.options.titleFormat || '';
|
||||
this.setCount(this.options.count || 0);
|
||||
this.updateHover();
|
||||
}
|
||||
setCount(count) {
|
||||
this.count = count;
|
||||
this.render();
|
||||
}
|
||||
setTitleFormat(titleFormat) {
|
||||
this.titleFormat = titleFormat;
|
||||
this.updateHover();
|
||||
this.render();
|
||||
}
|
||||
updateHover() {
|
||||
if (this.titleFormat !== '' && !this.hover.value) {
|
||||
this.hover.value = getBaseLayerHoverDelegate().setupDelayedHoverAtMouse(this.element, () => ({ content: format(this.titleFormat, this.count), appearance: { compact: true } }));
|
||||
}
|
||||
else if (this.titleFormat === '' && this.hover.value) {
|
||||
this.hover.value = undefined;
|
||||
}
|
||||
}
|
||||
render() {
|
||||
this.element.textContent = format(this.countFormat, this.count);
|
||||
this.element.style.backgroundColor = this.styles.badgeBackground ?? '';
|
||||
this.element.style.color = this.styles.badgeForeground ?? '';
|
||||
if (this.styles.badgeBorder) {
|
||||
this.element.style.border = `1px solid ${this.styles.badgeBorder}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=countBadge.js.map
|
||||
File diff suppressed because one or more lines are too long
246
_internal/editor/esm/vs/base/browser/ui/dialog/dialog.css
Normal file
246
_internal/editor/esm/vs/base/browser/ui/dialog/dialog.css
Normal file
@@ -0,0 +1,246 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
/** Dialog: Modal Block */
|
||||
.monaco-dialog-modal-block {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2575; /* Above Context Views, Below Workbench Hover */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.monaco-dialog-modal-block.dimmed {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/** Dialog: Container */
|
||||
.monaco-dialog-box {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
width: min-content;
|
||||
min-width: 500px;
|
||||
max-width: 90vw;
|
||||
min-height: 75px;
|
||||
padding: 10px;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.monaco-dialog-box.align-vertical {
|
||||
min-width: 350px; /* more narrow when aligned vertically */
|
||||
}
|
||||
|
||||
/** Dialog: Title Actions Row */
|
||||
.monaco-dialog-box .dialog-toolbar-row {
|
||||
height: 22px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.monaco-dialog-box .dialog-toolbar-row .actions-container {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/** Dialog: Message/Footer Row */
|
||||
.monaco-dialog-box .dialog-message-row,
|
||||
.monaco-dialog-box .dialog-footer-row {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.monaco-dialog-box.align-vertical .dialog-message-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.monaco-dialog-box .dialog-message-row > .dialog-icon.codicon {
|
||||
flex: 0 0 48px;
|
||||
height: 48px;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.monaco-dialog-box.align-vertical .dialog-message-row > .dialog-icon.codicon {
|
||||
flex: 0 0 64px;
|
||||
height: 64px;
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.monaco-dialog-box:not(.align-vertical) .dialog-message-row > .dialog-icon.codicon {
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
/** Dialog: Message/Footer Container */
|
||||
.monaco-dialog-box .dialog-message-row .dialog-message-container,
|
||||
.monaco-dialog-box .dialog-footer-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
word-wrap: break-word; /* never overflow long words, but break to next line */
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.monaco-dialog-box .dialog-footer-row {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.monaco-dialog-box:not(.align-vertical) .dialog-message-row .dialog-message-container,
|
||||
.monaco-dialog-box:not(.align-vertical) .dialog-footer-row {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.monaco-dialog-box.align-vertical .dialog-message-row .dialog-message-container,
|
||||
.monaco-dialog-box.align-vertical .dialog-footer-row {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.monaco-dialog-box .dialog-message-row .dialog-message-container ul,
|
||||
.monaco-dialog-box .dialog-footer-row ul {
|
||||
padding-inline-start: 20px; /* reduce excessive indent of list items in the dialog */
|
||||
}
|
||||
|
||||
/** Dialog: Message */
|
||||
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message {
|
||||
line-height: 22px;
|
||||
font-size: 18px;
|
||||
flex: 1; /* let the message always grow */
|
||||
white-space: normal;
|
||||
word-wrap: break-word; /* never overflow long words, but break to next line */
|
||||
min-height: 48px; /* matches icon height */
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/** Dialog: Details */
|
||||
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-detail {
|
||||
line-height: 22px;
|
||||
flex: 1; /* let the message always grow */
|
||||
}
|
||||
|
||||
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message a:focus {
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
/** Dialog: Checkbox */
|
||||
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-checkbox-row {
|
||||
padding: 15px 0px 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-checkbox-row .dialog-checkbox-message {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/** Dialog: Input */
|
||||
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-input {
|
||||
padding: 15px 0px 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-input .monaco-inputbox {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/** Dialog: File Path */
|
||||
.monaco-dialog-box code {
|
||||
font-family: var(--monaco-monospace-font);
|
||||
}
|
||||
|
||||
/** Dialog: Buttons Row */
|
||||
.monaco-dialog-box > .dialog-buttons-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 1px;
|
||||
overflow: hidden; /* buttons row should never overflow */
|
||||
}
|
||||
|
||||
.monaco-dialog-box > .dialog-buttons-row {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
padding: 20px 10px 10px;
|
||||
}
|
||||
|
||||
/** Dialog: Buttons */
|
||||
.monaco-dialog-box > .dialog-buttons-row > .dialog-buttons {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.monaco-dialog-box:not(.align-vertical) > .dialog-buttons-row > .dialog-buttons {
|
||||
overflow: hidden;
|
||||
justify-content: flex-end;
|
||||
margin-left: 67px; /* for long buttons, force align with text */
|
||||
}
|
||||
|
||||
.monaco-dialog-box.align-vertical > .dialog-buttons-row > .dialog-buttons {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.monaco-dialog-box > .dialog-buttons-row > .dialog-buttons > .monaco-button {
|
||||
padding: 4px 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 4px 5px; /* allows button focus outline to be visible */
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
.monaco-dialog-box.align-vertical > .dialog-buttons-row > .dialog-buttons > .monaco-button {
|
||||
margin: 4px 0; /* allows button focus outline to be visible */
|
||||
}
|
||||
|
||||
.monaco-dialog-box:not(.align-vertical) > .dialog-buttons-row > .dialog-buttons > .monaco-button {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/** Dialog: Dropdown */
|
||||
.monaco-dialog-box:not(.align-vertical) > .dialog-buttons-row > .dialog-buttons > .monaco-button-dropdown {
|
||||
margin: 4px 5px;
|
||||
}
|
||||
|
||||
.monaco-dialog-box.align-vertical > .dialog-buttons-row > .dialog-buttons > .monaco-button-dropdown {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.monaco-dialog-box > .dialog-buttons-row > .dialog-buttons > .monaco-button-dropdown:focus-within {
|
||||
/**
|
||||
* This is a trick to make the focus outline appear on the entire
|
||||
* container of the dropdown button to ensure the dialog box looks
|
||||
* consistent to dialogs without dropdown buttons.
|
||||
*/
|
||||
outline-offset: 2px !important;
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
outline-color: var(--vscode-focusBorder);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.monaco-dialog-box > .dialog-buttons-row > .dialog-buttons > .monaco-button-dropdown > .monaco-text-button {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.monaco-dialog-box.align-vertical > .dialog-buttons-row > .dialog-buttons > .monaco-button-dropdown > .monaco-text-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.monaco-dialog-box > .dialog-buttons-row > .dialog-buttons > .monaco-button-dropdown > .monaco-dropdown-button {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
6
_internal/editor/esm/vs/base/browser/ui/dialog/dialog.js
Normal file
6
_internal/editor/esm/vs/base/browser/ui/dialog/dialog.js
Normal file
@@ -0,0 +1,6 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import './dialog.css';
|
||||
//# sourceMappingURL=dialog.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/dialog/dialog.ts","vs/base/browser/ui/dialog/dialog.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,cAAc,CAAC","file":"dialog.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport './dialog.css';\n\nexport interface IDialogStyles {\n\treadonly dialogForeground: string | undefined;\n\treadonly dialogBackground: string | undefined;\n\treadonly dialogShadow: string | undefined;\n\treadonly dialogBorder: string | undefined;\n\treadonly errorIconForeground: string | undefined;\n\treadonly warningIconForeground: string | undefined;\n\treadonly infoIconForeground: string | undefined;\n\treadonly textLinkForeground: string | undefined;\n}\n","/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport './dialog.css';\n\nexport interface IDialogStyles {\n\treadonly dialogForeground: string | undefined;\n\treadonly dialogBackground: string | undefined;\n\treadonly dialogShadow: string | undefined;\n\treadonly dialogBorder: string | undefined;\n\treadonly errorIconForeground: string | undefined;\n\treadonly warningIconForeground: string | undefined;\n\treadonly infoIconForeground: string | undefined;\n\treadonly textLinkForeground: string | undefined;\n}\n"]}
|
||||
28
_internal/editor/esm/vs/base/browser/ui/dnd/dnd.css
Normal file
28
_internal/editor/esm/vs/base/browser/ui/dnd/dnd.css
Normal file
@@ -0,0 +1,28 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-drag-image {
|
||||
display: inline-block;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
|
||||
/* Default styles */
|
||||
background-color: var(--vscode-list-activeSelectionBackground);
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
outline: 1px solid var(--vscode-list-focusOutline);
|
||||
outline-offset: -1px;
|
||||
|
||||
/*
|
||||
* Browsers apply an effect to the drag image when the div becomes too
|
||||
* large which makes them unreadable. Use max width so it does not happen
|
||||
*/
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
26
_internal/editor/esm/vs/base/browser/ui/dnd/dnd.js
Normal file
26
_internal/editor/esm/vs/base/browser/ui/dnd/dnd.js
Normal file
@@ -0,0 +1,26 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { $ } from '../../dom.js';
|
||||
import './dnd.css';
|
||||
export function applyDragImage(event, container, label, extraClasses = []) {
|
||||
if (!event.dataTransfer) {
|
||||
return;
|
||||
}
|
||||
const dragImage = $('.monaco-drag-image');
|
||||
dragImage.textContent = label;
|
||||
dragImage.classList.add(...extraClasses);
|
||||
const getDragImageContainer = (e) => {
|
||||
while (e && !e.classList.contains('monaco-workbench')) {
|
||||
e = e.parentElement;
|
||||
}
|
||||
return e || container.ownerDocument.body;
|
||||
};
|
||||
const dragContainer = getDragImageContainer(container);
|
||||
dragContainer.appendChild(dragImage);
|
||||
event.dataTransfer.setDragImage(dragImage, -10, -10);
|
||||
// Removes the element when the DND operation is done
|
||||
setTimeout(() => dragImage.remove(), 0);
|
||||
}
|
||||
//# sourceMappingURL=dnd.js.map
|
||||
1
_internal/editor/esm/vs/base/browser/ui/dnd/dnd.js.map
Normal file
1
_internal/editor/esm/vs/base/browser/ui/dnd/dnd.js.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/dnd/dnd.ts","vs/base/browser/ui/dnd/dnd.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,WAAW,CAAC;AAEnB,MAAM,UAAU,cAAc,CAAC,KAAgB,EAAE,SAAsB,EAAE,KAAa,EAAE,eAAyB,EAAE;IAClH,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;QACzB,OAAO;IACR,CAAC;IAED,MAAM,SAAS,GAAG,CAAC,CAAC,oBAAoB,CAAC,CAAC;IAC1C,SAAS,CAAC,WAAW,GAAG,KAAK,CAAC;IAC9B,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;IAEzC,MAAM,qBAAqB,GAAG,CAAC,CAAqB,EAAE,EAAE;QACvD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACvD,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC;QACrB,CAAC;QACD,OAAO,CAAC,IAAI,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,aAAa,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;IAErD,qDAAqD;IACrD,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;AACzC,CAAC","file":"dnd.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport { $ } from '../../dom.js';\nimport './dnd.css';\n\nexport function applyDragImage(event: DragEvent, container: HTMLElement, label: string, extraClasses: string[] = []): void {\n\tif (!event.dataTransfer) {\n\t\treturn;\n\t}\n\n\tconst dragImage = $('.monaco-drag-image');\n\tdragImage.textContent = label;\n\tdragImage.classList.add(...extraClasses);\n\n\tconst getDragImageContainer = (e: HTMLElement | null) => {\n\t\twhile (e && !e.classList.contains('monaco-workbench')) {\n\t\t\te = e.parentElement;\n\t\t}\n\t\treturn e || container.ownerDocument.body;\n\t};\n\n\tconst dragContainer = getDragImageContainer(container);\n\tdragContainer.appendChild(dragImage);\n\tevent.dataTransfer.setDragImage(dragImage, -10, -10);\n\n\t// Removes the element when the DND operation is done\n\tsetTimeout(() => dragImage.remove(), 0);\n}\n","/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport { $ } from '../../dom.js';\nimport './dnd.css';\n\nexport function applyDragImage(event: DragEvent, container: HTMLElement, label: string, extraClasses: string[] = []): void {\n\tif (!event.dataTransfer) {\n\t\treturn;\n\t}\n\n\tconst dragImage = $('.monaco-drag-image');\n\tdragImage.textContent = label;\n\tdragImage.classList.add(...extraClasses);\n\n\tconst getDragImageContainer = (e: HTMLElement | null) => {\n\t\twhile (e && !e.classList.contains('monaco-workbench')) {\n\t\t\te = e.parentElement;\n\t\t}\n\t\treturn e || container.ownerDocument.body;\n\t};\n\n\tconst dragContainer = getDragImageContainer(container);\n\tdragContainer.appendChild(dragImage);\n\tevent.dataTransfer.setDragImage(dragImage, -10, -10);\n\n\t// Removes the element when the DND operation is done\n\tsetTimeout(() => dragImage.remove(), 0);\n}\n"]}
|
||||
@@ -0,0 +1,46 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-dropdown {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.monaco-dropdown > .dropdown-label {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.monaco-dropdown > .dropdown-label > .action-label.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.monaco-dropdown-with-primary {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.monaco-dropdown-with-primary > .action-container > .action-label {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
|
||||
font-size: 12px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
line-height: 16px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
|
||||
display: block;
|
||||
background-size: 16px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
139
_internal/editor/esm/vs/base/browser/ui/dropdown/dropdown.js
Normal file
139
_internal/editor/esm/vs/base/browser/ui/dropdown/dropdown.js
Normal file
@@ -0,0 +1,139 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { $, addDisposableListener, append, EventHelper, EventType, isMouseEvent } from '../../dom.js';
|
||||
import { StandardKeyboardEvent } from '../../keyboardEvent.js';
|
||||
import { EventType as GestureEventType, Gesture } from '../../touch.js';
|
||||
import { ActionRunner } from '../../../common/actions.js';
|
||||
import { Emitter } from '../../../common/event.js';
|
||||
import './dropdown.css';
|
||||
export class BaseDropdown extends ActionRunner {
|
||||
constructor(container, options) {
|
||||
super();
|
||||
this._onDidChangeVisibility = this._register(new Emitter());
|
||||
this.onDidChangeVisibility = this._onDidChangeVisibility.event;
|
||||
this._element = append(container, $('.monaco-dropdown'));
|
||||
this._label = append(this._element, $('.dropdown-label'));
|
||||
let labelRenderer = options.labelRenderer;
|
||||
if (!labelRenderer) {
|
||||
labelRenderer = (container) => {
|
||||
container.textContent = options.label || '';
|
||||
return null;
|
||||
};
|
||||
}
|
||||
for (const event of [EventType.CLICK, EventType.MOUSE_DOWN, GestureEventType.Tap]) {
|
||||
this._register(addDisposableListener(this.element, event, e => EventHelper.stop(e, true))); // prevent default click behaviour to trigger
|
||||
}
|
||||
for (const event of [EventType.MOUSE_DOWN, GestureEventType.Tap]) {
|
||||
this._register(addDisposableListener(this._label, event, e => {
|
||||
if (isMouseEvent(e) && e.button !== 0) {
|
||||
// prevent right click trigger to allow separate context menu (https://github.com/microsoft/vscode/issues/151064)
|
||||
return;
|
||||
}
|
||||
if (this.visible) {
|
||||
this.hide();
|
||||
}
|
||||
else {
|
||||
this.show();
|
||||
}
|
||||
}));
|
||||
}
|
||||
this._register(addDisposableListener(this._label, EventType.KEY_DOWN, e => {
|
||||
const event = new StandardKeyboardEvent(e);
|
||||
if (event.equals(3 /* KeyCode.Enter */) || event.equals(10 /* KeyCode.Space */)) {
|
||||
EventHelper.stop(e, true); // https://github.com/microsoft/vscode/issues/57997
|
||||
if (this.visible) {
|
||||
this.hide();
|
||||
}
|
||||
else {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
}));
|
||||
const cleanupFn = labelRenderer(this._label);
|
||||
if (cleanupFn) {
|
||||
this._register(cleanupFn);
|
||||
}
|
||||
this._register(Gesture.addTarget(this._label));
|
||||
}
|
||||
get element() {
|
||||
return this._element;
|
||||
}
|
||||
show() {
|
||||
if (!this.visible) {
|
||||
this.visible = true;
|
||||
this._onDidChangeVisibility.fire(true);
|
||||
}
|
||||
}
|
||||
hide() {
|
||||
if (this.visible) {
|
||||
this.visible = false;
|
||||
this._onDidChangeVisibility.fire(false);
|
||||
}
|
||||
}
|
||||
dispose() {
|
||||
super.dispose();
|
||||
this.hide();
|
||||
if (this.boxContainer) {
|
||||
this.boxContainer.remove();
|
||||
this.boxContainer = undefined;
|
||||
}
|
||||
if (this.contents) {
|
||||
this.contents.remove();
|
||||
this.contents = undefined;
|
||||
}
|
||||
if (this._label) {
|
||||
this._label.remove();
|
||||
this._label = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
export class DropdownMenu extends BaseDropdown {
|
||||
constructor(container, _options) {
|
||||
super(container, _options);
|
||||
this._options = _options;
|
||||
this._actions = [];
|
||||
this.actions = _options.actions || [];
|
||||
}
|
||||
set menuOptions(options) {
|
||||
this._menuOptions = options;
|
||||
}
|
||||
get menuOptions() {
|
||||
return this._menuOptions;
|
||||
}
|
||||
get actions() {
|
||||
if (this._options.actionProvider) {
|
||||
return this._options.actionProvider.getActions();
|
||||
}
|
||||
return this._actions;
|
||||
}
|
||||
set actions(actions) {
|
||||
this._actions = actions;
|
||||
}
|
||||
show() {
|
||||
super.show();
|
||||
this.element.classList.add('active');
|
||||
this._options.contextMenuProvider.showContextMenu({
|
||||
getAnchor: () => this.element,
|
||||
getActions: () => this.actions,
|
||||
getActionsContext: () => this.menuOptions ? this.menuOptions.context : null,
|
||||
getActionViewItem: (action, options) => this.menuOptions && this.menuOptions.actionViewItemProvider ? this.menuOptions.actionViewItemProvider(action, options) : undefined,
|
||||
getKeyBinding: action => this.menuOptions && this.menuOptions.getKeyBinding ? this.menuOptions.getKeyBinding(action) : undefined,
|
||||
getMenuClassName: () => this._options.menuClassName || '',
|
||||
onHide: () => this.onHide(),
|
||||
actionRunner: this.menuOptions ? this.menuOptions.actionRunner : undefined,
|
||||
anchorAlignment: this.menuOptions ? this.menuOptions.anchorAlignment : 0 /* AnchorAlignment.LEFT */,
|
||||
domForShadowRoot: this._options.menuAsChild ? this.element : undefined,
|
||||
skipTelemetry: this._options.skipTelemetry
|
||||
});
|
||||
}
|
||||
hide() {
|
||||
super.hide();
|
||||
}
|
||||
onHide() {
|
||||
this.hide();
|
||||
this.element.classList.remove('active');
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=dropdown.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,107 @@
|
||||
import { Emitter } from '../../../common/event.js';
|
||||
import { $, append } from '../../dom.js';
|
||||
import { BaseActionViewItem } from '../actionbar/actionViewItems.js';
|
||||
import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
|
||||
import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
|
||||
import './dropdown.css';
|
||||
import { DropdownMenu } from './dropdown.js';
|
||||
export class DropdownMenuActionViewItem extends BaseActionViewItem {
|
||||
get onDidChangeVisibility() { return this._onDidChangeVisibility.event; }
|
||||
constructor(action, menuActionsOrProvider, contextMenuProvider, options = Object.create(null)) {
|
||||
super(null, action, options);
|
||||
this.actionItem = null;
|
||||
this._onDidChangeVisibility = this._register(new Emitter());
|
||||
this.menuActionsOrProvider = menuActionsOrProvider;
|
||||
this.contextMenuProvider = contextMenuProvider;
|
||||
this.options = options;
|
||||
if (this.options.actionRunner) {
|
||||
this.actionRunner = this.options.actionRunner;
|
||||
}
|
||||
}
|
||||
render(container) {
|
||||
this.actionItem = container;
|
||||
const labelRenderer = (el) => {
|
||||
this.element = append(el, $('a.action-label'));
|
||||
return this.renderLabel(this.element);
|
||||
};
|
||||
const isActionsArray = Array.isArray(this.menuActionsOrProvider);
|
||||
const options = {
|
||||
contextMenuProvider: this.contextMenuProvider,
|
||||
labelRenderer: labelRenderer,
|
||||
menuAsChild: this.options.menuAsChild,
|
||||
actions: isActionsArray ? this.menuActionsOrProvider : undefined,
|
||||
actionProvider: isActionsArray ? undefined : this.menuActionsOrProvider,
|
||||
skipTelemetry: this.options.skipTelemetry
|
||||
};
|
||||
this.dropdownMenu = this._register(new DropdownMenu(container, options));
|
||||
this._register(this.dropdownMenu.onDidChangeVisibility(visible => {
|
||||
this.element?.setAttribute('aria-expanded', `${visible}`);
|
||||
this._onDidChangeVisibility.fire(visible);
|
||||
}));
|
||||
this.dropdownMenu.menuOptions = {
|
||||
actionViewItemProvider: this.options.actionViewItemProvider,
|
||||
actionRunner: this.actionRunner,
|
||||
getKeyBinding: this.options.keybindingProvider,
|
||||
context: this._context
|
||||
};
|
||||
if (this.options.anchorAlignmentProvider) {
|
||||
const that = this;
|
||||
this.dropdownMenu.menuOptions = {
|
||||
...this.dropdownMenu.menuOptions,
|
||||
get anchorAlignment() {
|
||||
return that.options.anchorAlignmentProvider();
|
||||
}
|
||||
};
|
||||
}
|
||||
this.updateTooltip();
|
||||
this.updateEnabled();
|
||||
}
|
||||
renderLabel(element) {
|
||||
let classNames = [];
|
||||
if (typeof this.options.classNames === 'string') {
|
||||
classNames = this.options.classNames.split(/\s+/g).filter(s => !!s);
|
||||
}
|
||||
else if (this.options.classNames) {
|
||||
classNames = this.options.classNames;
|
||||
}
|
||||
// todo@aeschli: remove codicon, should come through `this.options.classNames`
|
||||
if (!classNames.find(c => c === 'icon')) {
|
||||
classNames.push('codicon');
|
||||
}
|
||||
element.classList.add(...classNames);
|
||||
if (this._action.label) {
|
||||
this._register(getBaseLayerHoverDelegate().setupManagedHover(this.options.hoverDelegate ?? getDefaultHoverDelegate('mouse'), element, this._action.label));
|
||||
}
|
||||
return null;
|
||||
}
|
||||
getTooltip() {
|
||||
let title = null;
|
||||
if (this.action.tooltip) {
|
||||
title = this.action.tooltip;
|
||||
}
|
||||
else if (this.action.label) {
|
||||
title = this.action.label;
|
||||
}
|
||||
return title ?? undefined;
|
||||
}
|
||||
setActionContext(newContext) {
|
||||
super.setActionContext(newContext);
|
||||
if (this.dropdownMenu) {
|
||||
if (this.dropdownMenu.menuOptions) {
|
||||
this.dropdownMenu.menuOptions.context = newContext;
|
||||
}
|
||||
else {
|
||||
this.dropdownMenu.menuOptions = { context: newContext };
|
||||
}
|
||||
}
|
||||
}
|
||||
show() {
|
||||
this.dropdownMenu?.show();
|
||||
}
|
||||
updateEnabled() {
|
||||
const disabled = !this.action.enabled;
|
||||
this.actionItem?.classList.toggle('disabled', disabled);
|
||||
this.element?.classList.toggle('disabled', disabled);
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=dropdownActionViewItem.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,70 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
/* ---------- Find input ---------- */
|
||||
|
||||
.monaco-findInput {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.monaco-findInput .monaco-inputbox {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.monaco-findInput > .controls {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.vs .monaco-findInput.disabled {
|
||||
background-color: #E1E1E1;
|
||||
}
|
||||
|
||||
/* Theming */
|
||||
.vs-dark .monaco-findInput.disabled {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
/* Highlighting */
|
||||
.monaco-findInput.highlight-0 .controls,
|
||||
.hc-light .monaco-findInput.highlight-0 .controls {
|
||||
animation: monaco-findInput-highlight-0 100ms linear 0s;
|
||||
}
|
||||
|
||||
.monaco-findInput.highlight-1 .controls,
|
||||
.hc-light .monaco-findInput.highlight-1 .controls {
|
||||
animation: monaco-findInput-highlight-1 100ms linear 0s;
|
||||
}
|
||||
|
||||
.hc-black .monaco-findInput.highlight-0 .controls,
|
||||
.vs-dark .monaco-findInput.highlight-0 .controls {
|
||||
animation: monaco-findInput-highlight-dark-0 100ms linear 0s;
|
||||
}
|
||||
|
||||
.hc-black .monaco-findInput.highlight-1 .controls,
|
||||
.vs-dark .monaco-findInput.highlight-1 .controls {
|
||||
animation: monaco-findInput-highlight-dark-1 100ms linear 0s;
|
||||
}
|
||||
|
||||
@keyframes monaco-findInput-highlight-0 {
|
||||
0% { background: rgba(253, 255, 0, 0.8); }
|
||||
100% { background: transparent; }
|
||||
}
|
||||
@keyframes monaco-findInput-highlight-1 {
|
||||
0% { background: rgba(253, 255, 0, 0.8); }
|
||||
/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
|
||||
99% { background: transparent; }
|
||||
}
|
||||
|
||||
@keyframes monaco-findInput-highlight-dark-0 {
|
||||
0% { background: rgba(255, 255, 255, 0.44); }
|
||||
100% { background: transparent; }
|
||||
}
|
||||
@keyframes monaco-findInput-highlight-dark-1 {
|
||||
0% { background: rgba(255, 255, 255, 0.44); }
|
||||
/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
|
||||
99% { background: transparent; }
|
||||
}
|
||||
293
_internal/editor/esm/vs/base/browser/ui/findinput/findInput.js
Normal file
293
_internal/editor/esm/vs/base/browser/ui/findinput/findInput.js
Normal file
@@ -0,0 +1,293 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import * as dom from '../../dom.js';
|
||||
import { CaseSensitiveToggle, RegexToggle, WholeWordsToggle } from './findInputToggles.js';
|
||||
import { HistoryInputBox } from '../inputbox/inputBox.js';
|
||||
import { Widget } from '../widget.js';
|
||||
import { Emitter } from '../../../common/event.js';
|
||||
import './findInput.css';
|
||||
import * as nls from '../../../../nls.js';
|
||||
import { DisposableStore, MutableDisposable } from '../../../common/lifecycle.js';
|
||||
import { createInstantHoverDelegate } from '../hover/hoverDelegateFactory.js';
|
||||
const NLS_DEFAULT_LABEL = nls.localize(1, "input");
|
||||
export class FindInput extends Widget {
|
||||
get onDidOptionChange() { return this._onDidOptionChange.event; }
|
||||
get onKeyDown() { return this._onKeyDown.event; }
|
||||
get onMouseDown() { return this._onMouseDown.event; }
|
||||
get onCaseSensitiveKeyDown() { return this._onCaseSensitiveKeyDown.event; }
|
||||
get onRegexKeyDown() { return this._onRegexKeyDown.event; }
|
||||
constructor(parent, contextViewProvider, options) {
|
||||
super();
|
||||
this.fixFocusOnOptionClickEnabled = true;
|
||||
this.imeSessionInProgress = false;
|
||||
this.additionalTogglesDisposables = this._register(new MutableDisposable());
|
||||
this.additionalToggles = [];
|
||||
this._onDidOptionChange = this._register(new Emitter());
|
||||
this._onKeyDown = this._register(new Emitter());
|
||||
this._onMouseDown = this._register(new Emitter());
|
||||
this._onInput = this._register(new Emitter());
|
||||
this._onKeyUp = this._register(new Emitter());
|
||||
this._onCaseSensitiveKeyDown = this._register(new Emitter());
|
||||
this._onRegexKeyDown = this._register(new Emitter());
|
||||
this._lastHighlightFindOptions = 0;
|
||||
this.placeholder = options.placeholder || '';
|
||||
this.validation = options.validation;
|
||||
this.label = options.label || NLS_DEFAULT_LABEL;
|
||||
this.showCommonFindToggles = !!options.showCommonFindToggles;
|
||||
const appendCaseSensitiveLabel = options.appendCaseSensitiveLabel || '';
|
||||
const appendWholeWordsLabel = options.appendWholeWordsLabel || '';
|
||||
const appendRegexLabel = options.appendRegexLabel || '';
|
||||
const flexibleHeight = !!options.flexibleHeight;
|
||||
const flexibleWidth = !!options.flexibleWidth;
|
||||
const flexibleMaxHeight = options.flexibleMaxHeight;
|
||||
this.domNode = document.createElement('div');
|
||||
this.domNode.classList.add('monaco-findInput');
|
||||
this.inputBox = this._register(new HistoryInputBox(this.domNode, contextViewProvider, {
|
||||
placeholder: this.placeholder || '',
|
||||
ariaLabel: this.label || '',
|
||||
validationOptions: {
|
||||
validation: this.validation
|
||||
},
|
||||
showHistoryHint: options.showHistoryHint,
|
||||
flexibleHeight,
|
||||
flexibleWidth,
|
||||
flexibleMaxHeight,
|
||||
inputBoxStyles: options.inputBoxStyles,
|
||||
history: options.history
|
||||
}));
|
||||
const hoverDelegate = this._register(createInstantHoverDelegate());
|
||||
if (this.showCommonFindToggles) {
|
||||
this.regex = this._register(new RegexToggle({
|
||||
appendTitle: appendRegexLabel,
|
||||
isChecked: false,
|
||||
hoverDelegate,
|
||||
...options.toggleStyles
|
||||
}));
|
||||
this._register(this.regex.onChange(viaKeyboard => {
|
||||
this._onDidOptionChange.fire(viaKeyboard);
|
||||
if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
|
||||
this.inputBox.focus();
|
||||
}
|
||||
this.validate();
|
||||
}));
|
||||
this._register(this.regex.onKeyDown(e => {
|
||||
this._onRegexKeyDown.fire(e);
|
||||
}));
|
||||
this.wholeWords = this._register(new WholeWordsToggle({
|
||||
appendTitle: appendWholeWordsLabel,
|
||||
isChecked: false,
|
||||
hoverDelegate,
|
||||
...options.toggleStyles
|
||||
}));
|
||||
this._register(this.wholeWords.onChange(viaKeyboard => {
|
||||
this._onDidOptionChange.fire(viaKeyboard);
|
||||
if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
|
||||
this.inputBox.focus();
|
||||
}
|
||||
this.validate();
|
||||
}));
|
||||
this.caseSensitive = this._register(new CaseSensitiveToggle({
|
||||
appendTitle: appendCaseSensitiveLabel,
|
||||
isChecked: false,
|
||||
hoverDelegate,
|
||||
...options.toggleStyles
|
||||
}));
|
||||
this._register(this.caseSensitive.onChange(viaKeyboard => {
|
||||
this._onDidOptionChange.fire(viaKeyboard);
|
||||
if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
|
||||
this.inputBox.focus();
|
||||
}
|
||||
this.validate();
|
||||
}));
|
||||
this._register(this.caseSensitive.onKeyDown(e => {
|
||||
this._onCaseSensitiveKeyDown.fire(e);
|
||||
}));
|
||||
// Arrow-Key support to navigate between options
|
||||
const indexes = [this.caseSensitive.domNode, this.wholeWords.domNode, this.regex.domNode];
|
||||
this.onkeydown(this.domNode, (event) => {
|
||||
if (event.equals(15 /* KeyCode.LeftArrow */) || event.equals(17 /* KeyCode.RightArrow */) || event.equals(9 /* KeyCode.Escape */)) {
|
||||
const index = indexes.indexOf(this.domNode.ownerDocument.activeElement);
|
||||
if (index >= 0) {
|
||||
let newIndex = -1;
|
||||
if (event.equals(17 /* KeyCode.RightArrow */)) {
|
||||
newIndex = (index + 1) % indexes.length;
|
||||
}
|
||||
else if (event.equals(15 /* KeyCode.LeftArrow */)) {
|
||||
if (index === 0) {
|
||||
newIndex = indexes.length - 1;
|
||||
}
|
||||
else {
|
||||
newIndex = index - 1;
|
||||
}
|
||||
}
|
||||
if (event.equals(9 /* KeyCode.Escape */)) {
|
||||
indexes[index].blur();
|
||||
this.inputBox.focus();
|
||||
}
|
||||
else if (newIndex >= 0) {
|
||||
indexes[newIndex].focus();
|
||||
}
|
||||
dom.EventHelper.stop(event, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
this.controls = document.createElement('div');
|
||||
this.controls.className = 'controls';
|
||||
this.controls.style.display = this.showCommonFindToggles ? '' : 'none';
|
||||
if (this.caseSensitive) {
|
||||
this.controls.append(this.caseSensitive.domNode);
|
||||
}
|
||||
if (this.wholeWords) {
|
||||
this.controls.appendChild(this.wholeWords.domNode);
|
||||
}
|
||||
if (this.regex) {
|
||||
this.controls.appendChild(this.regex.domNode);
|
||||
}
|
||||
this.setAdditionalToggles(options?.additionalToggles);
|
||||
if (this.controls) {
|
||||
this.domNode.appendChild(this.controls);
|
||||
}
|
||||
parent?.appendChild(this.domNode);
|
||||
this._register(dom.addDisposableListener(this.inputBox.inputElement, 'compositionstart', (e) => {
|
||||
this.imeSessionInProgress = true;
|
||||
}));
|
||||
this._register(dom.addDisposableListener(this.inputBox.inputElement, 'compositionend', (e) => {
|
||||
this.imeSessionInProgress = false;
|
||||
this._onInput.fire();
|
||||
}));
|
||||
this.onkeydown(this.inputBox.inputElement, (e) => this._onKeyDown.fire(e));
|
||||
this.onkeyup(this.inputBox.inputElement, (e) => this._onKeyUp.fire(e));
|
||||
this.oninput(this.inputBox.inputElement, (e) => this._onInput.fire());
|
||||
this.onmousedown(this.inputBox.inputElement, (e) => this._onMouseDown.fire(e));
|
||||
}
|
||||
get onDidChange() {
|
||||
return this.inputBox.onDidChange;
|
||||
}
|
||||
layout(style) {
|
||||
this.inputBox.layout();
|
||||
this.updateInputBoxPadding(style.collapsedFindWidget);
|
||||
}
|
||||
enable() {
|
||||
this.domNode.classList.remove('disabled');
|
||||
this.inputBox.enable();
|
||||
this.regex?.enable();
|
||||
this.wholeWords?.enable();
|
||||
this.caseSensitive?.enable();
|
||||
for (const toggle of this.additionalToggles) {
|
||||
toggle.enable();
|
||||
}
|
||||
}
|
||||
disable() {
|
||||
this.domNode.classList.add('disabled');
|
||||
this.inputBox.disable();
|
||||
this.regex?.disable();
|
||||
this.wholeWords?.disable();
|
||||
this.caseSensitive?.disable();
|
||||
for (const toggle of this.additionalToggles) {
|
||||
toggle.disable();
|
||||
}
|
||||
}
|
||||
setFocusInputOnOptionClick(value) {
|
||||
this.fixFocusOnOptionClickEnabled = value;
|
||||
}
|
||||
setEnabled(enabled) {
|
||||
if (enabled) {
|
||||
this.enable();
|
||||
}
|
||||
else {
|
||||
this.disable();
|
||||
}
|
||||
}
|
||||
setAdditionalToggles(toggles) {
|
||||
for (const currentToggle of this.additionalToggles) {
|
||||
currentToggle.domNode.remove();
|
||||
}
|
||||
this.additionalToggles = [];
|
||||
this.additionalTogglesDisposables.value = new DisposableStore();
|
||||
for (const toggle of toggles ?? []) {
|
||||
this.additionalTogglesDisposables.value.add(toggle);
|
||||
this.controls.appendChild(toggle.domNode);
|
||||
this.additionalTogglesDisposables.value.add(toggle.onChange(viaKeyboard => {
|
||||
this._onDidOptionChange.fire(viaKeyboard);
|
||||
if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
|
||||
this.inputBox.focus();
|
||||
}
|
||||
}));
|
||||
this.additionalToggles.push(toggle);
|
||||
}
|
||||
if (this.additionalToggles.length > 0) {
|
||||
this.controls.style.display = '';
|
||||
}
|
||||
this.updateInputBoxPadding();
|
||||
}
|
||||
updateInputBoxPadding(controlsHidden = false) {
|
||||
if (controlsHidden) {
|
||||
this.inputBox.paddingRight = 0;
|
||||
}
|
||||
else {
|
||||
this.inputBox.paddingRight =
|
||||
((this.caseSensitive?.width() ?? 0) + (this.wholeWords?.width() ?? 0) + (this.regex?.width() ?? 0))
|
||||
+ this.additionalToggles.reduce((r, t) => r + t.width(), 0);
|
||||
}
|
||||
}
|
||||
getValue() {
|
||||
return this.inputBox.value;
|
||||
}
|
||||
setValue(value) {
|
||||
if (this.inputBox.value !== value) {
|
||||
this.inputBox.value = value;
|
||||
}
|
||||
}
|
||||
select() {
|
||||
this.inputBox.select();
|
||||
}
|
||||
focus() {
|
||||
this.inputBox.focus();
|
||||
}
|
||||
getCaseSensitive() {
|
||||
return this.caseSensitive?.checked ?? false;
|
||||
}
|
||||
setCaseSensitive(value) {
|
||||
if (this.caseSensitive) {
|
||||
this.caseSensitive.checked = value;
|
||||
}
|
||||
}
|
||||
getWholeWords() {
|
||||
return this.wholeWords?.checked ?? false;
|
||||
}
|
||||
setWholeWords(value) {
|
||||
if (this.wholeWords) {
|
||||
this.wholeWords.checked = value;
|
||||
}
|
||||
}
|
||||
getRegex() {
|
||||
return this.regex?.checked ?? false;
|
||||
}
|
||||
setRegex(value) {
|
||||
if (this.regex) {
|
||||
this.regex.checked = value;
|
||||
this.validate();
|
||||
}
|
||||
}
|
||||
focusOnCaseSensitive() {
|
||||
this.caseSensitive?.focus();
|
||||
}
|
||||
highlightFindOptions() {
|
||||
this.domNode.classList.remove('highlight-' + (this._lastHighlightFindOptions));
|
||||
this._lastHighlightFindOptions = 1 - this._lastHighlightFindOptions;
|
||||
this.domNode.classList.add('highlight-' + (this._lastHighlightFindOptions));
|
||||
}
|
||||
validate() {
|
||||
this.inputBox.validate();
|
||||
}
|
||||
showMessage(message) {
|
||||
this.inputBox.showMessage(message);
|
||||
}
|
||||
clearMessage() {
|
||||
this.inputBox.hideMessage();
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=findInput.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,51 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
|
||||
import { Toggle } from '../toggle/toggle.js';
|
||||
import { Codicon } from '../../../common/codicons.js';
|
||||
import * as nls from '../../../../nls.js';
|
||||
const NLS_CASE_SENSITIVE_TOGGLE_LABEL = nls.localize(2, "Match Case");
|
||||
const NLS_WHOLE_WORD_TOGGLE_LABEL = nls.localize(3, "Match Whole Word");
|
||||
const NLS_REGEX_TOGGLE_LABEL = nls.localize(4, "Use Regular Expression");
|
||||
export class CaseSensitiveToggle extends Toggle {
|
||||
constructor(opts) {
|
||||
super({
|
||||
icon: Codicon.caseSensitive,
|
||||
title: NLS_CASE_SENSITIVE_TOGGLE_LABEL + opts.appendTitle,
|
||||
isChecked: opts.isChecked,
|
||||
hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
|
||||
inputActiveOptionBorder: opts.inputActiveOptionBorder,
|
||||
inputActiveOptionForeground: opts.inputActiveOptionForeground,
|
||||
inputActiveOptionBackground: opts.inputActiveOptionBackground
|
||||
});
|
||||
}
|
||||
}
|
||||
export class WholeWordsToggle extends Toggle {
|
||||
constructor(opts) {
|
||||
super({
|
||||
icon: Codicon.wholeWord,
|
||||
title: NLS_WHOLE_WORD_TOGGLE_LABEL + opts.appendTitle,
|
||||
isChecked: opts.isChecked,
|
||||
hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
|
||||
inputActiveOptionBorder: opts.inputActiveOptionBorder,
|
||||
inputActiveOptionForeground: opts.inputActiveOptionForeground,
|
||||
inputActiveOptionBackground: opts.inputActiveOptionBackground
|
||||
});
|
||||
}
|
||||
}
|
||||
export class RegexToggle extends Toggle {
|
||||
constructor(opts) {
|
||||
super({
|
||||
icon: Codicon.regex,
|
||||
title: NLS_REGEX_TOGGLE_LABEL + opts.appendTitle,
|
||||
isChecked: opts.isChecked,
|
||||
hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
|
||||
inputActiveOptionBorder: opts.inputActiveOptionBorder,
|
||||
inputActiveOptionForeground: opts.inputActiveOptionForeground,
|
||||
inputActiveOptionBackground: opts.inputActiveOptionBackground
|
||||
});
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=findInputToggles.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["vs/base/browser/ui/findinput/findInputToggles.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAE3E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,KAAK,GAAG,MAAM,oBAAoB,CAAC;AAW1C,MAAM,+BAA+B,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAiB,EAAE,YAAY,CAAC,CAAC;AACtF,MAAM,2BAA2B,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAkB,EAAE,kBAAkB,CAAC,CAAC;AACzF,MAAM,sBAAsB,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAkB,EAAE,wBAAwB,CAAC,CAAC;AAE1F,MAAM,OAAO,mBAAoB,SAAQ,MAAM;IAC9C,YAAY,IAA0B;QACrC,KAAK,CAAC;YACL,IAAI,EAAE,OAAO,CAAC,aAAa;YAC3B,KAAK,EAAE,+BAA+B,GAAG,IAAI,CAAC,WAAW;YACzD,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,uBAAuB,CAAC,SAAS,CAAC;YACvE,uBAAuB,EAAE,IAAI,CAAC,uBAAuB;YACrD,2BAA2B,EAAE,IAAI,CAAC,2BAA2B;YAC7D,2BAA2B,EAAE,IAAI,CAAC,2BAA2B;SAC7D,CAAC,CAAC;IACJ,CAAC;CACD;AAED,MAAM,OAAO,gBAAiB,SAAQ,MAAM;IAC3C,YAAY,IAA0B;QACrC,KAAK,CAAC;YACL,IAAI,EAAE,OAAO,CAAC,SAAS;YACvB,KAAK,EAAE,2BAA2B,GAAG,IAAI,CAAC,WAAW;YACrD,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,uBAAuB,CAAC,SAAS,CAAC;YACvE,uBAAuB,EAAE,IAAI,CAAC,uBAAuB;YACrD,2BAA2B,EAAE,IAAI,CAAC,2BAA2B;YAC7D,2BAA2B,EAAE,IAAI,CAAC,2BAA2B;SAC7D,CAAC,CAAC;IACJ,CAAC;CACD;AAED,MAAM,OAAO,WAAY,SAAQ,MAAM;IACtC,YAAY,IAA0B;QACrC,KAAK,CAAC;YACL,IAAI,EAAE,OAAO,CAAC,KAAK;YACnB,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAC,WAAW;YAChD,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,uBAAuB,CAAC,SAAS,CAAC;YACvE,uBAAuB,EAAE,IAAI,CAAC,uBAAuB;YACrD,2BAA2B,EAAE,IAAI,CAAC,2BAA2B;YAC7D,2BAA2B,EAAE,IAAI,CAAC,2BAA2B;SAC7D,CAAC,CAAC;IACJ,CAAC;CACD","file":"findInputToggles.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';\nimport { IHoverDelegate } from '../hover/hoverDelegate.js';\nimport { Toggle } from '../toggle/toggle.js';\nimport { Codicon } from '../../../common/codicons.js';\nimport * as nls from '../../../../nls.js';\n\nexport interface IFindInputToggleOpts {\n\treadonly appendTitle: string;\n\treadonly isChecked: boolean;\n\treadonly inputActiveOptionBorder: string | undefined;\n\treadonly inputActiveOptionForeground: string | undefined;\n\treadonly inputActiveOptionBackground: string | undefined;\n\treadonly hoverDelegate?: IHoverDelegate;\n}\n\nconst NLS_CASE_SENSITIVE_TOGGLE_LABEL = nls.localize('caseDescription', \"Match Case\");\nconst NLS_WHOLE_WORD_TOGGLE_LABEL = nls.localize('wordsDescription', \"Match Whole Word\");\nconst NLS_REGEX_TOGGLE_LABEL = nls.localize('regexDescription', \"Use Regular Expression\");\n\nexport class CaseSensitiveToggle extends Toggle {\n\tconstructor(opts: IFindInputToggleOpts) {\n\t\tsuper({\n\t\t\ticon: Codicon.caseSensitive,\n\t\t\ttitle: NLS_CASE_SENSITIVE_TOGGLE_LABEL + opts.appendTitle,\n\t\t\tisChecked: opts.isChecked,\n\t\t\thoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),\n\t\t\tinputActiveOptionBorder: opts.inputActiveOptionBorder,\n\t\t\tinputActiveOptionForeground: opts.inputActiveOptionForeground,\n\t\t\tinputActiveOptionBackground: opts.inputActiveOptionBackground\n\t\t});\n\t}\n}\n\nexport class WholeWordsToggle extends Toggle {\n\tconstructor(opts: IFindInputToggleOpts) {\n\t\tsuper({\n\t\t\ticon: Codicon.wholeWord,\n\t\t\ttitle: NLS_WHOLE_WORD_TOGGLE_LABEL + opts.appendTitle,\n\t\t\tisChecked: opts.isChecked,\n\t\t\thoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),\n\t\t\tinputActiveOptionBorder: opts.inputActiveOptionBorder,\n\t\t\tinputActiveOptionForeground: opts.inputActiveOptionForeground,\n\t\t\tinputActiveOptionBackground: opts.inputActiveOptionBackground\n\t\t});\n\t}\n}\n\nexport class RegexToggle extends Toggle {\n\tconstructor(opts: IFindInputToggleOpts) {\n\t\tsuper({\n\t\t\ticon: Codicon.regex,\n\t\t\ttitle: NLS_REGEX_TOGGLE_LABEL + opts.appendTitle,\n\t\t\tisChecked: opts.isChecked,\n\t\t\thoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),\n\t\t\tinputActiveOptionBorder: opts.inputActiveOptionBorder,\n\t\t\tinputActiveOptionForeground: opts.inputActiveOptionForeground,\n\t\t\tinputActiveOptionBackground: opts.inputActiveOptionBackground\n\t\t});\n\t}\n}\n"]}
|
||||
@@ -0,0 +1,174 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import * as dom from '../../dom.js';
|
||||
import { Toggle } from '../toggle/toggle.js';
|
||||
import { HistoryInputBox } from '../inputbox/inputBox.js';
|
||||
import { Widget } from '../widget.js';
|
||||
import { Codicon } from '../../../common/codicons.js';
|
||||
import { Emitter } from '../../../common/event.js';
|
||||
import './findInput.css';
|
||||
import * as nls from '../../../../nls.js';
|
||||
import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
|
||||
const NLS_DEFAULT_LABEL = nls.localize(5, "input");
|
||||
const NLS_PRESERVE_CASE_LABEL = nls.localize(6, "Preserve Case");
|
||||
class PreserveCaseToggle extends Toggle {
|
||||
constructor(opts) {
|
||||
super({
|
||||
// TODO: does this need its own icon?
|
||||
icon: Codicon.preserveCase,
|
||||
title: NLS_PRESERVE_CASE_LABEL + opts.appendTitle,
|
||||
isChecked: opts.isChecked,
|
||||
hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
|
||||
inputActiveOptionBorder: opts.inputActiveOptionBorder,
|
||||
inputActiveOptionForeground: opts.inputActiveOptionForeground,
|
||||
inputActiveOptionBackground: opts.inputActiveOptionBackground,
|
||||
});
|
||||
}
|
||||
}
|
||||
export class ReplaceInput extends Widget {
|
||||
get onDidOptionChange() { return this._onDidOptionChange.event; }
|
||||
get onKeyDown() { return this._onKeyDown.event; }
|
||||
get onPreserveCaseKeyDown() { return this._onPreserveCaseKeyDown.event; }
|
||||
constructor(parent, contextViewProvider, _showOptionButtons, options) {
|
||||
super();
|
||||
this._showOptionButtons = _showOptionButtons;
|
||||
this.fixFocusOnOptionClickEnabled = true;
|
||||
this.cachedOptionsWidth = 0;
|
||||
this._onDidOptionChange = this._register(new Emitter());
|
||||
this._onKeyDown = this._register(new Emitter());
|
||||
this._onMouseDown = this._register(new Emitter());
|
||||
this._onInput = this._register(new Emitter());
|
||||
this._onKeyUp = this._register(new Emitter());
|
||||
this._onPreserveCaseKeyDown = this._register(new Emitter());
|
||||
this.contextViewProvider = contextViewProvider;
|
||||
this.placeholder = options.placeholder || '';
|
||||
this.validation = options.validation;
|
||||
this.label = options.label || NLS_DEFAULT_LABEL;
|
||||
const appendPreserveCaseLabel = options.appendPreserveCaseLabel || '';
|
||||
const history = options.history || new Set([]);
|
||||
const flexibleHeight = !!options.flexibleHeight;
|
||||
const flexibleWidth = !!options.flexibleWidth;
|
||||
const flexibleMaxHeight = options.flexibleMaxHeight;
|
||||
this.domNode = document.createElement('div');
|
||||
this.domNode.classList.add('monaco-findInput');
|
||||
this.inputBox = this._register(new HistoryInputBox(this.domNode, this.contextViewProvider, {
|
||||
ariaLabel: this.label || '',
|
||||
placeholder: this.placeholder || '',
|
||||
validationOptions: {
|
||||
validation: this.validation
|
||||
},
|
||||
history,
|
||||
showHistoryHint: options.showHistoryHint,
|
||||
flexibleHeight,
|
||||
flexibleWidth,
|
||||
flexibleMaxHeight,
|
||||
inputBoxStyles: options.inputBoxStyles
|
||||
}));
|
||||
this.preserveCase = this._register(new PreserveCaseToggle({
|
||||
appendTitle: appendPreserveCaseLabel,
|
||||
isChecked: false,
|
||||
...options.toggleStyles
|
||||
}));
|
||||
this._register(this.preserveCase.onChange(viaKeyboard => {
|
||||
this._onDidOptionChange.fire(viaKeyboard);
|
||||
if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
|
||||
this.inputBox.focus();
|
||||
}
|
||||
this.validate();
|
||||
}));
|
||||
this._register(this.preserveCase.onKeyDown(e => {
|
||||
this._onPreserveCaseKeyDown.fire(e);
|
||||
}));
|
||||
if (this._showOptionButtons) {
|
||||
this.cachedOptionsWidth = this.preserveCase.width();
|
||||
}
|
||||
else {
|
||||
this.cachedOptionsWidth = 0;
|
||||
}
|
||||
// Arrow-Key support to navigate between options
|
||||
const indexes = [this.preserveCase.domNode];
|
||||
this.onkeydown(this.domNode, (event) => {
|
||||
if (event.equals(15 /* KeyCode.LeftArrow */) || event.equals(17 /* KeyCode.RightArrow */) || event.equals(9 /* KeyCode.Escape */)) {
|
||||
const index = indexes.indexOf(this.domNode.ownerDocument.activeElement);
|
||||
if (index >= 0) {
|
||||
let newIndex = -1;
|
||||
if (event.equals(17 /* KeyCode.RightArrow */)) {
|
||||
newIndex = (index + 1) % indexes.length;
|
||||
}
|
||||
else if (event.equals(15 /* KeyCode.LeftArrow */)) {
|
||||
if (index === 0) {
|
||||
newIndex = indexes.length - 1;
|
||||
}
|
||||
else {
|
||||
newIndex = index - 1;
|
||||
}
|
||||
}
|
||||
if (event.equals(9 /* KeyCode.Escape */)) {
|
||||
indexes[index].blur();
|
||||
this.inputBox.focus();
|
||||
}
|
||||
else if (newIndex >= 0) {
|
||||
indexes[newIndex].focus();
|
||||
}
|
||||
dom.EventHelper.stop(event, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'controls';
|
||||
controls.style.display = this._showOptionButtons ? 'block' : 'none';
|
||||
controls.appendChild(this.preserveCase.domNode);
|
||||
this.domNode.appendChild(controls);
|
||||
parent?.appendChild(this.domNode);
|
||||
this.onkeydown(this.inputBox.inputElement, (e) => this._onKeyDown.fire(e));
|
||||
this.onkeyup(this.inputBox.inputElement, (e) => this._onKeyUp.fire(e));
|
||||
this.oninput(this.inputBox.inputElement, (e) => this._onInput.fire());
|
||||
this.onmousedown(this.inputBox.inputElement, (e) => this._onMouseDown.fire(e));
|
||||
}
|
||||
enable() {
|
||||
this.domNode.classList.remove('disabled');
|
||||
this.inputBox.enable();
|
||||
this.preserveCase.enable();
|
||||
}
|
||||
disable() {
|
||||
this.domNode.classList.add('disabled');
|
||||
this.inputBox.disable();
|
||||
this.preserveCase.disable();
|
||||
}
|
||||
setEnabled(enabled) {
|
||||
if (enabled) {
|
||||
this.enable();
|
||||
}
|
||||
else {
|
||||
this.disable();
|
||||
}
|
||||
}
|
||||
select() {
|
||||
this.inputBox.select();
|
||||
}
|
||||
focus() {
|
||||
this.inputBox.focus();
|
||||
}
|
||||
getPreserveCase() {
|
||||
return this.preserveCase.checked;
|
||||
}
|
||||
setPreserveCase(value) {
|
||||
this.preserveCase.checked = value;
|
||||
}
|
||||
focusOnPreserve() {
|
||||
this.preserveCase.focus();
|
||||
}
|
||||
validate() {
|
||||
this.inputBox?.validate();
|
||||
}
|
||||
set width(newWidth) {
|
||||
this.inputBox.paddingRight = this.cachedOptionsWidth;
|
||||
this.domNode.style.width = newWidth + 'px';
|
||||
}
|
||||
dispose() {
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=replaceInput.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,128 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import * as dom from '../../dom.js';
|
||||
import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
|
||||
import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
|
||||
import { renderLabelWithIcons } from '../iconLabel/iconLabels.js';
|
||||
import { Disposable } from '../../../common/lifecycle.js';
|
||||
import * as objects from '../../../common/objects.js';
|
||||
/**
|
||||
* A widget which can render a label with substring highlights, often
|
||||
* originating from a filter function like the fuzzy matcher.
|
||||
*/
|
||||
export class HighlightedLabel extends Disposable {
|
||||
/**
|
||||
* Create a new {@link HighlightedLabel}.
|
||||
*
|
||||
* @param container The parent container to append to.
|
||||
*/
|
||||
constructor(container, options) {
|
||||
super();
|
||||
this.options = options;
|
||||
this.text = '';
|
||||
this.title = '';
|
||||
this.highlights = [];
|
||||
this.didEverRender = false;
|
||||
this.supportIcons = options?.supportIcons ?? false;
|
||||
this.domNode = dom.append(container, dom.$('span.monaco-highlighted-label'));
|
||||
}
|
||||
/**
|
||||
* The label's DOM node.
|
||||
*/
|
||||
get element() {
|
||||
return this.domNode;
|
||||
}
|
||||
/**
|
||||
* Set the label and highlights.
|
||||
*
|
||||
* @param text The label to display.
|
||||
* @param highlights The ranges to highlight.
|
||||
* @param title An optional title for the hover tooltip.
|
||||
* @param escapeNewLines Whether to escape new lines.
|
||||
* @returns
|
||||
*/
|
||||
set(text, highlights = [], title = '', escapeNewLines) {
|
||||
if (!text) {
|
||||
text = '';
|
||||
}
|
||||
if (escapeNewLines) {
|
||||
// adjusts highlights inplace
|
||||
text = HighlightedLabel.escapeNewLines(text, highlights);
|
||||
}
|
||||
if (this.didEverRender && this.text === text && this.title === title && objects.equals(this.highlights, highlights)) {
|
||||
return;
|
||||
}
|
||||
this.text = text;
|
||||
this.title = title;
|
||||
this.highlights = highlights;
|
||||
this.render();
|
||||
}
|
||||
render() {
|
||||
const children = [];
|
||||
let pos = 0;
|
||||
for (const highlight of this.highlights) {
|
||||
if (highlight.end === highlight.start) {
|
||||
continue;
|
||||
}
|
||||
if (pos < highlight.start) {
|
||||
const substring = this.text.substring(pos, highlight.start);
|
||||
if (this.supportIcons) {
|
||||
children.push(...renderLabelWithIcons(substring));
|
||||
}
|
||||
else {
|
||||
children.push(substring);
|
||||
}
|
||||
pos = highlight.start;
|
||||
}
|
||||
const substring = this.text.substring(pos, highlight.end);
|
||||
const element = dom.$('span.highlight', undefined, ...this.supportIcons ? renderLabelWithIcons(substring) : [substring]);
|
||||
if (highlight.extraClasses) {
|
||||
element.classList.add(...highlight.extraClasses);
|
||||
}
|
||||
children.push(element);
|
||||
pos = highlight.end;
|
||||
}
|
||||
if (pos < this.text.length) {
|
||||
const substring = this.text.substring(pos);
|
||||
if (this.supportIcons) {
|
||||
children.push(...renderLabelWithIcons(substring));
|
||||
}
|
||||
else {
|
||||
children.push(substring);
|
||||
}
|
||||
}
|
||||
dom.reset(this.domNode, ...children);
|
||||
if (!this.customHover && this.title !== '') {
|
||||
const hoverDelegate = this.options?.hoverDelegate ?? getDefaultHoverDelegate('mouse');
|
||||
this.customHover = this._register(getBaseLayerHoverDelegate().setupManagedHover(hoverDelegate, this.domNode, this.title));
|
||||
}
|
||||
else if (this.customHover) {
|
||||
this.customHover.update(this.title);
|
||||
}
|
||||
this.didEverRender = true;
|
||||
}
|
||||
static escapeNewLines(text, highlights) {
|
||||
let total = 0;
|
||||
let extra = 0;
|
||||
return text.replace(/\r\n|\r|\n/g, (match, offset) => {
|
||||
extra = match === '\r\n' ? -1 : 0;
|
||||
offset += total;
|
||||
for (const highlight of highlights) {
|
||||
if (highlight.end <= offset) {
|
||||
continue;
|
||||
}
|
||||
if (highlight.start >= offset) {
|
||||
highlight.start += extra;
|
||||
}
|
||||
if (highlight.end >= offset) {
|
||||
highlight.end += extra;
|
||||
}
|
||||
}
|
||||
total += extra;
|
||||
return '\u23CE';
|
||||
});
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=highlightedLabel.js.map
|
||||
File diff suppressed because one or more lines are too long
10
_internal/editor/esm/vs/base/browser/ui/hover/hover.js
Normal file
10
_internal/editor/esm/vs/base/browser/ui/hover/hover.js
Normal file
@@ -0,0 +1,10 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
export function isManagedHoverTooltipMarkdownString(obj) {
|
||||
const candidate = obj;
|
||||
return typeof candidate === 'object' && 'markdown' in candidate && 'markdownNotSupportedFallback' in candidate;
|
||||
}
|
||||
// #endregion Managed hover
|
||||
//# sourceMappingURL=hover.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,6 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
export {};
|
||||
//# sourceMappingURL=hoverDelegate.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,37 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { Disposable } from '../../../common/lifecycle.js';
|
||||
let baseHoverDelegate = {
|
||||
showInstantHover: () => undefined,
|
||||
showDelayedHover: () => undefined,
|
||||
setupDelayedHover: () => Disposable.None,
|
||||
setupDelayedHoverAtMouse: () => Disposable.None,
|
||||
hideHover: () => undefined,
|
||||
showAndFocusLastHover: () => undefined,
|
||||
setupManagedHover: () => ({
|
||||
dispose: () => undefined,
|
||||
show: () => undefined,
|
||||
hide: () => undefined,
|
||||
update: () => undefined,
|
||||
}),
|
||||
showManagedHover: () => undefined
|
||||
};
|
||||
/**
|
||||
* Sets the hover delegate for use **only in the `base/` layer**.
|
||||
*/
|
||||
export function setBaseLayerHoverDelegate(hoverDelegate) {
|
||||
baseHoverDelegate = hoverDelegate;
|
||||
}
|
||||
/**
|
||||
* Gets the hover delegate for use **only in the `base/` layer**.
|
||||
*
|
||||
* Since the hover service depends on various platform services, this delegate essentially bypasses
|
||||
* the standard dependency injection mechanism by injecting a global hover service at start up. The
|
||||
* only reason this should be used is if `IHoverService` is not available.
|
||||
*/
|
||||
export function getBaseLayerHoverDelegate() {
|
||||
return baseHoverDelegate;
|
||||
}
|
||||
//# sourceMappingURL=hoverDelegate2.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/hover/hoverDelegate2.ts","vs/base/browser/ui/hover/hoverDelegate2.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAG1D,IAAI,iBAAiB,GAAoB;IACxC,gBAAgB,EAAE,GAAG,EAAE,CAAC,SAAS;IACjC,gBAAgB,EAAE,GAAG,EAAE,CAAC,SAAS;IACjC,iBAAiB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI;IACxC,wBAAwB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI;IAC/C,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS;IAC1B,qBAAqB,EAAE,GAAG,EAAE,CAAC,SAAS;IACtC,iBAAiB,EAAE,GAAG,EAAE,CAAC,CAAC;QACzB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS;QACxB,IAAI,EAAE,GAAG,EAAE,CAAC,SAAS;QACrB,IAAI,EAAE,GAAG,EAAE,CAAC,SAAS;QACrB,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS;KACvB,CAAC;IACF,gBAAgB,EAAE,GAAG,EAAE,CAAC,SAAS;CACjC,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,yBAAyB,CAAC,aAA8B;IACvE,iBAAiB,GAAG,aAAa,CAAC;AACnC,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,yBAAyB;IACxC,OAAO,iBAAiB,CAAC;AAC1B,CAAC","file":"hoverDelegate2.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport { Disposable } from '../../../common/lifecycle.js';\nimport { IHoverDelegate2 } from './hover.js';\n\nlet baseHoverDelegate: IHoverDelegate2 = {\n\tshowInstantHover: () => undefined,\n\tshowDelayedHover: () => undefined,\n\tsetupDelayedHover: () => Disposable.None,\n\tsetupDelayedHoverAtMouse: () => Disposable.None,\n\thideHover: () => undefined,\n\tshowAndFocusLastHover: () => undefined,\n\tsetupManagedHover: () => ({\n\t\tdispose: () => undefined,\n\t\tshow: () => undefined,\n\t\thide: () => undefined,\n\t\tupdate: () => undefined,\n\t}),\n\tshowManagedHover: () => undefined\n};\n\n/**\n * Sets the hover delegate for use **only in the `base/` layer**.\n */\nexport function setBaseLayerHoverDelegate(hoverDelegate: IHoverDelegate2): void {\n\tbaseHoverDelegate = hoverDelegate;\n}\n\n/**\n * Gets the hover delegate for use **only in the `base/` layer**.\n *\n * Since the hover service depends on various platform services, this delegate essentially bypasses\n * the standard dependency injection mechanism by injecting a global hover service at start up. The\n * only reason this should be used is if `IHoverService` is not available.\n */\nexport function getBaseLayerHoverDelegate(): IHoverDelegate2 {\n\treturn baseHoverDelegate;\n}\n","/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport { Disposable } from '../../../common/lifecycle.js';\nimport { IHoverDelegate2 } from './hover.js';\n\nlet baseHoverDelegate: IHoverDelegate2 = {\n\tshowInstantHover: () => undefined,\n\tshowDelayedHover: () => undefined,\n\tsetupDelayedHover: () => Disposable.None,\n\tsetupDelayedHoverAtMouse: () => Disposable.None,\n\thideHover: () => undefined,\n\tshowAndFocusLastHover: () => undefined,\n\tsetupManagedHover: () => ({\n\t\tdispose: () => undefined,\n\t\tshow: () => undefined,\n\t\thide: () => undefined,\n\t\tupdate: () => undefined,\n\t}),\n\tshowManagedHover: () => undefined\n};\n\n/**\n * Sets the hover delegate for use **only in the `base/` layer**.\n */\nexport function setBaseLayerHoverDelegate(hoverDelegate: IHoverDelegate2): void {\n\tbaseHoverDelegate = hoverDelegate;\n}\n\n/**\n * Gets the hover delegate for use **only in the `base/` layer**.\n *\n * Since the hover service depends on various platform services, this delegate essentially bypasses\n * the standard dependency injection mechanism by injecting a global hover service at start up. The\n * only reason this should be used is if `IHoverService` is not available.\n */\nexport function getBaseLayerHoverDelegate(): IHoverDelegate2 {\n\treturn baseHoverDelegate;\n}\n"]}
|
||||
@@ -0,0 +1,32 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { Lazy } from '../../../common/lazy.js';
|
||||
const nullHoverDelegateFactory = () => ({
|
||||
get delay() { return -1; },
|
||||
dispose: () => { },
|
||||
showHover: () => { return undefined; },
|
||||
});
|
||||
let hoverDelegateFactory = nullHoverDelegateFactory;
|
||||
const defaultHoverDelegateMouse = new Lazy(() => hoverDelegateFactory('mouse', false));
|
||||
const defaultHoverDelegateElement = new Lazy(() => hoverDelegateFactory('element', false));
|
||||
// TODO: Remove when getDefaultHoverDelegate is no longer used
|
||||
export function setHoverDelegateFactory(hoverDelegateProvider) {
|
||||
hoverDelegateFactory = hoverDelegateProvider;
|
||||
}
|
||||
// TODO: Refine type for use in new IHoverService interface
|
||||
export function getDefaultHoverDelegate(placement) {
|
||||
if (placement === 'element') {
|
||||
return defaultHoverDelegateElement.value;
|
||||
}
|
||||
return defaultHoverDelegateMouse.value;
|
||||
}
|
||||
// TODO: Create equivalent in IHoverService
|
||||
export function createInstantHoverDelegate() {
|
||||
// Creates a hover delegate with instant hover enabled.
|
||||
// This hover belongs to the consumer and requires the them to dispose it.
|
||||
// Instant hover only makes sense for 'element' placement.
|
||||
return hoverDelegateFactory('element', true);
|
||||
}
|
||||
//# sourceMappingURL=hoverDelegateFactory.js.map
|
||||
File diff suppressed because one or more lines are too long
225
_internal/editor/esm/vs/base/browser/ui/hover/hoverWidget.css
Normal file
225
_internal/editor/esm/vs/base/browser/ui/hover/hoverWidget.css
Normal file
@@ -0,0 +1,225 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-hover {
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.5em;
|
||||
white-space: var(--vscode-hover-whiteSpace, normal);
|
||||
}
|
||||
|
||||
.monaco-hover.fade-in {
|
||||
animation: fadein 100ms linear;
|
||||
}
|
||||
|
||||
.monaco-hover.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.monaco-hover a:hover:not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.monaco-hover .hover-contents:not(.html-hover-contents) {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) {
|
||||
max-width: var(--vscode-hover-maxWidth, 500px);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) hr {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.monaco-hover p,
|
||||
.monaco-hover .code,
|
||||
.monaco-hover ul,
|
||||
.monaco-hover h1,
|
||||
.monaco-hover h2,
|
||||
.monaco-hover h3,
|
||||
.monaco-hover h4,
|
||||
.monaco-hover h5,
|
||||
.monaco-hover h6 {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.monaco-hover h1,
|
||||
.monaco-hover h2,
|
||||
.monaco-hover h3,
|
||||
.monaco-hover h4,
|
||||
.monaco-hover h5,
|
||||
.monaco-hover h6 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.monaco-hover code {
|
||||
font-family: var(--monaco-monospace-font);
|
||||
}
|
||||
|
||||
.monaco-hover hr {
|
||||
box-sizing: border-box;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: -4px;
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.monaco-hover p:first-child,
|
||||
.monaco-hover .code:first-child,
|
||||
.monaco-hover ul:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.monaco-hover p:last-child,
|
||||
.monaco-hover .code:last-child,
|
||||
.monaco-hover ul:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* MarkupContent Layout */
|
||||
.monaco-hover ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.monaco-hover ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.monaco-hover li > p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.monaco-hover li > ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.monaco-hover code {
|
||||
border-radius: 3px;
|
||||
padding: 0 0.4em;
|
||||
}
|
||||
|
||||
.monaco-hover .monaco-tokenized-source {
|
||||
white-space: var(--vscode-hover-sourceWhiteSpace, pre-wrap);
|
||||
}
|
||||
|
||||
.monaco-hover .hover-row.status-bar {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.monaco-hover .hover-row.status-bar .info {
|
||||
font-style: italic;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.monaco-hover .hover-row.status-bar .actions {
|
||||
display: flex;
|
||||
padding: 0px 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.monaco-hover .hover-row.status-bar .actions .action-container {
|
||||
margin-right: 16px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-wrap: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.monaco-hover .hover-row.status-bar .actions .action-container .action .icon {
|
||||
padding-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.monaco-hover .hover-row.status-bar .actions .action-container a {
|
||||
color: var(--vscode-textLink-foreground);
|
||||
text-decoration: var(--text-link-decoration);
|
||||
}
|
||||
|
||||
.monaco-hover .hover-row.status-bar .actions .action-container a .icon.codicon {
|
||||
color: var(--vscode-textLink-foreground);
|
||||
}
|
||||
|
||||
.monaco-hover .markdown-hover .hover-contents .codicon {
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.monaco-hover .hover-contents a.code-link:hover,
|
||||
.monaco-hover .hover-contents a.code-link {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.monaco-hover .hover-contents a.code-link:before {
|
||||
content: '(';
|
||||
}
|
||||
|
||||
.monaco-hover .hover-contents a.code-link:after {
|
||||
content: ')';
|
||||
}
|
||||
|
||||
.monaco-hover .hover-contents a.code-link > span {
|
||||
text-decoration: underline;
|
||||
/** Hack to force underline to show **/
|
||||
border-bottom: 1px solid transparent;
|
||||
text-underline-position: under;
|
||||
color: var(--vscode-textLink-foreground);
|
||||
}
|
||||
|
||||
.monaco-hover .hover-contents a.code-link > span:hover {
|
||||
color: var(--vscode-textLink-activeForeground);
|
||||
}
|
||||
|
||||
/**
|
||||
* Spans in markdown hovers need a margin-bottom to avoid looking cramped:
|
||||
* https://github.com/microsoft/vscode/issues/101496
|
||||
|
||||
* This was later refined to only apply when the last child of a rendered markdown block (before the
|
||||
* border or a `hr`) uses background color:
|
||||
* https://github.com/microsoft/vscode/issues/228136
|
||||
*/
|
||||
.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) p:last-child [style*="background-color"] {
|
||||
margin-bottom: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a slight margin to try vertically align codicons with any text
|
||||
* https://github.com/microsoft/vscode/issues/221359
|
||||
*/
|
||||
.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span.codicon {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.monaco-hover-content .action-container a {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.monaco-hover-content .action-container.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Prevent text selection in all button-like elements within hovers */
|
||||
.monaco-hover .action-container,
|
||||
.monaco-hover .action,
|
||||
.monaco-hover button,
|
||||
.monaco-hover .monaco-button,
|
||||
.monaco-hover .monaco-text-button,
|
||||
.monaco-hover [role="button"] {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
91
_internal/editor/esm/vs/base/browser/ui/hover/hoverWidget.js
Normal file
91
_internal/editor/esm/vs/base/browser/ui/hover/hoverWidget.js
Normal file
@@ -0,0 +1,91 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import * as dom from '../../dom.js';
|
||||
import { StandardKeyboardEvent } from '../../keyboardEvent.js';
|
||||
import { DomScrollableElement } from '../scrollbar/scrollableElement.js';
|
||||
import { Disposable } from '../../../common/lifecycle.js';
|
||||
import './hoverWidget.css';
|
||||
import { localize } from '../../../../nls.js';
|
||||
const $ = dom.$;
|
||||
export class HoverWidget extends Disposable {
|
||||
constructor(fadeIn) {
|
||||
super();
|
||||
this.containerDomNode = document.createElement('div');
|
||||
this.containerDomNode.className = 'monaco-hover';
|
||||
this.containerDomNode.classList.toggle('fade-in', !!fadeIn);
|
||||
this.containerDomNode.tabIndex = 0;
|
||||
this.containerDomNode.setAttribute('role', 'tooltip');
|
||||
this.contentsDomNode = document.createElement('div');
|
||||
this.contentsDomNode.className = 'monaco-hover-content';
|
||||
this.scrollbar = this._register(new DomScrollableElement(this.contentsDomNode, {
|
||||
consumeMouseWheelIfScrollbarIsNeeded: true
|
||||
}));
|
||||
this.containerDomNode.appendChild(this.scrollbar.getDomNode());
|
||||
}
|
||||
onContentsChanged() {
|
||||
this.scrollbar.scanDomNode();
|
||||
}
|
||||
}
|
||||
export class HoverAction extends Disposable {
|
||||
static render(parent, actionOptions, keybindingLabel) {
|
||||
return new HoverAction(parent, actionOptions, keybindingLabel);
|
||||
}
|
||||
constructor(parent, actionOptions, keybindingLabel) {
|
||||
super();
|
||||
this.actionLabel = actionOptions.label;
|
||||
this.actionKeybindingLabel = keybindingLabel;
|
||||
this.actionContainer = dom.append(parent, $('div.action-container'));
|
||||
this.actionContainer.setAttribute('tabindex', '0');
|
||||
this.action = dom.append(this.actionContainer, $('a.action'));
|
||||
this.action.setAttribute('role', 'button');
|
||||
if (actionOptions.iconClass) {
|
||||
const iconElement = dom.append(this.action, $(`span.icon`));
|
||||
iconElement.classList.add(...actionOptions.iconClass.split(' '));
|
||||
}
|
||||
this.actionRenderedLabel = keybindingLabel ? `${actionOptions.label} (${keybindingLabel})` : actionOptions.label;
|
||||
const label = dom.append(this.action, $('span'));
|
||||
label.textContent = this.actionRenderedLabel;
|
||||
this._store.add(new ClickAction(this.actionContainer, actionOptions.run));
|
||||
this._store.add(new KeyDownAction(this.actionContainer, actionOptions.run, [3 /* KeyCode.Enter */, 10 /* KeyCode.Space */]));
|
||||
this.setEnabled(true);
|
||||
}
|
||||
setEnabled(enabled) {
|
||||
if (enabled) {
|
||||
this.actionContainer.classList.remove('disabled');
|
||||
this.actionContainer.removeAttribute('aria-disabled');
|
||||
}
|
||||
else {
|
||||
this.actionContainer.classList.add('disabled');
|
||||
this.actionContainer.setAttribute('aria-disabled', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
export function getHoverAccessibleViewHint(shouldHaveHint, keybinding) {
|
||||
return shouldHaveHint && keybinding ? localize(7, "Inspect this in the accessible view with {0}.", keybinding) : shouldHaveHint ? localize(8, "Inspect this in the accessible view via the command Open Accessible View which is currently not triggerable via keybinding.") : '';
|
||||
}
|
||||
export class ClickAction extends Disposable {
|
||||
constructor(container, run) {
|
||||
super();
|
||||
this._register(dom.addDisposableListener(container, dom.EventType.CLICK, e => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
run(container);
|
||||
}));
|
||||
}
|
||||
}
|
||||
export class KeyDownAction extends Disposable {
|
||||
constructor(container, run, keyCodes) {
|
||||
super();
|
||||
this._register(dom.addDisposableListener(container, dom.EventType.KEY_DOWN, e => {
|
||||
const event = new StandardKeyboardEvent(e);
|
||||
if (keyCodes.some(keyCode => event.equals(keyCode))) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
run(container);
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=hoverWidget.js.map
|
||||
File diff suppressed because one or more lines are too long
274
_internal/editor/esm/vs/base/browser/ui/iconLabel/iconLabel.js
Normal file
274
_internal/editor/esm/vs/base/browser/ui/iconLabel/iconLabel.js
Normal file
@@ -0,0 +1,274 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import './iconlabel.css';
|
||||
import * as dom from '../../dom.js';
|
||||
import * as css from '../../cssValue.js';
|
||||
import { HighlightedLabel } from '../highlightedlabel/highlightedLabel.js';
|
||||
import { Disposable } from '../../../common/lifecycle.js';
|
||||
import { equals } from '../../../common/objects.js';
|
||||
import { Range } from '../../../common/range.js';
|
||||
import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
|
||||
import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
|
||||
class FastLabelNode {
|
||||
constructor(_element) {
|
||||
this._element = _element;
|
||||
}
|
||||
get element() {
|
||||
return this._element;
|
||||
}
|
||||
set textContent(content) {
|
||||
if (this.disposed || content === this._textContent) {
|
||||
return;
|
||||
}
|
||||
this._textContent = content;
|
||||
this._element.textContent = content;
|
||||
}
|
||||
set classNames(classNames) {
|
||||
if (this.disposed || equals(classNames, this._classNames)) {
|
||||
return;
|
||||
}
|
||||
this._classNames = classNames;
|
||||
this._element.classList.value = '';
|
||||
this._element.classList.add(...classNames);
|
||||
}
|
||||
set empty(empty) {
|
||||
if (this.disposed || empty === this._empty) {
|
||||
return;
|
||||
}
|
||||
this._empty = empty;
|
||||
this._element.style.marginLeft = empty ? '0' : '';
|
||||
}
|
||||
dispose() {
|
||||
this.disposed = true;
|
||||
}
|
||||
}
|
||||
export class IconLabel extends Disposable {
|
||||
constructor(container, options) {
|
||||
super();
|
||||
this.customHovers = new Map();
|
||||
this.creationOptions = options;
|
||||
this.domNode = this._register(new FastLabelNode(dom.append(container, dom.$('.monaco-icon-label'))));
|
||||
this.labelContainer = dom.append(this.domNode.element, dom.$('.monaco-icon-label-container'));
|
||||
this.nameContainer = dom.append(this.labelContainer, dom.$('span.monaco-icon-name-container'));
|
||||
if (options?.supportHighlights || options?.supportIcons) {
|
||||
this.nameNode = this._register(new LabelWithHighlights(this.nameContainer, !!options.supportIcons));
|
||||
}
|
||||
else {
|
||||
this.nameNode = new Label(this.nameContainer);
|
||||
}
|
||||
this.hoverDelegate = options?.hoverDelegate ?? getDefaultHoverDelegate('mouse');
|
||||
}
|
||||
get element() {
|
||||
return this.domNode.element;
|
||||
}
|
||||
setLabel(label, description, options) {
|
||||
const labelClasses = ['monaco-icon-label'];
|
||||
const containerClasses = ['monaco-icon-label-container'];
|
||||
let ariaLabel = '';
|
||||
if (options) {
|
||||
if (options.extraClasses) {
|
||||
labelClasses.push(...options.extraClasses);
|
||||
}
|
||||
if (options.italic) {
|
||||
labelClasses.push('italic');
|
||||
}
|
||||
if (options.strikethrough) {
|
||||
labelClasses.push('strikethrough');
|
||||
}
|
||||
if (options.disabledCommand) {
|
||||
containerClasses.push('disabled');
|
||||
}
|
||||
if (options.title) {
|
||||
if (typeof options.title === 'string') {
|
||||
ariaLabel += options.title;
|
||||
}
|
||||
else {
|
||||
ariaLabel += label;
|
||||
}
|
||||
}
|
||||
}
|
||||
const existingIconNode = this.domNode.element.querySelector('.monaco-icon-label-iconpath');
|
||||
if (options?.iconPath) {
|
||||
let iconNode;
|
||||
if (!existingIconNode || !(dom.isHTMLElement(existingIconNode))) {
|
||||
iconNode = dom.$('.monaco-icon-label-iconpath');
|
||||
this.domNode.element.prepend(iconNode);
|
||||
}
|
||||
else {
|
||||
iconNode = existingIconNode;
|
||||
}
|
||||
iconNode.style.backgroundImage = css.asCSSUrl(options?.iconPath);
|
||||
iconNode.style.backgroundRepeat = 'no-repeat';
|
||||
iconNode.style.backgroundPosition = 'center';
|
||||
iconNode.style.backgroundSize = 'contain';
|
||||
}
|
||||
else if (existingIconNode) {
|
||||
existingIconNode.remove();
|
||||
}
|
||||
this.domNode.classNames = labelClasses;
|
||||
this.domNode.element.setAttribute('aria-label', ariaLabel);
|
||||
this.labelContainer.classList.value = '';
|
||||
this.labelContainer.classList.add(...containerClasses);
|
||||
this.setupHover(options?.descriptionTitle ? this.labelContainer : this.element, options?.title);
|
||||
this.nameNode.setLabel(label, options);
|
||||
if (description || this.descriptionNode) {
|
||||
const descriptionNode = this.getOrCreateDescriptionNode();
|
||||
if (descriptionNode instanceof HighlightedLabel) {
|
||||
descriptionNode.set(description || '', options ? options.descriptionMatches : undefined, undefined, options?.labelEscapeNewLines);
|
||||
this.setupHover(descriptionNode.element, options?.descriptionTitle);
|
||||
}
|
||||
else {
|
||||
descriptionNode.textContent = description && options?.labelEscapeNewLines ? HighlightedLabel.escapeNewLines(description, []) : (description || '');
|
||||
this.setupHover(descriptionNode.element, options?.descriptionTitle || '');
|
||||
descriptionNode.empty = !description;
|
||||
}
|
||||
}
|
||||
if (options?.suffix || this.suffixNode) {
|
||||
const suffixNode = this.getOrCreateSuffixNode();
|
||||
suffixNode.textContent = options?.suffix ?? '';
|
||||
}
|
||||
}
|
||||
setupHover(htmlElement, tooltip) {
|
||||
const previousCustomHover = this.customHovers.get(htmlElement);
|
||||
if (previousCustomHover) {
|
||||
previousCustomHover.dispose();
|
||||
this.customHovers.delete(htmlElement);
|
||||
}
|
||||
if (!tooltip) {
|
||||
htmlElement.removeAttribute('title');
|
||||
return;
|
||||
}
|
||||
let hoverTarget = htmlElement;
|
||||
if (this.creationOptions?.hoverTargetOverride) {
|
||||
if (!dom.isAncestor(htmlElement, this.creationOptions.hoverTargetOverride)) {
|
||||
throw new Error('hoverTargetOverrride must be an ancestor of the htmlElement');
|
||||
}
|
||||
hoverTarget = this.creationOptions.hoverTargetOverride;
|
||||
}
|
||||
const hoverDisposable = getBaseLayerHoverDelegate().setupManagedHover(this.hoverDelegate, hoverTarget, tooltip);
|
||||
if (hoverDisposable) {
|
||||
this.customHovers.set(htmlElement, hoverDisposable);
|
||||
}
|
||||
}
|
||||
dispose() {
|
||||
super.dispose();
|
||||
for (const disposable of this.customHovers.values()) {
|
||||
disposable.dispose();
|
||||
}
|
||||
this.customHovers.clear();
|
||||
}
|
||||
getOrCreateSuffixNode() {
|
||||
if (!this.suffixNode) {
|
||||
const suffixContainer = this._register(new FastLabelNode(dom.after(this.nameContainer, dom.$('span.monaco-icon-suffix-container'))));
|
||||
this.suffixNode = this._register(new FastLabelNode(dom.append(suffixContainer.element, dom.$('span.label-suffix'))));
|
||||
}
|
||||
return this.suffixNode;
|
||||
}
|
||||
getOrCreateDescriptionNode() {
|
||||
if (!this.descriptionNode) {
|
||||
const descriptionContainer = this._register(new FastLabelNode(dom.append(this.labelContainer, dom.$('span.monaco-icon-description-container'))));
|
||||
if (this.creationOptions?.supportDescriptionHighlights) {
|
||||
this.descriptionNode = this._register(new HighlightedLabel(dom.append(descriptionContainer.element, dom.$('span.label-description')), { supportIcons: !!this.creationOptions.supportIcons }));
|
||||
}
|
||||
else {
|
||||
this.descriptionNode = this._register(new FastLabelNode(dom.append(descriptionContainer.element, dom.$('span.label-description'))));
|
||||
}
|
||||
}
|
||||
return this.descriptionNode;
|
||||
}
|
||||
}
|
||||
class Label {
|
||||
constructor(container) {
|
||||
this.container = container;
|
||||
this.label = undefined;
|
||||
this.singleLabel = undefined;
|
||||
}
|
||||
setLabel(label, options) {
|
||||
if (this.label === label && equals(this.options, options)) {
|
||||
return;
|
||||
}
|
||||
this.label = label;
|
||||
this.options = options;
|
||||
if (typeof label === 'string') {
|
||||
if (!this.singleLabel) {
|
||||
this.container.textContent = '';
|
||||
this.container.classList.remove('multiple');
|
||||
this.singleLabel = dom.append(this.container, dom.$('a.label-name', { id: options?.domId }));
|
||||
}
|
||||
this.singleLabel.textContent = label;
|
||||
}
|
||||
else {
|
||||
this.container.textContent = '';
|
||||
this.container.classList.add('multiple');
|
||||
this.singleLabel = undefined;
|
||||
for (let i = 0; i < label.length; i++) {
|
||||
const l = label[i];
|
||||
const id = options?.domId && `${options?.domId}_${i}`;
|
||||
dom.append(this.container, dom.$('a.label-name', { id, 'data-icon-label-count': label.length, 'data-icon-label-index': i, 'role': 'treeitem' }, l));
|
||||
if (i < label.length - 1) {
|
||||
dom.append(this.container, dom.$('span.label-separator', undefined, options?.separator || '/'));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function splitMatches(labels, separator, matches) {
|
||||
if (!matches) {
|
||||
return undefined;
|
||||
}
|
||||
let labelStart = 0;
|
||||
return labels.map(label => {
|
||||
const labelRange = { start: labelStart, end: labelStart + label.length };
|
||||
const result = matches
|
||||
.map(match => Range.intersect(labelRange, match))
|
||||
.filter(range => !Range.isEmpty(range))
|
||||
.map(({ start, end }) => ({ start: start - labelStart, end: end - labelStart }));
|
||||
labelStart = labelRange.end + separator.length;
|
||||
return result;
|
||||
});
|
||||
}
|
||||
class LabelWithHighlights extends Disposable {
|
||||
constructor(container, supportIcons) {
|
||||
super();
|
||||
this.container = container;
|
||||
this.supportIcons = supportIcons;
|
||||
this.label = undefined;
|
||||
this.singleLabel = undefined;
|
||||
}
|
||||
setLabel(label, options) {
|
||||
if (this.label === label && equals(this.options, options)) {
|
||||
return;
|
||||
}
|
||||
this.label = label;
|
||||
this.options = options;
|
||||
if (typeof label === 'string') {
|
||||
if (!this.singleLabel) {
|
||||
this.container.textContent = '';
|
||||
this.container.classList.remove('multiple');
|
||||
this.singleLabel = this._register(new HighlightedLabel(dom.append(this.container, dom.$('a.label-name', { id: options?.domId })), { supportIcons: this.supportIcons }));
|
||||
}
|
||||
this.singleLabel.set(label, options?.matches, undefined, options?.labelEscapeNewLines);
|
||||
}
|
||||
else {
|
||||
this.container.textContent = '';
|
||||
this.container.classList.add('multiple');
|
||||
this.singleLabel = undefined;
|
||||
const separator = options?.separator || '/';
|
||||
const matches = splitMatches(label, separator, options?.matches);
|
||||
for (let i = 0; i < label.length; i++) {
|
||||
const l = label[i];
|
||||
const m = matches ? matches[i] : undefined;
|
||||
const id = options?.domId && `${options?.domId}_${i}`;
|
||||
const name = dom.$('a.label-name', { id, 'data-icon-label-count': label.length, 'data-icon-label-index': i, 'role': 'treeitem' });
|
||||
const highlightedLabel = this._register(new HighlightedLabel(dom.append(this.container, name), { supportIcons: this.supportIcons }));
|
||||
highlightedLabel.set(l, m, undefined, options?.labelEscapeNewLines);
|
||||
if (i < label.length - 1) {
|
||||
dom.append(name, dom.$('span.label-separator', undefined, separator));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=iconLabel.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,31 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import * as dom from '../../dom.js';
|
||||
import { ThemeIcon } from '../../../common/themables.js';
|
||||
const labelWithIconsRegex = new RegExp(`(\\\\)?\\$\\((${ThemeIcon.iconNameExpression}(?:${ThemeIcon.iconModifierExpression})?)\\)`, 'g');
|
||||
export function renderLabelWithIcons(text) {
|
||||
const elements = new Array();
|
||||
let match;
|
||||
let textStart = 0, textStop = 0;
|
||||
while ((match = labelWithIconsRegex.exec(text)) !== null) {
|
||||
textStop = match.index || 0;
|
||||
if (textStart < textStop) {
|
||||
elements.push(text.substring(textStart, textStop));
|
||||
}
|
||||
textStart = (match.index || 0) + match[0].length;
|
||||
const [, escaped, codicon] = match;
|
||||
elements.push(escaped ? `$(${codicon})` : renderIcon({ id: codicon }));
|
||||
}
|
||||
if (textStart < text.length) {
|
||||
elements.push(text.substring(textStart));
|
||||
}
|
||||
return elements;
|
||||
}
|
||||
export function renderIcon(icon) {
|
||||
const node = dom.$(`span`);
|
||||
node.classList.add(...ThemeIcon.asClassNameArray(icon));
|
||||
return node;
|
||||
}
|
||||
//# sourceMappingURL=iconLabels.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/iconLabel/iconLabels.ts","vs/base/browser/ui/iconLabel/iconLabels.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,GAAG,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,MAAM,mBAAmB,GAAG,IAAI,MAAM,CAAC,iBAAiB,SAAS,CAAC,kBAAkB,MAAM,SAAS,CAAC,sBAAsB,QAAQ,EAAE,GAAG,CAAC,CAAC;AACzI,MAAM,UAAU,oBAAoB,CAAC,IAAY;IAChD,MAAM,QAAQ,GAAG,IAAI,KAAK,EAA4B,CAAC;IACvD,IAAI,KAA6B,CAAC;IAElC,IAAI,SAAS,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC;IAChC,OAAO,CAAC,KAAK,GAAG,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;QAC1D,QAAQ,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;QAC5B,IAAI,SAAS,GAAG,QAAQ,EAAE,CAAC;YAC1B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;QACpD,CAAC;QACD,SAAS,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QAEjD,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC;QACnC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC;IAED,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1C,CAAC;IACD,OAAO,QAAQ,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,IAAe;IACzC,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAC3B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;IACxD,OAAO,IAAI,CAAC;AACb,CAAC","file":"iconLabels.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as dom from '../../dom.js';\nimport { ThemeIcon } from '../../../common/themables.js';\n\nconst labelWithIconsRegex = new RegExp(`(\\\\\\\\)?\\\\$\\\\((${ThemeIcon.iconNameExpression}(?:${ThemeIcon.iconModifierExpression})?)\\\\)`, 'g');\nexport function renderLabelWithIcons(text: string): Array<HTMLSpanElement | string> {\n\tconst elements = new Array<HTMLSpanElement | string>();\n\tlet match: RegExpExecArray | null;\n\n\tlet textStart = 0, textStop = 0;\n\twhile ((match = labelWithIconsRegex.exec(text)) !== null) {\n\t\ttextStop = match.index || 0;\n\t\tif (textStart < textStop) {\n\t\t\telements.push(text.substring(textStart, textStop));\n\t\t}\n\t\ttextStart = (match.index || 0) + match[0].length;\n\n\t\tconst [, escaped, codicon] = match;\n\t\telements.push(escaped ? `$(${codicon})` : renderIcon({ id: codicon }));\n\t}\n\n\tif (textStart < text.length) {\n\t\telements.push(text.substring(textStart));\n\t}\n\treturn elements;\n}\n\nexport function renderIcon(icon: ThemeIcon): HTMLSpanElement {\n\tconst node = dom.$(`span`);\n\tnode.classList.add(...ThemeIcon.asClassNameArray(icon));\n\treturn node;\n}\n","/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as dom from '../../dom.js';\nimport { ThemeIcon } from '../../../common/themables.js';\n\nconst labelWithIconsRegex = new RegExp(`(\\\\\\\\)?\\\\$\\\\((${ThemeIcon.iconNameExpression}(?:${ThemeIcon.iconModifierExpression})?)\\\\)`, 'g');\nexport function renderLabelWithIcons(text: string): Array<HTMLSpanElement | string> {\n\tconst elements = new Array<HTMLSpanElement | string>();\n\tlet match: RegExpExecArray | null;\n\n\tlet textStart = 0, textStop = 0;\n\twhile ((match = labelWithIconsRegex.exec(text)) !== null) {\n\t\ttextStop = match.index || 0;\n\t\tif (textStart < textStop) {\n\t\t\telements.push(text.substring(textStart, textStop));\n\t\t}\n\t\ttextStart = (match.index || 0) + match[0].length;\n\n\t\tconst [, escaped, codicon] = match;\n\t\telements.push(escaped ? `$(${codicon})` : renderIcon({ id: codicon }));\n\t}\n\n\tif (textStart < text.length) {\n\t\telements.push(text.substring(textStart));\n\t}\n\treturn elements;\n}\n\nexport function renderIcon(icon: ThemeIcon): HTMLSpanElement {\n\tconst node = dom.$(`span`);\n\tnode.classList.add(...ThemeIcon.asClassNameArray(icon));\n\treturn node;\n}\n"]}
|
||||
115
_internal/editor/esm/vs/base/browser/ui/iconLabel/iconlabel.css
Normal file
115
_internal/editor/esm/vs/base/browser/ui/iconLabel/iconlabel.css
Normal file
@@ -0,0 +1,115 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
/* ---------- Icon label ---------- */
|
||||
|
||||
.monaco-icon-label {
|
||||
display: flex; /* required for icons support :before rule */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.monaco-icon-label::before {
|
||||
|
||||
/* svg icons rendered as background image */
|
||||
background-size: 16px;
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
padding-right: 6px;
|
||||
width: 16px;
|
||||
height: 22px;
|
||||
line-height: inherit !important;
|
||||
display: inline-block;
|
||||
|
||||
/* fonts icons */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
vertical-align: top;
|
||||
|
||||
flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */
|
||||
}
|
||||
|
||||
.monaco-icon-label-iconpath {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding-left: 2px;
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.monaco-icon-label-container.disabled {
|
||||
color: var(--vscode-disabledForeground);
|
||||
}
|
||||
.monaco-icon-label > .monaco-icon-label-container {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
|
||||
color: inherit;
|
||||
white-space: pre; /* enable to show labels that include multiple whitespaces */
|
||||
}
|
||||
|
||||
.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator {
|
||||
margin: 0 2px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
|
||||
opacity: .7;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
|
||||
opacity: .7;
|
||||
margin-left: 0.5em;
|
||||
font-size: 0.9em;
|
||||
white-space: pre; /* enable to show labels that include multiple whitespaces */
|
||||
}
|
||||
|
||||
.monaco-icon-label.nowrap > .monaco-icon-label-container > .monaco-icon-description-container > .label-description{
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.vs .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
|
||||
.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.monaco-icon-label.deprecated {
|
||||
text-decoration: line-through;
|
||||
opacity: 0.66;
|
||||
}
|
||||
|
||||
.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
|
||||
.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.monaco-icon-label::after {
|
||||
opacity: 0.75;
|
||||
font-size: 90%;
|
||||
font-weight: 600;
|
||||
margin: auto 16px 0 5px; /* https://github.com/microsoft/vscode/issues/113223 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* make sure selection color wins when a label is being selected */
|
||||
.monaco-list:focus .selected .monaco-icon-label, /* list */
|
||||
.monaco-list:focus .selected .monaco-icon-label::after
|
||||
{
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.monaco-list-row.focused.selected .label-description,
|
||||
.monaco-list-row.selected .label-description {
|
||||
opacity: .8;
|
||||
}
|
||||
106
_internal/editor/esm/vs/base/browser/ui/inputbox/inputBox.css
Normal file
106
_internal/editor/esm/vs/base/browser/ui/inputbox/inputBox.css
Normal file
@@ -0,0 +1,106 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-inputbox {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
|
||||
/* Customizable */
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.monaco-inputbox > .ibwrapper > .input,
|
||||
.monaco-inputbox > .ibwrapper > .mirror {
|
||||
|
||||
/* Customizable */
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.monaco-inputbox > .ibwrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.monaco-inputbox > .ibwrapper > .input {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: inherit;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
resize: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.monaco-inputbox > .ibwrapper > input {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.monaco-inputbox > .ibwrapper > textarea.input {
|
||||
display: block;
|
||||
scrollbar-width: none; /* Firefox: hide scrollbars */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.monaco-inputbox > .ibwrapper > textarea.input::-webkit-scrollbar {
|
||||
display: none; /* Chrome + Safari: hide scrollbar */
|
||||
}
|
||||
|
||||
.monaco-inputbox > .ibwrapper > textarea.input.empty {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.monaco-inputbox > .ibwrapper > .mirror {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
white-space: pre-wrap;
|
||||
visibility: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Context view */
|
||||
|
||||
.monaco-inputbox-container {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.monaco-inputbox-container .monaco-inputbox-message {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.4em;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
margin-top: -1px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Action bar support */
|
||||
.monaco-inputbox .monaco-action-bar {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.monaco-inputbox .monaco-action-bar .action-item {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.monaco-inputbox .monaco-action-bar .action-item .codicon {
|
||||
background-repeat: no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
522
_internal/editor/esm/vs/base/browser/ui/inputbox/inputBox.js
Normal file
522
_internal/editor/esm/vs/base/browser/ui/inputbox/inputBox.js
Normal file
@@ -0,0 +1,522 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import * as dom from '../../dom.js';
|
||||
import * as cssJs from '../../cssValue.js';
|
||||
import { DomEmitter } from '../../event.js';
|
||||
import { renderFormattedText, renderText } from '../../formattedTextRenderer.js';
|
||||
import { ActionBar } from '../actionbar/actionbar.js';
|
||||
import * as aria from '../aria/aria.js';
|
||||
import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
|
||||
import { ScrollableElement } from '../scrollbar/scrollableElement.js';
|
||||
import { Widget } from '../widget.js';
|
||||
import { Emitter, Event } from '../../../common/event.js';
|
||||
import { HistoryNavigator } from '../../../common/history.js';
|
||||
import { equals } from '../../../common/objects.js';
|
||||
import './inputBox.css';
|
||||
import * as nls from '../../../../nls.js';
|
||||
import { MutableDisposable } from '../../../common/lifecycle.js';
|
||||
const $ = dom.$;
|
||||
export const unthemedInboxStyles = {
|
||||
inputBackground: '#3C3C3C',
|
||||
inputForeground: '#CCCCCC',
|
||||
inputValidationInfoBorder: '#55AAFF',
|
||||
inputValidationInfoBackground: '#063B49',
|
||||
inputValidationWarningBorder: '#B89500',
|
||||
inputValidationWarningBackground: '#352A05',
|
||||
inputValidationErrorBorder: '#BE1100',
|
||||
inputValidationErrorBackground: '#5A1D1D',
|
||||
inputBorder: undefined,
|
||||
inputValidationErrorForeground: undefined,
|
||||
inputValidationInfoForeground: undefined,
|
||||
inputValidationWarningForeground: undefined
|
||||
};
|
||||
export class InputBox extends Widget {
|
||||
get onDidChange() { return this._onDidChange.event; }
|
||||
get onDidHeightChange() { return this._onDidHeightChange.event; }
|
||||
constructor(container, contextViewProvider, options) {
|
||||
super();
|
||||
this.state = 'idle';
|
||||
this.maxHeight = Number.POSITIVE_INFINITY;
|
||||
this.hover = this._register(new MutableDisposable());
|
||||
this._onDidChange = this._register(new Emitter());
|
||||
this._onDidHeightChange = this._register(new Emitter());
|
||||
this.contextViewProvider = contextViewProvider;
|
||||
this.options = options;
|
||||
this.message = null;
|
||||
this.placeholder = this.options.placeholder || '';
|
||||
this.tooltip = this.options.tooltip ?? (this.placeholder || '');
|
||||
this.ariaLabel = this.options.ariaLabel || '';
|
||||
if (this.options.validationOptions) {
|
||||
this.validation = this.options.validationOptions.validation;
|
||||
}
|
||||
this.element = dom.append(container, $('.monaco-inputbox.idle'));
|
||||
const tagName = this.options.flexibleHeight ? 'textarea' : 'input';
|
||||
const wrapper = dom.append(this.element, $('.ibwrapper'));
|
||||
this.input = dom.append(wrapper, $(tagName + '.input.empty'));
|
||||
this.input.setAttribute('autocorrect', 'off');
|
||||
this.input.setAttribute('autocapitalize', 'off');
|
||||
this.input.setAttribute('spellcheck', 'false');
|
||||
this.onfocus(this.input, () => this.element.classList.add('synthetic-focus'));
|
||||
this.onblur(this.input, () => this.element.classList.remove('synthetic-focus'));
|
||||
if (this.options.flexibleHeight) {
|
||||
this.maxHeight = typeof this.options.flexibleMaxHeight === 'number' ? this.options.flexibleMaxHeight : Number.POSITIVE_INFINITY;
|
||||
this.mirror = dom.append(wrapper, $('div.mirror'));
|
||||
this.mirror.innerText = '\u00a0';
|
||||
this.scrollableElement = new ScrollableElement(this.element, { vertical: 1 /* ScrollbarVisibility.Auto */ });
|
||||
if (this.options.flexibleWidth) {
|
||||
this.input.setAttribute('wrap', 'off');
|
||||
this.mirror.style.whiteSpace = 'pre';
|
||||
this.mirror.style.wordWrap = 'initial';
|
||||
}
|
||||
dom.append(container, this.scrollableElement.getDomNode());
|
||||
this._register(this.scrollableElement);
|
||||
// from ScrollableElement to DOM
|
||||
this._register(this.scrollableElement.onScroll(e => this.input.scrollTop = e.scrollTop));
|
||||
const onSelectionChange = this._register(new DomEmitter(container.ownerDocument, 'selectionchange'));
|
||||
const onAnchoredSelectionChange = Event.filter(onSelectionChange.event, () => {
|
||||
const selection = container.ownerDocument.getSelection();
|
||||
return selection?.anchorNode === wrapper;
|
||||
});
|
||||
// from DOM to ScrollableElement
|
||||
this._register(onAnchoredSelectionChange(this.updateScrollDimensions, this));
|
||||
this._register(this.onDidHeightChange(this.updateScrollDimensions, this));
|
||||
}
|
||||
else {
|
||||
this.input.type = this.options.type || 'text';
|
||||
this.input.setAttribute('wrap', 'off');
|
||||
}
|
||||
if (this.ariaLabel) {
|
||||
this.input.setAttribute('aria-label', this.ariaLabel);
|
||||
}
|
||||
if (this.placeholder && !this.options.showPlaceholderOnFocus) {
|
||||
this.setPlaceHolder(this.placeholder);
|
||||
}
|
||||
if (this.tooltip) {
|
||||
this.setTooltip(this.tooltip);
|
||||
}
|
||||
this.oninput(this.input, () => this.onValueChange());
|
||||
this.onblur(this.input, () => this.onBlur());
|
||||
this.onfocus(this.input, () => this.onFocus());
|
||||
this._register(this.ignoreGesture(this.input));
|
||||
setTimeout(() => this.updateMirror(), 0);
|
||||
// Support actions
|
||||
if (this.options.actions) {
|
||||
this.actionbar = this._register(new ActionBar(this.element));
|
||||
this.actionbar.push(this.options.actions, { icon: true, label: false });
|
||||
}
|
||||
this.applyStyles();
|
||||
}
|
||||
onBlur() {
|
||||
this._hideMessage();
|
||||
if (this.options.showPlaceholderOnFocus) {
|
||||
this.input.setAttribute('placeholder', '');
|
||||
}
|
||||
}
|
||||
onFocus() {
|
||||
this._showMessage();
|
||||
if (this.options.showPlaceholderOnFocus) {
|
||||
this.input.setAttribute('placeholder', this.placeholder || '');
|
||||
}
|
||||
}
|
||||
setPlaceHolder(placeHolder) {
|
||||
this.placeholder = placeHolder;
|
||||
this.input.setAttribute('placeholder', placeHolder);
|
||||
}
|
||||
setTooltip(tooltip) {
|
||||
this.tooltip = tooltip;
|
||||
if (!this.hover.value) {
|
||||
this.hover.value = this._register(getBaseLayerHoverDelegate().setupDelayedHoverAtMouse(this.input, () => ({
|
||||
content: this.tooltip,
|
||||
appearance: {
|
||||
compact: true,
|
||||
}
|
||||
})));
|
||||
}
|
||||
}
|
||||
get inputElement() {
|
||||
return this.input;
|
||||
}
|
||||
get value() {
|
||||
return this.input.value;
|
||||
}
|
||||
set value(newValue) {
|
||||
if (this.input.value !== newValue) {
|
||||
this.input.value = newValue;
|
||||
this.onValueChange();
|
||||
}
|
||||
}
|
||||
get height() {
|
||||
return typeof this.cachedHeight === 'number' ? this.cachedHeight : dom.getTotalHeight(this.element);
|
||||
}
|
||||
focus() {
|
||||
this.input.focus();
|
||||
}
|
||||
blur() {
|
||||
this.input.blur();
|
||||
}
|
||||
hasFocus() {
|
||||
return dom.isActiveElement(this.input);
|
||||
}
|
||||
select(range = null) {
|
||||
this.input.select();
|
||||
if (range) {
|
||||
this.input.setSelectionRange(range.start, range.end);
|
||||
if (range.end === this.input.value.length) {
|
||||
this.input.scrollLeft = this.input.scrollWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
isSelectionAtEnd() {
|
||||
return this.input.selectionEnd === this.input.value.length && this.input.selectionStart === this.input.selectionEnd;
|
||||
}
|
||||
getSelection() {
|
||||
const selectionStart = this.input.selectionStart;
|
||||
if (selectionStart === null) {
|
||||
return null;
|
||||
}
|
||||
const selectionEnd = this.input.selectionEnd ?? selectionStart;
|
||||
return {
|
||||
start: selectionStart,
|
||||
end: selectionEnd,
|
||||
};
|
||||
}
|
||||
enable() {
|
||||
this.input.removeAttribute('disabled');
|
||||
}
|
||||
disable() {
|
||||
this.blur();
|
||||
this.input.disabled = true;
|
||||
this._hideMessage();
|
||||
}
|
||||
set paddingRight(paddingRight) {
|
||||
// Set width to avoid hint text overlapping buttons
|
||||
this.input.style.width = `calc(100% - ${paddingRight}px)`;
|
||||
if (this.mirror) {
|
||||
this.mirror.style.paddingRight = paddingRight + 'px';
|
||||
}
|
||||
}
|
||||
updateScrollDimensions() {
|
||||
if (typeof this.cachedContentHeight !== 'number' || typeof this.cachedHeight !== 'number' || !this.scrollableElement) {
|
||||
return;
|
||||
}
|
||||
const scrollHeight = this.cachedContentHeight;
|
||||
const height = this.cachedHeight;
|
||||
const scrollTop = this.input.scrollTop;
|
||||
this.scrollableElement.setScrollDimensions({ scrollHeight, height });
|
||||
this.scrollableElement.setScrollPosition({ scrollTop });
|
||||
}
|
||||
showMessage(message, force) {
|
||||
if (this.state === 'open' && equals(this.message, message)) {
|
||||
// Already showing
|
||||
return;
|
||||
}
|
||||
this.message = message;
|
||||
this.element.classList.remove('idle');
|
||||
this.element.classList.remove('info');
|
||||
this.element.classList.remove('warning');
|
||||
this.element.classList.remove('error');
|
||||
this.element.classList.add(this.classForType(message.type));
|
||||
const styles = this.stylesForType(this.message.type);
|
||||
this.element.style.border = `1px solid ${cssJs.asCssValueWithDefault(styles.border, 'transparent')}`;
|
||||
if (this.message.content && (this.hasFocus() || force)) {
|
||||
this._showMessage();
|
||||
}
|
||||
}
|
||||
hideMessage() {
|
||||
this.message = null;
|
||||
this.element.classList.remove('info');
|
||||
this.element.classList.remove('warning');
|
||||
this.element.classList.remove('error');
|
||||
this.element.classList.add('idle');
|
||||
this._hideMessage();
|
||||
this.applyStyles();
|
||||
}
|
||||
validate() {
|
||||
let errorMsg = null;
|
||||
if (this.validation) {
|
||||
errorMsg = this.validation(this.value);
|
||||
if (errorMsg) {
|
||||
this.inputElement.setAttribute('aria-invalid', 'true');
|
||||
this.showMessage(errorMsg);
|
||||
}
|
||||
else if (this.inputElement.hasAttribute('aria-invalid')) {
|
||||
this.inputElement.removeAttribute('aria-invalid');
|
||||
this.hideMessage();
|
||||
}
|
||||
}
|
||||
return errorMsg?.type;
|
||||
}
|
||||
stylesForType(type) {
|
||||
const styles = this.options.inputBoxStyles;
|
||||
switch (type) {
|
||||
case 1 /* MessageType.INFO */: return { border: styles.inputValidationInfoBorder, background: styles.inputValidationInfoBackground, foreground: styles.inputValidationInfoForeground };
|
||||
case 2 /* MessageType.WARNING */: return { border: styles.inputValidationWarningBorder, background: styles.inputValidationWarningBackground, foreground: styles.inputValidationWarningForeground };
|
||||
default: return { border: styles.inputValidationErrorBorder, background: styles.inputValidationErrorBackground, foreground: styles.inputValidationErrorForeground };
|
||||
}
|
||||
}
|
||||
classForType(type) {
|
||||
switch (type) {
|
||||
case 1 /* MessageType.INFO */: return 'info';
|
||||
case 2 /* MessageType.WARNING */: return 'warning';
|
||||
default: return 'error';
|
||||
}
|
||||
}
|
||||
_showMessage() {
|
||||
if (!this.contextViewProvider || !this.message) {
|
||||
return;
|
||||
}
|
||||
let div;
|
||||
const layout = () => div.style.width = dom.getTotalWidth(this.element) + 'px';
|
||||
this.contextViewProvider.showContextView({
|
||||
getAnchor: () => this.element,
|
||||
anchorAlignment: 1 /* AnchorAlignment.RIGHT */,
|
||||
render: (container) => {
|
||||
if (!this.message) {
|
||||
return null;
|
||||
}
|
||||
div = dom.append(container, $('.monaco-inputbox-container'));
|
||||
layout();
|
||||
const spanElement = $('span.monaco-inputbox-message');
|
||||
if (this.message.formatContent) {
|
||||
renderFormattedText(this.message.content, undefined, spanElement);
|
||||
}
|
||||
else {
|
||||
renderText(this.message.content, undefined, spanElement);
|
||||
}
|
||||
spanElement.classList.add(this.classForType(this.message.type));
|
||||
const styles = this.stylesForType(this.message.type);
|
||||
spanElement.style.backgroundColor = styles.background ?? '';
|
||||
spanElement.style.color = styles.foreground ?? '';
|
||||
spanElement.style.border = styles.border ? `1px solid ${styles.border}` : '';
|
||||
dom.append(div, spanElement);
|
||||
return null;
|
||||
},
|
||||
onHide: () => {
|
||||
this.state = 'closed';
|
||||
},
|
||||
layout: layout
|
||||
});
|
||||
// ARIA Support
|
||||
let alertText;
|
||||
if (this.message.type === 3 /* MessageType.ERROR */) {
|
||||
alertText = nls.localize(9, "Error: {0}", this.message.content);
|
||||
}
|
||||
else if (this.message.type === 2 /* MessageType.WARNING */) {
|
||||
alertText = nls.localize(10, "Warning: {0}", this.message.content);
|
||||
}
|
||||
else {
|
||||
alertText = nls.localize(11, "Info: {0}", this.message.content);
|
||||
}
|
||||
aria.alert(alertText);
|
||||
this.state = 'open';
|
||||
}
|
||||
_hideMessage() {
|
||||
if (!this.contextViewProvider) {
|
||||
return;
|
||||
}
|
||||
if (this.state === 'open') {
|
||||
this.contextViewProvider.hideContextView();
|
||||
}
|
||||
this.state = 'idle';
|
||||
}
|
||||
onValueChange() {
|
||||
this._onDidChange.fire(this.value);
|
||||
this.validate();
|
||||
this.updateMirror();
|
||||
this.input.classList.toggle('empty', !this.value);
|
||||
if (this.state === 'open' && this.contextViewProvider) {
|
||||
this.contextViewProvider.layout();
|
||||
}
|
||||
}
|
||||
updateMirror() {
|
||||
if (!this.mirror) {
|
||||
return;
|
||||
}
|
||||
const value = this.value;
|
||||
const lastCharCode = value.charCodeAt(value.length - 1);
|
||||
const suffix = lastCharCode === 10 ? ' ' : '';
|
||||
const mirrorTextContent = (value + suffix)
|
||||
.replace(/\u000c/g, ''); // Don't measure with the form feed character, which messes up sizing
|
||||
if (mirrorTextContent) {
|
||||
this.mirror.textContent = value + suffix;
|
||||
}
|
||||
else {
|
||||
this.mirror.innerText = '\u00a0';
|
||||
}
|
||||
this.layout();
|
||||
}
|
||||
applyStyles() {
|
||||
const styles = this.options.inputBoxStyles;
|
||||
const background = styles.inputBackground ?? '';
|
||||
const foreground = styles.inputForeground ?? '';
|
||||
const border = styles.inputBorder ?? '';
|
||||
this.element.style.backgroundColor = background;
|
||||
this.element.style.color = foreground;
|
||||
this.input.style.backgroundColor = 'inherit';
|
||||
this.input.style.color = foreground;
|
||||
// there's always a border, even if the color is not set.
|
||||
this.element.style.border = `1px solid ${cssJs.asCssValueWithDefault(border, 'transparent')}`;
|
||||
}
|
||||
layout() {
|
||||
if (!this.mirror) {
|
||||
return;
|
||||
}
|
||||
const previousHeight = this.cachedContentHeight;
|
||||
this.cachedContentHeight = dom.getTotalHeight(this.mirror);
|
||||
if (previousHeight !== this.cachedContentHeight) {
|
||||
this.cachedHeight = Math.min(this.cachedContentHeight, this.maxHeight);
|
||||
this.input.style.height = this.cachedHeight + 'px';
|
||||
this._onDidHeightChange.fire(this.cachedContentHeight);
|
||||
}
|
||||
}
|
||||
insertAtCursor(text) {
|
||||
const inputElement = this.inputElement;
|
||||
const start = inputElement.selectionStart;
|
||||
const end = inputElement.selectionEnd;
|
||||
const content = inputElement.value;
|
||||
if (start !== null && end !== null) {
|
||||
this.value = content.substr(0, start) + text + content.substr(end);
|
||||
inputElement.setSelectionRange(start + 1, start + 1);
|
||||
this.layout();
|
||||
}
|
||||
}
|
||||
dispose() {
|
||||
this._hideMessage();
|
||||
this.message = null;
|
||||
this.actionbar?.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
export class HistoryInputBox extends InputBox {
|
||||
constructor(container, contextViewProvider, options) {
|
||||
const NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_NO_PARENS = nls.localize(12, ' or {0} for history', `\u21C5`);
|
||||
|
||||
|
||||
|
||||
const NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_IN_PARENS = nls.localize(13, ' ({0} for history)', `\u21C5`);
|
||||
|
||||
|
||||
|
||||
super(container, contextViewProvider, options);
|
||||
this._onDidFocus = this._register(new Emitter());
|
||||
this.onDidFocus = this._onDidFocus.event;
|
||||
this._onDidBlur = this._register(new Emitter());
|
||||
this.onDidBlur = this._onDidBlur.event;
|
||||
this.history = this._register(new HistoryNavigator(options.history, 100));
|
||||
// Function to append the history suffix to the placeholder if necessary
|
||||
const addSuffix = () => {
|
||||
if (options.showHistoryHint && options.showHistoryHint() && !this.placeholder.endsWith(NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_NO_PARENS) && !this.placeholder.endsWith(NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_IN_PARENS) && this.history.getHistory().length) {
|
||||
const suffix = this.placeholder.endsWith(')') ? NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_NO_PARENS : NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_IN_PARENS;
|
||||
const suffixedPlaceholder = this.placeholder + suffix;
|
||||
if (options.showPlaceholderOnFocus && !dom.isActiveElement(this.input)) {
|
||||
this.placeholder = suffixedPlaceholder;
|
||||
}
|
||||
else {
|
||||
this.setPlaceHolder(suffixedPlaceholder);
|
||||
}
|
||||
}
|
||||
};
|
||||
// Spot the change to the textarea class attribute which occurs when it changes between non-empty and empty,
|
||||
// and add the history suffix to the placeholder if not yet present
|
||||
this.observer = new MutationObserver((mutationList, observer) => {
|
||||
mutationList.forEach((mutation) => {
|
||||
if (!mutation.target.textContent) {
|
||||
addSuffix();
|
||||
}
|
||||
});
|
||||
});
|
||||
this.observer.observe(this.input, { attributeFilter: ['class'] });
|
||||
this.onfocus(this.input, () => addSuffix());
|
||||
this.onblur(this.input, () => {
|
||||
const resetPlaceholder = (historyHint) => {
|
||||
if (!this.placeholder.endsWith(historyHint)) {
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
const revertedPlaceholder = this.placeholder.slice(0, this.placeholder.length - historyHint.length);
|
||||
if (options.showPlaceholderOnFocus) {
|
||||
this.placeholder = revertedPlaceholder;
|
||||
}
|
||||
else {
|
||||
this.setPlaceHolder(revertedPlaceholder);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
};
|
||||
if (!resetPlaceholder(NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_IN_PARENS)) {
|
||||
resetPlaceholder(NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_NO_PARENS);
|
||||
}
|
||||
});
|
||||
}
|
||||
dispose() {
|
||||
super.dispose();
|
||||
if (this.observer) {
|
||||
this.observer.disconnect();
|
||||
this.observer = undefined;
|
||||
}
|
||||
}
|
||||
addToHistory(always) {
|
||||
if (this.value && (always || this.value !== this.getCurrentValue())) {
|
||||
this.history.add(this.value);
|
||||
}
|
||||
}
|
||||
isAtLastInHistory() {
|
||||
return this.history.isLast();
|
||||
}
|
||||
isNowhereInHistory() {
|
||||
return this.history.isNowhere();
|
||||
}
|
||||
showNextValue() {
|
||||
if (!this.history.has(this.value)) {
|
||||
this.addToHistory();
|
||||
}
|
||||
let next = this.getNextValue();
|
||||
if (next) {
|
||||
next = next === this.value ? this.getNextValue() : next;
|
||||
}
|
||||
this.value = next ?? '';
|
||||
aria.status(this.value ? this.value : nls.localize(14, "Cleared Input"));
|
||||
}
|
||||
showPreviousValue() {
|
||||
if (!this.history.has(this.value)) {
|
||||
this.addToHistory();
|
||||
}
|
||||
let previous = this.getPreviousValue();
|
||||
if (previous) {
|
||||
previous = previous === this.value ? this.getPreviousValue() : previous;
|
||||
}
|
||||
if (previous) {
|
||||
this.value = previous;
|
||||
aria.status(this.value);
|
||||
}
|
||||
}
|
||||
setPlaceHolder(placeHolder) {
|
||||
super.setPlaceHolder(placeHolder);
|
||||
this.setTooltip(placeHolder);
|
||||
}
|
||||
onBlur() {
|
||||
super.onBlur();
|
||||
this._onDidBlur.fire();
|
||||
}
|
||||
onFocus() {
|
||||
super.onFocus();
|
||||
this._onDidFocus.fire();
|
||||
}
|
||||
getCurrentValue() {
|
||||
let currentValue = this.history.current();
|
||||
if (!currentValue) {
|
||||
currentValue = this.history.last();
|
||||
this.history.next();
|
||||
}
|
||||
return currentValue;
|
||||
}
|
||||
getPreviousValue() {
|
||||
return this.history.previous() || this.history.first();
|
||||
}
|
||||
getNextValue() {
|
||||
return this.history.next();
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=inputBox.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,37 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-keybinding {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.monaco-keybinding > .monaco-keybinding-key {
|
||||
display: inline-block;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
font-size: 11px;
|
||||
padding: 3px 5px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.monaco-keybinding > .monaco-keybinding-key:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.monaco-keybinding > .monaco-keybinding-key:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.monaco-keybinding > .monaco-keybinding-key-separator {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.monaco-keybinding > .monaco-keybinding-key-chord-separator {
|
||||
width: 6px;
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import * as dom from '../../dom.js';
|
||||
import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
|
||||
import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
|
||||
import { UILabelProvider } from '../../../common/keybindingLabels.js';
|
||||
import { Disposable } from '../../../common/lifecycle.js';
|
||||
import { equals } from '../../../common/objects.js';
|
||||
import './keybindingLabel.css';
|
||||
import { localize } from '../../../../nls.js';
|
||||
const $ = dom.$;
|
||||
export const unthemedKeybindingLabelOptions = {
|
||||
keybindingLabelBackground: undefined,
|
||||
keybindingLabelForeground: undefined,
|
||||
keybindingLabelBorder: undefined,
|
||||
keybindingLabelBottomBorder: undefined,
|
||||
keybindingLabelShadow: undefined
|
||||
};
|
||||
export class KeybindingLabel extends Disposable {
|
||||
constructor(container, os, options) {
|
||||
super();
|
||||
this.os = os;
|
||||
this.keyElements = new Set();
|
||||
this.options = options || Object.create(null);
|
||||
const labelForeground = this.options.keybindingLabelForeground;
|
||||
this.domNode = dom.append(container, $('.monaco-keybinding'));
|
||||
if (labelForeground) {
|
||||
this.domNode.style.color = labelForeground;
|
||||
}
|
||||
this.hover = this._register(getBaseLayerHoverDelegate().setupManagedHover(getDefaultHoverDelegate('mouse'), this.domNode, ''));
|
||||
this.didEverRender = false;
|
||||
container.appendChild(this.domNode);
|
||||
}
|
||||
set(keybinding, matches) {
|
||||
if (this.didEverRender && this.keybinding === keybinding && KeybindingLabel.areSame(this.matches, matches)) {
|
||||
return;
|
||||
}
|
||||
this.keybinding = keybinding;
|
||||
this.matches = matches;
|
||||
this.render();
|
||||
}
|
||||
render() {
|
||||
this.clear();
|
||||
if (this.keybinding) {
|
||||
const chords = this.keybinding.getChords();
|
||||
if (chords[0]) {
|
||||
this.renderChord(this.domNode, chords[0], this.matches ? this.matches.firstPart : null);
|
||||
}
|
||||
for (let i = 1; i < chords.length; i++) {
|
||||
dom.append(this.domNode, $('span.monaco-keybinding-key-chord-separator', undefined, ' '));
|
||||
this.renderChord(this.domNode, chords[i], this.matches ? this.matches.chordPart : null);
|
||||
}
|
||||
const title = (this.options.disableTitle ?? false) ? undefined : this.keybinding.getAriaLabel() || undefined;
|
||||
this.hover.update(title);
|
||||
this.domNode.setAttribute('aria-label', title || '');
|
||||
}
|
||||
else if (this.options && this.options.renderUnboundKeybindings) {
|
||||
this.renderUnbound(this.domNode);
|
||||
}
|
||||
this.didEverRender = true;
|
||||
}
|
||||
clear() {
|
||||
dom.clearNode(this.domNode);
|
||||
this.keyElements.clear();
|
||||
}
|
||||
renderChord(parent, chord, match) {
|
||||
const modifierLabels = UILabelProvider.modifierLabels[this.os];
|
||||
if (chord.ctrlKey) {
|
||||
this.renderKey(parent, modifierLabels.ctrlKey, Boolean(match?.ctrlKey), modifierLabels.separator);
|
||||
}
|
||||
if (chord.shiftKey) {
|
||||
this.renderKey(parent, modifierLabels.shiftKey, Boolean(match?.shiftKey), modifierLabels.separator);
|
||||
}
|
||||
if (chord.altKey) {
|
||||
this.renderKey(parent, modifierLabels.altKey, Boolean(match?.altKey), modifierLabels.separator);
|
||||
}
|
||||
if (chord.metaKey) {
|
||||
this.renderKey(parent, modifierLabels.metaKey, Boolean(match?.metaKey), modifierLabels.separator);
|
||||
}
|
||||
const keyLabel = chord.keyLabel;
|
||||
if (keyLabel) {
|
||||
this.renderKey(parent, keyLabel, Boolean(match?.keyCode), '');
|
||||
}
|
||||
}
|
||||
renderKey(parent, label, highlight, separator) {
|
||||
dom.append(parent, this.createKeyElement(label, highlight ? '.highlight' : ''));
|
||||
if (separator) {
|
||||
dom.append(parent, $('span.monaco-keybinding-key-separator', undefined, separator));
|
||||
}
|
||||
}
|
||||
renderUnbound(parent) {
|
||||
dom.append(parent, this.createKeyElement(localize(15, "Unbound")));
|
||||
}
|
||||
createKeyElement(label, extraClass = '') {
|
||||
const keyElement = $('span.monaco-keybinding-key' + extraClass, undefined, label);
|
||||
this.keyElements.add(keyElement);
|
||||
if (this.options.keybindingLabelBackground) {
|
||||
keyElement.style.backgroundColor = this.options.keybindingLabelBackground;
|
||||
}
|
||||
if (this.options.keybindingLabelBorder) {
|
||||
keyElement.style.borderColor = this.options.keybindingLabelBorder;
|
||||
}
|
||||
if (this.options.keybindingLabelBottomBorder) {
|
||||
keyElement.style.borderBottomColor = this.options.keybindingLabelBottomBorder;
|
||||
}
|
||||
if (this.options.keybindingLabelShadow) {
|
||||
keyElement.style.boxShadow = `inset 0 -1px 0 ${this.options.keybindingLabelShadow}`;
|
||||
}
|
||||
return keyElement;
|
||||
}
|
||||
static areSame(a, b) {
|
||||
if (a === b || (!a && !b)) {
|
||||
return true;
|
||||
}
|
||||
return !!a && !!b && equals(a.firstPart, b.firstPart) && equals(a.chordPart, b.chordPart);
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=keybindingLabel.js.map
|
||||
File diff suppressed because one or more lines are too long
81
_internal/editor/esm/vs/base/browser/ui/list/list.css
Normal file
81
_internal/editor/esm/vs/base/browser/ui/list/list.css
Normal file
@@ -0,0 +1,81 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-list {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.monaco-list.mouse-support {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.monaco-list > .monaco-scrollable-element {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.monaco-list-rows {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.monaco-list.horizontal-scrolling .monaco-list-rows {
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.monaco-list-row {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.monaco-list.mouse-support .monaco-list-row {
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* Make sure the scrollbar renders above overlays (sticky scroll) */
|
||||
.monaco-list .monaco-scrollable-element > .scrollbar.vertical,
|
||||
.monaco-pane-view > .monaco-split-view2.vertical > .monaco-scrollable-element > .scrollbar.vertical {
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
/* for OS X ballistic scrolling */
|
||||
.monaco-list-row.scrolling {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.monaco-list.element-focused,
|
||||
.monaco-list.selection-single,
|
||||
.monaco-list.selection-multiple {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
/* Filter */
|
||||
|
||||
.monaco-list-type-filter-message {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 40px 1em 1em 1em;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.monaco-list-type-filter-message:empty {
|
||||
display: none;
|
||||
}
|
||||
10
_internal/editor/esm/vs/base/browser/ui/list/list.js
Normal file
10
_internal/editor/esm/vs/base/browser/ui/list/list.js
Normal file
@@ -0,0 +1,10 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
export class ListError extends Error {
|
||||
constructor(user, message) {
|
||||
super(`ListError [${user}] ${message}`);
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=list.js.map
|
||||
1
_internal/editor/esm/vs/base/browser/ui/list/list.js.map
Normal file
1
_internal/editor/esm/vs/base/browser/ui/list/list.js.map
Normal file
File diff suppressed because one or more lines are too long
122
_internal/editor/esm/vs/base/browser/ui/list/listPaging.js
Normal file
122
_internal/editor/esm/vs/base/browser/ui/list/listPaging.js
Normal file
@@ -0,0 +1,122 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { range } from '../../../common/arrays.js';
|
||||
import { CancellationTokenSource } from '../../../common/cancellation.js';
|
||||
import { Event } from '../../../common/event.js';
|
||||
import { Disposable } from '../../../common/lifecycle.js';
|
||||
import './list.css';
|
||||
import { List } from './listWidget.js';
|
||||
class PagedRenderer {
|
||||
get templateId() { return this.renderer.templateId; }
|
||||
constructor(renderer, modelProvider) {
|
||||
this.renderer = renderer;
|
||||
this.modelProvider = modelProvider;
|
||||
}
|
||||
renderTemplate(container) {
|
||||
const data = this.renderer.renderTemplate(container);
|
||||
return { data, disposable: Disposable.None };
|
||||
}
|
||||
renderElement(index, _, data, details) {
|
||||
data.disposable?.dispose();
|
||||
if (!data.data) {
|
||||
return;
|
||||
}
|
||||
const model = this.modelProvider();
|
||||
if (model.isResolved(index)) {
|
||||
return this.renderer.renderElement(model.get(index), index, data.data, details);
|
||||
}
|
||||
const cts = new CancellationTokenSource();
|
||||
const promise = model.resolve(index, cts.token);
|
||||
data.disposable = { dispose: () => cts.cancel() };
|
||||
this.renderer.renderPlaceholder(index, data.data);
|
||||
promise.then(entry => this.renderer.renderElement(entry, index, data.data, details));
|
||||
}
|
||||
disposeTemplate(data) {
|
||||
if (data.disposable) {
|
||||
data.disposable.dispose();
|
||||
data.disposable = undefined;
|
||||
}
|
||||
if (data.data) {
|
||||
this.renderer.disposeTemplate(data.data);
|
||||
data.data = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
class PagedAccessibilityProvider {
|
||||
constructor(modelProvider, accessibilityProvider) {
|
||||
this.modelProvider = modelProvider;
|
||||
this.accessibilityProvider = accessibilityProvider;
|
||||
}
|
||||
getWidgetAriaLabel() {
|
||||
return this.accessibilityProvider.getWidgetAriaLabel();
|
||||
}
|
||||
getAriaLabel(index) {
|
||||
const model = this.modelProvider();
|
||||
if (!model.isResolved(index)) {
|
||||
return null;
|
||||
}
|
||||
return this.accessibilityProvider.getAriaLabel(model.get(index));
|
||||
}
|
||||
}
|
||||
function fromPagedListOptions(modelProvider, options) {
|
||||
return {
|
||||
...options,
|
||||
accessibilityProvider: options.accessibilityProvider && new PagedAccessibilityProvider(modelProvider, options.accessibilityProvider)
|
||||
};
|
||||
}
|
||||
export class PagedList {
|
||||
constructor(user, container, virtualDelegate, renderers, options = {}) {
|
||||
const modelProvider = () => this.model;
|
||||
const pagedRenderers = renderers.map(r => new PagedRenderer(r, modelProvider));
|
||||
this.list = new List(user, container, virtualDelegate, pagedRenderers, fromPagedListOptions(modelProvider, options));
|
||||
}
|
||||
updateOptions(options) {
|
||||
this.list.updateOptions(options);
|
||||
}
|
||||
getHTMLElement() {
|
||||
return this.list.getHTMLElement();
|
||||
}
|
||||
get onDidFocus() {
|
||||
return this.list.onDidFocus;
|
||||
}
|
||||
get widget() {
|
||||
return this.list;
|
||||
}
|
||||
get onDidDispose() {
|
||||
return this.list.onDidDispose;
|
||||
}
|
||||
get onMouseDblClick() {
|
||||
return Event.map(this.list.onMouseDblClick, ({ element, index, browserEvent }) => ({ element: element === undefined ? undefined : this._model.get(element), index, browserEvent }));
|
||||
}
|
||||
get onPointer() {
|
||||
return Event.map(this.list.onPointer, ({ element, index, browserEvent }) => ({ element: element === undefined ? undefined : this._model.get(element), index, browserEvent }));
|
||||
}
|
||||
get onDidChangeSelection() {
|
||||
return Event.map(this.list.onDidChangeSelection, ({ elements, indexes, browserEvent }) => ({ elements: elements.map(e => this._model.get(e)), indexes, browserEvent }));
|
||||
}
|
||||
get model() {
|
||||
return this._model;
|
||||
}
|
||||
set model(model) {
|
||||
this._model = model;
|
||||
this.list.splice(0, this.list.length, range(model.length));
|
||||
}
|
||||
getFocus() {
|
||||
return this.list.getFocus();
|
||||
}
|
||||
getSelection() {
|
||||
return this.list.getSelection();
|
||||
}
|
||||
getSelectedElements() {
|
||||
return this.getSelection().map(i => this.model.get(i));
|
||||
}
|
||||
style(styles) {
|
||||
this.list.style(styles);
|
||||
}
|
||||
dispose() {
|
||||
this.list.dispose();
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=listPaging.js.map
|
||||
File diff suppressed because one or more lines are too long
1170
_internal/editor/esm/vs/base/browser/ui/list/listView.js
Normal file
1170
_internal/editor/esm/vs/base/browser/ui/list/listView.js
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
1532
_internal/editor/esm/vs/base/browser/ui/list/listWidget.js
Normal file
1532
_internal/editor/esm/vs/base/browser/ui/list/listWidget.js
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
159
_internal/editor/esm/vs/base/browser/ui/list/rangeMap.js
Normal file
159
_internal/editor/esm/vs/base/browser/ui/list/rangeMap.js
Normal file
@@ -0,0 +1,159 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { Range } from '../../../common/range.js';
|
||||
/**
|
||||
* Returns the intersection between a ranged group and a range.
|
||||
* Returns `[]` if the intersection is empty.
|
||||
*/
|
||||
export function groupIntersect(range, groups) {
|
||||
const result = [];
|
||||
for (const r of groups) {
|
||||
if (range.start >= r.range.end) {
|
||||
continue;
|
||||
}
|
||||
if (range.end < r.range.start) {
|
||||
break;
|
||||
}
|
||||
const intersection = Range.intersect(range, r.range);
|
||||
if (Range.isEmpty(intersection)) {
|
||||
continue;
|
||||
}
|
||||
result.push({
|
||||
range: intersection,
|
||||
size: r.size
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* Shifts a range by that `much`.
|
||||
*/
|
||||
export function shift({ start, end }, much) {
|
||||
return { start: start + much, end: end + much };
|
||||
}
|
||||
/**
|
||||
* Consolidates a collection of ranged groups.
|
||||
*
|
||||
* Consolidation is the process of merging consecutive ranged groups
|
||||
* that share the same `size`.
|
||||
*/
|
||||
export function consolidate(groups) {
|
||||
const result = [];
|
||||
let previousGroup = null;
|
||||
for (const group of groups) {
|
||||
const start = group.range.start;
|
||||
const end = group.range.end;
|
||||
const size = group.size;
|
||||
if (previousGroup && size === previousGroup.size) {
|
||||
previousGroup.range.end = end;
|
||||
continue;
|
||||
}
|
||||
previousGroup = { range: { start, end }, size };
|
||||
result.push(previousGroup);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* Concatenates several collections of ranged groups into a single
|
||||
* collection.
|
||||
*/
|
||||
function concat(...groups) {
|
||||
return consolidate(groups.reduce((r, g) => r.concat(g), []));
|
||||
}
|
||||
export class RangeMap {
|
||||
get paddingTop() {
|
||||
return this._paddingTop;
|
||||
}
|
||||
set paddingTop(paddingTop) {
|
||||
this._size = this._size + paddingTop - this._paddingTop;
|
||||
this._paddingTop = paddingTop;
|
||||
}
|
||||
constructor(topPadding) {
|
||||
this.groups = [];
|
||||
this._size = 0;
|
||||
this._paddingTop = 0;
|
||||
this._paddingTop = topPadding ?? 0;
|
||||
this._size = this._paddingTop;
|
||||
}
|
||||
splice(index, deleteCount, items = []) {
|
||||
const diff = items.length - deleteCount;
|
||||
const before = groupIntersect({ start: 0, end: index }, this.groups);
|
||||
const after = groupIntersect({ start: index + deleteCount, end: Number.POSITIVE_INFINITY }, this.groups)
|
||||
.map(g => ({ range: shift(g.range, diff), size: g.size }));
|
||||
const middle = items.map((item, i) => ({
|
||||
range: { start: index + i, end: index + i + 1 },
|
||||
size: item.size
|
||||
}));
|
||||
this.groups = concat(before, middle, after);
|
||||
this._size = this._paddingTop + this.groups.reduce((t, g) => t + (g.size * (g.range.end - g.range.start)), 0);
|
||||
}
|
||||
/**
|
||||
* Returns the number of items in the range map.
|
||||
*/
|
||||
get count() {
|
||||
const len = this.groups.length;
|
||||
if (!len) {
|
||||
return 0;
|
||||
}
|
||||
return this.groups[len - 1].range.end;
|
||||
}
|
||||
/**
|
||||
* Returns the sum of the sizes of all items in the range map.
|
||||
*/
|
||||
get size() {
|
||||
return this._size;
|
||||
}
|
||||
/**
|
||||
* Returns the index of the item at the given position.
|
||||
*/
|
||||
indexAt(position) {
|
||||
if (position < 0) {
|
||||
return -1;
|
||||
}
|
||||
if (position < this._paddingTop) {
|
||||
return 0;
|
||||
}
|
||||
let index = 0;
|
||||
let size = this._paddingTop;
|
||||
for (const group of this.groups) {
|
||||
const count = group.range.end - group.range.start;
|
||||
const newSize = size + (count * group.size);
|
||||
if (position < newSize) {
|
||||
return index + Math.floor((position - size) / group.size);
|
||||
}
|
||||
index += count;
|
||||
size = newSize;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
/**
|
||||
* Returns the index of the item right after the item at the
|
||||
* index of the given position.
|
||||
*/
|
||||
indexAfter(position) {
|
||||
return Math.min(this.indexAt(position) + 1, this.count);
|
||||
}
|
||||
/**
|
||||
* Returns the start position of the item at the given index.
|
||||
*/
|
||||
positionAt(index) {
|
||||
if (index < 0) {
|
||||
return -1;
|
||||
}
|
||||
let position = 0;
|
||||
let count = 0;
|
||||
for (const group of this.groups) {
|
||||
const groupCount = group.range.end - group.range.start;
|
||||
const newCount = count + groupCount;
|
||||
if (index < newCount) {
|
||||
return this._paddingTop + position + ((index - count) * group.size);
|
||||
}
|
||||
position += groupCount * group.size;
|
||||
count = newCount;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=rangeMap.js.map
|
||||
File diff suppressed because one or more lines are too long
108
_internal/editor/esm/vs/base/browser/ui/list/rowCache.js
Normal file
108
_internal/editor/esm/vs/base/browser/ui/list/rowCache.js
Normal file
@@ -0,0 +1,108 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { $ } from '../../dom.js';
|
||||
export class RowCache {
|
||||
constructor(renderers) {
|
||||
this.renderers = renderers;
|
||||
this.cache = new Map();
|
||||
this.transactionNodesPendingRemoval = new Set();
|
||||
this.inTransaction = false;
|
||||
}
|
||||
/**
|
||||
* Returns a row either by creating a new one or reusing
|
||||
* a previously released row which shares the same templateId.
|
||||
*
|
||||
* @returns A row and `isReusingConnectedDomNode` if the row's node is already in the dom in a stale position.
|
||||
*/
|
||||
alloc(templateId) {
|
||||
let result = this.getTemplateCache(templateId).pop();
|
||||
let isStale = false;
|
||||
if (result) {
|
||||
isStale = this.transactionNodesPendingRemoval.has(result.domNode);
|
||||
if (isStale) {
|
||||
this.transactionNodesPendingRemoval.delete(result.domNode);
|
||||
}
|
||||
}
|
||||
else {
|
||||
const domNode = $('.monaco-list-row');
|
||||
const renderer = this.getRenderer(templateId);
|
||||
const templateData = renderer.renderTemplate(domNode);
|
||||
result = { domNode, templateId, templateData };
|
||||
}
|
||||
return { row: result, isReusingConnectedDomNode: isStale };
|
||||
}
|
||||
/**
|
||||
* Releases the row for eventual reuse.
|
||||
*/
|
||||
release(row) {
|
||||
if (!row) {
|
||||
return;
|
||||
}
|
||||
this.releaseRow(row);
|
||||
}
|
||||
/**
|
||||
* Begin a set of changes that use the cache. This lets us skip work when a row is removed and then inserted again.
|
||||
*/
|
||||
transact(makeChanges) {
|
||||
if (this.inTransaction) {
|
||||
throw new Error('Already in transaction');
|
||||
}
|
||||
this.inTransaction = true;
|
||||
try {
|
||||
makeChanges();
|
||||
}
|
||||
finally {
|
||||
for (const domNode of this.transactionNodesPendingRemoval) {
|
||||
this.doRemoveNode(domNode);
|
||||
}
|
||||
this.transactionNodesPendingRemoval.clear();
|
||||
this.inTransaction = false;
|
||||
}
|
||||
}
|
||||
releaseRow(row) {
|
||||
const { domNode, templateId } = row;
|
||||
if (domNode) {
|
||||
if (this.inTransaction) {
|
||||
this.transactionNodesPendingRemoval.add(domNode);
|
||||
}
|
||||
else {
|
||||
this.doRemoveNode(domNode);
|
||||
}
|
||||
}
|
||||
const cache = this.getTemplateCache(templateId);
|
||||
cache.push(row);
|
||||
}
|
||||
doRemoveNode(domNode) {
|
||||
domNode.classList.remove('scrolling');
|
||||
domNode.remove();
|
||||
}
|
||||
getTemplateCache(templateId) {
|
||||
let result = this.cache.get(templateId);
|
||||
if (!result) {
|
||||
result = [];
|
||||
this.cache.set(templateId, result);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
dispose() {
|
||||
this.cache.forEach((cachedRows, templateId) => {
|
||||
for (const cachedRow of cachedRows) {
|
||||
const renderer = this.getRenderer(templateId);
|
||||
renderer.disposeTemplate(cachedRow.templateData);
|
||||
cachedRow.templateData = null;
|
||||
}
|
||||
});
|
||||
this.cache.clear();
|
||||
this.transactionNodesPendingRemoval.clear();
|
||||
}
|
||||
getRenderer(templateId) {
|
||||
const renderer = this.renderers.get(templateId);
|
||||
if (!renderer) {
|
||||
throw new Error(`No renderer found for ${templateId}`);
|
||||
}
|
||||
return renderer;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=rowCache.js.map
|
||||
File diff suppressed because one or more lines are too long
13
_internal/editor/esm/vs/base/browser/ui/list/splice.js
Normal file
13
_internal/editor/esm/vs/base/browser/ui/list/splice.js
Normal file
@@ -0,0 +1,13 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
export class CombinedSpliceable {
|
||||
constructor(spliceables) {
|
||||
this.spliceables = spliceables;
|
||||
}
|
||||
splice(start, deleteCount, elements) {
|
||||
this.spliceables.forEach(s => s.splice(start, deleteCount, elements));
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=splice.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/list/splice.ts","vs/base/browser/ui/list/splice.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAIhG,MAAM,OAAO,kBAAkB;IAE9B,YAAoB,WAA6B;QAA7B,gBAAW,GAAX,WAAW,CAAkB;IAAI,CAAC;IAEtD,MAAM,CAAC,KAAa,EAAE,WAAmB,EAAE,QAAa;QACvD,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IACvE,CAAC;CACD","file":"splice.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport { ISpliceable } from '../../../common/sequence.js';\n\nexport class CombinedSpliceable<T> implements ISpliceable<T> {\n\n\tconstructor(private spliceables: ISpliceable<T>[]) { }\n\n\tsplice(start: number, deleteCount: number, elements: T[]): void {\n\t\tthis.spliceables.forEach(s => s.splice(start, deleteCount, elements));\n\t}\n}","/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport { ISpliceable } from '../../../common/sequence.js';\n\nexport class CombinedSpliceable<T> implements ISpliceable<T> {\n\n\tconstructor(private spliceables: ISpliceable<T>[]) { }\n\n\tsplice(start: number, deleteCount: number, elements: T[]): void {\n\t\tthis.spliceables.forEach(s => s.splice(start, deleteCount, elements));\n\t}\n}"]}
|
||||
1145
_internal/editor/esm/vs/base/browser/ui/menu/menu.js
Normal file
1145
_internal/editor/esm/vs/base/browser/ui/menu/menu.js
Normal file
File diff suppressed because it is too large
Load Diff
1
_internal/editor/esm/vs/base/browser/ui/menu/menu.js.map
Normal file
1
_internal/editor/esm/vs/base/browser/ui/menu/menu.js.map
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-mouse-cursor-text {
|
||||
cursor: text;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import './mouseCursor.css';
|
||||
export const MOUSE_CURSOR_TEXT_CSS_CLASS_NAME = `monaco-mouse-cursor-text`;
|
||||
//# sourceMappingURL=mouseCursor.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/mouseCursor/mouseCursor.ts","vs/base/browser/ui/mouseCursor/mouseCursor.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,MAAM,gCAAgC,GAAG,0BAA0B,CAAC","file":"mouseCursor.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport './mouseCursor.css';\n\nexport const MOUSE_CURSOR_TEXT_CSS_CLASS_NAME = `monaco-mouse-cursor-text`;\n","/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\nimport './mouseCursor.css';\n\nexport const MOUSE_CURSOR_TEXT_CSS_CLASS_NAME = `monaco-mouse-cursor-text`;\n"]}
|
||||
@@ -0,0 +1,61 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-progress-container {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
overflow: hidden; /* keep progress bit in bounds */
|
||||
}
|
||||
|
||||
.monaco-progress-container .progress-bit {
|
||||
width: 2%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.monaco-progress-container.active .progress-bit {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.monaco-progress-container.discrete .progress-bit {
|
||||
left: 0;
|
||||
transition: width 100ms linear;
|
||||
}
|
||||
|
||||
.monaco-progress-container.discrete.done .progress-bit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.monaco-progress-container.infinite .progress-bit {
|
||||
animation-name: progress;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.monaco-progress-container.infinite.infinite-long-running .progress-bit {
|
||||
/*
|
||||
The more smooth `linear` timing function can cause
|
||||
higher GPU consumption as indicated in
|
||||
https://github.com/microsoft/vscode/issues/97900 &
|
||||
https://github.com/microsoft/vscode/issues/138396
|
||||
*/
|
||||
animation-timing-function: steps(100);
|
||||
}
|
||||
|
||||
/**
|
||||
* The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
|
||||
* that container. Since translateX is relative to the progress bit size, we have to multiple it with
|
||||
* its relative size to the parent container:
|
||||
* parent width: 5000%
|
||||
* bit width: 100%
|
||||
* translateX should be as follow:
|
||||
* 50%: 5000% * 50% - 50% (set to center) = 2450%
|
||||
* 100%: 5000% * 100% - 100% (do not overflow) = 4900%
|
||||
*/
|
||||
@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }
|
||||
@@ -0,0 +1,103 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { show } from '../../dom.js';
|
||||
import { RunOnceScheduler } from '../../../common/async.js';
|
||||
import { Disposable, MutableDisposable } from '../../../common/lifecycle.js';
|
||||
import './progressbar.css';
|
||||
const CSS_DONE = 'done';
|
||||
const CSS_ACTIVE = 'active';
|
||||
const CSS_INFINITE = 'infinite';
|
||||
const CSS_INFINITE_LONG_RUNNING = 'infinite-long-running';
|
||||
const CSS_DISCRETE = 'discrete';
|
||||
/**
|
||||
* A progress bar with support for infinite or discrete progress.
|
||||
*/
|
||||
export class ProgressBar extends Disposable {
|
||||
/**
|
||||
* After a certain time of showing the progress bar, switch
|
||||
* to long-running mode and throttle animations to reduce
|
||||
* the pressure on the GPU process.
|
||||
*
|
||||
* https://github.com/microsoft/vscode/issues/97900
|
||||
* https://github.com/microsoft/vscode/issues/138396
|
||||
*/
|
||||
static { this.LONG_RUNNING_INFINITE_THRESHOLD = 10000; }
|
||||
constructor(container, options) {
|
||||
super();
|
||||
this.progressSignal = this._register(new MutableDisposable());
|
||||
this.workedVal = 0;
|
||||
this.showDelayedScheduler = this._register(new RunOnceScheduler(() => show(this.element), 0));
|
||||
this.longRunningScheduler = this._register(new RunOnceScheduler(() => this.infiniteLongRunning(), ProgressBar.LONG_RUNNING_INFINITE_THRESHOLD));
|
||||
this.create(container, options);
|
||||
}
|
||||
create(container, options) {
|
||||
this.element = document.createElement('div');
|
||||
this.element.classList.add('monaco-progress-container');
|
||||
this.element.setAttribute('role', 'progressbar');
|
||||
this.element.setAttribute('aria-valuemin', '0');
|
||||
container.appendChild(this.element);
|
||||
this.bit = document.createElement('div');
|
||||
this.bit.classList.add('progress-bit');
|
||||
this.bit.style.backgroundColor = options?.progressBarBackground || '#0E70C0';
|
||||
this.element.appendChild(this.bit);
|
||||
}
|
||||
off() {
|
||||
this.bit.style.width = 'inherit';
|
||||
this.bit.style.opacity = '1';
|
||||
this.element.classList.remove(CSS_ACTIVE, CSS_INFINITE, CSS_INFINITE_LONG_RUNNING, CSS_DISCRETE);
|
||||
this.workedVal = 0;
|
||||
this.totalWork = undefined;
|
||||
this.longRunningScheduler.cancel();
|
||||
this.progressSignal.clear();
|
||||
}
|
||||
/**
|
||||
* Stops the progressbar from showing any progress instantly without fading out.
|
||||
*/
|
||||
stop() {
|
||||
return this.doDone(false);
|
||||
}
|
||||
doDone(delayed) {
|
||||
this.element.classList.add(CSS_DONE);
|
||||
// discrete: let it grow to 100% width and hide afterwards
|
||||
if (!this.element.classList.contains(CSS_INFINITE)) {
|
||||
this.bit.style.width = 'inherit';
|
||||
if (delayed) {
|
||||
setTimeout(() => this.off(), 200);
|
||||
}
|
||||
else {
|
||||
this.off();
|
||||
}
|
||||
}
|
||||
// infinite: let it fade out and hide afterwards
|
||||
else {
|
||||
this.bit.style.opacity = '0';
|
||||
if (delayed) {
|
||||
setTimeout(() => this.off(), 200);
|
||||
}
|
||||
else {
|
||||
this.off();
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
/**
|
||||
* Use this mode to indicate progress that has no total number of work units.
|
||||
*/
|
||||
infinite() {
|
||||
this.bit.style.width = '2%';
|
||||
this.bit.style.opacity = '1';
|
||||
this.element.classList.remove(CSS_DISCRETE, CSS_DONE, CSS_INFINITE_LONG_RUNNING);
|
||||
this.element.classList.add(CSS_ACTIVE, CSS_INFINITE);
|
||||
this.longRunningScheduler.schedule();
|
||||
return this;
|
||||
}
|
||||
infiniteLongRunning() {
|
||||
this.element.classList.add(CSS_INFINITE_LONG_RUNNING);
|
||||
}
|
||||
getContainer() {
|
||||
return this.element;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=progressbar.js.map
|
||||
File diff suppressed because one or more lines are too long
69
_internal/editor/esm/vs/base/browser/ui/radio/radio.css
Normal file
69
_internal/editor/esm/vs/base/browser/ui/radio/radio.css
Normal file
@@ -0,0 +1,69 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-custom-radio {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.monaco-custom-radio > .monaco-button {
|
||||
border-radius: 0;
|
||||
font-size: 0.9em;
|
||||
line-height: 1em;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.monaco-custom-radio > .monaco-button:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.monaco-custom-radio > .monaco-button:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.monaco-custom-radio > .monaco-button:not(.active):not(:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.monaco-custom-radio > .monaco-button.previous-active {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
/* default color styles - based on CSS variables */
|
||||
|
||||
.monaco-custom-radio > .monaco-button {
|
||||
color: var(--vscode-radio-inactiveForeground);
|
||||
background-color: var(--vscode-radio-inactiveBackground);
|
||||
border-color: var(--vscode-radio-inactiveBorder, transparent);
|
||||
}
|
||||
|
||||
.monaco-custom-radio > .monaco-button.active:hover,
|
||||
.monaco-custom-radio > .monaco-button.active {
|
||||
color: var(--vscode-radio-activeForeground);
|
||||
background-color: var(--vscode-radio-activeBackground);
|
||||
border-color: var(--vscode-radio-activeBorder, transparent);
|
||||
}
|
||||
|
||||
.hc-black .monaco-custom-radio > .monaco-button.active,
|
||||
.hc-light .monaco-custom-radio > .monaco-button.active {
|
||||
border-color: var(--vscode-radio-activeBorder, transparent);
|
||||
}
|
||||
|
||||
.hc-black .monaco-custom-radio > .monaco-button:not(.active),
|
||||
.hc-light .monaco-custom-radio > .monaco-button:not(.active) {
|
||||
border-color: var(--vscode-radio-inactiveBorder, transparent);
|
||||
}
|
||||
|
||||
.hc-black .monaco-custom-radio > .monaco-button:not(.active):hover,
|
||||
.hc-light .monaco-custom-radio > .monaco-button:not(.active):hover {
|
||||
outline: 1px dashed var(--vscode-toolbar-hoverOutline);
|
||||
outline-offset: -1px
|
||||
}
|
||||
|
||||
.monaco-custom-radio > .monaco-button:hover:not(.active) {
|
||||
background-color: var(--vscode-radio-inactiveHoverBackground);
|
||||
}
|
||||
2
_internal/editor/esm/vs/base/browser/ui/radio/radio.js
Normal file
2
_internal/editor/esm/vs/base/browser/ui/radio/radio.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import './radio.css';
|
||||
//# sourceMappingURL=radio.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src/vs/base/browser/ui/radio/radio.ts","vs/base/browser/ui/radio/radio.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,CAAC","file":"radio.js","sourceRoot":"file:///mnt/vss/_work/1/s/dependencies/vscode/out-editor-src","sourcesContent":["\nimport './radio.css';\n\nexport interface IRadioStyles {\n\treadonly activeForeground?: string;\n\treadonly activeBackground?: string;\n\treadonly activeBorder?: string;\n\treadonly inactiveForeground?: string;\n\treadonly inactiveBackground?: string;\n\treadonly inactiveHoverBackground?: string;\n\treadonly inactiveBorder?: string;\n}\n","\nimport './radio.css';\n\nexport interface IRadioStyles {\n\treadonly activeForeground?: string;\n\treadonly activeBackground?: string;\n\treadonly activeBorder?: string;\n\treadonly inactiveForeground?: string;\n\treadonly inactiveBackground?: string;\n\treadonly inactiveHoverBackground?: string;\n\treadonly inactiveBorder?: string;\n}\n"]}
|
||||
148
_internal/editor/esm/vs/base/browser/ui/resizable/resizable.js
Normal file
148
_internal/editor/esm/vs/base/browser/ui/resizable/resizable.js
Normal file
@@ -0,0 +1,148 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { Dimension } from '../../dom.js';
|
||||
import { OrthogonalEdge, Sash } from '../sash/sash.js';
|
||||
import { Emitter, Event } from '../../../common/event.js';
|
||||
import { DisposableStore } from '../../../common/lifecycle.js';
|
||||
export class ResizableHTMLElement {
|
||||
get onDidWillResize() { return this._onDidWillResize.event; }
|
||||
get onDidResize() { return this._onDidResize.event; }
|
||||
constructor() {
|
||||
this._onDidWillResize = new Emitter();
|
||||
this._onDidResize = new Emitter();
|
||||
this._sashListener = new DisposableStore();
|
||||
this._size = new Dimension(0, 0);
|
||||
this._minSize = new Dimension(0, 0);
|
||||
this._maxSize = new Dimension(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
|
||||
this.domNode = document.createElement('div');
|
||||
this._eastSash = new Sash(this.domNode, { getVerticalSashLeft: () => this._size.width }, { orientation: 0 /* Orientation.VERTICAL */ });
|
||||
this._westSash = new Sash(this.domNode, { getVerticalSashLeft: () => 0 }, { orientation: 0 /* Orientation.VERTICAL */ });
|
||||
this._northSash = new Sash(this.domNode, { getHorizontalSashTop: () => 0 }, { orientation: 1 /* Orientation.HORIZONTAL */, orthogonalEdge: OrthogonalEdge.North });
|
||||
this._southSash = new Sash(this.domNode, { getHorizontalSashTop: () => this._size.height }, { orientation: 1 /* Orientation.HORIZONTAL */, orthogonalEdge: OrthogonalEdge.South });
|
||||
this._northSash.orthogonalStartSash = this._westSash;
|
||||
this._northSash.orthogonalEndSash = this._eastSash;
|
||||
this._southSash.orthogonalStartSash = this._westSash;
|
||||
this._southSash.orthogonalEndSash = this._eastSash;
|
||||
let currentSize;
|
||||
let deltaY = 0;
|
||||
let deltaX = 0;
|
||||
this._sashListener.add(Event.any(this._northSash.onDidStart, this._eastSash.onDidStart, this._southSash.onDidStart, this._westSash.onDidStart)(() => {
|
||||
if (currentSize === undefined) {
|
||||
this._onDidWillResize.fire();
|
||||
currentSize = this._size;
|
||||
deltaY = 0;
|
||||
deltaX = 0;
|
||||
}
|
||||
}));
|
||||
this._sashListener.add(Event.any(this._northSash.onDidEnd, this._eastSash.onDidEnd, this._southSash.onDidEnd, this._westSash.onDidEnd)(() => {
|
||||
if (currentSize !== undefined) {
|
||||
currentSize = undefined;
|
||||
deltaY = 0;
|
||||
deltaX = 0;
|
||||
this._onDidResize.fire({ dimension: this._size, done: true });
|
||||
}
|
||||
}));
|
||||
this._sashListener.add(this._eastSash.onDidChange(e => {
|
||||
if (currentSize) {
|
||||
deltaX = e.currentX - e.startX;
|
||||
this.layout(currentSize.height + deltaY, currentSize.width + deltaX);
|
||||
this._onDidResize.fire({ dimension: this._size, done: false, east: true });
|
||||
}
|
||||
}));
|
||||
this._sashListener.add(this._westSash.onDidChange(e => {
|
||||
if (currentSize) {
|
||||
deltaX = -(e.currentX - e.startX);
|
||||
this.layout(currentSize.height + deltaY, currentSize.width + deltaX);
|
||||
this._onDidResize.fire({ dimension: this._size, done: false, west: true });
|
||||
}
|
||||
}));
|
||||
this._sashListener.add(this._northSash.onDidChange(e => {
|
||||
if (currentSize) {
|
||||
deltaY = -(e.currentY - e.startY);
|
||||
this.layout(currentSize.height + deltaY, currentSize.width + deltaX);
|
||||
this._onDidResize.fire({ dimension: this._size, done: false, north: true });
|
||||
}
|
||||
}));
|
||||
this._sashListener.add(this._southSash.onDidChange(e => {
|
||||
if (currentSize) {
|
||||
deltaY = e.currentY - e.startY;
|
||||
this.layout(currentSize.height + deltaY, currentSize.width + deltaX);
|
||||
this._onDidResize.fire({ dimension: this._size, done: false, south: true });
|
||||
}
|
||||
}));
|
||||
this._sashListener.add(Event.any(this._eastSash.onDidReset, this._westSash.onDidReset)(e => {
|
||||
if (this._preferredSize) {
|
||||
this.layout(this._size.height, this._preferredSize.width);
|
||||
this._onDidResize.fire({ dimension: this._size, done: true });
|
||||
}
|
||||
}));
|
||||
this._sashListener.add(Event.any(this._northSash.onDidReset, this._southSash.onDidReset)(e => {
|
||||
if (this._preferredSize) {
|
||||
this.layout(this._preferredSize.height, this._size.width);
|
||||
this._onDidResize.fire({ dimension: this._size, done: true });
|
||||
}
|
||||
}));
|
||||
}
|
||||
dispose() {
|
||||
this._northSash.dispose();
|
||||
this._southSash.dispose();
|
||||
this._eastSash.dispose();
|
||||
this._westSash.dispose();
|
||||
this._sashListener.dispose();
|
||||
this._onDidResize.dispose();
|
||||
this._onDidWillResize.dispose();
|
||||
this.domNode.remove();
|
||||
}
|
||||
enableSashes(north, east, south, west) {
|
||||
this._northSash.state = north ? 3 /* SashState.Enabled */ : 0 /* SashState.Disabled */;
|
||||
this._eastSash.state = east ? 3 /* SashState.Enabled */ : 0 /* SashState.Disabled */;
|
||||
this._southSash.state = south ? 3 /* SashState.Enabled */ : 0 /* SashState.Disabled */;
|
||||
this._westSash.state = west ? 3 /* SashState.Enabled */ : 0 /* SashState.Disabled */;
|
||||
}
|
||||
layout(height = this.size.height, width = this.size.width) {
|
||||
const { height: minHeight, width: minWidth } = this._minSize;
|
||||
const { height: maxHeight, width: maxWidth } = this._maxSize;
|
||||
height = Math.max(minHeight, Math.min(maxHeight, height));
|
||||
width = Math.max(minWidth, Math.min(maxWidth, width));
|
||||
const newSize = new Dimension(width, height);
|
||||
if (!Dimension.equals(newSize, this._size)) {
|
||||
this.domNode.style.height = height + 'px';
|
||||
this.domNode.style.width = width + 'px';
|
||||
this._size = newSize;
|
||||
this._northSash.layout();
|
||||
this._eastSash.layout();
|
||||
this._southSash.layout();
|
||||
this._westSash.layout();
|
||||
}
|
||||
}
|
||||
clearSashHoverState() {
|
||||
this._eastSash.clearSashHoverState();
|
||||
this._westSash.clearSashHoverState();
|
||||
this._northSash.clearSashHoverState();
|
||||
this._southSash.clearSashHoverState();
|
||||
}
|
||||
get size() {
|
||||
return this._size;
|
||||
}
|
||||
set maxSize(value) {
|
||||
this._maxSize = value;
|
||||
}
|
||||
get maxSize() {
|
||||
return this._maxSize;
|
||||
}
|
||||
set minSize(value) {
|
||||
this._minSize = value;
|
||||
}
|
||||
get minSize() {
|
||||
return this._minSize;
|
||||
}
|
||||
set preferredSize(value) {
|
||||
this._preferredSize = value;
|
||||
}
|
||||
get preferredSize() {
|
||||
return this._preferredSize;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=resizable.js.map
|
||||
File diff suppressed because one or more lines are too long
149
_internal/editor/esm/vs/base/browser/ui/sash/sash.css
Normal file
149
_internal/editor/esm/vs/base/browser/ui/sash/sash.css
Normal file
@@ -0,0 +1,149 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
:root {
|
||||
--vscode-sash-size: 4px;
|
||||
--vscode-sash-hover-size: 4px;
|
||||
}
|
||||
|
||||
.monaco-sash {
|
||||
position: absolute;
|
||||
z-index: 35;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.monaco-sash.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.monaco-sash.mac.vertical {
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.monaco-sash.vertical.minimum {
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.monaco-sash.vertical.maximum {
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.monaco-sash.mac.horizontal {
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.monaco-sash.horizontal.minimum {
|
||||
cursor: s-resize;
|
||||
}
|
||||
|
||||
.monaco-sash.horizontal.maximum {
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.monaco-sash.disabled {
|
||||
cursor: default !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.monaco-sash.vertical {
|
||||
cursor: ew-resize;
|
||||
top: 0;
|
||||
width: var(--vscode-sash-size);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.monaco-sash.horizontal {
|
||||
cursor: ns-resize;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: var(--vscode-sash-size);
|
||||
}
|
||||
|
||||
.monaco-sash:not(.disabled) > .orthogonal-drag-handle {
|
||||
content: " ";
|
||||
height: calc(var(--vscode-sash-size) * 2);
|
||||
width: calc(var(--vscode-sash-size) * 2);
|
||||
z-index: 100;
|
||||
display: block;
|
||||
cursor: all-scroll;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
|
||||
> .orthogonal-drag-handle.start,
|
||||
.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
|
||||
> .orthogonal-drag-handle.end {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
|
||||
> .orthogonal-drag-handle.end,
|
||||
.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
|
||||
> .orthogonal-drag-handle.start {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
.monaco-sash.vertical > .orthogonal-drag-handle.start {
|
||||
left: calc(var(--vscode-sash-size) * -0.5);
|
||||
top: calc(var(--vscode-sash-size) * -1);
|
||||
}
|
||||
.monaco-sash.vertical > .orthogonal-drag-handle.end {
|
||||
left: calc(var(--vscode-sash-size) * -0.5);
|
||||
bottom: calc(var(--vscode-sash-size) * -1);
|
||||
}
|
||||
.monaco-sash.horizontal > .orthogonal-drag-handle.start {
|
||||
top: calc(var(--vscode-sash-size) * -0.5);
|
||||
left: calc(var(--vscode-sash-size) * -1);
|
||||
}
|
||||
.monaco-sash.horizontal > .orthogonal-drag-handle.end {
|
||||
top: calc(var(--vscode-sash-size) * -0.5);
|
||||
right: calc(var(--vscode-sash-size) * -1);
|
||||
}
|
||||
|
||||
.monaco-sash:before {
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.monaco-workbench:not(.reduce-motion) .monaco-sash:before {
|
||||
transition: background-color 0.1s ease-out;
|
||||
}
|
||||
|
||||
.monaco-sash.hover:before,
|
||||
.monaco-sash.active:before {
|
||||
background: var(--vscode-sash-hoverBorder);
|
||||
}
|
||||
|
||||
.monaco-sash.vertical:before {
|
||||
width: var(--vscode-sash-hover-size);
|
||||
left: calc(50% - (var(--vscode-sash-hover-size) / 2));
|
||||
}
|
||||
|
||||
.monaco-sash.horizontal:before {
|
||||
height: var(--vscode-sash-hover-size);
|
||||
top: calc(50% - (var(--vscode-sash-hover-size) / 2));
|
||||
}
|
||||
|
||||
.pointer-events-disabled {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/** Debug **/
|
||||
|
||||
.monaco-sash.debug {
|
||||
background: cyan;
|
||||
}
|
||||
|
||||
.monaco-sash.debug.disabled {
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.monaco-sash.debug:not(.disabled) > .orthogonal-drag-handle {
|
||||
background: red;
|
||||
}
|
||||
444
_internal/editor/esm/vs/base/browser/ui/sash/sash.js
Normal file
444
_internal/editor/esm/vs/base/browser/ui/sash/sash.js
Normal file
@@ -0,0 +1,444 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { $, addDisposableListener, append, EventHelper, getWindow, isHTMLElement } from '../../dom.js';
|
||||
import { createStyleSheet } from '../../domStylesheets.js';
|
||||
import { DomEmitter } from '../../event.js';
|
||||
import { EventType, Gesture } from '../../touch.js';
|
||||
import { Delayer } from '../../../common/async.js';
|
||||
import { memoize } from '../../../common/decorators.js';
|
||||
import { Emitter } from '../../../common/event.js';
|
||||
import { Disposable, DisposableStore, toDisposable } from '../../../common/lifecycle.js';
|
||||
import { isMacintosh } from '../../../common/platform.js';
|
||||
import './sash.css';
|
||||
/**
|
||||
* Allow the sashes to be visible at runtime.
|
||||
* @remark Use for development purposes only.
|
||||
*/
|
||||
const DEBUG = false;
|
||||
export var OrthogonalEdge;
|
||||
(function (OrthogonalEdge) {
|
||||
OrthogonalEdge["North"] = "north";
|
||||
OrthogonalEdge["South"] = "south";
|
||||
OrthogonalEdge["East"] = "east";
|
||||
OrthogonalEdge["West"] = "west";
|
||||
})(OrthogonalEdge || (OrthogonalEdge = {}));
|
||||
let globalSize = 4;
|
||||
const onDidChangeGlobalSize = new Emitter();
|
||||
let globalHoverDelay = 300;
|
||||
const onDidChangeHoverDelay = new Emitter();
|
||||
class MouseEventFactory {
|
||||
constructor(el) {
|
||||
this.el = el;
|
||||
this.disposables = new DisposableStore();
|
||||
}
|
||||
get onPointerMove() {
|
||||
return this.disposables.add(new DomEmitter(getWindow(this.el), 'mousemove')).event;
|
||||
}
|
||||
get onPointerUp() {
|
||||
return this.disposables.add(new DomEmitter(getWindow(this.el), 'mouseup')).event;
|
||||
}
|
||||
dispose() {
|
||||
this.disposables.dispose();
|
||||
}
|
||||
}
|
||||
__decorate([
|
||||
memoize
|
||||
], MouseEventFactory.prototype, "onPointerMove", null);
|
||||
__decorate([
|
||||
memoize
|
||||
], MouseEventFactory.prototype, "onPointerUp", null);
|
||||
class GestureEventFactory {
|
||||
get onPointerMove() {
|
||||
return this.disposables.add(new DomEmitter(this.el, EventType.Change)).event;
|
||||
}
|
||||
get onPointerUp() {
|
||||
return this.disposables.add(new DomEmitter(this.el, EventType.End)).event;
|
||||
}
|
||||
constructor(el) {
|
||||
this.el = el;
|
||||
this.disposables = new DisposableStore();
|
||||
}
|
||||
dispose() {
|
||||
this.disposables.dispose();
|
||||
}
|
||||
}
|
||||
__decorate([
|
||||
memoize
|
||||
], GestureEventFactory.prototype, "onPointerMove", null);
|
||||
__decorate([
|
||||
memoize
|
||||
], GestureEventFactory.prototype, "onPointerUp", null);
|
||||
class OrthogonalPointerEventFactory {
|
||||
get onPointerMove() {
|
||||
return this.factory.onPointerMove;
|
||||
}
|
||||
get onPointerUp() {
|
||||
return this.factory.onPointerUp;
|
||||
}
|
||||
constructor(factory) {
|
||||
this.factory = factory;
|
||||
}
|
||||
dispose() {
|
||||
// noop
|
||||
}
|
||||
}
|
||||
__decorate([
|
||||
memoize
|
||||
], OrthogonalPointerEventFactory.prototype, "onPointerMove", null);
|
||||
__decorate([
|
||||
memoize
|
||||
], OrthogonalPointerEventFactory.prototype, "onPointerUp", null);
|
||||
const PointerEventsDisabledCssClass = 'pointer-events-disabled';
|
||||
/**
|
||||
* The {@link Sash} is the UI component which allows the user to resize other
|
||||
* components. It's usually an invisible horizontal or vertical line which, when
|
||||
* hovered, becomes highlighted and can be dragged along the perpendicular dimension
|
||||
* to its direction.
|
||||
*
|
||||
* Features:
|
||||
* - Touch event handling
|
||||
* - Corner sash support
|
||||
* - Hover with different mouse cursor support
|
||||
* - Configurable hover size
|
||||
* - Linked sash support, for 2x2 corner sashes
|
||||
*/
|
||||
export class Sash extends Disposable {
|
||||
get state() { return this._state; }
|
||||
get orthogonalStartSash() { return this._orthogonalStartSash; }
|
||||
get orthogonalEndSash() { return this._orthogonalEndSash; }
|
||||
/**
|
||||
* The state of a sash defines whether it can be interacted with by the user
|
||||
* as well as what mouse cursor to use, when hovered.
|
||||
*/
|
||||
set state(state) {
|
||||
if (this._state === state) {
|
||||
return;
|
||||
}
|
||||
this.el.classList.toggle('disabled', state === 0 /* SashState.Disabled */);
|
||||
this.el.classList.toggle('minimum', state === 1 /* SashState.AtMinimum */);
|
||||
this.el.classList.toggle('maximum', state === 2 /* SashState.AtMaximum */);
|
||||
this._state = state;
|
||||
this.onDidEnablementChange.fire(state);
|
||||
}
|
||||
/**
|
||||
* An event which fires whenever the user starts dragging this sash.
|
||||
*/
|
||||
get onDidStart() { return this._onDidStart.event; }
|
||||
/**
|
||||
* An event which fires whenever the user moves the mouse while
|
||||
* dragging this sash.
|
||||
*/
|
||||
get onDidChange() { return this._onDidChange.event; }
|
||||
/**
|
||||
* An event which fires whenever the user double clicks this sash.
|
||||
*/
|
||||
get onDidReset() { return this._onDidReset.event; }
|
||||
/**
|
||||
* An event which fires whenever the user stops dragging this sash.
|
||||
*/
|
||||
get onDidEnd() { return this._onDidEnd.event; }
|
||||
/**
|
||||
* A reference to another sash, perpendicular to this one, which
|
||||
* aligns at the start of this one. A corner sash will be created
|
||||
* automatically at that location.
|
||||
*
|
||||
* The start of a horizontal sash is its left-most position.
|
||||
* The start of a vertical sash is its top-most position.
|
||||
*/
|
||||
set orthogonalStartSash(sash) {
|
||||
if (this._orthogonalStartSash === sash) {
|
||||
return;
|
||||
}
|
||||
this.orthogonalStartDragHandleDisposables.clear();
|
||||
this.orthogonalStartSashDisposables.clear();
|
||||
if (sash) {
|
||||
const onChange = (state) => {
|
||||
this.orthogonalStartDragHandleDisposables.clear();
|
||||
if (state !== 0 /* SashState.Disabled */) {
|
||||
this._orthogonalStartDragHandle = append(this.el, $('.orthogonal-drag-handle.start'));
|
||||
this.orthogonalStartDragHandleDisposables.add(toDisposable(() => this._orthogonalStartDragHandle.remove()));
|
||||
this.orthogonalStartDragHandleDisposables.add(addDisposableListener(this._orthogonalStartDragHandle, 'mouseenter', () => Sash.onMouseEnter(sash)));
|
||||
this.orthogonalStartDragHandleDisposables.add(addDisposableListener(this._orthogonalStartDragHandle, 'mouseleave', () => Sash.onMouseLeave(sash)));
|
||||
}
|
||||
};
|
||||
this.orthogonalStartSashDisposables.add(sash.onDidEnablementChange.event(onChange, this));
|
||||
onChange(sash.state);
|
||||
}
|
||||
this._orthogonalStartSash = sash;
|
||||
}
|
||||
/**
|
||||
* A reference to another sash, perpendicular to this one, which
|
||||
* aligns at the end of this one. A corner sash will be created
|
||||
* automatically at that location.
|
||||
*
|
||||
* The end of a horizontal sash is its right-most position.
|
||||
* The end of a vertical sash is its bottom-most position.
|
||||
*/
|
||||
set orthogonalEndSash(sash) {
|
||||
if (this._orthogonalEndSash === sash) {
|
||||
return;
|
||||
}
|
||||
this.orthogonalEndDragHandleDisposables.clear();
|
||||
this.orthogonalEndSashDisposables.clear();
|
||||
if (sash) {
|
||||
const onChange = (state) => {
|
||||
this.orthogonalEndDragHandleDisposables.clear();
|
||||
if (state !== 0 /* SashState.Disabled */) {
|
||||
this._orthogonalEndDragHandle = append(this.el, $('.orthogonal-drag-handle.end'));
|
||||
this.orthogonalEndDragHandleDisposables.add(toDisposable(() => this._orthogonalEndDragHandle.remove()));
|
||||
this.orthogonalEndDragHandleDisposables.add(addDisposableListener(this._orthogonalEndDragHandle, 'mouseenter', () => Sash.onMouseEnter(sash)));
|
||||
this.orthogonalEndDragHandleDisposables.add(addDisposableListener(this._orthogonalEndDragHandle, 'mouseleave', () => Sash.onMouseLeave(sash)));
|
||||
}
|
||||
};
|
||||
this.orthogonalEndSashDisposables.add(sash.onDidEnablementChange.event(onChange, this));
|
||||
onChange(sash.state);
|
||||
}
|
||||
this._orthogonalEndSash = sash;
|
||||
}
|
||||
constructor(container, layoutProvider, options) {
|
||||
super();
|
||||
this.hoverDelay = globalHoverDelay;
|
||||
this.hoverDelayer = this._register(new Delayer(this.hoverDelay));
|
||||
this._state = 3 /* SashState.Enabled */;
|
||||
this.onDidEnablementChange = this._register(new Emitter());
|
||||
this._onDidStart = this._register(new Emitter());
|
||||
this._onDidChange = this._register(new Emitter());
|
||||
this._onDidReset = this._register(new Emitter());
|
||||
this._onDidEnd = this._register(new Emitter());
|
||||
this.orthogonalStartSashDisposables = this._register(new DisposableStore());
|
||||
this.orthogonalStartDragHandleDisposables = this._register(new DisposableStore());
|
||||
this.orthogonalEndSashDisposables = this._register(new DisposableStore());
|
||||
this.orthogonalEndDragHandleDisposables = this._register(new DisposableStore());
|
||||
/**
|
||||
* A linked sash will be forwarded the same user interactions and events
|
||||
* so it moves exactly the same way as this sash.
|
||||
*
|
||||
* Useful in 2x2 grids. Not meant for widespread usage.
|
||||
*/
|
||||
this.linkedSash = undefined;
|
||||
this.el = append(container, $('.monaco-sash'));
|
||||
if (options.orthogonalEdge) {
|
||||
this.el.classList.add(`orthogonal-edge-${options.orthogonalEdge}`);
|
||||
}
|
||||
if (isMacintosh) {
|
||||
this.el.classList.add('mac');
|
||||
}
|
||||
this._register(addDisposableListener(this.el, 'mousedown', e => this.onPointerStart(e, new MouseEventFactory(container))));
|
||||
this._register(addDisposableListener(this.el, 'dblclick', e => this.onPointerDoublePress(e)));
|
||||
this._register(addDisposableListener(this.el, 'mouseenter', () => Sash.onMouseEnter(this)));
|
||||
this._register(addDisposableListener(this.el, 'mouseleave', () => Sash.onMouseLeave(this)));
|
||||
this._register(Gesture.addTarget(this.el));
|
||||
this._register(addDisposableListener(this.el, EventType.Start, e => this.onPointerStart(e, new GestureEventFactory(this.el))));
|
||||
let doubleTapTimeout = undefined;
|
||||
this._register(addDisposableListener(this.el, EventType.Tap, event => {
|
||||
if (doubleTapTimeout) {
|
||||
clearTimeout(doubleTapTimeout);
|
||||
doubleTapTimeout = undefined;
|
||||
this.onPointerDoublePress(event);
|
||||
return;
|
||||
}
|
||||
clearTimeout(doubleTapTimeout);
|
||||
doubleTapTimeout = setTimeout(() => doubleTapTimeout = undefined, 250);
|
||||
}));
|
||||
if (typeof options.size === 'number') {
|
||||
this.size = options.size;
|
||||
if (options.orientation === 0 /* Orientation.VERTICAL */) {
|
||||
this.el.style.width = `${this.size}px`;
|
||||
}
|
||||
else {
|
||||
this.el.style.height = `${this.size}px`;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.size = globalSize;
|
||||
this._register(onDidChangeGlobalSize.event(size => {
|
||||
this.size = size;
|
||||
this.layout();
|
||||
}));
|
||||
}
|
||||
this._register(onDidChangeHoverDelay.event(delay => this.hoverDelay = delay));
|
||||
this.layoutProvider = layoutProvider;
|
||||
this.orthogonalStartSash = options.orthogonalStartSash;
|
||||
this.orthogonalEndSash = options.orthogonalEndSash;
|
||||
this.orientation = options.orientation || 0 /* Orientation.VERTICAL */;
|
||||
if (this.orientation === 1 /* Orientation.HORIZONTAL */) {
|
||||
this.el.classList.add('horizontal');
|
||||
this.el.classList.remove('vertical');
|
||||
}
|
||||
else {
|
||||
this.el.classList.remove('horizontal');
|
||||
this.el.classList.add('vertical');
|
||||
}
|
||||
this.el.classList.toggle('debug', DEBUG);
|
||||
this.layout();
|
||||
}
|
||||
onPointerStart(event, pointerEventFactory) {
|
||||
EventHelper.stop(event);
|
||||
let isMultisashResize = false;
|
||||
if (!event.__orthogonalSashEvent) {
|
||||
const orthogonalSash = this.getOrthogonalSash(event);
|
||||
if (orthogonalSash) {
|
||||
isMultisashResize = true;
|
||||
event.__orthogonalSashEvent = true;
|
||||
orthogonalSash.onPointerStart(event, new OrthogonalPointerEventFactory(pointerEventFactory));
|
||||
}
|
||||
}
|
||||
if (this.linkedSash && !event.__linkedSashEvent) {
|
||||
event.__linkedSashEvent = true;
|
||||
this.linkedSash.onPointerStart(event, new OrthogonalPointerEventFactory(pointerEventFactory));
|
||||
}
|
||||
if (!this.state) {
|
||||
return;
|
||||
}
|
||||
const iframes = this.el.ownerDocument.getElementsByTagName('iframe');
|
||||
for (const iframe of iframes) {
|
||||
iframe.classList.add(PointerEventsDisabledCssClass); // disable mouse events on iframes as long as we drag the sash
|
||||
}
|
||||
const startX = event.pageX;
|
||||
const startY = event.pageY;
|
||||
const altKey = event.altKey;
|
||||
const startEvent = { startX, currentX: startX, startY, currentY: startY, altKey };
|
||||
this.el.classList.add('active');
|
||||
this._onDidStart.fire(startEvent);
|
||||
// fix https://github.com/microsoft/vscode/issues/21675
|
||||
const style = createStyleSheet(this.el);
|
||||
const updateStyle = () => {
|
||||
let cursor = '';
|
||||
if (isMultisashResize) {
|
||||
cursor = 'all-scroll';
|
||||
}
|
||||
else if (this.orientation === 1 /* Orientation.HORIZONTAL */) {
|
||||
if (this.state === 1 /* SashState.AtMinimum */) {
|
||||
cursor = 's-resize';
|
||||
}
|
||||
else if (this.state === 2 /* SashState.AtMaximum */) {
|
||||
cursor = 'n-resize';
|
||||
}
|
||||
else {
|
||||
cursor = isMacintosh ? 'row-resize' : 'ns-resize';
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.state === 1 /* SashState.AtMinimum */) {
|
||||
cursor = 'e-resize';
|
||||
}
|
||||
else if (this.state === 2 /* SashState.AtMaximum */) {
|
||||
cursor = 'w-resize';
|
||||
}
|
||||
else {
|
||||
cursor = isMacintosh ? 'col-resize' : 'ew-resize';
|
||||
}
|
||||
}
|
||||
style.textContent = `* { cursor: ${cursor} !important; }`;
|
||||
};
|
||||
const disposables = new DisposableStore();
|
||||
updateStyle();
|
||||
if (!isMultisashResize) {
|
||||
this.onDidEnablementChange.event(updateStyle, null, disposables);
|
||||
}
|
||||
const onPointerMove = (e) => {
|
||||
EventHelper.stop(e, false);
|
||||
const event = { startX, currentX: e.pageX, startY, currentY: e.pageY, altKey };
|
||||
this._onDidChange.fire(event);
|
||||
};
|
||||
const onPointerUp = (e) => {
|
||||
EventHelper.stop(e, false);
|
||||
style.remove();
|
||||
this.el.classList.remove('active');
|
||||
this._onDidEnd.fire();
|
||||
disposables.dispose();
|
||||
for (const iframe of iframes) {
|
||||
iframe.classList.remove(PointerEventsDisabledCssClass);
|
||||
}
|
||||
};
|
||||
pointerEventFactory.onPointerMove(onPointerMove, null, disposables);
|
||||
pointerEventFactory.onPointerUp(onPointerUp, null, disposables);
|
||||
disposables.add(pointerEventFactory);
|
||||
}
|
||||
onPointerDoublePress(e) {
|
||||
const orthogonalSash = this.getOrthogonalSash(e);
|
||||
if (orthogonalSash) {
|
||||
orthogonalSash._onDidReset.fire();
|
||||
}
|
||||
if (this.linkedSash) {
|
||||
this.linkedSash._onDidReset.fire();
|
||||
}
|
||||
this._onDidReset.fire();
|
||||
}
|
||||
static onMouseEnter(sash, fromLinkedSash = false) {
|
||||
if (sash.el.classList.contains('active')) {
|
||||
sash.hoverDelayer.cancel();
|
||||
sash.el.classList.add('hover');
|
||||
}
|
||||
else {
|
||||
sash.hoverDelayer.trigger(() => sash.el.classList.add('hover'), sash.hoverDelay).then(undefined, () => { });
|
||||
}
|
||||
if (!fromLinkedSash && sash.linkedSash) {
|
||||
Sash.onMouseEnter(sash.linkedSash, true);
|
||||
}
|
||||
}
|
||||
static onMouseLeave(sash, fromLinkedSash = false) {
|
||||
sash.hoverDelayer.cancel();
|
||||
sash.el.classList.remove('hover');
|
||||
if (!fromLinkedSash && sash.linkedSash) {
|
||||
Sash.onMouseLeave(sash.linkedSash, true);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Forcefully stop any user interactions with this sash.
|
||||
* Useful when hiding a parent component, while the user is still
|
||||
* interacting with the sash.
|
||||
*/
|
||||
clearSashHoverState() {
|
||||
Sash.onMouseLeave(this);
|
||||
}
|
||||
/**
|
||||
* Layout the sash. The sash will size and position itself
|
||||
* based on its provided {@link ISashLayoutProvider layout provider}.
|
||||
*/
|
||||
layout() {
|
||||
if (this.orientation === 0 /* Orientation.VERTICAL */) {
|
||||
const verticalProvider = this.layoutProvider;
|
||||
this.el.style.left = verticalProvider.getVerticalSashLeft(this) - (this.size / 2) + 'px';
|
||||
if (verticalProvider.getVerticalSashTop) {
|
||||
this.el.style.top = verticalProvider.getVerticalSashTop(this) + 'px';
|
||||
}
|
||||
if (verticalProvider.getVerticalSashHeight) {
|
||||
this.el.style.height = verticalProvider.getVerticalSashHeight(this) + 'px';
|
||||
}
|
||||
}
|
||||
else {
|
||||
const horizontalProvider = this.layoutProvider;
|
||||
this.el.style.top = horizontalProvider.getHorizontalSashTop(this) - (this.size / 2) + 'px';
|
||||
if (horizontalProvider.getHorizontalSashLeft) {
|
||||
this.el.style.left = horizontalProvider.getHorizontalSashLeft(this) + 'px';
|
||||
}
|
||||
if (horizontalProvider.getHorizontalSashWidth) {
|
||||
this.el.style.width = horizontalProvider.getHorizontalSashWidth(this) + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
getOrthogonalSash(e) {
|
||||
const target = e.initialTarget ?? e.target;
|
||||
if (!target || !(isHTMLElement(target))) {
|
||||
return undefined;
|
||||
}
|
||||
if (target.classList.contains('orthogonal-drag-handle')) {
|
||||
return target.classList.contains('start') ? this.orthogonalStartSash : this.orthogonalEndSash;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
dispose() {
|
||||
super.dispose();
|
||||
this.el.remove();
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=sash.js.map
|
||||
1
_internal/editor/esm/vs/base/browser/ui/sash/sash.js.map
Normal file
1
_internal/editor/esm/vs/base/browser/ui/sash/sash.js.map
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,212 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import * as dom from '../../dom.js';
|
||||
import { createFastDomNode } from '../../fastDomNode.js';
|
||||
import { GlobalPointerMoveMonitor } from '../../globalPointerMoveMonitor.js';
|
||||
import { ScrollbarArrow } from './scrollbarArrow.js';
|
||||
import { ScrollbarVisibilityController } from './scrollbarVisibilityController.js';
|
||||
import { Widget } from '../widget.js';
|
||||
import * as platform from '../../../common/platform.js';
|
||||
/**
|
||||
* The orthogonal distance to the slider at which dragging "resets". This implements "snapping"
|
||||
*/
|
||||
const POINTER_DRAG_RESET_DISTANCE = 140;
|
||||
export class AbstractScrollbar extends Widget {
|
||||
constructor(opts) {
|
||||
super();
|
||||
this._lazyRender = opts.lazyRender;
|
||||
this._host = opts.host;
|
||||
this._scrollable = opts.scrollable;
|
||||
this._scrollByPage = opts.scrollByPage;
|
||||
this._scrollbarState = opts.scrollbarState;
|
||||
this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'visible scrollbar ' + opts.extraScrollbarClassName, 'invisible scrollbar ' + opts.extraScrollbarClassName));
|
||||
this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
|
||||
this._pointerMoveMonitor = this._register(new GlobalPointerMoveMonitor());
|
||||
this._shouldRender = true;
|
||||
this.domNode = createFastDomNode(document.createElement('div'));
|
||||
this.domNode.setAttribute('role', 'presentation');
|
||||
this.domNode.setAttribute('aria-hidden', 'true');
|
||||
this._visibilityController.setDomNode(this.domNode);
|
||||
this.domNode.setPosition('absolute');
|
||||
this._register(dom.addDisposableListener(this.domNode.domNode, dom.EventType.POINTER_DOWN, (e) => this._domNodePointerDown(e)));
|
||||
}
|
||||
// ----------------- creation
|
||||
/**
|
||||
* Creates the dom node for an arrow & adds it to the container
|
||||
*/
|
||||
_createArrow(opts) {
|
||||
const arrow = this._register(new ScrollbarArrow(opts));
|
||||
this.domNode.domNode.appendChild(arrow.bgDomNode);
|
||||
this.domNode.domNode.appendChild(arrow.domNode);
|
||||
}
|
||||
/**
|
||||
* Creates the slider dom node, adds it to the container & hooks up the events
|
||||
*/
|
||||
_createSlider(top, left, width, height) {
|
||||
this.slider = createFastDomNode(document.createElement('div'));
|
||||
this.slider.setClassName('slider');
|
||||
this.slider.setPosition('absolute');
|
||||
this.slider.setTop(top);
|
||||
this.slider.setLeft(left);
|
||||
if (typeof width === 'number') {
|
||||
this.slider.setWidth(width);
|
||||
}
|
||||
if (typeof height === 'number') {
|
||||
this.slider.setHeight(height);
|
||||
}
|
||||
this.slider.setLayerHinting(true);
|
||||
this.slider.setContain('strict');
|
||||
this.domNode.domNode.appendChild(this.slider.domNode);
|
||||
this._register(dom.addDisposableListener(this.slider.domNode, dom.EventType.POINTER_DOWN, (e) => {
|
||||
if (e.button === 0) {
|
||||
e.preventDefault();
|
||||
this._sliderPointerDown(e);
|
||||
}
|
||||
}));
|
||||
this.onclick(this.slider.domNode, e => {
|
||||
if (e.leftButton) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
}
|
||||
// ----------------- Update state
|
||||
_onElementSize(visibleSize) {
|
||||
if (this._scrollbarState.setVisibleSize(visibleSize)) {
|
||||
this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
|
||||
this._shouldRender = true;
|
||||
if (!this._lazyRender) {
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
return this._shouldRender;
|
||||
}
|
||||
_onElementScrollSize(elementScrollSize) {
|
||||
if (this._scrollbarState.setScrollSize(elementScrollSize)) {
|
||||
this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
|
||||
this._shouldRender = true;
|
||||
if (!this._lazyRender) {
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
return this._shouldRender;
|
||||
}
|
||||
_onElementScrollPosition(elementScrollPosition) {
|
||||
if (this._scrollbarState.setScrollPosition(elementScrollPosition)) {
|
||||
this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
|
||||
this._shouldRender = true;
|
||||
if (!this._lazyRender) {
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
return this._shouldRender;
|
||||
}
|
||||
// ----------------- rendering
|
||||
beginReveal() {
|
||||
this._visibilityController.setShouldBeVisible(true);
|
||||
}
|
||||
beginHide() {
|
||||
this._visibilityController.setShouldBeVisible(false);
|
||||
}
|
||||
render() {
|
||||
if (!this._shouldRender) {
|
||||
return;
|
||||
}
|
||||
this._shouldRender = false;
|
||||
this._renderDomNode(this._scrollbarState.getRectangleLargeSize(), this._scrollbarState.getRectangleSmallSize());
|
||||
this._updateSlider(this._scrollbarState.getSliderSize(), this._scrollbarState.getArrowSize() + this._scrollbarState.getSliderPosition());
|
||||
}
|
||||
// ----------------- DOM events
|
||||
_domNodePointerDown(e) {
|
||||
if (e.target !== this.domNode.domNode) {
|
||||
return;
|
||||
}
|
||||
this._onPointerDown(e);
|
||||
}
|
||||
delegatePointerDown(e) {
|
||||
const domTop = this.domNode.domNode.getClientRects()[0].top;
|
||||
const sliderStart = domTop + this._scrollbarState.getSliderPosition();
|
||||
const sliderStop = domTop + this._scrollbarState.getSliderPosition() + this._scrollbarState.getSliderSize();
|
||||
const pointerPos = this._sliderPointerPosition(e);
|
||||
if (sliderStart <= pointerPos && pointerPos <= sliderStop) {
|
||||
// Act as if it was a pointer down on the slider
|
||||
if (e.button === 0) {
|
||||
e.preventDefault();
|
||||
this._sliderPointerDown(e);
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Act as if it was a pointer down on the scrollbar
|
||||
this._onPointerDown(e);
|
||||
}
|
||||
}
|
||||
_onPointerDown(e) {
|
||||
let offsetX;
|
||||
let offsetY;
|
||||
if (e.target === this.domNode.domNode && typeof e.offsetX === 'number' && typeof e.offsetY === 'number') {
|
||||
offsetX = e.offsetX;
|
||||
offsetY = e.offsetY;
|
||||
}
|
||||
else {
|
||||
const domNodePosition = dom.getDomNodePagePosition(this.domNode.domNode);
|
||||
offsetX = e.pageX - domNodePosition.left;
|
||||
offsetY = e.pageY - domNodePosition.top;
|
||||
}
|
||||
const isMouse = (e.pointerType === 'mouse');
|
||||
const isLeftClick = (e.button === 0);
|
||||
if (isLeftClick || !isMouse) {
|
||||
const offset = this._pointerDownRelativePosition(offsetX, offsetY);
|
||||
this._setDesiredScrollPositionNow(this._scrollByPage
|
||||
? this._scrollbarState.getDesiredScrollPositionFromOffsetPaged(offset)
|
||||
: this._scrollbarState.getDesiredScrollPositionFromOffset(offset));
|
||||
}
|
||||
if (isLeftClick) {
|
||||
// left button
|
||||
e.preventDefault();
|
||||
this._sliderPointerDown(e);
|
||||
}
|
||||
}
|
||||
_sliderPointerDown(e) {
|
||||
if (!e.target || !(e.target instanceof Element)) {
|
||||
return;
|
||||
}
|
||||
const initialPointerPosition = this._sliderPointerPosition(e);
|
||||
const initialPointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(e);
|
||||
const initialScrollbarState = this._scrollbarState.clone();
|
||||
this.slider.toggleClassName('active', true);
|
||||
this._pointerMoveMonitor.startMonitoring(e.target, e.pointerId, e.buttons, (pointerMoveData) => {
|
||||
const pointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(pointerMoveData);
|
||||
const pointerOrthogonalDelta = Math.abs(pointerOrthogonalPosition - initialPointerOrthogonalPosition);
|
||||
if (platform.isWindows && pointerOrthogonalDelta > POINTER_DRAG_RESET_DISTANCE) {
|
||||
// The pointer has wondered away from the scrollbar => reset dragging
|
||||
this._setDesiredScrollPositionNow(initialScrollbarState.getScrollPosition());
|
||||
return;
|
||||
}
|
||||
const pointerPosition = this._sliderPointerPosition(pointerMoveData);
|
||||
const pointerDelta = pointerPosition - initialPointerPosition;
|
||||
this._setDesiredScrollPositionNow(initialScrollbarState.getDesiredScrollPositionFromDelta(pointerDelta));
|
||||
}, () => {
|
||||
this.slider.toggleClassName('active', false);
|
||||
this._host.onDragEnd();
|
||||
});
|
||||
this._host.onDragStart();
|
||||
}
|
||||
_setDesiredScrollPositionNow(_desiredScrollPosition) {
|
||||
const desiredScrollPosition = {};
|
||||
this.writeScrollPosition(desiredScrollPosition, _desiredScrollPosition);
|
||||
this._scrollable.setScrollPositionNow(desiredScrollPosition);
|
||||
}
|
||||
updateScrollbarSize(scrollbarSize) {
|
||||
this._updateScrollbarSize(scrollbarSize);
|
||||
this._scrollbarState.setScrollbarSize(scrollbarSize);
|
||||
this._shouldRender = true;
|
||||
if (!this._lazyRender) {
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
isNeeded() {
|
||||
return this._scrollbarState.isNeeded();
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=abstractScrollbar.js.map
|
||||
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user