Add scroll actions (fixes #18922)

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

@@ -6,7 +6,8 @@
 
 import { localize } from 'vs/nls';
 import { WalkThroughInput } from 'vs/workbench/parts/walkThrough/node/walkThroughInput';
-import { WalkThroughPart } from 'vs/workbench/parts/walkThrough/electron-browser/walkThroughPart';
+import { WalkThroughPart, WALK_THROUGH_FOCUS } from 'vs/workbench/parts/walkThrough/electron-browser/walkThroughPart';
+import { WalkThroughArrowUpAction, WalkThroughArrowDownAction, WalkThroughPageUpAction, WalkThroughPageDownAction } from 'vs/workbench/parts/walkThrough/electron-browser/walkThroughActions';
 import { WalkThroughContentProvider, WalkThroughSnippetContentProvider } from 'vs/workbench/parts/walkThrough/node/walkThroughContentProvider';
 import { EditorWalkThroughAction } from 'vs/workbench/parts/walkThrough/electron-browser/editor/editorWalkThrough';
 import { Registry } from 'vs/platform/platform';
@@ -16,6 +17,9 @@ import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
 import { IWorkbenchActionRegistry, Extensions } from 'vs/workbench/common/actionRegistry';
 import { SyncActionDescriptor } from 'vs/platform/actions/common/actions';
 import { IWorkbenchContributionsRegistry, Extensions as WorkbenchExtensions } from 'vs/workbench/common/contributions';
+import { KeyCode } from 'vs/base/common/keyCodes';
+import { EditorContextKeys } from 'vs/editor/common/editorCommon';
+import { ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
 
 Registry.as<IEditorRegistry>(EditorExtensions.Editors)
 	.registerEditor(new EditorDescriptor(WalkThroughPart.ID,
@@ -34,3 +38,15 @@ Registry.as<IWorkbenchContributionsRegistry>(WorkbenchExtensions.Workbench)
 
 Registry.as<IWorkbenchContributionsRegistry>(WorkbenchExtensions.Workbench)
 	.registerWorkbenchContribution(WalkThroughSnippetContentProvider);
+
+Registry.as<IWorkbenchActionRegistry>(Extensions.WorkbenchActions)
+	.registerWorkbenchAction(new SyncActionDescriptor(WalkThroughArrowUpAction, WalkThroughArrowUpAction.ID, WalkThroughArrowUpAction.LABEL, { primary: KeyCode.UpArrow }, ContextKeyExpr.and(WALK_THROUGH_FOCUS, EditorContextKeys.TextFocus.toNegated())), 'Interactive Playground: Scroll Up (Line)', localize('interactivePlayground', "Interactive Playground"));
+
+Registry.as<IWorkbenchActionRegistry>(Extensions.WorkbenchActions)
+	.registerWorkbenchAction(new SyncActionDescriptor(WalkThroughArrowDownAction, WalkThroughArrowDownAction.ID, WalkThroughArrowDownAction.LABEL, { primary: KeyCode.DownArrow }, ContextKeyExpr.and(WALK_THROUGH_FOCUS, EditorContextKeys.TextFocus.toNegated())), 'Interactive Playground: Scroll Down (Line)', localize('interactivePlayground', "Interactive Playground"));
+
+Registry.as<IWorkbenchActionRegistry>(Extensions.WorkbenchActions)
+	.registerWorkbenchAction(new SyncActionDescriptor(WalkThroughPageUpAction, WalkThroughPageUpAction.ID, WalkThroughPageUpAction.LABEL, { primary: KeyCode.PageUp }, ContextKeyExpr.and(WALK_THROUGH_FOCUS, EditorContextKeys.TextFocus.toNegated())), 'Interactive Playground: Scroll Up (Page)', localize('interactivePlayground', "Interactive Playground"));
+
+Registry.as<IWorkbenchActionRegistry>(Extensions.WorkbenchActions)
+	.registerWorkbenchAction(new SyncActionDescriptor(WalkThroughPageDownAction, WalkThroughPageDownAction.ID, WalkThroughPageDownAction.LABEL, { primary: KeyCode.PageDown }, ContextKeyExpr.and(WALK_THROUGH_FOCUS, EditorContextKeys.TextFocus.toNegated())), 'Interactive Playground: Scroll Down (Page)', localize('interactivePlayground', "Interactive Playground"));

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

+/*---------------------------------------------------------------------------------------------
+ *  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 { Action } from 'vs/base/common/actions';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { WalkThroughPart } from 'vs/workbench/parts/walkThrough/electron-browser/walkThroughPart';
+
+export class WalkThroughArrowUpAction extends Action {
+
+	public static ID = 'workbench.action.interactivePlayground.arrowUp';
+	public static LABEL = localize('editorWalkThrough.arrowUp', "Scroll Up (Line)");
+
+	constructor(
+		id: string,
+		label: string,
+		@IWorkbenchEditorService private editorService: IWorkbenchEditorService
+	) {
+		super(id, label);
+	}
+
+	public run(): TPromise<void> {
+		const editor = this.editorService.getActiveEditor();
+		if (editor instanceof WalkThroughPart) {
+			editor.arrowUp();
+		}
+		return null;
+	}
+}
+
+export class WalkThroughArrowDownAction extends Action {
+
+	public static ID = 'workbench.action.interactivePlayground.arrowDown';
+	public static LABEL = localize('editorWalkThrough.arrowDown', "Scroll Down (Line)");
+
+	constructor(
+		id: string,
+		label: string,
+		@IWorkbenchEditorService private editorService: IWorkbenchEditorService
+	) {
+		super(id, label);
+	}
+
+	public run(): TPromise<void> {
+		const editor = this.editorService.getActiveEditor();
+		if (editor instanceof WalkThroughPart) {
+			editor.arrowDown();
+		}
+		return null;
+	}
+}
+
+export class WalkThroughPageUpAction extends Action {
+
+	public static ID = 'workbench.action.interactivePlayground.pageUp';
+	public static LABEL = localize('editorWalkThrough.pageUp', "Scroll Up (Page)");
+
+	constructor(
+		id: string,
+		label: string,
+		@IWorkbenchEditorService private editorService: IWorkbenchEditorService
+	) {
+		super(id, label);
+	}
+
+	public run(): TPromise<void> {
+		const editor = this.editorService.getActiveEditor();
+		if (editor instanceof WalkThroughPart) {
+			editor.pageUp();
+		}
+		return null;
+	}
+}
+
+export class WalkThroughPageDownAction extends Action {
+
+	public static ID = 'workbench.action.interactivePlayground.pageDown';
+	public static LABEL = localize('editorWalkThrough.pageDown', "Scroll Down (Page)");
+
+	constructor(
+		id: string,
+		label: string,
+		@IWorkbenchEditorService private editorService: IWorkbenchEditorService
+	) {
+		super(id, label);
+	}
+
+	public run(): TPromise<void> {
+		const editor = this.editorService.getActiveEditor();
+		if (editor instanceof WalkThroughPart) {
+			editor.pageDown();
+		}
+		return null;
+	}
+}
\ No newline at end of file

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

@@ -31,6 +31,10 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { localize } from 'vs/nls';
 import { IStorageService } from 'vs/platform/storage/common/storage';
 import { Scope } from 'vs/workbench/common/memento';
+import { RawContextKey, IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+
+export const WALK_THROUGH_FOCUS = new RawContextKey<boolean>('interactivePlaygroundFocus', false);
 
 const UNBOUND_COMMAND = localize('walkThrough.unboundCommand', "unbound");
 const WALK_THROUGH_EDITOR_VIEW_STATE_PREFERENCE_KEY = 'walkThroughEditorViewState';
@@ -58,6 +62,7 @@ export class WalkThroughPart extends BaseEditor {
 	private contentDisposables: IDisposable[] = [];
 	private content: HTMLDivElement;
 	private scrollbar: DomScrollableElement;
+	private editorFocus: IContextKey<boolean>;
 
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -68,9 +73,12 @@ export class WalkThroughPart extends BaseEditor {
 		@IModelService protected modelService: IModelService,
 		@IKeybindingService private keybindingService: IKeybindingService,
 		@IStorageService private storageService: IStorageService,
+		@IContextKeyService private contextKeyService: IContextKeyService,
+		@IConfigurationService private configurationService: IConfigurationService,
 		@IModeService private modeService: IModeService
 	) {
 		super(WalkThroughPart.ID, telemetryService);
+		this.editorFocus = WALK_THROUGH_FOCUS.bindTo(this.contextKeyService);
 	}
 
 	createEditor(parent: Builder): void {
@@ -82,6 +90,12 @@ export class WalkThroughPart extends BaseEditor {
 		this.content.addEventListener('mousedown', e => {
 			this.focus();
 		});
+		this.content.addEventListener('focus', e => {
+			this.editorFocus.set(true);
+		});
+		this.content.addEventListener('blur', e => {
+			this.editorFocus.reset();
+		});
 
 		this.scrollbar = new DomScrollableElement(this.content, {
 			canUseTranslate3d: false,
@@ -171,6 +185,31 @@ export class WalkThroughPart extends BaseEditor {
 		if (!active) {
 			this.content.focus();
 		}
+		this.editorFocus.set(true);
+	}
+
+	arrowUp() {
+		this.scrollbar.updateState({ scrollTop: this.scrollbar.getScrollTop() - this.getArrowScrollHeight() });
+	}
+
+	arrowDown() {
+		this.scrollbar.updateState({ scrollTop: this.scrollbar.getScrollTop() + this.getArrowScrollHeight() });
+	}
+
+	private getArrowScrollHeight() {
+		let fontSize = this.configurationService.lookup<number>('editor.fontSize').value;
+		if (typeof fontSize !== 'number' || fontSize < 1) {
+			fontSize = 12;
+		}
+		return 3 * fontSize;
+	}
+
+	pageUp() {
+		this.scrollbar.updateState({ scrollTop: this.scrollbar.getScrollTop() - this.scrollbar.getHeight() });
+	}
+
+	pageDown() {
+		this.scrollbar.updateState({ scrollTop: this.scrollbar.getScrollTop() + this.scrollbar.getHeight() });
 	}
 
 	setInput(input: WalkThroughInput, options: EditorOptions): TPromise<void> {
@@ -246,9 +285,9 @@ export class WalkThroughPart extends BaseEditor {
 
 					this.contentDisposables.push(this.themeService.onDidColorThemeChange(theme => editor.updateOptions({ theme: theme.id })));
 
-					if (i === 0) {
-						editor.focus();
-					}
+					// if (i === 0) {
+					// 	editor.focus();
+					// }
 				});
 				if (input.onReady) {
 					input.onReady(innerContent);
@@ -340,6 +379,7 @@ export class WalkThroughPart extends BaseEditor {
 	}
 
 	dispose(): void {
+		this.editorFocus.reset();
 		this.contentDisposables = dispose(this.contentDisposables);
 		this.disposables = dispose(this.disposables);
 		super.dispose();