Fix widget in cell editor cutoff by the titlebar. (#94195)

* Fix widget in cell editor cutoff by the titlebar.

* Move zindex update internal to notebook

* remove unused css

* update zindex only closing notebook editor

* adopt fixed overflow widget option

* overflow visible is not needed for fixed element.

* optional transformOptimization

* remove unncessary position static and overflow visible

src/vs/base/browser/ui/list/listView.ts

@@ -59,6 +59,7 @@ export interface IListViewOptions<T> {
 	readonly horizontalScrolling?: boolean;
 	readonly accessibilityProvider?: IListViewAccessibilityProvider<T>;
 	readonly additionalScrollHeight?: number;
+	readonly transformOptimization?: boolean;
 }
 
 const DefaultOptions = {
@@ -74,7 +75,8 @@ const DefaultOptions = {
 		onDragOver() { return false; },
 		drop() { }
 	},
-	horizontalScrolling: false
+	horizontalScrolling: false,
+	transformOptimization: true
 };
 
 export class ElementsDragAndDropData<T, TContext = void> implements IDragAndDropData {
@@ -275,7 +277,11 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 
 		this.rowsContainer = document.createElement('div');
 		this.rowsContainer.className = 'monaco-list-rows';
-		this.rowsContainer.style.transform = 'translate3d(0px, 0px, 0px)';
+
+		if (options.transformOptimization) {
+			this.rowsContainer.style.transform = 'translate3d(0px, 0px, 0px)';
+		}
+
 		this.disposables.add(Gesture.addTarget(this.rowsContainer));
 
 		this.scrollableElement = this.disposables.add(new ScrollableElement(this.rowsContainer, {

src/vs/base/browser/ui/list/listWidget.ts

@@ -838,6 +838,7 @@ export interface IListOptions<T> {
 	readonly mouseSupport?: boolean;
 	readonly horizontalScrolling?: boolean;
 	readonly additionalScrollHeight?: number;
+	readonly transformOptimization?: boolean;
 }
 
 export interface IListStyles {

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

@@ -17,10 +17,14 @@
 	white-space: initial;
 }
 
-/* .monaco-workbench .part.editor > .content .notebook-editor .cell-list-container .monaco-scrollable-element {
+/* .monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element {
 	overflow: visible !important;
 } */
 
+.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container .monaco-editor-hover {
+	z-index: 600 !important; /* @rebornix: larger than the editor title bar */
+}
+
 .monaco-workbench .part.editor > .content .notebook-editor .cell-list-container .monaco-list-rows {
 	min-height: 100%;
 	overflow: visible !important;
@@ -133,11 +137,6 @@
 	max-width: 100%;
 }
 
-
-.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:focus-within {
-	z-index: 10;
-}
-
 .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .menu {
 	position: absolute;
 	left: 0;
@@ -169,10 +168,10 @@
 .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .menu:hover {
 	cursor: pointer;
 }
-
+/*
 .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows {
 	margin-top: 16px;
-}
+} */
 
 .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .monaco-toolbar {
 	visibility: hidden;

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

@@ -92,6 +92,7 @@ export class NotebookEditor extends BaseEditor implements INotebookEditor {
 	static readonly ID: string = 'workbench.editor.notebook';
 	private _rootElement!: HTMLElement;
 	private body!: HTMLElement;
+	private titleBar: HTMLElement | null = null;
 	private webview: BackLayerWebView | null = null;
 	private webviewTransparentCover: HTMLElement | null = null;
 	private list: INotebookCellList | undefined;
@@ -199,6 +200,43 @@ export class NotebookEditor extends BaseEditor implements INotebookEditor {
 		}
 	}
 
+	populateEditorTitlebar() {
+		for (let element: HTMLElement | null = this._rootElement.parentElement; element; element = element.parentElement) {
+			if (DOM.hasClass(element, 'editor-group-container')) {
+				// elemnet is editor group container
+				for (let i = 0; i < element.childElementCount; i++) {
+					const child = element.childNodes.item(i) as HTMLElement;
+
+					if (DOM.hasClass(child, 'title')) {
+						this.titleBar = child;
+						break;
+					}
+				}
+				break;
+			}
+		}
+	}
+
+	clearEditorTitlebarZindex() {
+		if (this.titleBar === null) {
+			this.populateEditorTitlebar();
+		}
+
+		if (this.titleBar) {
+			this.titleBar.style.zIndex = 'auto';
+		}
+	}
+
+	increaseEditorTitlebarZindex() {
+		if (this.titleBar === null) {
+			this.populateEditorTitlebar();
+		}
+
+		if (this.titleBar) {
+			this.titleBar.style.zIndex = '500';
+		}
+	}
+
 	private generateFontInfo(): void {
 		const editorOptions = this.configurationService.getValue<IEditorOptions>('editor');
 		this.fontInfo = BareFontInfo.createFromRawSettings(editorOptions, getZoomLevel());
@@ -237,6 +275,7 @@ export class NotebookEditor extends BaseEditor implements INotebookEditor {
 				multipleSelectionSupport: false,
 				enableKeyboardNavigation: true,
 				additionalScrollHeight: 0,
+				transformOptimization: false,
 				styleController: (_suffix: string) => { return this.list!; },
 				overrideStyles: {
 					listBackground: editorBackground,
@@ -319,6 +358,16 @@ export class NotebookEditor extends BaseEditor implements INotebookEditor {
 		return this.webview?.webview;
 	}
 
+	setVisible(visible: boolean, group?: IEditorGroup): void {
+		if (visible) {
+			this.increaseEditorTitlebarZindex();
+		} else {
+			this.clearEditorTitlebarZindex();
+		}
+
+		super.setVisible(visible, group);
+	}
+
 	onWillHide() {
 		if (this.input && this.input instanceof NotebookEditorInput && !this.input.isDisposed()) {
 			this.saveEditorViewState(this.input);
@@ -348,6 +397,7 @@ export class NotebookEditor extends BaseEditor implements INotebookEditor {
 		}
 
 		if (editor === this.input) {
+			this.clearEditorTitlebarZindex();
 			this.saveEditorViewState(editor);
 		}
 	}

src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts

@@ -118,7 +118,7 @@ export class CellEditorOptions {
 		lineNumbers: 'off',
 		lineDecorationsWidth: 0,
 		glyphMargin: false,
-		fixedOverflowWidgets: false,
+		fixedOverflowWidgets: true,
 		minimap: { enabled: false },
 	};