Tweaks from notebook focus PR

4b132c33 · Rob Lourens · 08a17329 · 4b132c33 · 4b132c33
2 changed file
--- a/src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts
+++ b/src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts
@@ -66,7 +66,8 @@ const EXECUTE_CELL_INSERT_BELOW = 'notebook.cell.executeAndInsertBelow';
 const CLEAR_CELL_OUTPUTS_COMMAND_ID = 'notebook.cell.clearOutputs';
 const CHANGE_CELL_LANGUAGE = 'notebook.cell.changeLanguage';

-const FOCUS_OUTPUT_COMMAND_ID = 'notebook.cell.focusOutput';
+const FOCUS_IN_OUTPUT_COMMAND_ID = 'notebook.cell.focusInOutput';
+const FOCUS_OUT_OUTPUT_COMMAND_ID = 'notebook.cell.focusOutOutput';

 export const NOTEBOOK_ACTIONS_CATEGORY = localize('notebookActions.category', "Notebook");

@@ -1126,14 +1127,16 @@ registerAction2(class extends Action2 {
 registerAction2(class extends Action2 {
 	constructor() {
 		super({
-			id: FOCUS_OUTPUT_COMMAND_ID,
-			title: localize('focusOutput', 'Focus output'),
+			id: FOCUS_IN_OUTPUT_COMMAND_ID,
+			title: localize('focusOutput', 'Focus In Active Cell Output'),
 			category: NOTEBOOK_ACTIONS_CATEGORY,
 			keybinding: {
 				when: ContextKeyExpr.and(NOTEBOOK_EDITOR_FOCUSED),
 				primary: KeyMod.CtrlCmd | KeyCode.DownArrow,
-				weight: EDITOR_WIDGET_ACTION_WEIGHT
-			}
+				mac: { primary: KeyMod.WinCtrl | KeyCode.DownArrow, },
+				weight: KeybindingWeight.WorkbenchContrib
+			},
+			f1: true
 		});
 	}

@@ -1151,6 +1154,36 @@ registerAction2(class extends Action2 {
 	}
 });

+registerAction2(class extends Action2 {
+	constructor() {
+		super({
+			id: FOCUS_OUT_OUTPUT_COMMAND_ID,
+			title: localize('focusOutputOut', 'Focus Out Active Cell Output'),
+			category: NOTEBOOK_ACTIONS_CATEGORY,
+			keybinding: {
+				when: ContextKeyExpr.and(NOTEBOOK_EDITOR_FOCUSED),
+				primary: KeyMod.CtrlCmd | KeyCode.UpArrow,
+				mac: { primary: KeyMod.WinCtrl | KeyCode.UpArrow, },
+				weight: KeybindingWeight.WorkbenchContrib
+			},
+			f1: true
+		});
+	}
+
+	async run(accessor: ServicesAccessor, context?: INotebookCellActionContext): Promise<void> {
+		if (!isCellActionContext(context)) {
+			context = getActiveCellContext(accessor);
+			if (!context) {
+				return;
+			}
+		}
+
+		const editor = context.notebookEditor;
+		const activeCell = context.cell;
+		editor.focusNotebookCell(activeCell, 'editor');
+	}
+});
+

 registerAction2(class extends Action2 {
 	constructor() {

--- a/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
+++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
@@ -105,6 +105,14 @@ export interface IUpdatePreloadResourceMessage {
 	resources: string[];
 }

+function html(strings: TemplateStringsArray, ...values: any[]): string {
+	let str = '';
+	strings.forEach((string, i) => {
+		str += string + values[i];
+	});
+	return str;
+}
+
 type IMessage = IDimensionMessage | IScrollAckMessage | IWheelMessage | IMouseEnterMessage | IMouseLeaveMessage | IBlurOutputMessage;

 let version = 0;
@@ -120,8 +128,6 @@ export class BackLayerWebView extends Disposable {
 	private readonly _onMessage = this._register(new Emitter<any>());
 	public readonly onMessage: Event<any> = this._onMessage.event;
 	private _initalized: Promise<void>;
-	private activeCellId: string | undefined;
-

 	constructor(
 		public notebookEditor: INotebookEditor,
@@ -174,7 +180,7 @@ ${loaderJs}
 	}

 	generateContent(outputNodePadding: number, coreDependencies: string) {
-		return /* html */`
+		return html`
 		<html lang="en">
 			<head>
 				<meta charset="UTF-8">
@@ -290,6 +296,21 @@ ${loaderJs}
 		});
 	};

+	function createFocusSink(cellId, focusNext) {
+		const element = document.createElement('div');
+		element.tabIndex = 0;
+		element.addEventListener('focus', () => {
+			vscode.postMessage({
+				__vscode_notebook_message: true,
+				type: 'focus-editor',
+				id: cellId,
+				focusNext
+			});
+		});
+
+		return element;
+	}
+
 	window.addEventListener('wheel', handleWheel);

 	window.addEventListener('message', event => {
@@ -303,16 +324,8 @@ ${loaderJs}
 					if (!cellOutputContainer) {
 						const container = document.getElementById('container');

-						let upperWrapperElement = document.createElement('div');
-						upperWrapperElement.tabIndex = 0;
+						const upperWrapperElement = createFocusSink(outputId);
 						container.appendChild(upperWrapperElement);
-						upperWrapperElement.addEventListener('focus', () => {
-							vscode.postMessage({
-								__vscode_notebook_message: true,
-								type: 'focus-editor',
-								id: outputId,
-							});
-						});

 						let newElement = document.createElement('div');

@@ -337,31 +350,8 @@ ${loaderJs}
 							});
 						});

-						const handleKeyDown = (event) => {
-							if (event.defaultPrevented || !(event.key === 'ArrowUp' && event.ctrlKey)) {
-								return;
-							}
-
-							vscode.postMessage({
-								__vscode_notebook_message: true,
-								type: 'focus-editor',
-								id: outputId,
-							});
-						};
-
-						cellOutputContainer.addEventListener("keydown", handleKeyDown);
-
-						let lowerWrapperElement = document.createElement('div');
-						lowerWrapperElement.tabIndex = 0;
+						const lowerWrapperElement = createFocusSink(outputId, true);
 						container.appendChild(lowerWrapperElement);
-						lowerWrapperElement.addEventListener('focus', () => {
-							vscode.postMessage({
-								__vscode_notebook_message: true,
-								type: 'focus-editor',
-								id: outputId,
-								focusNext: true
-							});
-						});
 					}

 					let outputNode = document.createElement('div');
@@ -466,15 +456,6 @@ ${loaderJs}
 	initialize(content: string) {
 		this.webview = this._createInset(this.webviewService, content);
 		this.webview.mountTo(this.element);
-		this.webview.onDidFocus(() => {
-			if (this.activeCellId) {
-				this.webview.sendMessage({
-					type: 'focus-output',
-					id: this.activeCellId
-				});
-				this.activeCellId = undefined;
-			}
-		});

 		this._register(this.webview.onDidClickLink(link => {
 			this.openerService.open(link, { fromUserGesture: true });
@@ -679,8 +660,13 @@ ${loaderJs}
 	}

 	focusOutput(cellId: string) {
-		this.activeCellId = cellId;
 		this.webview.focus();
+		setTimeout(() => { // Need this, or focus decoration is not shown. No clue.
+			this.webview.sendMessage({
+				type: 'focus-output',
+				id: cellId
+			});
+		}, 50);
 	}

 	updateRendererPreloads(preloads: Set<number>) {