Walk-Through Editor

src/vs/workbench/electron-browser/workbench.main.ts

@@ -61,6 +61,8 @@ import 'vs/workbench/parts/markers/browser/markersPanel'; // can be packaged sep
 
 import 'vs/workbench/parts/html/browser/html.contribution';
 
+import 'vs/workbench/parts/walkThrough/electron-browser/walkThrough.contribution';
+
 import 'vs/workbench/parts/extensions/electron-browser/extensions.contribution';
 import 'vs/workbench/parts/extensions/browser/extensionsQuickOpen';
 import 'vs/workbench/parts/extensions/electron-browser/extensionsViewlet'; // can be packaged separately

src/vs/workbench/parts/walkThrough/common/walkThroughInput.ts

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import URI from 'vs/base/common/uri';
+import { ResourceEditorInput } from 'vs/workbench/common/editor/resourceEditorInput';
+import { ITextModelResolverService } from 'vs/editor/common/services/resolverService';
+
+export class WalkThroughInput extends ResourceEditorInput {
+
+	// just a marker class
+	constructor(
+		name: string,
+		description: string,
+		resource: URI,
+		public readonly onReady: (container: HTMLElement) => void,
+		@ITextModelResolverService textModelResolverService: ITextModelResolverService
+	) {
+		super(name, description, resource, textModelResolverService);
+	}
+
+	getResource(): URI {
+		return this.resource;
+	}
+}

src/vs/workbench/parts/walkThrough/electron-browser/editor/editorWalkThrough.md

@@ -0,0 +1,31 @@
+### Multi-Cursor Editing
+
+Use <span class="shortcut mac-only">⇧⌥</span><span class="shortcut windows-only linux-only">Shift+Alt</span> while selecting text with the mouse to select a rectangular area and change multiple lines at once.
+
+```css
+.global-message-list.transition {
+    -webkit-transition: top 200ms linear;
+    -ms-transition:     top 200ms linear;
+    -moz-transition:    top 200ms linear;
+    -khtml-transition:  top 200ms linear;
+    -o-transition:      top 200ms linear;
+    transition:         top 200ms linear;
+}
+```
+
+### IntelliSense
+
+Visual Studio Code comes with powerful IntelliSense for JavaScript and TypeScript preinstalled. Other languages can be upgraded with better IntelliSense through one of the many [extensions](command:workbench.extensions.action.showPopularExtensions).
+
+In the below example, position the text cursor in front of the error underline, right after the dot and press <span class="shortcut" data-command="editor.action.triggerSuggest"></span> to invoke IntelliSense.
+
+```js
+var express = require('express');
+var app = express();
+
+app.get('/', function (req, res) {
+    res.send(`Hello ${req.}`);
+});
+
+app.listen(3000);
+```

src/vs/workbench/parts/walkThrough/electron-browser/editor/editorWalkThrough.ts

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { localize } from 'vs/nls';
+import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService';
+import { Position } from 'vs/platform/editor/common/editor';
+import { Action } from 'vs/base/common/actions';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { TPromise } from 'vs/base/common/winjs.base';
+import URI from 'vs/base/common/uri';
+import { WalkThroughInput } from 'vs/workbench/parts/walkThrough/common/walkThroughInput';
+
+export class EditorWalkThroughAction extends Action {
+
+	public static ID = 'workbench.action.editorWalkThrough';
+	public static LABEL = localize('editorWalkThrough', "Editor Walk-Through");
+
+	constructor(
+		id: string,
+		label: string,
+		@IWorkbenchEditorService private editorService: IWorkbenchEditorService,
+		@IInstantiationService private instantiationService: IInstantiationService
+	) {
+		super(id, label);
+	}
+
+	public run(): TPromise<void> {
+		const uri = URI.parse(require.toUrl('./editorWalkThrough.md'));
+		const input = this.instantiationService.createInstance(WalkThroughInput, localize('editorWalkThrough.title', "Editor Walk-Through"), '', uri, null);
+		return this.editorService.openEditor(input, { pinned: true }, Position.ONE)
+			.then(() => void (0));
+	}
+}

src/vs/workbench/parts/walkThrough/electron-browser/walkThrough.contribution.ts

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { localize } from 'vs/nls';
+import { WalkThroughInput } from 'vs/workbench/parts/walkThrough/common/walkThroughInput';
+import { WalkThroughPart } from 'vs/workbench/parts/walkThrough/electron-browser/walkThroughPart';
+import { EditorWalkThroughAction } from 'vs/workbench/parts/walkThrough/electron-browser/editor/editorWalkThrough';
+import { Registry } from 'vs/platform/platform';
+import { EditorDescriptor } from 'vs/workbench/browser/parts/editor/baseEditor';
+import { IEditorRegistry, Extensions as EditorExtensions } from 'vs/workbench/common/editor';
+import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
+import { IWorkbenchActionRegistry, Extensions } from 'vs/workbench/common/actionRegistry';
+import { SyncActionDescriptor } from 'vs/platform/actions/common/actions';
+
+(<IEditorRegistry>Registry.as(EditorExtensions.Editors)).registerEditor(new EditorDescriptor(WalkThroughPart.ID,
+	localize('walkThrough.editor.label', "Walk-Through"),
+	'vs/workbench/parts/walkThrough/electron-browser/walkThroughPart',
+	'WalkThroughPart'),
+	[new SyncDescriptor(WalkThroughInput)]);
+
+Registry.as<IWorkbenchActionRegistry>(Extensions.WorkbenchActions)
+	.registerWorkbenchAction(new SyncActionDescriptor(EditorWalkThroughAction, EditorWalkThroughAction.ID, EditorWalkThroughAction.LABEL), 'Help: Editor Walk-Through', localize('help', "Help"));

src/vs/workbench/parts/walkThrough/electron-browser/walkThroughPart.css

@@ -0,0 +1,126 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent {
+	box-sizing: border-box;
+	padding: 10px 20px;
+	line-height: 22px;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent a {
+	color: #4080D0;
+	text-decoration: none;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent a:focus,
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent input:focus,
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent select:focus,
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent textarea:focus {
+	outline: 1px solid -webkit-focus-ring-color;
+	outline-offset: -1px;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent hr {
+	border: 0;
+	height: 2px;
+	border-bottom: 2px solid;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent h1 {
+	padding-bottom: 0.3em;
+	line-height: 1.2;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent h1, h2, h3 {
+	font-weight: normal;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent a:hover {
+	color: #4080D0;
+	text-decoration: underline;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent table {
+	border-collapse: collapse;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent table > thead > tr > th {
+	text-align: left;
+	border-bottom: 1px solid;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent table > thead > tr > th,
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent table > thead > tr > td,
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent table > tbody > tr > th,
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent table > tbody > tr > td {
+	padding: 5px 10px;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent table > tbody > tr + tr > td {
+	border-top: 1px solid;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent blockquote {
+	margin: 0 7px 0 5px;
+	padding: 0 16px 0 10px;
+	border-left: 5px solid;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent code {
+	font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
+	font-size: 14px;
+	line-height: 19px;
+}
+
+.monaco-workbench.mac > .part.editor > .content .walkThroughContainer .walkThroughContent  code {
+	font-size: 12px;
+	line-height: 18px;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent code > div {
+	padding: 16px;
+	border-radius: 3px;
+	overflow: auto;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent .monaco-tokenized-source {
+	white-space: pre;
+}
+
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent .mac-only,
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent .windows-only,
+.monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent .linux-only {
+	display: none;
+}
+.monaco-workbench.mac > .part.editor > .content .walkThroughContainer .walkThroughContent .mac-only {
+	display: initial;
+}
+.monaco-workbench.windows > .part.editor > .content .walkThroughContainer .walkThroughContent .windows-only {
+	display: initial;
+}
+.monaco-workbench.linux > .part.editor > .content .walkThroughContainer .walkThroughContent .linux-only {
+	display: initial;
+}
+
+.vs .monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent .monaco-editor-background,
+.vs .monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent .glyph-margin {
+	background-color: #eee;
+}
+
+.vs-dark .monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent .monaco-editor-background,
+.vs-dark .monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent .glyph-margin {
+	background-color: #111;
+}
+
+.hc-black .monaco-workbench > .part.editor > .content .walkThroughContainer .walkThroughContent .monaco-editor {
+	border: 1px white solid
+}