Support folding notebook cells via sticky scroll

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

@@ -6,29 +6,62 @@
 .monaco-workbench .notebookOverlay .notebook-sticky-scroll-container {
 	display: none;
 	background-color: var(--vscode-notebook-editorBackground);
+	padding-left: 9.5px;
+}
+
+.monaco-workbench
+	.notebookOverlay
+	.notebook-sticky-scroll-container
+	.notebook-sticky-scroll-element {
+	display: flex;
+	align-items: center;
+}
+
+.monaco-workbench
+	.notebookOverlay
+	.notebook-sticky-scroll-container
+	.notebook-sticky-scroll-element
+	.notebook-sticky-scroll-folding-icon:hover {
+	outline: 1px dashed var(--vscode-contrastActiveBorder);
+	outline-offset: -1px;
+}
+
+.monaco-workbench
+	.notebookOverlay
+	.notebook-sticky-scroll-container
+	.notebook-sticky-scroll-element
+	.notebook-sticky-scroll-header {
 	width: 100%;
+	padding-left: 6px;
 }
 
 .monaco-workbench
 	.notebookOverlay
 	.notebook-sticky-scroll-container
-	.notebook-sticky-scroll-line {
-	background-color: var(--vscode-notebook-editorBackground);
-	position: relative;
-	padding-left: 12px;
-	/* transition: margin-top 0.2s ease-in-out; */
+	.notebook-sticky-scroll-element
+	.notebook-sticky-scroll-header:hover {
+	background-color: var(--vscode-editorStickyScrollHover-background);
+	width: 100%;
+	cursor: pointer;
 }
 
 .monaco-workbench.hc-light .notebookOverlay .notebook-sticky-scroll-container,
 .monaco-workbench.hc-black .notebookOverlay .notebook-sticky-scroll-container {
 	background-color: var(--vscode-editorStickyScroll-background);
 	border-bottom: 1px solid var(--vscode-contrastBorder);
+	padding-bottom: 3px;
 }
 
-.monaco-workbench
+.monaco-workbench.hc-light
 	.notebookOverlay
 	.notebook-sticky-scroll-container
-	.notebook-sticky-scroll-line:hover {
-	background-color: var(--vscode-editorStickyScrollHover-background);
-	cursor: pointer;
+	.notebook-sticky-scroll-element
+	.notebook-sticky-scroll-header:hover,
+.monaco-workbench.hc-black
+	.notebookOverlay
+	.notebook-sticky-scroll-container
+	.notebook-sticky-scroll-element
+	.notebook-sticky-scroll-header:hover {
+	outline: 1px dashed var(--vscode-contrastActiveBorder);
+	outline-offset: -2px;
 }

src/vs/workbench/contrib/notebook/browser/viewParts/notebookEditorStickyScroll.ts

@@ -5,6 +5,7 @@
 
 import { localize } from 'vs/nls';
 import * as DOM from 'vs/base/browser/dom';
+import { EventType as TouchEventType } from 'vs/base/browser/touch';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { Emitter, Event } from 'vs/base/common/event';
 import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
@@ -14,12 +15,16 @@ import { Action2, MenuId, registerAction2 } from 'vs/platform/actions/common/act
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
-import { INotebookEditor } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
+import { CellFoldingState, INotebookEditor } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
 import { INotebookCellList } from 'vs/workbench/contrib/notebook/browser/view/notebookRenderingCommon';
 import { OutlineEntry } from 'vs/workbench/contrib/notebook/browser/viewModel/OutlineEntry';
 import { NotebookCellOutlineProvider } from 'vs/workbench/contrib/notebook/browser/viewModel/notebookOutlineProvider';
 import { CellKind } from 'vs/workbench/contrib/notebook/common/notebookCommon';
 import { Delayer } from 'vs/base/common/async';
+import { ThemeIcon } from 'vs/base/common/themables';
+import { foldingCollapsedIcon, foldingExpandedIcon } from 'vs/editor/contrib/folding/browser/foldingDecorations';
+import { MarkupCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/markupCellViewModel';
+import { FoldingController } from 'vs/workbench/contrib/notebook/browser/controller/foldingController';
 
 export class ToggleNotebookStickyScroll extends Action2 {
 
@@ -54,26 +59,56 @@ export class ToggleNotebookStickyScroll extends Action2 {
 export class NotebookStickyLine extends Disposable {
 	constructor(
 		public readonly element: HTMLElement,
+		public readonly foldingIcon: StickyFoldingIcon,
+		public readonly header: HTMLElement,
 		public readonly entry: OutlineEntry,
 		public readonly notebookEditor: INotebookEditor,
 	) {
 		super();
-		this._register(DOM.addDisposableListener(this.element, DOM.EventType.CLICK, () => {
+		// click the header to focus the cell
+		this._register(DOM.addDisposableListener(this.header, DOM.EventType.CLICK || TouchEventType.Tap, () => {
 			this.focusCell();
 		}));
+
+		// click the folding icon to fold the range covered by the header
+		this._register(DOM.addDisposableListener(this.foldingIcon.domNode, DOM.EventType.CLICK || TouchEventType.Tap, () => {
+			if (this.entry.cell.cellKind === CellKind.Markup) {
+				const currentFoldingState = (this.entry.cell as MarkupCellViewModel).foldingState;
+				this.toggleFoldRange(currentFoldingState);
+			}
+		}));
+
+		// folding icon hovers
+		// this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_OVER, () => {
+		// 	this.foldingIcon.setVisible(true);
+		// }));
+		// this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_OUT, () => {
+		// 	this.foldingIcon.setVisible(false);
+		// }));
+
+	}
+
+	private toggleFoldRange(currentState: CellFoldingState) {
+		const foldingController = this.notebookEditor.getContribution('workbench.notebook.foldingController') as FoldingController;
+
+		const index = this.entry.index;
+		const headerLevel = this.entry.level;
+		const newFoldingState = (currentState === CellFoldingState.Collapsed) ? CellFoldingState.Expanded : CellFoldingState.Collapsed;
+
+		foldingController.setFoldingStateUp(index, newFoldingState, headerLevel);
+		this.focusCell();
 	}
 
 	private focusCell() {
 		this.notebookEditor.focusNotebookCell(this.entry.cell, 'container');
 		const cellScrollTop = this.notebookEditor.getAbsoluteTopOfElement(this.entry.cell);
-		const parentCount = this.getParentCount();
+		const parentCount = NotebookStickyLine.getParentCount(this.entry);
 		// 1.1 addresses visible cell padding, to make sure we don't focus md cell and also render its sticky line
 		this.notebookEditor.setScrollTop(cellScrollTop - (parentCount + 1.1) * 22);
 	}
 
-	private getParentCount() {
+	static getParentCount(entry: OutlineEntry) {
 		let count = 0;
-		let entry = this.entry;
 		while (entry.parent) {
 			count++;
 			entry = entry.parent;
@@ -82,6 +117,26 @@ export class NotebookStickyLine extends Disposable {
 	}
 }
 
+class StickyFoldingIcon {
+
+	public domNode: HTMLElement;
+
+	constructor(
+		public isCollapsed: boolean,
+		public dimension: number
+	) {
+		this.domNode = document.createElement('div');
+		this.domNode.style.width = `${dimension}px`;
+		this.domNode.style.height = `${dimension}px`;
+		this.domNode.className = ThemeIcon.asClassName(isCollapsed ? foldingCollapsedIcon : foldingExpandedIcon);
+	}
+
+	public setVisible(visible: boolean) {
+		this.domNode.style.cursor = visible ? 'pointer' : 'default';
+		this.domNode.style.opacity = visible ? '1' : '0';
+	}
+}
+
 export class NotebookStickyScroll extends Disposable {
 	private readonly _disposables = new DisposableStore();
 	private currentStickyLines = new Map<OutlineEntry, { line: NotebookStickyLine; rendered: boolean }>();
@@ -302,9 +357,24 @@ export class NotebookStickyScroll extends Disposable {
 
 	static createStickyElement(entry: OutlineEntry, notebookEditor: INotebookEditor) {
 		const stickyElement = document.createElement('div');
-		stickyElement.classList.add('notebook-sticky-scroll-line');
-		stickyElement.innerText = '#'.repeat(entry.level) + ' ' + entry.label;
-		return new NotebookStickyLine(stickyElement, entry, notebookEditor);
+		stickyElement.classList.add('notebook-sticky-scroll-element');
+		stickyElement.style.paddingLeft = NotebookStickyLine.getParentCount(entry) * 10 + 'px';
+
+		let isCollapsed = false;
+		if (entry.cell.cellKind === CellKind.Markup) {
+			isCollapsed = (entry.cell as MarkupCellViewModel).foldingState === CellFoldingState.Collapsed;
+		}
+
+		const stickyFoldingIcon = new StickyFoldingIcon(isCollapsed, 16);
+		stickyFoldingIcon.domNode.classList.add('notebook-sticky-scroll-folding-icon');
+		stickyFoldingIcon.setVisible(true);
+
+		const stickyHeader = document.createElement('div');
+		stickyHeader.classList.add('notebook-sticky-scroll-header');
+		stickyHeader.innerText = entry.label;
+
+		stickyElement.append(stickyFoldingIcon.domNode, stickyHeader);
+		return new NotebookStickyLine(stickyElement, stickyFoldingIcon, stickyHeader, entry, notebookEditor);
 	}
 
 	private disposeCurrentStickyLines() {

src/vs/workbench/contrib/notebook/test/browser/__snapshots__/NotebookEditorStickyScroll_test1__should_render_0-_1___visible_range_3-_8.0.snap

@@ -1 +1 @@
-[ "# header a", "## header aa" ]
+[ "header a", "header aa" ]

src/vs/workbench/contrib/notebook/test/browser/__snapshots__/NotebookEditorStickyScroll_test2__should_render_0____visible_range_6-_9_so_collapsing_next_2_against_following_section.0.snap

@@ -1 +1 @@
-[ "# header a" ]
+[ "header a" ]

src/vs/workbench/contrib/notebook/test/browser/__snapshots__/NotebookEditorStickyScroll_test3__should_render_0-_2___collapsing_against_equivalent_level_header.0.snap

@@ -1 +1 @@
-[ "# header a", "## header aa", "### header aab" ]
+[ "header a", "header aa", "header aab" ]

src/vs/workbench/contrib/notebook/test/browser/__snapshots__/NotebookEditorStickyScroll_test4__should_render_0____scrolltop_halfway_through_cell_0.0.snap

@@ -1 +1 @@
-[ "# header a" ]
+[ "header a" ]

src/vs/workbench/contrib/notebook/test/browser/__snapshots__/NotebookEditorStickyScroll_test5__should_render_0-_2___scrolltop_halfway_through_cell_2.0.snap

@@ -1 +1 @@
-[ "# header a", "## header aa", "### header aaa" ]
+[ "header a", "header aa", "header aaa" ]

src/vs/workbench/contrib/notebook/test/browser/__snapshots__/NotebookEditorStickyScroll_test6__should_render_6-_7___scrolltop_halfway_through_cell_7.0.snap

@@ -1 +1 @@
-[ "# header b", "## header bb" ]
+[ "header b", "header bb" ]

src/vs/workbench/contrib/notebook/test/browser/__snapshots__/NotebookEditorStickyScroll_test7__should_render_0-_1___collapsing_against_next_section.0.snap

@@ -1 +1 @@
-[ "# header a", "## header aa" ]
+[ "header a", "header aa" ]