@codingame/monaco-vscode-api 2.2.1 → 3.0.0

package/vscode/src/vs/workbench/contrib/notebook/browser/view/cellParts/codeCell.js

@@ -33,13 +33,13 @@ let CodeCell = class CodeCell extends Disposable {
         this.languageService = languageService;
         this.configurationService = configurationService;
         this._isDisposed = false;
-        const cellEditorOptions = this._register(( new CellEditorOptions(
+        this._cellEditorOptions = this._register(( new CellEditorOptions(
             this.notebookEditor.getBaseCellEditorOptions(viewCell.language),
             this.notebookEditor.notebookOptions,
             this.configurationService
         )));
         this._outputContainerRenderer = this.instantiationService.createInstance(CellOutputContainer, notebookEditor, viewCell, templateData, { limit: outputDisplayLimit });
-        this.cellParts = this._register(templateData.cellParts.concatContentPart([cellEditorOptions, this._outputContainerRenderer], getWindow(notebookEditor.getDomNode())));
+        this.cellParts = this._register(templateData.cellParts.concatContentPart([this._cellEditorOptions, this._outputContainerRenderer], getWindow(notebookEditor.getDomNode())));
         const editorHeight = this.calculateInitEditorHeight();
         this.initializeEditor(editorHeight);
         this._renderedInputCollapseState = false;
@@ -96,9 +96,25 @@ let CodeCell = class CodeCell extends Disposable {
         this.updateForCollapseState();
         this._register(Event.runAndSubscribe(viewCell.onDidChangeOutputs, this.updateForOutputs.bind(this)));
         this._register(Event.runAndSubscribe(viewCell.onDidChangeLayout, this.updateForLayout.bind(this)));
-        cellEditorOptions.setLineNumbers(this.viewCell.lineNumbers);
-        this._register(cellEditorOptions.onDidChange(() => templateData.editor.updateOptions(cellEditorOptions.getUpdatedValue(this.viewCell.internalMetadata, this.viewCell.uri))));
-        templateData.editor.updateOptions(cellEditorOptions.getUpdatedValue(this.viewCell.internalMetadata, this.viewCell.uri));
+        this._cellEditorOptions.setLineNumbers(this.viewCell.lineNumbers);
+        templateData.editor.updateOptions(this._cellEditorOptions.getUpdatedValue(this.viewCell.internalMetadata, this.viewCell.uri));
+    }
+    updateCodeCellOptions(templateData) {
+        templateData.editor.updateOptions(this._cellEditorOptions.getUpdatedValue(this.viewCell.internalMetadata, this.viewCell.uri));
+        const cts = ( new CancellationTokenSource());
+        this._register({ dispose() { cts.dispose(true); } });
+        raceCancellation(this.viewCell.resolveTextModel(), cts.token).then(model => {
+            if (this._isDisposed) {
+                return;
+            }
+            if (model) {
+                model.updateOptions({
+                    indentSize: this._cellEditorOptions.indentSize,
+                    tabSize: this._cellEditorOptions.tabSize,
+                    insertSpaces: this._cellEditorOptions.insertSpaces,
+                });
+            }
+        });
     }
     updateForLayout() {
         this._pendingLayout?.dispose();
@@ -136,6 +152,11 @@ let CodeCell = class CodeCell extends Disposable {
             if (model && this.templateData.editor) {
                 this._reigsterModelListeners(model);
                 this.templateData.editor.setModel(model);
+                model.updateOptions({
+                    indentSize: this._cellEditorOptions.indentSize,
+                    tabSize: this._cellEditorOptions.tabSize,
+                    insertSpaces: this._cellEditorOptions.insertSpaces,
+                });
                 this.viewCell.attachTextEditor(this.templateData.editor, this.viewCell.layoutInfo.estimatedHasHorizontalScrolling);
                 const focusEditorIfNeeded = () => {
                     if (this.notebookEditor.getActiveCell() === this.viewCell &&
@@ -152,6 +173,7 @@ let CodeCell = class CodeCell extends Disposable {
                 }
                 focusEditorIfNeeded();
             }
+            this._register(this._cellEditorOptions.onDidChange(() => this.updateCodeCellOptions(this.templateData)));
         });
     }
     updateForOutputs() {
@@ -165,7 +187,7 @@ let CodeCell = class CodeCell extends Disposable {
         const isReadonly = this.notebookEditor.isReadOnly;
         const padding = this.notebookEditor.notebookOptions.computeEditorPadding(this.viewCell.internalMetadata, this.viewCell.uri);
         const options = editor.getOptions();
-        if (options.get(90 ) !== isReadonly || options.get(83 ) !== padding) {
+        if (options.get(91 ) !== isReadonly || options.get(84 ) !== padding) {
             editor.updateOptions({ readOnly: this.notebookEditor.isReadOnly, padding: this.notebookEditor.notebookOptions.computeEditorPadding(this.viewCell.internalMetadata, this.viewCell.uri) });
         }
     }

package/vscode/src/vs/workbench/contrib/notebook/browser/view/cellParts/markupCell.js

@@ -38,6 +38,7 @@ let MarkupCell = class MarkupCell extends Disposable {
         this.localDisposables = this._register(( new DisposableStore()));
         this.focusSwitchDisposable = this._register(( new MutableDisposable()));
         this.editorDisposables = this._register(( new DisposableStore()));
+        this._isDisposed = false;
         this.constructDOM();
         this.editorPart = templateData.editorPart;
         this.cellEditorOptions = this._register(( new CellEditorOptions(
@@ -130,9 +131,27 @@ let MarkupCell = class MarkupCell extends Disposable {
                 this.onCellEditorWidthChange();
             }
         }));
-        this._register(this.cellEditorOptions.onDidChange(() => {
-            this.updateEditorOptions(this.cellEditorOptions.getUpdatedValue(this.viewCell.internalMetadata, this.viewCell.uri));
-        }));
+        this._register(this.cellEditorOptions.onDidChange(() => this.updateMarkupCellOptions()));
+    }
+    updateMarkupCellOptions() {
+        this.updateEditorOptions(this.cellEditorOptions.getUpdatedValue(this.viewCell.internalMetadata, this.viewCell.uri));
+        if (this.editor) {
+            this.editor.updateOptions(this.cellEditorOptions.getUpdatedValue(this.viewCell.internalMetadata, this.viewCell.uri));
+            const cts = ( new CancellationTokenSource());
+            this._register({ dispose() { cts.dispose(true); } });
+            raceCancellation(this.viewCell.resolveTextModel(), cts.token).then(model => {
+                if (this._isDisposed) {
+                    return;
+                }
+                if (model) {
+                    model.updateOptions({
+                        indentSize: this.cellEditorOptions.indentSize,
+                        tabSize: this.cellEditorOptions.tabSize,
+                        insertSpaces: this.cellEditorOptions.insertSpaces,
+                    });
+                }
+            });
+        }
     }
     updateCollapsedState() {
         if (this.viewCell.isInputCollapsed) {
@@ -171,6 +190,7 @@ let MarkupCell = class MarkupCell extends Disposable {
         });
     }
     dispose() {
+        this._isDisposed = true;
         if (this.notebookEditor.getActiveCell() === this.viewCell && this.viewCell.focusMode === CellFocusMode.Editor && (this.notebookEditor.hasEditorFocus() || this.notebookEditor.getDomNode().ownerDocument.activeElement === this.notebookEditor.getDomNode().ownerDocument.body)) {
             this.notebookEditor.focusContainer();
         }
@@ -286,6 +306,11 @@ let MarkupCell = class MarkupCell extends Disposable {
                     return;
                 }
                 this.editor.setModel(model);
+                model.updateOptions({
+                    indentSize: this.cellEditorOptions.indentSize,
+                    tabSize: this.cellEditorOptions.tabSize,
+                    insertSpaces: this.cellEditorOptions.insertSpaces,
+                });
                 const realContentHeight = this.editor.getContentHeight();
                 if (realContentHeight !== editorHeight) {
                     this.editor.layout({

package/vscode/src/vs/workbench/contrib/notebook/browser/view/notebookCellList.js

@@ -18,6 +18,7 @@ import { IInstantiationService } from '../../../../../platform/instantiation/com
 import { NotebookCellListView } from './notebookCellListView.js';
 import { INotebookExecutionStateService } from '../../common/notebookExecutionStateService.js';
 import { NotebookCellAnchor } from './notebookCellAnchor.js';
+import { NotebookViewZones } from '../viewParts/notebookViewZones.js';
 function getVisibleCells(cells, hiddenRanges) {
     if (!hiddenRanges.length) {
         return cells;
@@ -211,7 +212,9 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
         }));
     }
     createListView(container, virtualDelegate, renderers, viewOptions) {
-        return ( new NotebookCellListView(container, virtualDelegate, renderers, viewOptions));
+        const listView = ( new NotebookCellListView(container, virtualDelegate, renderers, viewOptions));
+        this.viewZones = ( new NotebookViewZones(listView, this));
+        return listView;
     }
     attachWebview(element) {
         element.style.top = `-${NOTEBOOK_WEBVIEW_BOUNDARY}px`;
@@ -245,6 +248,7 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
             if (this._isDisposed) {
                 return;
             }
+            this.viewZones.onCellsChanged(e);
             const currentRanges = ( this._hiddenRangeIds.map(id => this._viewModel.getTrackedRange(id))).filter(range => range !== null);
             const newVisibleViewCells = getVisibleCells(this._viewModel.viewCells, currentRanges);
             const oldVisibleViewCells = [];
@@ -333,6 +337,8 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
             }
             if (!hasDifference) {
                 this._updateHiddenRangePrefixSum(newRanges);
+                this.viewZones.onHiddenRangesChange();
+                this.viewZones.layout();
                 return false;
             }
         }
@@ -342,9 +348,11 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
         )).filter(id => id !== null);
         this._hiddenRangeIds = hiddenAreaIds;
         this._updateHiddenRangePrefixSum(newRanges);
+        this.viewZones.onHiddenRangesChange();
         if (triggerViewUpdate) {
             this.updateHiddenAreasInView(oldRanges, newRanges);
         }
+        this.viewZones.layout();
         return true;
     }
     _updateHiddenRangePrefixSum(newRanges) {
@@ -398,6 +406,7 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
         if (!selectionsLeft.length && this._viewModel.viewCells.length) {
             this._viewModel.updateSelectionsState({ kind: SelectionStateType.Index, focus: { start: 0, end: 1 }, selections: [{ start: 0, end: 1 }] });
         }
+        this.viewZones.layout();
     }
     getModelIndex(cell) {
         const viewIndex = this.indexOf(cell);
@@ -429,6 +438,30 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
             return viewIndexInfo.index;
         }
     }
+    convertModelIndexToViewIndex(modelIndex) {
+        if (!this.hiddenRangesPrefixSum) {
+            return modelIndex;
+        }
+        if (modelIndex >= this.hiddenRangesPrefixSum.getTotalSum()) {
+            return Math.min(this.length, this.hiddenRangesPrefixSum.getTotalSum());
+        }
+        return this.hiddenRangesPrefixSum.getIndexOf(modelIndex).index;
+    }
+    modelIndexIsVisible(modelIndex) {
+        if (!this.hiddenRangesPrefixSum) {
+            return true;
+        }
+        const viewIndexInfo = this.hiddenRangesPrefixSum.getIndexOf(modelIndex);
+        if (viewIndexInfo.remainder !== 0) {
+            if (modelIndex >= this.hiddenRangesPrefixSum.getTotalSum()) {
+                return true;
+            }
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
     _getVisibleRangesFromIndex(topViewIndex, topModelIndex, bottomViewIndex, bottomModelIndex) {
         const stack = [];
         const ranges = [];
@@ -752,18 +785,18 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
         const elementTop = this.view.elementTop(viewIndex);
         const element = this.view.element(viewIndex);
         if (element.editorAttached) {
-            this._revealRangeCommon(viewIndex, range, false, false);
+            this._revealRangeCommon(viewIndex, range);
         }
         else {
             const elementHeight = this.view.elementHeight(viewIndex);
-            let upwards = false;
+            let alignHint = undefined;
             if (elementTop + elementHeight <= scrollTop) {
                 this.view.setScrollTop(elementTop);
-                upwards = false;
+                alignHint = 'top';
             }
             else if (elementTop >= wrapperBottom) {
                 this.view.setScrollTop(elementTop - this.view.renderHeight / 2);
-                upwards = true;
+                alignHint = 'bottom';
             }
             const editorAttachedPromise = ( new Promise((resolve, reject) => {
                 element.onDidChangeEditorAttachState(() => {
@@ -771,7 +804,7 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
                 });
             }));
             return editorAttachedPromise.then(() => {
-                this._revealRangeCommon(viewIndex, range, true, upwards);
+                this._revealRangeCommon(viewIndex, range, alignHint);
             });
         }
     }
@@ -825,7 +858,7 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
             }
         }
     }
-    _revealRangeCommon(viewIndex, range, newlyCreated, alignToBottom) {
+    _revealRangeCommon(viewIndex, range, alignHint) {
         const element = this.view.element(viewIndex);
         const scrollTop = this.getViewScrollTop();
         const wrapperBottom = this.getViewScrollBottom();
@@ -843,13 +876,11 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
         else if (positionTop > wrapperBottom) {
             this.view.setScrollTop(scrollTop + positionTop - wrapperBottom + 30);
         }
-        else if (newlyCreated) {
-            if (alignToBottom) {
-                this.view.setScrollTop(scrollTop + positionTop - wrapperBottom + 30);
-            }
-            else {
-                this.view.setScrollTop(positionTop - 30);
-            }
+        else if (alignHint === 'bottom') {
+            this.view.setScrollTop(scrollTop + positionTop - wrapperBottom + 30);
+        }
+        else if (alignHint === 'top') {
+            this.view.setScrollTop(positionTop - 30);
         }
         element.revealRangeInCenter(range);
     }
@@ -868,6 +899,13 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
             }
         }
     }
+    revealOffsetInCenterIfOutsideViewport(offset) {
+        const scrollTop = this.getViewScrollTop();
+        const wrapperBottom = this.getViewScrollBottom();
+        if (offset < scrollTop || offset > wrapperBottom) {
+            this.view.setScrollTop(offset - this.view.renderHeight / 2);
+        }
+    }
     _revealInCenterIfOutsideViewport(viewIndex) {
         this._revealInternal(viewIndex, true, 1 );
     }
@@ -912,20 +950,32 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
                 });
             }
             this.view.updateElementHeight(index, size, anchorElementIndex);
+            this.viewZones.layout();
             return;
         }
         if (anchorElementIndex !== null) {
-            return this.view.updateElementHeight(index, size, anchorElementIndex);
+            this.view.updateElementHeight(index, size, anchorElementIndex);
+            this.viewZones.layout();
+            return;
         }
         const focused = this.getFocus();
         const focus = focused.length ? focused[0] : null;
         if (focus) {
             const heightDelta = size - this.view.elementHeight(index);
             if (this._notebookCellAnchor.shouldAnchor(this.view, focus, heightDelta, this.element(index))) {
-                return this.view.updateElementHeight(index, size, focus);
+                this.view.updateElementHeight(index, size, focus);
+                this.viewZones.layout();
+                return;
             }
         }
-        return this.view.updateElementHeight(index, size, null);
+        this.view.updateElementHeight(index, size, null);
+        this.viewZones.layout();
+        return;
+    }
+    changeViewZones(callback) {
+        if (this.viewZones.changeViewZones(callback)) {
+            this.viewZones.layout();
+        }
     }
     domFocus() {
         const focused = this.getFocusedElements()[0];
@@ -938,7 +988,16 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
         }
         super.domFocus();
     }
-    focusContainer() {
+    focusContainer(clearSelection) {
+        if (clearSelection) {
+            this._viewModel?.updateSelectionsState({
+                kind: SelectionStateType.Handle,
+                primary: null,
+                selections: []
+            }, 'view');
+            this.setFocus([], undefined, true);
+            this.setSelection([], undefined, true);
+        }
         super.domFocus();
     }
     getViewScrollTop() {
@@ -1058,6 +1117,7 @@ let NotebookCellList = class NotebookCellList extends WorkbenchList {
         this._viewModelStore.dispose();
         this._localDisposableStore.dispose();
         this._notebookCellAnchor.dispose();
+        this.viewZones.dispose();
         super.dispose();
         this._previousFocusedElements = [];
         this._viewModel = null;

package/vscode/src/vs/workbench/contrib/notebook/browser/view/notebookCellListView.js

@@ -1,12 +1,184 @@
 import { ListView } from '../../../../../base/browser/ui/list/listView.js';
+import { ConstantTimePrefixSumComputer } from '../../../../../editor/common/model/prefixSumComputer.js';
+class NotebookCellsLayout {
+    get paddingTop() {
+        return this._paddingTop;
+    }
+    set paddingTop(paddingTop) {
+        this._size = this._size + paddingTop - this._paddingTop;
+        this._paddingTop = paddingTop;
+    }
+    get count() {
+        return this._items.length;
+    }
+    get size() {
+        return this._size;
+    }
+    constructor(topPadding) {
+        this._items = [];
+        this._whitespace = [];
+        this._prefixSumComputer = ( new ConstantTimePrefixSumComputer([]));
+        this._size = 0;
+        this._paddingTop = 0;
+        this._paddingTop = topPadding ?? 0;
+        this._size = this._paddingTop;
+    }
+    getWhitespaces() {
+        return this._whitespace;
+    }
+    restoreWhitespace(items) {
+        this._whitespace = items;
+        this._size = this._paddingTop + this._items.reduce((total, item) => total + item.size, 0) + this._whitespace.reduce((total, ws) => total + ws.size, 0);
+    }
+    splice(index, deleteCount, items) {
+        const inserts = items ?? [];
+        this._items.splice(index, deleteCount, ...inserts);
+        this._size = this._paddingTop + this._items.reduce((total, item) => total + item.size, 0) + this._whitespace.reduce((total, ws) => total + ws.size, 0);
+        this._prefixSumComputer.removeValues(index, deleteCount);
+        const newSizes = [];
+        for (let i = 0; i < inserts.length; i++) {
+            const insertIndex = i + index;
+            const existingWhitespaces = this._whitespace.filter(ws => ws.afterPosition === insertIndex + 1);
+            if (existingWhitespaces.length > 0) {
+                newSizes.push(inserts[i].size + existingWhitespaces.reduce((acc, ws) => acc + ws.size, 0));
+            }
+            else {
+                newSizes.push(inserts[i].size);
+            }
+        }
+        this._prefixSumComputer.insertValues(index, newSizes);
+        for (let i = index; i < this._items.length; i++) {
+            const existingWhitespaces = this._whitespace.filter(ws => ws.afterPosition === i + 1);
+            if (existingWhitespaces.length > 0) {
+                this._prefixSumComputer.setValue(i, this._items[i].size + existingWhitespaces.reduce((acc, ws) => acc + ws.size, 0));
+            }
+            else {
+                this._prefixSumComputer.setValue(i, this._items[i].size);
+            }
+        }
+    }
+    insertWhitespace(id, afterPosition, size) {
+        let priority = 0;
+        const existingWhitespaces = this._whitespace.filter(ws => ws.afterPosition === afterPosition);
+        if (existingWhitespaces.length > 0) {
+            priority = Math.max(...( existingWhitespaces.map(ws => ws.priority))) + 1;
+        }
+        this._whitespace.push({ id, afterPosition: afterPosition, size, priority });
+        this._size += size;
+        this._whitespace.sort((a, b) => {
+            if (a.afterPosition === b.afterPosition) {
+                return a.priority - b.priority;
+            }
+            return a.afterPosition - b.afterPosition;
+        });
+        if (afterPosition > 0) {
+            const index = afterPosition - 1;
+            const itemSize = this._items[index].size;
+            const accSize = itemSize + size;
+            this._prefixSumComputer.setValue(index, accSize);
+        }
+    }
+    changeOneWhitespace(id, afterPosition, size) {
+        const whitespaceIndex = this._whitespace.findIndex(ws => ws.id === id);
+        if (whitespaceIndex !== -1) {
+            const whitespace = this._whitespace[whitespaceIndex];
+            const oldAfterPosition = whitespace.afterPosition;
+            whitespace.afterPosition = afterPosition;
+            const oldSize = whitespace.size;
+            const delta = size - oldSize;
+            whitespace.size = size;
+            this._size += delta;
+            if (oldAfterPosition > 0 && oldAfterPosition <= this._items.length) {
+                const index = oldAfterPosition - 1;
+                const itemSize = this._items[index].size;
+                const accSize = itemSize;
+                this._prefixSumComputer.setValue(index, accSize);
+            }
+            if (afterPosition > 0 && afterPosition <= this._items.length) {
+                const index = afterPosition - 1;
+                const itemSize = this._items[index].size;
+                const accSize = itemSize + size;
+                this._prefixSumComputer.setValue(index, accSize);
+            }
+        }
+    }
+    removeWhitespace(id) {
+        const whitespaceIndex = this._whitespace.findIndex(ws => ws.id === id);
+        if (whitespaceIndex !== -1) {
+            const whitespace = this._whitespace[whitespaceIndex];
+            this._whitespace.splice(whitespaceIndex, 1);
+            this._size -= whitespace.size;
+            if (whitespace.afterPosition > 0) {
+                const index = whitespace.afterPosition - 1;
+                const itemSize = this._items[index].size;
+                const remainingWhitespaces = this._whitespace.filter(ws => ws.afterPosition === whitespace.afterPosition);
+                const accSize = itemSize + remainingWhitespaces.reduce((acc, ws) => acc + ws.size, 0);
+                this._prefixSumComputer.setValue(index, accSize);
+            }
+        }
+    }
+    getWhitespacePosition(id) {
+        const whitespace = this._whitespace.find(ws => ws.id === id);
+        if (!whitespace) {
+            throw new Error('Whitespace not found');
+        }
+        const afterPosition = whitespace.afterPosition;
+        if (afterPosition === 0) {
+            const whitespaces = this._whitespace.filter(ws => ws.afterPosition === afterPosition && ws.priority < whitespace.priority);
+            return whitespaces.reduce((acc, ws) => acc + ws.size, 0) + this.paddingTop;
+        }
+        const whitespaceBeforeFirstItem = this._whitespace.filter(ws => ws.afterPosition === 0).reduce((acc, ws) => acc + ws.size, 0);
+        const index = afterPosition - 1;
+        const previousItemPosition = this._prefixSumComputer.getPrefixSum(index);
+        const previousItemSize = this._items[index].size;
+        const previousWhitespace = this._whitespace.filter(ws => ws.afterPosition === afterPosition - 1);
+        const whitespaceBefore = previousWhitespace.reduce((acc, ws) => acc + ws.size, 0);
+        return previousItemPosition + previousItemSize + whitespaceBeforeFirstItem + this.paddingTop + whitespaceBefore;
+    }
+    indexAt(position) {
+        if (position < 0) {
+            return -1;
+        }
+        const whitespaceBeforeFirstItem = this._whitespace.filter(ws => ws.afterPosition === 0).reduce((acc, ws) => acc + ws.size, 0);
+        const offset = position - (this._paddingTop + whitespaceBeforeFirstItem);
+        if (offset <= 0) {
+            return 0;
+        }
+        if (offset >= (this._size - this._paddingTop - whitespaceBeforeFirstItem)) {
+            return this.count;
+        }
+        return this._prefixSumComputer.getIndexOf(offset).index;
+    }
+    indexAfter(position) {
+        const index = this.indexAt(position);
+        return Math.min(index + 1, this._items.length);
+    }
+    positionAt(index) {
+        if (index < 0) {
+            return -1;
+        }
+        if (this.count === 0) {
+            return -1;
+        }
+        if (index >= this.count) {
+            return -1;
+        }
+        const whitespaceBeforeFirstItem = this._whitespace.filter(ws => ws.afterPosition === 0).reduce((acc, ws) => acc + ws.size, 0);
+        return this._prefixSumComputer.getPrefixSum(index ) + this._paddingTop + whitespaceBeforeFirstItem;
+    }
+}
 class NotebookCellListView extends ListView {
     constructor() {
         super(...arguments);
+        this._lastWhitespaceId = 0;
         this._renderingStack = 0;
     }
     get inRenderingTransaction() {
         return this._renderingStack > 0;
     }
+    get notebookRangeMap() {
+        return this.rangeMap;
+    }
     render(previousRenderRange, renderTop, renderHeight, renderLeft, scrollWidth, updateItemsInDOM) {
         this._renderingStack++;
         super.render(previousRenderRange, renderTop, renderHeight, renderLeft, scrollWidth, updateItemsInDOM);
@@ -17,5 +189,40 @@ class NotebookCellListView extends ListView {
         super._rerender(renderTop, renderHeight, inSmoothScrolling);
         this._renderingStack--;
     }
+    createRangeMap(paddingTop) {
+        const existingMap = this.rangeMap;
+        if (existingMap) {
+            const layout = ( new NotebookCellsLayout(paddingTop));
+            layout.restoreWhitespace(existingMap.getWhitespaces());
+            return layout;
+        }
+        else {
+            return ( new NotebookCellsLayout(paddingTop));
+        }
+    }
+    insertWhitespace(afterPosition, size) {
+        const scrollTop = this.scrollTop;
+        const id = `${++this._lastWhitespaceId}`;
+        const previousRenderRange = this.getRenderRange(this.lastRenderTop, this.lastRenderHeight);
+        const elementPosition = this.elementTop(afterPosition);
+        const aboveScrollTop = scrollTop > elementPosition;
+        this.notebookRangeMap.insertWhitespace(id, afterPosition, size);
+        const newScrolltop = aboveScrollTop ? scrollTop + size : scrollTop;
+        this.render(previousRenderRange, newScrolltop, this.lastRenderHeight, undefined, undefined, false);
+        this._rerender(newScrolltop, this.renderHeight, false);
+        this.eventuallyUpdateScrollDimensions();
+        return id;
+    }
+    changeOneWhitespace(id, newAfterPosition, newSize) {
+        this.notebookRangeMap.changeOneWhitespace(id, newAfterPosition, newSize);
+        this.eventuallyUpdateScrollDimensions();
+    }
+    removeWhitespace(id) {
+        this.notebookRangeMap.removeWhitespace(id);
+        this.eventuallyUpdateScrollDimensions();
+    }
+    getWhitespacePosition(id) {
+        return this.notebookRangeMap.getWhitespacePosition(id);
+    }
 }
-export { NotebookCellListView };
+export { NotebookCellListView, NotebookCellsLayout };

package/vscode/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.js

@@ -532,7 +532,7 @@ let BackLayerWebView = class BackLayerWebView extends Themable {
                         const latestCell = this.notebookEditor.getCellByInfo(resolvedResult.cellInfo);
                         if (latestCell) {
                             latestCell.outputIsFocused = true;
-                            this.notebookEditor.focusNotebookCell(latestCell, 'output', { skipReveal: true, outputWebviewFocused: true });
+                            this.notebookEditor.focusNotebookCell(latestCell, 'output', { outputId: resolvedResult.output.model.outputId, skipReveal: true, outputWebviewFocused: true });
                         }
                     }
                     break;

package/vscode/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.js

@@ -1,5 +1,5 @@
 import { __decorate, __param } from '../../../../../../../../../external/tslib/tslib.es6.js';
-import { PixelRatio } from '../../../../../../base/browser/browser.js';
+import { PixelRatio } from '../../../../../../base/browser/pixelRatio.js';
 import { append, $ as $$1, getWindow } from '../../../../../../base/browser/dom.js';
 import { FastDomNode } from '../../../../../../base/browser/fastDomNode.js';
 import { DisposableStore, Disposable } from '../../../../../../base/common/lifecycle.js';
@@ -40,11 +40,11 @@ import { CellKind } from '../../../common/notebookCommon.js';
 var MarkupCellRenderer_1, CodeCellRenderer_1;
 const $ = $$1;
 let NotebookCellListDelegate = class NotebookCellListDelegate extends Disposable {
-    constructor(configurationService) {
+    constructor(targetWindow, configurationService) {
         super();
         this.configurationService = configurationService;
         const editorOptions = this.configurationService.getValue('editor');
-        this.lineHeight = BareFontInfo.createFromRawSettings(editorOptions, PixelRatio.value).lineHeight;
+        this.lineHeight = BareFontInfo.createFromRawSettings(editorOptions, PixelRatio.getInstance(targetWindow).value).lineHeight;
     }
     getHeight(element) {
         return element.getHeight(this.lineHeight);
@@ -62,7 +62,7 @@ let NotebookCellListDelegate = class NotebookCellListDelegate extends Disposable
     }
 };
 NotebookCellListDelegate = ( __decorate([
-    ( __param(0, IConfigurationService))
+    ( __param(1, IConfigurationService))
 ], NotebookCellListDelegate));
 class AbstractCellRenderer {
     constructor(instantiationService, notebookEditor, contextMenuService, menuService, configurationService, keybindingService, notificationService, contextKeyServiceProvider, language, dndController) {