@codingame/monaco-vscode-api 36.2.7 → 37.1.0

package/vscode/src/vs/editor/browser/widget/multiDiffEditor/multiDiffEditorWidgetImpl.js

@@ -1,30 +1,29 @@
 
 import { registerCss } from '../../../../../../../css.js';
 import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
-import { h, scheduleAtNextAnimationFrame, getWindow } from '../../../../base/browser/dom.js';
-import { SmoothScrollableElement } from '../../../../base/browser/ui/scrollbar/scrollableElement.js';
-import { compareBy, numberComparator } from '../../../../base/common/arrays.js';
-import { findFirstMax } from '../../../../base/common/arraysFind.js';
+import { h } from '../../../../base/browser/dom.js';
 import { BugIndicatingError } from '../../../../base/common/errors.js';
 import { Disposable, toDisposable } from '../../../../base/common/lifecycle.js';
 import '../../../../base/common/observableInternal/index.js';
-import { Scrollable, ScrollbarVisibility } from '../../../../base/common/scrollable.js';
 import { localize } from '../../../../nls.js';
 import { IContextKeyService } from '../../../../platform/contextkey/common/contextkey.service.js';
 import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
 import { ServiceCollection } from '../../../../platform/instantiation/common/serviceCollection.js';
-import { OffsetRange } from '../../../common/core/ranges/offsetRange.js';
+import { ILogService } from '../../../../platform/log/common/log.service.js';
+import { bindContextKey } from '../../../../platform/observable/common/platformObservableUtils.js';
 import { Selection } from '../../../common/core/selection.js';
 import { EditorContextKeys } from '../../../common/editorContextKeys.js';
-import { ObservableElementSizeObserver } from '../diffEditor/utils.js';
-import { DiffEditorItemTemplate, TemplateData } from './diffEditorItemTemplate.js';
-import { ObjectPool } from './objectPool.js';
+import { CompressedVirtualizedScrollView } from './compressedVirtualizedScrollView.js';
+import { DiffEditorItemTemplate, binaryFilePlaceholderContentHeight } from './diffEditorItemTemplate.js';
+import { MultiDiffEditorLogger, formatUri, formatDiffItemKey } from './multiDiffEditorLogging.js';
 import * as style from './style.css';
-import { observableFromEvent } from '../../../../base/common/observableInternal/observables/observableFromEvent.js';
+import { VirtualizedItemManager } from './virtualizedItemManager.js';
 import { derived } from '../../../../base/common/observableInternal/observables/derived.js';
-import { transaction, globalTransaction } from '../../../../base/common/observableInternal/transaction.js';
+import { observableValue } from '../../../../base/common/observableInternal/observables/observableValue.js';
+import { mapObservableArrayCached } from '../../../../base/common/observableInternal/utils/utils.js';
 import { autorunWithStore, autorun } from '../../../../base/common/observableInternal/reactions/autorun.js';
-import { disposableObservableValue, observableValue } from '../../../../base/common/observableInternal/observables/observableValue.js';
+import { transaction } from '../../../../base/common/observableInternal/transaction.js';
+import { constObservable } from '../../../../base/common/observableInternal/observables/constObservable.js';
 
 registerCss(style);
 let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposable {
@@ -33,95 +32,155 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
         _dimension,
         _viewModel,
         _workbenchUIElementFactory,
+        _variantConfiguration,
+        _diffLayoutOptions,
+        _diffEditorOptions,
+        _paddingBottomPx,
         _parentContextKeyService,
-        _parentInstantiationService
+        _parentInstantiationService,
+        logService
     ) {
         super();
         this._element = _element;
         this._dimension = _dimension;
         this._viewModel = _viewModel;
         this._workbenchUIElementFactory = _workbenchUIElementFactory;
+        this._variantConfiguration = _variantConfiguration;
+        this._diffLayoutOptions = _diffLayoutOptions;
+        this._diffEditorOptions = _diffEditorOptions;
+        this._paddingBottomPx = _paddingBottomPx;
         this._parentContextKeyService = _parentContextKeyService;
         this._parentInstantiationService = _parentInstantiationService;
         this._preserveFocusOnLoad = false;
-        this._scrollableElements = h("div.scrollContent", [h("div@content", {
-            style: {
-                overflow: "hidden"
-            }
-        }), h("div.monaco-editor@overflowWidgetsDomNode", {})]);
-        this._scrollable = this._register(( new Scrollable({
-            forceIntegerValues: false,
-            scheduleAtNextAnimationFrame: cb => scheduleAtNextAnimationFrame(getWindow(this._element), cb),
-            smoothScrollDuration: 100
-        })));
-        this._scrollableElement = this._register(( new SmoothScrollableElement(this._scrollableElements.root, {
-            vertical: ScrollbarVisibility.Auto,
-            horizontal: ScrollbarVisibility.Auto,
-            useShadows: false
-        }, this._scrollable)));
-        this._elements = h("div.monaco-component.multiDiffEditor", {}, [
-            h("div", {}, [this._scrollableElement.getDomNode()]),
-            h("div.placeholder@placeholder", {}, [h("div")])
-        ]);
-        this._sizeObserver = this._register(( new ObservableElementSizeObserver(this._element, undefined)));
-        this._objectPool = this._register(( new ObjectPool(data => {
-            const template = this._instantiationService.createInstance(
-                DiffEditorItemTemplate,
-                this._scrollableElements.content,
-                this._scrollableElements.overflowWidgetsDomNode,
-                this._workbenchUIElementFactory
-            );
-            template.setData(data);
-            return template;
+        this._logger = this._register(( new MultiDiffEditorLogger(logService)));
+        this._optionsOverride = derived(this, reader => {
+            return {
+                ...this._diffEditorOptions,
+                ...this._diffLayoutOptions.read(reader)
+            };
+        });
+        this._spaceBetweenPx = observableValue(this, 0);
+        const paddingBottomItem = ( this._paddingBottomPx.map(this, size => ({
+            size: constObservable(size),
+            maxScroll: constObservable({
+                maxScroll: 0
+            }),
+            render() {},
+            hide() {}
         })));
-        this.scrollTop = observableFromEvent(
-            this,
-            this._scrollableElement.onScroll,
-            () =>  this._scrollableElement.getScrollPosition().scrollTop
-        );
-        this.scrollLeft = observableFromEvent(
-            this,
-            this._scrollableElement.onScroll,
-            () =>  this._scrollableElement.getScrollPosition().scrollLeft
-        );
-        this._viewItemsInfo = derived(this, reader => {
-            const vm = this._viewModel.read(reader);
-            if (!vm) {
-                return {
-                    items: [],
-                    getItem: _d => {
-                        throw ( new BugIndicatingError());
+        let viewItemsInfo;
+        let viewItems;
+        this._scrollView = this._register(( new CompressedVirtualizedScrollView(this._element, this._dimension, this._spaceBetweenPx, context => {
+            const sourceItems = derived(this, reader => this._viewModel.read(reader)?.items.read(reader) ?? []);
+            const manager = this._register(( new VirtualizedItemManager(sourceItems, context, {
+                getId: item => item,
+                getTemplateId: () => "diffEditor",
+                getUnboundSize: item => derived(item, reader => {
+                    const headerHeight = this._variantConfiguration.headerHeight;
+                    if (item.collapsed.read(reader)) {
+                        return headerHeight;
                     }
-                };
-            }
-            const viewModels = vm.items.read(reader);
-            const map = ( new Map());
-            const items = ( viewModels.map(d => {
-                const item = reader.store.add(( new VirtualizedViewItem(d, this._objectPool, this.scrollLeft, delta => {
-                    this._scrollableElement.setScrollPosition({
-                        scrollTop: this._scrollableElement.getScrollPosition().scrollTop + delta
+                    if (item.isBinary) {
+                        return headerHeight + this._variantConfiguration.contentBottomPadding + binaryFilePlaceholderContentHeight;
+                    }
+                    return item.lastTemplateData.read(reader).expandedContentHeight;
+                }),
+                createTemplate: () => this._instantiationService.createInstance(
+                    DiffEditorItemTemplate,
+                    context.contentDomNode,
+                    context.overflowWidgetsDomNode,
+                    this._workbenchUIElementFactory,
+                    this._variantConfiguration,
+                    this._optionsOverride
+                ),
+                onDidBind: binding => {
+                    const selections = binding.item.lastTemplateData.get().selections;
+                    this._logger.log("acquired editor template", {
+                        file: formatUri(binding.item.modifiedUri ?? binding.item.originalUri),
+                        collapsed: binding.item.collapsed.get(),
+                        expectedExpandedContentHeight: binding.item.lastTemplateData.get().expandedContentHeight,
+                        selections: selections?.length ?? 0
                     });
-                })));
-                const data = this._lastDocStates?.[item.getKey()];
-                if (data) {
-                    transaction(tx => {
-                        item.setViewState(data, tx);
+                    if (selections) {
+                        binding.editor.setSelections(selections);
+                    }
+                },
+                onWillUnbind: (binding, tx) => {
+                    this._logger.log("releasing editor template", {
+                        file: formatUri(binding.item.modifiedUri ?? binding.item.originalUri),
+                        contentHeight: binding.size.get()
                     });
+                    binding.item.lastTemplateData.set({
+                        expandedContentHeight: binding.getExpandedContentHeight(),
+                        selections: binding.editor.getSelections() ?? undefined
+                    }, tx);
                 }
-                map.set(d, item);
-                return item;
-            }));
+            })));
+            const adaptedItems = mapObservableArrayCached(this, manager.virtualizedItems, (item, store) => {
+                const adaptedItem = store.add(( new VirtualizedViewItem(item, context.scrollLeft, this._logger)));
+                const data = this._lastDocStates?.[adaptedItem.getKey()];
+                if (data) {
+                    transaction(tx => adaptedItem.setViewState(data, tx));
+                }
+                return adaptedItem;
+            }).recomputeInitiallyAndOnChange(this._store);
+            viewItemsInfo = derived(this, reader => {
+                const items = adaptedItems.read(reader);
+                const map = ( new Map(( items.map(item => [item.viewModel, item]))));
+                const restoredDocStates = items.filter(item => this._lastDocStates?.[item.getKey()] !== undefined).length;
+                this._logger.log("view items updated", {
+                    items: items.length,
+                    restoredDocStates
+                });
+                return {
+                    items,
+                    getItem: d => map.get(d)
+                };
+            });
+            viewItems = ( viewItemsInfo.map(this, items => items.items));
+            return derived(
+                this,
+                reader => [...viewItems.read(reader), paddingBottomItem.read(reader)]
+            );
+        })));
+        this._viewItemsInfo = viewItemsInfo;
+        this._viewItems = viewItems;
+        this.scrollTop = this._scrollView.scrollTop;
+        this.scrollLeft = this._scrollView.scrollLeft;
+        this.layoutDebugState = derived(this, reader => {
+            const layout = this._scrollView.layout.read(reader);
+            const items = this._viewItems.read(reader);
+            const geometryEdit = this._scrollView.lastGeometryEdit.read(reader);
             return {
-                items,
-                getItem: d => map.get(d)
+                scrollLeft: this.scrollLeft.read(reader),
+                scrollDimensions: this._scrollView.scrollDimensions.read(reader),
+                layout: {
+                    revision: layout.revision,
+                    scrollTop: layout.scrollTop,
+                    logicalScrollHeight: layout.logicalScrollHeight,
+                    scrollHeight: layout.scrollHeight,
+                    renderedHeight: layout.renderedHeight,
+                    leadingScrollSlack: layout.leadingScrollSlack,
+                    trailingScrollSlack: layout.trailingScrollSlack,
+                    contentViewport: serializeOffsetRange(layout.contentViewport),
+                    renderedViewport: serializeOffsetRange(layout.renderedViewport),
+                    hiddenContentHeightAboveViewport: layout.hiddenContentHeightAboveViewport
+                },
+                geometryEdit: geometryEdit ? {
+                    ...geometryEdit,
+                    edits: ( geometryEdit.edits.map(edit => ({
+                        oldRange: serializeOffsetRange(edit.oldRange),
+                        newRange: serializeOffsetRange(edit.newRange)
+                    })))
+                } : undefined,
+                items: ( items.map((item, index) => item.getLayoutDebugState(reader, layout.items[index])))
             };
         });
-        this._viewItems = ( this._viewItemsInfo.map(this, items => items.items));
-        this._spaceBetweenPx = 0;
-        this._totalHeight = ( this._viewItems.map(
-            this,
-            (items, reader) => items.reduce((r, i) => r + i.contentHeight.read(reader) + this._spaceBetweenPx, 0)
-        ));
+        this._elements = h(
+            `div.monaco-component.multiDiffEditor.${this._variantConfiguration.className}`,
+            {},
+            [this._scrollView.domNode, h("div.placeholder@placeholder", {}, [h("div")])]
+        );
         this.activeControl = derived(this, reader => {
             const activeDiffItem = this._viewModel.read(reader)?.activeDiffItem.read(reader);
             if (!activeDiffItem) {
@@ -133,6 +192,16 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
         this._contextKeyService = this._register(this._parentContextKeyService.createScoped(this._element));
         this._instantiationService = this._register(this._parentInstantiationService.createChild(( new ServiceCollection([IContextKeyService, this._contextKeyService]))));
         this._contextKeyService.createKey(EditorContextKeys.inMultiDiffEditor.key, true);
+        this._register(bindContextKey(
+            EditorContextKeys.diffEditorAutomaticRenderSideBySide,
+            this._contextKeyService,
+            reader => this.activeControl.read(reader)?.renderSideBySideInAutomaticMode.read(reader) ?? true
+        ));
+        this._register(bindContextKey(
+            EditorContextKeys.diffEditorTemporaryInlineMode,
+            this._contextKeyService,
+            reader => this.activeControl.read(reader)?.temporaryInlineMode.read(reader) ?? false
+        ));
         this._lastDocStates = {};
         this._register(autorunWithStore((reader, store) => {
             const viewModel = this._viewModel.read(reader);
@@ -152,46 +221,36 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
                 ctxAllCollapsed.set(allCollapsed);
             }
         }));
+        const ctxRenderSideBySide = this._parentContextKeyService.createKey(EditorContextKeys.multiDiffEditorRenderSideBySide.key, true);
         this._register(autorun(reader => {
-            const dimension = this._dimension.read(reader);
-            this._sizeObserver.observe(dimension);
+            const renderSideBySide = this._diffLayoutOptions.read(reader)?.renderSideBySide;
+            if (renderSideBySide !== undefined) {
+                ctxRenderSideBySide.set(renderSideBySide);
+            }
         }));
+        this._logger.logStateChanges({
+            viewModel: this._viewModel,
+            items: this._viewItems,
+            spaceBetweenPx: this._spaceBetweenPx.get(),
+            getScrollTop: () => this._scrollView.getScrollPosition().scrollTop,
+            isPreserveFocusOnLoad: () => this._preserveFocusOnLoad
+        });
         const placeholderMessage = derived(reader => {
             const items = this._viewItems.read(reader);
             if (items.length > 0) {
                 return undefined;
             }
             const vm = this._viewModel.read(reader);
-            return (!vm || vm.isLoading.read(reader)) ? ( localize(238, "Loading...")) : ( localize(239, "No Changed Files"));
+            return (!vm || vm.isLoading.read(reader)) ? ( localize(239, "Loading...")) : ( localize(240, "No Changed Files"));
         });
         this._register(autorun(reader => {
             const message = placeholderMessage.read(reader);
             this._elements.placeholder.innerText = message ?? "";
             this._elements.placeholder.classList.toggle("visible", !!message);
         }));
-        this._scrollableElements.content.style.position = "relative";
         this._register(autorun(reader => {
-            const height = this._sizeObserver.height.read(reader);
-            this._scrollableElements.root.style.height = `${height}px`;
-            const totalHeight = this._totalHeight.read(reader);
-            this._scrollableElements.content.style.height = `${totalHeight}px`;
-            const width = this._sizeObserver.width.read(reader);
-            let scrollWidth = width;
-            const viewItems = this._viewItems.read(reader);
-            const max = findFirstMax(
-                viewItems,
-                compareBy(i => i.maxScroll.read(reader).maxScroll, numberComparator)
-            );
-            if (max) {
-                const maxScroll = max.maxScroll.read(reader);
-                scrollWidth = width + maxScroll.maxScroll;
-            }
-            this._scrollableElement.setScrollDimensions({
-                width: width,
-                height: height,
-                scrollHeight: totalHeight,
-                scrollWidth
-            });
+            this._scrollView.scrollDimensions.read(reader);
+            this._applyPendingScrollState();
         }));
         _element.replaceChildren(this._elements.root);
         this._register(toDisposable(() => {
@@ -211,20 +270,53 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
                 if (activeDiffItem) {
                     return;
                 }
+                if (this._restorePendingActiveDiffItem(viewModel, items)) {
+                    return;
+                }
+                this._logger.log("no active diff item after loading, selecting first change", {
+                    items: items.length
+                });
                 this._navigateToChange("next", !this._preserveFocusOnLoad);
             }
         }));
-        this._register(this._register(autorun(reader => {
-            globalTransaction(tx => {
-                this.render(reader);
-            });
-        })));
     }
     setScrollState(scrollState) {
-        this._scrollableElement.setScrollPosition({
-            scrollLeft: scrollState.left,
-            scrollTop: scrollState.top
+        this._pendingScrollState = scrollState;
+        this._applyPendingScrollState();
+    }
+    _applyPendingScrollState() {
+        const pending = this._pendingScrollState;
+        if (!pending) {
+            return;
+        }
+        this._scrollView.setScrollPosition({
+            scrollLeft: pending.left,
+            scrollTop: pending.top
+        });
+        const applied = this._scrollView.getScrollPosition();
+        const topLanded = pending.top === undefined || applied.scrollTop >= pending.top;
+        const leftLanded = pending.left === undefined || applied.scrollLeft >= pending.left;
+        if (topLanded && leftLanded) {
+            this._pendingScrollState = undefined;
+        }
+        this._logger.log("applied pending scroll state", {
+            requested: pending,
+            applied: {
+                top: applied.scrollTop,
+                left: applied.scrollLeft
+            },
+            landed: topLanded && leftLanded
+        });
+    }
+    clearPendingRestorationState() {
+        this._logger.log("cleared pending restoration state", {
+            hadDocStates: !!this._lastDocStates,
+            hadActiveDiffItemKey: !!this._lastActiveDiffItemKey,
+            hadScrollState: !!this._pendingScrollState
         });
+        this._lastDocStates = undefined;
+        this._lastActiveDiffItemKey = undefined;
+        this._pendingScrollState = undefined;
     }
     setPreserveFocusOnLoad(preserveFocus) {
         this._preserveFocusOnLoad = preserveFocus;
@@ -238,6 +330,11 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
     getScopedInstantiationService() {
         return this._instantiationService;
     }
+    resetWidthBasedLayout() {
+        for (const item of this._viewItemsInfo.get().items) {
+            item.template.get()?.editor.resetWidthBasedLayout();
+        }
+    }
     reveal(resource, options) {
         const viewItems = this._viewItems.get();
         const index = viewItems.findIndex(
@@ -250,11 +347,15 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
         this._viewModel.get().activeDiffItem.setCache(viewItem.viewModel, undefined);
         let scrollTop = 0;
         for (let i = 0; i < index; i++) {
-            scrollTop += viewItems[i].contentHeight.get() + this._spaceBetweenPx;
+            scrollTop += viewItems[i].contentHeight.get() + this._spaceBetweenPx.get();
         }
-        this._scrollableElement.setScrollPosition({
-            scrollTop
+        this._logger.log("reveal", {
+            file: viewItem.getLabel(),
+            index,
+            scrollTop: `${this._scrollView.getScrollPosition().scrollTop} -> ${scrollTop}`,
+            range: options?.range
         });
+        this._scrollView.setLogicalScrollPosition(scrollTop);
         const diffEditor = viewItem.template.get()?.editor;
         const editor = "original" in resource ? diffEditor?.getOriginalEditor() : diffEditor?.getModifiedEditor();
         if (editor && options?.range) {
@@ -263,18 +364,42 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
         }
     }
     getViewState() {
-        return {
+        const viewState = {
             scrollState: {
                 top: this.scrollTop.get(),
                 left: this.scrollLeft.get()
             },
-            docStates: Object.fromEntries(( this._viewItems.get().map(i => [i.getKey(), i.getViewState()])))
+            docStates: Object.fromEntries(( this._viewItems.get().map(i => [i.getKey(), i.getViewState()]))),
+            activeDiffItemKey: this._viewModel.get()?.activeDiffItem.get()?.getKey()
         };
+        if (this._logger.isEnabled) {
+            const docStates = ( Object.values(viewState.docStates ?? {}));
+            this._logger.log("get view state", {
+                scrollTop: viewState.scrollState.top,
+                scrollLeft: viewState.scrollState.left,
+                docStates: docStates.length,
+                collapsed: docStates.filter(s => s.collapsed).length,
+                activeDiffItem: formatDiffItemKey(viewState.activeDiffItemKey)
+            });
+        }
+        return viewState;
     }
-    setViewState(viewState) {
+    setViewState(viewState, tx) {
+        if (this._logger.isEnabled) {
+            const docStates = ( Object.values(viewState.docStates ?? {}));
+            this._logger.log("set view state", {
+                scrollTop: viewState.scrollState.top,
+                scrollLeft: viewState.scrollState.left,
+                docStates: docStates.length,
+                collapsed: docStates.filter(s => s.collapsed).length,
+                activeDiffItem: formatDiffItemKey(viewState.activeDiffItemKey),
+                viewItems: this._viewItems.get().length
+            });
+        }
         this.setScrollState(viewState.scrollState);
         this._lastDocStates = viewState.docStates;
-        transaction(tx => {
+        this._lastActiveDiffItemKey = viewState.activeDiffItemKey;
+        const applyDocStates = tx => {
             if (viewState.docStates) {
                 for (const i of this._viewItems.get()) {
                     const state = viewState.docStates[i.getKey()];
@@ -283,19 +408,63 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
                     }
                 }
             }
+        };
+        if (tx) {
+            applyDocStates(tx);
+        } else {
+            transaction(applyDocStates);
+        }
+        const viewModel = this._viewModel.get();
+        if (viewModel) {
+            this._restorePendingActiveDiffItem(viewModel, viewModel.items.get());
+        }
+    }
+    _restorePendingActiveDiffItem(viewModel, items) {
+        const key = this._lastActiveDiffItemKey;
+        if (key === undefined || items.length === 0) {
+            return false;
+        }
+        this._lastActiveDiffItemKey = undefined;
+        const target = items.find(i => i.getKey() === key);
+        if (!target) {
+            if (this._logger.isEnabled) {
+                this._logger.log("persisted active diff item not found", {
+                    key: formatDiffItemKey(key),
+                    availableKeys: ( items.map(i => formatDiffItemKey(i.getKey())))
+                });
+            }
+            return false;
+        }
+        this._logger.log("restored active diff item", {
+            file: target.modifiedUri ?? target.originalUri,
+            preserveFocus: this._preserveFocusOnLoad
         });
+        viewModel.activeDiffItem.setCache(target, undefined);
+        if (!this._preserveFocusOnLoad) {
+            this._viewItemsInfo.get().getItem(target).binding.get()?.focus();
+        }
+        return true;
     }
     findDocumentDiffItem(resource) {
-        const item = this._viewItems.get().find(v => ( v.viewModel.diffEditorViewModel.model.modified.uri.toString()) === ( resource.toString()) || ( v.viewModel.diffEditorViewModel.model.original.uri.toString()) === ( resource.toString()));
+        const item = this._viewItems.get().find(v => v.viewModel.modifiedUri?.toString() === ( resource.toString()) || v.viewModel.originalUri?.toString() === ( resource.toString()));
         return item?.viewModel.documentDiffItem;
     }
+    focus() {
+        const activeDiffItem = this._viewModel.get()?.activeDiffItem.get();
+        if (!activeDiffItem) {
+            return false;
+        }
+        const binding = this._viewItemsInfo.get().getItem(activeDiffItem).binding.get();
+        binding?.focus();
+        return binding !== undefined;
+    }
     tryGetCodeEditor(resource) {
-        const item = this._viewItems.get().find(v => ( v.viewModel.diffEditorViewModel.model.modified.uri.toString()) === ( resource.toString()) || ( v.viewModel.diffEditorViewModel.model.original.uri.toString()) === ( resource.toString()));
+        const item = this._viewItems.get().find(v => v.viewModel.modifiedUri?.toString() === ( resource.toString()) || v.viewModel.originalUri?.toString() === ( resource.toString()));
         const editor = item?.template.get()?.editor;
-        if (!editor) {
+        if (!editor || item.viewModel.isBinary) {
             return undefined;
         }
-        if (( item.viewModel.diffEditorViewModel.model.modified.uri.toString()) === ( resource.toString())) {
+        if (item.viewModel.modifiedUri?.toString() === ( resource.toString())) {
             return {
                 diffEditor: editor,
                 editor: editor.getModifiedEditor()
@@ -320,12 +489,21 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
         }
         const activeViewModel = this._viewModel.get()?.activeDiffItem.get();
         const currentIndex = activeViewModel ? viewItems.findIndex(v => v.viewModel === activeViewModel) : -1;
+        this._logger.log("navigate to change", {
+            direction,
+            focusEditor,
+            currentIndex,
+            items: viewItems.length
+        });
         if (currentIndex === -1) {
             this._goToFile(0, "first", focusEditor);
             return;
         }
         const currentItem = viewItems[currentIndex];
         if (currentItem.viewModel.collapsed.get()) {
+            this._logger.log("expanding collapsed item to navigate within it", {
+                file: currentItem.getLabel()
+            });
             currentItem.viewModel.collapsed.set(false, undefined);
         }
         const editor = currentItem.template.get()?.editor;
@@ -343,7 +521,15 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
     }
     _goToFile(index, position, focusEditor = true) {
         const item = this._viewItems.get()[index];
-        if (item.viewModel.collapsed.get()) {
+        const wasCollapsed = item.viewModel.collapsed.get();
+        this._logger.log("go to file", {
+            file: item.getLabel(),
+            index,
+            position,
+            focusEditor,
+            wasCollapsed
+        });
+        if (wasCollapsed) {
             item.viewModel.collapsed.set(false, undefined);
         }
         this.reveal({
@@ -365,43 +551,11 @@ let MultiDiffEditorWidgetImpl = class MultiDiffEditorWidgetImpl extends Disposab
             }
         }
         if (focusEditor) {
-            editor?.focus();
+            item.binding.get()?.focus();
         }
     }
-    render(reader) {
-        const scrollTop = this.scrollTop.read(reader);
-        let contentScrollOffsetToScrollOffset = 0;
-        let itemHeightSumBefore = 0;
-        let itemContentHeightSumBefore = 0;
-        const viewPortHeight = this._sizeObserver.height.read(reader);
-        const contentViewPort = OffsetRange.ofStartAndLength(scrollTop, viewPortHeight);
-        const width = this._sizeObserver.width.read(reader);
-        for (const v of this._viewItems.read(reader)) {
-            const itemContentHeight = v.contentHeight.read(reader);
-            const itemHeight = Math.min(itemContentHeight, viewPortHeight);
-            const itemRange = OffsetRange.ofStartAndLength(itemHeightSumBefore, itemHeight);
-            const itemContentRange = OffsetRange.ofStartAndLength(itemContentHeightSumBefore, itemContentHeight);
-            if (itemContentRange.isBefore(contentViewPort)) {
-                contentScrollOffsetToScrollOffset -= itemContentHeight - itemHeight;
-                v.hide();
-            } else if (itemContentRange.isAfter(contentViewPort)) {
-                v.hide();
-            } else {
-                const scroll = Math.max(0, Math.min(
-                    contentViewPort.start - itemContentRange.start,
-                    itemContentHeight - itemHeight
-                ));
-                contentScrollOffsetToScrollOffset -= scroll;
-                const viewPort = OffsetRange.ofStartAndLength(scrollTop + contentScrollOffsetToScrollOffset, viewPortHeight);
-                v.render(itemRange, scroll, width, viewPort);
-            }
-            itemHeightSumBefore += itemHeight + this._spaceBetweenPx;
-            itemContentHeightSumBefore += itemContentHeight + this._spaceBetweenPx;
-        }
-        this._scrollableElements.content.style.transform = `translateY(${-(scrollTop + contentScrollOffsetToScrollOffset)}px)`;
-    }
 };
-MultiDiffEditorWidgetImpl = ( __decorate([( __param(4, IContextKeyService)), ( __param(5, IInstantiationService))], MultiDiffEditorWidgetImpl));
+MultiDiffEditorWidgetImpl = ( __decorate([( __param(8, IContextKeyService)), ( __param(9, IInstantiationService)), ( __param(10, ILogService))], MultiDiffEditorWidgetImpl));
 function highlightRange(targetEditor, range) {
     const modelNow = targetEditor.getModel();
     const decorations = targetEditor.createDecorationsCollection([{
@@ -417,27 +571,50 @@ function highlightRange(targetEditor, range) {
         }
     }, 350);
 }
+function serializeOffsetRange(range) {
+    return {
+        start: range.start,
+        endExclusive: range.endExclusive
+    };
+}
 class VirtualizedViewItem extends Disposable {
-    constructor(viewModel, _objectPool, _scrollLeft, _deltaScrollVertical) {
+    get collapsed() {
+        return this.viewModel.collapsed;
+    }
+    getLayoutDebugState(reader, layout) {
+        const binding = this.binding.read(reader);
+        return {
+            key: this.getKey(),
+            label: this.getLabel(),
+            originalUri: this.viewModel.originalUri?.toString() ?? null,
+            modifiedUri: this.viewModel.modifiedUri?.toString() ?? null,
+            collapsed: this.collapsed.read(reader),
+            hasTemplate: binding !== undefined,
+            verticalState: {
+                contentHeight: this.size.read(reader),
+                itemViewportOffset: layout.scrollOffset
+            },
+            maxScroll: this.maxScroll.read(reader).maxScroll,
+            layout: {
+                contentRange: serializeOffsetRange(layout.contentRange),
+                renderedRange: serializeOffsetRange(layout.renderedRange),
+                maxScrollOffset: layout.maxScrollOffset,
+                scrollOffset: layout.scrollOffset,
+                visibility: layout.visibility
+            }
+        };
+    }
+    constructor(_managedItem, _scrollLeft, _logger) {
         super();
-        this.viewModel = viewModel;
-        this._objectPool = _objectPool;
+        this._managedItem = _managedItem;
         this._scrollLeft = _scrollLeft;
-        this._deltaScrollVertical = _deltaScrollVertical;
-        this._templateRef = this._register(disposableObservableValue(this, undefined));
-        this.contentHeight = derived(
-            this,
-            reader => this._templateRef.read(reader)?.object.contentHeight?.read(reader) ?? this.viewModel.lastTemplateData.read(reader).contentHeight
-        );
-        this.maxScroll = derived(
-            this,
-            reader => this._templateRef.read(reader)?.object.maxScroll.read(reader) ?? {
-                maxScroll: 0,
-                scrollWidth: 0
-            }
-        );
-        this.template = derived(this, reader => this._templateRef.read(reader)?.object);
-        this._isHidden = observableValue(this, false);
+        this._logger = _logger;
+        this.size = _managedItem.size;
+        this.contentHeight = this.size;
+        this.maxScroll = _managedItem.maxScroll;
+        this.template = _managedItem.template;
+        this.binding = _managedItem.binding;
+        this.viewModel = _managedItem.item;
         this._isFocused = derived(
             this,
             reader => this.template.read(reader)?.isFocused.read(reader) ?? false
@@ -445,34 +622,18 @@ class VirtualizedViewItem extends Disposable {
         this.viewModel.setIsFocused(this._isFocused, undefined);
         this._register(autorun(reader => {
             const scrollLeft = this._scrollLeft.read(reader);
-            this._templateRef.read(reader)?.object.setScrollLeft(scrollLeft);
+            this.binding.read(reader)?.setScrollLeft(scrollLeft);
         }));
-        this._register(autorun(reader => {
-            const ref = this._templateRef.read(reader);
-            if (!ref) {
-                return;
-            }
-            const isHidden = this._isHidden.read(reader);
-            if (!isHidden) {
-                return;
-            }
-            const isFocused = ref.object.isFocused.read(reader);
-            if (isFocused) {
-                return;
-            }
-            this._clear();
-        }));
-    }
-    dispose() {
-        this._clear();
-        super.dispose();
     }
     toString() {
-        return `VirtualViewItem(${this.viewModel.documentDiffItem.modified?.uri.toString()})`;
+        return `VirtualViewItem(${this.viewModel.modifiedUri?.toString() ?? this.viewModel.originalUri?.toString()})`;
     }
     getKey() {
         return this.viewModel.getKey();
     }
+    getLabel() {
+        return formatUri(this.viewModel.modifiedUri ?? this.viewModel.originalUri);
+    }
     getViewState() {
         transaction(tx => {
             this._updateTemplateData(tx);
@@ -483,6 +644,11 @@ class VirtualizedViewItem extends Disposable {
         };
     }
     setViewState(viewState, tx) {
+        this._logger.log("item view state restored", {
+            file: this.getLabel(),
+            collapsed: viewState.collapsed,
+            selections: viewState.selections?.length ?? 0
+        });
         this.viewModel.collapsed.set(viewState.collapsed, tx);
         this._updateTemplateData(tx);
         const data = this.viewModel.lastTemplateData.get();
@@ -491,49 +657,26 @@ class VirtualizedViewItem extends Disposable {
             ...data,
             selections
         }, tx);
-        const ref = this._templateRef.get();
-        if (ref) {
-            if (selections) {
-                ref.object.editor.setSelections(selections);
-            }
+        const binding = this.binding.get();
+        if (binding && selections) {
+            binding.editor.setSelections(selections);
         }
     }
     _updateTemplateData(tx) {
-        const ref = this._templateRef.get();
-        if (!ref) {
+        const binding = this.binding.get();
+        if (!binding) {
             return;
         }
         this.viewModel.lastTemplateData.set({
-            contentHeight: ref.object.contentHeight.get(),
-            selections: ref.object.editor.getSelections() ?? undefined
+            expandedContentHeight: binding.getExpandedContentHeight(),
+            selections: binding.editor.getSelections() ?? undefined
         }, tx);
     }
-    _clear() {
-        const ref = this._templateRef.get();
-        if (!ref) {
-            return;
-        }
-        transaction(tx => {
-            this._updateTemplateData(tx);
-            ref.object.hide();
-            this._templateRef.set(undefined, tx);
-        });
-    }
     hide() {
-        this._isHidden.set(true, undefined);
+        this._managedItem.hide();
     }
-    render(verticalSpace, offset, width, viewPort) {
-        this._isHidden.set(false, undefined);
-        let ref = this._templateRef.get();
-        if (!ref) {
-            ref = this._objectPool.getUnusedObj(( new TemplateData(this.viewModel, this._deltaScrollVertical)));
-            this._templateRef.set(ref, undefined);
-            const selections = this.viewModel.lastTemplateData.get().selections;
-            if (selections) {
-                ref.object.editor.setSelections(selections);
-            }
-        }
-        ref.object.render(verticalSpace, width, offset, viewPort);
+    render(verticalSpace, offset, width, viewPort, context) {
+        this._managedItem.render(verticalSpace, offset, width, viewPort, context);
     }
 }