@codingame/monaco-vscode-api 8.0.4 → 9.0.0

package/vscode/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffEditorBrowser.js

@@ -0,0 +1,28 @@
+import { RawContextKey } from '../../../../../platform/contextkey/common/contextkey.js';
+import { localize } from '../../../../../nls.js';
+var DiffSide;
+( ((function(DiffSide) {
+    DiffSide[DiffSide["Original"] = 0] = "Original";
+    DiffSide[DiffSide["Modified"] = 1] = "Modified";
+})(DiffSide || (DiffSide = {}))));
+const DIFF_CELL_MARGIN = 16;
+const NOTEBOOK_DIFF_CELL_INPUT = ( (new RawContextKey('notebook.diffEditor.cell.inputChanged', false)));
+const NOTEBOOK_DIFF_CELL_IGNORE_WHITESPACE_KEY = 'notebook.diffEditor.cell.ignoreWhitespace';
+const NOTEBOOK_DIFF_CELL_IGNORE_WHITESPACE = ( (new RawContextKey(NOTEBOOK_DIFF_CELL_IGNORE_WHITESPACE_KEY, false)));
+const NOTEBOOK_DIFF_CELL_PROPERTY = ( (new RawContextKey('notebook.diffEditor.cell.property.changed', false)));
+const NOTEBOOK_DIFF_CELL_PROPERTY_EXPANDED = ( (new RawContextKey('notebook.diffEditor.cell.property.expanded', false)));
+const NOTEBOOK_DIFF_CELLS_COLLAPSED = ( (new RawContextKey('notebook.diffEditor.allCollapsed', undefined, ( localize(10759, "Whether all cells in notebook diff editor are collapsed")))));
+const NOTEBOOK_DIFF_HAS_UNCHANGED_CELLS = ( (new RawContextKey('notebook.diffEditor.hasUnchangedCells', undefined, ( localize(10760, "Whether there are unchanged cells in the notebook diff editor")))));
+const NOTEBOOK_DIFF_UNCHANGED_CELLS_HIDDEN = ( (new RawContextKey('notebook.diffEditor.unchangedCellsAreHidden', undefined, ( localize(
+ 10761,
+ "Whether the unchanged cells in the notebook diff editor are hidden"
+)))));
+const NOTEBOOK_DIFF_ITEM_KIND = ( (new RawContextKey('notebook.diffEditor.item.kind', undefined, ( localize(
+ 10762,
+ "The kind of item in the notebook diff editor, Cell, Metadata or Output"
+)))));
+const NOTEBOOK_DIFF_ITEM_DIFF_STATE = ( (new RawContextKey('notebook.diffEditor.item.state', undefined, ( localize(
+ 10763,
+ "The diff state of item in the notebook diff editor, delete, insert, modified or unchanged"
+)))));
+export { DIFF_CELL_MARGIN, DiffSide, NOTEBOOK_DIFF_CELLS_COLLAPSED, NOTEBOOK_DIFF_CELL_IGNORE_WHITESPACE, NOTEBOOK_DIFF_CELL_IGNORE_WHITESPACE_KEY, NOTEBOOK_DIFF_CELL_INPUT, NOTEBOOK_DIFF_CELL_PROPERTY, NOTEBOOK_DIFF_CELL_PROPERTY_EXPANDED, NOTEBOOK_DIFF_HAS_UNCHANGED_CELLS, NOTEBOOK_DIFF_ITEM_DIFF_STATE, NOTEBOOK_DIFF_ITEM_KIND, NOTEBOOK_DIFF_UNCHANGED_CELLS_HIDDEN };

package/vscode/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffList.js

@@ -0,0 +1,445 @@
+import { __decorate, __param } from '../../../../../../../../external/tslib/tslib.es6.js';
+import './notebookDiff.css.js';
+import { $, append, createStyleSheet } from '../../../../../base/browser/dom.js';
+import { MouseController, isMonacoEditor } from '../../../../../base/browser/ui/list/listWidget.js';
+import { DisposableStore } from '../../../../../base/common/lifecycle.js';
+import { IConfigurationService } from '../../../../../platform/configuration/common/configuration.service.js';
+import { IContextKeyService } from '../../../../../platform/contextkey/common/contextkey.service.js';
+import { IInstantiationService } from '../../../../../platform/instantiation/common/instantiation.js';
+import { IKeybindingService } from '../../../../../platform/keybinding/common/keybinding.service.js';
+import { WorkbenchList } from '../../../../../platform/list/browser/listService.js';
+import { IListService } from '../../../../../platform/list/browser/listService.service.js';
+import { IThemeService } from '../../../../../platform/theme/common/themeService.service.js';
+import { DIFF_CELL_MARGIN } from './notebookDiffEditorBrowser.js';
+import { CellDiffPlaceholderElement, getOptimizedNestedCodeEditorWidgetOptions, ModifiedElement, CollapsedCellOverlayWidget, InsertElement, DeletedElement, UnchangedCellOverlayWidget } from './diffComponents.js';
+import { CodeEditorWidget } from '../../../../../editor/browser/widget/codeEditor/codeEditorWidget.js';
+import { DiffEditorWidget } from '../../../../../editor/browser/widget/diffEditor/diffEditorWidget.js';
+import { MenuItemAction } from '../../../../../platform/actions/common/actions.js';
+import { IMenuService } from '../../../../../platform/actions/common/actions.service.js';
+import { IContextMenuService } from '../../../../../platform/contextview/browser/contextView.service.js';
+import { INotificationService } from '../../../../../platform/notification/common/notification.service.js';
+import { CodiconActionViewItem } from '../view/cellParts/cellActionView.js';
+import { BareFontInfo } from '../../../../../editor/common/config/fontInfo.js';
+import { PixelRatio } from '../../../../../base/browser/pixelRatio.js';
+import { WorkbenchToolBar } from '../../../../../platform/actions/browser/toolbar.js';
+import { fixedDiffEditorOptions, fixedEditorOptions } from './diffCellEditorOptions.js';
+import { IAccessibilityService } from '../../../../../platform/accessibility/common/accessibility.service.js';
+import { localize } from '../../../../../nls.js';
+var CellDiffPlaceholderRenderer_1, CellDiffSingleSideRenderer_1, CellDiffSideBySideRenderer_1;
+let NotebookCellTextDiffListDelegate = class NotebookCellTextDiffListDelegate {
+    constructor(targetWindow, configurationService) {
+        this.configurationService = configurationService;
+        const editorOptions = this.configurationService.getValue('editor');
+        this.lineHeight = BareFontInfo.createFromRawSettings(editorOptions, PixelRatio.getInstance(targetWindow).value).lineHeight;
+    }
+    getHeight(element) {
+        return element.getHeight(this.lineHeight);
+    }
+    hasDynamicHeight(element) {
+        return false;
+    }
+    getTemplateId(element) {
+        switch (element.type) {
+            case 'delete':
+            case 'insert':
+                return CellDiffSingleSideRenderer.TEMPLATE_ID;
+            case 'modified':
+            case 'unchanged':
+                return CellDiffSideBySideRenderer.TEMPLATE_ID;
+            case 'placeholder':
+                return CellDiffPlaceholderRenderer.TEMPLATE_ID;
+        }
+    }
+};
+NotebookCellTextDiffListDelegate = ( (__decorate([
+    ( (__param(1, IConfigurationService)))
+], NotebookCellTextDiffListDelegate)));
+let CellDiffPlaceholderRenderer = class CellDiffPlaceholderRenderer {
+    static { CellDiffPlaceholderRenderer_1 = this; }
+    static { this.TEMPLATE_ID = 'cell_diff_placeholder'; }
+    constructor(notebookEditor, instantiationService) {
+        this.notebookEditor = notebookEditor;
+        this.instantiationService = instantiationService;
+    }
+    get templateId() {
+        return CellDiffPlaceholderRenderer_1.TEMPLATE_ID;
+    }
+    renderTemplate(container) {
+        const body = $('.cell-placeholder-body');
+        append(container, body);
+        const elementDisposables = ( (new DisposableStore()));
+        const marginOverlay = ( (new CollapsedCellOverlayWidget(body)));
+        const contents = append(body, $('.contents'));
+        const placeholder = append(contents, $('span.text', { title: ( localize(10758, 'Double click to show')) }));
+        return {
+            body,
+            container,
+            placeholder,
+            marginOverlay,
+            elementDisposables
+        };
+    }
+    renderElement(element, index, templateData, height) {
+        templateData.body.classList.remove('left', 'right', 'full');
+        templateData.elementDisposables.add(this.instantiationService.createInstance(CellDiffPlaceholderElement, element, templateData));
+    }
+    disposeTemplate(templateData) {
+        templateData.container.innerText = '';
+    }
+    disposeElement(element, index, templateData) {
+        templateData.elementDisposables.clear();
+    }
+};
+CellDiffPlaceholderRenderer = CellDiffPlaceholderRenderer_1 = ( (__decorate([
+    ( (__param(1, IInstantiationService)))
+], CellDiffPlaceholderRenderer)));
+let CellDiffSingleSideRenderer = class CellDiffSingleSideRenderer {
+    static { CellDiffSingleSideRenderer_1 = this; }
+    static { this.TEMPLATE_ID = 'cell_diff_single'; }
+    constructor(notebookEditor, instantiationService) {
+        this.notebookEditor = notebookEditor;
+        this.instantiationService = instantiationService;
+    }
+    get templateId() {
+        return CellDiffSingleSideRenderer_1.TEMPLATE_ID;
+    }
+    renderTemplate(container) {
+        const body = $('.cell-body');
+        append(container, body);
+        const diffEditorContainer = $('.cell-diff-editor-container');
+        append(body, diffEditorContainer);
+        const diagonalFill = append(body, $('.diagonal-fill'));
+        const cellHeaderContainer = append(diffEditorContainer, $('.input-header-container'));
+        const sourceContainer = append(diffEditorContainer, $('.source-container'));
+        const { editor, editorContainer } = this._buildSourceEditor(sourceContainer);
+        const metadataHeaderContainer = append(diffEditorContainer, $('.metadata-header-container'));
+        const metadataInfoContainer = append(diffEditorContainer, $('.metadata-info-container'));
+        const outputHeaderContainer = append(diffEditorContainer, $('.output-header-container'));
+        const outputInfoContainer = append(diffEditorContainer, $('.output-info-container'));
+        const borderContainer = append(body, $('.border-container'));
+        const leftBorder = append(borderContainer, $('.left-border'));
+        const rightBorder = append(borderContainer, $('.right-border'));
+        const topBorder = append(borderContainer, $('.top-border'));
+        const bottomBorder = append(borderContainer, $('.bottom-border'));
+        return {
+            body,
+            container,
+            editorContainer,
+            diffEditorContainer,
+            diagonalFill,
+            cellHeaderContainer,
+            sourceEditor: editor,
+            metadataHeaderContainer,
+            metadataInfoContainer,
+            outputHeaderContainer,
+            outputInfoContainer,
+            leftBorder,
+            rightBorder,
+            topBorder,
+            bottomBorder,
+            elementDisposables: ( (new DisposableStore()))
+        };
+    }
+    _buildSourceEditor(sourceContainer) {
+        const editorContainer = append(sourceContainer, $('.editor-container'));
+        const editor = this.instantiationService.createInstance(CodeEditorWidget, editorContainer, {
+            ...fixedEditorOptions,
+            glyphMargin: false,
+            dimension: {
+                width: (this.notebookEditor.getLayoutInfo().width - 2 * DIFF_CELL_MARGIN) / 2 - 18,
+                height: 0
+            },
+            automaticLayout: false,
+            overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode()
+        }, {});
+        return { editor, editorContainer };
+    }
+    renderElement(element, index, templateData, height) {
+        templateData.body.classList.remove('left', 'right', 'full');
+        switch (element.type) {
+            case 'delete':
+                templateData.elementDisposables.add(this.instantiationService.createInstance(DeletedElement, this.notebookEditor, element, templateData));
+                return;
+            case 'insert':
+                templateData.elementDisposables.add(this.instantiationService.createInstance(InsertElement, this.notebookEditor, element, templateData));
+                return;
+        }
+    }
+    disposeTemplate(templateData) {
+        templateData.container.innerText = '';
+        templateData.sourceEditor.dispose();
+        templateData.elementDisposables.dispose();
+    }
+    disposeElement(element, index, templateData) {
+        templateData.elementDisposables.clear();
+    }
+};
+CellDiffSingleSideRenderer = CellDiffSingleSideRenderer_1 = ( (__decorate([
+    ( (__param(1, IInstantiationService)))
+], CellDiffSingleSideRenderer)));
+let CellDiffSideBySideRenderer = class CellDiffSideBySideRenderer {
+    static { CellDiffSideBySideRenderer_1 = this; }
+    static { this.TEMPLATE_ID = 'cell_diff_side_by_side'; }
+    constructor(notebookEditor, instantiationService, contextMenuService, keybindingService, menuService, contextKeyService, notificationService, themeService, accessibilityService) {
+        this.notebookEditor = notebookEditor;
+        this.instantiationService = instantiationService;
+        this.contextMenuService = contextMenuService;
+        this.keybindingService = keybindingService;
+        this.menuService = menuService;
+        this.contextKeyService = contextKeyService;
+        this.notificationService = notificationService;
+        this.themeService = themeService;
+        this.accessibilityService = accessibilityService;
+    }
+    get templateId() {
+        return CellDiffSideBySideRenderer_1.TEMPLATE_ID;
+    }
+    renderTemplate(container) {
+        const body = $('.cell-body');
+        append(container, body);
+        const diffEditorContainer = $('.cell-diff-editor-container');
+        append(body, diffEditorContainer);
+        const cellHeaderContainer = append(diffEditorContainer, $('.input-header-container'));
+        const sourceContainer = append(diffEditorContainer, $('.source-container'));
+        const { editor, editorContainer } = this._buildSourceEditor(sourceContainer);
+        const inputToolbarContainer = append(sourceContainer, $('.editor-input-toolbar-container'));
+        const cellToolbarContainer = append(inputToolbarContainer, $('div.property-toolbar'));
+        const toolbar = this.instantiationService.createInstance(WorkbenchToolBar, cellToolbarContainer, {
+            actionViewItemProvider: (action, options) => {
+                if (action instanceof MenuItemAction) {
+                    const item = ( (new CodiconActionViewItem(
+                        action,
+                        { hoverDelegate: options.hoverDelegate },
+                        this.keybindingService,
+                        this.notificationService,
+                        this.contextKeyService,
+                        this.themeService,
+                        this.contextMenuService,
+                        this.accessibilityService
+                    )));
+                    return item;
+                }
+                return undefined;
+            },
+            highlightToggledItems: true
+        });
+        const metadataHeaderContainer = append(diffEditorContainer, $('.metadata-header-container'));
+        const metadataInfoContainer = append(diffEditorContainer, $('.metadata-info-container'));
+        const outputHeaderContainer = append(diffEditorContainer, $('.output-header-container'));
+        const outputInfoContainer = append(diffEditorContainer, $('.output-info-container'));
+        const borderContainer = append(body, $('.border-container'));
+        const leftBorder = append(borderContainer, $('.left-border'));
+        const rightBorder = append(borderContainer, $('.right-border'));
+        const topBorder = append(borderContainer, $('.top-border'));
+        const bottomBorder = append(borderContainer, $('.bottom-border'));
+        const marginOverlay = ( (new UnchangedCellOverlayWidget(body)));
+        const elementDisposables = ( (new DisposableStore()));
+        return {
+            body,
+            container,
+            diffEditorContainer,
+            cellHeaderContainer,
+            sourceEditor: editor,
+            editorContainer,
+            inputToolbarContainer,
+            toolbar,
+            metadataHeaderContainer,
+            metadataInfoContainer,
+            outputHeaderContainer,
+            outputInfoContainer,
+            leftBorder,
+            rightBorder,
+            topBorder,
+            bottomBorder,
+            marginOverlay,
+            elementDisposables
+        };
+    }
+    _buildSourceEditor(sourceContainer) {
+        const editorContainer = append(sourceContainer, $('.editor-container'));
+        const editor = this.instantiationService.createInstance(DiffEditorWidget, editorContainer, {
+            ...fixedDiffEditorOptions,
+            overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode(),
+            originalEditable: false,
+            ignoreTrimWhitespace: false,
+            automaticLayout: false,
+            dimension: {
+                height: 0,
+                width: 0
+            },
+            renderSideBySide: true,
+            useInlineViewWhenSpaceIsLimited: false
+        }, {
+            originalEditor: getOptimizedNestedCodeEditorWidgetOptions(),
+            modifiedEditor: getOptimizedNestedCodeEditorWidgetOptions()
+        });
+        return {
+            editor,
+            editorContainer
+        };
+    }
+    renderElement(element, index, templateData, height) {
+        templateData.body.classList.remove('left', 'right', 'full');
+        switch (element.type) {
+            case 'unchanged':
+                templateData.elementDisposables.add(this.instantiationService.createInstance(ModifiedElement, this.notebookEditor, element, templateData));
+                return;
+            case 'modified':
+                templateData.elementDisposables.add(this.instantiationService.createInstance(ModifiedElement, this.notebookEditor, element, templateData));
+                return;
+        }
+    }
+    disposeTemplate(templateData) {
+        templateData.container.innerText = '';
+        templateData.sourceEditor.dispose();
+        templateData.toolbar?.dispose();
+        templateData.elementDisposables.dispose();
+    }
+    disposeElement(element, index, templateData) {
+        if (templateData.toolbar) {
+            templateData.toolbar.context = undefined;
+        }
+        templateData.elementDisposables.clear();
+    }
+};
+CellDiffSideBySideRenderer = CellDiffSideBySideRenderer_1 = ( (__decorate([
+    ( (__param(1, IInstantiationService))),
+    ( (__param(2, IContextMenuService))),
+    ( (__param(3, IKeybindingService))),
+    ( (__param(4, IMenuService))),
+    ( (__param(5, IContextKeyService))),
+    ( (__param(6, INotificationService))),
+    ( (__param(7, IThemeService))),
+    ( (__param(8, IAccessibilityService)))
+], CellDiffSideBySideRenderer)));
+class NotebookMouseController extends MouseController {
+    onViewPointer(e) {
+        if (isMonacoEditor(e.browserEvent.target)) {
+            const focus = typeof e.index === 'undefined' ? [] : [e.index];
+            this.list.setFocus(focus, e.browserEvent);
+        }
+        else {
+            super.onViewPointer(e);
+        }
+    }
+}
+let NotebookTextDiffList = class NotebookTextDiffList extends WorkbenchList {
+    get rowsContainer() {
+        return this.view.containerDomNode;
+    }
+    constructor(listUser, container, delegate, renderers, contextKeyService, options, listService, configurationService, instantiationService) {
+        super(listUser, container, delegate, renderers, options, contextKeyService, listService, configurationService, instantiationService);
+    }
+    createMouseController(options) {
+        return (
+             (new NotebookMouseController(this))
+        );
+    }
+    getCellViewScrollTop(element) {
+        const index = this.indexOf(element);
+        return this.view.elementTop(index);
+    }
+    getScrollHeight() {
+        return this.view.scrollHeight;
+    }
+    triggerScrollFromMouseWheelEvent(browserEvent) {
+        this.view.delegateScrollFromMouseWheelEvent(browserEvent);
+    }
+    delegateVerticalScrollbarPointerDown(browserEvent) {
+        this.view.delegateVerticalScrollbarPointerDown(browserEvent);
+    }
+    clear() {
+        super.splice(0, this.length);
+    }
+    updateElementHeight2(element, size) {
+        const viewIndex = this.indexOf(element);
+        const focused = this.getFocus();
+        this.view.updateElementHeight(viewIndex, size, focused.length ? focused[0] : null);
+    }
+    style(styles) {
+        const selectorSuffix = this.view.domId;
+        if (!this.styleElement) {
+            this.styleElement = createStyleSheet(this.view.domNode);
+        }
+        const suffix = selectorSuffix && `.${selectorSuffix}`;
+        const content = [];
+        if (styles.listBackground) {
+            content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows { background: ${styles.listBackground}; }`);
+        }
+        if (styles.listFocusBackground) {
+            content.push(`.monaco-list${suffix}:focus > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused { background-color: ${styles.listFocusBackground}; }`);
+            content.push(`.monaco-list${suffix}:focus > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused:hover { background-color: ${styles.listFocusBackground}; }`);
+        }
+        if (styles.listFocusForeground) {
+            content.push(`.monaco-list${suffix}:focus > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused { color: ${styles.listFocusForeground}; }`);
+        }
+        if (styles.listActiveSelectionBackground) {
+            content.push(`.monaco-list${suffix}:focus > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.selected { background-color: ${styles.listActiveSelectionBackground}; }`);
+            content.push(`.monaco-list${suffix}:focus > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.selected:hover { background-color: ${styles.listActiveSelectionBackground}; }`);
+        }
+        if (styles.listActiveSelectionForeground) {
+            content.push(`.monaco-list${suffix}:focus > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.selected { color: ${styles.listActiveSelectionForeground}; }`);
+        }
+        if (styles.listFocusAndSelectionBackground) {
+            content.push(`
+				.monaco-drag-image,
+				.monaco-list${suffix}:focus > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.selected.focused { background-color: ${styles.listFocusAndSelectionBackground}; }
+			`);
+        }
+        if (styles.listFocusAndSelectionForeground) {
+            content.push(`
+				.monaco-drag-image,
+				.monaco-list${suffix}:focus > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.selected.focused { color: ${styles.listFocusAndSelectionForeground}; }
+			`);
+        }
+        if (styles.listInactiveFocusBackground) {
+            content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused { background-color:  ${styles.listInactiveFocusBackground}; }`);
+            content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused:hover { background-color:  ${styles.listInactiveFocusBackground}; }`);
+        }
+        if (styles.listInactiveSelectionBackground) {
+            content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.selected { background-color:  ${styles.listInactiveSelectionBackground}; }`);
+            content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.selected:hover { background-color:  ${styles.listInactiveSelectionBackground}; }`);
+        }
+        if (styles.listInactiveSelectionForeground) {
+            content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.selected { color: ${styles.listInactiveSelectionForeground}; }`);
+        }
+        if (styles.listHoverBackground) {
+            content.push(`.monaco-list${suffix}:not(.drop-target) > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover:not(.selected):not(.focused) { background-color:  ${styles.listHoverBackground}; }`);
+        }
+        if (styles.listHoverForeground) {
+            content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover:not(.selected):not(.focused) { color:  ${styles.listHoverForeground}; }`);
+        }
+        if (styles.listSelectionOutline) {
+            content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.selected { outline: 1px dotted ${styles.listSelectionOutline}; outline-offset: -1px; }`);
+        }
+        if (styles.listFocusOutline) {
+            content.push(`
+				.monaco-drag-image,
+				.monaco-list${suffix}:focus > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }
+			`);
+        }
+        if (styles.listInactiveFocusOutline) {
+            content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused { outline: 1px dotted ${styles.listInactiveFocusOutline}; outline-offset: -1px; }`);
+        }
+        if (styles.listHoverOutline) {
+            content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover { outline: 1px dashed ${styles.listHoverOutline}; outline-offset: -1px; }`);
+        }
+        if (styles.listDropOverBackground) {
+            content.push(`
+				.monaco-list${suffix}.drop-target,
+				.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows.drop-target,
+				.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-row.drop-target { background-color: ${styles.listDropOverBackground} !important; color: inherit !important; }
+			`);
+        }
+        const newStyles = content.join('\n');
+        if (newStyles !== this.styleElement.textContent) {
+            this.styleElement.textContent = newStyles;
+        }
+    }
+};
+NotebookTextDiffList = ( (__decorate([
+    ( (__param(6, IListService))),
+    ( (__param(7, IConfigurationService))),
+    ( (__param(8, IInstantiationService)))
+], NotebookTextDiffList)));
+export { CellDiffPlaceholderRenderer, CellDiffSideBySideRenderer, CellDiffSingleSideRenderer, NotebookCellTextDiffListDelegate, NotebookMouseController, NotebookTextDiffList };

package/vscode/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffOverviewRuler.js

@@ -0,0 +1,184 @@
+import { __decorate, __param } from '../../../../../../../../external/tslib/tslib.es6.js';
+import { getWindow, addStandardDisposableListener, EventType, runAtThisOrScheduleAtNextAnimationFrame } from '../../../../../base/browser/dom.js';
+import { createFastDomNode } from '../../../../../base/browser/fastDomNode.js';
+import { PixelRatio } from '../../../../../base/browser/pixelRatio.js';
+import { Color } from '../../../../../base/common/color.js';
+import { DisposableStore } from '../../../../../base/common/lifecycle.js';
+import '../../../../../platform/theme/common/colorUtils.js';
+import '../../../../../platform/theme/common/colors/baseColors.js';
+import '../../../../../platform/theme/common/colors/chartsColors.js';
+import { diffOverviewRulerInserted, diffInserted, defaultInsertColor, diffOverviewRulerRemoved, diffRemoved, defaultRemoveColor } from '../../../../../platform/theme/common/colors/editorColors.js';
+import '../../../../../platform/theme/common/colors/inputColors.js';
+import '../../../../../platform/theme/common/colors/listColors.js';
+import '../../../../../platform/theme/common/colors/menuColors.js';
+import '../../../../../platform/theme/common/colors/minimapColors.js';
+import '../../../../../platform/theme/common/colors/miscColors.js';
+import '../../../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../../../platform/theme/common/colors/searchColors.js';
+import { Themable } from '../../../../../platform/theme/common/themeService.js';
+import { IThemeService } from '../../../../../platform/theme/common/themeService.service.js';
+const MINIMUM_SLIDER_SIZE = 20;
+let NotebookDiffOverviewRuler = class NotebookDiffOverviewRuler extends Themable {
+    constructor(notebookEditor, width, container, themeService) {
+        super(themeService);
+        this.notebookEditor = notebookEditor;
+        this.width = width;
+        this._diffElementViewModels = [];
+        this._lanes = 2;
+        this._insertColor = null;
+        this._removeColor = null;
+        this._insertColorHex = null;
+        this._removeColorHex = null;
+        this._disposables = this._register(( new DisposableStore()));
+        this._renderAnimationFrame = null;
+        this._domNode = createFastDomNode(document.createElement('canvas'));
+        this._domNode.setPosition('relative');
+        this._domNode.setLayerHinting(true);
+        this._domNode.setContain('strict');
+        container.appendChild(this._domNode.domNode);
+        this._overviewViewportDomElement = createFastDomNode(document.createElement('div'));
+        this._overviewViewportDomElement.setClassName('diffViewport');
+        this._overviewViewportDomElement.setPosition('absolute');
+        this._overviewViewportDomElement.setWidth(width);
+        container.appendChild(this._overviewViewportDomElement.domNode);
+        this._register(PixelRatio.getInstance(getWindow(this._domNode.domNode)).onDidChange(() => {
+            this._scheduleRender();
+        }));
+        this._register(this.themeService.onDidColorThemeChange(e => {
+            const colorChanged = this.applyColors(e);
+            if (colorChanged) {
+                this._scheduleRender();
+            }
+        }));
+        this.applyColors(this.themeService.getColorTheme());
+        this._register(this.notebookEditor.onDidScroll(() => {
+            this._renderOverviewViewport();
+        }));
+        this._register(addStandardDisposableListener(container, EventType.POINTER_DOWN, (e) => {
+            this.notebookEditor.delegateVerticalScrollbarPointerDown(e);
+        }));
+    }
+    applyColors(theme) {
+        const newInsertColor = theme.getColor(diffOverviewRulerInserted) || ( (theme.getColor(diffInserted) || defaultInsertColor).transparent(2));
+        const newRemoveColor = theme.getColor(diffOverviewRulerRemoved) || ( (theme.getColor(diffRemoved) || defaultRemoveColor).transparent(2));
+        const hasChanges = !newInsertColor.equals(this._insertColor) || !newRemoveColor.equals(this._removeColor);
+        this._insertColor = newInsertColor;
+        this._removeColor = newRemoveColor;
+        if (this._insertColor) {
+            this._insertColorHex = Color.Format.CSS.formatHexA(this._insertColor);
+        }
+        if (this._removeColor) {
+            this._removeColorHex = Color.Format.CSS.formatHexA(this._removeColor);
+        }
+        return hasChanges;
+    }
+    layout() {
+        this._layoutNow();
+    }
+    updateViewModels(elements, eventDispatcher) {
+        this._disposables.clear();
+        this._diffElementViewModels = elements;
+        if (eventDispatcher) {
+            this._disposables.add(eventDispatcher.onDidChangeLayout(() => {
+                this._scheduleRender();
+            }));
+            this._disposables.add(eventDispatcher.onDidChangeCellLayout(() => {
+                this._scheduleRender();
+            }));
+        }
+        this._scheduleRender();
+    }
+    _scheduleRender() {
+        if (this._renderAnimationFrame === null) {
+            this._renderAnimationFrame = runAtThisOrScheduleAtNextAnimationFrame(getWindow(this._domNode.domNode), this._onRenderScheduled.bind(this), 16);
+        }
+    }
+    _onRenderScheduled() {
+        this._renderAnimationFrame = null;
+        this._layoutNow();
+    }
+    _layoutNow() {
+        const layoutInfo = this.notebookEditor.getLayoutInfo();
+        const height = layoutInfo.height;
+        const contentHeight = ( this._diffElementViewModels.map(view => view.totalHeight)).reduce((a, b) => a + b, 0);
+        const ratio = PixelRatio.getInstance(getWindow(this._domNode.domNode)).value;
+        this._domNode.setWidth(this.width);
+        this._domNode.setHeight(height);
+        this._domNode.domNode.width = this.width * ratio;
+        this._domNode.domNode.height = height * ratio;
+        const ctx = this._domNode.domNode.getContext('2d');
+        ctx.clearRect(0, 0, this.width * ratio, height * ratio);
+        this._renderCanvas(ctx, this.width * ratio, height * ratio, contentHeight * ratio, ratio);
+        this._renderOverviewViewport();
+    }
+    _renderOverviewViewport() {
+        const layout = this._computeOverviewViewport();
+        if (!layout) {
+            this._overviewViewportDomElement.setTop(0);
+            this._overviewViewportDomElement.setHeight(0);
+        }
+        else {
+            this._overviewViewportDomElement.setTop(layout.top);
+            this._overviewViewportDomElement.setHeight(layout.height);
+        }
+    }
+    _computeOverviewViewport() {
+        const layoutInfo = this.notebookEditor.getLayoutInfo();
+        if (!layoutInfo) {
+            return null;
+        }
+        const scrollTop = this.notebookEditor.getScrollTop();
+        const scrollHeight = this.notebookEditor.getScrollHeight();
+        const computedAvailableSize = Math.max(0, layoutInfo.height);
+        const computedRepresentableSize = Math.max(0, computedAvailableSize - 2 * 0);
+        const visibleSize = layoutInfo.height;
+        const computedSliderSize = Math.round(Math.max(MINIMUM_SLIDER_SIZE, Math.floor(visibleSize * computedRepresentableSize / scrollHeight)));
+        const computedSliderRatio = (computedRepresentableSize - computedSliderSize) / (scrollHeight - visibleSize);
+        const computedSliderPosition = Math.round(scrollTop * computedSliderRatio);
+        return {
+            height: computedSliderSize,
+            top: computedSliderPosition
+        };
+    }
+    _renderCanvas(ctx, width, height, scrollHeight, ratio) {
+        if (!this._insertColorHex || !this._removeColorHex) {
+            return;
+        }
+        const laneWidth = width / this._lanes;
+        let currentFrom = 0;
+        for (let i = 0; i < this._diffElementViewModels.length; i++) {
+            const element = this._diffElementViewModels[i];
+            const cellHeight = Math.round((element.totalHeight / scrollHeight) * ratio * height);
+            switch (element.type) {
+                case 'insert':
+                    ctx.fillStyle = this._insertColorHex;
+                    ctx.fillRect(laneWidth, currentFrom, laneWidth, cellHeight);
+                    break;
+                case 'delete':
+                    ctx.fillStyle = this._removeColorHex;
+                    ctx.fillRect(0, currentFrom, laneWidth, cellHeight);
+                    break;
+                case 'unchanged':
+                    break;
+                case 'modified':
+                    ctx.fillStyle = this._removeColorHex;
+                    ctx.fillRect(0, currentFrom, laneWidth, cellHeight);
+                    ctx.fillStyle = this._insertColorHex;
+                    ctx.fillRect(laneWidth, currentFrom, laneWidth, cellHeight);
+                    break;
+            }
+            currentFrom += cellHeight;
+        }
+    }
+    dispose() {
+        if (this._renderAnimationFrame !== null) {
+            this._renderAnimationFrame.dispose();
+            this._renderAnimationFrame = null;
+        }
+        super.dispose();
+    }
+};
+NotebookDiffOverviewRuler = ( __decorate([
+    ( __param(3, IThemeService))
+], NotebookDiffOverviewRuler));
+export { NotebookDiffOverviewRuler };