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

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) :