grid - restore watermark and letterpress support

src/vs/editor/standalone/browser/standaloneThemeServiceImpl.ts

@@ -14,6 +14,7 @@ import { Extensions, IColorRegistry, ColorIdentifier } from 'vs/platform/theme/c
 import { Extensions as ThemingExtensions, IThemingRegistry, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { Event, Emitter } from 'vs/base/common/event';
+import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 
 const VS_THEME_NAME = 'vs';
 const VS_DARK_THEME_NAME = 'vs-dark';
@@ -119,7 +120,7 @@ export class StandaloneThemeServiceImpl implements IStandaloneThemeService {
 	private _styleElement: HTMLStyleElement;
 	private _theme: IStandaloneTheme;
 	private readonly _onThemeChange: Emitter<IStandaloneTheme>;
-
+	private environment: IEnvironmentService = Object.create(null);
 
 	constructor() {
 		this._onThemeChange = new Emitter<IStandaloneTheme>();
@@ -185,7 +186,7 @@ export class StandaloneThemeServiceImpl implements IStandaloneThemeService {
 				}
 			}
 		};
-		themingRegistry.getThemingParticipants().forEach(p => p(theme, ruleCollector));
+		themingRegistry.getThemingParticipants().forEach(p => p(theme, ruleCollector, this.environment));
 
 		let tokenTheme = theme.tokenTheme;
 		let colorMap = tokenTheme.getColorMap();

src/vs/platform/theme/common/themeService.ts

@@ -10,6 +10,7 @@ import { IDisposable } from 'vs/base/common/lifecycle';
 import * as platform from 'vs/platform/registry/common/platform';
 import { ColorIdentifier } from 'vs/platform/theme/common/colorRegistry';
 import { Event, Emitter } from 'vs/base/common/event';
+import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 
 export const IThemeService = createDecorator<IThemeService>('themeService');
 
@@ -66,7 +67,7 @@ export interface ICssStyleCollector {
 }
 
 export interface IThemingParticipant {
-	(theme: ITheme, collector: ICssStyleCollector): void;
+	(theme: ITheme, collector: ICssStyleCollector, environment: IEnvironmentService): void;
 }
 
 export interface IThemeService {

src/vs/workbench/browser/parts/editor/editorPart.ts

@@ -78,18 +78,6 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 
 	//#endregion
 
-	//#region TODO@grid watermark (do this from the outside? what about background color for empt root view?)
-
-	private initStyles(): void {
-
-		// Letterpress Background when Empty
-		createCSSRule('.vs .monaco-workbench > .part.editor.empty', `background-image: url('${join(this.environmentService.appRoot, 'resources/letterpress.svg')}')`);
-		createCSSRule('.vs-dark .monaco-workbench > .part.editor.empty', `background-image: url('${join(this.environmentService.appRoot, 'resources/letterpress-dark.svg')}')`);
-		createCSSRule('.hc-black .monaco-workbench > .part.editor.empty', `background-image: url('${join(this.environmentService.appRoot, 'resources/letterpress-hc.svg')}')`);
-	}
-
-	//#endregion
-
 	//#region TODO@grid closeEditors()
 
 	public closeEditors(positions?: Position[]): TPromise<void>;
@@ -750,6 +738,14 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 		this.registerListeners();
 	}
 
+	private initStyles(): void {
+
+		// Letterpress Background when Empty
+		createCSSRule('.vs .monaco-workbench > .part.editor.empty', `background-image: url('${join(this.environmentService.appRoot, 'resources/letterpress.svg')}')`);
+		createCSSRule('.vs-dark .monaco-workbench > .part.editor.empty', `background-image: url('${join(this.environmentService.appRoot, 'resources/letterpress-dark.svg')}')`);
+		createCSSRule('.hc-black .monaco-workbench > .part.editor.empty', `background-image: url('${join(this.environmentService.appRoot, 'resources/letterpress-hc.svg')}')`);
+	}
+
 	public hideTabs(forceHide: boolean): void {
 		this.forceHideTabs = forceHide;
 		const config = this.configurationService.getValue<IWorkbenchEditorConfiguration>();

src/vs/workbench/browser/parts/editor2/media/nextEditorGroupView.css

@@ -7,6 +7,16 @@
 	height: 100%;
 }
 
+.monaco-workbench > .part.editor > .content .editor-group-container.empty  {
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+	background-size: 15%;
+}
+
+.monaco-workbench > .part.editor > .content.empty .editor-group-container.empty  {
+	background-size: 260px 260px; /* larger for empty editor part */
+}
+
 .monaco-workbench > .part.editor > .content .editor-group-container.empty.active {
 	outline-width: 1px;
 	outline-style: solid;

src/vs/workbench/browser/parts/editor2/media/nextEditorpart.css

-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-/* Letter press styling for empty editor */
-.monaco-workbench > .part.editor.empty {
-	background-repeat: no-repeat;
-	background-position: 50% 50%;
-	background-size: 260px 260px;
-}

src/vs/workbench/browser/parts/editor2/nextEditorActions.ts

@@ -88,7 +88,7 @@ export class GridOpenOneEditorAction extends Action {
 	}
 
 	run(): TPromise<any> {
-		const path = join(process.cwd(), 'src/vs/workbench/browser/parts/editor2/editor2.contribution.ts');
+		const path = join(process.cwd(), 'src/vs/workbench/browser/parts/editor/editor.contribution.ts');
 		this.nextEditorGroupsService.activeGroup.openEditor(this.legacyEditorService.createInput({ resource: URI.file(path) }) as EditorInput);
 
 		return TPromise.as(void 0);

src/vs/workbench/browser/parts/editor2/nextEditorGroupView.ts

@@ -16,9 +16,9 @@ import { ServiceCollection } from 'vs/platform/instantiation/common/serviceColle
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
 import { attachProgressBarStyler } from 'vs/platform/theme/common/styler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { editorBackground, contrastBorder, focusBorder } from 'vs/platform/theme/common/colorRegistry';
-import { Themable, EDITOR_GROUP_HEADER_TABS_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND } from 'vs/workbench/common/theme';
+import { Themable, EDITOR_GROUP_HEADER_TABS_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND } from 'vs/workbench/common/theme';
 import { IMoveEditorOptions } from 'vs/workbench/services/editor/common/nextEditorGroupsService';
 import { NextTabsTitleControl } from 'vs/workbench/browser/parts/editor2/nextTabsTitleControl';
 import { NextEditorControl } from 'vs/workbench/browser/parts/editor2/nextEditorControl';
@@ -38,6 +38,8 @@ import { EventType as TouchEventType, GestureEvent } from 'vs/base/browser/touch
 import { NextTitleControl } from 'vs/workbench/browser/parts/editor2/nextTitleControl';
 import { INextEditorGroupsAccessor, INextEditorGroupView, INextEditorPartOptionsChangeEvent } from 'vs/workbench/browser/parts/editor2/editor2';
 import { NextNoTabsTitleControl } from './nextNoTabsTitleControl';
+import { IUntitledEditorService } from 'vs/workbench/services/untitled/common/untitledEditorService';
+import { join } from 'vs/base/common/paths';
 
 export class NextEditorGroupView extends Themable implements INextEditorGroupView {
 
@@ -106,7 +108,8 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
 		@IThemeService themeService: IThemeService,
 		@IPartService private partService: IPartService,
 		@INotificationService private notificationService: INotificationService,
-		@ITelemetryService private telemetryService: ITelemetryService
+		@ITelemetryService private telemetryService: ITelemetryService,
+		@IUntitledEditorService private untitledEditorService: IUntitledEditorService
 	) {
 		super(themeService);
 
@@ -284,6 +287,15 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
 		// Container
 		addClasses(this.element, 'editor-group-container');
 
+		// Open new file via doubleclick on container
+		this._register(addDisposableListener(this.element, EventType.DBLCLICK, e => {
+			if (e.target === this.element) {
+				EventHelper.stop(e);
+
+				this.openEditor(this.untitledEditorService.createOrGet(), EditorOptions.create({ pinned: true }));
+			}
+		}));
+
 		// Title container
 		this.titleContainer = document.createElement('div');
 		addClass(this.titleContainer, 'title');
@@ -803,7 +815,6 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
 	protected updateStyles(): void {
 
 		// Container
-		this.element.style.backgroundColor = this.getColor(EDITOR_GROUP_BACKGROUND);
 		this.element.style.outlineColor = this.getColor(focusBorder);
 
 		// Title control
@@ -868,4 +879,15 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
 
 		super.dispose();
 	}
-}
+}
\ No newline at end of file
+
+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 {
+			background-image: url('${join(environment.appRoot, letterpress)}')
+		}
+	`);
+});
\ No newline at end of file

src/vs/workbench/browser/parts/editor2/nextEditorPart.ts

@@ -5,25 +5,24 @@
 
 'use strict';
 
-import 'vs/css!./media/nextEditorpart';
 import 'vs/workbench/browser/parts/editor/editor.contribution';
 import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { Part } from 'vs/workbench/browser/part';
-import { Dimension, addClass, isAncestor } from 'vs/base/browser/dom';
+import { Dimension, isAncestor, toggleClass, addClass } from 'vs/base/browser/dom';
 import { Event, Emitter, once } from 'vs/base/common/event';
-import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
+import { contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
 import { INextEditorGroupsService, Direction, CopyKind } from 'vs/workbench/services/editor/common/nextEditorGroupsService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { Grid, Direction as GridViewDirection } from 'vs/base/browser/ui/grid/grid';
 import { GroupIdentifier, EditorOptions, TextEditorOptions, IWorkbenchEditorConfiguration } from 'vs/workbench/common/editor';
 import { values } from 'vs/base/common/map';
-import { EDITOR_GROUP_BORDER, EDITOR_GROUP_BACKGROUND } from 'vs/workbench/common/theme';
+import { EDITOR_GROUP_BORDER } from 'vs/workbench/common/theme';
 import { distinct } from 'vs/base/common/arrays';
 import { getCodeEditor } from 'vs/editor/browser/services/codeEditorService';
 import { INextEditorGroupsAccessor, INextEditorGroupView, INextEditorPartOptions, getEditorPartOptions, impactsEditorPartOptions, INextEditorPartOptionsChangeEvent } from 'vs/workbench/browser/parts/editor2/editor2';
 import { NextEditorGroupView } from 'vs/workbench/browser/parts/editor2/nextEditorGroupView';
 import { IConfigurationService, IConfigurationChangeEvent } from 'vs/platform/configuration/common/configuration';
-import { IDisposable } from 'vs/base/common/lifecycle';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { assign } from 'vs/base/common/objects';
 
 // TODO@grid provide DND support of groups/editors:
@@ -192,6 +191,9 @@ export class NextEditorPart extends Part implements INextEditorGroupsService, IN
 			newGroupView.openEditor(activeEditor, options);
 		}
 
+		// Update container
+		this.updateContainer();
+
 		return newGroupView;
 	}
 
@@ -222,6 +224,9 @@ export class NextEditorPart extends Part implements INextEditorGroupsService, IN
 		// Remove from grid widget & dispose
 		this.gridWidget.removeView(groupView);
 		groupView.dispose();
+
+		// Update container
+		this.updateContainer();
 	}
 
 	private toGridViewDirection(direction: Direction): GridViewDirection {
@@ -253,6 +258,13 @@ export class NextEditorPart extends Part implements INextEditorGroupsService, IN
 
 		// Set group active
 		this.doSetGroupActive(initialGroup);
+
+		// Update container
+		this.updateContainer();
+	}
+
+	private updateContainer(): void {
+		toggleClass(this.gridContainer, 'empty', this.groupViews.size === 1 && this.activeGroup.isEmpty());
 	}
 
 	private doSetGroupActive(group: INextEditorGroupView): void {
@@ -308,13 +320,19 @@ export class NextEditorPart extends Part implements INextEditorGroupsService, IN
 		this.groupViews.set(groupView.id, groupView);
 
 		// Track focus
-		const focusListener = groupView.onDidFocus(() => {
+		let groupDisposables: IDisposable[] = [];
+		groupDisposables.push(groupView.onDidFocus(() => {
 			this.doSetGroupActive(groupView);
-		});
+		}));
+
+		// Track editor change
+		groupDisposables.push(groupView.onDidActiveEditorChange(() => {
+			this.updateContainer();
+		}));
 
 		// Track dispose
 		once(groupView.onWillDispose)(() => {
-			focusListener.dispose();
+			groupDisposables = dispose(groupDisposables);
 			this.groupViews.delete(groupView.id);
 			this.doUpdateMostRecentActive(groupView);
 		});
@@ -335,7 +353,7 @@ export class NextEditorPart extends Part implements INextEditorGroupsService, IN
 
 		// Part container
 		const container = this.getContainer();
-		container.style.backgroundColor = this.getColor(EDITOR_GROUP_BACKGROUND);
+		container.style.backgroundColor = this.getColor(editorBackground);
 	}
 
 	createContentArea(parent: HTMLElement): HTMLElement {

src/vs/workbench/parts/watermark/electron-browser/watermark.css

@@ -3,15 +3,19 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-workbench .part.editor.empty.has-watermark {
+.monaco-workbench .part.editor.has-watermark > .content.empty .editor-group-container {
 	background-position-y: calc(50% - 100px);
 }
 
+.monaco-workbench .part.editor.max-height-478px > .content.empty .editor-group-container {
+	background-position-y: 50%;
+}
+
 .monaco-workbench > .part.editor > .content > .watermark {
 	display: none; /* only visible when no editors are opened */
 }
 
-.monaco-workbench > .part.editor.empty.has-watermark > .content > .watermark {
+.monaco-workbench > .part.editor.has-watermark > .content.empty > .watermark {
 	display: block;
 	position: absolute;
 	width: 100%;
@@ -21,72 +25,69 @@
 	overflow: hidden;
 }
 
-.monaco-workbench > .part.editor.empty > .content > .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.empty.max-height-478px > .content > .watermark {
+.monaco-workbench > .part.editor.max-height-478px > .content.empty > .watermark {
 	display: none;
 }
-.monaco-workbench .part.editor.empty.max-height-478px {
-	background-position-y: 50%;
-}
 
-.monaco-workbench > .part.editor.empty > .content > .watermark dl {
+.monaco-workbench > .part.editor > .content.empty > .watermark dl {
 	display: table-row;
 	opacity: .8;
 	cursor: default;
 }
 
-.monaco-workbench > .part.editor.empty > .content > .watermark dt {
+.monaco-workbench > .part.editor > .content.empty > .watermark dt {
 	text-align: right;
 	letter-spacing: 0.04em
 }
 
-.monaco-workbench > .part.editor.empty > .content > .watermark dd {
+.monaco-workbench > .part.editor > .content.empty > .watermark dd {
 	text-align: left;
 }
 
-.monaco-workbench > .part.editor.empty > .content > .watermark dd > .shortcuts {
+.monaco-workbench > .part.editor > .content.empty > .watermark dd > .shortcuts {
 	padding-left: 0.5em;
 	padding-right: 0.5em;
 }
 
-.monaco-workbench.mac > .part.editor.empty > .content > .watermark dd > .shortcuts {
+.monaco-workbench.mac > .part.editor > .content.empty > .watermark dd > .shortcuts {
 	letter-spacing: 0.15em;
 	font-family: "Lucida Grande", sans-serif;
 }
 
-.monaco-workbench > .part.editor.empty > .content > .watermark dd > .unbound {
+.monaco-workbench > .part.editor > .content.empty > .watermark dd > .unbound {
 	padding-left: 0.5em;
 	padding-right: 0.5em;
 }
 
-.monaco-workbench.mac > .part.editor.empty > .content > .watermark dd > .unbound {
+.monaco-workbench.mac > .part.editor > .content.empty > .watermark dd > .unbound {
 	font-family: "Lucida Grande", sans-serif;
 }
 
-.monaco-workbench > .part.editor.empty > .content > .watermark dt,
-.monaco-workbench > .part.editor.empty > .content > .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.empty > .content > .watermark dt,
-.monaco-workbench > .part.editor.empty > .content > .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.empty > .content > .watermark dt,
-.vs-dark .monaco-workbench > .part.editor.empty > .content > .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.empty > .content > .watermark dt {
+.hc-black .monaco-workbench > .part.editor > .content.empty > .watermark dt {
 	color: #FFF;
 }
-.hc-black .monaco-workbench > .part.editor.empty > .content > .watermark dl {
+.hc-black .monaco-workbench > .part.editor > .content.empty > .watermark dl {
 	color: #FFF;
 	opacity: 1;
 }

src/vs/workbench/services/themes/electron-browser/workbenchThemeService.ts

@@ -30,6 +30,7 @@ import { FileIconThemeStore } from 'vs/workbench/services/themes/electron-browse
 import { FileIconThemeData } from 'vs/workbench/services/themes/electron-browser/fileIconThemeData';
 import { IWindowService } from 'vs/platform/windows/common/windows';
 import { removeClasses, addClasses } from 'vs/base/browser/dom';
+import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 
 // implementation
 
@@ -97,7 +98,9 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
 		@IConfigurationService private configurationService: IConfigurationService,
 		@ITelemetryService private telemetryService: ITelemetryService,
 		@IWindowService private windowService: IWindowService,
-		@IInstantiationService private instantiationService: IInstantiationService) {
+		@IInstantiationService private instantiationService: IInstantiationService,
+		@IEnvironmentService private environmentService: IEnvironmentService
+	) {
 
 		this.container = container;
 		this.colorThemeStore = new ColorThemeStore(extensionService, ColorThemeData.createLoadedEmptyTheme(DEFAULT_THEME_ID, DEFAULT_THEME_SETTING_VALUE));
@@ -306,7 +309,7 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
 				}
 			}
 		};
-		themingRegistry.getThemingParticipants().forEach(p => p(themeData, ruleCollector));
+		themingRegistry.getThemingParticipants().forEach(p => p(themeData, ruleCollector, this.environmentService));
 		_applyRules(cssRules.join('\n'), colorThemeRulesClassName);
 	}