@codingame/monaco-vscode-api 1.85.0 → 1.85.2

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

@@ -0,0 +1,435 @@
+import { __decorate, __param } from '../../../../../../../../../external/tslib/tslib.es6.js';
+import * as dom from 'monaco-editor/esm/vs/base/browser/dom.js';
+import { raceCancellation } from 'monaco-editor/esm/vs/base/common/async.js';
+import { CancellationTokenSource } from 'monaco-editor/esm/vs/base/common/cancellation.js';
+import { Codicon } from 'monaco-editor/esm/vs/base/common/codicons.js';
+import { ThemeIcon } from 'monaco-editor/esm/vs/base/common/themables.js';
+import { Event } from 'monaco-editor/esm/vs/base/common/event.js';
+import { Disposable, toDisposable } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
+import * as strings from 'monaco-editor/esm/vs/base/common/strings.js';
+import { ILanguageService } from 'monaco-editor/esm/vs/editor/common/languages/language.js';
+import { tokenizeToStringSync } from 'monaco-editor/esm/vs/editor/common/languages/textToHtmlTokenizer.js';
+import { localizeWithPath } from 'monaco-editor/esm/vs/nls.js';
+import { IConfigurationService } from 'monaco-editor/esm/vs/platform/configuration/common/configuration.js';
+import { IInstantiationService } from 'monaco-editor/esm/vs/platform/instantiation/common/instantiation.js';
+import { IKeybindingService } from 'monaco-editor/esm/vs/platform/keybinding/common/keybinding.js';
+import { IOpenerService } from 'monaco-editor/esm/vs/platform/opener/common/opener.js';
+import { CellFocusMode, EXPAND_CELL_INPUT_COMMAND_ID } from '../../notebookBrowser.js';
+import { CellEditorOptions } from './cellEditorOptions.js';
+import { CellOutputContainer } from './cellOutput.js';
+import { CollapsedCodeCellExecutionIcon } from './codeCellExecutionIcon.js';
+import { outputDisplayLimit } from '../../viewModel/codeCellViewModel.js';
+import { INotebookExecutionStateService } from '../../../common/notebookExecutionStateService.js';
+import { WordHighlighterContribution } from 'monaco-editor/esm/vs/editor/contrib/wordHighlighter/browser/wordHighlighter.js';
+import { CodeActionController } from 'monaco-editor/esm/vs/editor/contrib/codeAction/browser/codeActionController.js';
+let CodeCell = class CodeCell extends Disposable {
+    constructor(notebookEditor, viewCell, templateData, instantiationService, keybindingService, openerService, languageService, configurationService, notebookExecutionStateService) {
+        super();
+        this.notebookEditor = notebookEditor;
+        this.viewCell = viewCell;
+        this.templateData = templateData;
+        this.instantiationService = instantiationService;
+        this.keybindingService = keybindingService;
+        this.languageService = languageService;
+        this.configurationService = configurationService;
+        this._isDisposed = false;
+        const 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], dom.getWindow(notebookEditor.getDomNode())));
+        const editorHeight = this.calculateInitEditorHeight();
+        this.initializeEditor(editorHeight);
+        this._renderedInputCollapseState = false;
+        this.registerViewCellLayoutChange();
+        this.registerCellEditorEventListeners();
+        this.registerDecorations();
+        this.registerMouseListener();
+        this._register(Event.any(this.viewCell.onDidStartExecution, this.viewCell.onDidStopExecution)((e) => {
+            this.cellParts.updateForExecutionState(this.viewCell, e);
+        }));
+        this._register(this.viewCell.onDidChangeState(e => {
+            this.cellParts.updateState(this.viewCell, e);
+            if (e.outputIsHoveredChanged) {
+                this.updateForOutputHover();
+            }
+            if (e.outputIsFocusedChanged) {
+                this.updateForOutputFocus();
+            }
+            if (e.metadataChanged || e.internalMetadataChanged) {
+                this.updateEditorOptions();
+            }
+            if (e.inputCollapsedChanged || e.outputCollapsedChanged) {
+                this.viewCell.pauseLayout();
+                const updated = this.updateForCollapseState();
+                this.viewCell.resumeLayout();
+                if (updated) {
+                    this.relayoutCell();
+                }
+            }
+            if (e.focusModeChanged) {
+                this.updateEditorForFocusModeChange();
+            }
+        }));
+        this.cellParts.scheduleRenderCell(this.viewCell);
+        this._register(toDisposable(() => {
+            this.cellParts.unrenderCell(this.viewCell);
+        }));
+        this.updateEditorOptions();
+        this.updateEditorForFocusModeChange();
+        this.updateForOutputHover();
+        this.updateForOutputFocus();
+        this.viewCell.editorHeight = editorHeight;
+        this._outputContainerRenderer.render();
+        this._renderedOutputCollapseState = false;
+        this.initialViewUpdateExpanded();
+        this._register(this.viewCell.onLayoutInfoRead(() => {
+            this.cellParts.prepareLayout();
+        }));
+        const executionItemElement = dom.append(this.templateData.cellInputCollapsedContainer, dom.$('.collapsed-execution-icon'));
+        this._register(toDisposable(() => {
+            executionItemElement.parentElement?.removeChild(executionItemElement);
+        }));
+        this._collapsedExecutionIcon = this._register(this.instantiationService.createInstance(CollapsedCodeCellExecutionIcon, this.notebookEditor, this.viewCell, executionItemElement));
+        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));
+    }
+    updateForLayout() {
+        this._pendingLayout?.dispose();
+        this._pendingLayout = dom.modify(dom.getWindow(this.notebookEditor.getDomNode()), () => {
+            this.cellParts.updateInternalLayoutNow(this.viewCell);
+        });
+    }
+    updateForOutputHover() {
+        this.templateData.container.classList.toggle('cell-output-hover', this.viewCell.outputIsHovered);
+    }
+    updateForOutputFocus() {
+        this.templateData.container.classList.toggle('cell-output-focus', this.viewCell.outputIsFocused);
+    }
+    calculateInitEditorHeight() {
+        const lineNum = this.viewCell.lineCount;
+        const lineHeight = this.viewCell.layoutInfo.fontInfo?.lineHeight || 17;
+        const editorPadding = this.notebookEditor.notebookOptions.computeEditorPadding(this.viewCell.internalMetadata, this.viewCell.uri);
+        const editorHeight = this.viewCell.layoutInfo.editorHeight === 0
+            ? lineNum * lineHeight + editorPadding.top + editorPadding.bottom
+            : this.viewCell.layoutInfo.editorHeight;
+        return editorHeight;
+    }
+    initializeEditor(initEditorHeight) {
+        const width = this.viewCell.layoutInfo.editorWidth;
+        this.layoutEditor({
+            width: width,
+            height: initEditorHeight
+        });
+        const cts = ( new CancellationTokenSource());
+        this._register({ dispose() { cts.dispose(true); } });
+        raceCancellation(this.viewCell.resolveTextModel(), cts.token).then(model => {
+            if (this._isDisposed) {
+                return;
+            }
+            if (model && this.templateData.editor) {
+                this._reigsterModelListeners(model);
+                this.templateData.editor.setModel(model);
+                this.viewCell.attachTextEditor(this.templateData.editor, this.viewCell.layoutInfo.estimatedHasHorizontalScrolling);
+                const focusEditorIfNeeded = () => {
+                    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.templateData.editor?.focus();
+                    }
+                };
+                focusEditorIfNeeded();
+                const realContentHeight = this.templateData.editor?.getContentHeight();
+                if (realContentHeight !== undefined && realContentHeight !== initEditorHeight) {
+                    this.onCellEditorHeightChange(realContentHeight);
+                }
+                focusEditorIfNeeded();
+            }
+        });
+    }
+    updateForOutputs() {
+        dom.setVisibility(this.viewCell.outputsViewModels.length > 0, this.templateData.focusSinkElement);
+    }
+    updateEditorOptions() {
+        const editor = this.templateData.editor;
+        if (!editor) {
+            return;
+        }
+        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) {
+            editor.updateOptions({ readOnly: this.notebookEditor.isReadOnly, padding: this.notebookEditor.notebookOptions.computeEditorPadding(this.viewCell.internalMetadata, this.viewCell.uri) });
+        }
+    }
+    registerViewCellLayoutChange() {
+        this._register(this.viewCell.onDidChangeLayout((e) => {
+            if (e.outerWidth !== undefined) {
+                const layoutInfo = this.templateData.editor.getLayoutInfo();
+                if (layoutInfo.width !== this.viewCell.layoutInfo.editorWidth) {
+                    this.onCellWidthChange();
+                }
+            }
+        }));
+    }
+    registerCellEditorEventListeners() {
+        this._register(this.templateData.editor.onDidContentSizeChange((e) => {
+            if (e.contentHeightChanged) {
+                if (this.viewCell.layoutInfo.editorHeight !== e.contentHeight) {
+                    this.onCellEditorHeightChange(e.contentHeight);
+                }
+            }
+        }));
+        this._register(this.templateData.editor.onDidChangeCursorSelection((e) => {
+            if (e.source === 'restoreState' || e.oldModelVersionId === 0) {
+                return;
+            }
+            const selections = this.templateData.editor.getSelections();
+            if (selections?.length) {
+                const contentHeight = this.templateData.editor.getContentHeight();
+                const layoutContentHeight = this.viewCell.layoutInfo.editorHeight;
+                if (contentHeight !== layoutContentHeight) {
+                    this.onCellEditorHeightChange(contentHeight);
+                }
+                const lastSelection = selections[selections.length - 1];
+                this.notebookEditor.revealRangeInViewAsync(this.viewCell, lastSelection);
+            }
+        }));
+        this._register(this.templateData.editor.onDidBlurEditorWidget(() => {
+            WordHighlighterContribution.get(this.templateData.editor)?.stopHighlighting();
+            CodeActionController.get(this.templateData.editor)?.hideCodeActions();
+            CodeActionController.get(this.templateData.editor)?.hideLightBulbWidget();
+        }));
+        this._register(this.templateData.editor.onDidFocusEditorWidget(() => {
+            WordHighlighterContribution.get(this.templateData.editor)?.restoreViewState(true);
+        }));
+    }
+    _reigsterModelListeners(model) {
+        this._register(model.onDidChangeTokens(() => {
+            if (this.viewCell.isInputCollapsed && this._inputCollapseElement) {
+                const content = this._getRichTextFromLineTokens(model);
+                dom.safeInnerHtml(this._inputCollapseElement, content);
+                this._attachInputExpandButton(this._inputCollapseElement);
+            }
+        }));
+    }
+    registerDecorations() {
+        this._register(this.viewCell.onCellDecorationsChanged((e) => {
+            e.added.forEach(options => {
+                if (options.className) {
+                    this.templateData.rootContainer.classList.add(options.className);
+                }
+                if (options.outputClassName) {
+                    this.notebookEditor.deltaCellContainerClassNames(this.viewCell.id, [options.outputClassName], []);
+                }
+            });
+            e.removed.forEach(options => {
+                if (options.className) {
+                    this.templateData.rootContainer.classList.remove(options.className);
+                }
+                if (options.outputClassName) {
+                    this.notebookEditor.deltaCellContainerClassNames(this.viewCell.id, [], [options.outputClassName]);
+                }
+            });
+        }));
+        this.viewCell.getCellDecorations().forEach(options => {
+            if (options.className) {
+                this.templateData.rootContainer.classList.add(options.className);
+            }
+            if (options.outputClassName) {
+                this.notebookEditor.deltaCellContainerClassNames(this.viewCell.id, [options.outputClassName], []);
+            }
+        });
+    }
+    registerMouseListener() {
+        this._register(this.templateData.editor.onMouseDown(e => {
+            if (e.event.rightButton) {
+                e.event.preventDefault();
+            }
+        }));
+    }
+    shouldUpdateDOMFocus() {
+        return this.notebookEditor.getActiveCell() === this.viewCell
+            && this.viewCell.focusMode === CellFocusMode.Editor
+            && (this.notebookEditor.hasEditorFocus() || this.notebookEditor.getDomNode().ownerDocument.activeElement === this.notebookEditor.getDomNode().ownerDocument.body);
+    }
+    updateEditorForFocusModeChange() {
+        if (this.shouldUpdateDOMFocus()) {
+            this.templateData.editor?.focus();
+        }
+        this.templateData.container.classList.toggle('cell-editor-focus', this.viewCell.focusMode === CellFocusMode.Editor);
+        this.templateData.container.classList.toggle('cell-output-focus', this.viewCell.focusMode === CellFocusMode.Output);
+    }
+    updateForCollapseState() {
+        if (this.viewCell.isOutputCollapsed === this._renderedOutputCollapseState &&
+            this.viewCell.isInputCollapsed === this._renderedInputCollapseState) {
+            return false;
+        }
+        this.viewCell.layoutChange({ editorHeight: true });
+        if (this.viewCell.isInputCollapsed) {
+            this._collapseInput();
+        }
+        else {
+            this._showInput();
+        }
+        if (this.viewCell.isOutputCollapsed) {
+            this._collapseOutput();
+        }
+        else {
+            this._showOutput(false);
+        }
+        this.relayoutCell();
+        this._renderedOutputCollapseState = this.viewCell.isOutputCollapsed;
+        this._renderedInputCollapseState = this.viewCell.isInputCollapsed;
+        return true;
+    }
+    _collapseInput() {
+        dom.hide(this.templateData.editorPart);
+        this.templateData.container.classList.toggle('input-collapsed', true);
+        this._removeInputCollapsePreview();
+        this._collapsedExecutionIcon.setVisibility(true);
+        const richEditorText = this.templateData.editor.hasModel() ? this._getRichTextFromLineTokens(this.templateData.editor.getModel()) : this._getRichText(this.viewCell.textBuffer, this.viewCell.language);
+        const element = dom.$('div.cell-collapse-preview');
+        dom.safeInnerHtml(element, richEditorText);
+        this._inputCollapseElement = element;
+        this.templateData.cellInputCollapsedContainer.appendChild(element);
+        this._attachInputExpandButton(element);
+        dom.show(this.templateData.cellInputCollapsedContainer);
+    }
+    _attachInputExpandButton(element) {
+        const expandIcon = dom.$('span.expandInputIcon');
+        const keybinding = this.keybindingService.lookupKeybinding(EXPAND_CELL_INPUT_COMMAND_ID);
+        if (keybinding) {
+            element.title = ( localizeWithPath(
+                'vs/workbench/contrib/notebook/browser/view/cellParts/codeCell',
+                'cellExpandInputButtonLabelWithDoubleClick',
+                "Double-click to expand cell input ({0})",
+                keybinding.getLabel()
+            ));
+            expandIcon.title = ( localizeWithPath(
+                'vs/workbench/contrib/notebook/browser/view/cellParts/codeCell',
+                'cellExpandInputButtonLabel',
+                "Expand Cell Input ({0})",
+                keybinding.getLabel()
+            ));
+        }
+        expandIcon.classList.add(...ThemeIcon.asClassNameArray(Codicon.more));
+        element.appendChild(expandIcon);
+    }
+    _showInput() {
+        this._collapsedExecutionIcon.setVisibility(false);
+        dom.show(this.templateData.editorPart);
+        dom.hide(this.templateData.cellInputCollapsedContainer);
+    }
+    _getRichText(buffer, language) {
+        return tokenizeToStringSync(this.languageService, buffer.getLineContent(1), language);
+    }
+    _getRichTextFromLineTokens(model) {
+        let result = `<div class="monaco-tokenized-source">`;
+        const firstLineTokens = model.tokenization.getLineTokens(1);
+        const viewLineTokens = firstLineTokens.inflate();
+        const line = model.getLineContent(1);
+        let startOffset = 0;
+        for (let j = 0, lenJ = viewLineTokens.getCount(); j < lenJ; j++) {
+            const type = viewLineTokens.getClassName(j);
+            const endIndex = viewLineTokens.getEndOffset(j);
+            result += `<span class="${type}">${strings.escape(line.substring(startOffset, endIndex))}</span>`;
+            startOffset = endIndex;
+        }
+        result += `</div>`;
+        return result;
+    }
+    _removeInputCollapsePreview() {
+        const children = this.templateData.cellInputCollapsedContainer.children;
+        const elements = [];
+        for (let i = 0; i < children.length; i++) {
+            if (children[i].classList.contains('cell-collapse-preview')) {
+                elements.push(children[i]);
+            }
+        }
+        elements.forEach(element => {
+            element.parentElement?.removeChild(element);
+        });
+    }
+    _updateOutputInnerContainer(hide) {
+        const children = this.templateData.outputContainer.domNode.children;
+        for (let i = 0; i < children.length; i++) {
+            if (children[i].classList.contains('output-inner-container')) {
+                dom.setVisibility(!hide, children[i]);
+            }
+        }
+    }
+    _collapseOutput() {
+        this.templateData.container.classList.toggle('output-collapsed', true);
+        dom.show(this.templateData.cellOutputCollapsedContainer);
+        this._updateOutputInnerContainer(true);
+        this._outputContainerRenderer.viewUpdateHideOuputs();
+    }
+    _showOutput(initRendering) {
+        this.templateData.container.classList.toggle('output-collapsed', false);
+        dom.hide(this.templateData.cellOutputCollapsedContainer);
+        this._updateOutputInnerContainer(false);
+        this._outputContainerRenderer.viewUpdateShowOutputs(initRendering);
+    }
+    initialViewUpdateExpanded() {
+        this.templateData.container.classList.toggle('input-collapsed', false);
+        dom.show(this.templateData.editorPart);
+        dom.hide(this.templateData.cellInputCollapsedContainer);
+        this.templateData.container.classList.toggle('output-collapsed', false);
+        this._showOutput(true);
+    }
+    layoutEditor(dimension) {
+        this.templateData.editor?.layout(dimension, true);
+    }
+    onCellWidthChange() {
+        if (!this.templateData.editor.hasModel()) {
+            return;
+        }
+        const realContentHeight = this.templateData.editor.getContentHeight();
+        this.viewCell.editorHeight = realContentHeight;
+        this.relayoutCell();
+        this.layoutEditor({
+            width: this.viewCell.layoutInfo.editorWidth,
+            height: realContentHeight
+        });
+    }
+    onCellEditorHeightChange(newHeight) {
+        const viewLayout = this.templateData.editor.getLayoutInfo();
+        this.viewCell.editorHeight = newHeight;
+        this.relayoutCell();
+        this.layoutEditor({
+            width: viewLayout.width,
+            height: newHeight
+        });
+    }
+    relayoutCell() {
+        this.notebookEditor.layoutNotebookCell(this.viewCell, this.viewCell.layoutInfo.totalHeight);
+    }
+    dispose() {
+        this._isDisposed = true;
+        if (this.shouldUpdateDOMFocus()) {
+            this.notebookEditor.focusContainer();
+        }
+        this.viewCell.detachTextEditor();
+        this._removeInputCollapsePreview();
+        this._outputContainerRenderer.dispose();
+        this._pendingLayout?.dispose();
+        super.dispose();
+    }
+};
+CodeCell = ( __decorate([
+    ( __param(3, IInstantiationService)),
+    ( __param(4, IKeybindingService)),
+    ( __param(5, IOpenerService)),
+    ( __param(6, ILanguageService)),
+    ( __param(7, IConfigurationService)),
+    ( __param(8, INotebookExecutionStateService))
+], CodeCell));
+export { CodeCell };

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

@@ -0,0 +1,95 @@
+import { __decorate, __param } from '../../../../../../../../../external/tslib/tslib.es6.js';
+import * as dom from 'monaco-editor/esm/vs/base/browser/dom.js';
+import { renderLabelWithIcons } from 'monaco-editor/esm/vs/base/browser/ui/iconLabel/iconLabels.js';
+import { Disposable } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
+import { localizeWithPath } from 'monaco-editor/esm/vs/nls.js';
+import { ThemeIcon } from 'monaco-editor/esm/vs/base/common/themables.js';
+import { successStateIcon, errorStateIcon, pendingStateIcon, executingStateIcon } from '../../notebookIcons.js';
+import { NotebookCellExecutionState } from '../../../common/notebookCommon.js';
+import { NotebookExecutionType, INotebookExecutionStateService } from '../../../common/notebookExecutionStateService.js';
+let CollapsedCodeCellExecutionIcon = class CollapsedCodeCellExecutionIcon extends Disposable {
+    constructor(_notebookEditor, _cell, _element, _executionStateService) {
+        super();
+        this._cell = _cell;
+        this._element = _element;
+        this._executionStateService = _executionStateService;
+        this._visible = false;
+        this._update();
+        this._register(this._executionStateService.onDidChangeExecution(e => {
+            if (e.type === NotebookExecutionType.cell && e.affectsCell(this._cell.uri)) {
+                this._update();
+            }
+        }));
+        this._register(this._cell.model.onDidChangeInternalMetadata(() => this._update()));
+    }
+    setVisibility(visible) {
+        this._visible = visible;
+        this._update();
+    }
+    _update() {
+        if (!this._visible) {
+            return;
+        }
+        const runState = this._executionStateService.getCellExecution(this._cell.uri);
+        const item = this._getItemForState(runState, this._cell.model.internalMetadata);
+        if (item) {
+            this._element.style.display = '';
+            dom.reset(this._element, ...renderLabelWithIcons(item.text));
+            this._element.title = item.tooltip ?? '';
+        }
+        else {
+            this._element.style.display = 'none';
+            dom.reset(this._element);
+        }
+    }
+    _getItemForState(runState, internalMetadata) {
+        const state = runState?.state;
+        const { lastRunSuccess } = internalMetadata;
+        if (!state && lastRunSuccess) {
+            return {
+                text: `$(${successStateIcon.id})`,
+                tooltip: ( localizeWithPath(
+                    'vs/workbench/contrib/notebook/browser/view/cellParts/codeCellExecutionIcon',
+                    'notebook.cell.status.success',
+                    "Success"
+                )),
+            };
+        }
+        else if (!state && lastRunSuccess === false) {
+            return {
+                text: `$(${errorStateIcon.id})`,
+                tooltip: ( localizeWithPath(
+                    'vs/workbench/contrib/notebook/browser/view/cellParts/codeCellExecutionIcon',
+                    'notebook.cell.status.failed',
+                    "Failed"
+                )),
+            };
+        }
+        else if (state === NotebookCellExecutionState.Pending || state === NotebookCellExecutionState.Unconfirmed) {
+            return {
+                text: `$(${pendingStateIcon.id})`,
+                tooltip: ( localizeWithPath(
+                    'vs/workbench/contrib/notebook/browser/view/cellParts/codeCellExecutionIcon',
+                    'notebook.cell.status.pending',
+                    "Pending"
+                )),
+            };
+        }
+        else if (state === NotebookCellExecutionState.Executing) {
+            const icon = ThemeIcon.modify(executingStateIcon, 'spin');
+            return {
+                text: `$(${icon.id})`,
+                tooltip: ( localizeWithPath(
+                    'vs/workbench/contrib/notebook/browser/view/cellParts/codeCellExecutionIcon',
+                    'notebook.cell.status.executing',
+                    "Executing"
+                )),
+            };
+        }
+        return;
+    }
+};
+CollapsedCodeCellExecutionIcon = ( __decorate([
+    ( __param(3, INotebookExecutionStateService))
+], CollapsedCodeCellExecutionIcon));
+export { CollapsedCodeCellExecutionIcon };

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

@@ -0,0 +1,107 @@
+import { __decorate, __param } from '../../../../../../../../../external/tslib/tslib.es6.js';
+import { ToolBar } from 'monaco-editor/esm/vs/base/browser/ui/toolbar/toolbar.js';
+import { Action } from 'monaco-editor/esm/vs/base/common/actions.js';
+import { DisposableStore } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
+import { EditorContextKeys } from 'monaco-editor/esm/vs/editor/common/editorContextKeys.js';
+import { localizeWithPath } from 'monaco-editor/esm/vs/nls.js';
+import { DropdownWithPrimaryActionViewItem } from '../../../../../../platform/actions/browser/dropdownWithPrimaryActionViewItem.js';
+import { createAndFillInActionBarActions } from 'monaco-editor/esm/vs/platform/actions/browser/menuEntryActionViewItem.js';
+import { MenuItemAction, IMenuService } from 'monaco-editor/esm/vs/platform/actions/common/actions.js';
+import { InputFocusedContext } from 'monaco-editor/esm/vs/platform/contextkey/common/contextkeys.js';
+import { IContextMenuService } from 'monaco-editor/esm/vs/platform/contextview/browser/contextView.js';
+import { IInstantiationService } from 'monaco-editor/esm/vs/platform/instantiation/common/instantiation.js';
+import { IKeybindingService } from 'monaco-editor/esm/vs/platform/keybinding/common/keybinding.js';
+import { CellContentPart } from '../cellPart.js';
+import { registerCellToolbarStickyScroll } from './cellToolbarStickyScroll.js';
+import { NOTEBOOK_CELL_EXECUTION_STATE, NOTEBOOK_CELL_LIST_FOCUSED, NOTEBOOK_EDITOR_FOCUSED, NOTEBOOK_CELL_TYPE } from '../../../common/notebookContextKeys.js';
+let RunToolbar = class RunToolbar extends CellContentPart {
+    constructor(notebookEditor, contextKeyService, cellContainer, runButtonContainer, menuService, keybindingService, contextMenuService, instantiationService) {
+        super();
+        this.notebookEditor = notebookEditor;
+        this.contextKeyService = contextKeyService;
+        this.cellContainer = cellContainer;
+        this.runButtonContainer = runButtonContainer;
+        this.keybindingService = keybindingService;
+        this.contextMenuService = contextMenuService;
+        this.instantiationService = instantiationService;
+        this.primaryMenu = this._register(menuService.createMenu(this.notebookEditor.creationOptions.menuIds.cellExecutePrimary, contextKeyService));
+        this.secondaryMenu = this._register(menuService.createMenu(this.notebookEditor.creationOptions.menuIds.cellExecuteToolbar, contextKeyService));
+        this.createRunCellToolbar(runButtonContainer, cellContainer, contextKeyService);
+        const updateActions = () => {
+            const actions = this.getCellToolbarActions(this.primaryMenu);
+            const primary = actions.primary[0];
+            this.toolbar.setActions(primary ? [primary] : []);
+        };
+        updateActions();
+        this._register(this.primaryMenu.onDidChange(updateActions));
+        this._register(this.secondaryMenu.onDidChange(updateActions));
+        this._register(this.notebookEditor.notebookOptions.onDidChangeOptions(updateActions));
+    }
+    didRenderCell(element) {
+        this.cellDisposables.add(registerCellToolbarStickyScroll(this.notebookEditor, element, this.runButtonContainer));
+        this.toolbar.context = {
+            ui: true,
+            cell: element,
+            notebookEditor: this.notebookEditor,
+            $mid: 13
+        };
+    }
+    getCellToolbarActions(menu) {
+        const primary = [];
+        const secondary = [];
+        const result = { primary, secondary };
+        createAndFillInActionBarActions(menu, { shouldForwardArgs: true }, result, g => /^inline/.test(g));
+        return result;
+    }
+    createRunCellToolbar(container, cellContainer, contextKeyService) {
+        const actionViewItemDisposables = this._register(( new DisposableStore()));
+        const dropdownAction = this._register(( new Action('notebook.moreRunActions', ( localizeWithPath(
+            'vs/workbench/contrib/notebook/browser/view/cellParts/codeCellRunToolbar',
+            'notebook.moreRunActionsLabel',
+            "More..."
+        )), 'codicon-chevron-down', true)));
+        const keybindingProvider = (action) => this.keybindingService.lookupKeybinding(action.id, executionContextKeyService);
+        const executionContextKeyService = this._register(getCodeCellExecutionContextKeyService(contextKeyService));
+        this.toolbar = this._register(( new ToolBar(container, this.contextMenuService, {
+            getKeyBinding: keybindingProvider,
+            actionViewItemProvider: _action => {
+                actionViewItemDisposables.clear();
+                const primary = this.getCellToolbarActions(this.primaryMenu).primary[0];
+                if (!(primary instanceof MenuItemAction)) {
+                    return undefined;
+                }
+                const secondary = this.getCellToolbarActions(this.secondaryMenu).secondary;
+                if (!secondary.length) {
+                    return undefined;
+                }
+                const item = this.instantiationService.createInstance(DropdownWithPrimaryActionViewItem, primary, dropdownAction, secondary, 'notebook-cell-run-toolbar', this.contextMenuService, {
+                    getKeyBinding: keybindingProvider
+                });
+                actionViewItemDisposables.add(item.onDidChangeDropdownVisibility(visible => {
+                    cellContainer.classList.toggle('cell-run-toolbar-dropdown-active', visible);
+                }));
+                return item;
+            },
+            renderDropdownAsChildElement: true
+        })));
+    }
+};
+RunToolbar = ( __decorate([
+    ( __param(4, IMenuService)),
+    ( __param(5, IKeybindingService)),
+    ( __param(6, IContextMenuService)),
+    ( __param(7, IInstantiationService))
+], RunToolbar));
+function getCodeCellExecutionContextKeyService(contextKeyService) {
+    const executionContextKeyService = contextKeyService.createScoped(document.createElement('div'));
+    InputFocusedContext.bindTo(executionContextKeyService).set(true);
+    EditorContextKeys.editorTextFocus.bindTo(executionContextKeyService).set(true);
+    EditorContextKeys.focus.bindTo(executionContextKeyService).set(true);
+    EditorContextKeys.textInputFocus.bindTo(executionContextKeyService).set(true);
+    NOTEBOOK_CELL_EXECUTION_STATE.bindTo(executionContextKeyService).set('idle');
+    NOTEBOOK_CELL_LIST_FOCUSED.bindTo(executionContextKeyService).set(true);
+    NOTEBOOK_EDITOR_FOCUSED.bindTo(executionContextKeyService).set(true);
+    NOTEBOOK_CELL_TYPE.bindTo(executionContextKeyService).set('code');
+    return executionContextKeyService;
+}
+export { RunToolbar, getCodeCellExecutionContextKeyService };

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

@@ -0,0 +1,29 @@
+import * as dom from 'monaco-editor/esm/vs/base/browser/dom.js';
+import { CellContentPart } from '../cellPart.js';
+class CollapsedCellInput extends CellContentPart {
+    constructor(notebookEditor, cellInputCollapsedContainer) {
+        super();
+        this.notebookEditor = notebookEditor;
+        this._register(dom.addDisposableListener(cellInputCollapsedContainer, dom.EventType.DBLCLICK, e => {
+            if (!this.currentCell || !this.notebookEditor.hasModel()) {
+                return;
+            }
+            if (this.currentCell.isInputCollapsed) {
+                this.currentCell.isInputCollapsed = false;
+            }
+            else {
+                this.currentCell.isOutputCollapsed = false;
+            }
+        }));
+        this._register(dom.addDisposableListener(cellInputCollapsedContainer, dom.EventType.CLICK, e => {
+            if (!this.currentCell || !this.notebookEditor.hasModel()) {
+                return;
+            }
+            const element = e.target;
+            if (element && element.classList && element.classList.contains('expandInputIcon')) {
+                this.currentCell.isInputCollapsed = false;
+            }
+        }));
+    }
+}
+export { CollapsedCellInput };