fix(workbench): even out the tool window stripes' spacing and draw their icons at 20px (#1741)

Stripe icon buttons were 28px with a 2px gap, plus an extra gap at each group boundary, and their 20px icons were drawn at 18px, off the pixel grid. Stripe buttons are now 30px and repeat at the title bar's height (40px, 32px compact), so the title bar's Settings button reads as the right stripe's first one; the empty drop slot after a group no longer adds a gap. Stripe, title bar and Run widget icons render at 20px.

Co-authored-by: wildcatDownstairs <[email protected]>

src/features/run/RunWidget.tsx

@@ -90,7 +90,7 @@ export function RunWidget() {
               <IconButton
                 icon="resume"
                 size="large"
-                iconSize={18}
+                iconSize={20}
                 className={styles.widgetButton}
                 title="Resume Program"
                 shortcut={shortcutLabel("debug.resume")}
@@ -113,7 +113,7 @@ export function RunWidget() {
             <IconButton
               icon="run"
               size="large"
-              iconSize={18}
+              iconSize={20}
               className={clsx(styles.widgetButton, styles.widgetRun)}
               title={
                 selected
@@ -131,7 +131,7 @@ export function RunWidget() {
             <IconButton
               icon="debug"
               size="large"
-              iconSize={18}
+              iconSize={20}
               className={styles.widgetButton}
               title={selected ? tx`Debug '${selected.name}'` : currentFile ? "Debug Current File" : "Debug"}
               shortcut={shortcutLabel("run.debug")}
@@ -168,7 +168,7 @@ export function RunWidget() {
           ref={moreRef}
           icon="more"
           size="large"
-          iconSize={18}
+          iconSize={20}
           className={styles.widgetButton}
           title="More Actions"
           aria-haspopup="menu"

src/styles/tokens.css

@@ -253,7 +253,7 @@ html {
   --h-titlebar: 40px;
   --titlebar-tool-button: 30px;
   /* tool window stripe button, icons only */
-  --stripe-icon-button: 28px;
+  --stripe-icon-button: 30px;
   --stripe-outer-padding: 4px;
   --h-header: 40px;
   --h-tabbar: 38px;

src/workbench/TitleBar.tsx

@@ -235,7 +235,7 @@ function GearButton({ customize }: { customize: MenuItem[] }) {
         ref={ref}
         icon="settings"
         title="IDE and Project Settings"
-        iconSize={18}
+        iconSize={20}
         className={styles.tool}
         aria-haspopup="menu"
         aria-expanded={open}
@@ -263,7 +263,7 @@ function ToolbarEntry({ id, items }: { id: string; items: ReadonlyMap<string, Ti
         action={action.id}
         title={action.title}
         shortcut={shortcutLabel(action.id) ?? (action.id === "navigate.searchEverywhere" ? "⇧⇧" : undefined)}
-        iconSize={18}
+        iconSize={20}
         className={styles.tool}
       />
     </div>

src/workbench/toolwindows/ToolWindows.module.css

@@ -168,8 +168,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2px;
-  padding: 0 0 6px;
+  /* Icon buttons repeat at the title bar's height, so the title bar's Settings button reads as the right stripe's first one, as in IDEA. */
+  --stripe-gap: calc(var(--h-titlebar) - var(--stripe-icon-button));
+  gap: var(--stripe-gap);
+  padding: calc(var(--stripe-gap) / 2) 0 6px;
   /* Transparent: stripes sit on the window frame so the project-colour wash flows from the title bar. */
   background: transparent;
   /* Short windows: scroll the buttons instead of clipping the last ones. */
@@ -182,7 +184,8 @@
 }
 .stripeWithNames {
   --stripe-button: var(--stripe-drag, var(--stripe-button-w, 56px));
-  gap: 4px;
+  --stripe-gap: 4px;
+  padding-top: 0;
 }
 .stripeSideLeft {
   padding-left: var(--stripe-pad);
@@ -256,7 +259,7 @@
   padding: 6px 2px 5px;
 }
 .stripeMore {
-  height: 30px;
+  height: var(--stripe-icon-button);
 }
 .stripeWithNames .stripeMore {
   width: var(--stripe-button);
@@ -426,9 +429,17 @@
   display: flex;
   flex-direction: column;
 }
+/* The drop target after a group's last button is empty: don't let it add a gap between groups. */
+.stripeSlotEnd {
+  margin-top: calc(-1 * var(--stripe-gap));
+}
+.stripeSlotEnd .stripeDrop {
+  top: calc(var(--stripe-gap) / 2 - 1px);
+}
 .stripeDrop {
   position: absolute;
-  top: -3px;
+  /* Centred in the gap above the slot; the end slot sits on the last button's bottom edge, so below it. */
+  top: calc(var(--stripe-gap) / -2 - 1px);
   left: 6px;
   right: 6px;
   height: 2px;

src/workbench/toolwindows/ToolWindows.tsx

@@ -218,7 +218,7 @@ function StripeHandle({
     const el = e.currentTarget;
     el.setPointerCapture(e.pointerId);
     const origin = e.clientX;
-    const icons = parseFloat(getComputedStyle(stripe).getPropertyValue("--stripe-icon-button")) || 28;
+    const icons = parseFloat(getComputedStyle(stripe).getPropertyValue("--stripe-icon-button")) || 30;
     const start = names ? width : icons;
     const cursor = document.body.style.cursor;
     document.body.style.cursor = "col-resize";
@@ -418,7 +418,7 @@ function StripeButton({
       {...tooltipAttrs(tw.title, shortcut)}
     >
       <span className={styles.stripeIcon}>
-        <Icon name={tw.icon} size={18} />
+        <Icon name={tw.icon} size={20} />
         {tw.useBadge && <StripeBadge useBadge={tw.useBadge} />}
       </span>
       {showName && (
@@ -459,7 +459,7 @@ function StripeMore({ windows }: { windows: ToolWindowContribution[] }) {
         onClick={() => setOpen((v) => !v)}
         {...tooltipAttrs("More Tool Windows")}
       >
-        <Icon name="more-horizontal" size={18} />
+        <Icon name="more-horizontal" size={20} />
       </button>
       <Menu
         open={open}
@@ -522,7 +522,7 @@ export function ToolWindowStripe({
           <StripeButton tw={w} active={isActive(w)} focused={focused === w.id} side={side} showName={showNames} />
         </div>
       ))}
-      <div className={styles.stripeSlot}>{indicator(slot, null)}</div>
+      <div className={clsx(styles.stripeSlot, styles.stripeSlotEnd)}>{indicator(slot, null)}</div>
     </div>
   );