Nb Sticky Scroll z-index & css fixes (microsoft#201837)

* no absolute positioning, scrolltop compute based on sticky lines.

* remove z-index var

* compute re-write, remove init, reduce pop-in

* dispose delayer

* remove debounce

* edge case for cell 0 header, next animation frame instead of debounce

* add delayer back, further improve pop in

* remove unused param, update testing snapshots

Author: Yoyokrazy

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

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

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

@@ -5,9 +5,7 @@
 
 .monaco-workbench .notebookOverlay .notebook-sticky-scroll-container {
 	display: none;
-	position: absolute;
 	background-color: var(--vscode-notebook-editorBackground);
-	z-index: var(--z-index-notebook-sticky-scroll);
 	width: 100%;
 }
 
@@ -17,7 +15,6 @@
 	.notebook-sticky-scroll-line {
 	background-color: var(--vscode-notebook-editorBackground);
 	position: relative;
-	z-index: 0;
 	padding-left: 12px;
 	/* transition: margin-top 0.2s ease-in-out; */
 }
@@ -35,15 +32,3 @@
 	background-color: var(--vscode-editorStickyScrollHover-background);
 	cursor: pointer;
 }
-
-.monaco-workbench
-	.notebookOverlay
-	.notebook-sticky-scroll-container
-	.notebook-shadow {
-	display: block;
-	top: 0;
-	left: 3px;
-	height: 3px;
-	width: 100%;
-	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
-}

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

@@ -1070,6 +1070,27 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 
 	private _registerNotebookStickyScroll() {
 		this._notebookStickyScroll = this._register(this.instantiationService.createInstance(NotebookStickyScroll, this._notebookStickyScrollContainer, this, this._notebookOutline, this._list));
+
+		const localDisposableStore = this._register(new DisposableStore());
+
+		this._register(this._notebookStickyScroll.onDidChangeNotebookStickyScroll((sizeDelta) => {
+			const d = localDisposableStore.add(DOM.scheduleAtNextAnimationFrame(DOM.getWindow(this.getDomNode()), () => {
+				if (this.isDisposed) {
+					return;
+				}
+
+				if (this._dimension) {
+					if (sizeDelta > 0) { // delta > 0 ==> sticky is growing, cell list shrinking
+						this.layout(this._dimension);
+						this.setScrollTop(this.scrollTop + sizeDelta);
+					} else if (sizeDelta < 0) { // delta < 0 ==> sticky is shrinking, cell list growing
+						this.setScrollTop(this.scrollTop + sizeDelta);
+						this.layout(this._dimension);
+					}
+				}
+				localDisposableStore.delete(d);
+			}));
+		}));
 	}
 
 	private _updateOutputRenderers() {
@@ -1823,7 +1844,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 
 		this._dimension = dimension;
 		this._position = position;
-		const newBodyHeight = this.getBodyHeight(dimension.height);
+		const newBodyHeight = this.getBodyHeight(dimension.height) - this.getLayoutInfo().stickyHeight;
 		DOM.size(this._body, dimension.width, newBodyHeight);
 
 		const topInserToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType);
@@ -3152,7 +3173,6 @@ 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/view/cellParts/cellToolbarStickyScroll.ts

@@ -15,10 +15,9 @@ export function registerCellToolbarStickyScroll(notebookEditor: INotebookEditor,
 		if (cell.isInputCollapsed) {
 			element.style.top = '';
 		} else {
-			const stickyHeight = notebookEditor.getLayoutInfo().stickyHeight;
 			const scrollTop = notebookEditor.scrollTop;
 			const elementTop = notebookEditor.getAbsoluteTopOfElement(cell);
-			const diff = scrollTop - elementTop + extraOffset + stickyHeight;
+			const diff = scrollTop - elementTop + extraOffset;
 			const maxTop = cell.layoutInfo.editorHeight + cell.layoutInfo.statusBarHeight - 45; // subtract roughly the height of the execution order label plus padding
 			const top = maxTop > 20 ? // Don't move the run button if it can only move a very short distance
 				clamp(min, diff, maxTop) :