Removes unused CSS from the graph

Author: d13

src/webviews/apps/plus/graph-next/actions/gitActionsButtons.ts

@@ -1,11 +1,11 @@
-import { html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { fromNow } from '../../../../../system/date';
 import { pluralize } from '../../../../../system/string';
 import { createWebviewCommandLink } from '../../../../../system/webview';
 import type { BranchState, State } from '../../../../plus/graph/protocol';
 import { inlineCode } from '../../../shared/components/styles/lit/base.css';
-import { actionButton, linkBase, ruleBase } from '../graph.css';
+import { actionButton, linkBase, ruleBase } from '../styles/graph.css';
 import '../../../shared/components/code-icon';
 import '../../../shared/components/overlays/tooltip';
 
@@ -23,7 +23,6 @@ export class GitActionsButtons extends LitElement {
 	@property({ type: Object })
 	state!: State;
 
-	@state()
 	private get fetchedText() {
 		if (!this.lastFetched) return undefined;
 
@@ -105,7 +104,29 @@ export class GlFetchButton extends LitElement {
 
 @customElement('gl-push-pull-button')
 export class PushPullButton extends LitElement {
-	static override styles = [linkBase, inlineCode, actionButton, ruleBase];
+	static override styles = [
+		linkBase,
+		inlineCode,
+		actionButton,
+		ruleBase,
+		css`
+			.pill {
+				display: inline-block;
+				padding: 0.2rem 0.5rem;
+				border-radius: 0.5rem;
+				font-size: 1rem;
+				font-weight: 500;
+				line-height: 1.2;
+				text-transform: uppercase;
+				color: var(--vscode-foreground);
+				background-color: var(--vscode-editorWidget-background);
+			}
+			.pill code-icon {
+				font-size: inherit !important;
+				line-height: inherit !important;
+			}
+		`,
+	];
 
 	@property({ type: Object })
 	branchState?: BranchState;

src/webviews/apps/plus/graph-next/gate.ts

@@ -1,5 +1,5 @@
 import { consume } from '@lit/context';
-import { html } from 'lit';
+import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { createWebviewCommandLink } from '../../../../system/webview';
@@ -11,7 +11,13 @@ import '../../shared/components/feature-gate';
 
 @customElement('gl-graph-gate')
 export class GlGraphGate extends GlElement {
-	static override styles = [];
+	static override styles = css`
+		gl-feature-gate gl-feature-badge {
+			vertical-align: super;
+			margin-left: 0.4rem;
+			margin-right: 0.4rem;
+		}
+	`;
 
 	@consume({ context: stateContext, subscribe: true })
 	@state()

src/webviews/apps/plus/graph-next/graph-header.ts

@@ -42,12 +42,15 @@ import type { CustomEventType } from '../../shared/components/element';
 import type { RadioGroup } from '../../shared/components/radio/radio-group';
 import type { GlSearchBox } from '../../shared/components/search/search-box';
 import type { SearchNavigationEventDetail } from '../../shared/components/search/search-input';
+import { inlineCode } from '../../shared/components/styles/lit/base.css';
 import { ipcContext } from '../../shared/contexts/ipc';
 import type { TelemetryContext } from '../../shared/contexts/telemetry';
 import { telemetryContext } from '../../shared/contexts/telemetry';
 import { emitTelemetrySentEvent } from '../../shared/telemetry';
 import { stateContext } from './context';
 import { graphStateContext } from './stateProvider';
+import { actionButton, linkBase, ruleBase } from './styles/graph.css';
+import { graphHeaderControlStyles, progressStyles, repoHeaderStyles, titlebarStyles } from './styles/header.css';
 import '@shoelace-style/shoelace/dist/components/option/option.js';
 import '@shoelace-style/shoelace/dist/components/select/select.js';
 import '../../shared/components/button';
@@ -100,10 +103,21 @@ function getSearchResultIdByIndex(results: GraphSearchResults, index: number): s
 
 @customElement('gl-graph-header')
 export class GlGraphHeader extends SignalWatcher(LitElement) {
+	static override styles = [
+		inlineCode,
+		linkBase,
+		ruleBase,
+		actionButton,
+		titlebarStyles,
+		repoHeaderStyles,
+		graphHeaderControlStyles,
+		progressStyles,
+	];
+
 	// FIXME: remove light DOM
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this;
-	}
+	// protected override createRenderRoot(): HTMLElement | DocumentFragment {
+	// 	return this;
+	// }
 
 	@consume({ context: ipcContext })
 	_ipc!: typeof ipcContext.__context__;
@@ -711,7 +725,7 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
 										Switch to Another Branch...
 										<hr />
 										<code-icon icon="git-branch" aria-hidden="true"></code-icon>
-										<span class="md-code">${this.hostState.branch?.name}</span>${when(
+										<span class="inline-code">${this.hostState.branch?.name}</span>${when(
 											this.hostState.branchState?.worktree,
 											() => html`<i> (in a worktree)</i> `,
 										)}
@@ -756,7 +770,7 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
 						<span slot="content">
 							Create New Branch from
 							<code-icon icon="git-branch"></code-icon>
-							<span class="md-code">${this.hostState.branch?.name}</span>
+							<span class="inline-code">${this.hostState.branch?.name}</span>
 						</span>
 					</gl-tooltip>
 					<gl-tooltip placement="bottom">

src/webviews/apps/plus/graph-next/graph-next.html

@@ -20,16 +20,11 @@
 	</head>
 
 	<body
-		class="graph-app scrollable"
+		class="scrollable"
 		data-placement="#{placement}"
 		data-vscode-context='{ "preventDefaultContextMenuItems": true, "webview": "#{webviewId}", "webviewInstance": "#{webviewInstanceId}" }'
 	>
-		<gl-graph-app
-			class="graph-app__container"
-			name="GraphView"
-			placement="#{placement}"
-			bootstrap="#{state}"
-		></gl-graph-app>
+		<gl-graph-app name="GraphView" placement="#{placement}" bootstrap="#{state}"></gl-graph-app>
 		#{endOfBody}
 	</body>
 </html>