Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support different tab heights #192153

Merged
merged 11 commits into from
Sep 6, 2023
Merged

Support different tab heights #192153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
09a9c01
Support different tab heights
benibenj Sep 4, 2023
a58ff17
Merge branch 'main' into benibenj/tabHeight
benibenj Sep 4, 2023
2803207
support not tabs tabheight
benibenj Sep 5, 2023
10bcc3b
Merge branch 'main' into benibenj/tabHeight
benibenj Sep 5, 2023
4509267
modify tabheight description
benibenj Sep 5, 2023
7dcecb1
Merge branch 'main' into benibenj/tabHeight
bpasero Sep 6, 2023
2e33655
rename variables title height, added super methods
benibenj Sep 6, 2023
908d5f1
variable renaming
benibenj Sep 6, 2023
1f6e0ae
Merge branch 'main' into benibenj/tabHeight
benibenj Sep 6, 2023
ebf1fa4
reformat
benibenj Sep 6, 2023
72f67fa
Merge branch 'main' into benibenj/tabHeight
benibenj Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions build/lib/stylelint/vscode-known-variables.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -734,6 +734,7 @@
"--tab-sizing-current-width",
"--tab-sizing-fixed-min-width",
"--tab-sizing-fixed-max-width",
"--editor-group-title-height",
"--testMessageDecorationFontFamily",
"--testMessageDecorationFontSize",
"--title-border-bottom-color",
Expand Down
1 change: 1 addition & 0 deletions src/vs/workbench/browser/parts/editor/editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const DEFAULT_EDITOR_PART_OPTIONS: IEditorPartOptions = {
tabSizingFixedMinWidth: 50,
tabSizingFixedMaxWidth: 160,
pinnedTabSizing: 'normal',
tabHeight: 'normal',
preventPinnedEditorClose: 'keyboardAndMouse',
titleScrollbarSizing: 'default',
focusRecentEditorAfterClose: true,
Expand Down
6 changes: 3 additions & 3 deletions src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
/* Title Label */

.monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container {
height: 35px;
height: var(--editor-group-title-height);
display: flex;
justify-content: flex-start;
align-items: center;
Expand All @@ -15,7 +15,7 @@
}

.monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container > .title-label {
line-height: 35px;
line-height: var(--editor-group-title-height);
overflow: hidden;
text-overflow: ellipsis;
position: relative;
Expand Down Expand Up @@ -94,7 +94,7 @@
flex: initial;
opacity: 0.5;
padding-right: 8px;
height: 35px;
height: var(--editor-group-title-height);
}

.monaco-workbench .part.editor > .content .editor-group-container > .title > .title-actions .action-item {
Expand Down
8 changes: 4 additions & 4 deletions src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container {
display: flex;
height: 35px;
height: var(--editor-group-title-height);
scrollbar-width: none; /* Firefox: hide scrollbar */
}

Expand All @@ -97,7 +97,7 @@
display: flex;
white-space: nowrap;
cursor: pointer;
height: 35px;
height: var(--editor-group-title-height);
box-sizing: border-box;
padding-left: 10px;
}
Expand Down Expand Up @@ -265,7 +265,7 @@
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label {
margin-top: auto;
margin-bottom: auto;
line-height: 35px; /* aligns icon and label vertically centered in the tab */
line-height: var(--editor-group-title-height); /* aligns icon and label vertically centered in the tab */
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink .tab-label,
Expand Down Expand Up @@ -473,7 +473,7 @@
cursor: default;
flex: initial;
padding: 0 8px 0 4px;
height: 35px;
height: var(--editor-group-title-height);
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-item {
Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/browser/parts/editor/media/titlecontrol.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before {
height: 35px; /* tweak the icon size of the editor labels when icons are enabled */
height: var(--editor-group-title-height); /* tweak the icon size of the editor labels when icons are enabled */
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .monaco-icon-label::after,
Expand Down
8 changes: 6 additions & 2 deletions src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ export class NoTabsTitleControl extends TitleControl {
private editorLabel: IResourceLabel | undefined;
private activeLabel: IRenderedEditorLabel = Object.create(null);

protected create(parent: HTMLElement): void {
protected override create(parent: HTMLElement): void {
super.create(parent);

const titleContainer = this.titleContainer = parent;
titleContainer.draggable = true;

Expand Down Expand Up @@ -197,7 +199,9 @@ export class NoTabsTitleControl extends TitleControl {
});
}

updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void {
override updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void {
super.updateOptions(oldOptions, newOptions);

if (oldOptions.labelFormat !== newOptions.labelFormat || !equals(oldOptions.decorations, newOptions.decorations)) {
this.redraw();
}
Expand Down
13 changes: 7 additions & 6 deletions src/vs/workbench/browser/parts/editor/tabsTitleControl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,6 @@ export class TabsTitleControl extends TitleControl {
fit: 120
};

private static readonly TAB_HEIGHT = 35;

private static readonly DRAG_OVER_OPEN_TAB_THRESHOLD = 1500;

private static readonly MOUSE_WHEEL_EVENT_THRESHOLD = 150;
Expand Down Expand Up @@ -165,7 +163,9 @@ export class TabsTitleControl extends TitleControl {
this._register(this.tabResourceLabels.onDidChangeDecorations(() => this.doHandleDecorationsChange()));
}

protected create(parent: HTMLElement): void {
protected override create(parent: HTMLElement): void {
super.create(parent);

this.titleContainer = parent;

// Tabs and Actions Container (are on a single row with flex side-by-side)
Expand Down Expand Up @@ -710,7 +710,8 @@ export class TabsTitleControl extends TitleControl {
this.withTab(editor, (editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => this.redrawTabActiveAndDirty(this.accessor.activeGroup === this.group, editor, tabContainer, tabActionBar));
}

updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void {
override updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void {
super.updateOptions(oldOptions, newOptions);

// A change to a label format options requires to recompute all labels
if (oldOptions.labelFormat !== newOptions.labelFormat) {
Expand Down Expand Up @@ -1549,7 +1550,7 @@ export class TabsTitleControl extends TitleControl {
if (this.accessor.partOptions.wrapTabs && this.tabsAndActionsContainer?.classList.contains('wrapping')) {
total = this.tabsAndActionsContainer.offsetHeight;
} else {
total = TabsTitleControl.TAB_HEIGHT;
total = this.titleHeight;
}

const offset = total;
Expand Down Expand Up @@ -1707,7 +1708,7 @@ export class TabsTitleControl extends TitleControl {
if (tabsWrapMultiLine) {
if (
(tabsContainer.offsetHeight > dimensions.available.height) || // if height exceeds available height
(allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === TabsTitleControl.TAB_HEIGHT) || // if wrapping is not needed anymore
(allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.titleHeight) || // if wrapping is not needed anymore
(!lastTabFitsWrapped()) // if last tab does not fit anymore
) {
updateTabsWrapping(false);
Expand Down
28 changes: 24 additions & 4 deletions src/vs/workbench/browser/parts/editor/titleControl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,11 @@ export abstract class TitleControl extends Themable {
protected readonly groupTransfer = LocalSelectionTransfer.getInstance<DraggedEditorGroupIdentifier>();
protected readonly treeItemsTransfer = LocalSelectionTransfer.getInstance<DraggedTreeItemsIdentifier>();

private static readonly EDITOR_TITLE_HEIGHT = {
normal: 35,
compact: 22
};

protected breadcrumbsControl: BreadcrumbsControl | undefined = undefined;

private editorActionsToolbar: WorkbenchToolBar | undefined;
Expand All @@ -115,7 +120,7 @@ export abstract class TitleControl extends Themable {
private renderDropdownAsChildElement: boolean;

constructor(
parent: HTMLElement,
private parent: HTMLElement,
protected accessor: IEditorGroupsAccessor,
protected group: IEditorGroupView,
@IContextMenuService protected readonly contextMenuService: IContextMenuService,
Expand Down Expand Up @@ -150,7 +155,9 @@ export abstract class TitleControl extends Themable {
this.create(parent);
}

protected abstract create(parent: HTMLElement): void;
protected create(parent: HTMLElement): void {
this.updateTitleHeight();
}

protected createBreadcrumbsControl(container: HTMLElement, options: IBreadcrumbsControlOptions): void {
const config = this._register(BreadcrumbsConfig.IsEnabled.bindTo(this.configurationService));
Expand Down Expand Up @@ -422,6 +429,21 @@ export abstract class TitleControl extends Themable {
return keybinding ? keybinding.getLabel() ?? undefined : undefined;
}

protected get titleHeight() {
return this.accessor.partOptions.tabHeight !== 'compact' ? TitleControl.EDITOR_TITLE_HEIGHT.normal : TitleControl.EDITOR_TITLE_HEIGHT.compact;
}

protected updateTitleHeight(): void {
benibenj marked this conversation as resolved.
Show resolved Hide resolved
this.parent.style.setProperty('--editor-group-title-height', `${this.titleHeight}px`);
}

updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void {
// Update title height
if (oldOptions.tabHeight !== newOptions.tabHeight) {
this.updateTitleHeight();
}
}

abstract openEditor(editor: EditorInput): void;

abstract openEditors(editors: EditorInput[]): void;
Expand All @@ -446,8 +468,6 @@ export abstract class TitleControl extends Themable {

abstract updateEditorDirty(editor: EditorInput): void;

abstract updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void;

abstract layout(dimensions: ITitleControlDimensions): Dimension;

abstract getHeight(): IEditorGroupTitleHeight;
Expand Down
6 changes: 6 additions & 0 deletions src/vs/workbench/browser/workbench.contribution.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,12 @@ const registry = Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Con
'minimum': 38,
'markdownDescription': localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.editor.tabSizingFixedMaxWidth' }, "Controls the maximum width of tabs when `#workbench.editor.tabSizing#` size is set to `fixed`.")
},
'workbench.editor.tabHeight': {
benibenj marked this conversation as resolved.
Show resolved Hide resolved
'type': 'string',
'enum': ['normal', 'compact'],
'default': 'normal',
'markdownDescription': localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.editor.tabHeight' }, "Controls the height of editor tabs. Also applies to the title control bar when `#workbench.editor.showTabs#` is disabled.")
},
'workbench.editor.pinnedTabSizing': {
'type': 'string',
'enum': ['normal', 'compact', 'shrink'],
Expand Down
1 change: 1 addition & 0 deletions src/vs/workbench/common/editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1098,6 +1098,7 @@ interface IEditorPartConfiguration {
tabSizingFixedMinWidth?: number;
tabSizingFixedMaxWidth?: number;
pinnedTabSizing?: 'normal' | 'compact' | 'shrink';
tabHeight?: 'normal' | 'compact';
preventPinnedEditorClose?: PreventPinnedEditorClose;
titleScrollbarSizing?: 'default' | 'large';
focusRecentEditorAfterClose?: boolean;
Expand Down
Loading