SCM Graph - tweak rendering for expanded history items (microsoft#249897)

Author: lszomoru

src/vs/workbench/contrib/scm/browser/media/scm.css

@@ -133,16 +133,14 @@
 	align-items: center;
 }
 
-.scm-view .monaco-list-row .monaco-tl-twistie.collapsed + .monaco-tl-contents > .history-item > .graph-container {
-	border-left-color: transparent !important;
+.scm-view .monaco-list-row .monaco-tl-twistie:not(.collapsed) + .monaco-tl-contents > .history-item > .graph-container > svg > path:last-of-type {
+	stroke-width: 3px;
 }
 
 .scm-view .monaco-list-row .history-item > .graph-container {
 	display: flex;
 	flex-shrink: 0;
 	height: 22px;
-	border-left-width: 3px;
-	border-left-style: solid;
 }
 
 .scm-view .monaco-list-row .history-item > .graph-container.current > .graph > circle:last-child {
@@ -642,8 +640,6 @@
 .scm-view .monaco-list-row .history-item-change > .graph-placeholder {
 	position: absolute;
 	height: 22px;
-	border-left-width: 3px;
-	border-left-style: solid;
 }
 
 .scm-view .monaco-list-row .history-item-change > .label-container {
@@ -659,7 +655,6 @@
 .scm-history-view .history-item-load-more {
 	display: flex;
 	height: 22px;
-	padding-left: 3px;
 }
 
 .scm-history-view .history-item-load-more .graph-placeholder {

src/vs/workbench/contrib/scm/browser/scmHistory.ts

@@ -56,10 +56,10 @@ function getLabelColorIdentifier(historyItem: ISCMHistoryItem, colorMap: Map<str
 	return undefined;
 }
 
-function createPath(colorIdentifier: string): SVGPathElement {
+function createPath(colorIdentifier: string, strokeWidth = 1): SVGPathElement {
 	const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 	path.setAttribute('fill', 'none');
-	path.setAttribute('stroke-width', '1px');
+	path.setAttribute('stroke-width', `${strokeWidth}px`);
 	path.setAttribute('stroke-linecap', 'round');
 	path.style.stroke = asCssVariable(colorIdentifier);
 
@@ -80,8 +80,8 @@ function drawCircle(index: number, radius: number, strokeWidth: number, colorIde
 	return circle;
 }
 
-function drawVerticalLine(x1: number, y1: number, y2: number, color: string): SVGPathElement {
-	const path = createPath(color);
+function drawVerticalLine(x1: number, y1: number, y2: number, color: string, strokeWidth = 1): SVGPathElement {
+	const path = createPath(color, strokeWidth);
 	path.setAttribute('d', `M ${x1} ${y1} V ${y2}`);
 
 	return path;
@@ -240,14 +240,15 @@ export function renderSCMHistoryItemGraph(historyItemViewModel: ISCMHistoryItemV
 	return svg;
 }
 
-export function renderSCMHistoryGraphPlaceholder(columns: ISCMHistoryItemGraphNode[]): HTMLElement {
+export function renderSCMHistoryGraphPlaceholder(columns: ISCMHistoryItemGraphNode[], highlightIndex?: number): HTMLElement {
 	const elements = svgElem('svg', {
 		style: { height: `${SWIMLANE_HEIGHT}px`, width: `${SWIMLANE_WIDTH * (columns.length + 1)}px`, }
 	});
 
 	// Draw |
 	for (let index = 0; index < columns.length; index++) {
-		const path = drawVerticalLine(SWIMLANE_WIDTH * (index + 1), 0, SWIMLANE_HEIGHT, columns[index].color);
+		const strokeWidth = index === highlightIndex ? 3 : 1;
+		const path = drawVerticalLine(SWIMLANE_WIDTH * (index + 1), 0, SWIMLANE_HEIGHT, columns[index].color, strokeWidth);
 		elements.root.append(path);
 	}
 
@@ -354,18 +355,13 @@ export function toISCMHistoryItemViewModelArray(
 	return viewModels;
 }
 
-export function getHistoryItemColor(historyItemViewModel: ISCMHistoryItemViewModel): string {
+export function getHistoryItemIndex(historyItemViewModel: ISCMHistoryItemViewModel): number {
 	const historyItem = historyItemViewModel.historyItem;
 	const inputSwimlanes = historyItemViewModel.inputSwimlanes;
-	const outputSwimlanes = historyItemViewModel.outputSwimlanes;
 
 	// Find the history item in the input swimlanes
 	const inputIndex = inputSwimlanes.findIndex(node => node.id === historyItem.id);
 
 	// Circle index - use the input swimlane index if present, otherwise add it to the end
-	const circleIndex = inputIndex !== -1 ? inputIndex : inputSwimlanes.length;
-
-	// Circle color - use the output swimlane color if present, otherwise the input swimlane color
-	return circleIndex < outputSwimlanes.length ? outputSwimlanes[circleIndex].color :
-		circleIndex < inputSwimlanes.length ? inputSwimlanes[circleIndex].color : historyItemRefColor;
+	return inputIndex !== -1 ? inputIndex : inputSwimlanes.length;
 }

src/vs/workbench/contrib/scm/browser/scmHistoryViewPane.ts

@@ -28,7 +28,7 @@ import { asCssVariable, ColorIdentifier, foreground } from '../../../../platform
 import { IFileIconTheme, IThemeService } from '../../../../platform/theme/common/themeService.js';
 import { IViewPaneOptions, ViewAction, ViewPane, ViewPaneShowActions } from '../../../browser/parts/views/viewPane.js';
 import { IViewDescriptorService, ViewContainerLocation } from '../../../common/views.js';
-import { renderSCMHistoryItemGraph, toISCMHistoryItemViewModelArray, SWIMLANE_WIDTH, renderSCMHistoryGraphPlaceholder, historyItemHoverLabelForeground, historyItemHoverDefaultLabelBackground, getHistoryItemColor } from './scmHistory.js';
+import { renderSCMHistoryItemGraph, toISCMHistoryItemViewModelArray, SWIMLANE_WIDTH, renderSCMHistoryGraphPlaceholder, historyItemHoverLabelForeground, historyItemHoverDefaultLabelBackground, getHistoryItemIndex } from './scmHistory.js';
 import { getHistoryItemEditorTitle, getHistoryItemHoverContent, getProviderKey, isSCMHistoryItemChangeNode, isSCMHistoryItemChangeViewModelTreeElement, isSCMHistoryItemLoadMoreTreeElement, isSCMHistoryItemViewModelTreeElement, isSCMRepository } from './util.js';
 import { ISCMHistoryItem, ISCMHistoryItemChange, ISCMHistoryItemGraphNode, ISCMHistoryItemRef, ISCMHistoryItemViewModel, ISCMHistoryProvider, SCMHistoryItemChangeViewModelTreeElement, SCMHistoryItemLoadMoreTreeElement, SCMHistoryItemViewModelTreeElement } from '../common/history.js';
 import { HISTORY_VIEW_PANE_ID, ISCMProvider, ISCMRepository, ISCMService, ISCMViewService, ViewMode } from '../common/scm.js';
@@ -441,7 +441,6 @@ class HistoryItemRenderer implements ICompressibleTreeRenderer<SCMHistoryItemVie
 		templateData.graphContainer.textContent = '';
 		templateData.graphContainer.classList.toggle('current', historyItemViewModel.isCurrent);
 		templateData.graphContainer.appendChild(renderSCMHistoryItemGraph(historyItemViewModel));
-		templateData.graphContainer.style.borderLeftColor = asCssVariable(getHistoryItemColor(historyItemViewModel));
 
 		const historyItemRef = provider.historyProvider.get()?.historyItemRef?.get();
 		const extraClasses = historyItemRef?.revision === historyItem.id ? ['history-item-current'] : [];
@@ -669,16 +668,13 @@ class HistoryItemChangeRenderer implements ICompressibleTreeRenderer<SCMHistoryI
 
 	private _renderGraphPlaceholder(templateData: HistoryItemChangeTemplate, historyItemViewModel: ISCMHistoryItemViewModel, graphColumns: ISCMHistoryItemGraphNode[]): void {
 		const graphPlaceholderSvgWidth = SWIMLANE_WIDTH * (graphColumns.length + 1);
-		const graphPlaceholderElementWidth = graphPlaceholderSvgWidth + 3 /* left border */;
-
-		const marginLeft = graphPlaceholderElementWidth - 16 /* .monaco-tl-indent left */;
+		const marginLeft = graphPlaceholderSvgWidth - 16 /* .monaco-tl-indent left */;
 		templateData.rowElement.style.marginLeft = `${marginLeft}px`;
 
 		templateData.graphPlaceholder.textContent = '';
 		templateData.graphPlaceholder.style.left = `${-1 * marginLeft}px`;
 		templateData.graphPlaceholder.style.width = `${graphPlaceholderSvgWidth}px`;
-		templateData.graphPlaceholder.style.borderLeftColor = asCssVariable(getHistoryItemColor(historyItemViewModel));
-		templateData.graphPlaceholder.appendChild(renderSCMHistoryGraphPlaceholder(graphColumns));
+		templateData.graphPlaceholder.appendChild(renderSCMHistoryGraphPlaceholder(graphColumns, getHistoryItemIndex(historyItemViewModel)));
 	}
 
 	disposeTemplate(templateData: HistoryItemChangeTemplate): void {