Updates push/pull action on Graph

- adds color to push and pull actions
- shows fetch action always

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -1104,56 +1104,69 @@ export function GraphWrapper({
 		let icon = 'sync';
 		let label = 'Fetch';
 		let action = 'command:gitlens.graph.fetch';
-		let tooltip;
 		let isBehind = false;
 		let isAhead = false;
 
+		let tooltip = '';
+		let fetchTooltip = 'Fetch from';
+		let remote = 'remote';
 		if (branchState) {
 			isBehind = branchState.behind > 0;
 			isAhead = branchState.ahead > 0;
-			tooltip = `Branch ${branchName} is`;
+			const branchPrefix = `Branch ${branchName} is`;
+			remote = `${branchState.upstream}${branchState.provider ? ` on ${branchState.provider}` : ''}`;
 			if (isBehind) {
 				action = 'command:gitlens.graph.pull';
 				icon = 'arrow-down';
 				label = 'Pull';
-				tooltip += ` ${pluralize('commit', branchState.behind)} behind of`;
+				tooltip = `Pull from ${remote}\n${branchPrefix} ${pluralize('commit', branchState.behind)} behind of`;
 			} else if (isAhead) {
 				action = 'command:gitlens.graph.push';
 				icon = 'arrow-up';
 				label = 'Push';
-				tooltip += ` ${pluralize('commit', branchState.ahead)} ahead of`;
-			} else {
-				tooltip += ' up to date with';
+				tooltip = `Push to ${remote}\n${branchPrefix} ${pluralize('commit', branchState.ahead)} ahead of`;
 			}
-			tooltip += ` ${branchState.upstream}${branchState.provider ? ` on ${branchState.provider}` : ''}`;
+			tooltip += ` ${remote}`;
+			fetchTooltip += ` ${remote}`;
 		}
+		const lastFetchedText = `\nLast fetched ${fetchedText}`;
+		tooltip += lastFetchedText;
+		fetchTooltip += lastFetchedText;
 
 		return (
-			<a href={action} className="action-button" title={tooltip}>
-				<span
-					className={`codicon codicon-${icon} action-button__icon${isBehind ? ' is-behind' : ''}${
-						isAhead ? ' is-ahead' : ''
-					}`}
-				></span>
-				{label}
-				{fetchedText && <span className="action-button__small">(Last fetched {fetchedText})</span>}
-				{(isAhead || isBehind) && (
-					<span>
-						<span className="pill">
-							{isAhead && (
-								<span>
-									{branchState!.ahead} <span className="codicon codicon-arrow-up"></span>
-								</span>
-							)}
-							{isBehind && (
-								<span>
-									{branchState!.behind} <span className="codicon codicon-arrow-down"></span>
+			<div className="titlebar__group">
+				{(isBehind || isAhead) && (
+					<a
+						href={action}
+						className={`action-button${isBehind ? ' is-behind' : ''}${isAhead ? ' is-ahead' : ''}`}
+						title={tooltip}
+					>
+						<span className={`codicon codicon-${icon} action-button__icon`}></span>
+						{label}
+						{(isAhead || isBehind) && (
+							<span>
+								<span className="pill action-button__pill">
+									{isAhead && (
+										<span>
+											{branchState!.ahead} <span className="codicon codicon-arrow-up"></span>
+										</span>
+									)}
+									{isBehind && (
+										<span>
+											{branchState!.behind} <span className="codicon codicon-arrow-down"></span>
+										</span>
+									)}
 								</span>
-							)}
-						</span>
-					</span>
+							</span>
+						)}
+					</a>
 				)}
-			</a>
+				<a href="command:gitlens.graph.fetch" className="action-button" title={fetchTooltip}>
+					<span className="codicon codicon-sync action-button__icon"></span>
+					Fetch
+					{fetchedText && <span className="action-button__small">({fetchedText})</span>}
+				</a>
+			</div>
 		);
 	};
 

src/webviews/apps/plus/graph/graph.scss

@@ -102,6 +102,10 @@ body {
 
 	--graph-stats-bar-height: 40%;
 	--graph-stats-bar-border-radius: 3px;
+
+	--branch-status-ahead-foreground: var(--vscode-gitlens-decorations\.branchAheadForegroundColor);
+	--branch-status-behind-foreground: var(--vscode-gitlens-decorations\.branchBehindForegroundColor);
+	--branch-status-both-foreground: var(--vscode-gitlens-decorations\.branchDivergedForegroundColor);
 }
 
 ::-webkit-scrollbar-corner {
@@ -232,18 +236,30 @@ button:not([disabled]),
 		width: 1.6rem;
 	}
 
-	&__icon {
-		&.is-ahead {
-			color: var(--vscode-gitlens-decorations\.branchAheadForegroundColor);
+	&__pill {
+		.is-ahead & {
+			background-color: var(--branch-status-ahead-pill-background);
 		}
-		&.is-behind {
-			color: var(--vscode-gitlens-decorations\.branchBehindForegroundColor);
+		.is-behind & {
+			background-color: var(--branch-status-behind-pill-background);
 		}
-		&.is-ahead.is-behind {
-			color: var(--vscode-gitlens-decorations\.branchDivergedForegroundColor);
+		.is-ahead.is-behind & {
+			background-color: var(--branch-status-both-pill-background);
 		}
 	}
 
+	// &__icon {
+	// 	.is-ahead & {
+	// 		color: var(--branch-status-ahead-foreground);
+	// 	}
+	// 	.is-behind & {
+	// 		color: var(--branch-status-behind-foreground);
+	// 	}
+	// 	.is-ahead.is-behind & {
+	// 		color: var(--branch-status-both-foreground);
+	// 	}
+	// }
+
 	&__more,
 	&__more.codicon[class*='codicon-'] {
 		font-size: 1rem;
@@ -267,6 +283,28 @@ button:not([disabled]),
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}
+
+	&.is-ahead {
+		background-color: var(--branch-status-ahead-background);
+
+		&:hover {
+			background-color: var(--branch-status-ahead-hover-background);
+		}
+	}
+	&.is-behind {
+		background-color: var(--branch-status-behind-background);
+
+		&:hover {
+			background-color: var(--branch-status-behind-hover-background);
+		}
+	}
+	&.is-ahead.is-behind {
+		background-color: var(--branch-status-both-background);
+
+		&:hover {
+			background-color: var(--branch-status-both-hover-background);
+		}
+	}
 }
 
 .action-button--narrow {

src/webviews/apps/plus/graph/graph.tsx

@@ -414,6 +414,45 @@ export class GraphApp extends App {
 			);
 		}
 
+		const branchStatusLuminance = themeLuminance(e.isLightTheme ? 0.72 : 0.064);
+		const branchStatusHoverLuminance = themeLuminance(e.isLightTheme ? 0.64 : 0.076);
+		const branchStatusPillLuminance = themeLuminance(e.isLightTheme ? 0.92 : 0.02);
+		// branch status ahead
+		c = Color.fromCssVariable('--branch-status-ahead-foreground', e.computedStyle);
+		bodyStyle.setProperty('--branch-status-ahead-background', c.luminance(branchStatusLuminance).toString());
+		bodyStyle.setProperty(
+			'--branch-status-ahead-hover-background',
+			c.luminance(branchStatusHoverLuminance).toString(),
+		);
+		bodyStyle.setProperty(
+			'--branch-status-ahead-pill-background',
+			c.luminance(branchStatusPillLuminance).toString(),
+		);
+
+		// branch status behind
+		c = Color.fromCssVariable('--branch-status-behind-foreground', e.computedStyle);
+		bodyStyle.setProperty('--branch-status-behind-background', c.luminance(branchStatusLuminance).toString());
+		bodyStyle.setProperty(
+			'--branch-status-behind-hover-background',
+			c.luminance(branchStatusHoverLuminance).toString(),
+		);
+		bodyStyle.setProperty(
+			'--branch-status-behind-pill-background',
+			c.luminance(branchStatusPillLuminance).toString(),
+		);
+
+		// branch status both
+		c = Color.fromCssVariable('--branch-status-both-foreground', e.computedStyle);
+		bodyStyle.setProperty('--branch-status-both-background', c.luminance(branchStatusLuminance).toString());
+		bodyStyle.setProperty(
+			'--branch-status-both-hover-background',
+			c.luminance(branchStatusHoverLuminance).toString(),
+		);
+		bodyStyle.setProperty(
+			'--branch-status-both-pill-background',
+			c.luminance(branchStatusPillLuminance).toString(),
+		);
+
 		if (e.isInitializing) return;
 
 		this.state.theming = undefined;