From d0c212ce1e49aaafd898e2cc64caa4b0ac726c9b Mon Sep 17 00:00:00 2001 From: rebornix Date: Fri, 16 Jul 2021 11:56:31 -0700 Subject: [PATCH] re #119776. --- .../notebook/browser/media/notebook.css | 20 +++++++++- .../notebook/browser/notebookEditorWidget.ts | 10 ++++- .../browser/view/renderers/codeCell.ts | 37 ++++++++++++++++++- .../notebook/common/notebookOptions.ts | 2 +- 4 files changed, 64 insertions(+), 5 deletions(-) diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css index 6c144850557..98a1735626a 100644 --- a/src/vs/workbench/contrib/notebook/browser/media/notebook.css +++ b/src/vs/workbench/contrib/notebook/browser/media/notebook.css @@ -345,9 +345,27 @@ box-sizing: border-box; } +.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part .cell-collapse-preview { + padding: 0px 8px; +} +.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part .cell-collapse-preview .monaco-tokenized-source { + font-size: var(--notebook-cell-input-preview-font-size); + font-family: var(--notebook-cell-input-preview-font-family); + cursor: pointer; +} + +.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part .cell-collapse-preview .monaco-tokenized-source:after { + color: grey; + margin: 0.1em 0.2em 0 0.2em; + content: "⋯"; + display: inline; + line-height: 1em; + cursor: pointer; +} + .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part .codicon { position: absolute; - padding: 2px 6px; + padding: 4px 6px; left: -30px; bottom: 0; cursor: pointer; diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts index 075d0283794..56f7546bc41 100644 --- a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts +++ b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts @@ -588,10 +588,13 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor const { bottomToolbarGap, bottomToolbarHeight } = this._notebookOptions.computeBottomToolbarDimensions(this.viewModel?.viewType); const styleSheets: string[] = []; + const fontFamily = this._fontInfo?.fontFamily ?? `"SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace`; styleSheets.push(` :root { --notebook-cell-output-font-size: ${fontSize}px; + --notebook-cell-input-preview-font-size: ${fontSize}px; + --notebook-cell-input-preview-font-family: ${fontFamily}; } `); @@ -771,7 +774,12 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor styleSheets.push(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-bottom { height: ${cellBottomMargin}px; }`); styleSheets.push(`.notebookOverlay .monaco-list .monaco-list-row .cell-shadow-container-bottom { top: ${cellBottomMargin}px; }`); - styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part { margin-left: ${codeCellLeftMargin + cellRunGutter}px; height: ${collapsedIndicatorHeight}px; }`); + styleSheets.push(` + .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part { margin-left: ${codeCellLeftMargin + cellRunGutter}px; height: ${collapsedIndicatorHeight}px; } + .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part .cell-collapse-preview { + line-height: ${collapsedIndicatorHeight}px; + } + `); styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container { height: ${bottomToolbarHeight}px }`); styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .cell-list-top-cell-toolbar-container { height: ${bottomToolbarHeight}px }`); diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts index 02ecec5c8f1..8c4ddb64bb1 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts @@ -8,6 +8,9 @@ import { raceCancellation } from 'vs/base/common/async'; import { CancellationTokenSource } from 'vs/base/common/cancellation'; import { Disposable, IDisposable } from 'vs/base/common/lifecycle'; import { IDimension } from 'vs/editor/common/editorCommon'; +import { IReadonlyTextBuffer } from 'vs/editor/common/model'; +import { TokenizationRegistry } from 'vs/editor/common/modes'; +import { tokenizeToString } from 'vs/editor/common/modes/textToHtmlTokenizer'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IOpenerService } from 'vs/platform/opener/common/opener'; import { CellFocusMode, CodeCellRenderTemplate, IActiveNotebookEditor } from 'vs/workbench/contrib/notebook/browser/notebookBrowser'; @@ -241,6 +244,34 @@ export class CodeCell extends Disposable { return true; } + private getRichText(buffer: IReadonlyTextBuffer, language: string) { + return tokenizeToString(buffer.getLineContent(1), TokenizationRegistry.get(language)!); + } + + private removeInputCollapsePreview() { + const children = this.templateData.collapsedPart.children; + let collapsePreviewElements = []; + + for (let i = 0; i < children.length; i++) { + if (children[i].classList.contains('cell-collapse-preview')) { + collapsePreviewElements.push(children[i]); + } + } + + collapsePreviewElements.forEach(element => { + element.parentElement?.removeChild(element); + }); + } + + private updateInputCollaseElement(): void { + this.removeInputCollapsePreview(); + const richEditorText = this.getRichText(this.viewCell.textBuffer, this.viewCell.language); + const element = DOM.$('div'); + element.classList.add('cell-collapse-preview'); + DOM.safeInnerHtml(element, richEditorText); + this.templateData.collapsedPart.appendChild(element); + } + private viewUpdateInputCollapsed(): void { DOM.hide(this.templateData.cellContainer); DOM.hide(this.templateData.runButtonContainer); @@ -248,6 +279,7 @@ export class CodeCell extends Disposable { DOM.show(this.templateData.outputContainer); this.templateData.container.classList.toggle('collapsed', true); this._outputContainerRenderer.viewUpdateShowOutputs(); + this.updateInputCollaseElement(); this.relayoutCell(); } @@ -257,9 +289,8 @@ export class CodeCell extends Disposable { DOM.show(this.templateData.runButtonContainer); DOM.show(this.templateData.collapsedPart); DOM.hide(this.templateData.outputContainer); - + this.removeInputCollapsePreview(); this._outputContainerRenderer.viewUpdateHideOuputs(); - this.templateData.container.classList.toggle('collapsed', false); this.templateData.container.classList.toggle('output-collapsed', true); @@ -274,6 +305,7 @@ export class CodeCell extends Disposable { this.templateData.container.classList.toggle('collapsed', true); this.templateData.container.classList.toggle('output-collapsed', true); this._outputContainerRenderer.viewUpdateHideOuputs(); + this.updateInputCollaseElement(); this.relayoutCell(); } @@ -281,6 +313,7 @@ export class CodeCell extends Disposable { DOM.show(this.templateData.cellContainer); DOM.show(this.templateData.runButtonContainer); DOM.hide(this.templateData.collapsedPart); + this.removeInputCollapsePreview(); DOM.show(this.templateData.outputContainer); this.templateData.container.classList.toggle('collapsed', false); this.templateData.container.classList.toggle('output-collapsed', false); diff --git a/src/vs/workbench/contrib/notebook/common/notebookOptions.ts b/src/vs/workbench/contrib/notebook/common/notebookOptions.ts index f51d3aa17e4..7e169f81b1d 100644 --- a/src/vs/workbench/contrib/notebook/common/notebookOptions.ts +++ b/src/vs/workbench/contrib/notebook/common/notebookOptions.ts @@ -138,7 +138,7 @@ export class NotebookOptions { editorTopPadding: EDITOR_TOP_PADDING, editorBottomPadding: 4, editorBottomPaddingWithoutStatusBar: 12, - collapsedIndicatorHeight: 24, + collapsedIndicatorHeight: 28, showCellStatusBar, globalToolbar, consolidatedOutputButton,