Change:
VSCode Version: 1.52.0-insider OS Version: Windows 10 While dogfooding my own notebook using the new editor I was finding it difficult to know which cell was selected for. If the entire selected cell is not visible, the single line shown is ambiguous. Even if the entire selected cell IS visible, I'm still finding it difficult to see which one is actually selected and ready for execution on shift-enter. !
(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like: <!-- score: 0.466 --- <!-- score: 0.459 --<!-- potentialduplicatescomment --
Good point , it's hard to figure out the focus/active notebook cell when there are outputs.
Sure, though even when the outputs aren't as large as what I have shown here, the two lines that border the selected cell just doesn't give me enough feedback.
I'm wondering if this is something that is learned over time. When a cell is focused, we do still show actions that are visible: ! And when a cell is selected, the lines are closer to each cell input/output: ! ! do you know if we've received any customer feedback for this? Would be great to see how many people are running into this.
We just got a bunch of customer feedback and I will sift through it and double check, don't think I've seen anything specific on this yet. I could see this being an issue where customers may struggle but have trouble pinpointing why. I have personally really been struggling using these new indicators to figure out which cell I am in. It is not a quick indicator, I have to double check/double click in a cell to be sure. I have trouble determining right away if the indicator is the bottom of a cell or the top of the cell. The cell toolbar coming up doesn't actually help me at all either because the cell toolbar pops up on hover depending on my mouse position. In the screenshot I provided below, I have selected the top cell, yet my mouse is hovering above the bottom cell. I find myself thinking/figuring out where I am at with this experience but never thought about it with the last implementation. My personal opinion is that it is too subtle and requires additional verification. !
One idea that suggested was to make the top cell actions (run, focus border, and cell toolbar) when the cell is out of view. I think this will help make it more obvious which cell is focused and bring more clarity. Below is a rough example of that: https://user-
Here's a suggestion as to how to change the themes to make this situation better. Base the background of the focused cell on the focusBorder color (which is what the cell border defaults to). All I did is default focusedCellBackground and cellHoverBackground to be a slightly transparent version of focusBorder. I have found this to look appealing and also work well to make it easier to see what cell has focus. Note that changes to the focusedCellBackground can have a much more significant effect on markdown cells than code cells. These defaults seem to work pretty well though. ! ! !
thanks for the suggestion, we used to have background colors for the active cell but it was visually too noisy, so this was one trade off when we went with the focus border color. I still like the original proposal best where we can show the actions sticky when the cell goes out of view.
I'm willing to try it, but I don't think that the sticky widgets is going to alleviate this problem well enough, if at all. In the meantime, I'm going to keep the color changes I made for my own sanity. Honestly, it feels WAY better than what we have as the default. To me, it actually helps alleviate the "visual noise" of all the text, and widgets that exist basically share the same color scheme. Do we have a measure for visual noise? I'm thinking this is a pretty subjective thing. But perhaps not?
It definitely is subjective and comes down to personal preference. That's why we still kept that background theme color for those who want to use. Also why everything else in the product is so customizable as well.
Another thing I was exploring this week was adding a left/right border for cell focus. I've got that will hopefully be merged in the next few days so we can test this out on Insiders. !

Discussion:
height: 1px; } <ins> .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-left:before, .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-right:before { content: ""; position: absolute; width: 1px; height: 100%; } </ins> /* top border */ .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-top:before, .monaco-workbench .notebookOverlay .monaco-list .markdown-cell-row.focused .cell-inner-container:before { border-top: 1px solid transparent; } <ins> /* left border */ .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-left:before { border-left: 1px solid transparent; } </ins> /* bottom border */ .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-bottom:before, .monaco-workbench .notebookOverlay .monaco-list .markdown-cell-row.focused .cell-inner-container:after { border-bottom: 1px solid transparent; } <ins> /* right border */ .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-right:before { border-right: 1px solid transparent; } </ins> .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-top:before, .monaco-workbench .notebookOverlay .monaco-list .markdown-cell-row.focused .cell-inner-container:before { top: 0; } <ins> .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-left:before { left: 0; } </ins> .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-bottom:before, .monaco-workbench .notebookOverlay .monaco-list .markdown-cell-row.focused .cell-inner-container:after { bottom: 0px; } <ins> .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-right:before { right: 0; } </ins> .monaco-workbench.hc-black .notebookOverlay .monaco-list-row .cell-editor-focus .cell-editor-part:before { outline-style: dashed; }

deleteToolbar: ToolBar; betweenCellToolbar: ToolBar; focusIndicatorLeft: HTMLElement; <ins> focusIndicatorRight: HTMLElement; </ins> disposables: DisposableStore; elementDisposables: DisposableStore; bottomCellContainer: HTMLElement;

collector.addRule(` .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-focus-indicator-top:before, .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-focus-indicator-bottom:before, <del> .monaco-workbench .notebookOverlay .monaco-list:focus-within .markdown-cell-row.focused .cell-inner-container:not(.cell-editor-focus):before { </del> <ins> .monaco-workbench .notebookOverlay .monaco-list:focus-within .markdown-cell-row.focused .cell-inner-container:not(.cell-editor-focus):before, .monaco-workbench .notebookOverlay .monaco-list:focus-within .markdown-cell-row.focused .cell-inner-container:not(.cell-editor-focus):after, .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-left:before, .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-right:before { </ins> border-color: ${focusedCellBorderColor} !important; }`);

if (actions.primary.length || actions.secondary.length) { templateData.container.classList.add('cell-has-toolbar-actions'); if (isCodeCellRenderTemplate(templateData)) { <del> templateData.focusIndicatorLeft.style.top = `${EDITOR_TOOLBAR_HEIGHT + CELL_TOP_MARGIN}px`; templateData.focusIndicatorRight.style.top = `${EDITOR_TOOLBAR_HEIGHT + CELL_TOP_MARGIN}px`; </del> <ins> templateData.focusIndicatorLeft.style.top = `${EDITOR_TOOLBAR_HEIGHT}px`; templateData.focusIndicatorRight.style.top = `${EDITOR_TOOLBAR_HEIGHT}px`; </ins> } } else { templateData.container.classList.remove('cell-has-toolbar-actions');

deleteToolbar.setActions([this.instantiationService.createInstance(DeleteCellAction)]); const focusIndicatorLeft = DOM.append(container, DOM.$('.cell-focus-indicator.cell-focus-indicator-side.cell-focus-indicator-left')); <ins> const focusIndicatorRight = DOM.append(container, DOM.$('.cell-focus-indicator.cell-focus-indicator-side.cell-focus-indicator-right')); </ins> const codeInnerContent = DOM.append(container, $('.cell.code')); const editorPart = DOM.append(codeInnerContent, $('.cell-editor-part'));

editorContainer, focusIndicatorLeft, focusIndicatorBottom, <ins> focusIndicatorRight, </ins> foldingIndicator, disposables, elementDisposables: new DisposableStore(),

} const statusbarHeight = this.getEditorStatusbarHeight(); <del> const indicatorHeight = editorHeight + statusbarHeight + outputTotalHeight + outputShowMoreContainerHeight; </del> <ins> const indicatorHeight = editorHeight + statusbarHeight + outputTotalHeight + outputShowMoreContainerHeight + (CELL_TOP_MARGIN * 2); </ins> const outputContainerOffset = EDITOR_TOOLBAR_HEIGHT + CELL_TOP_MARGIN + editorHeight + statusbarHeight; const outputShowMoreContainerOffset = totalHeight - BOTTOM_CELL_TOOLBAR_GAP - BOTTOM_CELL_TOOLBAR_HEIGHT / 2 - outputShowMoreContainerHeight; const bottomToolbarOffset = totalHeight - BOTTOM_CELL_TOOLBAR_GAP - BOTTOM_CELL_TOOLBAR_HEIGHT / 2;