development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-09-18 01:58:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix #123710

Browse source
This commit is contained in:
meganrogge 2021-05-13 10:48:53 -07:00
parent 36e652b5ae
commit 6df6fd01e7
No known key found for this signature in database
GPG key ID: 3155C8B2F0428C81
3 changed files with 68 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/vs/workbench/contrib/terminal/browser/media/terminal.css
View file

@ -203,7 +203,7 @@
flex-direction: column;
}
.monaco-workbench .pane-body.integrated-terminal .tabs-widget-container {
.monaco-workbench .pane-body.integrated-terminal .tabs-list-container {
height: 100%;
overflow: hidden;
}
@ -221,21 +221,21 @@
text-align: left;
}
.monaco-workbench .pane-body.integrated-terminal .tabs-widget {
.monaco-workbench .pane-body.integrated-terminal .tabs-list {
height: 100%;
}
.monaco-workbench .pane-body.integrated-terminal .tabs-widget .terminal-tabs-entry {
.monaco-workbench .pane-body.integrated-terminal .tabs-list .terminal-tabs-entry {
text-align: center;
}
.monaco-workbench .pane-body.integrated-terminal .tabs-container.has-text .tabs-widget .terminal-tabs-entry {
.monaco-workbench .pane-body.integrated-terminal .tabs-container.has-text .tabs-list .terminal-tabs-entry {
padding-left: 10px;
padding-right: 10px;
text-align: left;
}
.monaco-workbench .pane-body.integrated-terminal .tabs-container.has-text .tabs-widget .terminal-tabs-entry .monaco-icon-label::after {
.monaco-workbench .pane-body.integrated-terminal .tabs-container.has-text .tabs-list .terminal-tabs-entry .monaco-icon-label::after {
padding-right: 0
}
@ -249,21 +249,21 @@
display: none;
}
.monaco-workbench .pane-body.integrated-terminal .tabs-widget .codicon {
.monaco-workbench .pane-body.integrated-terminal .tabs-list .codicon {
vertical-align: text-bottom;
}
.monaco-workbench .pane-body.integrated-terminal .tabs-widget .actions {
.monaco-workbench .pane-body.integrated-terminal .tabs-list .actions {
display: none;
}
.monaco-workbench .pane-body.integrated-terminal .tabs-widget .actions .action-label {
.monaco-workbench .pane-body.integrated-terminal .tabs-list .actions .action-label {
padding: 2px;
}
.monaco-workbench .pane-body.integrated-terminal .tabs-widget .monaco-list-row:hover .actions,
.monaco-workbench .pane-body.integrated-terminal .tabs-widget:focus-within .monaco-list-row.selected .actions,
.monaco-workbench .pane-body.integrated-terminal .tabs-widget:focus-within .monaco-list-row.focused .actions {
.monaco-workbench .pane-body.integrated-terminal .tabs-list .monaco-list-row:hover .actions,
.monaco-workbench .pane-body.integrated-terminal .tabs-list:focus-within .monaco-list-row.selected .actions,
.monaco-workbench .pane-body.integrated-terminal .tabs-list:focus-within .monaco-list-row.focused .actions {
display: block;
}

106
src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts
View file

@ -9,7 +9,7 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { ITerminalInstance, ITerminalInstanceService, ITerminalService, TerminalConnectionState } from 'vs/workbench/contrib/terminal/browser/terminal';
import { TerminalFindWidget } from 'vs/workbench/contrib/terminal/browser/terminalFindWidget';
import { DEFAULT_TABS_WIDGET_WIDTH, MIDPOINT_WIDGET_WIDTH, MIN_TABS_WIDGET_WIDTH, TerminalTabList } from 'vs/workbench/contrib/terminal/browser/terminalTabsList';
import { DEFAULT_TABS_LIST_WIDTH, MIDPOINT_LIST_WIDTH, MIN_TABS_LIST_WIDTH, TerminalTabList } from 'vs/workbench/contrib/terminal/browser/terminalTabsList';
import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeService';
import { isLinux, isMacintosh } from 'vs/base/common/platform';
import * as dom from 'vs/base/browser/dom';
@ -31,9 +31,9 @@ import { localize } from 'vs/nls';
const $ = dom.$;
const FIND_FOCUS_CLASS = 'find-focused';
const TABS_WIDGET_WIDTH_HORIZONTAL_KEY = 'tabs-widget-width-horizontal';
const TABS_WIDGET_WIDTH_VERTICAL_KEY = 'tabs-widget-width-vertical';
const MAX_TABS_WIDGET_WIDTH = 500;
const TABS_LIST_WIDTH_HORIZONTAL_KEY = 'tabs-list-width-horizontal';
const TABS_LIST_WIDTH_VERTICAL_KEY = 'tabs-list-width-vertical';
const MAX_TABS_LIST_WIDTH = 500;
const STATUS_ICON_WIDTH = 30;
const SPLIT_ANNOTATION_WIDTH = 30;
@ -42,9 +42,9 @@ export class TerminalTabbedView extends Disposable {
private _splitView: SplitView;
private _terminalContainer: HTMLElement;
private _terminalTabTree: HTMLElement;
private _tabListElement: HTMLElement;
private _parentElement: HTMLElement;
private _tabTreeContainer: HTMLElement;
private _tabContainer: HTMLElement;
private _tabList: TerminalTabList;
private _findWidget: TerminalFindWidget;
@ -62,8 +62,8 @@ export class TerminalTabbedView extends Disposable {
private _cancelContextMenu: boolean = false;
private _instanceMenu: IMenu;
private _tabsWidgetMenu: IMenu;
private _tabsWidgetEmptyMenu: IMenu;
private _tabsListMenu: IMenu;
private _tabsListEmptyMenu: IMenu;
private _terminalIsTabsNarrowContextKey: IContextKey<boolean>;
private _terminalTabsFocusContextKey: IContextKey<boolean>;
@ -88,17 +88,17 @@ export class TerminalTabbedView extends Disposable {
this._parentElement = parentElement;
this._tabTreeContainer = $('.tabs-container');
const tabWidgetContainer = $('.tabs-widget-container');
this._terminalTabTree = $('.tabs-widget');
tabWidgetContainer.appendChild(this._terminalTabTree);
this._tabTreeContainer.appendChild(tabWidgetContainer);
this._tabContainer = $('.tabs-container');
const tabListContainer = $('.tabs-list-container');
this._tabListElement = $('.tabs-list');
tabListContainer.appendChild(this._tabListElement);
this._tabContainer.appendChild(tabListContainer);
this._instanceMenu = this._register(menuService.createMenu(MenuId.TerminalInstanceContext, contextKeyService));
this._tabsWidgetMenu = this._register(menuService.createMenu(MenuId.TerminalTabContext, contextKeyService));
this._tabsWidgetEmptyMenu = this._register(menuService.createMenu(MenuId.TerminalTabEmptyAreaContext, contextKeyService));
this._tabsListMenu = this._register(menuService.createMenu(MenuId.TerminalTabContext, contextKeyService));
this._tabsListEmptyMenu = this._register(menuService.createMenu(MenuId.TerminalTabEmptyAreaContext, contextKeyService));
this._register(this._tabList = this._instantiationService.createInstance(TerminalTabList, this._terminalTabTree));
this._register(this._tabList = this._instantiationService.createInstance(TerminalTabList, this._tabListElement));
this._register(this._findWidget = this._instantiationService.createInstance(TerminalFindWidget, this._terminalService.getFindState()));
parentElement.appendChild(this._findWidget.getDomNode());
@ -128,7 +128,7 @@ export class TerminalTabbedView extends Disposable {
this._splitView.swapViews(0, 1);
this._removeSashListener();
this._addSashListener();
this._splitView.resizeView(this._tabTreeIndex, this._getLastWidgetWidth());
this._splitView.resizeView(this._tabTreeIndex, this._getLastListWidth());
}
}
});
@ -160,52 +160,52 @@ export class TerminalTabbedView extends Disposable {
if (this._splitView.length === 1) {
this._addTabTree();
this._addSashListener();
this._splitView.resizeView(this._tabTreeIndex, this._getLastWidgetWidth());
this._splitView.resizeView(this._tabTreeIndex, this._getLastListWidth());
this._rerenderTabs();
}
} else {
if (this._splitView.length === 2 && !this._terminalTabsMouseContextKey.get()) {
this._splitView.removeView(this._tabTreeIndex);
if (this._plusButton) {
this._tabTreeContainer.removeChild(this._plusButton);
this._tabContainer.removeChild(this._plusButton);
}
this._removeSashListener();
}
}
}
private _getLastWidgetWidth(): number {
const widthKey = this._panelOrientation === Orientation.VERTICAL ? TABS_WIDGET_WIDTH_VERTICAL_KEY : TABS_WIDGET_WIDTH_HORIZONTAL_KEY;
private _getLastListWidth(): number {
const widthKey = this._panelOrientation === Orientation.VERTICAL ? TABS_LIST_WIDTH_VERTICAL_KEY : TABS_LIST_WIDTH_HORIZONTAL_KEY;
const storedValue = this._storageService.get(widthKey, StorageScope.WORKSPACE);
if (!storedValue || !parseInt(storedValue)) {
// we want to use the min width by default for the vertical orientation bc
// there is such a limited width for the terminal panel to begin w there.
return this._panelOrientation === Orientation.VERTICAL ? MIN_TABS_WIDGET_WIDTH : DEFAULT_TABS_WIDGET_WIDTH;
return this._panelOrientation === Orientation.VERTICAL ? MIN_TABS_LIST_WIDTH : DEFAULT_TABS_LIST_WIDTH;
}
return parseInt(storedValue);
}
private _handleOnDidSashReset(): void {
// Calculate ideal size of widget to display all text based on its contents
let idealWidth = DEFAULT_TABS_WIDGET_WIDTH;
// Calculate ideal size of list to display all text based on its contents
let idealWidth = DEFAULT_TABS_LIST_WIDTH;
const offscreenCanvas = new OffscreenCanvas(1, 1);
const ctx = offscreenCanvas.getContext('2d');
if (ctx) {
const style = window.getComputedStyle(this._terminalTabTree);
const style = window.getComputedStyle(this._tabListElement);
ctx.font = `${style.fontStyle} ${style.fontSize} ${style.fontFamily}`;
const maxInstanceWidth = this._terminalService.terminalInstances.reduce((p, c) => {
return Math.max(p, ctx.measureText(c.title + (c.shellLaunchConfig.description || '')).width + this._getAdditionalWidth(c));
}, 0);
idealWidth = Math.ceil(Math.max(maxInstanceWidth, DEFAULT_TABS_WIDGET_WIDTH));
idealWidth = Math.ceil(Math.max(maxInstanceWidth, DEFAULT_TABS_LIST_WIDTH));
}
// If the size is already ideal, toggle to collapsed
const currentWidth = Math.ceil(this._splitView.getViewSize(this._tabTreeIndex));
if (currentWidth === idealWidth) {
idealWidth = MIN_TABS_WIDGET_WIDTH;
idealWidth = MIN_TABS_LIST_WIDTH;
}
this._splitView.resizeView(this._tabTreeIndex, idealWidth);
this._updateWidgetWidth(idealWidth);
this._updateListWidth(idealWidth);
}
private _getAdditionalWidth(instance: ITerminalInstance): number {
@ -217,23 +217,23 @@ export class TerminalTabbedView extends Disposable {
}
private _handleOnDidSashChange(): void {
const widgetWidth = this._splitView.getViewSize(this._tabTreeIndex);
if (!this._width || widgetWidth <= 0) {
const listWidth = this._splitView.getViewSize(this._tabTreeIndex);
if (!this._width || listWidth <= 0) {
return;
}
this._updateWidgetWidth(widgetWidth);
this._updateListWidth(listWidth);
}
private _updateWidgetWidth(width: number): void {
if (width < MIDPOINT_WIDGET_WIDTH && width >= MIN_TABS_WIDGET_WIDTH) {
width = MIN_TABS_WIDGET_WIDTH;
private _updateListWidth(width: number): void {
if (width < MIDPOINT_LIST_WIDTH && width >= MIN_TABS_LIST_WIDTH) {
width = MIN_TABS_LIST_WIDTH;
this._splitView.resizeView(this._tabTreeIndex, width);
} else if (width >= MIDPOINT_WIDGET_WIDTH && width < DEFAULT_TABS_WIDGET_WIDTH) {
width = DEFAULT_TABS_WIDGET_WIDTH;
} else if (width >= MIDPOINT_LIST_WIDTH && width < DEFAULT_TABS_LIST_WIDTH) {
width = DEFAULT_TABS_LIST_WIDTH;
this._splitView.resizeView(this._tabTreeIndex, width);
}
this._rerenderTabs();
const widthKey = this._panelOrientation === Orientation.VERTICAL ? TABS_WIDGET_WIDTH_VERTICAL_KEY : TABS_WIDGET_WIDTH_HORIZONTAL_KEY;
const widthKey = this._panelOrientation === Orientation.VERTICAL ? TABS_LIST_WIDTH_VERTICAL_KEY : TABS_LIST_WIDTH_HORIZONTAL_KEY;
this._storageService.store(widthKey, width, StorageScope.WORKSPACE, StorageTarget.USER);
}
@ -260,10 +260,10 @@ export class TerminalTabbedView extends Disposable {
private _addTabTree() {
this._splitView.addView({
element: this._tabTreeContainer,
element: this._tabContainer,
layout: width => this._tabList.layout(this._height || 0, width),
minimumSize: MIN_TABS_WIDGET_WIDTH,
maximumSize: MAX_TABS_WIDGET_WIDTH,
minimumSize: MIN_TABS_LIST_WIDTH,
maximumSize: MAX_TABS_LIST_WIDTH,
onDidChange: () => Disposable.None,
priority: LayoutPriority.Low
}, Sizing.Distribute, this._tabTreeIndex);
@ -271,8 +271,8 @@ export class TerminalTabbedView extends Disposable {
}
private _rerenderTabs() {
const hasText = this._terminalTabTree.clientWidth > MIDPOINT_WIDGET_WIDTH;
this._tabTreeContainer.classList.toggle('has-text', hasText);
const hasText = this._tabListElement.clientWidth > MIDPOINT_LIST_WIDTH;
this._tabContainer.classList.toggle('has-text', hasText);
this._terminalIsTabsNarrowContextKey.set(!hasText);
this._tabList.render();
}
@ -304,7 +304,7 @@ export class TerminalTabbedView extends Disposable {
this._width = width;
this._splitView.layout(width);
if (this._shouldShowTabs()) {
this._splitView.resizeView(this._tabTreeIndex, this._getLastWidgetWidth());
this._splitView.resizeView(this._tabTreeIndex, this._getLastListWidth());
}
this._rerenderTabs();
}
@ -318,12 +318,12 @@ export class TerminalTabbedView extends Disposable {
}
private _attachEventListeners(parentDomElement: HTMLElement, terminalContainer: HTMLElement): void {
this._register(dom.addDisposableListener(this._tabTreeContainer, 'mouseleave', async (event: MouseEvent) => {
this._register(dom.addDisposableListener(this._tabContainer, 'mouseleave', async (event: MouseEvent) => {
this._terminalTabsMouseContextKey.set(false);
this._refreshShowTabs();
event.stopPropagation();
}));
this._register(dom.addDisposableListener(this._tabTreeContainer, 'mouseenter', async (event: MouseEvent) => {
this._register(dom.addDisposableListener(this._tabContainer, 'mouseenter', async (event: MouseEvent) => {
this._terminalTabsMouseContextKey.set(true);
event.stopPropagation();
}));
@ -384,9 +384,9 @@ export class TerminalTabbedView extends Disposable {
event.stopImmediatePropagation();
this._cancelContextMenu = false;
}));
this._register(dom.addDisposableListener(this._tabTreeContainer, 'contextmenu', (event: MouseEvent) => {
this._register(dom.addDisposableListener(this._tabContainer, 'contextmenu', (event: MouseEvent) => {
if (!this._cancelContextMenu) {
this._openContextMenu(event, this._tabTreeContainer);
this._openContextMenu(event, this._tabContainer);
}
event.preventDefault();
event.stopImmediatePropagation();
@ -404,10 +404,10 @@ export class TerminalTabbedView extends Disposable {
event.stopPropagation();
}
}));
this._register(dom.addDisposableListener(this._tabTreeContainer, dom.EventType.FOCUS_IN, () => {
this._register(dom.addDisposableListener(this._tabContainer, dom.EventType.FOCUS_IN, () => {
this._terminalTabsFocusContextKey.set(true);
}));
this._register(dom.addDisposableListener(this._tabTreeContainer, dom.EventType.FOCUS_OUT, () => {
this._register(dom.addDisposableListener(this._tabContainer, dom.EventType.FOCUS_OUT, () => {
this._terminalTabsFocusContextKey.set(false);
}));
this._register(dom.addDisposableListener(parentDomElement, dom.EventType.DROP, async (e: DragEvent) => {
@ -449,13 +449,13 @@ export class TerminalTabbedView extends Disposable {
if (parent === this._terminalContainer) {
menu = this._instanceMenu;
} else {
menu = this._tabList.getFocus().length === 0 ? this._tabsWidgetEmptyMenu : this._tabsWidgetMenu;
menu = this._tabList.getFocus().length === 0 ? this._tabsListEmptyMenu : this._tabsListMenu;
}
const actionsDisposable = createAndFillInContextMenuActions(menu, undefined, actions);
// TODO: Convert to command?
if (menu === this._tabsWidgetEmptyMenu) {
if (menu === this._tabsListEmptyMenu) {
actions.push(...this._getTabActions());
}
@ -511,7 +511,7 @@ export class TerminalTabbedView extends Disposable {
this._findWidget!.hide();
}
showFindWidget() {
showFindList() {
const activeInstance = this._terminalService.getActiveInstance();
if (activeInstance && activeInstance.hasSelection() && activeInstance.selection!.indexOf('\n') === -1) {
this._findWidget!.show(activeInstance.selection);
@ -520,7 +520,7 @@ export class TerminalTabbedView extends Disposable {
}
}
getFindWidget(): TerminalFindWidget {
getFindList(): TerminalFindWidget {
return this._findWidget!;
}

8
src/vs/workbench/contrib/terminal/browser/terminalTabsList.ts
View file

@ -31,9 +31,9 @@ import { IListRenderer } from 'vs/base/browser/ui/list/list';
const $ = DOM.$;
const TAB_HEIGHT = 22;
export const MIN_TABS_WIDGET_WIDTH = 46;
export const DEFAULT_TABS_WIDGET_WIDTH = 80;
export const MIDPOINT_WIDGET_WIDTH = (MIN_TABS_WIDGET_WIDTH + DEFAULT_TABS_WIDGET_WIDTH) / 2;
export const MIN_TABS_LIST_WIDTH = 46;
export const DEFAULT_TABS_LIST_WIDTH = 80;
export const MIDPOINT_LIST_WIDTH = (MIN_TABS_LIST_WIDTH + DEFAULT_TABS_LIST_WIDTH) / 2;
export const THRESHOLD_ACTIONBAR_WIDTH = 105;
export class TerminalTabList extends WorkbenchList<ITerminalInstance> {
@ -205,7 +205,7 @@ class TerminalTabsRenderer implements IListRenderer<ITerminalInstance, ITerminal
}
shouldHideText(): boolean {
return this._container ? this._container.clientWidth < MIDPOINT_WIDGET_WIDTH : false;
return this._container ? this._container.clientWidth < MIDPOINT_LIST_WIDTH : false;
}
shouldHideActionBar(): boolean {