Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-08 17:19:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Workbench Grid Layout Behind flag (#63066)

Browse Source 
* partially functioning grid view

* lots of toggling behavior and editor restore

* dimension changes

* restore layout and fix titlebar

* fix view dimensions on toggle/move

* increase timeout for debug config

* undo unnecessary changes to CSS

* put grid layout behind setting

* fix strict null checks

* address code comments from @bpasero

* changing key name
This commit is contained in:
SteVen Batten
2019-01-23 14:16:37 -08:00
committed by GitHub
parent fc0002cb66
commit c45d91d9c1
44 changed files with 978 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/launch.json
Vendored
+2 -1
View File
@@ -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"
src/vs/base/browser/ui/grid/grid.ts
+1
View File
@@ -186,6 +186,7 @@ export interface IGridStyles extends IGridViewStyles { }
export interface IGridOptions {
styles?: IGridStyles;
proportionalLayout?: boolean;
}
export class Grid<T extends IView> implements IDisposable {
src/vs/workbench/browser/media/part.css
+15 -15
View File
@@ -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;
}
src/vs/workbench/browser/parts/activitybar/activitybarPart.ts
+32 -6
View File
@@ -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<IViewContainersRegistry>(ViewContainerExtensions.ViewContainersRegistry);
return viewContainerRegistry.get(viewletId);
}
toJSON(): object {
return {
type: Parts.ACTIVITYBAR_PART
};
}
}
src/vs/workbench/browser/parts/activitybar/media/activityaction.css
+10 -10
View File
@@ -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;
}
src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css
+4 -4
View File
@@ -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 */
}
src/vs/workbench/browser/parts/compositePart.ts
+7 -4
View File
@@ -464,10 +464,11 @@ export abstract class CompositePart<T extends Composite> 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<T extends Composite> extends Part {
this.activeComposite.layout(this.contentAreaSize);
}
return sizes;
if (dim1 instanceof Dimension) {
return sizes;
}
}
protected removeComposite(compositeId: string): boolean {
src/vs/workbench/browser/parts/editor/editorGroupView.ts
+4 -4
View File
@@ -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 */
}
`);
src/vs/workbench/browser/parts/editor/editorPart.ts
+25 -6
View File
@@ -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<T extends IView> 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<void>;
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
};
}
}
src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css
+5 -5
View File
@@ -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;
}
src/vs/workbench/browser/parts/editor/media/editorgroupview.css
+20 -20
View File
@@ -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%;
}
src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css
+15 -15
View File
@@ -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;
}
src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css
+69 -69
View File
@@ -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;
}
src/vs/workbench/browser/parts/editor/media/titlecontrol.css
+20 -20
View File
@@ -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;
}
src/vs/workbench/browser/parts/editor/tabsTitleControl.ts
+21 -21
View File
@@ -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);
}
`);
src/vs/workbench/browser/parts/media/compositepart.css
+3 -3
View File
@@ -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;
}
src/vs/workbench/browser/parts/panel/media/panelpart.css
+17 -17
View File
@@ -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');
}
src/vs/workbench/browser/parts/panel/panelPart.ts
+47 -17
View File
@@ -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<string>('activePanel', '');
export const PanelFocusContext = new RawContextKey<boolean>('panelFocus', false);
@@ -43,7 +44,7 @@ interface ICachedPanel {
visible: boolean;
}
export class PanelPart extends CompositePart<Panel> implements IPanelService {
export class PanelPart extends CompositePart<Panel> implements IPanelService, ISerializableView {
static readonly activePanelSettingsKey = 'workbench.panelpart.activepanelid';
@@ -59,6 +60,16 @@ export class PanelPart extends CompositePart<Panel> 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<Panel> 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<Panel> 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<Panel> 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;
}
`);
src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css
+2 -2
View File
@@ -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;
}
src/vs/workbench/browser/parts/sidebar/sidebarPart.ts
+34 -5
View File
@@ -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<boolean>('sideBarFocus', false);
export const ActiveViewletContext = new RawContextKey<string>('activeViewlet', '');
export class SidebarPart extends CompositePart<Viewlet> implements IViewletService {
export class SidebarPart extends CompositePart<Viewlet> implements ISerializableView, IViewletService {
_serviceBrand: any;
static readonly activeViewletSettingsKey = 'workbench.sidebar.activeviewletid';
@@ -45,6 +46,16 @@ export class SidebarPart extends CompositePart<Viewlet> implements IViewletServi
private blockOpeningViewlet: boolean;
private _onDidViewletDeregister = this._register(new Emitter<ViewletDescriptor>());
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<Viewlet> 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<Viewlet> 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<Viewlet> implements IViewletServi
}
}
}
toJSON(): object {
return {
type: Parts.SIDEBAR_PART
};
}
}
class FocusSideBarAction extends Action {
src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css
+15 -15
View File
@@ -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;
}
src/vs/workbench/browser/parts/statusbar/statusbarPart.ts
+41 -13
View File
@@ -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 = <HTMLElement>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<IStatusbarRegistry>(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}; }`);
}
});
src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css
+27 -27
View File
@@ -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;
}
src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
+56 -27
View File
@@ -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<MenuBarVisibility>('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};
}
`);
src/vs/workbench/electron-browser/main.contribution.ts
+6
View File
@@ -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
}
}
});
src/vs/workbench/electron-browser/media/workbench.css
+1 -1
View File
@@ -11,7 +11,7 @@
overflow: hidden;
}
.monaco-workbench > .part {
.monaco-workbench .part {
position: absolute;
box-sizing: border-box;
}
src/vs/workbench/electron-browser/workbench.ts
+333 -35
View File
@@ -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<WorkbenchView> | 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<boolean>;
private sideBarVisibleContext: IContextKey<boolean>;
@@ -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();
}
}
}
src/vs/workbench/parts/debug/browser/media/debug.contribution.css
+2 -2
View File
@@ -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;
}
src/vs/workbench/parts/debug/browser/media/debugViewlet.css
+5 -5
View File
@@ -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);
}
src/vs/workbench/parts/debug/browser/statusbarColorProvider.ts
+2 -2
View File
@@ -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; }`);
}
});
src/vs/workbench/parts/extensions/electron-browser/media/extensions.css
+1 -1
View File
@@ -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%;
}
src/vs/workbench/parts/feedback/electron-browser/feedbackStatusbarItem.ts
+1 -1
View File
@@ -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}; }`);
}
});
src/vs/workbench/parts/files/electron-browser/media/explorerviewlet.css
+1 -1
View File
@@ -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%;
}
src/vs/workbench/parts/relauncher/electron-browser/relauncher.contribution.ts
+8 -1
View File
@@ -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(
src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css
+1 -1
View File
@@ -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%;
}
src/vs/workbench/parts/search/electron-browser/media/search.contribution.css
+1 -1
View File
@@ -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%;
}
src/vs/workbench/parts/watermark/electron-browser/watermark.css
+15 -15
View File
@@ -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;
}
src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css
+46 -46
View File
@@ -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 {
src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts
+11 -11
View File
@@ -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}; }`);
}
});
src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css
+32 -32
View File
@@ -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;
}
src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts
+11 -11
View File
@@ -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}; }`);
}
});
src/vs/workbench/services/editor/test/browser/editorService.test.ts
+6 -7
View File
@@ -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]));
src/vs/workbench/services/group/test/browser/editorGroupsService.test.ts
+1 -2
View File
@@ -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;
}
src/vs/workbench/services/progress/browser/media/progressService2.css
+2 -2
View File
@@ -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;
}