diff --git a/.vscode/launch.json b/.vscode/launch.json index e217c585b42..0cde845dc24 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -123,7 +123,8 @@ "request": "launch", "name": "Launch VS Code", "windows": { - "runtimeExecutable": "${workspaceFolder}/scripts/code.bat" + "runtimeExecutable": "${workspaceFolder}/scripts/code.bat", + "timeout": 20000 }, "osx": { "runtimeExecutable": "${workspaceFolder}/scripts/code.sh" diff --git a/src/vs/base/browser/ui/grid/grid.ts b/src/vs/base/browser/ui/grid/grid.ts index 336329a05e2..39bbdeb9181 100644 --- a/src/vs/base/browser/ui/grid/grid.ts +++ b/src/vs/base/browser/ui/grid/grid.ts @@ -186,6 +186,7 @@ export interface IGridStyles extends IGridViewStyles { } export interface IGridOptions { styles?: IGridStyles; + proportionalLayout?: boolean; } export class Grid implements IDisposable { diff --git a/src/vs/workbench/browser/media/part.css b/src/vs/workbench/browser/media/part.css index fc87a52eaf3..32c3fe76eae 100644 --- a/src/vs/workbench/browser/media/part.css +++ b/src/vs/workbench/browser/media/part.css @@ -3,34 +3,34 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .part > .title { +.monaco-workbench .part > .title { display: none; /* Parts have to opt in to show title area */ } -.monaco-workbench > .part > .title { +.monaco-workbench .part > .title { height: 35px; display: flex; box-sizing: border-box; overflow: hidden; } -.monaco-workbench > .part > .title { +.monaco-workbench .part > .title { padding-left: 8px; padding-right: 8px; } -.monaco-workbench > .part > .title > .title-label { +.monaco-workbench .part > .title > .title-label { line-height: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.monaco-workbench > .part > .title > .title-label { +.monaco-workbench .part > .title > .title-label { padding-left: 12px; } -.monaco-workbench > .part > .title > .title-label h2 { +.monaco-workbench .part > .title > .title-label h2 { font-size: 11px; cursor: default; font-weight: normal; @@ -41,19 +41,19 @@ text-overflow: ellipsis; } -.monaco-workbench > .part > .title > .title-label a { +.monaco-workbench .part > .title > .title-label a { text-decoration: none; font-size: 13px; cursor: default; } -.monaco-workbench > .part > .title > .title-actions { +.monaco-workbench .part > .title > .title-actions { height: 35px; flex: 1; padding-left: 5px; } -.monaco-workbench > .part > .title > .title-actions .action-label { +.monaco-workbench .part > .title > .title-actions .action-label { display: block; height: 35px; line-height: 35px; @@ -63,16 +63,16 @@ background-repeat: no-repeat; } -.monaco-workbench > .part > .title > .title-actions .action-label .label { +.monaco-workbench .part > .title > .title-actions .action-label .label { display: none; } -.monaco-workbench > .part > .content { +.monaco-workbench .part > .content { font-size: 13px; } -.monaco-workbench > .part > .content > .monaco-progress-container, -.monaco-workbench > .part.editor > .content .monaco-progress-container { +.monaco-workbench .part > .content > .monaco-progress-container, +.monaco-workbench .part.editor > .content .monaco-progress-container { position: absolute; left: 0; top: 33px; /* at the bottom of the 35px height title container */ @@ -80,7 +80,7 @@ height: 2px; } -.monaco-workbench > .part > .content > .monaco-progress-container .progress-bit, -.monaco-workbench > .part.editor > .content .monaco-progress-container .progress-bit { +.monaco-workbench .part > .content > .monaco-progress-container .progress-bit, +.monaco-workbench .part.editor > .content .monaco-progress-container .progress-bit { height: 2px; } diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts index 404646c23f5..ec3397b9066 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts @@ -6,6 +6,7 @@ import 'vs/css!./media/activitybarpart'; import * as nls from 'vs/nls'; import { illegalArgument } from 'vs/base/common/errors'; +import { Emitter } from 'vs/base/common/event'; import { ActionsOrientation, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; import { GlobalActivityExtensions, IGlobalActivityRegistry } from 'vs/workbench/common/activity'; import { Registry } from 'vs/platform/registry/common/platform'; @@ -31,6 +32,7 @@ import { IViewsService, IViewContainersRegistry, Extensions as ViewContainerExte import { IContextKeyService, ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey'; import { IViewlet } from 'vs/workbench/common/viewlet'; import { isUndefinedOrNull } from 'vs/base/common/types'; +import { ISerializableView } from 'vs/base/browser/ui/grid/grid'; const SCM_VIEWLET_ID = 'workbench.view.scm'; @@ -43,7 +45,7 @@ interface ICachedViewlet { views?: { when: string }[]; } -export class ActivitybarPart extends Part { +export class ActivitybarPart extends Part implements ISerializableView { private static readonly ACTION_HEIGHT = 50; private static readonly PINNED_VIEWLETS = 'workbench.activity.pinnedViewlets'; @@ -57,6 +59,15 @@ export class ActivitybarPart extends Part { private compositeBar: CompositeBar; private compositeActions: { [compositeId: string]: { activityAction: ViewletActivityAction, pinnedAction: ToggleCompositePinnedAction } } = Object.create(null); + element: HTMLElement; + minimumWidth: number = 50; + maximumWidth: number = 50; + minimumHeight: number = 0; + maximumHeight: number = Number.POSITIVE_INFINITY; + + private _onDidChange = new Emitter<{ width: number; height: number; }>(); + readonly onDidChange = this._onDidChange.event; + constructor( id: string, @IViewletService private readonly viewletService: IViewletService, @@ -180,6 +191,7 @@ export class ActivitybarPart extends Part { } createContentArea(parent: HTMLElement): HTMLElement { + this.element = parent; const content = document.createElement('div'); addClass(content, 'content'); parent.appendChild(content); @@ -338,13 +350,19 @@ export class ActivitybarPart extends Part { .map(v => v.id); } - layout(dimension: Dimension): Dimension[] { + layout(dimension: Dimension): Dimension[]; + layout(width: number, height: number): void; + layout(dim1: Dimension | number, dim2?: number): Dimension[] | void { if (!this.partService.isVisible(Parts.ACTIVITYBAR_PART)) { - return [dimension]; + if (dim1 instanceof Dimension) { + return [dim1]; + } + + return; } // Pass to super - const sizes = super.layout(dimension); + const sizes = super.layout(dim1 instanceof Dimension ? dim1 : new Dimension(dim1, dim2)); this.dimension = sizes[1]; @@ -353,9 +371,11 @@ export class ActivitybarPart extends Part { // adjust height for global actions showing availableHeight -= (this.globalActionBar.items.length * ActivitybarPart.ACTION_HEIGHT); } - this.compositeBar.layout(new Dimension(dimension.width, availableHeight)); + this.compositeBar.layout(new Dimension(dim1 instanceof Dimension ? dim1.width : dim1, availableHeight)); - return sizes; + if (dim1 instanceof Dimension) { + return sizes; + } } private onDidStorageChange(e: IWorkspaceStorageChangeEvent): void { @@ -469,4 +489,10 @@ export class ActivitybarPart extends Part { const viewContainerRegistry = Registry.as(ViewContainerExtensions.ViewContainersRegistry); return viewContainerRegistry.get(viewletId); } + + toJSON(): object { + return { + type: Parts.ACTIVITYBAR_PART + }; + } } diff --git a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css index 3f07bfcb0d0..362ea4a70c8 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css +++ b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css @@ -3,13 +3,13 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item { +.monaco-workbench .activitybar > .content .monaco-action-bar .action-item { display: block; position: relative; padding: 5px 0; } -.monaco-workbench > .activitybar > .content .monaco-action-bar .action-label { +.monaco-workbench .activitybar > .content .monaco-action-bar .action-label { display: flex; overflow: hidden; height: 40px; @@ -20,7 +20,7 @@ font-size: 15px; } -.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:focus:before { +.monaco-workbench .activitybar > .content .monaco-action-bar .action-item:focus:before { content: ""; position: absolute; top: 9px; @@ -29,19 +29,19 @@ border-left: 2px solid; } -.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item.clicked:focus:before { +.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.clicked:focus:before { border-left: none !important; /* no focus feedback when using mouse */ } -.monaco-workbench > .activitybar.left > .content .monaco-action-bar .action-item:focus:before { +.monaco-workbench .activitybar.left > .content .monaco-action-bar .action-item:focus:before { left: 1px; } -.monaco-workbench > .activitybar.right > .content .monaco-action-bar .action-item:focus:before { +.monaco-workbench .activitybar.right > .content .monaco-action-bar .action-item:focus:before { right: 1px; } -.monaco-workbench > .activitybar > .content .monaco-action-bar .badge { +.monaco-workbench .activitybar > .content .monaco-action-bar .badge { position: absolute; top: 5px; left: 0; @@ -50,7 +50,7 @@ height: 40px; } -.monaco-workbench > .activitybar > .content .monaco-action-bar .badge .badge-content { +.monaco-workbench .activitybar > .content .monaco-action-bar .badge .badge-content { position: absolute; top: 20px; right: 8px; @@ -65,13 +65,13 @@ /* Right aligned */ -.monaco-workbench > .activitybar.right > .content .monaco-action-bar .action-label { +.monaco-workbench .activitybar.right > .content .monaco-action-bar .action-label { margin-left: 0; padding: 0 50px 0 0; background-position: calc(100% - 9px) center; } -.monaco-workbench > .activitybar.right > .content .monaco-action-bar .badge { +.monaco-workbench .activitybar.right > .content .monaco-action-bar .badge { left: auto; right: 0; } \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css b/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css index 5a92b2e1f52..3b72852b0fc 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css +++ b/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css @@ -3,23 +3,23 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .part.activitybar { +.monaco-workbench .part.activitybar { width: 50px; } -.monaco-workbench > .activitybar > .content { +.monaco-workbench .activitybar > .content { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } -.monaco-workbench > .activitybar > .content .monaco-action-bar { +.monaco-workbench .activitybar > .content .monaco-action-bar { text-align: left; background-color: inherit; } -.monaco-workbench > .activitybar .action-item:focus { +.monaco-workbench .activitybar .action-item:focus { outline: 0 !important; /* activity bar indicates focus custom */ } diff --git a/src/vs/workbench/browser/parts/compositePart.ts b/src/vs/workbench/browser/parts/compositePart.ts index 1865d8b1d70..8064787e489 100644 --- a/src/vs/workbench/browser/parts/compositePart.ts +++ b/src/vs/workbench/browser/parts/compositePart.ts @@ -464,10 +464,11 @@ export abstract class CompositePart extends Part { return AnchorAlignment.RIGHT; } - layout(dimension: Dimension): Dimension[] { - + layout(dimension: Dimension): Dimension[]; + layout(width: number, height: number): void; + layout(dim1: Dimension | number, dim2?: number): Dimension[] | void { // Pass to super - const sizes = super.layout(dimension); + const sizes = super.layout(dim1 instanceof Dimension ? dim1 : new Dimension(dim1, dim2!)); // Pass Contentsize to composite this.contentAreaSize = sizes[1]; @@ -475,7 +476,9 @@ export abstract class CompositePart extends Part { this.activeComposite.layout(this.contentAreaSize); } - return sizes; + if (dim1 instanceof Dimension) { + return sizes; + } } protected removeComposite(compositeId: string): boolean { diff --git a/src/vs/workbench/browser/parts/editor/editorGroupView.ts b/src/vs/workbench/browser/parts/editor/editorGroupView.ts index 9bb84cf7d49..3a5fdebc6a3 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupView.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupView.ts @@ -1460,7 +1460,7 @@ registerThemingParticipant((theme, collector, environment) => { // Letterpress const letterpress = `resources/letterpress${theme.type === 'dark' ? '-dark' : theme.type === 'hc' ? '-hc' : ''}.svg`; collector.addRule(` - .monaco-workbench > .part.editor > .content .editor-group-container.empty .editor-group-letterpress { + .monaco-workbench .part.editor > .content .editor-group-container.empty .editor-group-letterpress { background-image: url('${URI.file(join(environment.appRoot, letterpress)).toString()}') } `); @@ -1469,20 +1469,20 @@ registerThemingParticipant((theme, collector, environment) => { const focusedEmptyGroupBorder = theme.getColor(EDITOR_GROUP_FOCUSED_EMPTY_BORDER); if (focusedEmptyGroupBorder) { collector.addRule(` - .monaco-workbench > .part.editor > .content:not(.empty) .editor-group-container.empty.active:focus { + .monaco-workbench .part.editor > .content:not(.empty) .editor-group-container.empty.active:focus { outline-width: 1px; outline-color: ${focusedEmptyGroupBorder}; outline-offset: -2px; outline-style: solid; } - .monaco-workbench > .part.editor > .content.empty .editor-group-container.empty.active:focus { + .monaco-workbench .part.editor > .content.empty .editor-group-container.empty.active:focus { outline: none; /* never show outline for empty group if it is the last */ } `); } else { collector.addRule(` - .monaco-workbench > .part.editor > .content .editor-group-container.empty.active:focus { + .monaco-workbench .part.editor > .content .editor-group-container.empty.active:focus { outline: none; /* disable focus outline unless active empty group border is defined */ } `); diff --git a/src/vs/workbench/browser/parts/editor/editorPart.ts b/src/vs/workbench/browser/parts/editor/editorPart.ts index adfe1690863..7a1fbaf6c46 100644 --- a/src/vs/workbench/browser/parts/editor/editorPart.ts +++ b/src/vs/workbench/browser/parts/editor/editorPart.ts @@ -11,7 +11,7 @@ import { Event, Emitter, Relay } from 'vs/base/common/event'; import { contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry'; import { GroupDirection, IAddGroupOptions, GroupsArrangement, GroupOrientation, IMergeGroupOptions, MergeGroupMode, ICopyEditorOptions, GroupsOrder, GroupChangeKind, GroupLocation, IFindGroupScope, EditorGroupLayout, GroupLayoutArgument } from 'vs/workbench/services/group/common/editorGroupsService'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; -import { Direction, SerializableGrid, Sizing, ISerializedGrid, Orientation, GridBranchNode, isGridBranchNode, GridNode, createSerializedGrid, Grid } from 'vs/base/browser/ui/grid/grid'; +import { Direction, SerializableGrid, Sizing, ISerializedGrid, Orientation, GridBranchNode, isGridBranchNode, GridNode, createSerializedGrid, Grid, ISerializableView } from 'vs/base/browser/ui/grid/grid'; import { GroupIdentifier, IWorkbenchEditorConfiguration } from 'vs/workbench/common/editor'; import { values } from 'vs/base/common/map'; import { EDITOR_GROUP_BORDER, EDITOR_PANE_BACKGROUND } from 'vs/workbench/common/theme'; @@ -28,8 +28,9 @@ import { EditorDropTarget } from 'vs/workbench/browser/parts/editor/editorDropTa import { localize } from 'vs/nls'; import { Color } from 'vs/base/common/color'; import { CenteredViewLayout } from 'vs/base/browser/ui/centered/centeredViewLayout'; -import { IView, orthogonal } from 'vs/base/browser/ui/grid/gridview'; +import { IView, orthogonal, LayoutPriority } from 'vs/base/browser/ui/grid/gridview'; import { onUnexpectedError } from 'vs/base/common/errors'; +import { Parts } from 'vs/workbench/services/part/common/partService'; interface IEditorPartUIState { serializedGrid: ISerializedGrid; @@ -79,7 +80,7 @@ class GridWidgetView implements IView { } } -export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditorGroupsAccessor { +export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditorGroupsAccessor, ISerializableView { _serviceBrand: any; @@ -132,6 +133,13 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor private _whenRestored: Promise; private whenRestoredResolve: () => void; + element: HTMLElement; + + private _onDidChange = new Emitter<{ width: number; height: number; }>(); + readonly onDidChange = this._onDidChange.event; + + priority: LayoutPriority = LayoutPriority.High; + constructor( id: string, private restorePreviousState: boolean, @@ -779,6 +787,7 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor createContentArea(parent: HTMLElement): HTMLElement { // Container + this.element = parent; this.container = document.createElement('div'); addClass(this.container, 'content'); parent.appendChild(this.container); @@ -946,12 +955,16 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor return this.groupViews.size === 1 && this._activeGroup.isEmpty(); } - layout(dimension: Dimension): Dimension[] { - const sizes = super.layout(dimension); + layout(dimension: Dimension): Dimension[]; + layout(width: number, height: number): void; + layout(dim1: Dimension | number, dim2?: number): Dimension[] | void { + const sizes = super.layout(dim1 instanceof Dimension ? dim1 : new Dimension(dim1, dim2)); this.doLayout(sizes[1]); - return sizes; + if (dim1 instanceof Dimension) { + return sizes; + } } private doLayout(dimension: Dimension): void { @@ -1007,4 +1020,10 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor } //#endregion + + toJSON(): object { + return { + type: Parts.EDITOR_PART + }; + } } diff --git a/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css b/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css index 2a5ce2936fe..d3850e29307 100644 --- a/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css @@ -3,17 +3,17 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench>.part.editor>.content .editor-group-container .breadcrumbs-control.hidden { +.monaco-workbench .part.editor>.content .editor-group-container .breadcrumbs-control.hidden { display: none; } -.monaco-workbench>.part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumb-item.selected .monaco-icon-label, -.monaco-workbench>.part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumb-item.focused .monaco-icon-label { +.monaco-workbench .part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumb-item.selected .monaco-icon-label, +.monaco-workbench .part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumb-item.focused .monaco-icon-label { text-decoration-line: underline; } -.monaco-workbench>.part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumb-item.selected .hint-more, -.monaco-workbench>.part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumb-item.focused .hint-more { +.monaco-workbench .part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumb-item.selected .hint-more, +.monaco-workbench .part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumb-item.focused .hint-more { text-decoration-line: underline; } diff --git a/src/vs/workbench/browser/parts/editor/media/editorgroupview.css b/src/vs/workbench/browser/parts/editor/media/editorgroupview.css index bd0c879f1c1..f372df090e5 100644 --- a/src/vs/workbench/browser/parts/editor/media/editorgroupview.css +++ b/src/vs/workbench/browser/parts/editor/media/editorgroupview.css @@ -5,26 +5,26 @@ /* Container */ -.monaco-workbench > .part.editor > .content .editor-group-container { +.monaco-workbench .part.editor > .content .editor-group-container { height: 100%; } -.monaco-workbench > .part.editor > .content .editor-group-container.empty { +.monaco-workbench .part.editor > .content .editor-group-container.empty { opacity: 0.5; /* dimmed to indicate inactive state */ } -.monaco-workbench > .part.editor > .content .editor-group-container.empty.active, -.monaco-workbench > .part.editor > .content .editor-group-container.empty.dragged-over { +.monaco-workbench .part.editor > .content .editor-group-container.empty.active, +.monaco-workbench .part.editor > .content .editor-group-container.empty.dragged-over { opacity: 1; /* indicate active/dragged-over group through undimmed state */ } /* Letterpress */ -.monaco-workbench > .part.editor > .content .editor-group-container > .editor-group-letterpress { +.monaco-workbench .part.editor > .content .editor-group-container > .editor-group-letterpress { display: none; /* only visible when empty */ } -.monaco-workbench > .part.editor > .content .editor-group-container.empty > .editor-group-letterpress { +.monaco-workbench .part.editor > .content .editor-group-container.empty > .editor-group-letterpress { display: block; margin: auto; width: 100%; @@ -35,25 +35,25 @@ background-size: 70% 70%; } -.monaco-workbench > .part.editor > .content.empty .editor-group-container.empty > .editor-group-letterpress { +.monaco-workbench .part.editor > .content.empty .editor-group-container.empty > .editor-group-letterpress { background-size: 100% 100%; /* larger for empty editor part */ height: 100%; /* no toolbar in this case */ } /* Title */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title { +.monaco-workbench .part.editor > .content .editor-group-container > .title { position: relative; box-sizing: border-box; overflow: hidden; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title:not(.tabs) { +.monaco-workbench .part.editor > .content .editor-group-container > .title:not(.tabs) { display: flex; /* when tabs are not shown, use flex layout */ flex-wrap: nowrap; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title.title-border-bottom::after { +.monaco-workbench .part.editor > .content .editor-group-container > .title.title-border-bottom::after { content: ''; position: absolute; bottom: 0; @@ -65,21 +65,21 @@ height: 1px; } -.monaco-workbench > .part.editor > .content .editor-group-container.empty > .title { +.monaco-workbench .part.editor > .content .editor-group-container.empty > .title { display: none; } /* Toolbar */ -.monaco-workbench > .part.editor > .content .editor-group-container > .editor-group-container-toolbar { +.monaco-workbench .part.editor > .content .editor-group-container > .editor-group-container-toolbar { display: none; } -.monaco-workbench > .part.editor > .content:not(.empty) .editor-group-container.empty > .editor-group-container-toolbar { +.monaco-workbench .part.editor > .content:not(.empty) .editor-group-container.empty > .editor-group-container-toolbar { display: block; } -.monaco-workbench > .part.editor > .content .editor-group-container > .editor-group-container-toolbar .action-label { +.monaco-workbench .part.editor > .content .editor-group-container > .editor-group-container-toolbar .action-label { display: block; height: 35px; line-height: 35px; @@ -89,26 +89,26 @@ background-repeat: no-repeat; } -.vs .monaco-workbench > .part.editor > .content .editor-group-container > .editor-group-container-toolbar .close-editor-group { +.vs .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-container-toolbar .close-editor-group { background-image: url('close-big.svg'); } -.vs-dark .monaco-workbench > .part.editor > .content .editor-group-container > .editor-group-container-toolbar .close-editor-group, -.hc-black .monaco-workbench > .part.editor > .content .editor-group-container > .editor-group-container-toolbar .close-editor-group { +.vs-dark .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-container-toolbar .close-editor-group, +.hc-black .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-container-toolbar .close-editor-group { background-image: url('close-big-inverse.svg'); } /* Editor */ -.monaco-workbench > .part.editor > .content .editor-group-container.empty > .editor-container { +.monaco-workbench .part.editor > .content .editor-group-container.empty > .editor-container { display: none; } -.monaco-workbench > .part.editor > .content .editor-group-container > .editor-container > .editor-instance { +.monaco-workbench .part.editor > .content .editor-group-container > .editor-container > .editor-instance { height: 100%; } -.monaco-workbench > .part.editor > .content .grid-view-container { +.monaco-workbench .part.editor > .content .grid-view-container { width: 100%; height: 100%; } diff --git a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css index 28760657fba..6b309377039 100644 --- a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css @@ -5,7 +5,7 @@ /* Title Label */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title > .label-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container { height: 35px; display: flex; justify-content: flex-start; @@ -14,7 +14,7 @@ flex: auto; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label { line-height: 35px; overflow: hidden; text-overflow: ellipsis; @@ -22,31 +22,31 @@ padding-left: 20px; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title.breadcrumbs .no-tabs.title-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .no-tabs.title-label { flex: none; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .monaco-icon-label::before { +.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 */ } /* Breadcrumbs */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control { flex: 1 50%; overflow: hidden; margin-left: .45em; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { font-size: 0.9em; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control.preview .monaco-breadcrumb-item { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control.preview .monaco-breadcrumb-item { font-style: italic; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { content: '/'; opacity: 1; height: inherit; @@ -58,31 +58,31 @@ content: '\\'; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::before, -.monaco-workbench > .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder + .monaco-breadcrumb-item::before, -.monaco-workbench > .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control.relative-path .monaco-breadcrumb-item:nth-child(2)::before { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::before, +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder + .monaco-breadcrumb-item::before, +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control.relative-path .monaco-breadcrumb-item:nth-child(2)::before { /* workspace folder, item following workspace folder, or relative path -> hide first seperator */ display: none; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::after { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::after { /* use dot separator for workspace folder */ content: '\00a0•\00a0'; padding: 0px; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { padding-right: 4px; /* does not have trailing separator*/ } /* Title Actions */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-actions { +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-actions { display: flex; flex: initial; opacity: 0.5; height: 35px; } -.monaco-workbench > .part.editor > .content .editor-group-container.active > .title .title-actions { +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .title-actions { opacity: 1; } diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css index aa867509495..1e413fdae98 100644 --- a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css @@ -5,37 +5,37 @@ /* Title Container */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container { display: flex; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element { +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element { flex: 1; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element .scrollbar { +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element .scrollbar { z-index: 3; /* on top of tabs */ cursor: default; } /* Tabs Container */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container { display: flex; height: 35px; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container.scroll { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.scroll { overflow: scroll !important; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container::-webkit-scrollbar { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container::-webkit-scrollbar { display: none; } /* Tab */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab { position: relative; display: flex; white-space: nowrap; @@ -45,45 +45,45 @@ padding-left: 10px; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon-theme.close-button-right, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon-theme.close-button-off { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon-theme.close-button-right, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon-theme.close-button-off { padding-left: 5px; /* reduce padding when we show icons and are in shrinking mode and tab close button is not left */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit { width: 120px; min-width: fit-content; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink { min-width: 60px; flex-basis: 0; /* all tabs are even */ flex-grow: 1; /* all tabs grow even */ max-width: fit-content; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-left::after, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-off::after { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-left::after, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-off::after { content: ''; display: flex; flex: 0; width: 5px; /* Reserve space to hide tab fade when close button is left or off (fixes https://github.com/Microsoft/vscode/issues/45728) */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-left { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-left { min-width: 80px; /* make more room for close button when it shows to the left */ padding-right: 5px; /* we need less room when sizing is shrink */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged { will-change: transform; /* forces tab to be drawn on a separate layer (fixes https://github.com/Microsoft/vscode/issues/18733) */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged-over div { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged-over div { pointer-events: none; /* prevents cursor flickering (fixes https://github.com/Microsoft/vscode/issues/38753) */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-left { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-left { flex-direction: row-reverse; padding-left: 0; padding-right: 10px; @@ -91,14 +91,14 @@ /* Tab border top/bottom */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-border-top-container, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-border-bottom-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-border-top-container, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-border-bottom-container { display: none; /* hidden by default until a color is provided (see below) */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top > .tab-border-top-container, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-border-top-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top > .tab-border-top-container, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-border-top-container { display: block; position: absolute; left: 0; @@ -107,19 +107,19 @@ width: 100%; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top > .tab-border-top-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top > .tab-border-top-container { top: 0; height: 1px; background-color: var(--tab-border-top-color); } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container { bottom: 0; height: 1px; background-color: var(--tab-border-bottom-color); } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-border-top-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-border-top-container { top: 0; height: 2px; background-color: var(--tab-dirty-border-top-color); @@ -127,16 +127,16 @@ /* Tab Label */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { margin-top: auto; margin-bottom: auto; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink .tab-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink .tab-label { position: relative; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .tab-label::after { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .tab-label::after { content: ''; position: absolute; right: 0; @@ -146,66 +146,66 @@ padding: 0; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink:focus > .tab-label::after { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink:focus > .tab-label::after { opacity: 0; /* when tab has the focus this shade breaks the tab border (fixes https://github.com/Microsoft/vscode/issues/57819) */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit .monaco-icon-label, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit .monaco-icon-label > .monaco-icon-label-description-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit .monaco-icon-label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit .monaco-icon-label > .monaco-icon-label-description-container { overflow: visible; /* fixes https://github.com/Microsoft/vscode/issues/20182 */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .monaco-icon-label > .monaco-icon-label-description-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .monaco-icon-label > .monaco-icon-label-description-container { text-overflow: clip; } -.hc-black .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .monaco-icon-label > .monaco-icon-label-description-container { +.hc-black .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .monaco-icon-label > .monaco-icon-label-description-container { text-overflow: ellipsis; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .monaco-icon-label::before { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .monaco-icon-label::before { height: 16px; /* tweak the icon size of the editor labels when icons are enabled */ } /* Tab Close */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-close { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-close { margin-top: auto; margin-bottom: auto; width: 28px; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-right.sizing-shrink > .tab-close { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-right.sizing-shrink > .tab-close { flex: 0; overflow: hidden; /* let the close button be pushed out of view when sizing is set to shrink to make more room... */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty.close-button-right.sizing-shrink > .tab-close, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-right.sizing-shrink:hover > .tab-close, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-right.sizing-shrink > .tab-close:focus-within { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty.close-button-right.sizing-shrink > .tab-close, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-right.sizing-shrink:hover > .tab-close, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-right.sizing-shrink > .tab-close:focus-within { overflow: visible; /* ...but still show the close button on hover, focus and when dirty */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off > .tab-close { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off > .tab-close { display: none; /* hide the close action bar when we are configured to hide it */ } -.monaco-workbench > .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active > .tab-close .action-label, /* always show it for active tab */ -.monaco-workbench > .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab > .tab-close .action-label:focus, /* always show it on focus */ -.monaco-workbench > .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover > .tab-close .action-label, /* always show it on hover */ -.monaco-workbench > .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active:hover > .tab-close .action-label, /* always show it on hover */ -.monaco-workbench > .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.dirty > .tab-close .action-label { /* always show it for dirty tabs */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active > .tab-close .action-label, /* always show it for active tab */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab > .tab-close .action-label:focus, /* always show it on focus */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover > .tab-close .action-label, /* always show it on hover */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active:hover > .tab-close .action-label, /* always show it on hover */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.dirty > .tab-close .action-label { /* always show it for dirty tabs */ opacity: 1; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active > .tab-close .action-label, /* show dimmed for inactive group */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover > .tab-close .action-label, /* show dimmed for inactive group */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-close .action-label, /* show dimmed for inactive group */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover > .tab-close .action-label { /* show dimmed for inactive group */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active > .tab-close .action-label, /* show dimmed for inactive group */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover > .tab-close .action-label, /* show dimmed for inactive group */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-close .action-label, /* show dimmed for inactive group */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover > .tab-close .action-label { /* show dimmed for inactive group */ opacity: 0.5; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-close .action-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-close .action-label { opacity: 0; display: block; height: 16px; @@ -216,53 +216,53 @@ margin-right: 0.5em; } -.vs .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action { +.vs .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action { background: url('close-dirty.svg') center center no-repeat; } -.vs-dark .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action, -.hc-black .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action { +.vs-dark .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action, +.hc-black .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action { background: url('close-dirty-inverse.svg') center center no-repeat; } -.vs .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action:hover { +.vs .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action:hover { background: url('close.svg') center center no-repeat; } -.vs-dark .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action:hover, -.hc-black .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action:hover { +.vs-dark .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action:hover, +.hc-black .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty .close-editor-action:hover { background: url('close-inverse.svg') center center no-repeat; } /* No Tab Close Button */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off { padding-right: 10px; /* give a little bit more room if close button is off */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-off { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-off { padding-right: 5px; /* we need less room when sizing is shrink */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off.dirty:not(.dirty-border-top) { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off.dirty:not(.dirty-border-top) { background-repeat: no-repeat; background-position-y: center; background-position-x: calc(100% - 6px); /* to the right of the tab label */ padding-right: 28px; /* make room for dirty indication when we are running without close button */ } -.vs .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off.dirty:not(.dirty-border-top) { +.vs .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off.dirty:not(.dirty-border-top) { background-image: url('close-dirty.svg'); } -.vs-dark .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off.dirty:not(.dirty-border-top), -.hc-black .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off.dirty { +.vs-dark .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off.dirty:not(.dirty-border-top), +.hc-black .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.close-button-off.dirty { background-image: url('close-dirty-inverse.svg'); } /* Editor Actions */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .editor-actions { +.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions { cursor: default; flex: initial; padding-left: 4px; @@ -271,30 +271,30 @@ /* Breadcrumbs */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control { flex: 1 100%; height: 22px; cursor: default; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label { height: 22px; line-height: 22px; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label::before { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label::before { height: 22px; /* tweak the icon size of the editor labels when icons are enabled */ } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { max-width: 80%; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { min-width: 16px; height: 22px; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { padding-right: 8px; } diff --git a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css index 41e78a153f2..42358c52102 100644 --- a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css @@ -5,31 +5,31 @@ /* Editor Label */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { white-space: nowrap; flex: 1; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label a, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a { +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label a, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a { text-decoration: none; font-size: 13px; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .monaco-icon-label::before, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .monaco-icon-label::before, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label a, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label h2, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label span { +.monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .monaco-icon-label::before, +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label a, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a, +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label h2, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label span { cursor: pointer; } /* Title Actions */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-actions .action-label, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .editor-actions .action-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-actions .action-label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-label { display: block; height: 35px; line-height: 35px; @@ -39,29 +39,29 @@ background-repeat: no-repeat; } -.hc-black .monaco-workbench > .part.editor > .content .editor-group-container > .title .title-actions .action-label, -.hc-black .monaco-workbench > .part.editor > .content .editor-group-container > .title .editor-actions .action-label { +.hc-black .monaco-workbench .part.editor > .content .editor-group-container > .title .title-actions .action-label, +.hc-black .monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-label { line-height: initial; } -.monaco-workbench > .part.editor > .content .editor-group-container > .title .editor-actions .action-label .label, -.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-actions .action-label .label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-label .label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-actions .action-label .label { display: none; } /* Drag Cursor */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title { +.monaco-workbench .part.editor > .content .editor-group-container > .title { cursor: -webkit-grab; } /* Actions */ -.monaco-workbench > .part.editor > .content .editor-group-container > .title .close-editor-action { +.monaco-workbench .part.editor > .content .editor-group-container > .title .close-editor-action { background: url('close.svg') center center no-repeat; } -.vs-dark .monaco-workbench > .part.editor > .content .editor-group-container > .title .close-editor-action, -.hc-black .monaco-workbench > .part.editor > .content .editor-group-container > .title .close-editor-action { +.vs-dark .monaco-workbench .part.editor > .content .editor-group-container > .title .close-editor-action, +.hc-black .monaco-workbench .part.editor > .content .editor-group-container > .title .close-editor-action { background: url('close-inverse.svg') center center no-repeat; } diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index 3f531ff7b4d..5f957c221a6 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -1128,21 +1128,21 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const activeContrastBorderColor = theme.getColor(activeContrastBorder); if (activeContrastBorderColor) { collector.addRule(` - .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active, - .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover { + .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active, + .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover { outline: 1px solid; outline-offset: -5px; } - .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover { + .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover { outline: 1px dashed; outline-offset: -5px; } - .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active > .tab-close .action-label, - .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover > .tab-close .action-label, - .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-close .action-label, - .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover > .tab-close .action-label { + .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active > .tab-close .action-label, + .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover > .tab-close .action-label, + .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-close .action-label, + .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover > .tab-close .action-label { opacity: 1 !important; } `); @@ -1152,7 +1152,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const tabHoverBackground = theme.getColor(TAB_HOVER_BACKGROUND); if (tabHoverBackground) { collector.addRule(` - .monaco-workbench > .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover { + .monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover { background-color: ${tabHoverBackground} !important; } `); @@ -1161,7 +1161,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const tabUnfocusedHoverBackground = theme.getColor(TAB_UNFOCUSED_HOVER_BACKGROUND); if (tabUnfocusedHoverBackground) { collector.addRule(` - .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover { + .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover { background-color: ${tabUnfocusedHoverBackground} !important; } `); @@ -1171,7 +1171,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const tabHoverBorder = theme.getColor(TAB_HOVER_BORDER); if (tabHoverBorder) { collector.addRule(` - .monaco-workbench > .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover { + .monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover { box-shadow: ${tabHoverBorder} 0 -1px inset !important; } `); @@ -1180,7 +1180,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const tabUnfocusedHoverBorder = theme.getColor(TAB_UNFOCUSED_HOVER_BORDER); if (tabUnfocusedHoverBorder) { collector.addRule(` - .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover { + .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover { box-shadow: ${tabUnfocusedHoverBorder} 0 -1px inset !important; } `); @@ -1208,12 +1208,12 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const adjustedColor = tabHoverBackground.flatten(adjustedTabBackground); const adjustedColorDrag = tabHoverBackground.flatten(adjustedTabDragBackground); collector.addRule(` - .monaco-workbench > .part.editor > .content:not(.dragged-over) .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { + .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { background: linear-gradient(to left, ${adjustedColor}, transparent) !important; } - .monaco-workbench > .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { background: linear-gradient(to left, ${adjustedColorDrag}, transparent) !important; } `); @@ -1224,11 +1224,11 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const adjustedColor = tabUnfocusedHoverBackground.flatten(adjustedTabBackground); const adjustedColorDrag = tabUnfocusedHoverBackground.flatten(adjustedTabDragBackground); collector.addRule(` - .monaco-workbench > .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { + .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { background: linear-gradient(to left, ${adjustedColor}, transparent) !important; } - .monaco-workbench > .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { background: linear-gradient(to left, ${adjustedColorDrag}, transparent) !important; } `); @@ -1238,8 +1238,8 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { if (editorDragAndDropBackground && adjustedTabDragBackground) { const adjustedColorDrag = editorDragAndDropBackground.flatten(adjustedTabDragBackground); collector.addRule(` - .monaco-workbench > .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink.dragged-over:not(.active):not(.dragged) > .tab-label::after, - .monaco-workbench > .part.editor > .content.dragged-over .editor-group-container:not(.active) > .title .tabs-container > .tab.sizing-shrink.dragged-over:not(.dragged) > .tab-label::after { + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink.dragged-over:not(.active):not(.dragged) > .tab-label::after, + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container:not(.active) > .title .tabs-container > .tab.sizing-shrink.dragged-over:not(.dragged) > .tab-label::after { background: linear-gradient(to left, ${adjustedColorDrag}, transparent) !important; } `); @@ -1251,11 +1251,11 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const adjustedColor = tabActiveBackground.flatten(adjustedTabBackground); const adjustedColorDrag = tabActiveBackground.flatten(adjustedTabDragBackground); collector.addRule(` - .monaco-workbench > .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { + .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { background: linear-gradient(to left, ${adjustedColor}, transparent); } - .monaco-workbench > .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { background: linear-gradient(to left, ${adjustedColorDrag}, transparent); } `); @@ -1267,11 +1267,11 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const adjustedColor = tabInactiveBackground.flatten(adjustedTabBackground); const adjustedColorDrag = tabInactiveBackground.flatten(adjustedTabDragBackground); collector.addRule(` - .monaco-workbench > .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged) > .tab-label::after { + .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged) > .tab-label::after { background: linear-gradient(to left, ${adjustedColor}, transparent); } - .monaco-workbench > .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged) > .tab-label::after { + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged) > .tab-label::after { background: linear-gradient(to left, ${adjustedColorDrag}, transparent); } `); diff --git a/src/vs/workbench/browser/parts/media/compositepart.css b/src/vs/workbench/browser/parts/media/compositepart.css index 75895952fec..fde7cdb706c 100644 --- a/src/vs/workbench/browser/parts/media/compositepart.css +++ b/src/vs/workbench/browser/parts/media/compositepart.css @@ -3,15 +3,15 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .part > .content > .composite { +.monaco-workbench .part > .content > .composite { height: 100%; } -.monaco-workbench > .part > .composite.title { +.monaco-workbench .part > .composite.title { display: flex; } -.monaco-workbench > .part > .composite.title > .title-actions { +.monaco-workbench .part > .composite.title > .title-actions { flex: 1; padding-left: 5px; } \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/panel/media/panelpart.css b/src/vs/workbench/browser/parts/panel/media/panelpart.css index 18cc419df90..ce309151e69 100644 --- a/src/vs/workbench/browser/parts/panel/media/panelpart.css +++ b/src/vs/workbench/browser/parts/panel/media/panelpart.css @@ -3,16 +3,16 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench.nopanel > .part.panel { +.monaco-workbench.nopanel .part.panel { display: none !important; visibility: hidden !important; } -.monaco-workbench > .part.panel { +.monaco-workbench .part.panel { z-index: initial; } -.monaco-workbench > .part.panel .title { +.monaco-workbench .part.panel .title { padding-right: 0px; height: 35px; display: flex; @@ -20,23 +20,23 @@ justify-content: space-between; } -.monaco-workbench > .part.panel.bottom .title { +.monaco-workbench .part.panel.bottom .title { border-top-width: 1px; border-top-style: solid; } -.monaco-workbench > .part.panel.right { +.monaco-workbench .part.panel.right { border-left-width: 1px; border-left-style: solid; } -.monaco-workbench > .part.panel > .title > .title-actions .monaco-action-bar .action-item .action-label { +.monaco-workbench .part.panel > .title > .title-actions .monaco-action-bar .action-item .action-label { outline-offset: -2px; } /** Panel Switcher */ -.monaco-workbench > .part.panel > .title > .panel-switcher-container.composite-bar > .monaco-action-bar .action-label.toggle-more { +.monaco-workbench .part.panel > .title > .panel-switcher-container.composite-bar > .monaco-action-bar .action-label.toggle-more { background-image: url('ellipsis.svg'); display: block; height: 28px; @@ -48,16 +48,16 @@ background-position: center center; } -.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar { +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar { line-height: 27px; /* matches panel titles in settings */ height: 35px; } -.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:first-child { +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:first-child { padding-left: 12px; } -.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item { +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item { text-transform: uppercase; padding-left: 10px; padding-right: 10px; @@ -67,24 +67,24 @@ display: flex; } -.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item .action-label{ +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item .action-label{ margin-right: 0; } -.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:last-child { +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:last-child { padding-right: 10px; } -.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label { +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label { border-bottom: 1px solid; margin-right: 0; } -.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .badge { +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .badge { margin-left: 8px; } -.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .badge .badge-content { +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .badge .badge-content { padding: 0.3em 0.5em; border-radius: 1em; font-weight: normal; @@ -152,7 +152,7 @@ background: url('close-inverse.svg') center center no-repeat; } -.vs-dark .monaco-workbench > .part.panel > .title > .panel-switcher-container.composite-bar > .monaco-action-bar .action-label.toggle-more, -.hc-black .monaco-workbench > .part.panel > .title > .panel-switcher-container.composite-bar > .monaco-action-bar .action-label.toggle-more { +.vs-dark .monaco-workbench .part.panel > .title > .panel-switcher-container.composite-bar > .monaco-action-bar .action-label.toggle-more, +.hc-black .monaco-workbench .part.panel > .title > .panel-switcher-container.composite-bar > .monaco-action-bar .action-label.toggle-more { background-image: url('ellipsis-inverse.svg'); } diff --git a/src/vs/workbench/browser/parts/panel/panelPart.ts b/src/vs/workbench/browser/parts/panel/panelPart.ts index 26a6b426ed8..68bc0f955e6 100644 --- a/src/vs/workbench/browser/parts/panel/panelPart.ts +++ b/src/vs/workbench/browser/parts/panel/panelPart.ts @@ -5,7 +5,7 @@ import 'vs/css!./media/panelpart'; import { IAction } from 'vs/base/common/actions'; -import { Event } from 'vs/base/common/event'; +import { Event, Emitter } from 'vs/base/common/event'; import { Registry } from 'vs/platform/registry/common/platform'; import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar'; import { IPanel } from 'vs/workbench/common/panel'; @@ -32,6 +32,7 @@ import { IDisposable } from 'vs/base/common/lifecycle'; import { RawContextKey, IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { isUndefinedOrNull } from 'vs/base/common/types'; import { ILifecycleService, LifecyclePhase } from 'vs/platform/lifecycle/common/lifecycle'; +import { ISerializableView } from 'vs/base/browser/ui/grid/grid'; export const ActivePanelContext = new RawContextKey('activePanel', ''); export const PanelFocusContext = new RawContextKey('panelFocus', false); @@ -43,7 +44,7 @@ interface ICachedPanel { visible: boolean; } -export class PanelPart extends CompositePart implements IPanelService { +export class PanelPart extends CompositePart implements IPanelService, ISerializableView { static readonly activePanelSettingsKey = 'workbench.panelpart.activepanelid'; @@ -59,6 +60,16 @@ export class PanelPart extends CompositePart implements IPanelService { private compositeActions: { [compositeId: string]: { activityAction: PanelActivityAction, pinnedAction: ToggleCompositePinnedAction } } = Object.create(null); private dimension: Dimension; + element: HTMLElement; + minimumWidth: number = 300; + maximumWidth: number = Number.POSITIVE_INFINITY; + minimumHeight: number = 77; + maximumHeight: number = Number.POSITIVE_INFINITY; + snapSize: number = 50; + + private _onDidChange = new Emitter<{ width: number; height: number; }>(); + readonly onDidChange = this._onDidChange.event; + constructor( id: string, @INotificationService notificationService: INotificationService, @@ -129,6 +140,8 @@ export class PanelPart extends CompositePart implements IPanelService { } create(parent: HTMLElement): void { + this.element = parent; + super.create(parent); const focusTracker = trackFocus(parent); @@ -271,21 +284,32 @@ export class PanelPart extends CompositePart implements IPanelService { }; } - layout(dimension: Dimension): Dimension[] { + layout(dimension: Dimension): Dimension[]; + layout(width: number, height: number): void; + layout(dim1: Dimension | number, dim2?: number): Dimension[] | void { if (!this.partService.isVisible(Parts.PANEL_PART)) { - return [dimension]; + if (dim1 instanceof Dimension) { + return [dim1]; + } + + return; } + const { width, height } = dim1 instanceof Dimension ? dim1 : { width: dim1, height: dim2 }; + if (this.partService.getPanelPosition() === Position.RIGHT) { // Take into account the 1px border when layouting - this.dimension = new Dimension(dimension.width - 1, dimension.height); + this.dimension = new Dimension(width - 1, height); } else { - this.dimension = dimension; + this.dimension = new Dimension(width, height); } - const sizes = super.layout(this.dimension); + + const sizes = super.layout(this.dimension.width, this.dimension.height); this.layoutCompositeBar(); - return sizes; + if (dim1 instanceof Dimension) { + return sizes; + } } private layoutCompositeBar(): void { @@ -408,6 +432,12 @@ export class PanelPart extends CompositePart implements IPanelService { private setStoredCachedViewletsValue(value: string): void { this.storageService.store(PanelPart.PINNED_PANELS, value, StorageScope.GLOBAL); } + + toJSON(): object { + return { + type: Parts.PANEL_PART + }; + } } registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { @@ -418,9 +448,9 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const panelBackground = theme.getColor(PANEL_BACKGROUND); if (panelBackground && panelBackground !== theme.getColor(editorBackground)) { collector.addRule(` - .monaco-workbench > .part.panel > .content .monaco-editor, - .monaco-workbench > .part.panel > .content .monaco-editor .margin, - .monaco-workbench > .part.panel > .content .monaco-editor .monaco-editor-background { + .monaco-workbench .part.panel > .content .monaco-editor, + .monaco-workbench .part.panel > .content .monaco-editor .margin, + .monaco-workbench .part.panel > .content .monaco-editor .monaco-editor-background { background-color: ${panelBackground}; } `); @@ -431,7 +461,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER); if (titleActive || titleActiveBorder) { collector.addRule(` - .monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { + .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { color: ${titleActive} !important; border-bottom-color: ${titleActiveBorder} !important; } @@ -442,14 +472,14 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const focusBorderColor = theme.getColor(focusBorder); if (focusBorderColor) { collector.addRule(` - .monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label { + .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label { color: ${titleActive} !important; border-bottom-color: ${focusBorderColor} !important; border-bottom: 1px solid; } `); collector.addRule(` - .monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus { + .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus { outline: none; } `); @@ -461,8 +491,8 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const outline = theme.getColor(activeContrastBorder); collector.addRule(` - .monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label, - .monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item .action-label:hover { + .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label, + .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item .action-label:hover { outline-color: ${outline}; outline-width: 1px; outline-style: solid; @@ -471,7 +501,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { outline-offset: 1px; } - .monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked) .action-label:hover { + .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked) .action-label:hover { outline-style: dashed; } `); diff --git a/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css b/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css index 9a5f5bd6e00..eb324691b34 100644 --- a/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css +++ b/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .sidebar > .content { +.monaco-workbench .sidebar > .content { overflow: hidden; } @@ -12,7 +12,7 @@ visibility: hidden !important; } -.monaco-workbench > .sidebar > .title > .title-label h2 { +.monaco-workbench .sidebar > .title > .title-label h2 { text-transform: uppercase; } diff --git a/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts b/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts index f357916019f..d95a8d716a4 100644 --- a/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts +++ b/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts @@ -25,16 +25,17 @@ import { IThemeService } from 'vs/platform/theme/common/themeService'; import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND, SIDE_BAR_BORDER } from 'vs/workbench/common/theme'; import { INotificationService } from 'vs/platform/notification/common/notification'; -import { Dimension, EventType, addDisposableListener, trackFocus } from 'vs/base/browser/dom'; +import { EventType, addDisposableListener, trackFocus, Dimension } from 'vs/base/browser/dom'; import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; import { RawContextKey, IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview'; import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions'; +import { ISerializableView } from 'vs/base/browser/ui/grid/grid'; export const SidebarFocusContext = new RawContextKey('sideBarFocus', false); export const ActiveViewletContext = new RawContextKey('activeViewlet', ''); -export class SidebarPart extends CompositePart implements IViewletService { +export class SidebarPart extends CompositePart implements ISerializableView, IViewletService { _serviceBrand: any; static readonly activeViewletSettingsKey = 'workbench.sidebar.activeviewletid'; @@ -45,6 +46,16 @@ export class SidebarPart extends CompositePart implements IViewletServi private blockOpeningViewlet: boolean; private _onDidViewletDeregister = this._register(new Emitter()); + element: HTMLElement; + minimumWidth: number = 170; + maximumWidth: number = Number.POSITIVE_INFINITY; + minimumHeight: number = 0; + maximumHeight: number = Number.POSITIVE_INFINITY; + snapSize: number = 50; + + private _onDidChange = new Emitter<{ width: number; height: number; }>(); + readonly onDidChange = this._onDidChange.event; + constructor( id: string, @INotificationService notificationService: INotificationService, @@ -111,6 +122,8 @@ export class SidebarPart extends CompositePart implements IViewletServi } create(parent: HTMLElement): void { + this.element = parent; + super.create(parent); const focusTracker = trackFocus(parent); @@ -152,12 +165,22 @@ export class SidebarPart extends CompositePart implements IViewletServi container.style.borderLeftColor = !isPositionLeft ? borderColor : null; } - layout(dimension: Dimension): Dimension[] { + layout(dimension: Dimension): Dimension[]; + layout(width: number, height: number): void; + layout(dim1: Dimension | number, dim2?: number): Dimension[] | void { if (!this.partService.isVisible(Parts.SIDEBAR_PART)) { - return [dimension]; + if (dim1 instanceof Dimension) { + return [dim1]; + } + + return; } - return super.layout(dimension); + if (dim1 instanceof Dimension) { + return super.layout(dim1); + } + + super.layout(dim1, dim2!); } // Viewlet service @@ -237,6 +260,12 @@ export class SidebarPart extends CompositePart implements IViewletServi } } } + + toJSON(): object { + return { + type: Parts.SIDEBAR_PART + }; + } } class FocusSideBarAction extends Action { diff --git a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css index c528511d2cf..8c31b3a23ec 100644 --- a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css +++ b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .part.statusbar { +.monaco-workbench .part.statusbar { box-sizing: border-box; cursor: default; width: 100%; @@ -11,18 +11,18 @@ font-size: 12px; } -.monaco-workbench > .part.statusbar > .statusbar-item { +.monaco-workbench .part.statusbar > .statusbar-item { display: inline-block; line-height: 22px; height: 100%; vertical-align: top; } -.monaco-workbench > .part.statusbar > .statusbar-item.has-beak { +.monaco-workbench .part.statusbar > .statusbar-item.has-beak { position: relative; } -.monaco-workbench > .part.statusbar > .statusbar-item.has-beak:before { +.monaco-workbench .part.statusbar > .statusbar-item.has-beak:before { content: ''; position: absolute; left: 11px; @@ -33,48 +33,48 @@ border-right: 5px solid transparent; } -.monaco-workbench > .part.statusbar > .statusbar-item.left > :first-child { +.monaco-workbench .part.statusbar > .statusbar-item.left > :first-child { margin-right: 5px; } -.monaco-workbench > .part.statusbar > .statusbar-item.right { +.monaco-workbench .part.statusbar > .statusbar-item.right { float: right; } -.monaco-workbench > .part.statusbar > .statusbar-item.right > :first-child { +.monaco-workbench .part.statusbar > .statusbar-item.right > :first-child { margin-left: 5px; } /* adding padding to the most left status bar item */ -.monaco-workbench > .part.statusbar > .statusbar-item.left:first-child, .monaco-workbench > .part.statusbar > .statusbar-item.right + .statusbar-item.left { +.monaco-workbench .part.statusbar > .statusbar-item.left:first-child, .monaco-workbench .part.statusbar > .statusbar-item.right + .statusbar-item.left { padding-left: 10px; } /* adding padding to the most right status bar item */ -.monaco-workbench > .part.statusbar > .statusbar-item.right:first-child { +.monaco-workbench .part.statusbar > .statusbar-item.right:first-child { padding-right: 10px; } -.monaco-workbench > .part.statusbar > .statusbar-item a { +.monaco-workbench .part.statusbar > .statusbar-item a { cursor: pointer; display: inline-block; height: 100%; } -.monaco-workbench > .part.statusbar > .statusbar-entry > span { +.monaco-workbench .part.statusbar > .statusbar-entry > span { height: 100%; } -.monaco-workbench > .part.statusbar > .statusbar-entry > span, -.monaco-workbench > .part.statusbar > .statusbar-entry > a { +.monaco-workbench .part.statusbar > .statusbar-entry > span, +.monaco-workbench .part.statusbar > .statusbar-entry > a { padding: 0 5px 0 5px; white-space: pre; /* gives some degree of styling */ } -.monaco-workbench > .part.statusbar > .statusbar-entry span.octicon { +.monaco-workbench .part.statusbar > .statusbar-entry span.octicon { text-align: center; font-size: 14px; } -.monaco-workbench > .part.statusbar > .statusbar-item a:hover { +.monaco-workbench .part.statusbar > .statusbar-item a:hover { text-decoration: none; } \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts index 29e6b41dfdc..9fed8f11b46 100644 --- a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts +++ b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts @@ -24,20 +24,32 @@ import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/ import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { isThemeColor } from 'vs/editor/common/editorCommon'; import { Color } from 'vs/base/common/color'; -import { addClass, EventHelper, createStyleSheet, addDisposableListener } from 'vs/base/browser/dom'; +import { addClass, EventHelper, createStyleSheet, addDisposableListener, Dimension } from 'vs/base/browser/dom'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { IStorageService } from 'vs/platform/storage/common/storage'; +import { Emitter } from 'vs/base/common/event'; +import { ISerializableView } from 'vs/base/browser/ui/grid/grid'; +import { Parts } from 'vs/workbench/services/part/common/partService'; -export class StatusbarPart extends Part implements IStatusbarService { +export class StatusbarPart extends Part implements IStatusbarService, ISerializableView { _serviceBrand: any; private static readonly PRIORITY_PROP = 'statusbar-entry-priority'; private static readonly ALIGNMENT_PROP = 'statusbar-entry-alignment'; - private statusItemsContainer: HTMLElement; + element: HTMLElement; private statusMsgDispose: IDisposable; + + minimumWidth: number = 0; + maximumWidth: number = Number.POSITIVE_INFINITY; + minimumHeight: number = 22; + maximumHeight: number = 22; + + private _onDidChange = new Emitter<{ width: number; height: number; }>(); + readonly onDidChange = this._onDidChange.event; + private styleElement: HTMLStyleElement; constructor( @@ -64,7 +76,7 @@ export class StatusbarPart extends Part implements IStatusbarService { const toDispose = item.render(el); // Insert according to priority - const container = this.statusItemsContainer; + const container = this.element; const neighbours = this.getEntries(alignment); let inserted = false; for (const neighbour of neighbours) { @@ -95,7 +107,7 @@ export class StatusbarPart extends Part implements IStatusbarService { private getEntries(alignment: StatusbarAlignment): HTMLElement[] { const entries: HTMLElement[] = []; - const container = this.statusItemsContainer; + const container = this.element; const children = container.children; for (let i = 0; i < children.length; i++) { const childElement = children.item(i); @@ -108,7 +120,7 @@ export class StatusbarPart extends Part implements IStatusbarService { } createContentArea(parent: HTMLElement): HTMLElement { - this.statusItemsContainer = parent; + this.element = parent; // Fill in initial items that were contributed from the registry const registry = Registry.as(Extensions.Statusbar); @@ -134,10 +146,10 @@ export class StatusbarPart extends Part implements IStatusbarService { const el = this.doCreateStatusItem(descriptor.alignment, descriptor.priority); this._register(item.render(el)); - this.statusItemsContainer.appendChild(el); + this.element.appendChild(el); } - return this.statusItemsContainer; + return this.element; } protected updateStyles(): void { @@ -161,7 +173,7 @@ export class StatusbarPart extends Part implements IStatusbarService { this.styleElement = createStyleSheet(container); } - this.styleElement.innerHTML = `.monaco-workbench > .part.statusbar > .statusbar-item.has-beak:before { border-bottom-color: ${backgroundColor}; }`; + this.styleElement.innerHTML = `.monaco-workbench .part.statusbar > .statusbar-item.has-beak:before { border-bottom-color: ${backgroundColor}; }`; } private doCreateStatusItem(alignment: StatusbarAlignment, priority: number = 0, extraClass?: string): HTMLElement { @@ -220,6 +232,22 @@ export class StatusbarPart extends Part implements IStatusbarService { return dispose; } + + layout(dimension: Dimension): Dimension[]; + layout(width: number, height: number): void; + layout(dim1: Dimension | number, dim2?: number): Dimension[] | void { + if (dim1 instanceof Dimension) { + return super.layout(dim1); + } else { + super.layout(new Dimension(dim1, dim2!)); + } + } + + toJSON(): object { + return { + type: Parts.STATUSBAR_PART + }; + } } let manageExtensionAction: ManageExtensionAction; @@ -336,21 +364,21 @@ class ManageExtensionAction extends Action { registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const statusBarItemHoverBackground = theme.getColor(STATUS_BAR_ITEM_HOVER_BACKGROUND); if (statusBarItemHoverBackground) { - collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a:hover { background-color: ${statusBarItemHoverBackground}; }`); + collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item a:hover { background-color: ${statusBarItemHoverBackground}; }`); } const statusBarItemActiveBackground = theme.getColor(STATUS_BAR_ITEM_ACTIVE_BACKGROUND); if (statusBarItemActiveBackground) { - collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a:active { background-color: ${statusBarItemActiveBackground}; }`); + collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item a:active { background-color: ${statusBarItemActiveBackground}; }`); } const statusBarProminentItemBackground = theme.getColor(STATUS_BAR_PROMINENT_ITEM_BACKGROUND); if (statusBarProminentItemBackground) { - collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item .status-bar-info { background-color: ${statusBarProminentItemBackground}; }`); + collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item .status-bar-info { background-color: ${statusBarProminentItemBackground}; }`); } const statusBarProminentItemHoverBackground = theme.getColor(STATUS_BAR_PROMINENT_ITEM_HOVER_BACKGROUND); if (statusBarProminentItemHoverBackground) { - collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a.status-bar-info:hover { background-color: ${statusBarProminentItemHoverBackground}; }`); + collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item a.status-bar-info:hover { background-color: ${statusBarProminentItemHoverBackground}; }`); } }); diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css index 85149003283..38794f793dd 100644 --- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css +++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .part.titlebar { +.monaco-workbench .part.titlebar { box-sizing: border-box; width: 100%; padding: 0 70px; @@ -18,7 +18,7 @@ display: flex; } -.monaco-workbench > .part.titlebar > .titlebar-drag-region { +.monaco-workbench .part.titlebar > .titlebar-drag-region { top: 0; left: 0; display: block; @@ -29,7 +29,7 @@ -webkit-app-region: drag; } -.monaco-workbench > .part.titlebar > .window-title { +.monaco-workbench .part.titlebar > .window-title { flex: 0 1 auto; font-size: 12px; overflow: hidden; @@ -42,8 +42,8 @@ /* Windows/Linux: Rules for custom title (icon, window controls) */ -.windows > .monaco-workbench > .part.titlebar, -.linux > .monaco-workbench > .part.titlebar { +.windows > .monaco-workbench .part.titlebar, +.linux > .monaco-workbench .part.titlebar { padding: 0; height: 30px; line-height: 30px; @@ -51,17 +51,17 @@ overflow: visible; } -.windows > .monaco-workbench > .part.titlebar > .window-title, -.linux > .monaco-workbench > .part.titlebar > .window-title { +.windows > .monaco-workbench .part.titlebar > .window-title, +.linux > .monaco-workbench .part.titlebar > .window-title { cursor: default; } -.linux > .monaco-workbench > .part.titlebar > .window-title { +.linux > .monaco-workbench .part.titlebar > .window-title { font-size: inherit; } -.windows > .monaco-workbench > .part.titlebar > .resizer, -.linux > .monaco-workbench > .part.titlebar > .resizer { +.windows > .monaco-workbench .part.titlebar > .resizer, +.linux > .monaco-workbench .part.titlebar > .resizer { -webkit-app-region: no-drag; position: absolute; top: 0; @@ -69,13 +69,13 @@ height: 20%; } -.windows > .monaco-workbench.fullscreen > .part.titlebar > .resizer, -.linux > .monaco-workbench.fullscreen > .part.titlebar > .resizer { +.windows > .monaco-workbench.fullscreen .part.titlebar > .resizer, +.linux > .monaco-workbench.fullscreen .part.titlebar > .resizer { display: none; } -.monaco-workbench > .part.titlebar > .window-appicon { +.monaco-workbench .part.titlebar > .window-appicon { width: 35px; height: 100%; position: relative; @@ -87,11 +87,11 @@ flex-shrink: 0; } -.monaco-workbench.fullscreen > .part.titlebar > .window-appicon { +.monaco-workbench.fullscreen .part.titlebar > .window-appicon { display: none; } -.monaco-workbench > .part.titlebar > .window-controls-container { +.monaco-workbench .part.titlebar > .window-controls-container { display: flex; flex-grow: 0; flex-shrink: 0; @@ -104,56 +104,56 @@ margin-left: auto; } -.monaco-workbench.fullscreen > .part.titlebar > .window-controls-container { +.monaco-workbench.fullscreen .part.titlebar > .window-controls-container { display: none; } -.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon-bg { +.monaco-workbench .part.titlebar > .window-controls-container > .window-icon-bg { display: inline-block; -webkit-app-region: no-drag; height: 100%; width: 33.34%; } -.monaco-workbench > .part.titlebar > .window-controls-container .window-icon svg { +.monaco-workbench .part.titlebar > .window-controls-container .window-icon svg { shape-rendering: crispEdges; text-align: center; } -.monaco-workbench > .part.titlebar.titlebar > .window-controls-container .window-close { +.monaco-workbench .part.titlebar.titlebar > .window-controls-container .window-close { -webkit-mask: url('chrome-close.svg') no-repeat 50% 50%; } -.monaco-workbench > .part.titlebar.titlebar > .window-controls-container .window-unmaximize { +.monaco-workbench .part.titlebar.titlebar > .window-controls-container .window-unmaximize { -webkit-mask: url('chrome-restore.svg') no-repeat 50% 50%; } -.monaco-workbench > .part.titlebar > .window-controls-container .window-maximize { +.monaco-workbench .part.titlebar > .window-controls-container .window-maximize { -webkit-mask: url('chrome-maximize.svg') no-repeat 50% 50%; } -.monaco-workbench > .part.titlebar > .window-controls-container .window-minimize { +.monaco-workbench .part.titlebar > .window-controls-container .window-minimize { -webkit-mask: url('chrome-minimize.svg') no-repeat 50% 50%; } -.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon-bg > .window-icon { +.monaco-workbench .part.titlebar > .window-controls-container > .window-icon-bg > .window-icon { height: 100%; width: 100%; -webkit-mask-size: 23.1%; } -.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon-bg:hover { +.monaco-workbench .part.titlebar > .window-controls-container > .window-icon-bg:hover { background-color: rgba(255, 255, 255, 0.1); } -.monaco-workbench > .part.titlebar.light > .window-controls-container > .window-icon-bg:hover { +.monaco-workbench .part.titlebar.light > .window-controls-container > .window-icon-bg:hover { background-color: rgba(0, 0, 0, 0.1); } -.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon-bg.window-close-bg:hover { +.monaco-workbench .part.titlebar > .window-controls-container > .window-icon-bg.window-close-bg:hover { background-color: rgba(232, 17, 35, 0.9); } -.monaco-workbench > .part.titlebar > .window-controls-container .window-icon.window-close:hover { +.monaco-workbench .part.titlebar > .window-controls-container .window-icon.window-close:hover { background-color: white; } diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts index 93d58329d84..8f7d118547c 100644 --- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts @@ -30,10 +30,12 @@ import { MenubarControl } from 'vs/workbench/browser/parts/titlebar/menubarContr import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { template, getBaseLabel } from 'vs/base/common/labels'; import { ILabelService } from 'vs/platform/label/common/label'; -import { Event } from 'vs/base/common/event'; +import { Event, Emitter } from 'vs/base/common/event'; import { IStorageService } from 'vs/platform/storage/common/storage'; +import { ISerializableView } from 'vs/base/browser/ui/grid/grid'; +import { Parts } from 'vs/workbench/services/part/common/partService'; -export class TitlebarPart extends Part implements ITitleService { +export class TitlebarPart extends Part implements ITitleService, ISerializableView { _serviceBrand: any; @@ -43,7 +45,7 @@ export class TitlebarPart extends Part implements ITitleService { private static readonly TITLE_DIRTY = '\u25cf '; private static readonly TITLE_SEPARATOR = isMacintosh ? ' — ' : ' - '; // macOS uses special - separator - private titleContainer: HTMLElement; + element: HTMLElement; private title: HTMLElement; private dragRegion: HTMLElement; private windowControls: HTMLElement; @@ -61,6 +63,14 @@ export class TitlebarPart extends Part implements ITitleService { private properties: ITitleProperties; private activeEditorListeners: IDisposable[]; + minimumWidth: number = 0; + maximumWidth: number = Number.POSITIVE_INFINITY; + minimumHeight: number = 30; + maximumHeight: number = 30; + + private _onDidChange = new Emitter<{ width: number; height: number; }>(); + readonly onDidChange = this._onDidChange.event; + constructor( id: string, @IContextMenuService private readonly contextMenuService: IContextMenuService, @@ -283,14 +293,14 @@ export class TitlebarPart extends Part implements ITitleService { } createContentArea(parent: HTMLElement): HTMLElement { - this.titleContainer = parent; + this.element = parent; // Draggable region that we can manipulate for #52522 - this.dragRegion = append(this.titleContainer, $('div.titlebar-drag-region')); + this.dragRegion = append(this.element, $('div.titlebar-drag-region')); // App Icon (Windows/Linux) if (!isMacintosh) { - this.appIcon = append(this.titleContainer, $('div.window-appicon')); + this.appIcon = append(this.element, $('div.window-appicon')); this.onUpdateAppIconDragBehavior(); this._register(addDisposableListener(this.appIcon, EventType.DBLCLICK, (e => { @@ -300,7 +310,7 @@ export class TitlebarPart extends Part implements ITitleService { // Menubar: the menubar part which is responsible for populating both the custom and native menubars this.menubarPart = this.instantiationService.createInstance(MenubarControl); - this.menubar = append(this.titleContainer, $('div.menubar')); + this.menubar = append(this.element, $('div.menubar')); this.menubar.setAttribute('role', 'menubar'); this.menubarPart.create(this.menubar); @@ -311,7 +321,7 @@ export class TitlebarPart extends Part implements ITitleService { } // Title - this.title = append(this.titleContainer, $('div.window-title')); + this.title = append(this.element, $('div.window-title')); if (this.pendingTitle) { this.title.innerText = this.pendingTitle; } else { @@ -320,7 +330,7 @@ export class TitlebarPart extends Part implements ITitleService { // Maximize/Restore on doubleclick if (isMacintosh) { - this._register(addDisposableListener(this.titleContainer, EventType.DBLCLICK, e => { + this._register(addDisposableListener(this.element, EventType.DBLCLICK, e => { EventHelper.stop(e); this.onTitleDoubleclick(); @@ -340,7 +350,7 @@ export class TitlebarPart extends Part implements ITitleService { // Window Controls (Windows/Linux) if (!isMacintosh) { - this.windowControls = append(this.titleContainer, $('div.window-controls-container')); + this.windowControls = append(this.element, $('div.window-controls-container')); // Minimize @@ -375,7 +385,7 @@ export class TitlebarPart extends Part implements ITitleService { })); // Resizer - this.resizer = append(this.titleContainer, $('div.resizer')); + this.resizer = append(this.element, $('div.resizer')); const isMaximized = this.windowService.getConfiguration().maximized ? true : false; this.onDidChangeMaximized(isMaximized); @@ -384,7 +394,7 @@ export class TitlebarPart extends Part implements ITitleService { // Since the title area is used to drag the window, we do not want to steal focus from the // currently active element. So we restore focus after a timeout back to where it was. - this._register(addDisposableListener(this.titleContainer, EventType.MOUSE_DOWN, e => { + this._register(addDisposableListener(this.element, EventType.MOUSE_DOWN, e => { if (e.target && isAncestor(e.target as HTMLElement, this.menubar)) { return; } @@ -399,7 +409,7 @@ export class TitlebarPart extends Part implements ITitleService { this.updateStyles(); - return this.titleContainer; + return this.element; } private onDidChangeMaximized(maximized: boolean) { @@ -428,26 +438,26 @@ export class TitlebarPart extends Part implements ITitleService { super.updateStyles(); // Part container - if (this.titleContainer) { + if (this.element) { if (this.isInactive) { - addClass(this.titleContainer, 'inactive'); + addClass(this.element, 'inactive'); } else { - removeClass(this.titleContainer, 'inactive'); + removeClass(this.element, 'inactive'); } const titleBackground = this.getColor(this.isInactive ? TITLE_BAR_INACTIVE_BACKGROUND : TITLE_BAR_ACTIVE_BACKGROUND); - this.titleContainer.style.backgroundColor = titleBackground; + this.element.style.backgroundColor = titleBackground; if (Color.fromHex(titleBackground).isLighter()) { - addClass(this.titleContainer, 'light'); + addClass(this.element, 'light'); } else { - removeClass(this.titleContainer, 'light'); + removeClass(this.element, 'light'); } const titleForeground = this.getColor(this.isInactive ? TITLE_BAR_INACTIVE_FOREGROUND : TITLE_BAR_ACTIVE_FOREGROUND); - this.titleContainer.style.color = titleForeground; + this.element.style.color = titleForeground; const titleBorder = this.getColor(TITLE_BAR_BORDER); - this.titleContainer.style.borderBottom = titleBorder ? `1px solid ${titleBorder}` : null; + this.element.style.borderBottom = titleBorder ? `1px solid ${titleBorder}` : null; } } @@ -513,8 +523,8 @@ export class TitlebarPart extends Part implements ITitleService { private adjustTitleMarginToCenter(): void { if (!isMacintosh && - (this.appIcon.clientWidth + this.menubar.clientWidth + 10 > (this.titleContainer.clientWidth - this.title.clientWidth) / 2 || - this.titleContainer.clientWidth - this.windowControls.clientWidth - 10 < (this.titleContainer.clientWidth + this.title.clientWidth) / 2)) { + (this.appIcon.clientWidth + this.menubar.clientWidth + 10 > (this.element.clientWidth - this.title.clientWidth) / 2 || + this.element.clientWidth - this.windowControls.clientWidth - 10 < (this.element.clientWidth + this.title.clientWidth) / 2)) { this.title.style.position = null; this.title.style.left = null; this.title.style.transform = null; @@ -525,7 +535,7 @@ export class TitlebarPart extends Part implements ITitleService { } } - layout(dimension: Dimension): Dimension[] { + updateLayout(dimension: Dimension): void { if (getTitleBarStyle(this.configurationService, this.environmentService) === 'custom') { // Only prevent zooming behavior on macOS or when the menubar is not visible if (isMacintosh || this.configurationService.getValue('window.menuBarVisibility') === 'hidden') { @@ -549,8 +559,27 @@ export class TitlebarPart extends Part implements ITitleService { this.menubarPart.layout(menubarDimension); } } + } - return super.layout(dimension); + layout(dimension: Dimension): Dimension[]; + layout(width: number, height: number): void; + layout(dim1: Dimension | number, dim2?: number): Dimension[] | void { + if (dim1 instanceof Dimension) { + this.updateLayout(dim1); + + return super.layout(dim1); + } + + const dimensions = new Dimension(dim1, dim2); + this.updateLayout(dimensions); + + super.layout(dimensions); + } + + toJSON(): object { + return { + type: Parts.TITLEBAR_PART + }; } } @@ -569,7 +598,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const titlebarActiveFg = theme.getColor(TITLE_BAR_ACTIVE_FOREGROUND); if (titlebarActiveFg) { collector.addRule(` - .monaco-workbench > .part.titlebar > .window-controls-container .window-icon { + .monaco-workbench .part.titlebar > .window-controls-container .window-icon { background-color: ${titlebarActiveFg}; } `); @@ -578,7 +607,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const titlebarInactiveFg = theme.getColor(TITLE_BAR_INACTIVE_FOREGROUND); if (titlebarInactiveFg) { collector.addRule(` - .monaco-workbench > .part.titlebar.inactive > .window-controls-container .window-icon { + .monaco-workbench .part.titlebar.inactive > .window-controls-container .window-icon { background-color: ${titlebarInactiveFg}; } `); diff --git a/src/vs/workbench/electron-browser/main.contribution.ts b/src/vs/workbench/electron-browser/main.contribution.ts index f478a2cc03a..7d6cce64e17 100644 --- a/src/vs/workbench/electron-browser/main.contribution.ts +++ b/src/vs/workbench/electron-browser/main.contribution.ts @@ -689,6 +689,12 @@ configurationRegistry.registerConfiguration({ 'description': nls.localize('workbench.enableExperiments', "Fetches experiments to run from a Microsoft online service."), 'default': true, 'tags': ['usesOnlineServices'] + }, + 'workbench.useExperimentalGridLayout': { + 'type': 'boolean', + 'description': nls.localize('workbench.useExperimentalGridLayout', "Enables the grid layout for the workbench. This setting may enable additional layout options for workbench components."), + 'default': false, + 'scope': ConfigurationScope.APPLICATION } } }); diff --git a/src/vs/workbench/electron-browser/media/workbench.css b/src/vs/workbench/electron-browser/media/workbench.css index 28c4a57c000..951d0972276 100644 --- a/src/vs/workbench/electron-browser/media/workbench.css +++ b/src/vs/workbench/electron-browser/media/workbench.css @@ -11,7 +11,7 @@ overflow: hidden; } -.monaco-workbench > .part { +.monaco-workbench .part { position: absolute; box-sizing: border-box; } diff --git a/src/vs/workbench/electron-browser/workbench.ts b/src/vs/workbench/electron-browser/workbench.ts index 8fd07d1e1e4..5ff640f0e6b 100644 --- a/src/vs/workbench/electron-browser/workbench.ts +++ b/src/vs/workbench/electron-browser/workbench.ts @@ -27,14 +27,13 @@ import { PanelPart } from 'vs/workbench/browser/parts/panel/panelPart'; import { StatusbarPart } from 'vs/workbench/browser/parts/statusbar/statusbarPart'; import { TitlebarPart } from 'vs/workbench/browser/parts/titlebar/titlebarPart'; import { EditorPart } from 'vs/workbench/browser/parts/editor/editorPart'; -import { WorkbenchLayout } from 'vs/workbench/browser/layout'; import { IActionBarRegistry, Extensions as ActionBarExtensions } from 'vs/workbench/browser/actions'; import { PanelRegistry, Extensions as PanelExtensions } from 'vs/workbench/browser/panel'; import { QuickOpenController } from 'vs/workbench/browser/parts/quickopen/quickOpenController'; import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput'; import { QuickInputService } from 'vs/workbench/browser/parts/quickinput/quickInput'; import { getServices } from 'vs/platform/instantiation/common/extensions'; -import { Position, Parts, IPartService, ILayoutOptions, IDimension, PositionToString } from 'vs/workbench/services/part/common/partService'; +import { Position, Parts, IPartService, IDimension, PositionToString, ILayoutOptions } from 'vs/workbench/services/part/common/partService'; import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace'; import { IStorageService, StorageScope, IWillSaveStateEvent, WillSaveStateReason } from 'vs/platform/storage/common/storage'; import { ContextMenuService as NativeContextMenuService } from 'vs/workbench/services/contextview/electron-browser/contextmenuService'; @@ -113,7 +112,9 @@ import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/work import { IFileDialogService } from 'vs/platform/dialogs/common/dialogs'; import { FileDialogService } from 'vs/workbench/services/dialogs/electron-browser/dialogService'; import { LogStorageAction } from 'vs/platform/storage/node/storageService'; +import { Sizing, Direction, SerializableGrid, ISerializedGrid } from 'vs/base/browser/ui/grid/grid'; import { IEditor } from 'vs/editor/common/editorCommon'; +import { WorkbenchLayout } from 'vs/workbench/browser/layout'; interface WorkbenchParams { configuration: IWindowConfiguration; @@ -141,6 +142,8 @@ type FontAliasingOption = 'default' | 'antialiased' | 'none' | 'auto'; const fontAliasingValues: FontAliasingOption[] = ['antialiased', 'none', 'auto']; +type WorkbenchView = StatusbarPart | TitlebarPart | SidebarPart | EditorPart | ActivitybarPart | PanelPart; + const Identifiers = { WORKBENCH_CONTAINER: 'workbench.main.container', TITLEBAR_PART: 'workbench.parts.titlebar', @@ -168,8 +171,15 @@ interface IZenMode { wasPanelVisible: boolean; } +interface IWorkbenchUIState { + lastPanelHeight?: number; + lastPanelWidth?: number; + lastSidebarDimension?: number; +} + export class Workbench extends Disposable implements IPartService { + private static readonly workbenchGridUIStateStorageKey = 'workbench.layout.state'; private static readonly sidebarHiddenStorageKey = 'workbench.sidebar.hidden'; private static readonly menubarVisibilityConfigurationKey = 'window.menuBarVisibility'; private static readonly panelHiddenStorageKey = 'workbench.panel.hidden'; @@ -200,7 +210,7 @@ export class Workbench extends Disposable implements IPartService { private fileService: IFileService; private quickInput: QuickInputService; - private workbenchLayout: WorkbenchLayout; + private workbenchGrid: SerializableGrid | WorkbenchLayout; private titlebarPart: TitlebarPart; private activitybarPart: ActivitybarPart; @@ -224,6 +234,7 @@ export class Workbench extends Disposable implements IPartService { private fontAliasing: FontAliasingOption; private hasInitialFilesToOpen: boolean; private shouldCenterLayout = false; + private uiState: IWorkbenchUIState = {}; private inZenMode: IContextKey; private sideBarVisibleContext: IContextKey; @@ -944,6 +955,22 @@ export class Workbench extends Disposable implements IPartService { return getTitleBarStyle(this.configurationService, this.environmentService) === 'custom'; } + private saveLastPanelDimension(): void { + if (!(this.workbenchGrid instanceof SerializableGrid)) { + return; + } + + if (this.panelPosition === Position.BOTTOM) { + this.uiState.lastPanelHeight = this.workbenchGrid.getViewSize(this.panelPart); + } else { + this.uiState.lastPanelWidth = this.workbenchGrid.getViewSize(this.panelPart); + } + } + + private getLastPanelDimension(position: Position): number | undefined { + return position === Position.BOTTOM ? this.uiState.lastPanelHeight : this.uiState.lastPanelWidth; + } + private setStatusBarHidden(hidden: boolean, skipLayout?: boolean): void { this.statusBarHidden = hidden; @@ -956,7 +983,45 @@ export class Workbench extends Disposable implements IPartService { // Layout if (!skipLayout) { - this.workbenchLayout.layout(); + if (this.workbenchGrid instanceof SerializableGrid) { + if (this.statusBarHidden) { + this.workbenchGrid.removeView(this.statusbarPart); + } else { + if (!this.sideBarHidden) { + this.uiState.lastSidebarDimension = this.workbenchGrid.getViewSize(this.sidebarPart); + this.workbenchGrid.removeView(this.sidebarPart); + } + + if (!this.activityBarHidden) { + this.workbenchGrid.removeView(this.activitybarPart); + } + + if (!this.panelHidden) { + this.saveLastPanelDimension(); + this.workbenchGrid.removeView(this.panelPart); + } + + this.workbenchGrid.addView(this.statusbarPart, Sizing.Split, this.editorPart, Direction.Down); + + const sidebarDirection = this.sideBarPosition === Position.LEFT ? Direction.Left : Direction.Right; + if (!this.activityBarHidden) { + this.workbenchGrid.addView(this.activitybarPart, Sizing.Split, this.editorPart, sidebarDirection); + } + + if (!this.sideBarHidden) { + this.workbenchGrid.addView(this.sidebarPart, this.uiState.lastSidebarDimension, this.editorPart, sidebarDirection); + } + + if (!this.panelHidden) { + this.workbenchGrid.addView(this.panelPart, this.getLastPanelDimension(this.panelPosition), this.editorPart, this.panelPosition === Position.BOTTOM ? Direction.Down : Direction.Right); + } + } + + const size = DOM.getClientArea(this.container); + this.workbenchGrid.layout(size.width, size.height); + } else { + this.workbenchGrid.layout(); + } } } @@ -973,23 +1038,72 @@ export class Workbench extends Disposable implements IPartService { } private createWorkbenchLayout(): void { - this.workbenchLayout = this.instantiationService.createInstance( - WorkbenchLayout, - this.container, - this.workbench, - { - titlebar: this.titlebarPart, - activitybar: this.activitybarPart, - editor: this.editorPart, - sidebar: this.sidebarPart, - panel: this.panelPart, - statusbar: this.statusbarPart, - }, - this.quickOpen, - this.quickInput, - this.notificationsCenter, - this.notificationsToasts - ); + if (this.configurationService.getValue('workbench.useExperimentalGridLayout')) { + const serializedWorkbenchGridString = this.storageService.get(Workbench.workbenchGridUIStateStorageKey, StorageScope.GLOBAL, undefined); + + if (serializedWorkbenchGridString) { + console.log(serializedWorkbenchGridString); + const serializedWorkbenchGrid = JSON.parse(serializedWorkbenchGridString) as ISerializedGrid; + this.workbenchGrid = SerializableGrid.deserialize(serializedWorkbenchGrid, { + fromJSON: (serializedView: { type: Parts }): WorkbenchView => { + switch (serializedView.type) { + case Parts.ACTIVITYBAR_PART: return this.activitybarPart; + case Parts.EDITOR_PART: return this.editorPart; + case Parts.PANEL_PART: return this.panelPart; + case Parts.SIDEBAR_PART: return this.sidebarPart; + case Parts.STATUSBAR_PART: return this.statusbarPart; + case Parts.TITLEBAR_PART: return this.titlebarPart; + } + + return null; + } + }); + } else { + this.workbenchGrid = new SerializableGrid(this.editorPart, { proportionalLayout: false }); + + const sidebarDirection = this.sideBarPosition === Position.RIGHT ? Direction.Right : Direction.Left; + + if (!this.statusBarHidden) { + this.workbenchGrid.addView(this.statusbarPart, Sizing.Split, this.editorPart, Direction.Down); + } + + if (this.useCustomTitleBarStyle) { + this.workbenchGrid.addView(this.titlebarPart, Sizing.Split, this.editorPart, Direction.Up); + } + + if (!this.activityBarHidden) { + this.workbenchGrid.addView(this.activitybarPart, Sizing.Split, this.editorPart, sidebarDirection); + } + + if (!this.sideBarHidden) { + this.workbenchGrid.addView(this.sidebarPart, Sizing.Split, this.editorPart, sidebarDirection); + } + + if (!this.panelHidden) { + this.workbenchGrid.addView(this.panelPart, Sizing.Split, this.editorPart, this.panelPosition === Position.BOTTOM ? Direction.Down : Direction.Right); + } + } + + this.workbench.appendChild(this.workbenchGrid.element); + } else { + this.workbenchGrid = this.instantiationService.createInstance( + WorkbenchLayout, + this.container, + this.workbench, + { + titlebar: this.titlebarPart, + activitybar: this.activitybarPart, + editor: this.editorPart, + sidebar: this.sidebarPart, + panel: this.panelPart, + statusbar: this.statusbarPart, + }, + this.quickOpen, + this.quickInput, + this.notificationsCenter, + this.notificationsToasts + ); + } } private renderWorkbench(): void { @@ -1131,6 +1245,10 @@ export class Workbench extends Disposable implements IPartService { this.toggleZenMode(true); } } + + if (this.workbenchGrid instanceof SerializableGrid) { + this.storageService.store(Workbench.workbenchGridUIStateStorageKey, JSON.stringify(this.workbenchGrid.serialize()), StorageScope.GLOBAL); + } } dispose(): void { @@ -1218,7 +1336,7 @@ export class Workbench extends Disposable implements IPartService { getTitleBarOffset(): number { let offset = 0; if (this.isVisible(Parts.TITLEBAR_PART)) { - offset = this.workbenchLayout.partLayoutInfo.titlebar.height; + offset = this.workbenchGrid instanceof SerializableGrid ? this.workbenchGrid.getViewSize2(this.titlebarPart).height : this.workbenchGrid.partLayoutInfo.titlebar.height; if (isMacintosh || this.menubarVisibility === 'hidden') { offset /= browser.getZoomFactor(); } @@ -1320,7 +1438,66 @@ export class Workbench extends Disposable implements IPartService { this.contextViewService.layout(); if (this.workbenchStarted && !this.workbenchShutdown) { - this.workbenchLayout.layout(options); + if (this.workbenchGrid instanceof SerializableGrid) { + const dimensions = DOM.getClientArea(this.container); + DOM.position(this.workbench, 0, 0, 0, 0, 'relative'); + DOM.size(this.workbench, dimensions.width, dimensions.height); + + // Handle titlebar visibility + const hideTitlebar = browser.isFullscreen() && (this.getMenubarVisibility() === 'default' || (this.getMenubarVisibility() === 'toggle' && !this.menubarToggled)); + this.setTitlebarVisibility(!hideTitlebar); + + this.workbenchGrid.layout(dimensions.width, dimensions.height); + } else { + this.workbenchGrid.layout(options); + } + } + } + + setTitlebarVisibility(visible: boolean): void { + if (!(this.workbenchGrid instanceof SerializableGrid)) { + return; + } + + let wasVisible = false; + + try { + wasVisible = !!this.workbenchGrid.getViewSize(this.titlebarPart); + } catch { } + + if (wasVisible !== visible) { + if (!visible) { + this.workbenchGrid.removeView(this.titlebarPart); + } else { + if (!this.sideBarHidden) { + this.uiState.lastSidebarDimension = this.workbenchGrid.getViewSize(this.sidebarPart); + this.workbenchGrid.removeView(this.sidebarPart); + } + + if (!this.activityBarHidden) { + this.workbenchGrid.removeView(this.activitybarPart); + } + + if (!this.panelHidden && this.panelPosition !== Position.BOTTOM) { + this.saveLastPanelDimension(); + this.workbenchGrid.removeView(this.panelPart); + } + + // Add views + this.workbenchGrid.addView(this.titlebarPart, Sizing.Split, this.editorPart, Direction.Up); + + if (!this.activityBarHidden) { + this.workbenchGrid.addView(this.activitybarPart, Sizing.Split, this.editorPart, this.sideBarPosition === Position.LEFT ? Direction.Left : Direction.Right); + } + + if (!this.sideBarHidden) { + this.workbenchGrid.addView(this.sidebarPart, this.uiState.lastSidebarDimension, this.editorPart, this.sideBarPosition === Position.LEFT ? Direction.Left : Direction.Right); + } + + if (!this.panelHidden && this.panelPosition !== Position.BOTTOM) { + this.workbenchGrid.addView(this.panelPart, this.getLastPanelDimension(this.panelPosition), this.editorPart, Direction.Right); + } + } } } @@ -1347,11 +1524,19 @@ export class Workbench extends Disposable implements IPartService { } resizePart(part: Parts, sizeChange: number): void { + let view: WorkbenchView; switch (part) { case Parts.SIDEBAR_PART: + view = this.sidebarPart; case Parts.PANEL_PART: + view = this.panelPart; case Parts.EDITOR_PART: - this.workbenchLayout.resizePart(part, sizeChange); + view = this.editorPart; + if (this.workbenchGrid instanceof SerializableGrid) { + this.workbenchGrid.resizeView(view, this.workbenchGrid.getViewSize(view) + sizeChange); + } else { + this.workbenchGrid.resizePart(part, sizeChange); + } break; default: return; // Cannot resize other parts @@ -1363,7 +1548,20 @@ export class Workbench extends Disposable implements IPartService { // Layout if (!skipLayout) { - this.workbenchLayout.layout(); + if (this.workbenchGrid instanceof SerializableGrid) { + if (hidden) { + this.workbenchGrid.removeView(this.activitybarPart); + } else { + const refView = this.sideBarHidden ? this.editorPart : this.sidebarPart; + const direction = this.sideBarPosition === Position.LEFT ? Direction.Left : Direction.Right; + this.workbenchGrid.addView(this.activitybarPart, Sizing.Split, refView, direction); + } + + const dimensions = DOM.getClientArea(this.container); + this.workbenchGrid.layout(dimensions.width, dimensions.height); + } else { + this.workbenchGrid.layout(); + } } } @@ -1413,7 +1611,33 @@ export class Workbench extends Disposable implements IPartService { // Layout if (!skipLayout) { - this.workbenchLayout.layout(); + if (this.workbenchGrid instanceof SerializableGrid) { + if (this.sideBarHidden) { + this.uiState.lastSidebarDimension = this.workbenchGrid.getViewSize(this.sidebarPart); + this.workbenchGrid.removeView(this.sidebarPart); + } else { + + const removePanelFirst = !this.panelHidden && this.panelPosition === Position.BOTTOM; + const refView = !this.panelHidden && this.panelPosition === Position.RIGHT && this.sideBarPosition === Position.RIGHT ? this.panelPart : this.editorPart; + const direction = this.sideBarPosition === Position.RIGHT ? Direction.Right : Direction.Left; + + if (removePanelFirst) { + this.saveLastPanelDimension(); + this.workbenchGrid.removeView(this.panelPart); + } + + this.workbenchGrid.addView(this.sidebarPart, this.uiState.lastSidebarDimension !== undefined ? this.uiState.lastSidebarDimension : Sizing.Split, refView, direction); + + if (removePanelFirst) { + this.workbenchGrid.addView(this.panelPart, this.getLastPanelDimension(this.panelPosition), this.editorPart, this.panelPosition === Position.BOTTOM ? Direction.Down : Direction.Right); + } + } + + const dimensions = DOM.getClientArea(this.container); + this.workbenchGrid.layout(dimensions.width, dimensions.height); + } else { + this.workbenchGrid.layout(); + } } } @@ -1451,16 +1675,40 @@ export class Workbench extends Disposable implements IPartService { // Layout if (!skipLayout) { - this.workbenchLayout.layout(); + if (this.workbenchGrid instanceof SerializableGrid) { + if (this.panelHidden) { + this.saveLastPanelDimension(); + this.workbenchGrid.removeView(this.panelPart); + } else { + this.workbenchGrid.addView(this.panelPart, this.getLastPanelDimension(this.panelPosition) !== undefined ? this.getLastPanelDimension(this.panelPosition) : Sizing.Split, this.editorPart, this.panelPosition === Position.BOTTOM ? Direction.Down : Direction.Right); + } + + const dimensions = DOM.getClientArea(this.container); + this.workbenchGrid.layout(dimensions.width, dimensions.height); + } else { + this.workbenchGrid.layout(); + } } } toggleMaximizedPanel(): void { - this.workbenchLayout.layout({ toggleMaximizedPanel: true, source: Parts.PANEL_PART }); + if (this.workbenchGrid instanceof SerializableGrid) { + this.workbenchGrid.maximizeViewSize(this.panelPart); + } else { + this.workbenchGrid.layout({ toggleMaximizedPanel: true, source: Parts.PANEL_PART }); + } } isPanelMaximized(): boolean { - return this.workbenchLayout.isPanelMaximized(); + if (this.workbenchGrid instanceof SerializableGrid) { + try { + return this.workbenchGrid.getViewSize2(this.panelPart).height === this.panelPart.maximumHeight; + } catch (e) { + return false; + } + } else { + return this.workbenchGrid.isPanelMaximized(); + } } getSideBarPosition(): Position { @@ -1468,6 +1716,8 @@ export class Workbench extends Disposable implements IPartService { } setSideBarPosition(position: Position): void { + const wasHidden = this.sideBarHidden; + if (this.sideBarHidden) { this.setSideBarHidden(false, true /* Skip Layout */); } @@ -1487,15 +1737,50 @@ export class Workbench extends Disposable implements IPartService { this.sidebarPart.updateStyles(); // Layout - this.workbenchLayout.layout(); + if (this.workbenchGrid instanceof SerializableGrid) { + const refView = !this.panelHidden && this.panelPosition === position ? this.panelPart : this.editorPart; + const direction = position === Position.RIGHT ? Direction.Right : Direction.Left; + const removePanelFirst = !this.panelHidden && this.panelPosition === Position.BOTTOM; + + if (removePanelFirst) { + this.saveLastPanelDimension(); + this.workbenchGrid.removeView(this.panelPart); + } + + if (!this.activityBarHidden) { + this.workbenchGrid.moveView(this.activitybarPart, Sizing.Split, refView, direction); + } + + if (wasHidden) { + this.workbenchGrid.addView(this.sidebarPart, this.uiState.lastSidebarDimension ? this.uiState.lastSidebarDimension : Sizing.Split, refView, direction); + } else { + this.uiState.lastSidebarDimension = this.workbenchGrid.getViewSize(this.sidebarPart); + this.workbenchGrid.moveView(this.sidebarPart, this.uiState.lastSidebarDimension, refView, direction); + } + + if (removePanelFirst) { + this.workbenchGrid.addView(this.panelPart, this.getLastPanelDimension(this.panelPosition), this.editorPart, this.panelPosition === Position.BOTTOM ? Direction.Down : Direction.Right); + } + + const dimensions = DOM.getClientArea(this.container); + this.workbenchGrid.layout(dimensions.width, dimensions.height); + } else { + this.workbenchGrid.layout(); + } } setMenubarVisibility(visibility: MenuBarVisibility, skipLayout: boolean): void { if (this.menubarVisibility !== visibility) { this.menubarVisibility = visibility; + // Layout if (!skipLayout) { - this.workbenchLayout.layout(); + if (this.workbenchGrid instanceof SerializableGrid) { + const dimensions = DOM.getClientArea(this.container); + this.workbenchGrid.layout(dimensions.width, dimensions.height); + } else { + this.workbenchGrid.layout(); + } } } } @@ -1509,8 +1794,12 @@ export class Workbench extends Disposable implements IPartService { } setPanelPosition(position: Position): void { + const wasHidden = this.panelHidden; + if (this.panelHidden) { this.setPanelHidden(false, true /* Skip Layout */); + } else { + this.saveLastPanelDimension(); } const newPositionValue = (position === Position.BOTTOM) ? 'bottom' : 'right'; @@ -1526,8 +1815,17 @@ export class Workbench extends Disposable implements IPartService { this.panelPart.updateStyles(); // Layout - this.workbenchLayout.layout(); - } + if (this.workbenchGrid instanceof SerializableGrid) { + if (wasHidden) { + this.workbenchGrid.addView(this.panelPart, this.getLastPanelDimension(position) !== undefined ? this.getLastPanelDimension(position) : Sizing.Split, this.editorPart, position === Position.BOTTOM ? Direction.Down : Direction.Right); + } else { + this.workbenchGrid.moveView(this.panelPart, this.getLastPanelDimension(position) !== undefined ? this.getLastPanelDimension(position) : Sizing.Split, this.editorPart, position === Position.BOTTOM ? Direction.Down : Direction.Right); + } - //#endregion -} + const dimensions = DOM.getClientArea(this.container); + this.workbenchGrid.layout(dimensions.width, dimensions.height); + } else { + this.workbenchGrid.layout(); + } + } +} \ No newline at end of file diff --git a/src/vs/workbench/parts/debug/browser/media/debug.contribution.css b/src/vs/workbench/parts/debug/browser/media/debug.contribution.css index 330f9e8a0b9..7a5e0f3cfa2 100644 --- a/src/vs/workbench/parts/debug/browser/media/debug.contribution.css +++ b/src/vs/workbench/parts/debug/browser/media/debug.contribution.css @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ /* Activity Bar */ -.monaco-workbench > .activitybar .monaco-action-bar .action-label.debug { +.monaco-workbench .activitybar .monaco-action-bar .action-label.debug { -webkit-mask: url('debug-dark.svg') no-repeat 50% 50%; } @@ -112,7 +112,7 @@ /* Debug status */ /* A very precise css rule to overwrite the display set in statusbar.css */ -.monaco-workbench > .part.statusbar > .statusbar-item > .debug-statusbar-item > a { +.monaco-workbench .part.statusbar > .statusbar-item > .debug-statusbar-item > a { display: flex; padding: 0 5px 0 5px; } diff --git a/src/vs/workbench/parts/debug/browser/media/debugViewlet.css b/src/vs/workbench/parts/debug/browser/media/debugViewlet.css index 38b36067f54..7cf772fb7b0 100644 --- a/src/vs/workbench/parts/debug/browser/media/debugViewlet.css +++ b/src/vs/workbench/parts/debug/browser/media/debugViewlet.css @@ -54,7 +54,7 @@ background: url('repl-inverse.svg') center center no-repeat; } -.monaco-workbench > .part > .title > .title-actions .start-debug-action-item { +.monaco-workbench .part > .title > .title-actions .start-debug-action-item { display: flex; align-items: center; font-size: 11px; @@ -68,7 +68,7 @@ border-radius: 4px; } -.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon { +.monaco-workbench .part > .title > .title-actions .start-debug-action-item .icon { height: 20px; width: 20px; background: url('start.svg') no-repeat; @@ -78,8 +78,8 @@ transition: transform 50ms ease; } -.vs-dark .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon, -.hc-black .monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon { +.vs-dark .monaco-workbench .part > .title > .title-actions .start-debug-action-item .icon, +.hc-black .monaco-workbench .part > .title > .title-actions .start-debug-action-item .icon { background-image: url('start-inverse.svg'); } @@ -95,7 +95,7 @@ cursor: initial; } -.monaco-workbench > .part > .title > .title-actions .start-debug-action-item .icon.active { +.monaco-workbench .part > .title > .title-actions .start-debug-action-item .icon.active { transform: scale(1.272019649, 1.272019649); } diff --git a/src/vs/workbench/parts/debug/browser/statusbarColorProvider.ts b/src/vs/workbench/parts/debug/browser/statusbarColorProvider.ts index f3cdc5b0192..43591298a91 100644 --- a/src/vs/workbench/parts/debug/browser/statusbarColorProvider.ts +++ b/src/vs/workbench/parts/debug/browser/statusbarColorProvider.ts @@ -79,7 +79,7 @@ export class StatusBarColorProvider extends Themable implements IWorkbenchContri this.styleElement = createStyleSheet(container); } - this.styleElement.innerHTML = `.monaco-workbench > .part.statusbar > .statusbar-item.has-beak:before { border-bottom-color: ${backgroundColor} !important; }`; + this.styleElement.innerHTML = `.monaco-workbench .part.statusbar > .statusbar-item.has-beak:before { border-bottom-color: ${backgroundColor} !important; }`; } private getColorKey(noFolderColor: string, debuggingColor: string, normalColor: string): string { @@ -115,6 +115,6 @@ export function isStatusbarInDebugMode(debugService: IDebugService): boolean { registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const statusBarItemDebuggingForeground = theme.getColor(STATUS_BAR_DEBUGGING_FOREGROUND); if (statusBarItemDebuggingForeground) { - collector.addRule(`.monaco-workbench > .part.statusbar.debugging > .statusbar-item .mask-icon { background-color: ${statusBarItemDebuggingForeground} !important; }`); + collector.addRule(`.monaco-workbench .part.statusbar.debugging > .statusbar-item .mask-icon { background-color: ${statusBarItemDebuggingForeground} !important; }`); } }); diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensions.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensions.css index 52362be55a0..bdd6185f3dd 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensions.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensions.css @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .activitybar > .content .monaco-action-bar .action-label.extensions { +.monaco-workbench .activitybar > .content .monaco-action-bar .action-label.extensions { -webkit-mask: url('extensions-dark.svg') no-repeat 50% 50%; } diff --git a/src/vs/workbench/parts/feedback/electron-browser/feedbackStatusbarItem.ts b/src/vs/workbench/parts/feedback/electron-browser/feedbackStatusbarItem.ts index 2b126ff033c..05db4b3c1db 100644 --- a/src/vs/workbench/parts/feedback/electron-browser/feedbackStatusbarItem.ts +++ b/src/vs/workbench/parts/feedback/electron-browser/feedbackStatusbarItem.ts @@ -168,6 +168,6 @@ class HideAction extends Action { registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const statusBarItemHoverBackground = theme.getColor(STATUS_BAR_ITEM_HOVER_BACKGROUND); if (statusBarItemHoverBackground) { - collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item .monaco-dropdown.send-feedback:hover { background-color: ${statusBarItemHoverBackground}; }`); + collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item .monaco-dropdown.send-feedback:hover { background-color: ${statusBarItemHoverBackground}; }`); } }); diff --git a/src/vs/workbench/parts/files/electron-browser/media/explorerviewlet.css b/src/vs/workbench/parts/files/electron-browser/media/explorerviewlet.css index 7e059485bbf..746324d6769 100644 --- a/src/vs/workbench/parts/files/electron-browser/media/explorerviewlet.css +++ b/src/vs/workbench/parts/files/electron-browser/media/explorerviewlet.css @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ /* Activity Bar */ -.monaco-workbench > .activitybar .monaco-action-bar .action-label.explore { +.monaco-workbench .activitybar .monaco-action-bar .action-label.explore { -webkit-mask: url('files-dark.svg') no-repeat 50% 50%; } diff --git a/src/vs/workbench/parts/relauncher/electron-browser/relauncher.contribution.ts b/src/vs/workbench/parts/relauncher/electron-browser/relauncher.contribution.ts index 83be58a4ade..0fee458eec6 100644 --- a/src/vs/workbench/parts/relauncher/electron-browser/relauncher.contribution.ts +++ b/src/vs/workbench/parts/relauncher/electron-browser/relauncher.contribution.ts @@ -24,7 +24,7 @@ interface IConfiguration extends IWindowsConfiguration { update: { channel: string; }; telemetry: { enableCrashReporter: boolean }; keyboard: { touchbar: { enabled: boolean } }; - workbench: { tree: { horizontalScrolling: boolean } }; + workbench: { tree: { horizontalScrolling: boolean }, useExperimentalGridLayout: boolean }; files: { useExperimentalFileWatcher: boolean, watcherExclude: object }; } @@ -41,6 +41,7 @@ export class SettingsChangeRelauncher extends Disposable implements IWorkbenchCo private windowsSmoothScrollingWorkaround: boolean; private experimentalFileWatcher: boolean; private fileWatcherExclude: object; + private useGridLayout: boolean; private firstFolderResource?: URI; private extensionHostRestarter: RunOnceScheduler; @@ -144,6 +145,12 @@ export class SettingsChangeRelauncher extends Disposable implements IWorkbenchCo changed = true; } + // Workbench Grid Layout + if (config.workbench && typeof config.workbench.useExperimentalGridLayout === 'boolean' && config.workbench.useExperimentalGridLayout !== this.useGridLayout) { + this.useGridLayout = config.workbench.useExperimentalGridLayout; + changed = true; + } + // Notify only when changed and we are the focused window (avoids notification spam across windows) if (notify && changed) { this.doConfirm( diff --git a/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css b/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css index 84ad51a4b7b..848ee89aee3 100644 --- a/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css +++ b/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .activitybar > .content .monaco-action-bar .action-label.scm { +.monaco-workbench .activitybar > .content .monaco-action-bar .action-label.scm { -webkit-mask: url('icon-dark.svg') no-repeat 50% 50%; } diff --git a/src/vs/workbench/parts/search/electron-browser/media/search.contribution.css b/src/vs/workbench/parts/search/electron-browser/media/search.contribution.css index eb5ed7fd15f..0fe89c6f881 100644 --- a/src/vs/workbench/parts/search/electron-browser/media/search.contribution.css +++ b/src/vs/workbench/parts/search/electron-browser/media/search.contribution.css @@ -4,6 +4,6 @@ *--------------------------------------------------------------------------------------------*/ /* Activity Bar */ -.monaco-workbench > .activitybar .monaco-action-bar .action-label.search { +.monaco-workbench .activitybar .monaco-action-bar .action-label.search { -webkit-mask: url('search-dark.svg') no-repeat 50% 50%; } \ No newline at end of file diff --git a/src/vs/workbench/parts/watermark/electron-browser/watermark.css b/src/vs/workbench/parts/watermark/electron-browser/watermark.css index 8284b8442dd..15c57d04c3d 100644 --- a/src/vs/workbench/parts/watermark/electron-browser/watermark.css +++ b/src/vs/workbench/parts/watermark/electron-browser/watermark.css @@ -11,11 +11,11 @@ background-position-y: 50%; } -.monaco-workbench > .part.editor > .content > .watermark { +.monaco-workbench .part.editor > .content > .watermark { display: none; /* only visible when no editors are opened */ } -.monaco-workbench > .part.editor.has-watermark > .content.empty > .watermark { +.monaco-workbench .part.editor.has-watermark > .content.empty > .watermark { display: block; position: absolute; width: 100%; @@ -25,50 +25,50 @@ overflow: hidden; } -.monaco-workbench > .part.editor > .content.empty > .watermark > .watermark-box { +.monaco-workbench .part.editor > .content.empty > .watermark > .watermark-box { display: inline-table; border-collapse: separate; border-spacing: 13px 17px; } -.monaco-workbench > .part.editor.max-height-478px > .content.empty > .watermark { +.monaco-workbench .part.editor.max-height-478px > .content.empty > .watermark { display: none; } -.monaco-workbench > .part.editor > .content.empty > .watermark dl { +.monaco-workbench .part.editor > .content.empty > .watermark dl { display: table-row; opacity: .8; cursor: default; } -.monaco-workbench > .part.editor > .content.empty > .watermark dt { +.monaco-workbench .part.editor > .content.empty > .watermark dt { text-align: right; letter-spacing: 0.04em } -.monaco-workbench > .part.editor > .content.empty > .watermark dd { +.monaco-workbench .part.editor > .content.empty > .watermark dd { text-align: left; } -.monaco-workbench > .part.editor > .content.empty > .watermark dt, -.monaco-workbench > .part.editor > .content.empty > .watermark dd { +.monaco-workbench .part.editor > .content.empty > .watermark dt, +.monaco-workbench .part.editor > .content.empty > .watermark dd { display: table-cell; } -.monaco-workbench > .part.editor > .content.empty > .watermark dt, -.monaco-workbench > .part.editor > .content.empty > .watermark dl { +.monaco-workbench .part.editor > .content.empty > .watermark dt, +.monaco-workbench .part.editor > .content.empty > .watermark dl { color: rgba(0,0,0,.68); } -.vs-dark .monaco-workbench > .part.editor > .content.empty > .watermark dt, -.vs-dark .monaco-workbench > .part.editor > .content.empty > .watermark dl { +.vs-dark .monaco-workbench .part.editor > .content.empty > .watermark dt, +.vs-dark .monaco-workbench .part.editor > .content.empty > .watermark dl { color: rgba(255,255,255,.6); } -.hc-black .monaco-workbench > .part.editor > .content.empty > .watermark dt { +.hc-black .monaco-workbench .part.editor > .content.empty > .watermark dt { color: #FFF; } -.hc-black .monaco-workbench > .part.editor > .content.empty > .watermark dl { +.hc-black .monaco-workbench .part.editor > .content.empty > .watermark dl { color: #FFF; opacity: 1; } diff --git a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css index 94d52d379fd..75a18c03da3 100644 --- a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css +++ b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .part.editor > .content .welcomePageContainer { +.monaco-workbench .part.editor > .content .welcomePageContainer { align-items: center; display: flex; justify-content: center; @@ -11,51 +11,51 @@ min-height: 100%; } -.monaco-workbench > .part.editor > .content .welcomePage { +.monaco-workbench .part.editor > .content .welcomePage { width: 90%; max-width: 1200px; font-size: 10px; } -.monaco-workbench > .part.editor > .content .welcomePage .row { +.monaco-workbench .part.editor > .content .welcomePage .row { display: flex; flex-flow: row; } -.monaco-workbench > .part.editor > .content .welcomePage .row .section { +.monaco-workbench .part.editor > .content .welcomePage .row .section { overflow: hidden; } -.monaco-workbench > .part.editor > .content .welcomePage .row .splash { +.monaco-workbench .part.editor > .content .welcomePage .row .splash { overflow: hidden; } -.monaco-workbench > .part.editor > .content .welcomePage .row .commands { +.monaco-workbench .part.editor > .content .welcomePage .row .commands { overflow: hidden; } -.monaco-workbench > .part.editor > .content .welcomePage .row .commands .list { +.monaco-workbench .part.editor > .content .welcomePage .row .commands .list { overflow: hidden; } -.monaco-workbench > .part.editor > .content .welcomePage p { +.monaco-workbench .part.editor > .content .welcomePage p { font-size: 1.3em; } -.monaco-workbench > .part.editor > .content .welcomePage .keyboard { +.monaco-workbench .part.editor > .content .welcomePage .keyboard { font-family: "Lucida Grande", sans-serif;/* Keyboard shortcuts */ } -.monaco-workbench > .part.editor > .content .welcomePage a { +.monaco-workbench .part.editor > .content .welcomePage a { text-decoration: none; } -.monaco-workbench > .part.editor > .content .welcomePage a:focus { +.monaco-workbench .part.editor > .content .welcomePage a:focus { outline: 1px solid -webkit-focus-ring-color; outline-offset: -1px; } -.monaco-workbench > .part.editor > .content .welcomePage h1 { +.monaco-workbench .part.editor > .content .welcomePage h1 { padding: 0; margin: 0; border: none; @@ -64,28 +64,28 @@ white-space: nowrap; } -.monaco-workbench > .part.editor > .content .welcomePage .title { +.monaco-workbench .part.editor > .content .welcomePage .title { margin-top: 1em; margin-bottom: 1em; flex: 1 100%; } -.monaco-workbench > .part.editor > .content .welcomePage .subtitle { +.monaco-workbench .part.editor > .content .welcomePage .subtitle { margin-top: .8em; font-size: 2.6em; display: block; } -.hc-black .monaco-workbench > .part.editor > .content .welcomePage .subtitle { +.hc-black .monaco-workbench .part.editor > .content .welcomePage .subtitle { font-weight: 200; } -.monaco-workbench > .part.editor > .content .welcomePage .splash, -.monaco-workbench > .part.editor > .content .welcomePage .commands { +.monaco-workbench .part.editor > .content .welcomePage .splash, +.monaco-workbench .part.editor > .content .welcomePage .commands { flex: 1 1 0; } -.monaco-workbench > .part.editor > .content .welcomePage h2 { +.monaco-workbench .part.editor > .content .welcomePage h2 { font-weight: 200; margin-top: 17px; margin-bottom: 5px; @@ -93,62 +93,62 @@ line-height: initial; } -.monaco-workbench > .part.editor > .content .welcomePage .splash .section { +.monaco-workbench .part.editor > .content .welcomePage .splash .section { margin-bottom: 5em; } -.monaco-workbench > .part.editor > .content .welcomePage .splash ul { +.monaco-workbench .part.editor > .content .welcomePage .splash ul { margin: 0; font-size: 1.3em; list-style: none; padding: 0; } -.monaco-workbench > .part.editor > .content .welcomePage .splash li { +.monaco-workbench .part.editor > .content .welcomePage .splash li { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.monaco-workbench > .part.editor > .content .welcomePage.emptyRecent .splash .recent .list { +.monaco-workbench .part.editor > .content .welcomePage.emptyRecent .splash .recent .list { display: none; } -.monaco-workbench > .part.editor > .content .welcomePage .splash .recent .none { +.monaco-workbench .part.editor > .content .welcomePage .splash .recent .none { display: none; } -.monaco-workbench > .part.editor > .content .welcomePage.emptyRecent .splash .recent .none { +.monaco-workbench .part.editor > .content .welcomePage.emptyRecent .splash .recent .none { display: initial; } -.monaco-workbench > .part.editor > .content .welcomePage .splash .recent li.moreRecent { +.monaco-workbench .part.editor > .content .welcomePage .splash .recent li.moreRecent { margin-top: 5px; } -.monaco-workbench > .part.editor > .content .welcomePage .splash .recent .path { +.monaco-workbench .part.editor > .content .welcomePage .splash .recent .path { padding-left: 1em; } -.monaco-workbench > .part.editor > .content .welcomePage .splash .title, -.monaco-workbench > .part.editor > .content .welcomePage .splash .showOnStartup { +.monaco-workbench .part.editor > .content .welcomePage .splash .title, +.monaco-workbench .part.editor > .content .welcomePage .splash .showOnStartup { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.monaco-workbench > .part.editor > .content .welcomePage .splash .showOnStartup > .checkbox { +.monaco-workbench .part.editor > .content .welcomePage .splash .showOnStartup > .checkbox { vertical-align: bottom; } -.monaco-workbench > .part.editor > .content .welcomePage .commands .list { +.monaco-workbench .part.editor > .content .welcomePage .commands .list { list-style: none; padding: 0; } -.monaco-workbench > .part.editor > .content .welcomePage .commands .item { +.monaco-workbench .part.editor > .content .welcomePage .commands .item { margin: 7px 0px; } -.monaco-workbench > .part.editor > .content .welcomePage .commands .item button { +.monaco-workbench .part.editor > .content .welcomePage .commands .item button { margin: 1px; padding: 12px 10px; width: calc(100% - 2px); @@ -160,7 +160,7 @@ font-family: inherit; } -.monaco-workbench > .part.editor > .content .welcomePage .commands .item button > span { +.monaco-workbench .part.editor > .content .welcomePage .commands .item button > span { display: inline-block; width:100%; min-width: 0; @@ -169,7 +169,7 @@ text-overflow: ellipsis; } -.monaco-workbench > .part.editor > .content .welcomePage .commands .item button h3 { +.monaco-workbench .part.editor > .content .welcomePage .commands .item button h3 { font-weight: normal; font-size: 1em; margin: 0; @@ -180,41 +180,41 @@ text-overflow: ellipsis; } -.monaco-workbench > .part.editor > .content .welcomePage .commands .item button { +.monaco-workbench .part.editor > .content .welcomePage .commands .item button { border: none; } -.hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands .item button > h3 { +.hc-black .monaco-workbench .part.editor > .content .welcomePage .commands .item button > h3 { font-weight: bold; } -.monaco-workbench > .part.editor > .content .welcomePage .commands .item button:focus { +.monaco-workbench .part.editor > .content .welcomePage .commands .item button:focus { outline-style: solid; outline-width: 1px; } -.hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands .item button { +.hc-black .monaco-workbench .part.editor > .content .welcomePage .commands .item button { border-width: 1px; border-style: solid; } -.hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands .item button:hover { +.hc-black .monaco-workbench .part.editor > .content .welcomePage .commands .item button:hover { outline-width: 1px; outline-style: dashed; outline-offset: -5px; } -.monaco-workbench > .part.editor > .content .welcomePage .commands .item button .enabledExtension { +.monaco-workbench .part.editor > .content .welcomePage .commands .item button .enabledExtension { display: none; } -.monaco-workbench > .part.editor > .content .welcomePage .commands .item button .installExtension.installed { +.monaco-workbench .part.editor > .content .welcomePage .commands .item button .installExtension.installed { display: none; } -.monaco-workbench > .part.editor > .content .welcomePage .commands .item button .enabledExtension.installed { +.monaco-workbench .part.editor > .content .welcomePage .commands .item button .enabledExtension.installed { display: inline; } -.monaco-workbench > .part.editor > .content .welcomePageContainer.max-height-685px .title { +.monaco-workbench .part.editor > .content .welcomePageContainer.max-height-685px .title { display: none; } @@ -223,9 +223,9 @@ background-image: url('../../code-icon.svg'); } -.monaco-workbench > .part.editor > .content .welcomePage .mac-only, -.monaco-workbench > .part.editor > .content .welcomePage .windows-only, -.monaco-workbench > .part.editor > .content .welcomePage .linux-only { +.monaco-workbench .part.editor > .content .welcomePage .mac-only, +.monaco-workbench .part.editor > .content .welcomePage .windows-only, +.monaco-workbench .part.editor > .content .welcomePage .linux-only { display: none; } .mac > .monaco-workbench > .part.editor > .content .welcomePage .mac-only { diff --git a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts index 0a127775cae..3e7bb14b1af 100644 --- a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts +++ b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts @@ -640,43 +640,43 @@ export const welcomePageBackground = registerColor('welcomePage.background', { l registerThemingParticipant((theme, collector) => { const backgroundColor = theme.getColor(welcomePageBackground); if (backgroundColor) { - collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePageContainer { background-color: ${backgroundColor}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer { background-color: ${backgroundColor}; }`); } const foregroundColor = theme.getColor(foreground); if (foregroundColor) { - collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .caption { color: ${foregroundColor}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .caption { color: ${foregroundColor}; }`); } const descriptionColor = theme.getColor(descriptionForeground); if (descriptionColor) { - collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .detail { color: ${descriptionColor}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .detail { color: ${descriptionColor}; }`); } const buttonColor = getExtraColor(theme, buttonBackground, { dark: 'rgba(0, 0, 0, .2)', extra_dark: 'rgba(200, 235, 255, .042)', light: 'rgba(0,0,0,.04)', hc: 'black' }); if (buttonColor) { - collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands .item button { background: ${buttonColor}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .commands .item button { background: ${buttonColor}; }`); } const buttonHoverColor = getExtraColor(theme, buttonHoverBackground, { dark: 'rgba(200, 235, 255, .072)', extra_dark: 'rgba(200, 235, 255, .072)', light: 'rgba(0,0,0,.10)', hc: null }); if (buttonHoverColor) { - collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands .item button:hover { background: ${buttonHoverColor}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .commands .item button:hover { background: ${buttonHoverColor}; }`); } const link = theme.getColor(textLinkForeground); if (link) { - collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage a { color: ${link}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage a { color: ${link}; }`); } const activeLink = theme.getColor(textLinkActiveForeground); if (activeLink) { - collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage a:hover, - .monaco-workbench > .part.editor > .content .welcomePage a:active { color: ${activeLink}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage a:hover, + .monaco-workbench .part.editor > .content .welcomePage a:active { color: ${activeLink}; }`); } const focusColor = theme.getColor(focusBorder); if (focusColor) { - collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage a:focus { outline-color: ${focusColor}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage a:focus { outline-color: ${focusColor}; }`); } const border = theme.getColor(contrastBorder); if (border) { - collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands .item button { border-color: ${border}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .commands .item button { border-color: ${border}; }`); } const activeBorder = theme.getColor(activeContrastBorder); if (activeBorder) { - collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands .item button:hover { outline-color: ${activeBorder}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .commands .item button:hover { outline-color: ${activeBorder}; }`); } }); diff --git a/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css b/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css index 56a76aa42fe..c83ac377cae 100644 --- a/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css +++ b/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css @@ -3,45 +3,45 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .part.editor > .content .walkThroughContent { +.monaco-workbench .part.editor > .content .walkThroughContent { box-sizing: border-box; padding: 10px 20px; line-height: 22px; user-select: initial; } -.monaco-workbench > .part.editor > .content .walkThroughContent img { +.monaco-workbench .part.editor > .content .walkThroughContent img { max-width: 100%; max-height: 100%; } -.monaco-workbench > .part.editor > .content .walkThroughContent a { +.monaco-workbench .part.editor > .content .walkThroughContent a { text-decoration: none; } -.monaco-workbench > .part.editor > .content .walkThroughContent a:focus, -.monaco-workbench > .part.editor > .content .walkThroughContent input:focus, -.monaco-workbench > .part.editor > .content .walkThroughContent select:focus, -.monaco-workbench > .part.editor > .content .walkThroughContent textarea:focus { +.monaco-workbench .part.editor > .content .walkThroughContent a:focus, +.monaco-workbench .part.editor > .content .walkThroughContent input:focus, +.monaco-workbench .part.editor > .content .walkThroughContent select:focus, +.monaco-workbench .part.editor > .content .walkThroughContent textarea:focus { outline: 1px solid -webkit-focus-ring-color; outline-offset: -1px; } -.monaco-workbench > .part.editor > .content .walkThroughContent hr { +.monaco-workbench .part.editor > .content .walkThroughContent hr { border: 0; height: 2px; border-bottom: 2px solid; } -.monaco-workbench > .part.editor > .content .walkThroughContent h1, -.monaco-workbench > .part.editor > .content .walkThroughContent h2, -.monaco-workbench > .part.editor > .content .walkThroughContent h3 { +.monaco-workbench .part.editor > .content .walkThroughContent h1, +.monaco-workbench .part.editor > .content .walkThroughContent h2, +.monaco-workbench .part.editor > .content .walkThroughContent h3 { font-weight: lighter; margin-top: 20px; margin-bottom: 10px; } -.monaco-workbench > .part.editor > .content .walkThroughContent h1 { +.monaco-workbench .part.editor > .content .walkThroughContent h1 { padding-bottom: 0.3em; line-height: 1.2; border-bottom-width: 1px; @@ -50,66 +50,66 @@ margin-bottom: 15px; } -.monaco-workbench > .part.editor > .content .walkThroughContent h2 { +.monaco-workbench .part.editor > .content .walkThroughContent h2 { font-size: 30px; margin-top: 30px; } -.monaco-workbench > .part.editor > .content .walkThroughContent h3 { +.monaco-workbench .part.editor > .content .walkThroughContent h3 { font-size: 22px; } -.monaco-workbench > .part.editor > .content .walkThroughContent h4 { +.monaco-workbench .part.editor > .content .walkThroughContent h4 { font-size: 12px; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; } -.monaco-workbench > .part.editor > .content .walkThroughContent a:hover { +.monaco-workbench .part.editor > .content .walkThroughContent a:hover { text-decoration: underline; } -.monaco-workbench > .part.editor > .content .walkThroughContent table { +.monaco-workbench .part.editor > .content .walkThroughContent table { border-collapse: collapse; } -.monaco-workbench > .part.editor > .content .walkThroughContent table > thead > tr > th { +.monaco-workbench .part.editor > .content .walkThroughContent table > thead > tr > th { text-align: left; border-bottom: 1px solid; } -.monaco-workbench > .part.editor > .content .walkThroughContent table > thead > tr > th, -.monaco-workbench > .part.editor > .content .walkThroughContent table > thead > tr > td, -.monaco-workbench > .part.editor > .content .walkThroughContent table > tbody > tr > th, -.monaco-workbench > .part.editor > .content .walkThroughContent table > tbody > tr > td { +.monaco-workbench .part.editor > .content .walkThroughContent table > thead > tr > th, +.monaco-workbench .part.editor > .content .walkThroughContent table > thead > tr > td, +.monaco-workbench .part.editor > .content .walkThroughContent table > tbody > tr > th, +.monaco-workbench .part.editor > .content .walkThroughContent table > tbody > tr > td { padding: 5px 10px; } -.monaco-workbench > .part.editor > .content .walkThroughContent table > tbody > tr + tr > td { +.monaco-workbench .part.editor > .content .walkThroughContent table > tbody > tr + tr > td { border-top: 1px solid; } -.monaco-workbench > .part.editor > .content .walkThroughContent blockquote { +.monaco-workbench .part.editor > .content .walkThroughContent blockquote { margin: 0 7px 0 5px; padding: 0 16px 0 10px; border-left: 5px solid; } -.monaco-workbench > .part.editor > .content .walkThroughContent code, -.monaco-workbench > .part.editor > .content .walkThroughContent .shortcut { +.monaco-workbench .part.editor > .content .walkThroughContent code, +.monaco-workbench .part.editor > .content .walkThroughContent .shortcut { font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; } -.monaco-workbench > .part.editor > .content .walkThroughContent blockquote { +.monaco-workbench .part.editor > .content .walkThroughContent blockquote { margin: 0 7px 0 5px; padding: 0 16px 0 10px; border-left: 5px solid; } -.monaco-workbench > .part.editor > .content .walkThroughContent .monaco-tokenized-source { +.monaco-workbench .part.editor > .content .walkThroughContent .monaco-tokenized-source { white-space: pre; } @@ -118,9 +118,9 @@ background-image: url('../../code-icon.svg'); } -.monaco-workbench > .part.editor > .content .walkThroughContent .mac-only, -.monaco-workbench > .part.editor > .content .walkThroughContent .windows-only, -.monaco-workbench > .part.editor > .content .walkThroughContent .linux-only { +.monaco-workbench .part.editor > .content .walkThroughContent .mac-only, +.monaco-workbench .part.editor > .content .walkThroughContent .windows-only, +.monaco-workbench .part.editor > .content .walkThroughContent .linux-only { display: none; } .mac > .monaco-workbench > .part.editor > .content .walkThroughContent .mac-only { @@ -133,7 +133,7 @@ display: initial; } -.hc-black .monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor { +.hc-black .monaco-workbench .part.editor > .content .walkThroughContent .monaco-editor { border-width: 1px; border-style: solid; } diff --git a/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts b/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts index 533bd83e758..ed99e06ee17 100644 --- a/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts +++ b/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts @@ -526,37 +526,37 @@ export const embeddedEditorBackground = registerColor('walkThrough.embeddedEdito registerThemingParticipant((theme, collector) => { const color = getExtraColor(theme, embeddedEditorBackground, { dark: 'rgba(0, 0, 0, .4)', extra_dark: 'rgba(200, 235, 255, .064)', light: '#f4f4f4', hc: null }); if (color) { - collector.addRule(`.monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor-background, - .monaco-workbench > .part.editor > .content .walkThroughContent .margin-view-overlays { background: ${color}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent .monaco-editor-background, + .monaco-workbench .part.editor > .content .walkThroughContent .margin-view-overlays { background: ${color}; }`); } const link = theme.getColor(textLinkForeground); if (link) { - collector.addRule(`.monaco-workbench > .part.editor > .content .walkThroughContent a { color: ${link}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent a { color: ${link}; }`); } const activeLink = theme.getColor(textLinkActiveForeground); if (activeLink) { - collector.addRule(`.monaco-workbench > .part.editor > .content .walkThroughContent a:hover, - .monaco-workbench > .part.editor > .content .walkThroughContent a:active { color: ${activeLink}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent a:hover, + .monaco-workbench .part.editor > .content .walkThroughContent a:active { color: ${activeLink}; }`); } const focusColor = theme.getColor(focusBorder); if (focusColor) { - collector.addRule(`.monaco-workbench > .part.editor > .content .walkThroughContent a:focus { outline-color: ${focusColor}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent a:focus { outline-color: ${focusColor}; }`); } const shortcut = theme.getColor(textPreformatForeground); if (shortcut) { - collector.addRule(`.monaco-workbench > .part.editor > .content .walkThroughContent code, - .monaco-workbench > .part.editor > .content .walkThroughContent .shortcut { color: ${shortcut}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent code, + .monaco-workbench .part.editor > .content .walkThroughContent .shortcut { color: ${shortcut}; }`); } const border = theme.getColor(contrastBorder); if (border) { - collector.addRule(`.monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor { border-color: ${border}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent .monaco-editor { border-color: ${border}; }`); } const quoteBackground = theme.getColor(textBlockQuoteBackground); if (quoteBackground) { - collector.addRule(`.monaco-workbench > .part.editor > .content .walkThroughContent blockquote { background: ${quoteBackground}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent blockquote { background: ${quoteBackground}; }`); } const quoteBorder = theme.getColor(textBlockQuoteBorder); if (quoteBorder) { - collector.addRule(`.monaco-workbench > .part.editor > .content .walkThroughContent blockquote { border-color: ${quoteBorder}; }`); + collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent blockquote { border-color: ${quoteBorder}; }`); } }); diff --git a/src/vs/workbench/services/editor/test/browser/editorService.test.ts b/src/vs/workbench/services/editor/test/browser/editorService.test.ts index 267af62dc3c..45cbfeb9953 100644 --- a/src/vs/workbench/services/editor/test/browser/editorService.test.ts +++ b/src/vs/workbench/services/editor/test/browser/editorService.test.ts @@ -15,7 +15,6 @@ import { TestThemeService } from 'vs/platform/theme/test/common/testThemeService import { EditorService, DelegatingEditorService } from 'vs/workbench/services/editor/browser/editorService'; import { IEditorGroup, IEditorGroupsService, GroupDirection } from 'vs/workbench/services/group/common/editorGroupsService'; import { EditorPart } from 'vs/workbench/browser/parts/editor/editorPart'; -import { Dimension } from 'vs/base/browser/dom'; import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection'; import { IEditorService, SIDE_GROUP } from 'vs/workbench/services/editor/common/editorService'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; @@ -79,7 +78,7 @@ suite('Editor service', () => { const part = partInstantiator.createInstance(EditorPart, 'id', false); part.create(document.createElement('div')); - part.layout(new Dimension(400, 300)); + part.layout(400, 300); const testInstantiationService = partInstantiator.createChild(new ServiceCollection([IEditorGroupsService, part])); @@ -152,7 +151,7 @@ suite('Editor service', () => { const part = partInstantiator.createInstance(EditorPart, 'id', false); part.create(document.createElement('div')); - part.layout(new Dimension(400, 300)); + part.layout(400, 300); const testInstantiationService = partInstantiator.createChild(new ServiceCollection([IEditorGroupsService, part])); @@ -293,7 +292,7 @@ suite('Editor service', () => { const part = partInstantiator.createInstance(EditorPart, 'id', false); part.create(document.createElement('div')); - part.layout(new Dimension(400, 300)); + part.layout(400, 300); const testInstantiationService = partInstantiator.createChild(new ServiceCollection([IEditorGroupsService, part])); @@ -332,7 +331,7 @@ suite('Editor service', () => { const part = partInstantiator.createInstance(EditorPart, 'id', false); part.create(document.createElement('div')); - part.layout(new Dimension(400, 300)); + part.layout(400, 300); const testInstantiationService = partInstantiator.createChild(new ServiceCollection([IEditorGroupsService, part])); @@ -366,7 +365,7 @@ suite('Editor service', () => { const part = partInstantiator.createInstance(EditorPart, 'id', false); part.create(document.createElement('div')); - part.layout(new Dimension(400, 300)); + part.layout(400, 300); const testInstantiationService = partInstantiator.createChild(new ServiceCollection([IEditorGroupsService, part])); @@ -576,7 +575,7 @@ suite('Editor service', () => { const part = partInstantiator.createInstance(EditorPart, 'id', false); part.create(document.createElement('div')); - part.layout(new Dimension(400, 300)); + part.layout(400, 300); const testInstantiationService = partInstantiator.createChild(new ServiceCollection([IEditorGroupsService, part])); diff --git a/src/vs/workbench/services/group/test/browser/editorGroupsService.test.ts b/src/vs/workbench/services/group/test/browser/editorGroupsService.test.ts index d9a1a1f8c33..806b62a5e55 100644 --- a/src/vs/workbench/services/group/test/browser/editorGroupsService.test.ts +++ b/src/vs/workbench/services/group/test/browser/editorGroupsService.test.ts @@ -7,7 +7,6 @@ import * as assert from 'assert'; import { EditorPart } from 'vs/workbench/browser/parts/editor/editorPart'; import { workbenchInstantiationService, TestStorageService } from 'vs/workbench/test/workbenchTestServices'; import { GroupDirection, GroupsOrder, MergeGroupMode, GroupOrientation, GroupChangeKind, EditorsOrder, GroupLocation } from 'vs/workbench/services/group/common/editorGroupsService'; -import { Dimension } from 'vs/base/browser/dom'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IEditorPartOptions } from 'vs/workbench/browser/parts/editor/editor'; import { EditorInput, IFileEditorInput, IEditorInputFactory, IEditorInputFactoryRegistry, Extensions as EditorExtensions, EditorOptions, CloseDirection } from 'vs/workbench/common/editor'; @@ -90,7 +89,7 @@ suite('Editor groups service', () => { const part = instantiationService.createInstance(EditorPart, 'id', false); part.create(document.createElement('div')); - part.layout(new Dimension(400, 300)); + part.layout(400, 300); return part; } diff --git a/src/vs/workbench/services/progress/browser/media/progressService2.css b/src/vs/workbench/services/progress/browser/media/progressService2.css index a841cb76c2f..850fdf2e3c5 100644 --- a/src/vs/workbench/services/progress/browser/media/progressService2.css +++ b/src/vs/workbench/services/progress/browser/media/progressService2.css @@ -3,11 +3,11 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-workbench > .part.statusbar > .statusbar-item.progress { +.monaco-workbench .part.statusbar > .statusbar-item.progress { padding-left: 5px; } -.monaco-workbench > .part.statusbar > .statusbar-item.progress .spinner-container { +.monaco-workbench .part.statusbar > .statusbar-item.progress .spinner-container { padding-right: 5px; }