Remove notebook cell grabber

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

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 // Cell sizing related
-export const CELL_MARGIN = 20;
-export const CELL_RUN_GUTTER = 32; // TODO should be dynamic based on execution order width, and runnable enablement
+export const CELL_MARGIN = 12;
+export const CELL_RUN_GUTTER = 32;
 
 export const EDITOR_TOOLBAR_HEIGHT = 0;
 export const BOTTOM_CELL_TOOLBAR_HEIGHT = 36;

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

@@ -41,23 +41,6 @@
 	width: 100%;
 }
 
-.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-drag-handle {
-	position: absolute;
-	visibility: hidden;
-	left: 1px;
-}
-
-.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.markdown-cell-row .cell-drag-handle,
-.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.code-cell-row .cell-drag-handle  {
-	top: 8px;
-}
-
-.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell-drag-handle,
-.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .cell-drag-handle,
-.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-output-hover .cell-drag-handle {
-	visibility: visible;
-}
-
 .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-drag-image {
 	position: absolute;
 	top: -500px;
@@ -179,7 +162,7 @@
 	display: inline-block;
 	position: absolute;
 	height: 26px;
-	right: 32px;
+	right: 56px;
 	top: -16px;
 	z-index: 10;
 }
@@ -248,6 +231,7 @@
 
 .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell .run-button-container {
 	position: relative;
+	height: 22px;
 }
 
 .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell .run-button-container .monaco-toolbar {
@@ -309,13 +293,14 @@
 	display: block;
 	content: ' ';
 	position: absolute;
-	width: 6px;
+	width: 32px;
+	box-sizing: border-box;
 	border-left-width: 2px;
 	border-left-style: solid;
-	left: 20px;
 	top: 22px;
 	bottom: 36px;
 	visibility: hidden;
+	cursor: pointer;
 }
 
 .monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row:hover .notebook-cell-focus-indicator,

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

@@ -379,7 +379,6 @@ export interface INotebookCellList {
 export interface BaseCellRenderTemplate {
 	container: HTMLElement;
 	cellContainer: HTMLElement;
-	dragHandle: HTMLElement;
 	toolbar: ToolBar;
 	focusIndicator: HTMLElement;
 	insertionIndicatorTop: HTMLElement;

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

@@ -1108,7 +1108,7 @@ registerThemingParticipant((theme, collector) => {
 	// }
 
 	// Cell Margin
-	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row  > div.cell { margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN}px; }`);
+	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row  > div.cell { margin: 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px 0px ${CELL_MARGIN}px; }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row { padding-top: ${EDITOR_TOP_MARGIN}px; }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .output { margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-bottom-toolbar-container { width: calc(100% - ${CELL_MARGIN * 2 + CELL_RUN_GUTTER}px); margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`);
@@ -1118,4 +1118,5 @@ registerThemingParticipant((theme, collector) => {
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell .run-button-container { width: ${CELL_RUN_GUTTER}px; }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row .notebook-cell-insertion-indicator-top { left: ${CELL_MARGIN + CELL_RUN_GUTTER}px; right: ${CELL_MARGIN}px; }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-drag-image .cell-editor-container > div { padding: ${EDITOR_TOP_PADDING}px 16px ${EDITOR_BOTTOM_PADDING}px 16px; }`);
+	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row .notebook-cell-focus-indicator { left: ${CELL_MARGIN}px; }`);
 });

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

@@ -120,10 +120,10 @@ export class BackLayerWebView extends Disposable {
 		super();
 		this.element = document.createElement('div');
 
-		this.element.style.width = `calc(100% - ${CELL_MARGIN * 2}px)`;
+		this.element.style.width = `calc(100% - ${(CELL_MARGIN + CELL_RUN_GUTTER) * 2}px)`;
 		this.element.style.height = '1400px';
 		this.element.style.position = 'absolute';
-		this.element.style.margin = `0px 0 0px ${CELL_MARGIN}px`;
+		this.element.style.margin = `0px 0 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px`;
 
 		const pathsPath = getPathFromAmdModule(require, 'vs/loader.js');
 		const loader = URI.file(pathsPath).with({ scheme: WebviewResourceScheme });
@@ -500,7 +500,7 @@ ${loaderJs}
 			return {
 				id: id,
 				top: outputOffset,
-				left: CELL_RUN_GUTTER
+				left: 0
 			};
 		});
 
@@ -540,7 +540,7 @@ ${loaderJs}
 			id: cell.id,
 			outputId: outputId,
 			top: initialTop,
-			left: CELL_RUN_GUTTER
+			left: 0
 		};
 
 		this.webview.sendMessage(message);

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

@@ -338,10 +338,8 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
 		container.classList.add('markdown-cell-row');
 		const disposables = new DisposableStore();
 		const toolbar = disposables.add(this.createToolbar(container));
-
-		const dragHandle = DOM.prepend(container, $('.cell-drag-handle'));
-		dragHandle.innerHTML = renderCodicons('$(gripper)');
-		dragHandle.setAttribute('draggable', 'true');
+		const focusIndicator = DOM.append(container, DOM.$('.notebook-cell-focus-indicator'));
+		focusIndicator.setAttribute('draggable', 'true');
 
 		const codeInnerContent = DOM.append(container, $('.cell.code'));
 		const cellEditorPart = DOM.append(codeInnerContent, $('.cell-editor-part'));
@@ -350,14 +348,12 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
 
 		const innerContent = DOM.append(container, $('.cell.markdown'));
 		const insertionIndicatorTop = DOM.append(container, DOM.$('.notebook-cell-insertion-indicator-top'));
-		const focusIndicator = DOM.append(container, DOM.$('.notebook-cell-focus-indicator'));
 		const foldingIndicator = DOM.append(container, DOM.$('.notebook-folding-indicator'));
 
 		const bottomCellContainer = DOM.append(container, $('.cell-bottom-toolbar-container'));
 
 		const templateData: MarkdownCellRenderTemplate = {
 			insertionIndicatorTop,
-			dragHandle,
 			container,
 			cellContainer: innerContent,
 			editingContainer,
@@ -468,7 +464,7 @@ export class CellDragAndDropController {
 
 	addListeners(templateData: BaseCellRenderTemplate, dragImageProvider: DragImageProvider): void {
 		const container = templateData.container;
-		const dragHandle = templateData.dragHandle;
+		const dragHandle = templateData.focusIndicator;
 
 		const dragCleanup = () => {
 			if (this.currentDraggedCell) {
@@ -656,16 +652,14 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
 		container.tabIndex = 0;
 		const disposables = new DisposableStore();
 		const toolbar = disposables.add(this.createToolbar(container));
+		const focusIndicator = DOM.append(container, DOM.$('.notebook-cell-focus-indicator'));
+		focusIndicator.setAttribute('draggable', 'true');
 
 		const cellContainer = DOM.append(container, $('.cell.code'));
 		const runButtonContainer = DOM.append(cellContainer, $('.run-button-container'));
 		const runToolbar = this.createToolbar(runButtonContainer);
 		disposables.add(runToolbar);
 
-		const dragHandle = DOM.prepend(container, $('.cell-drag-handle'));
-		dragHandle.innerHTML = renderCodicons('$(gripper)');
-		dragHandle.setAttribute('draggable', 'true');
-
 		const executionOrderLabel = DOM.append(runButtonContainer, $('div.execution-count-label'));
 
 		const editorPart = DOM.append(cellContainer, $('.cell-editor-part'));
@@ -690,13 +684,11 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
 		const cellStatusPlaceholderContainer = DOM.append(statusBarContainer, $('.cell-status-placeholder'));
 
 		const insertionIndicatorTop = DOM.append(container, DOM.$('.notebook-cell-insertion-indicator-top'));
-		const focusIndicator = DOM.append(container, DOM.$('.notebook-cell-focus-indicator'));
 		const outputContainer = DOM.append(container, $('.output'));
 		const bottomCellContainer = DOM.append(container, $('.cell-bottom-toolbar-container'));
 
 		const templateData: CodeCellRenderTemplate = {
 			insertionIndicatorTop,
-			dragHandle,
 			container,
 			cellContainer,
 			statusBarContainer,

src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts

@@ -86,7 +86,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
 		this._layoutInfo = {
 			fontInfo: initialNotebookLayoutInfo?.fontInfo || null,
 			editorHeight: 0,
-			editorWidth: initialNotebookLayoutInfo ? initialNotebookLayoutInfo!.width - CELL_MARGIN * 2 - CELL_RUN_GUTTER : 0,
+			editorWidth: initialNotebookLayoutInfo ? initialNotebookLayoutInfo!.width - (CELL_MARGIN + CELL_RUN_GUTTER) * 2 : 0,
 			outputContainerOffset: 0,
 			outputTotalHeight: 0,
 			totalHeight: 0,
@@ -103,7 +103,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
 		const indicatorHeight = this.editorHeight + CELL_STATUSBAR_HEIGHT + outputTotalHeight;
 		const outputContainerOffset = EDITOR_TOOLBAR_HEIGHT + EDITOR_TOP_MARGIN + this.editorHeight + CELL_STATUSBAR_HEIGHT;
 		const bottomToolbarOffset = totalHeight - BOTTOM_CELL_TOOLBAR_HEIGHT;
-		const editorWidth = state.outerWidth !== undefined ? state.outerWidth - CELL_MARGIN * 2 - CELL_RUN_GUTTER : this._layoutInfo?.editorWidth;
+		const editorWidth = state.outerWidth !== undefined ? state.outerWidth - (CELL_MARGIN + CELL_RUN_GUTTER) * 2 : this._layoutInfo?.editorWidth;
 		this._layoutInfo = {
 			fontInfo: state.font || null,
 			editorHeight: this._editorHeight,

src/vs/workbench/contrib/notebook/browser/viewModel/markdownCellViewModel.ts

@@ -71,7 +71,7 @@ export class MarkdownCellViewModel extends BaseCellViewModel implements ICellVie
 	}
 
 	private computeEditorWidth(outerWidth: number) {
-		return outerWidth - CELL_MARGIN * 2 - CELL_RUN_GUTTER;
+		return outerWidth - CELL_MARGIN * 2 - CELL_RUN_GUTTER * 2;
 	}
 
 	layoutChange(state: MarkdownCellLayoutChangeEvent) {