feat(settings): add an option for smaller indents in trees (#1795)

Signed-off-by: Inf1mum <[email protected]>

src/features/settings/__tests__/behavior.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { formatPattern, formatTimestamp } from "@/platform/dateFormat";
 import { resolveThemeId } from "@/workbench/theme";
-import { applyAppearanceOptions, nextZoom } from "../appearanceRuntime";
+import { applyAppearanceOptions, nextZoom, SMALL_TREE_INDENT } from "../appearanceRuntime";
 import { validateSettings } from "../model/schema";
 import { validateAppearanceExtras, validateNotifications } from "../model/behaviorSchema";
 
@@ -69,6 +69,20 @@ describe("appearance & behavior settings", () => {
     expect(validateAppearanceExtras({ showToolWindowBadges: 1 }).showToolWindowBadges).toBe(true);
   });
 
+  it("defaults Use smaller indents in trees to off and applies the indent variable", () => {
+    expect(validateAppearanceExtras({}).smallTreeIndents).toBe(false);
+    expect(validateAppearanceExtras({ smallTreeIndents: true }).smallTreeIndents).toBe(true);
+    expect(validateAppearanceExtras({ smallTreeIndents: "on" }).smallTreeIndents).toBe(false);
+    const root = document.createElement("div");
+    applyAppearanceOptions(validateSettings({ appearance: { smallTreeIndents: true } }), root);
+    expect(root.style.getPropertyValue("--tree-indent")).toBe(SMALL_TREE_INDENT);
+    // Off (or a stored non-boolean) restores the default indents.
+    applyAppearanceOptions(validateSettings({}), root);
+    expect(root.style.getPropertyValue("--tree-indent")).toBe("");
+    applyAppearanceOptions(validateSettings({ appearance: { smallTreeIndents: false } }), root);
+    expect(root.style.getPropertyValue("--tree-indent")).toBe("");
+  });
+
   it("keeps the UI fallback font empty by default and trims a stored one", () => {
     expect(validateAppearanceExtras({}).uiFontFallback).toBe("");
     expect(validateAppearanceExtras({ uiFontFallback: " 思源黑体 " }).uiFontFallback).toBe("思源黑体");

src/features/settings/appearanceRuntime.ts

@@ -24,6 +24,9 @@ function flag(root: HTMLElement, name: string, on: boolean, value = "") {
   else delete root.dataset[name];
 }
 
+/** The per-level indent `ui/Tree` reads when "Use smaller indents in trees" is on (IDEA parity). */
+export const SMALL_TREE_INDENT = "12px";
+
 /** Root attributes and CSS variables for the Appearance options. */
 export function applyAppearanceOptions(s: ValidSettings, root: HTMLElement = document.documentElement): void {
   const a = s.appearance;
@@ -42,6 +45,9 @@ export function applyAppearanceOptions(s: ValidSettings, root: HTMLElement = doc
   flag(root, "toolWindowBg", a.differentToolWindowBackground, "different");
   flag(root, "projectColors", !a.projectColorsInToolbar, "off");
   flag(root, "menuIcons", !a.menuIcons, "off");
+  // "Use smaller indents in trees": `ui/Tree` reads the variable as its per-level indent.
+  if (a.smallTreeIndents) root.style.setProperty("--tree-indent", SMALL_TREE_INDENT);
+  else root.style.removeProperty("--tree-indent");
   root.dataset.aaIde = a.ideAntialiasing;
   root.dataset.aaEditor = a.editorAntialiasing;
   applyZoom(a.zoom, root);

src/features/settings/model/behaviorSchema.ts

@@ -30,6 +30,8 @@ export interface AppearanceExtras {
   redGreenVision: boolean;
   differentToolWindowBackground: boolean;
   compactMode: boolean;
+  /** IDEA "Use smaller indents in trees": tool window trees indent less per level. */
+  smallTreeIndents: boolean;
   fullPathInTitle: boolean;
   projectColorsInToolbar: boolean;
   dndWithAltOnly: boolean;
@@ -88,6 +90,7 @@ export const DEFAULT_APPEARANCE_EXTRAS: AppearanceExtras = {
   redGreenVision: false,
   differentToolWindowBackground: false,
   compactMode: false,
+  smallTreeIndents: false,
   fullPathInTitle: false,
   projectColorsInToolbar: true,
   dndWithAltOnly: false,
@@ -144,6 +147,7 @@ export function validateAppearanceExtras(raw: unknown): AppearanceExtras {
     redGreenVision: b("redGreenVision"),
     differentToolWindowBackground: b("differentToolWindowBackground"),
     compactMode: b("compactMode"),
+    smallTreeIndents: b("smallTreeIndents"),
     fullPathInTitle: b("fullPathInTitle"),
     projectColorsInToolbar: b("projectColorsInToolbar"),
     dndWithAltOnly: b("dndWithAltOnly"),

src/features/settings/pages/behavior.tsx

@@ -338,6 +338,11 @@ function UiOptionsGrid() {
             label="Drag-and-drop with Alt pressed only"
             hint="Applies to editor tabs and tool window buttons"
           />
+          <BoundToggle
+            k="appearance.smallTreeIndents"
+            label="Use smaller indents in trees"
+            hint="Project, Structure, Commit and other tool window trees indent less per level"
+          />
           <BoundToggle k="appearance.menuIcons" label="Display icons in menu items" />
         </>
       }
@@ -646,6 +651,8 @@ export const BEHAVIOR_PAGES: PageSpec[] = [
               "Use project colors in main toolbar",
               "Drag-and-drop with Alt pressed only",
               "Display icons in menu items",
+              "Use smaller indents in trees",
+              "tree indent",
             ],
             component: UiOptionsGrid,
           },