@codingame/monaco-vscode-scm-service-override 17.2.0 → 18.0.0

package/vscode/src/vs/workbench/contrib/scm/browser/scmHistoryViewPane.js

@@ -2,13 +2,10 @@
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
 import * as scm from './media/scm.css';
-import { language } from '@codingame/monaco-vscode-api/vscode/vs/base/common/platform';
 import { $, reset, append, h } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { IconLabel } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/iconLabel/iconLabel';
-import { safeIntl, fromNow } from '@codingame/monaco-vscode-api/vscode/vs/base/common/date';
 import { createMatches } from '@codingame/monaco-vscode-api/vscode/vs/base/common/filters';
-import { MarkdownString } from '@codingame/monaco-vscode-api/vscode/vs/base/common/htmlContent';
-import { DisposableStore, Disposable, MutableDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { combinedDisposable, DisposableStore, Disposable, MutableDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
 import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
@@ -20,7 +17,7 @@ import { WorkbenchHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/p
 import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
 import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
 import { IKeybindingService } from '@codingame/monaco-vscode-api/vscode/vs/platform/keybinding/common/keybinding.service';
-import { WorkbenchAsyncDataTree } from '@codingame/monaco-vscode-api/vscode/vs/platform/list/browser/listService';
+import { WorkbenchCompressibleAsyncDataTree } from '@codingame/monaco-vscode-api/vscode/vs/platform/list/browser/listService';
 import { IOpenerService } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service';
 import { asCssVariable } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colorUtils';
 import { foreground } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/baseColors';
@@ -34,12 +31,12 @@ import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/misc
 import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/quickpickColors';
 import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/searchColors';
 import { IThemeService } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/themeService.service';
-import { ViewAction, ViewPane, ViewPaneShowActions } from '@codingame/monaco-vscode-65619f8f-0eab-5d8b-855a-43b6353fe527-common/vscode/vs/workbench/browser/parts/views/viewPane';
+import { ViewAction, ViewPane, ViewPaneShowActions } from '@codingame/monaco-vscode-501b06ab-3f58-516b-8a1a-c29d375d3da4-common/vscode/vs/workbench/browser/parts/views/viewPane';
 import { ViewContainerLocation } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/views';
 import { IViewDescriptorService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/views.service';
-import { renderSCMHistoryItemGraph, historyItemHoverDefaultLabelBackground, historyItemHoverLabelForeground, historyItemHoverAdditionsForeground, historyItemHoverDeletionsForeground, historyItemHoverDefaultLabelForeground, SWIMLANE_WIDTH, renderSCMHistoryGraphPlaceholder, toISCMHistoryItemViewModelArray } from '@codingame/monaco-vscode-be8ddbb5-094a-5657-b1cc-fe106c94c632-common/vscode/vs/workbench/contrib/scm/browser/scmHistory';
-import { getHistoryItemEditorTitle, isSCMHistoryItemViewModelTreeElement, isSCMHistoryItemLoadMoreTreeElement, isSCMRepository, getProviderKey } from '@codingame/monaco-vscode-be8ddbb5-094a-5657-b1cc-fe106c94c632-common/vscode/vs/workbench/contrib/scm/browser/util';
-import { HISTORY_VIEW_PANE_ID } from '@codingame/monaco-vscode-ff9fa663-eae3-5274-8573-c2b918871e4b-common/vscode/vs/workbench/contrib/scm/common/scm';
+import { renderSCMHistoryItemGraph, historyItemHoverDefaultLabelBackground, historyItemHoverLabelForeground, SWIMLANE_WIDTH, renderSCMHistoryGraphPlaceholder, getHistoryItemIndex, toISCMHistoryItemViewModelArray } from '@codingame/monaco-vscode-7adbeffb-8051-54a9-8c9b-b62ce9e5836f-common/vscode/vs/workbench/contrib/scm/browser/scmHistory';
+import { getHistoryItemEditorTitle, isSCMHistoryItemViewModelTreeElement, isSCMHistoryItemChangeViewModelTreeElement, isSCMHistoryItemChangeNode, isSCMHistoryItemLoadMoreTreeElement, getHistoryItemHoverContent, isSCMRepository, getProviderKey } from '@codingame/monaco-vscode-7adbeffb-8051-54a9-8c9b-b62ce9e5836f-common/vscode/vs/workbench/contrib/scm/browser/util';
+import { HISTORY_VIEW_PANE_ID, ViewMode } from '@codingame/monaco-vscode-ff9fa663-eae3-5274-8573-c2b918871e4b-common/vscode/vs/workbench/contrib/scm/common/scm';
 import { ISCMService, ISCMViewService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/scm/common/scm.service';
 import { stripIcons } from '@codingame/monaco-vscode-api/vscode/vs/base/common/iconLabels';
 import { Position } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/layout/browser/layoutService';
@@ -48,7 +45,6 @@ import { HoverPosition } from '@codingame/monaco-vscode-api/vscode/vs/base/brows
 import { registerAction2, MenuId, Action2, MenuRegistry, isIMenuItem } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/common/actions';
 import { IMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/common/actions.service';
 import { Sequencer, Throttler } from '@codingame/monaco-vscode-api/vscode/vs/base/common/async';
-import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
 import { ICommandService } from '@codingame/monaco-vscode-api/vscode/vs/platform/commands/common/commands.service';
 import { ActionRunner } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
 import { delta, groupBy as groupBy$1 } from '@codingame/monaco-vscode-api/vscode/vs/base/common/arrays';
@@ -68,14 +64,28 @@ import { StorageScope, StorageTarget } from '@codingame/monaco-vscode-api/vscode
 import { IStorageService } from '@codingame/monaco-vscode-api/vscode/vs/platform/storage/common/storage.service';
 import { IExtensionService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/extensions/common/extensions.service';
 import { groupBy } from '@codingame/monaco-vscode-api/vscode/vs/base/common/collections';
-import { getFlatContextMenuActions } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/browser/menuEntryActionViewItem';
-import { autorun, autorunWithStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/autorun';
-import { observableValue } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/base';
-import { waitForState } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/utilsCancellation';
-import { derived } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/derived';
-import { observableSignal, constObservable, observableFromEvent, latestChangedValue, runOnChange } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/utils';
+import { getActionBarActions, getFlatContextMenuActions } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/browser/menuEntryActionViewItem';
+import { ResourceLabels } from '@codingame/monaco-vscode-f24b7f0a-ceeb-5877-9148-81eb98a4f5d7-common/vscode/vs/workbench/browser/labels';
+import { FileKind } from '@codingame/monaco-vscode-api/vscode/vs/platform/files/common/files';
+import { WorkbenchToolBar } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/browser/toolbar';
+import { ITelemetryService } from '@codingame/monaco-vscode-api/vscode/vs/platform/telemetry/common/telemetry.service';
+import { basename } from '@codingame/monaco-vscode-api/vscode/vs/base/common/path';
+import { IEditorService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/editor/common/editorService.service';
+import { ScmHistoryItemResolver } from '@codingame/monaco-vscode-f99b74f5-fcb7-512f-8c6c-35f5a107577d-common/vscode/vs/workbench/contrib/multiDiffEditor/browser/scmMultiDiffSourceResolver';
+import { ResourceTree } from '@codingame/monaco-vscode-7adbeffb-8051-54a9-8c9b-b62ce9e5836f-common/vscode/vs/base/common/resourceTree';
+import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
+import { ILabelService } from '@codingame/monaco-vscode-api/vscode/vs/platform/label/common/label.service';
+import { autorun, autorunWithStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
+import { observableValue } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableValue';
+import { waitForState } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/utils/utilsCancellation';
+import { observableFromEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableFromEvent';
+import { observableSignal } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableSignal';
+import { constObservable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/constObservable';
+import { latestChangedValue } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/experimental/utils';
+import { derived } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/derived';
+import { runOnChange } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/utils/runOnChange';
 
-var HistoryItemRenderer_1, HistoryItemLoadMoreRenderer_1;
+var HistoryItemRenderer_1, HistoryItemChangeRenderer_1, HistoryItemLoadMoreRenderer_1;
 registerCss(scm);
 const PICK_REPOSITORY_ACTION_ID = 'workbench.scm.action.graph.pickRepository';
 const PICK_HISTORY_ITEM_REFS_ACTION_ID = 'workbench.scm.action.graph.pickHistoryItemRefs';
@@ -111,23 +121,23 @@ class SCMHistoryItemRefsActionViewItem extends ActionViewItem {
             icon.classList.add(...ThemeIcon.asClassNameArray(Codicon.gitBranch));
             const name = $('.name');
             if (this._historyItemsFilter === 'all') {
-                name.textContent = ( localize(9211, "All"));
+                name.textContent = ( localize(9454, "All"));
             }
             else if (this._historyItemsFilter === 'auto') {
-                name.textContent = ( localize(9212, "Auto"));
+                name.textContent = ( localize(9455, "Auto"));
             }
             else if (this._historyItemsFilter.length === 1) {
                 name.textContent = this._historyItemsFilter[0].name;
             }
             else {
-                name.textContent = ( localize(9213, "{0} Items", this._historyItemsFilter.length));
+                name.textContent = ( localize(9456, "{0} Items", this._historyItemsFilter.length));
             }
             reset(this.label, icon, name);
         }
     }
     getTooltip() {
         if (this._historyItemsFilter === 'all') {
-            return localize(9214, "All history item references");
+            return localize(9457, "All history item references");
         }
         else if (this._historyItemsFilter === 'auto') {
             const historyProvider = this._repository.provider.historyProvider.get();
@@ -149,7 +159,7 @@ registerAction2(class extends ViewAction {
     constructor() {
         super({
             id: PICK_REPOSITORY_ACTION_ID,
-            title: ( localize(9215, "Repository Picker")),
+            title: ( localize(9458, "Repository Picker")),
             viewId: HISTORY_VIEW_PANE_ID,
             f1: false,
             menu: {
@@ -168,7 +178,7 @@ registerAction2(class extends ViewAction {
     constructor() {
         super({
             id: PICK_HISTORY_ITEM_REFS_ACTION_ID,
-            title: ( localize(9216, "History Item Reference Picker")),
+            title: ( localize(9459, "History Item Reference Picker")),
             icon: Codicon.gitBranch,
             viewId: HISTORY_VIEW_PANE_ID,
             precondition: ( ContextKeys.SCMHistoryItemCount.notEqualsTo(0)),
@@ -188,7 +198,7 @@ registerAction2(class extends ViewAction {
     constructor() {
         super({
             id: 'workbench.scm.action.graph.revealCurrentHistoryItem',
-            title: ( localize(9217, "Go to Current History Item")),
+            title: ( localize(9460, "Go to Current History Item")),
             icon: Codicon.target,
             viewId: HISTORY_VIEW_PANE_ID,
             precondition: ( ContextKeyExpr.and(( ContextKeys.SCMHistoryItemCount.notEqualsTo(0)), ( ContextKeys.SCMCurrentHistoryItemRefInFilter.isEqualTo(true)))),
@@ -208,7 +218,7 @@ registerAction2(class extends ViewAction {
     constructor() {
         super({
             id: 'workbench.scm.action.graph.refresh',
-            title: ( localize(9218, "Refresh")),
+            title: ( localize(9461, "Refresh")),
             viewId: HISTORY_VIEW_PANE_ID,
             f1: false,
             icon: Codicon.refresh,
@@ -223,13 +233,50 @@ registerAction2(class extends ViewAction {
         view.refresh();
     }
 });
+registerAction2(class extends ViewAction {
+    constructor() {
+        super({
+            id: 'workbench.scm.action.graph.setListViewMode',
+            title: ( localize(9462, "View as List")),
+            viewId: HISTORY_VIEW_PANE_ID,
+            toggled: ( ContextKeys.SCMHistoryViewMode.isEqualTo(ViewMode.List)),
+            menu: { id: MenuId.SCMHistoryTitle, group: '9_viewmode', order: 1 },
+            f1: false
+        });
+    }
+    async runInView(_, view) {
+        view.setViewMode(ViewMode.List);
+    }
+});
+registerAction2(class extends ViewAction {
+    constructor() {
+        super({
+            id: 'workbench.scm.action.graph.setTreeViewMode',
+            title: ( localize(9463, "View as Tree")),
+            viewId: HISTORY_VIEW_PANE_ID,
+            toggled: ( ContextKeys.SCMHistoryViewMode.isEqualTo(ViewMode.Tree)),
+            menu: { id: MenuId.SCMHistoryTitle, group: '9_viewmode', order: 2 },
+            f1: false
+        });
+    }
+    async runInView(_, view) {
+        view.setViewMode(ViewMode.Tree);
+    }
+});
 registerAction2(class extends Action2 {
     constructor() {
         super({
             id: 'workbench.scm.action.graph.viewChanges',
-            title: ( localize(9219, "Open Changes")),
+            title: ( localize(9464, "Open Changes")),
+            icon: Codicon.diffMultiple,
             f1: false,
             menu: [
+                {
+                    id: MenuId.SCMHistoryItemContext,
+                    when: ( ContextKeyExpr.equals('config.multiDiffEditor.experimental.enabled', true)),
+                    group: 'inline',
+                    order: 1
+                },
                 {
                     id: MenuId.SCMHistoryItemContext,
                     when: ( ContextKeyExpr.equals('config.multiDiffEditor.experimental.enabled', true)),
@@ -253,26 +300,43 @@ registerAction2(class extends Action2 {
                 return;
             }
         }
-        const historyItemParentId = historyItemLast.parentIds.length > 0 ? historyItemLast.parentIds[0] : undefined;
-        const historyItemChanges = await historyProvider?.provideHistoryItemChanges(historyItem.id, historyItemParentId);
-        if (!historyItemChanges?.length) {
-            return;
-        }
         const title = historyItems.length === 1 ?
             getHistoryItemEditorTitle(historyItem) :
             ( localize(
-            9220,
+            9465,
             "All Changes ({0} ↔ {1})",
             historyItemLast.displayId ?? historyItemLast.id,
             historyItem.displayId ?? historyItem.id
         ));
-        const rootUri = provider.rootUri;
-        const path = rootUri ? rootUri.path : provider.label;
-        const multiDiffSourceUri = ( URI.from(
-            { scheme: 'scm-history-item', path: `${path}/${historyItemParentId}..${historyItem.id}` },
-            true
-        ));
-        commandService.executeCommand('_workbench.openMultiDiffEditor', { title, multiDiffSourceUri, resources: historyItemChanges });
+        const multiDiffSourceUri = ScmHistoryItemResolver.getMultiDiffSourceUri(provider, historyItem);
+        commandService.executeCommand('_workbench.openMultiDiffEditor', { title, multiDiffSourceUri });
+    }
+});
+registerAction2(class extends Action2 {
+    constructor() {
+        super({
+            id: 'workbench.scm.action.graph.openFile',
+            title: ( localize(9466, "Open File")),
+            icon: Codicon.goToFile,
+            f1: false,
+            menu: [
+                {
+                    id: MenuId.SCMHistoryItemChangeContext,
+                    group: 'inline',
+                    order: 1
+                },
+            ]
+        });
+    }
+    async run(accessor, historyItem, historyItemChange) {
+        const editorService = accessor.get(IEditorService);
+        if (!historyItem || !historyItemChange.modifiedUri) {
+            return;
+        }
+        await editorService.openEditor({
+            resource: historyItemChange.modifiedUri,
+            label: `${basename(historyItemChange.modifiedUri.fsPath)} (${historyItem.displayId ?? historyItem.id})`,
+        });
     }
 });
 class ListDelegate {
@@ -283,6 +347,9 @@ class ListDelegate {
         if (isSCMHistoryItemViewModelTreeElement(element)) {
             return HistoryItemRenderer.TEMPLATE_ID;
         }
+        else if (isSCMHistoryItemChangeViewModelTreeElement(element) || isSCMHistoryItemChangeNode(element)) {
+            return HistoryItemChangeRenderer.TEMPLATE_ID;
+        }
         else if (isSCMHistoryItemLoadMoreTreeElement(element)) {
             return HistoryItemLoadMoreRenderer.TEMPLATE_ID;
         }
@@ -295,13 +362,17 @@ let HistoryItemRenderer = class HistoryItemRenderer {
     static { HistoryItemRenderer_1 = this; }
     static { this.TEMPLATE_ID = 'history-item'; }
     get templateId() { return HistoryItemRenderer_1.TEMPLATE_ID; }
-    constructor(hoverDelegate, _clipboardService, _configurationService, _contextKeyService, _hoverService, _menuService, _themeService) {
+    constructor(hoverDelegate, _clipboardService, _commandService, _configurationService, _contextKeyService, _contextMenuService, _hoverService, _keybindingService, _menuService, _telemetryService, _themeService) {
         this.hoverDelegate = hoverDelegate;
         this._clipboardService = _clipboardService;
+        this._commandService = _commandService;
         this._configurationService = _configurationService;
         this._contextKeyService = _contextKeyService;
+        this._contextMenuService = _contextMenuService;
         this._hoverService = _hoverService;
+        this._keybindingService = _keybindingService;
         this._menuService = _menuService;
+        this._telemetryService = _telemetryService;
         this._themeService = _themeService;
         this._badgesConfig = observableConfigValue('scm.graph.badges', 'filter', this._configurationService);
     }
@@ -309,19 +380,28 @@ let HistoryItemRenderer = class HistoryItemRenderer {
         container.parentElement.parentElement.querySelector('.monaco-tl-twistie').classList.add('force-no-twistie');
         const element = append(container, $('.history-item'));
         const graphContainer = append(element, $('.graph-container'));
-        const iconLabel = ( new IconLabel(
-            element,
-            { supportIcons: true, supportHighlights: true, supportDescriptionHighlights: true }
-        ));
+        const iconLabel = ( new IconLabel(element, {
+            supportIcons: true, supportHighlights: true, supportDescriptionHighlights: true
+        }));
         const labelContainer = append(element, $('.label-container'));
-        element.appendChild(labelContainer);
-        return { element, graphContainer, label: iconLabel, labelContainer, elementDisposables: ( new DisposableStore()), disposables: ( new DisposableStore()) };
+        const actionsContainer = append(element, $('.actions'));
+        const actionBar = ( new WorkbenchToolBar(
+            actionsContainer,
+            undefined,
+            this._menuService,
+            this._contextKeyService,
+            this._contextMenuService,
+            this._keybindingService,
+            this._commandService,
+            this._telemetryService
+        ));
+        return { element, graphContainer, label: iconLabel, labelContainer, actionBar, elementDisposables: ( new DisposableStore()), disposables: combinedDisposable(iconLabel, actionBar) };
     }
-    renderElement(node, index, templateData, height) {
+    renderElement(node, index, templateData) {
         const provider = node.element.repository.provider;
         const historyItemViewModel = node.element.historyItemViewModel;
         const historyItem = historyItemViewModel.historyItem;
-        const historyItemHover = this._hoverService.setupManagedHover(this.hoverDelegate, templateData.element, this._getHoverContent(node.element), {
+        const historyItemHover = this._hoverService.setupManagedHover(this.hoverDelegate, templateData.element, getHistoryItemHoverContent(this._themeService, historyItem), {
             actions: this._getHoverActions(provider, historyItem),
         });
         templateData.elementDisposables.add(historyItemHover);
@@ -333,6 +413,12 @@ let HistoryItemRenderer = class HistoryItemRenderer {
         const [matches, descriptionMatches] = this._processMatches(historyItemViewModel, node.filterData);
         templateData.label.setLabel(historyItem.subject, historyItem.author, { matches, descriptionMatches, extraClasses });
         this._renderBadges(historyItem, templateData);
+        const actions = this._menuService.getMenuActions(MenuId.SCMHistoryItemContext, this._contextKeyService, { arg: provider, shouldForwardArgs: true });
+        templateData.actionBar.context = historyItem;
+        templateData.actionBar.setActions(getActionBarActions(actions, 'inline').primary);
+    }
+    renderCompressedElements(node, index, templateData) {
+        throw ( new Error('Should never happen since node is incompressible'));
     }
     _renderBadges(historyItem, templateData) {
         templateData.elementDisposables.add(autorun(reader => {
@@ -411,59 +497,6 @@ let HistoryItemRenderer = class HistoryItemRenderer {
             }))
         ];
     }
-    _getHoverContent(element) {
-        const colorTheme = this._themeService.getColorTheme();
-        const historyItem = element.historyItemViewModel.historyItem;
-        const markdown = ( new MarkdownString('', { isTrusted: true, supportThemeIcons: true }));
-        if (historyItem.author) {
-            const icon = URI.isUri(historyItem.authorIcon)
-                ? `![${historyItem.author}](${( historyItem.authorIcon.toString())}|width=20,height=20)`
-                : ThemeIcon.isThemeIcon(historyItem.authorIcon)
-                    ? `$(${historyItem.authorIcon.id})`
-                    : '$(account)';
-            if (historyItem.authorEmail) {
-                const emailTitle = ( localize(9221, "Email"));
-                markdown.appendMarkdown(`${icon} [**${historyItem.author}**](mailto:${historyItem.authorEmail} "${emailTitle} ${historyItem.author}")`);
-            }
-            else {
-                markdown.appendMarkdown(`${icon} **${historyItem.author}**`);
-            }
-            if (historyItem.timestamp) {
-                const dateFormatter = safeIntl.DateTimeFormat(language, { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' });
-                markdown.appendMarkdown(`, $(history) ${fromNow(historyItem.timestamp, true, true)} (${dateFormatter.format(historyItem.timestamp)})`);
-            }
-            markdown.appendMarkdown('\n\n');
-        }
-        markdown.appendMarkdown(`${historyItem.message.replace(/\r\n|\r|\n/g, '\n\n')}\n\n`);
-        if (historyItem.statistics) {
-            markdown.appendMarkdown(`---\n\n`);
-            markdown.appendMarkdown(`<span>${historyItem.statistics.files === 1 ?
-                ( localize(9222, "{0} file changed", historyItem.statistics.files)) :
-                ( localize(9223, "{0} files changed", historyItem.statistics.files))}</span>`);
-            if (historyItem.statistics.insertions) {
-                const additionsForegroundColor = colorTheme.getColor(historyItemHoverAdditionsForeground);
-                markdown.appendMarkdown(`,&nbsp;<span style="color:${additionsForegroundColor};">${historyItem.statistics.insertions === 1 ?
-                    ( localize(9224, "{0} insertion{1}", historyItem.statistics.insertions, '(+)')) :
-                    ( localize(9225, "{0} insertions{1}", historyItem.statistics.insertions, '(+)'))}</span>`);
-            }
-            if (historyItem.statistics.deletions) {
-                const deletionsForegroundColor = colorTheme.getColor(historyItemHoverDeletionsForeground);
-                markdown.appendMarkdown(`,&nbsp;<span style="color:${deletionsForegroundColor};">${historyItem.statistics.deletions === 1 ?
-                    ( localize(9226, "{0} deletion{1}", historyItem.statistics.deletions, '(-)')) :
-                    ( localize(9227, "{0} deletions{1}", historyItem.statistics.deletions, '(-)'))}</span>`);
-            }
-        }
-        if ((historyItem.references ?? []).length > 0) {
-            markdown.appendMarkdown(`\n\n---\n\n`);
-            markdown.appendMarkdown(( (historyItem.references ?? []).map(ref => {
-                const labelIconId = ThemeIcon.isThemeIcon(ref.icon) ? ref.icon.id : '';
-                const labelBackgroundColor = ref.color ? asCssVariable(ref.color) : asCssVariable(historyItemHoverDefaultLabelBackground);
-                const labelForegroundColor = ref.color ? asCssVariable(historyItemHoverLabelForeground) : asCssVariable(historyItemHoverDefaultLabelForeground);
-                return `<span style="color:${labelForegroundColor};background-color:${labelBackgroundColor};border-radius:10px;">&nbsp;$(${labelIconId})&nbsp;${ref.name}&nbsp;&nbsp;</span>`;
-            })).join('&nbsp;&nbsp;'));
-        }
-        return { markdown, markdownNotSupportedFallback: historyItem.message };
-    }
     _processMatches(historyItemViewModel, filterData) {
         if (!filterData) {
             return [undefined, undefined];
@@ -473,7 +506,7 @@ let HistoryItemRenderer = class HistoryItemRenderer {
             historyItemViewModel.historyItem.author === filterData.label ? createMatches(filterData.score) : undefined
         ];
     }
-    disposeElement(element, index, templateData, height) {
+    disposeElement(element, index, templateData) {
         templateData.elementDisposables.clear();
     }
     disposeTemplate(templateData) {
@@ -482,12 +515,109 @@ let HistoryItemRenderer = class HistoryItemRenderer {
 };
 HistoryItemRenderer = HistoryItemRenderer_1 = ( __decorate([
     ( __param(1, IClipboardService)),
-    ( __param(2, IConfigurationService)),
-    ( __param(3, IContextKeyService)),
-    ( __param(4, IHoverService)),
-    ( __param(5, IMenuService)),
-    ( __param(6, IThemeService))
+    ( __param(2, ICommandService)),
+    ( __param(3, IConfigurationService)),
+    ( __param(4, IContextKeyService)),
+    ( __param(5, IContextMenuService)),
+    ( __param(6, IHoverService)),
+    ( __param(7, IKeybindingService)),
+    ( __param(8, IMenuService)),
+    ( __param(9, ITelemetryService)),
+    ( __param(10, IThemeService))
 ], HistoryItemRenderer));
+let HistoryItemChangeRenderer = class HistoryItemChangeRenderer {
+    static { HistoryItemChangeRenderer_1 = this; }
+    static { this.TEMPLATE_ID = 'history-item-change'; }
+    get templateId() { return HistoryItemChangeRenderer_1.TEMPLATE_ID; }
+    constructor(viewMode, resourceLabels, _commandService, _contextKeyService, _contextMenuService, _keybindingService, _labelService, _menuService, _telemetryService) {
+        this.viewMode = viewMode;
+        this.resourceLabels = resourceLabels;
+        this._commandService = _commandService;
+        this._contextKeyService = _contextKeyService;
+        this._contextMenuService = _contextMenuService;
+        this._keybindingService = _keybindingService;
+        this._labelService = _labelService;
+        this._menuService = _menuService;
+        this._telemetryService = _telemetryService;
+    }
+    renderTemplate(container) {
+        const rowElement = container.parentElement;
+        const element = append(container, $('.history-item-change'));
+        const graphPlaceholder = append(element, $('.graph-placeholder'));
+        const labelContainer = append(element, $('.label-container'));
+        const resourceLabel = this.resourceLabels.create(labelContainer, {
+            supportDescriptionHighlights: true, supportHighlights: true
+        });
+        const disposables = ( new DisposableStore());
+        const actionsContainer = append(resourceLabel.element, $('.actions'));
+        const actionBar = ( new WorkbenchToolBar(
+            actionsContainer,
+            undefined,
+            this._menuService,
+            this._contextKeyService,
+            this._contextMenuService,
+            this._keybindingService,
+            this._commandService,
+            this._telemetryService
+        ));
+        disposables.add(actionBar);
+        return { rowElement, element, graphPlaceholder, resourceLabel, actionBar, disposables };
+    }
+    renderElement(elementOrNode, index, templateData, details) {
+        const historyItemViewModel = isSCMHistoryItemChangeViewModelTreeElement(elementOrNode.element) ? elementOrNode.element.historyItemViewModel : elementOrNode.element.context.historyItemViewModel;
+        const historyItemChange = isSCMHistoryItemChangeViewModelTreeElement(elementOrNode.element) ? elementOrNode.element.historyItemChange : elementOrNode.element;
+        const graphColumns = isSCMHistoryItemChangeViewModelTreeElement(elementOrNode.element) ? elementOrNode.element.graphColumns : elementOrNode.element.context.historyItemViewModel.outputSwimlanes;
+        this._renderGraphPlaceholder(templateData, historyItemViewModel, graphColumns);
+        const hidePath = this.viewMode() === ViewMode.Tree;
+        const fileKind = isSCMHistoryItemChangeViewModelTreeElement(elementOrNode.element) ? FileKind.FILE : FileKind.FOLDER;
+        templateData.resourceLabel.setFile(historyItemChange.uri, { fileDecorations: { colors: false, badges: true }, fileKind, hidePath });
+        if (fileKind === FileKind.FILE) {
+            const actions = this._menuService.getMenuActions(MenuId.SCMHistoryItemChangeContext, this._contextKeyService, { arg: historyItemViewModel.historyItem, shouldForwardArgs: true });
+            templateData.actionBar.context = historyItemChange;
+            templateData.actionBar.setActions(getActionBarActions(actions, 'inline').primary);
+        }
+        else {
+            templateData.actionBar.context = undefined;
+            templateData.actionBar.setActions([]);
+        }
+    }
+    renderCompressedElements(node, index, templateData, details) {
+        const compressed = node.element;
+        const historyItemViewModel = compressed.elements[0].context.historyItemViewModel;
+        const graphColumns = compressed.elements[0].context.historyItemViewModel.outputSwimlanes;
+        this._renderGraphPlaceholder(templateData, historyItemViewModel, graphColumns);
+        const label = ( compressed.elements.map(e => e.name));
+        const folder = compressed.elements[compressed.elements.length - 1];
+        templateData.resourceLabel.setResource({ resource: folder.uri, name: label }, {
+            fileDecorations: { colors: false, badges: true },
+            fileKind: FileKind.FOLDER,
+            separator: this._labelService.getSeparator(folder.uri.scheme)
+        });
+        templateData.actionBar.context = undefined;
+        templateData.actionBar.setActions([]);
+    }
+    _renderGraphPlaceholder(templateData, historyItemViewModel, graphColumns) {
+        const graphPlaceholderSvgWidth = SWIMLANE_WIDTH * (graphColumns.length + 1);
+        const marginLeft = graphPlaceholderSvgWidth - 16 ;
+        templateData.rowElement.style.marginLeft = `${marginLeft}px`;
+        templateData.graphPlaceholder.textContent = '';
+        templateData.graphPlaceholder.style.left = `${ -1 * marginLeft}px`;
+        templateData.graphPlaceholder.style.width = `${graphPlaceholderSvgWidth}px`;
+        templateData.graphPlaceholder.appendChild(renderSCMHistoryGraphPlaceholder(graphColumns, getHistoryItemIndex(historyItemViewModel)));
+    }
+    disposeTemplate(templateData) {
+        templateData.disposables.dispose();
+    }
+};
+HistoryItemChangeRenderer = HistoryItemChangeRenderer_1 = ( __decorate([
+    ( __param(2, ICommandService)),
+    ( __param(3, IContextKeyService)),
+    ( __param(4, IContextMenuService)),
+    ( __param(5, IKeybindingService)),
+    ( __param(6, ILabelService)),
+    ( __param(7, IMenuService)),
+    ( __param(8, ITelemetryService))
+], HistoryItemChangeRenderer));
 let HistoryItemLoadMoreRenderer = class HistoryItemLoadMoreRenderer {
     static { HistoryItemLoadMoreRenderer_1 = this; }
     static { this.TEMPLATE_ID = 'historyItemLoadMore'; }
@@ -503,9 +633,9 @@ let HistoryItemLoadMoreRenderer = class HistoryItemLoadMoreRenderer {
         const graphPlaceholder = append(element, $('.graph-placeholder'));
         const historyItemPlaceholderContainer = append(element, $('.history-item-placeholder'));
         const historyItemPlaceholderLabel = ( new IconLabel(historyItemPlaceholderContainer, { supportIcons: true }));
-        return { element, graphPlaceholder, historyItemPlaceholderContainer, historyItemPlaceholderLabel, elementDisposables: ( new DisposableStore()), disposables: ( new DisposableStore()) };
+        return { element, graphPlaceholder, historyItemPlaceholderContainer, historyItemPlaceholderLabel, elementDisposables: ( new DisposableStore()), disposables: historyItemPlaceholderLabel };
     }
-    renderElement(element, index, templateData, height) {
+    renderElement(element, index, templateData) {
         templateData.graphPlaceholder.textContent = '';
         templateData.graphPlaceholder.style.width = `${SWIMLANE_WIDTH * (element.element.graphColumns.length + 1)}px`;
         templateData.graphPlaceholder.appendChild(renderSCMHistoryGraphPlaceholder(element.element.graphColumns));
@@ -519,11 +649,14 @@ let HistoryItemLoadMoreRenderer = class HistoryItemLoadMoreRenderer {
             templateData.elementDisposables.add(autorun(reader => {
                 const isLoadingMore = this._isLoadingMore.read(reader);
                 const icon = `$(${isLoadingMore ? 'loading~spin' : 'fold-down'})`;
-                templateData.historyItemPlaceholderLabel.setLabel(( localize(9228, "{0} Load More...", icon)));
+                templateData.historyItemPlaceholderLabel.setLabel(( localize(9467, "{0} Load More...", icon)));
             }));
         }
     }
-    disposeElement(element, index, templateData, height) {
+    renderCompressedElements(node, index, templateData) {
+        throw ( new Error('Should never happen since node is incompressible'));
+    }
+    disposeElement(element, index, templateData) {
         templateData.elementDisposables.clear();
     }
     disposeTemplate(templateData) {
@@ -573,7 +706,7 @@ SCMHistoryViewPaneActionRunner = ( __decorate([
 ], SCMHistoryViewPaneActionRunner));
 class SCMHistoryTreeAccessibilityProvider {
     getWidgetAriaLabel() {
-        return localize(9229, "Source Control History");
+        return localize(9468, "Source Control History");
     }
     getAriaLabel(element) {
         if (isSCMRepository(element)) {
@@ -599,9 +732,19 @@ class SCMHistoryTreeIdentityProvider {
             const historyItem = element.historyItemViewModel.historyItem;
             return `historyItem:${provider.id}/${historyItem.id}/${historyItem.parentIds.join(',')}`;
         }
+        else if (isSCMHistoryItemChangeViewModelTreeElement(element)) {
+            const provider = element.repository.provider;
+            const historyItem = element.historyItemViewModel.historyItem;
+            return `historyItemChange:${provider.id}/${historyItem.id}/${historyItem.parentIds.join(',')}/${element.historyItemChange.uri.fsPath}`;
+        }
+        else if (isSCMHistoryItemChangeNode(element)) {
+            const provider = element.context.repository.provider;
+            const historyItem = element.context.historyItemViewModel.historyItem;
+            return `historyItemChangeFolder:${provider.id}/${historyItem.id}/${historyItem.parentIds.join(',')}/${element.uri.fsPath}`;
+        }
         else if (isSCMHistoryItemLoadMoreTreeElement(element)) {
             const provider = element.repository.provider;
-            return `historyItemLoadMore:${provider.id}}`;
+            return `historyItemLoadMore:${provider.id}`;
         }
         else {
             throw ( new Error('Invalid tree element'));
@@ -623,28 +766,81 @@ class SCMHistoryTreeKeyboardNavigationLabelProvider {
             throw ( new Error('Invalid tree element'));
         }
     }
+    getCompressedNodeKeyboardNavigationLabel(elements) {
+        const folders = elements;
+        return ( folders.map(e => e.name)).join('/');
+    }
+}
+class SCMHistoryTreeCompressionDelegate {
+    isIncompressible(element) {
+        if (ResourceTree.isResourceNode(element)) {
+            return element.childrenCount === 0 || !element.parent || !element.parent.parent;
+        }
+        return true;
+    }
 }
 class SCMHistoryTreeDataSource extends Disposable {
+    constructor(viewMode) {
+        super();
+        this.viewMode = viewMode;
+    }
     async getChildren(inputOrElement) {
-        if (!(inputOrElement instanceof SCMHistoryViewModel)) {
-            return [];
-        }
         const children = [];
-        const historyItems = await inputOrElement.getHistoryItems();
-        children.push(...historyItems);
-        const repository = inputOrElement.repository.get();
-        const lastHistoryItem = historyItems.at(-1);
-        if (repository && lastHistoryItem && lastHistoryItem.historyItemViewModel.outputSwimlanes.length > 0) {
-            children.push({
-                repository,
-                graphColumns: lastHistoryItem.historyItemViewModel.outputSwimlanes,
-                type: 'historyItemLoadMore'
-            });
+        if (inputOrElement instanceof SCMHistoryViewModel) {
+            const historyItems = await inputOrElement.getHistoryItems();
+            children.push(...historyItems);
+            const repository = inputOrElement.repository.get();
+            const lastHistoryItem = historyItems.at(-1);
+            if (repository && lastHistoryItem && lastHistoryItem.historyItemViewModel.outputSwimlanes.length > 0) {
+                children.push({
+                    repository,
+                    graphColumns: lastHistoryItem.historyItemViewModel.outputSwimlanes,
+                    type: 'historyItemLoadMore'
+                });
+            }
+        }
+        else if (isSCMHistoryItemViewModelTreeElement(inputOrElement)) {
+            const historyItem = inputOrElement.historyItemViewModel.historyItem;
+            const historyItemParentId = historyItem.parentIds.length > 0 ? historyItem.parentIds[0] : undefined;
+            const historyProvider = inputOrElement.repository.provider.historyProvider.get();
+            const historyItemChanges = (await historyProvider?.provideHistoryItemChanges(historyItem.id, historyItemParentId)) ?? [];
+            if (this.viewMode() === ViewMode.List) {
+                children.push(...( historyItemChanges.map(change => ({
+                    repository: inputOrElement.repository,
+                    historyItemViewModel: inputOrElement.historyItemViewModel,
+                    historyItemChange: change,
+                    graphColumns: inputOrElement.historyItemViewModel.outputSwimlanes,
+                    type: 'historyItemChangeViewModel'
+                }))));
+            }
+            else if (this.viewMode() === ViewMode.Tree) {
+                const rootUri = inputOrElement.repository.provider.rootUri ?? URI.file('/');
+                const historyItemChangesTree = ( new ResourceTree(inputOrElement, rootUri));
+                for (const change of historyItemChanges) {
+                    historyItemChangesTree.add(change.uri, {
+                        repository: inputOrElement.repository,
+                        historyItemViewModel: inputOrElement.historyItemViewModel,
+                        historyItemChange: change,
+                        graphColumns: inputOrElement.historyItemViewModel.outputSwimlanes,
+                        type: 'historyItemChangeViewModel'
+                    });
+                }
+                for (const node of historyItemChangesTree.root.children) {
+                    children.push(node.element ?? node);
+                }
+            }
+        }
+        else if (ResourceTree.isResourceNode(inputOrElement) && isSCMHistoryItemChangeNode(inputOrElement)) {
+            for (const node of inputOrElement.children) {
+                children.push(node.element && node.childrenCount === 0 ? node.element : node);
+            }
         }
         return children;
     }
     hasChildren(inputOrElement) {
-        return inputOrElement instanceof SCMHistoryViewModel;
+        return inputOrElement instanceof SCMHistoryViewModel ||
+            isSCMHistoryItemViewModelTreeElement(inputOrElement) ||
+            (isSCMHistoryItemChangeNode(inputOrElement) && inputOrElement.childrenCount > 0);
     }
 }
 let SCMHistoryViewModel = class SCMHistoryViewModel extends Disposable {
@@ -662,9 +858,12 @@ let SCMHistoryViewModel = class SCMHistoryViewModel extends Disposable {
         this._repositoryState = ( new Map());
         this._repositoryFilterState = ( new Map());
         this._repositoryFilterState = this._loadHistoryItemsFilterState();
+        this.viewMode = observableValue(this, this._getViewMode());
         this._extensionService.onWillStop(this._saveHistoryItemsFilterState, this, this._store);
         this._storageService.onWillSaveState(this._saveHistoryItemsFilterState, this, this._store);
         this._scmHistoryItemCountCtx = ContextKeys.SCMHistoryItemCount.bindTo(this._contextKeyService);
+        this._scmHistoryViewModeCtx = ContextKeys.SCMHistoryViewMode.bindTo(this._contextKeyService);
+        this._scmHistoryViewModeCtx.set(this.viewMode.get());
         const firstRepository = this._scmService.repositoryCount > 0
             ? constObservable(Iterable.first(this._scmService.repositories))
             : observableFromEvent(this, Event.once(this._scmService.onDidAddRepository), repository => repository);
@@ -784,6 +983,22 @@ let SCMHistoryViewModel = class SCMHistoryViewModel extends Disposable {
         this._saveHistoryItemsFilterState();
         this.onDidChangeHistoryItemsFilter.trigger(undefined);
     }
+    setViewMode(viewMode) {
+        if (viewMode === this.viewMode.get()) {
+            return;
+        }
+        this.viewMode.set(viewMode, undefined);
+        this._scmHistoryViewModeCtx.set(viewMode);
+        this._storageService.store('scm.graphView.viewMode', viewMode, StorageScope.WORKSPACE, StorageTarget.USER);
+    }
+    _getViewMode() {
+        let mode = this._configurationService.getValue('scm.defaultViewMode') === 'list' ? ViewMode.List : ViewMode.Tree;
+        const storageMode = this._storageService.get('scm.graphView.viewMode', StorageScope.WORKSPACE);
+        if (typeof storageMode === 'string') {
+            mode = storageMode;
+        }
+        return mode;
+    }
     _getGraphColorMap(historyItemRefs) {
         const repository = this.repository.get();
         const historyProvider = repository?.provider.historyProvider.get();
@@ -874,8 +1089,8 @@ let RepositoryPicker = class RepositoryPicker {
         this._quickInputService = _quickInputService;
         this._scmViewService = _scmViewService;
         this._autoQuickPickItem = {
-            label: ( localize(9212, "Auto")),
-            description: ( localize(9230, "Show the source control graph for the active repository")),
+            label: ( localize(9455, "Auto")),
+            description: ( localize(9469, "Show the source control graph for the active repository")),
             repository: 'auto'
         };
     }
@@ -891,7 +1106,7 @@ let RepositoryPicker = class RepositoryPicker {
             repository: r
         }))));
         return this._quickInputService.pick(picks, {
-            placeHolder: ( localize(9231, "Select the repository to view, type to filter all repositories"))
+            placeHolder: ( localize(9470, "Select the repository to view, type to filter all repositories"))
         });
     }
 };
@@ -907,21 +1122,21 @@ let HistoryItemRefPicker = class HistoryItemRefPicker extends Disposable {
         this._quickInputService = _quickInputService;
         this._allQuickPickItem = {
             id: 'all',
-            label: ( localize(9211, "All")),
-            description: ( localize(9214, "All history item references")),
+            label: ( localize(9454, "All")),
+            description: ( localize(9457, "All history item references")),
             historyItemRef: 'all'
         };
         this._autoQuickPickItem = {
             id: 'auto',
-            label: ( localize(9212, "Auto")),
-            description: ( localize(9232, "Current history item reference(s)")),
+            label: ( localize(9455, "Auto")),
+            description: ( localize(9471, "Current history item reference(s)")),
             historyItemRef: 'auto'
         };
     }
     async pickHistoryItemRef() {
         const quickPick = this._quickInputService.createQuickPick({ useSeparators: true });
         this._store.add(quickPick);
-        quickPick.placeholder = ( localize(9233, "Select one/more history item references to view, type to filter"));
+        quickPick.placeholder = ( localize(9472, "Select one/more history item references to view, type to filter"));
         quickPick.canSelectMany = true;
         quickPick.hideCheckAll = true;
         quickPick.busy = true;
@@ -1018,13 +1233,13 @@ HistoryItemRefPicker = ( __decorate([
     ( __param(2, IQuickInputService))
 ], HistoryItemRefPicker));
 let SCMHistoryViewPane = class SCMHistoryViewPane extends ViewPane {
-    constructor(options, _commandService, _instantiationService, _menuService, _progressService, configurationService, contextMenuService, keybindingService, instantiationService, viewDescriptorService, contextKeyService, openerService, themeService, hoverService) {
+    constructor(options, _editorService, _instantiationService, _menuService, _progressService, configurationService, contextMenuService, keybindingService, instantiationService, viewDescriptorService, contextKeyService, openerService, themeService, hoverService) {
         super({
             ...options,
             titleMenuId: MenuId.SCMHistoryTitle,
             showActions: ViewPaneShowActions.WhenExpanded
         }, keybindingService, contextMenuService, configurationService, contextKeyService, viewDescriptorService, instantiationService, openerService, themeService, hoverService);
-        this._commandService = _commandService;
+        this._editorService = _editorService;
         this._instantiationService = _instantiationService;
         this._menuService = _menuService;
         this._progressService = _progressService;
@@ -1051,7 +1266,7 @@ let SCMHistoryViewPane = class SCMHistoryViewPane extends ViewPane {
         container.appendChild(element.root);
         this._register(this.hoverService.setupManagedHover(getDefaultHoverDelegate('mouse'), element.root, {
             markdown: {
-                value: ( localize(9234, "Please refresh the graph using the refresh action ($(refresh)).")),
+                value: ( localize(9473, "Please refresh the graph using the refresh action ($(refresh)).")),
                 supportThemeIcons: true
             },
             markdownNotSupportedFallback: undefined
@@ -1063,7 +1278,7 @@ let SCMHistoryViewPane = class SCMHistoryViewPane extends ViewPane {
     }
     renderBody(container) {
         super.renderBody(container);
-        this._treeContainer = append(container, $('.scm-view.scm-history-view'));
+        this._treeContainer = append(container, $('.scm-view.scm-history-view.show-file-icons'));
         this._treeContainer.classList.add('file-icon-themable-tree');
         this._createTree(this._treeContainer);
         this.onDidChangeBodyVisibility(async (visible) => {
@@ -1122,6 +1337,9 @@ let SCMHistoryViewPane = class SCMHistoryViewPane extends ViewPane {
                 store.add(autorun(reader => {
                     this._scmCurrentHistoryItemRefHasRemote.set(!!historyProvider.historyItemRemoteRef.read(reader));
                 }));
+                store.add(runOnChange(this._treeViewModel.viewMode, async () => {
+                    await this._updateChildren();
+                }));
                 this._scmProviderCtx.set(repository.provider.contextValue);
                 this._scmCurrentHistoryItemRefInFilter.set(this._isCurrentHistoryItemInFilter(historyItemRefId.get()));
                 if (!isFirstRun) {
@@ -1129,6 +1347,12 @@ let SCMHistoryViewPane = class SCMHistoryViewPane extends ViewPane {
                 }
                 isFirstRun = false;
             }));
+            const fileIconThemeObs = observableFromEvent(this.themeService.onDidFileIconThemeChange, () => this.themeService.getFileIconTheme());
+            this._visibilityDisposables.add(autorun(reader => {
+                const fileIconTheme = fileIconThemeObs.read(reader);
+                const viewMode = this._treeViewModel.viewMode.read(reader);
+                this._updateIndentStyles(fileIconTheme, viewMode);
+            }));
         }, this, this._store);
     }
     layoutBody(height, width) {
@@ -1219,22 +1443,30 @@ let SCMHistoryViewPane = class SCMHistoryViewPane extends ViewPane {
         await this._loadMore(historyItemRef.revision);
         revealTreeNode();
     }
+    setViewMode(viewMode) {
+        this._treeViewModel.setViewMode(viewMode);
+    }
     _createTree(container) {
         this._treeIdentityProvider = ( new SCMHistoryTreeIdentityProvider());
         const historyItemHoverDelegate = this.instantiationService.createInstance(HistoryItemHoverDelegate, this.viewDescriptorService.getViewLocationById(this.id));
         this._register(historyItemHoverDelegate);
-        this._treeDataSource = this.instantiationService.createInstance(SCMHistoryTreeDataSource);
+        const resourceLabels = this.instantiationService.createInstance(ResourceLabels, { onDidChangeVisibility: this.onDidChangeBodyVisibility });
+        this._register(resourceLabels);
+        this._treeDataSource = this.instantiationService.createInstance(SCMHistoryTreeDataSource, () => this._treeViewModel.viewMode.get());
         this._register(this._treeDataSource);
-        this._tree = this.instantiationService.createInstance(WorkbenchAsyncDataTree, 'SCM History Tree', container, ( new ListDelegate()), [
+        const compressionEnabled = observableConfigValue('scm.compactFolders', true, this.configurationService);
+        this._tree = this.instantiationService.createInstance(WorkbenchCompressibleAsyncDataTree, 'SCM History Tree', container, ( new ListDelegate()), ( new SCMHistoryTreeCompressionDelegate()), [
             this.instantiationService.createInstance(HistoryItemRenderer, historyItemHoverDelegate),
+            this.instantiationService.createInstance(HistoryItemChangeRenderer, () => this._treeViewModel.viewMode.get(), resourceLabels),
             this.instantiationService.createInstance(HistoryItemLoadMoreRenderer, this._repositoryIsLoadingMore, () => this._loadMore()),
         ], this._treeDataSource, {
             accessibilityProvider: ( new SCMHistoryTreeAccessibilityProvider()),
             identityProvider: this._treeIdentityProvider,
-            collapseByDefault: (e) => false,
+            collapseByDefault: (e) => !isSCMHistoryItemChangeNode(e),
+            compressionEnabled: compressionEnabled.get(),
             keyboardNavigationLabelProvider: ( new SCMHistoryTreeKeyboardNavigationLabelProvider()),
             horizontalScrolling: false,
-            multipleSelectionSupport: false,
+            multipleSelectionSupport: false
         });
         this._register(this._tree);
         this._tree.onDidOpen(this._onDidOpen, this, this._store);
@@ -1254,20 +1486,38 @@ let SCMHistoryViewPane = class SCMHistoryViewPane extends ViewPane {
         if (!e.element) {
             return;
         }
-        else if (isSCMHistoryItemViewModelTreeElement(e.element)) {
+        else if (isSCMHistoryItemChangeViewModelTreeElement(e.element)) {
+            const historyItemChange = e.element.historyItemChange;
             const historyItem = e.element.historyItemViewModel.historyItem;
+            const historyItemDisplayId = historyItem.displayId ?? historyItem.id;
             const historyItemParentId = historyItem.parentIds.length > 0 ? historyItem.parentIds[0] : undefined;
-            const historyProvider = e.element.repository.provider.historyProvider.get();
-            const historyItemChanges = await historyProvider?.provideHistoryItemChanges(historyItem.id, historyItemParentId);
-            if (historyItemChanges) {
-                const title = getHistoryItemEditorTitle(historyItem);
-                const rootUri = e.element.repository.provider.rootUri;
-                const path = rootUri ? rootUri.path : e.element.repository.provider.label;
-                const multiDiffSourceUri = ( URI.from(
-                    { scheme: 'scm-history-item', path: `${path}/${historyItemParentId}..${historyItem.id}` },
-                    true
-                ));
-                await this._commandService.executeCommand('_workbench.openMultiDiffEditor', { title, multiDiffSourceUri, resources: historyItemChanges });
+            const historyItemParentDisplayId = historyItemParentId && historyItem.displayId
+                ? historyItemParentId.substring(0, historyItem.displayId.length)
+                : historyItemParentId;
+            if (historyItemChange.originalUri && historyItemChange.modifiedUri) {
+                const originalUriTitle = `${basename(historyItemChange.originalUri.fsPath)} (${historyItemParentDisplayId})`;
+                const modifiedUriTitle = `${basename(historyItemChange.modifiedUri.fsPath)} (${historyItemDisplayId})`;
+                const title = `${originalUriTitle} ↔ ${modifiedUriTitle}`;
+                await this._editorService.openEditor({
+                    label: title,
+                    original: { resource: historyItemChange.originalUri },
+                    modified: { resource: historyItemChange.modifiedUri },
+                    options: e.editorOptions
+                });
+            }
+            else if (historyItemChange.modifiedUri) {
+                await this._editorService.openEditor({
+                    label: `${basename(historyItemChange.modifiedUri.fsPath)} (${historyItemDisplayId})`,
+                    resource: historyItemChange.modifiedUri,
+                    options: e.editorOptions
+                });
+            }
+            else if (historyItemChange.originalUri) {
+                await this._editorService.openEditor({
+                    label: `${basename(historyItemChange.originalUri.fsPath)} (${historyItemParentDisplayId})`,
+                    resource: historyItemChange.originalUri,
+                    options: e.editorOptions
+                });
             }
         }
         else if (isSCMHistoryItemLoadMoreTreeElement(e.element)) {
@@ -1333,7 +1583,7 @@ let SCMHistoryViewPane = class SCMHistoryViewPane extends ViewPane {
         const historyItemMenuActions = this._menuService.getMenuActions(MenuId.SCMHistoryItemContext, this.scopedContextKeyService, {
             arg: element.repository.provider,
             shouldForwardArgs: true
-        });
+        }).filter(group => group[0] !== 'inline');
         this.contextMenuService.showContextMenu({
             contextKeyService: this.scopedContextKeyService,
             getAnchor: () => e.anchor,
@@ -1354,12 +1604,18 @@ let SCMHistoryViewPane = class SCMHistoryViewPane extends ViewPane {
     }
     _updateChildren() {
         return this._updateChildrenThrottler.queue(() => this._treeOperationSequencer.queue(async () => {
-            await this._progressService.withProgress({ location: this.id }, async () => {
+            await this._progressService.withProgress({ location: this.id, delay: 100 }, async () => {
                 await this._tree.updateChildren(undefined, undefined, undefined, {
                 });
             });
         }));
     }
+    _updateIndentStyles(theme, viewMode) {
+        this._treeContainer.classList.toggle('list-view-mode', viewMode === ViewMode.List);
+        this._treeContainer.classList.toggle('tree-view-mode', viewMode === ViewMode.Tree);
+        this._treeContainer.classList.toggle('align-icons-and-twisties', (viewMode === ViewMode.List && theme.hasFileIcons) || (theme.hasFileIcons && !theme.hasFolderIcons));
+        this._treeContainer.classList.toggle('hide-arrows', viewMode === ViewMode.Tree && theme.hidesExplorerArrows === true);
+    }
     dispose() {
         this._contextMenuDisposables.dispose();
         this._visibilityDisposables.dispose();
@@ -1367,7 +1623,7 @@ let SCMHistoryViewPane = class SCMHistoryViewPane extends ViewPane {
     }
 };
 SCMHistoryViewPane = ( __decorate([
-    ( __param(1, ICommandService)),
+    ( __param(1, IEditorService)),
     ( __param(2, IInstantiationService)),
     ( __param(3, IMenuService)),
     ( __param(4, IProgressService)),