Adds density setting to rebase editor

Author: eamodio

docs/telemetry-events.md

@@ -3522,6 +3522,7 @@ void
 ```typescript
 {
   'context.ascending': boolean,
+  'context.config.density': 'compact' | 'comfortable',
   'context.config.openOnPausedRebase': boolean | 'interactive',
   'context.config.ordering': 'asc' | 'desc',
   'context.config.revealBehavior': 'onDoubleClick' | 'onSelection',

package.json

@@ -3705,6 +3705,21 @@
 				"title": "Interactive Rebase Editor",
 				"order": 600,
 				"properties": {
+					"gitlens.rebaseEditor.density": {
+						"type": "string",
+						"default": "compact",
+						"enum": [
+							"compact",
+							"comfortable"
+						],
+						"enumDescriptions": [
+							"Compact layout with minimal spacing",
+							"Comfortable layout with more space between rows"
+						],
+						"markdownDescription": "Specifies the layout density of the _Interactive Rebase Editor_",
+						"scope": "window",
+						"order": 5
+					},
 					"gitlens.rebaseEditor.ordering": {
 						"type": "string",
 						"default": "desc",

src/config.ts

@@ -665,6 +665,7 @@ interface ProxyConfig {
 }
 
 interface RebaseEditorConfig {
+	readonly density: 'compact' | 'comfortable';
 	readonly openOnPausedRebase: boolean | 'interactive';
 	readonly ordering: 'asc' | 'desc';
 	readonly revealLocation: 'graph' | 'inspect';

src/webviews/apps/rebase/components/rebase-entry.css.ts

@@ -85,7 +85,7 @@ export const entryStyles = css`
 		gap: 1rem;
 		position: relative;
 		padding-inline: 1rem;
-		padding-block: 0.2rem;
+		padding-block: var(--gl-rebase-entry-padding-block, 0.2rem);
 		border-radius: 0.3rem;
 		box-sizing: border-box;
 		color: var(--fg);
@@ -116,13 +116,13 @@ export const entryStyles = css`
 
 		&.entry--first {
 			.entry-graph::before {
-				inset-block: 50% -0.225rem;
+				inset-block: 50% var(--gl-rebase-entry-graph-offset, -0.225rem);
 			}
 		}
 
 		&.entry--last {
 			.entry-graph::before {
-				inset-block: -0.225rem 50%;
+				inset-block: var(--gl-rebase-entry-graph-offset, -0.225rem) 50%;
 			}
 		}
 
@@ -224,7 +224,7 @@ export const entryStyles = css`
 		position: relative;
 		flex: 0 0 auto;
 		width: 16px;
-		height: 25px;
+		height: var(--gl-rebase-entry-graph-height, 25px);
 		z-index: 2;
 
 		/* circle for commits */
@@ -252,7 +252,7 @@ export const entryStyles = css`
 		&::before {
 			content: '';
 			position: absolute;
-			inset-block: -0.225rem;
+			inset-block: calc(-1 * var(--gl-rebase-entry-padding-block, 0.2rem));
 			width: 0;
 			border-right: 2px solid var(--action-line-color);
 			z-index: -2;

src/webviews/apps/rebase/rebase.css.ts

@@ -147,6 +147,8 @@ export const rebaseStyles = css`
 		grid-template-columns: minmax(0, 1fr);
 		height: 100vh;
 		min-width: 0;
+		box-sizing: border-box;
+		padding: 0.5rem;
 	}
 
 	/* ==========================================================================
@@ -174,9 +176,8 @@ export const rebaseStyles = css`
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
-		padding: 0.6rem 1rem;
+		padding: 0.5rem 1rem;
 		min-width: 0;
-		border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
 
 		gl-checkbox {
 			margin-block: 0;
@@ -313,12 +314,15 @@ export const rebaseStyles = css`
 	.entries {
 		grid-area: entries;
 		display: block;
-		height: 100%;
 		min-height: 0;
 		overflow-x: hidden !important;
 		overflow-y: visible;
 		outline: none;
-		margin-inline: 1rem;
+		margin: 0.5rem 1rem;
+		box-sizing: border-box;
+
+		border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
+		border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
 	}
 
 	.entries {
@@ -387,7 +391,6 @@ export const rebaseStyles = css`
 		align-items: center;
 		gap: 1rem;
 		padding: 0.5rem 1rem;
-		border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
 		background: var(--color-background);
 		z-index: 1;
 		min-width: 0;
@@ -459,4 +462,14 @@ export const rebaseStyles = css`
 	gl-button:hover .button-shortcut {
 		opacity: 1;
 	}
+
+	/* ==========================================================================
+	   Density: Comfortable
+	   ========================================================================== */
+
+	.container[data-density='comfortable'] {
+		--gl-rebase-entry-padding-block: 0.5rem;
+		--gl-rebase-entry-graph-height: 29px;
+		--gl-rebase-entry-graph-offset: -0.5rem;
+	}
 `;

src/webviews/apps/rebase/rebase.ts

@@ -1171,9 +1171,13 @@ export class GlRebaseEditor extends GlAppHost<State, RebaseStateProvider> {
 		const isReadOnly = this.state.isReadOnly ?? false;
 		const isActive = this.isRebasing;
 		const isEmptyOrNoop = this.isEmptyOrNoop;
+		const density = this.state.density ?? 'compact';
 
 		return html`
-			<div class="container ${isReadOnly ? 'read-only' : ''} ${isActive ? 'active-rebase' : ''}">
+			<div
+				class="container ${isReadOnly ? 'read-only' : ''} ${isActive ? 'active-rebase' : ''}"
+				data-density="${density}"
+			>
 				${guard(
 					[
 						this.state.branch,

src/webviews/rebase/protocol.ts

@@ -33,6 +33,8 @@ export interface State extends WebviewState<'gitlens.rebase'> {
 	 */
 	isReadOnly?: boolean;
 
+	/** Layout density */
+	density: Config['rebaseEditor']['density'];
 	/** Where to reveal commits when clicking on links or double-clicking rows */
 	revealLocation: Config['rebaseEditor']['revealLocation'];
 	/** When to automatically reveal commits */

src/webviews/rebase/rebaseWebviewProvider.ts

@@ -761,6 +761,7 @@ export class RebaseWebviewProvider implements Disposable {
 			authors: authors != null ? Object.fromEntries(authors) : {},
 			ascending: this.ascending,
 			isReadOnly: processed.preservesMerges,
+			density: configuration.get('rebaseEditor.density'),
 			revealLocation: configuration.get('rebaseEditor.revealLocation'),
 			revealBehavior: this.getRevealBehavior(),
 			rebaseStatus: rebaseStatus,