Removes inline styles from webviews

eamodio · eamodio · commit ed5f1a8d7cec · 2026-05-13T02:20:56.000-04:00
- Improves CSP compatibility by moving inline style attributes into component stylesheets/classes
 - Tightens style CSP handling across environments while keeping nonce support enabled
 - Preserves dynamic file icon colors without relying on blocked inline style attributes
diff --git a/src/webviews/apps/plus/graph/components/gl-commit-box.css.ts b/src/webviews/apps/plus/graph/components/gl-commit-box.css.ts
@@ -29,6 +29,10 @@ export const commitBoxStyles = css`
 		justify-content: space-between;
 	}
 
+	.compose-icon {
+		color: var(--vscode-charts-purple, #7c3aed);
+	}
+
 	.amend-checkbox {
 		margin-block: 0;
 		font-size: var(--gl-font-base);
diff --git a/src/webviews/apps/plus/graph/components/gl-commit-box.ts b/src/webviews/apps/plus/graph/components/gl-commit-box.ts
@@ -59,11 +59,7 @@ export class GlCommitBox extends LitElement {
 				${this.renderAmendToggle()}
 				${showCompose
 					? html`<gl-button appearance="secondary" @click=${this.onCompose}>
-							<code-icon
-								icon="wand"
-								slot="prefix"
-								style="color: var(--vscode-charts-purple, #7c3aed);"
-							></code-icon>
+							<code-icon class="compose-icon" icon="wand" slot="prefix"></code-icon>
 							Compose
 						</gl-button>`
 					: nothing}
diff --git a/src/webviews/apps/plus/graph/components/gl-details-multicommit-panel.css.ts b/src/webviews/apps/plus/graph/components/gl-details-multicommit-panel.css.ts
@@ -3,6 +3,10 @@ import { css } from 'lit';
 export { panelActionInputStyles, panelHostStyles } from './shared-panel.css.js';
 
 export const multiCommitPanelStyles = css`
+	:host {
+		--mode-header-bg: var(--titlebar-bg, var(--vscode-sideBar-background, var(--color-background)));
+	}
+
 	.compare-metadata {
 		display: flex;
 		align-items: center;
diff --git a/src/webviews/apps/plus/graph/components/gl-details-multicommit-panel.ts b/src/webviews/apps/plus/graph/components/gl-details-multicommit-panel.ts
@@ -333,12 +333,7 @@ export class GlDetailsMultiCommitPanel extends LitElement {
 			this.aiEnabled && this.experimentalFeaturesEnabled
 				? (['review', 'compare'] as const)
 				: (['compare'] as const);
-		return html`<gl-details-header
-			.activeMode=${this.activeMode}
-			.loading=${this.loading}
-			.modes=${modes}
-			style="--mode-header-bg: var(--titlebar-bg, var(--vscode-sideBar-background, var(--color-background)))"
-		>
+		return html`<gl-details-header .activeMode=${this.activeMode} .loading=${this.loading} .modes=${modes}>
 			<span class="compare-header__title">Comparing References</span>
 		</gl-details-header>`;
 	}
diff --git a/src/webviews/apps/plus/graph/components/gl-details-wip-header.css.ts b/src/webviews/apps/plus/graph/components/gl-details-wip-header.css.ts
@@ -3,6 +3,8 @@ import { css } from 'lit';
 export const detailsWipHeaderStyles = css`
 	:host {
 		display: contents;
+		--mode-header-bg: var(--titlebar-bg, var(--color-background--level-05));
+		--mode-header-tint: 20%;
 	}
 
 	.graph-details-header__title-group {
diff --git a/src/webviews/apps/plus/graph/components/gl-details-wip-header.ts b/src/webviews/apps/plus/graph/components/gl-details-wip-header.ts
@@ -67,7 +67,6 @@ export class GlDetailsWipHeader extends LitElement {
 			.activeMode=${this.activeMode}
 			.loading=${this.loading}
 			.modes=${this.computeWipModes()}
-			style="--mode-header-bg: var(--titlebar-bg, var(--color-background--level-05)); --mode-header-tint: 20%"
 		>
 			<div class="graph-details-header__title-group">
 				<span class="graph-details-header__wip-title"
diff --git a/src/webviews/apps/plus/graph/components/gl-graph-details-panel.ts b/src/webviews/apps/plus/graph/components/gl-graph-details-panel.ts
@@ -508,18 +508,15 @@ export class GlGraphDetailsPanel extends SignalWatcher(LitElement) {
 						<div class="details-skeleton__header">
 							<div class="details-skeleton__avatar"></div>
 							<div class="details-skeleton__lines">
-								<div class="details-skeleton__line" style="width: 60%"></div>
-								<div
-									class="details-skeleton__line details-skeleton__line--short"
-									style="width: 40%"
-								></div>
+								<div class="details-skeleton__line"></div>
+								<div class="details-skeleton__line details-skeleton__line--short"></div>
 							</div>
 						</div>
 						<div class="details-skeleton__bar"></div>
 						<div class="details-skeleton__body">
-							<div class="details-skeleton__line" style="width: 90%"></div>
-							<div class="details-skeleton__line" style="width: 70%"></div>
-							<div class="details-skeleton__line details-skeleton__line--short" style="width: 50%"></div>
+							<div class="details-skeleton__line"></div>
+							<div class="details-skeleton__line"></div>
+							<div class="details-skeleton__line details-skeleton__line--short"></div>
 						</div>
 					</div>`}
 		</div>`;
diff --git a/src/webviews/apps/plus/graph/graph-header.ts b/src/webviews/apps/plus/graph/graph-header.ts
@@ -148,6 +148,10 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
 				opacity: 0.5;
 				cursor: not-allowed;
 			}
+
+			.minimap-toggle-icon {
+				transform: rotate(180deg);
+			}
 		`,
 	];
 
@@ -1289,8 +1293,8 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
 							@click=${() => this.handleMinimapToggled()}
 						>
 							<code-icon
+								class="minimap-toggle-icon"
 								icon=${config?.minimap && this.minimapVisible ? 'layout-panel' : 'layout-panel-off'}
-								style="transform: rotate(180deg)"
 							></code-icon>
 						</gl-button>
 						${(() => {
diff --git a/src/webviews/apps/plus/graph/graph-wrapper/gl-graph.react.tsx b/src/webviews/apps/plus/graph/graph-wrapper/gl-graph.react.tsx
@@ -695,7 +695,6 @@ export const GlGraphReact = memo((initProps: GraphWrapperInitProps) => {
 					)}${props.searchResults.hasMore ? '+' : ''}`}
 				</span>
 				<a
-					style={{ marginLeft: '0.5rem' }}
 					className="graph-footer__link"
 					onClick={e => {
 						e.preventDefault();
diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
@@ -1276,6 +1276,10 @@ web-graph {
 		font-style: italic;
 	}
 
+	& .graph-footer__message + .graph-footer__link {
+		margin-left: 0.5rem;
+	}
+
 	& .graph-footer__link {
 		color: var(--vscode-textLink-foreground);
 		cursor: pointer;
@@ -1615,6 +1619,23 @@ web-graph {
 		height: 8px;
 	}
 
+	&__lines > &__line:nth-child(1) {
+		width: 60%;
+	}
+	&__lines > &__line:nth-child(2) {
+		width: 40%;
+	}
+
+	&__body > &__line:nth-child(1) {
+		width: 90%;
+	}
+	&__body > &__line:nth-child(2) {
+		width: 70%;
+	}
+	&__body > &__line:nth-child(3) {
+		width: 50%;
+	}
+
 	&__bar {
 		height: 28px;
 		border-radius: 4px;
diff --git a/src/webviews/apps/plus/graph/sidebar/sidebar-panel.ts b/src/webviews/apps/plus/graph/sidebar/sidebar-panel.ts
@@ -2,7 +2,6 @@ import { consume } from '@lit/context';
 import { SignalWatcher } from '@lit-labs/signals';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import { uncommitted } from '@gitlens/git/models/revision.js';
 import type { HierarchicalItem } from '@gitlens/utils/array.js';
 import { makeHierarchical } from '@gitlens/utils/array.js';
@@ -312,6 +311,28 @@ export class GlGraphSidebarPanel extends SignalWatcher(LitElement) {
 				opacity: 0.07;
 			}
 
+			.loading .skeleton:nth-child(1) .skeleton-text {
+				width: 65%;
+			}
+			.loading .skeleton:nth-child(2) .skeleton-text {
+				width: 45%;
+			}
+			.loading .skeleton:nth-child(3) .skeleton-text {
+				width: 80%;
+			}
+			.loading .skeleton:nth-child(4) .skeleton-text {
+				width: 55%;
+			}
+			.loading .skeleton:nth-child(5) .skeleton-text {
+				width: 70%;
+			}
+			.loading .skeleton:nth-child(6) .skeleton-text {
+				width: 40%;
+			}
+			.loading .skeleton:nth-child(7) .skeleton-text {
+				width: 60%;
+			}
+
 			.empty {
 				padding: 1rem;
 				text-align: center;
@@ -542,13 +563,14 @@ export class GlGraphSidebarPanel extends SignalWatcher(LitElement) {
 	}
 
 	private renderSkeleton(): unknown {
-		const widths = [65, 45, 80, 55, 70, 40, 60];
+		// 7 rows; per-row widths are positional (`:nth-child` in component CSS).
 		return html`<div class="loading">
-			${widths.map(
-				w => html`
+			${Array.from(
+				{ length: 7 },
+				() => html`
 					<div class="skeleton">
 						<div class="skeleton-icon"></div>
-						<div class="skeleton-text" style=${styleMap({ width: `${w}%` })}></div>
+						<div class="skeleton-text"></div>
 					</div>
 				`,
 			)}
diff --git a/src/webviews/apps/shared/components/file-icon/file-icon.ts b/src/webviews/apps/shared/components/file-icon/file-icon.ts
@@ -5,9 +5,10 @@
  * and renders the appropriate font glyph with color.
  */
 
+import type { PropertyValues } from 'lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
+import type { SetiIcon } from './seti-icons.js';
 import { resolveSetiFileIcon } from './seti-icons.js';
 
 @customElement('gl-file-icon')
@@ -36,18 +37,32 @@ export class GlFileIcon extends LitElement {
 	@property()
 	filename?: string;
 
-	override render() {
-		if (this.filename == null) return nothing;
+	private _icon?: SetiIcon;
+
+	override willUpdate(changed: PropertyValues): void {
+		if (!changed.has('filename')) return;
+
+		if (this.filename == null) {
+			this._icon = undefined;
+			return;
+		}
 
 		const isLight =
 			document.body.classList.contains('vscode-light') ||
 			document.body.classList.contains('vscode-high-contrast-light');
+		this._icon = resolveSetiFileIcon(this.filename, isLight);
+	}
 
-		const icon = resolveSetiFileIcon(this.filename, isLight);
-		if (icon == null) return nothing;
+	override updated(changed: PropertyValues): void {
+		if (!changed.has('filename')) return;
+		// Set color via CSSOM on the host (inherits to .font-icon) — the webview CSP forbids
+		// inline `style="…"` attributes; direct property writes are allowed.
+		this.style.color = this._icon?.color ?? '';
+	}
 
-		const char = parseFontCharacter(icon.character);
-		return html`<span class="font-icon" style=${styleMap({ color: icon.color || 'inherit' })}>${char}</span>`;
+	override render(): unknown {
+		if (this._icon == null) return nothing;
+		return html`<span class="font-icon">${parseFontCharacter(this._icon.character)}</span>`;
 	}
 }
 
diff --git a/src/webviews/apps/shared/components/repo-button-group.ts b/src/webviews/apps/shared/components/repo-button-group.ts
@@ -69,6 +69,14 @@ export class GlRepoButtonGroup extends GlElement {
 				flex-shrink: 0;
 			}
 
+			.popover-status-icon {
+				margin-top: -3px;
+			}
+
+			.connect-icon {
+				color: var(--titlebar-fg);
+			}
+
 			/* :host([expandable]) .truncated-button {
 				transition: max-width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
 			} */
@@ -214,15 +222,15 @@ export class GlRepoButtonGroup extends GlElement {
 						connectedIntegration,
 						() => html`
 							<span>
-								<code-icon style="margin-top: -3px" icon="check" aria-hidden="true"></code-icon>
+								<code-icon class="popover-status-icon" icon="check" aria-hidden="true"></code-icon>
 								Connected to ${provider.name}
 							</span>
 						`,
 						() => {
 							if (connectedIntegration !== false) return nothing;
 
 							return html`
-								<code-icon style="margin-top: -3px" icon="plug" aria-hidden="true"></code-icon>
+								<code-icon class="popover-status-icon" icon="plug" aria-hidden="true"></code-icon>
 								<a
 									href=${createCommandLink<ConnectRemoteProviderCommandArgs>(
 										'gitlens.connectRemoteProvider',
@@ -258,7 +266,7 @@ export class GlRepoButtonGroup extends GlElement {
 					remote: provider.bestRemoteName,
 				})}
 			>
-				<code-icon icon="plug" style="color: var(--titlebar-fg)"></code-icon>
+				<code-icon class="connect-icon" icon="plug"></code-icon>
 				<span slot="tooltip">
 					Connect to ${provider.name}
 					<hr />
diff --git a/src/webviews/apps/shared/components/tree/gl-file-tree-pane.css.ts b/src/webviews/apps/shared/components/tree/gl-file-tree-pane.css.ts
@@ -25,6 +25,10 @@ export const fileTreeStyles = css`
 		min-height: 0;
 		overflow: hidden;
 		margin-top: var(--gl-tree-view-margin-top, 0);
+		--gl-decoration-before-font-size: 0.9em;
+		--gl-decoration-before-opacity: 0.8;
+		--gl-decoration-after-font-size: 0.9em;
+		--gl-decoration-after-opacity: 0.8;
 	}
 	gl-tree-view[filterable] {
 		margin-top: var(--gl-tree-view-filterable-margin-top, var(--gl-tree-view-margin-top, 0));
diff --git a/src/webviews/apps/shared/components/tree/gl-file-tree-pane.ts b/src/webviews/apps/shared/components/tree/gl-file-tree-pane.ts
@@ -621,7 +621,6 @@ export class GlFileTreePane extends LitElement {
 			?filterable=${this._showFilter}
 			filter-placeholder="Filter files..."
 			empty-text=${emptyText}
-			style="--gl-decoration-before-font-size: 0.9em; --gl-decoration-before-opacity: 0.8; --gl-decoration-after-font-size: 0.9em; --gl-decoration-after-opacity: 0.8"
 			@gl-tree-generated-item-action-clicked=${this.onTreeItemActionClicked}
 			@gl-tree-generated-item-checked=${this.onTreeItemChecked}
 			@gl-tree-generated-item-selected=${this.onTreeItemSelected}
diff --git a/src/webviews/apps/shared/components/tree/gl-wip-tree-pane.ts b/src/webviews/apps/shared/components/tree/gl-wip-tree-pane.ts
@@ -67,6 +67,10 @@ export class GlWipTreePane extends LitElement {
 				--gl-leading-action-trailing-gap: 0;
 			}
 		}
+
+		.subtitle-stats {
+			opacity: 1;
+		}
 	`;
 
 	@property({ type: Array })
@@ -234,7 +238,7 @@ export class GlWipTreePane extends LitElement {
 			@gl-check-all=${this.onCheckAll}
 			@gl-file-tree-pane-open-multi-diff=${multiDiff ? () => this.onOpenMultiDiff(multiDiff) : null}
 		>
-			<span slot="subtitle" style="opacity: 1">${this.renderStats()}</span>
+			<span class="subtitle-stats" slot="subtitle">${this.renderStats()}</span>
 			${this.renderConflictBulkActions(files)}
 			${files.length > 0
 				? html`<gl-button
diff --git a/webpack.config.mjs b/webpack.config.mjs
@@ -838,18 +838,15 @@ function getCspHtmlPlugin(mode, env) {
 				mode !== 'production'
 					? ['#{cspSource}', "'nonce-#{cspNonce}'", "'unsafe-eval'"]
 					: ['#{cspSource}', "'nonce-#{cspNonce}'"],
-			'style-src':
-				mode === 'production'
-					? ['#{cspSource}', "'nonce-#{cspNonce}'", "'unsafe-hashes'"]
-					: ['#{cspSource}', "'unsafe-hashes'", "'unsafe-inline'"],
+			'style-src': ['#{cspSource}', "'nonce-#{cspNonce}'", "'unsafe-hashes'"],
 			'font-src': ['#{cspSource}'],
 			'connect-src': mode !== 'production' ? ['#{cspSource}'] : "'none'",
 		},
 		{
 			enabled: true,
 			hashingMethod: 'sha256',
 			hashEnabled: { 'script-src': true, 'style-src': mode === 'production' },
-			nonceEnabled: { 'script-src': true, 'style-src': mode === 'production' },
+			nonceEnabled: { 'script-src': true, 'style-src': true },
 		},
 	);
 	// Override the nonce creation so we can dynamically generate them at runtime

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,8 @@ import { css } from 'lit';`
`3`	`3`	export const detailsWipHeaderStyles = css`
`4`	`4`	`:host {`
`5`	`5`	`display: contents;`
	`6`	`+ --mode-header-bg: var(--titlebar-bg, var(--color-background--level-05));`
	`7`	`+ --mode-header-tint: 20%;`
`6`	`8`	`}`
`7`	`9`
`8`	`10`	`.graph-details-header__title-group {`
Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,6 @@ export class GlDetailsWipHeader extends LitElement {`
`67`	`67`	`.activeMode=${this.activeMode}`
`68`	`68`	`.loading=${this.loading}`
`69`	`69`	`.modes=${this.computeWipModes()}`
`70`		`- style="--mode-header-bg: var(--titlebar-bg, var(--color-background--level-05)); --mode-header-tint: 20%"`
`71`	`70`	`>`
`72`	`71`	`<div class="graph-details-header__title-group">`
`73`	`72`	`<span class="graph-details-header__wip-title"`