@codingame/monaco-vscode-api 2.0.3 → 2.1.0

package/vscode/src/vs/editor/browser/viewParts/lineNumbers/lineNumbers.js

@@ -2,6 +2,7 @@ import './lineNumbers.css.js';
 import { isLinux } from '../../../../base/common/platform.js';
 import { DynamicViewOverlay } from '../../view/dynamicViewOverlay.js';
 import { Position } from '../../../common/core/position.js';
+import { Range } from '../../../common/core/range.js';
 import { registerThemingParticipant } from '../../../../platform/theme/common/themeService.js';
 import { editorLineNumbers, editorDimmedLineNumber } from '../../../common/core/editorColorRegistry.js';
 class LineNumbersOverlay extends DynamicViewOverlay {
@@ -66,6 +67,9 @@ class LineNumbersOverlay extends DynamicViewOverlay {
     onZonesChanged(e) {
         return true;
     }
+    onDecorationsChanged(e) {
+        return e.affectsLineNumber;
+    }
     _getLineRenderLineNumber(viewLineNumber) {
         const modelPosition = this._context.viewModel.coordinatesConverter.convertViewPositionToModelPosition(( new Position(viewLineNumber, 1)));
         if (modelPosition.column !== 1) {
@@ -101,29 +105,40 @@ class LineNumbersOverlay extends DynamicViewOverlay {
         const lineHeightClassName = (isLinux ? (this._lineHeight % 2 === 0 ? ' lh-even' : ' lh-odd') : '');
         const visibleStartLineNumber = ctx.visibleRange.startLineNumber;
         const visibleEndLineNumber = ctx.visibleRange.endLineNumber;
+        const lineNoDecorations = this._context.viewModel.getDecorationsInViewport(ctx.visibleRange).filter(d => !!d.options.lineNumberClassName);
+        lineNoDecorations.sort((a, b) => Range.compareRangesUsingEnds(a.range, b.range));
+        let decorationStartIndex = 0;
         const lineCount = this._context.viewModel.getLineCount();
         const output = [];
         for (let lineNumber = visibleStartLineNumber; lineNumber <= visibleEndLineNumber; lineNumber++) {
             const lineIndex = lineNumber - visibleStartLineNumber;
-            const renderLineNumber = this._getLineRenderLineNumber(lineNumber);
-            if (!renderLineNumber) {
+            let renderLineNumber = this._getLineRenderLineNumber(lineNumber);
+            let extraClassNames = '';
+            while (decorationStartIndex < lineNoDecorations.length && lineNoDecorations[decorationStartIndex].range.endLineNumber < lineNumber) {
+                decorationStartIndex++;
+            }
+            for (let i = decorationStartIndex; i < lineNoDecorations.length; i++) {
+                const { range, options } = lineNoDecorations[i];
+                if (range.startLineNumber <= lineNumber) {
+                    extraClassNames += ' ' + options.lineNumberClassName;
+                }
+            }
+            if (!renderLineNumber && !extraClassNames) {
                 output[lineIndex] = '';
                 continue;
             }
-            let extraClassName = '';
             if (lineNumber === lineCount && this._context.viewModel.getLineLength(lineNumber) === 0) {
                 if (this._renderFinalNewline === 'off') {
-                    output[lineIndex] = '';
-                    continue;
+                    renderLineNumber = '';
                 }
                 if (this._renderFinalNewline === 'dimmed') {
-                    extraClassName = ' dimmed-line-number';
+                    extraClassNames += ' dimmed-line-number';
                 }
             }
             if (lineNumber === this._activeLineNumber) {
-                extraClassName = ' active-line-number';
+                extraClassNames += ' active-line-number';
             }
-            output[lineIndex] = (`<div class="${LineNumbersOverlay.CLASS_NAME}${lineHeightClassName}${extraClassName}" style="left:${this._lineNumbersLeft}px;width:${this._lineNumbersWidth}px;">${renderLineNumber}</div>`);
+            output[lineIndex] = (`<div class="${LineNumbersOverlay.CLASS_NAME}${lineHeightClassName}${extraClassNames}" style="left:${this._lineNumbersLeft}px;width:${this._lineNumbersWidth}px;">${renderLineNumber}</div>`);
         }
         this._renderResult = output;
     }

package/vscode/src/vs/editor/browser/viewParts/lines/viewLines.js

@@ -74,7 +74,7 @@ class ViewLines extends ViewPart {
         this._cursorSurroundingLinesStyle = options.get(30 );
         this._canUseLayerHinting = !options.get(32 );
         this._viewLineOptions = ( new ViewLineOptions(conf, this._context.theme.type));
-        PartFingerprints.write(this.domNode, 7 );
+        PartFingerprints.write(this.domNode, 8 );
         this.domNode.setClassName(`view-lines ${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`);
         applyFontInfo(this.domNode, fontInfo);
         this._maxLineWidth = 0;

package/vscode/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.js

@@ -57,6 +57,7 @@ class LinesDecorationsOverlay extends DedupOverlay {
                     d.range.startLineNumber,
                     d.range.endLineNumber,
                     linesDecorationsClassName,
+                    d.options.linesDecorationsTooltip ?? null,
                     zIndex
                 ));
             }
@@ -66,6 +67,7 @@ class LinesDecorationsOverlay extends DedupOverlay {
                     d.range.startLineNumber,
                     d.range.startLineNumber,
                     firstLineDecorationClassName,
+                    d.options.linesDecorationsTooltip ?? null,
                     zIndex
                 ));
             }
@@ -85,7 +87,12 @@ class LinesDecorationsOverlay extends DedupOverlay {
             const decorations = toRender[lineIndex].getDecorations();
             let lineOutput = '';
             for (const decoration of decorations) {
-                lineOutput += '<div class="cldr ' + decoration.className + common;
+                let addition = '<div class="cldr ' + decoration.className;
+                if (decoration.tooltip !== null) {
+                    addition += '" title="' + decoration.tooltip;
+                }
+                addition += common;
+                lineOutput += addition;
             }
             output[lineIndex] = lineOutput;
         }

package/vscode/src/vs/editor/browser/viewParts/marginDecorations/marginDecorations.js

@@ -45,7 +45,13 @@ class MarginViewLineDecorationsOverlay extends DedupOverlay {
             const marginClassName = d.options.marginClassName;
             const zIndex = d.options.zIndex;
             if (marginClassName) {
-                r[rLen++] = ( new DecorationToRender(d.range.startLineNumber, d.range.endLineNumber, marginClassName, zIndex));
+                r[rLen++] = ( new DecorationToRender(
+                    d.range.startLineNumber,
+                    d.range.endLineNumber,
+                    marginClassName,
+                    null,
+                    zIndex
+                ));
             }
         }
         return r;

package/vscode/src/vs/editor/browser/viewParts/minimap/minimap.js

@@ -815,7 +815,7 @@ class InnerMinimap extends Disposable {
         this._buffers = null;
         this._selectionColor = this._theme.getColor(minimapSelection);
         this._domNode = createFastDomNode(document.createElement('div'));
-        PartFingerprints.write(this._domNode, 8 );
+        PartFingerprints.write(this._domNode, 9 );
         this._domNode.setClassName(this._getMinimapDomNodeClassName());
         this._domNode.setPosition('absolute');
         this._domNode.setAttribute('role', 'presentation');

package/vscode/src/vs/editor/browser/viewParts/overlayWidgets/overlayWidgets.js

@@ -1,9 +1,11 @@
 import './overlayWidgets.css.js';
 import { createFastDomNode } from '../../../../base/browser/fastDomNode.js';
 import { ViewPart, PartFingerprints } from '../../view/viewPart.js';
+import { getDomNodePagePosition } from '../../../../base/browser/dom.js';
 class ViewOverlayWidgets extends ViewPart {
-    constructor(context) {
+    constructor(context, viewDomNode) {
         super(context);
+        this._viewDomNode = viewDomNode;
         const options = this._context.configuration.options;
         const layoutInfo = options.get(143 );
         this._widgets = {};
@@ -12,9 +14,13 @@ class ViewOverlayWidgets extends ViewPart {
         this._horizontalScrollbarHeight = layoutInfo.horizontalScrollbarHeight;
         this._editorHeight = layoutInfo.height;
         this._editorWidth = layoutInfo.width;
+        this._viewDomNodeRect = { top: 0, left: 0, width: 0, height: 0 };
         this._domNode = createFastDomNode(document.createElement('div'));
         PartFingerprints.write(this._domNode, 4 );
         this._domNode.setClassName('overlayWidgets');
+        this.overflowingOverlayWidgetsDomNode = createFastDomNode(document.createElement('div'));
+        PartFingerprints.write(this.overflowingOverlayWidgetsDomNode, 5 );
+        this.overflowingOverlayWidgetsDomNode.setClassName('overflowingOverlayWidgets');
     }
     dispose() {
         super.dispose();
@@ -42,7 +48,12 @@ class ViewOverlayWidgets extends ViewPart {
         };
         domNode.setPosition('absolute');
         domNode.setAttribute('widgetId', widget.getId());
-        this._domNode.appendChild(domNode);
+        if (widget.allowEditorOverflow) {
+            this.overflowingOverlayWidgetsDomNode.appendChild(domNode);
+        }
+        else {
+            this._domNode.appendChild(domNode);
+        }
         this.setShouldRender();
         this._updateMaxMinWidth();
     }
@@ -63,7 +74,7 @@ class ViewOverlayWidgets extends ViewPart {
             const widgetData = this._widgets[widgetId];
             const domNode = widgetData.domNode.domNode;
             delete this._widgets[widgetId];
-            domNode.parentNode.removeChild(domNode);
+            domNode.remove();
             this.setShouldRender();
             this._updateMaxMinWidth();
         }
@@ -100,8 +111,24 @@ class ViewOverlayWidgets extends ViewPart {
             domNode.setTop(0);
             domNode.domNode.style.right = '50%';
         }
+        else {
+            const { top, left } = widgetData.preference;
+            const fixedOverflowWidgets = this._context.configuration.options.get(42 );
+            if (fixedOverflowWidgets && widgetData.widget.allowEditorOverflow) {
+                const editorBoundingBox = this._viewDomNodeRect;
+                domNode.setTop(top + editorBoundingBox.top);
+                domNode.setLeft(left + editorBoundingBox.left);
+                domNode.setPosition('fixed');
+            }
+            else {
+                domNode.setTop(top);
+                domNode.setLeft(left);
+                domNode.setPosition('absolute');
+            }
+        }
     }
     prepareRender(ctx) {
+        this._viewDomNodeRect = getDomNodePagePosition(this._viewDomNode.domNode);
     }
     render(ctx) {
         this._domNode.setWidth(this._editorWidth);

package/vscode/src/vs/editor/browser/widget/codeEditorWidget.js

@@ -91,6 +91,8 @@ let CodeEditorWidget = class CodeEditorWidget extends Disposable {
         this.onDidChangeModelTokens = this._onDidChangeModelTokens.event;
         this._onDidChangeConfiguration = this._register(( new Emitter({ deliveryQueue: this._deliveryQueue })));
         this.onDidChangeConfiguration = this._onDidChangeConfiguration.event;
+        this._onWillChangeModel = this._register(( new Emitter({ deliveryQueue: this._deliveryQueue })));
+        this.onWillChangeModel = this._onWillChangeModel.event;
         this._onDidChangeModel = this._register(( new Emitter({ deliveryQueue: this._deliveryQueue })));
         this.onDidChangeModel = this._onDidChangeModel.event;
         this._onDidChangeCursorPosition = this._register(( new Emitter({ deliveryQueue: this._deliveryQueue })));
@@ -179,7 +181,7 @@ let CodeEditorWidget = class CodeEditorWidget extends Disposable {
         this._register(( new EditorModeContext(this, this._contextKeyService, languageFeaturesService)));
         this._instantiationService = instantiationService.createChild(( new ServiceCollection([IContextKeyService, this._contextKeyService])));
         this._modelData = null;
-        this._focusTracker = ( new CodeEditorWidgetFocusTracker(domElement));
+        this._focusTracker = ( new CodeEditorWidgetFocusTracker(domElement, this._overflowWidgetsDomNode));
         this._register(this._focusTracker.onChange(() => {
             this._editorWidgetFocus.setValue(this._focusTracker.hasFocus());
         }));
@@ -205,9 +207,9 @@ let CodeEditorWidget = class CodeEditorWidget extends Disposable {
                 action.alias,
                 action.metadata,
                 action.precondition ?? undefined,
-                () => {
+                (args) => {
                     return this._instantiationService.invokeFunction((accessor) => {
-                        return Promise.resolve(action.runEditorCommand(accessor, this, null));
+                        return Promise.resolve(action.runEditorCommand(accessor, this, args));
                     });
                 },
                 this._contextKeyService
@@ -331,16 +333,17 @@ let CodeEditorWidget = class CodeEditorWidget extends Disposable {
         if (this._modelData && this._modelData.model === model) {
             return;
         }
+        const e = {
+            oldModelUrl: this._modelData?.model.uri || null,
+            newModelUrl: model?.uri || null
+        };
+        this._onWillChangeModel.fire(e);
         const hasTextFocus = this.hasTextFocus();
         const detachedModel = this._detachModel();
         this._attachModel(model);
         if (hasTextFocus && this.hasModel()) {
             this.focus();
         }
-        const e = {
-            oldModelUrl: detachedModel ? detachedModel.uri : null,
-            newModelUrl: model ? model.uri : null
-        };
         this._removeDecorationTypes();
         this._onDidChangeModel.fire(e);
         this._postDetachModelCleanup(detachedModel);
@@ -1677,26 +1680,47 @@ class EditorModeContext extends Disposable {
     }
 }
 class CodeEditorWidgetFocusTracker extends Disposable {
-    constructor(domElement) {
+    constructor(domElement, overflowWidgetsDomNode) {
         super();
         this._onChange = this._register(( new Emitter()));
         this.onChange = this._onChange.event;
-        this._hasFocus = false;
+        this._hadFocus = undefined;
+        this._hasDomElementFocus = false;
         this._domFocusTracker = this._register(trackFocus(domElement));
+        this._overflowWidgetsDomNodeHasFocus = false;
         this._register(this._domFocusTracker.onDidFocus(() => {
-            this._hasFocus = true;
-            this._onChange.fire(undefined);
+            this._hasDomElementFocus = true;
+            this._update();
         }));
         this._register(this._domFocusTracker.onDidBlur(() => {
-            this._hasFocus = false;
-            this._onChange.fire(undefined);
+            this._hasDomElementFocus = false;
+            this._update();
         }));
+        if (overflowWidgetsDomNode) {
+            this._overflowWidgetsDomNode = this._register(trackFocus(overflowWidgetsDomNode));
+            this._register(this._overflowWidgetsDomNode.onDidFocus(() => {
+                this._overflowWidgetsDomNodeHasFocus = true;
+                this._update();
+            }));
+            this._register(this._overflowWidgetsDomNode.onDidBlur(() => {
+                this._overflowWidgetsDomNodeHasFocus = false;
+                this._update();
+            }));
+        }
+    }
+    _update() {
+        const focused = this._hasDomElementFocus || this._overflowWidgetsDomNodeHasFocus;
+        if (this._hadFocus !== focused) {
+            this._hadFocus = focused;
+            this._onChange.fire(undefined);
+        }
     }
     hasFocus() {
-        return this._hasFocus;
+        return this._hadFocus ?? false;
     }
     refreshState() {
-        this._domFocusTracker.refreshState?.();
+        this._domFocusTracker.refreshState();
+        this._overflowWidgetsDomNode?.refreshState?.();
     }
 }
 class EditorDecorationsCollection {

package/vscode/src/vs/editor/browser/widget/diffEditor/{accessibleDiffViewer.css.js → components/accessibleDiffViewer.css.js}

@@ -1,4 +1,4 @@
-import n from '../../../../../../../external/rollup-plugin-styles/dist/runtime/inject-css.js';
+import n from '../../../../../../../../external/rollup-plugin-styles/dist/runtime/inject-css.js';
 var css = ".monaco-diff-editor .diff-review-line-number{color:var(--vscode-editorLineNumber-foreground);display:inline-block;text-align:right}.monaco-diff-editor .diff-review{position:absolute;user-select:none;-webkit-user-select:none;z-index:99}.monaco-diff-editor .diff-review-summary{padding-left:10px}.monaco-diff-editor .diff-review-shadow{box-shadow:var(--vscode-scrollbar-shadow) 0 -6px 6px -6px inset;position:absolute}.monaco-diff-editor .diff-review-row{white-space:pre}.monaco-diff-editor .diff-review-table{display:table;min-width:100%}.monaco-diff-editor .diff-review-row{display:table-row;width:100%}.monaco-diff-editor .diff-review-spacer{display:inline-block;vertical-align:middle;width:10px}.monaco-diff-editor .diff-review-spacer>.codicon{font-size:9px!important}.monaco-diff-editor .diff-review-actions{display:inline-block;position:absolute;right:10px;top:2px;z-index:100}.monaco-diff-editor .diff-review-actions .action-label{height:16px;margin:2px 0;width:16px}.monaco-diff-editor .revertButton{cursor:pointer}";
 n(css,{});
 export { css, css as default };

package/vscode/src/vs/editor/browser/widget/diffEditor/{accessibleDiffViewer.js → components/accessibleDiffViewer.js}

@@ -1,45 +1,45 @@
-import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
-import { reset, addStandardDisposableListener, addDisposableListener } from '../../../../base/browser/dom.js';
-import { createTrustedTypesPolicy } from '../../../../base/browser/trustedTypes.js';
-import { ActionBar } from '../../../../base/browser/ui/actionbar/actionbar.js';
-import { DomScrollableElement } from '../../../../base/browser/ui/scrollbar/scrollableElement.js';
-import { Action } from '../../../../base/common/actions.js';
-import { groupAdjacentBy, forEachAdjacent } from '../../../../base/common/arrays.js';
-import { Codicon } from '../../../../base/common/codicons.js';
-import { Disposable, toDisposable } from '../../../../base/common/lifecycle.js';
-import { ThemeIcon } from '../../../../base/common/themables.js';
-import { applyFontInfo } from '../../config/domFontInfo.js';
-import { applyStyle } from './utils.js';
-import { EditorFontLigatures } from '../../../common/config/editorOptions.js';
-import { LineRange } from '../../../common/core/lineRange.js';
-import { OffsetRange } from '../../../common/core/offsetRange.js';
-import { Position } from '../../../common/core/position.js';
-import { Range } from '../../../common/core/range.js';
-import { LineRangeMapping } from '../../../common/diff/rangeMapping.js';
-import { ILanguageService } from '../../../common/languages/language.js';
-import { LineTokens } from '../../../common/tokens/lineTokens.js';
-import { renderViewLine2, RenderLineInput } from '../../../common/viewLayout/viewLineRenderer.js';
-import { ViewLineRenderingData } from '../../../common/viewModel.js';
-import { localizeWithPath } from '../../../../nls.js';
-import { AudioCue, IAudioCueService } from '../../../../platform/audioCues/browser/audioCueService.js';
-import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
-import { registerIcon } from '../../../../platform/theme/common/iconRegistry.js';
+import { __decorate, __param } from '../../../../../../../../external/tslib/tslib.es6.js';
+import { reset, addStandardDisposableListener, addDisposableListener } from '../../../../../base/browser/dom.js';
+import { createTrustedTypesPolicy } from '../../../../../base/browser/trustedTypes.js';
+import { ActionBar } from '../../../../../base/browser/ui/actionbar/actionbar.js';
+import { DomScrollableElement } from '../../../../../base/browser/ui/scrollbar/scrollableElement.js';
+import { Action } from '../../../../../base/common/actions.js';
+import { groupAdjacentBy, forEachAdjacent } from '../../../../../base/common/arrays.js';
+import { Codicon } from '../../../../../base/common/codicons.js';
+import { Disposable, toDisposable } from '../../../../../base/common/lifecycle.js';
+import { ThemeIcon } from '../../../../../base/common/themables.js';
+import { applyFontInfo } from '../../../config/domFontInfo.js';
+import { applyStyle } from '../utils.js';
+import { EditorFontLigatures } from '../../../../common/config/editorOptions.js';
+import { LineRange } from '../../../../common/core/lineRange.js';
+import { OffsetRange } from '../../../../common/core/offsetRange.js';
+import { Position } from '../../../../common/core/position.js';
+import { Range } from '../../../../common/core/range.js';
+import { LineRangeMapping } from '../../../../common/diff/rangeMapping.js';
+import { ILanguageService } from '../../../../common/languages/language.js';
+import { LineTokens } from '../../../../common/tokens/lineTokens.js';
+import { renderViewLine2, RenderLineInput } from '../../../../common/viewLayout/viewLineRenderer.js';
+import { ViewLineRenderingData } from '../../../../common/viewModel.js';
+import { localizeWithPath } from '../../../../../nls.js';
+import { AudioCue, IAudioCueService } from '../../../../../platform/audioCues/browser/audioCueService.js';
+import { IInstantiationService } from '../../../../../platform/instantiation/common/instantiation.js';
+import { registerIcon } from '../../../../../platform/theme/common/iconRegistry.js';
 import './accessibleDiffViewer.css.js';
-import { derivedWithStore, derived } from '../../../../base/common/observableInternal/derived.js';
-import { transaction, observableValue, subtransaction } from '../../../../base/common/observableInternal/base.js';
-import { autorun, autorunWithStore } from '../../../../base/common/observableInternal/autorun.js';
+import { derivedWithStore, derived } from '../../../../../base/common/observableInternal/derived.js';
+import { transaction, observableValue, subtransaction } from '../../../../../base/common/observableInternal/base.js';
+import { autorun, autorunWithStore } from '../../../../../base/common/observableInternal/autorun.js';
 const accessibleDiffViewerInsertIcon = registerIcon('diff-review-insert', Codicon.add, ( localizeWithPath(
-    'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+    'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
     'accessibleDiffViewerInsertIcon',
     'Icon for \'Insert\' in accessible diff viewer.'
 )));
 const accessibleDiffViewerRemoveIcon = registerIcon('diff-review-remove', Codicon.remove, ( localizeWithPath(
-    'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+    'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
     'accessibleDiffViewerRemoveIcon',
     'Icon for \'Remove\' in accessible diff viewer.'
 )));
 const accessibleDiffViewerCloseIcon = registerIcon('diff-review-close', Codicon.close, ( localizeWithPath(
-    'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+    'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
     'accessibleDiffViewerCloseIcon',
     'Icon for \'Close\' in accessible diff viewer.'
 )));
@@ -306,7 +306,7 @@ let View = class View extends Disposable {
             this._actionBar.clear();
             if (this._model.canClose.read(reader)) {
                 this._actionBar.push(( new Action('diffreview.close', ( localizeWithPath(
-                    'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+                    'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
                     'label.close',
                     "Close"
                 )), 'close-diff-review ' + ThemeIcon.asClassName(accessibleDiffViewerCloseIcon), true, async () => _model.close())), { label: false, icon: true });
@@ -358,7 +358,7 @@ let View = class View extends Disposable {
         container.className = 'diff-review-table';
         container.setAttribute('role', 'list');
         container.setAttribute('aria-label', ( localizeWithPath(
-            'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+            'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
             'ariaLabel',
             'Accessible Diff Viewer. Use arrow up and down to navigate.'
         )));
@@ -386,24 +386,24 @@ let View = class View extends Disposable {
                 const diffIndex = this._model.currentGroupIndex.get();
                 const diffsLength = this._model.groups.get().length;
                 const getAriaLines = (lines) => lines === 0 ? ( localizeWithPath(
-                    'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+                    'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
                     'no_lines_changed',
                     "no lines changed"
                 ))
                     : lines === 1 ? ( localizeWithPath(
-                    'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+                    'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
                     'one_line_changed',
                     "1 line changed"
                 ))
                         : ( localizeWithPath(
-                    'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+                    'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
                     'more_lines_changed',
                     "{0} lines changed",
                     lines
                 ));
                 const originalChangedLinesCntAria = getAriaLines(r.original.length);
                 const modifiedChangedLinesCntAria = getAriaLines(r.modified.length);
-                header.setAttribute('aria-label', ( localizeWithPath('vs/editor/browser/widget/diffEditor/accessibleDiffViewer', {
+                header.setAttribute('aria-label', ( localizeWithPath('vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer', {
                     key: 'header',
                     comment: [
                         'This is the ARIA label for a git diff header.',
@@ -522,7 +522,7 @@ let View = class View extends Disposable {
         }
         if (lineContent.length === 0) {
             lineContent = ( localizeWithPath(
-                'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+                'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
                 'blankLine',
                 "blank"
             ));
@@ -532,7 +532,7 @@ let View = class View extends Disposable {
             case LineType.Unchanged:
                 if (item.originalLineNumber === item.modifiedLineNumber) {
                     ariaLabel = ( localizeWithPath(
-                        'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+                        'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
                         { key: 'unchangedLine', comment: ['The placeholders are contents of the line and should not be translated.'] },
                         "{0} unchanged line {1}",
                         lineContent,
@@ -541,7 +541,7 @@ let View = class View extends Disposable {
                 }
                 else {
                     ariaLabel = ( localizeWithPath(
-                        'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+                        'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
                         'equalLine',
                         "{0} original line {1} modified line {2}",
                         lineContent,
@@ -552,7 +552,7 @@ let View = class View extends Disposable {
                 break;
             case LineType.Added:
                 ariaLabel = ( localizeWithPath(
-                    'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+                    'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
                     'insertLine',
                     "+ {0} modified line {1}",
                     lineContent,
@@ -561,7 +561,7 @@ let View = class View extends Disposable {
                 break;
             case LineType.Deleted:
                 ariaLabel = ( localizeWithPath(
-                    'vs/editor/browser/widget/diffEditor/accessibleDiffViewer',
+                    'vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer',
                     'deleteLine',
                     "- {0} original line {1}",
                     lineContent,

package/vscode/src/vs/editor/browser/widget/diffEditor/components/diffEditorDecorations.js

@@ -0,0 +1,89 @@
+import { Disposable } from '../../../../../base/common/lifecycle.js';
+import { MovedBlocksLinesFeature } from '../features/movedBlocksLinesFeature.js';
+import { diffLineDeleteDecorationBackgroundWithIndicator, diffLineDeleteDecorationBackground, diffLineAddDecorationBackgroundWithIndicator, diffLineAddDecorationBackground, diffWholeLineDeleteDecoration, diffWholeLineAddDecoration, diffDeleteDecorationEmpty, diffDeleteDecoration, diffAddDecorationEmpty, diffAddDecoration } from '../registrations.contribution.js';
+import { applyObservableDecorations } from '../utils.js';
+import { derived } from '../../../../../base/common/observableInternal/derived.js';
+class DiffEditorDecorations extends Disposable {
+    constructor(_editors, _diffModel, _options, widget) {
+        super();
+        this._editors = _editors;
+        this._diffModel = _diffModel;
+        this._options = _options;
+        this._decorations = derived(this, (reader) => {
+            const diff = this._diffModel.read(reader)?.diff.read(reader);
+            if (!diff) {
+                return null;
+            }
+            const movedTextToCompare = this._diffModel.read(reader).movedTextToCompare.read(reader);
+            const renderIndicators = this._options.renderIndicators.read(reader);
+            const showEmptyDecorations = this._options.showEmptyDecorations.read(reader);
+            const originalDecorations = [];
+            const modifiedDecorations = [];
+            if (!movedTextToCompare) {
+                for (const m of diff.mappings) {
+                    if (!m.lineRangeMapping.original.isEmpty) {
+                        originalDecorations.push({ range: m.lineRangeMapping.original.toInclusiveRange(), options: renderIndicators ? diffLineDeleteDecorationBackgroundWithIndicator : diffLineDeleteDecorationBackground });
+                    }
+                    if (!m.lineRangeMapping.modified.isEmpty) {
+                        modifiedDecorations.push({ range: m.lineRangeMapping.modified.toInclusiveRange(), options: renderIndicators ? diffLineAddDecorationBackgroundWithIndicator : diffLineAddDecorationBackground });
+                    }
+                    if (m.lineRangeMapping.modified.isEmpty || m.lineRangeMapping.original.isEmpty) {
+                        if (!m.lineRangeMapping.original.isEmpty) {
+                            originalDecorations.push({ range: m.lineRangeMapping.original.toInclusiveRange(), options: diffWholeLineDeleteDecoration });
+                        }
+                        if (!m.lineRangeMapping.modified.isEmpty) {
+                            modifiedDecorations.push({ range: m.lineRangeMapping.modified.toInclusiveRange(), options: diffWholeLineAddDecoration });
+                        }
+                    }
+                    else {
+                        for (const i of m.lineRangeMapping.innerChanges || []) {
+                            if (m.lineRangeMapping.original.contains(i.originalRange.startLineNumber)) {
+                                originalDecorations.push({ range: i.originalRange, options: (i.originalRange.isEmpty() && showEmptyDecorations) ? diffDeleteDecorationEmpty : diffDeleteDecoration });
+                            }
+                            if (m.lineRangeMapping.modified.contains(i.modifiedRange.startLineNumber)) {
+                                modifiedDecorations.push({ range: i.modifiedRange, options: (i.modifiedRange.isEmpty() && showEmptyDecorations) ? diffAddDecorationEmpty : diffAddDecoration });
+                            }
+                        }
+                    }
+                }
+            }
+            if (movedTextToCompare) {
+                for (const m of movedTextToCompare.changes) {
+                    const fullRangeOriginal = m.original.toInclusiveRange();
+                    if (fullRangeOriginal) {
+                        originalDecorations.push({ range: fullRangeOriginal, options: renderIndicators ? diffLineDeleteDecorationBackgroundWithIndicator : diffLineDeleteDecorationBackground });
+                    }
+                    const fullRangeModified = m.modified.toInclusiveRange();
+                    if (fullRangeModified) {
+                        modifiedDecorations.push({ range: fullRangeModified, options: renderIndicators ? diffLineAddDecorationBackgroundWithIndicator : diffLineAddDecorationBackground });
+                    }
+                    for (const i of m.innerChanges || []) {
+                        originalDecorations.push({ range: i.originalRange, options: diffDeleteDecoration });
+                        modifiedDecorations.push({ range: i.modifiedRange, options: diffAddDecoration });
+                    }
+                }
+            }
+            const activeMovedText = this._diffModel.read(reader).activeMovedText.read(reader);
+            for (const m of diff.movedTexts) {
+                originalDecorations.push({
+                    range: m.lineRangeMapping.original.toInclusiveRange(), options: {
+                        description: 'moved',
+                        blockClassName: 'movedOriginal' + (m === activeMovedText ? ' currentMove' : ''),
+                        blockPadding: [MovedBlocksLinesFeature.movedCodeBlockPadding, 0, MovedBlocksLinesFeature.movedCodeBlockPadding, MovedBlocksLinesFeature.movedCodeBlockPadding],
+                    }
+                });
+                modifiedDecorations.push({
+                    range: m.lineRangeMapping.modified.toInclusiveRange(), options: {
+                        description: 'moved',
+                        blockClassName: 'movedModified' + (m === activeMovedText ? ' currentMove' : ''),
+                        blockPadding: [4, 0, 4, 4],
+                    }
+                });
+            }
+            return { originalDecorations, modifiedDecorations };
+        });
+        this._register(applyObservableDecorations(this._editors.original, ( this._decorations.map(d => d?.originalDecorations || []))));
+        this._register(applyObservableDecorations(this._editors.modified, ( this._decorations.map(d => d?.modifiedDecorations || []))));
+    }
+}
+export { DiffEditorDecorations };