Show the rail highlight at icon size when a first panel opens

Opening a panel from the labelled rail folds its pills to icons over a few
frames, and the highlight faded in at a pill's width and then shrank, as
did the open button's own fill. The highlight now appears only once the
open button is an icon again (square), its size changes at once rather
than easing, and the open button carries no fill of its own.

Co-authored-by: Sameh Khamis <[email protected]>

src/ui/railEdgeScroll.js

@@ -83,6 +83,11 @@ export function installRailEdgeScroll(doc = globalThis.document) {
     const railBox = rail.getBoundingClientRect();
     const box = on.getBoundingClientRect();
     const shown = gliding.has(rail);
+    // A rail opening its first panel folds its labelled pills to icons, the
+    // buttons shrinking over a few frames; the highlight waits until the open
+    // button is an icon again (square) rather than fading in at a pill's
+    // width and then shrinking.
+    if (!shown && (rail.classList.contains('ui-rail--expanded') || box.width > box.height + 2)) return;
     // Appearing from nothing: jump into place, then fade in.
     rail.classList.toggle('ui-rail--glide-jump', !shown);
     rail.style.setProperty('--rail-glide-x', `${box.left - railBox.left - rail.clientLeft}px`);

src/ui/styles/rail-edge.css

@@ -31,10 +31,11 @@
   opacity: 0;
   pointer-events: none;
   transform: translate(var(--rail-glide-x, 0), var(--rail-glide-y, 0));
+  /* Only the position slides. The size follows at once: it changes only
+     when the rail changes shape (its labelled pills folding to icons as a
+     panel opens), and a size easing there reads as a stretch. */
   transition:
     transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
-    width 380ms cubic-bezier(0.22, 1, 0.36, 1),
-    height 380ms cubic-bezier(0.22, 1, 0.36, 1),
     border-radius var(--transition-fast),
     opacity 200ms ease;
 }

src/ui/styles/rail-split.css

@@ -148,14 +148,16 @@
 }
 
 /* The open item takes the accent colour; its highlight is the rail's shared
-   one, which slides to it. Without that highlight the button carries its own. */
+   one, which slides to it. The button carries no fill of its own: as a rail
+   folds its labelled pills to icons, a fill on the shrinking button would
+   read as the highlight stretching. */
 :is(.gev-panel-rail--left, .gev-panel-rail--right) .ui-rail__item.ui-rail__item--on {
   color: #00d4ff !important;
 }
 
 :is(.gev-panel-rail--left, .gev-panel-rail--right) .ui-rail:not(.ui-rail--glide) .ui-rail__item.ui-rail__item--on {
-  background: rgba(0, 212, 255, 0.15);
+  background: none;
-  border-color: rgba(0, 212, 255, 0.15);
+  border-color: transparent;
 }
 
 :is(.gev-panel-rail--left, .gev-panel-rail--right) .ui-rail::before {