initial stickyScroll support for notebooks (microsoft#188323)

* stickyscrool wip. dom node + filler static content

* headers rendering. todo: too early, multiple headers

* css file movement + outline rework

* kernel css move

* pop-in fixed // css cleaned // setting added

* fix override

* low hanging fixes

* refactor to remove unnecessary layer

* section transition logic cleanup + other misc fixes

* whoops changed a little too much. todo: linesToRender thinking

* finalized logic

* nits

* def false

* Update zindex

* Fix font size

---------

Co-authored-by: Peng Lyu <[email protected]>

Author: Yoyokrazy

build/lib/stylelint/vscode-known-variables.json

@@ -755,6 +755,7 @@
 		"--z-index-notebook-progress-bar",
 		"--z-index-notebook-scrollbar",
 		"--z-index-run-button-container",
+		"--z-index-notebook-sticky-scroll",
 		"--zoom-factor"
 	]
 }

src/vs/workbench/contrib/interactive/browser/interactiveEditor.ts

@@ -159,7 +159,7 @@ export class InteractiveEditor extends EditorPane {
 				this._editorOptions = this._computeEditorOptions();
 			}
 		}));
-		this._notebookOptions = new NotebookOptions(configurationService, notebookExecutionStateService, true, { cellToolbarInteraction: 'hover', globalToolbar: true, dragAndDropEnabled: false });
+		this._notebookOptions = new NotebookOptions(configurationService, notebookExecutionStateService, true, { cellToolbarInteraction: 'hover', globalToolbar: true, stickyScroll: false, dragAndDropEnabled: false });
 		this._editorMemento = this.getEditorMemento<InteractiveEditorViewState>(editorGroupService, textResourceConfigurationService, INTERACTIVE_EDITOR_VIEW_STATE_PREFERENCE_KEY);
 
 		codeEditorService.registerDecorationType('interactive-decoration', DECORATION_KEY, {});

src/vs/workbench/contrib/notebook/browser/contrib/outline/notebookOutline.ts

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-workbench .notebookOverlay .notebook-sticky-scroll-container {
+	display: none;
+	position: absolute;
+	background-color: var(--vscode-notebook-editorBackground);
+	border-bottom: solid 1px var(--vscode-notebook-cellToolbarSeparator);
+	box-sizing: border-box;
+	z-index: var(--z-index-notebook-sticky-scroll);
+	width: 100%;
+	padding-left: 12px;
+	font-family: var(--notebook-cell-input-preview-font-family);
+}

src/vs/workbench/contrib/notebook/browser/media/notebookEditorStickyScroll.css

@@ -862,6 +862,12 @@ configurationRegistry.registerConfiguration({
 			default: true,
 			tags: ['notebookLayout']
 		},
+		[NotebookSetting.stickyScroll]: {
+			description: nls.localize('notebook.stickyScroll.description', "Experimental. Control whether to render notebook Sticky Scroll headers in the notebook editor."),
+			type: 'boolean',
+			default: false,
+			tags: ['notebookLayout']
+		},
 		[NotebookSetting.consolidatedOutputButton]: {
 			description: nls.localize('notebook.consolidatedOutputButton.description', "Control whether outputs action should be rendered in the output toolbar."),
 			type: 'boolean',

src/vs/workbench/contrib/notebook/browser/viewParts/notebookKernelActionViewItem.css renamed to src/vs/workbench/contrib/notebook/browser/media/notebookKernelActionViewItem.css

@@ -12,6 +12,10 @@ import 'vs/css!./media/notebookToolbar';
 import 'vs/css!./media/notebookDnd';
 import 'vs/css!./media/notebookFolding';
 import 'vs/css!./media/notebookCellOutput';
+import 'vs/css!./media/notebookEditorStickyScroll';
+import 'vs/css!./media/notebookKernelActionViewItem';
+import 'vs/css!./media/notebookOutline';
+
 import { PixelRatio } from 'vs/base/browser/browser';
 import * as DOM from 'vs/base/browser/dom';
 import { IMouseWheelEvent, StandardMouseEvent } from 'vs/base/browser/mouseEvent';
@@ -90,8 +94,11 @@ import { INotebookLoggingService } from 'vs/workbench/contrib/notebook/common/no
 import { Schemas } from 'vs/base/common/network';
 import { DropIntoEditorController } from 'vs/editor/contrib/dropOrPasteInto/browser/dropIntoEditorController';
 import { CopyPasteController } from 'vs/editor/contrib/dropOrPasteInto/browser/copyPasteController';
+import { NotebookEditorStickyScroll } from 'vs/workbench/contrib/notebook/browser/viewParts/notebookEditorStickyScroll';
+import { NotebookCellOutlineProvider } from 'vs/workbench/contrib/notebook/browser/viewModel/notebookOutlineProvider';
 import { AccessibilityVerbositySettingId } from 'vs/workbench/contrib/accessibility/browser/accessibilityContribution';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { OutlineTarget } from 'vs/workbench/services/outline/browser/outline';
 
 const $ = DOM.$;
 
@@ -171,6 +178,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 	private _overlayContainer!: HTMLElement;
 	private _notebookTopToolbarContainer!: HTMLElement;
 	private _notebookTopToolbar!: NotebookEditorWorkbenchToolbar;
+	private _notebookStickyScrollContainer!: HTMLElement;
 	private _notebookOverviewRulerContainer!: HTMLElement;
 	private _notebookOverviewRuler!: NotebookOverviewRuler;
 	private _body!: HTMLElement;
@@ -261,6 +269,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 	public readonly scopedContextKeyService: IContextKeyService;
 	private readonly instantiationService: IInstantiationService;
 	private readonly _notebookOptions: NotebookOptions;
+	public readonly _notebookOutline: NotebookCellOutlineProvider;
 
 	private _currentProgress: IProgressRunner | undefined;
 
@@ -315,6 +324,8 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 
 		this._register(this.instantiationService.createInstance(NotebookEditorContextKeys, this));
 
+		this._notebookOutline = this.instantiationService.createInstance(NotebookCellOutlineProvider, this, OutlineTarget.QuickPick);
+
 		this._register(notebookKernelService.onDidChangeSelectedNotebooks(e => {
 			if (isEqual(e.notebook, this.viewModel?.uri)) {
 				this._loadKernelPreloads();
@@ -565,6 +576,11 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 		this._notebookTopToolbarContainer.classList.add('notebook-toolbar-container');
 		this._notebookTopToolbarContainer.style.display = 'none';
 		DOM.append(parent, this._notebookTopToolbarContainer);
+
+		this._notebookStickyScrollContainer = document.createElement('div');
+		this._notebookStickyScrollContainer.classList.add('notebook-sticky-scroll-container');
+		DOM.append(parent, this._notebookStickyScrollContainer);
+
 		this._body = document.createElement('div');
 		DOM.append(parent, this._body);
 
@@ -999,6 +1015,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 		}));
 
 		this._registerNotebookActionsToolbar();
+		this._registerNotebookStickyScroll();
 
 		this._register(this.configurationService.onDidChangeConfiguration(e => {
 			if (e.affectsConfiguration(AccessibilityVerbositySettingId.Notebook)) {
@@ -1028,6 +1045,10 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 		}));
 	}
 
+	private _registerNotebookStickyScroll() {
+		this._register(this.instantiationService.createInstance(NotebookEditorStickyScroll, this._notebookStickyScrollContainer, this, this._notebookOutline, this._list));
+	}
+
 	private _updateOutputRenderers() {
 		if (!this.viewModel || !this._webview) {
 			return;
@@ -3089,6 +3110,7 @@ registerZIndex(ZIndex.Base, 28, 'notebook-cell-bottom-toolbar-container');
 registerZIndex(ZIndex.Base, 29, 'notebook-run-button-container');
 registerZIndex(ZIndex.Base, 29, 'notebook-input-collapse-condicon');
 registerZIndex(ZIndex.Base, 30, 'notebook-cell-output-toolbar');
+registerZIndex(ZIndex.Base, 31, 'notebook-sticky-scroll');
 registerZIndex(ZIndex.Sash, 1, 'notebook-cell-expand-part-button');
 registerZIndex(ZIndex.Sash, 2, 'notebook-cell-toolbar');
 registerZIndex(ZIndex.Sash, 3, 'notebook-cell-toolbar-dropdown-active');

src/vs/workbench/contrib/notebook/browser/contrib/outline/notebookOutline.css renamed to src/vs/workbench/contrib/notebook/browser/media/notebookOutline.css

@@ -61,6 +61,7 @@ export interface NotebookLayoutConfiguration {
 	insertToolbarPosition: 'betweenCells' | 'notebookToolbar' | 'both' | 'hidden';
 	insertToolbarAlignment: 'left' | 'center';
 	globalToolbar: boolean;
+	stickyScroll: boolean;
 	consolidatedOutputButton: boolean;
 	consolidatedRunButton: boolean;
 	showFoldingControls: 'always' | 'never' | 'mouseover';
@@ -89,6 +90,7 @@ export interface NotebookOptionsChangeEvent {
 	readonly insertToolbarPosition?: boolean;
 	readonly insertToolbarAlignment?: boolean;
 	readonly globalToolbar?: boolean;
+	readonly stickyScroll?: boolean;
 	readonly showFoldingControls?: boolean;
 	readonly consolidatedOutputButton?: boolean;
 	readonly consolidatedRunButton?: boolean;
@@ -134,11 +136,12 @@ export class NotebookOptions extends Disposable {
 		private readonly configurationService: IConfigurationService,
 		private readonly notebookExecutionStateService: INotebookExecutionStateService,
 		private isReadonly: boolean,
-		private readonly overrides?: { cellToolbarInteraction: string; globalToolbar: boolean; dragAndDropEnabled: boolean }
+		private readonly overrides?: { cellToolbarInteraction: string; globalToolbar: boolean; stickyScroll: boolean; dragAndDropEnabled: boolean }
 	) {
 		super();
 		const showCellStatusBar = this.configurationService.getValue<ShowCellStatusBarType>(NotebookSetting.showCellStatusBar);
 		const globalToolbar = overrides?.globalToolbar ?? this.configurationService.getValue<boolean | undefined>(NotebookSetting.globalToolbar) ?? true;
+		const stickyScroll = overrides?.stickyScroll ?? this.configurationService.getValue<boolean | undefined>(NotebookSetting.stickyScroll) ?? false;
 		const consolidatedOutputButton = this.configurationService.getValue<boolean | undefined>(NotebookSetting.consolidatedOutputButton) ?? true;
 		const consolidatedRunButton = this.configurationService.getValue<boolean | undefined>(NotebookSetting.consolidatedRunButton) ?? false;
 		const dragAndDropEnabled = overrides?.dragAndDropEnabled ?? this.configurationService.getValue<boolean | undefined>(NotebookSetting.dragAndDropEnabled) ?? true;
@@ -213,6 +216,7 @@ export class NotebookOptions extends Disposable {
 			collapsedIndicatorHeight: 28,
 			showCellStatusBar,
 			globalToolbar,
+			stickyScroll,
 			consolidatedOutputButton,
 			consolidatedRunButton,
 			dragAndDropEnabled,
@@ -335,6 +339,7 @@ export class NotebookOptions extends Disposable {
 		const insertToolbarPosition = e.affectsConfiguration(NotebookSetting.insertToolbarLocation);
 		const insertToolbarAlignment = e.affectsConfiguration(NotebookSetting.experimentalInsertToolbarAlignment);
 		const globalToolbar = e.affectsConfiguration(NotebookSetting.globalToolbar);
+		const stickyScroll = e.affectsConfiguration(NotebookSetting.stickyScroll);
 		const consolidatedOutputButton = e.affectsConfiguration(NotebookSetting.consolidatedOutputButton);
 		const consolidatedRunButton = e.affectsConfiguration(NotebookSetting.consolidatedRunButton);
 		const showFoldingControls = e.affectsConfiguration(NotebookSetting.showFoldingControls);
@@ -359,6 +364,7 @@ export class NotebookOptions extends Disposable {
 			&& !insertToolbarPosition
 			&& !insertToolbarAlignment
 			&& !globalToolbar
+			&& !stickyScroll
 			&& !consolidatedOutputButton
 			&& !consolidatedRunButton
 			&& !showFoldingControls
@@ -414,6 +420,10 @@ export class NotebookOptions extends Disposable {
 			configuration.globalToolbar = this.configurationService.getValue<boolean>(NotebookSetting.globalToolbar) ?? true;
 		}
 
+		if (stickyScroll && this.overrides?.stickyScroll === undefined) {
+			configuration.stickyScroll = this.configurationService.getValue<boolean>(NotebookSetting.stickyScroll) ?? false;
+		}
+
 		if (consolidatedOutputButton) {
 			configuration.consolidatedOutputButton = this.configurationService.getValue<boolean>(NotebookSetting.consolidatedOutputButton) ?? true;
 		}
@@ -479,6 +489,7 @@ export class NotebookOptions extends Disposable {
 			insertToolbarPosition,
 			insertToolbarAlignment,
 			globalToolbar,
+			stickyScroll,
 			showFoldingControls,
 			consolidatedOutputButton,
 			consolidatedRunButton,

src/vs/workbench/contrib/notebook/browser/notebook.contribution.ts

@@ -686,6 +686,26 @@ export class NotebookCellList extends WorkbenchList<CellViewModel> implements ID
 		this.setSelection(indices);
 	}
 
+	getCellViewScrollTop(cell: ICellViewModel) {
+		const index = this._getViewIndexUpperBound(cell);
+		if (index === undefined || index < 0 || index >= this.length) {
+			throw new ListError(this.listUser, `Invalid index ${index}`);
+		}
+
+		return this.view.elementTop(index);
+	}
+
+	getCellViewScrollBottom(cell: ICellViewModel) {
+		const index = this._getViewIndexUpperBound(cell);
+		if (index === undefined || index < 0 || index >= this.length) {
+			throw new ListError(this.listUser, `Invalid index ${index}`);
+		}
+
+		const top = this.view.elementTop(index);
+		const height = this.view.elementHeight(index);
+		return top + height;
+	}
+
 	override setFocus(indexes: number[], browserEvent?: UIEvent, ignoreTextModelUpdate?: boolean): void {
 		if (ignoreTextModelUpdate) {
 			super.setFocus(indexes, browserEvent);