gui: an agent row's grip is there, faint, without the pointer on it, so Hide is found without hovering (#537: 隐藏 agent 的入口再次不可发现：#479 修复的常显把手在 v0.1.619 被改回悬浮才显示)

#479 (7de2b62, v0.1.610) gave every row in the Agents list a faint grip in its left margin, always there, saying the row can be taken hold of; its click opens the row's menu (Move up, Move down, Hide). ec10d3b (v0.1.619) answered "logo hover 的排序 icon 可以删掉" by taking away the logo's second grip on hover, and with it drew the margin grip only under the pointer, so with the pointer away nothing on the page said a row could be hidden: the way in was clicking a logo that doesn't look clickable, or right-clicking (and on touch, where there is no hover, never seen). The margin grip is drawn again with the pointer away, in --faint, and turns --muted for the row under the pointer, the one dragged, or a handle with its menu open or the keyboard on it (that rule kept on its own, for Safari 15); the logo stays the logo, with no grip of its own, as ec10d3b left it. Dragging and clicking the grip do what they did. The Providers list's hover-only grip is unchanged.

agent-grip now checks every row's grip is drawn with the pointer away, all alike, the hovered row's alone darker, back to faint once the pointer leaves, and the logo has no grip; it fails without the change ("alpha's grip can't be seen with the pointer away", opacity 0). agent-grip passes in WebKit (en/zh, window/panel; Chromium can't start here without its ICU data); click-scroll and agent-layout pass in WebKit, old-webkit's one failure (app.css:~388, the Providers grip's :focus-visible) is on main already. go test -tags nogui ./internal/gui/... passes.

internal/gui/assets/app.css

@@ -338,16 +338,17 @@ body.window .ag-handle { width: 28px; height: 28px; }
 .ag-handle:hover, .ag-handle.open { background: var(--pill); }
 .ag-handle:focus-visible { background: var(--pill); outline: 1.5px solid var(--fg-2); outline-offset: 0; }
 .agent-fold .ag-handle { cursor: default; }
-/* a row in the list carries a grip in its left margin (#479), drawn only
-   while the row is under the pointer, dragged, or its handle has the
-   keyboard or its menu open: always there, it was noise down every row. It
-   is the handle's own, so a drag or a click on it does what the logo does,
-   and it takes no room from the row */
+/* a row in the list carries a faint grip in its left margin (#479, #537),
+   always there, so that a row can be taken hold of, and hidden from its
+   menu, is seen without hovering or right-clicking; it darkens while the row
+   is under the pointer, dragged, or its handle has the keyboard or its menu
+   open. It is the handle's own, so a drag or a click on it does what the
+   logo does, and it takes no room from the row; the logo stays the logo. */
 #agents > .row .ag-handle { position: relative; }
-#agents > .row .ag-handle::before { content: ""; position: absolute; left: -6px; top: 50%; width: 5px; height: 11px; margin-top: -5.5px; background: radial-gradient(circle, var(--muted) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; opacity: 0; transition: opacity .15s; }
+#agents > .row .ag-handle::before { content: ""; position: absolute; left: -6px; top: 50%; width: 5px; height: 11px; margin-top: -5.5px; background: radial-gradient(circle, var(--grip-dot) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; --grip-dot: var(--faint); }
 body.panel #agents > .row .ag-handle::before { left: -9px; }
-#agents > .row:is(:hover, .dragging) .ag-handle::before, #agents > .row .ag-handle.open::before { opacity: 1; }
-#agents > .row .ag-handle:focus-visible::before { opacity: 1; }
+#agents > .row:is(:hover, .dragging) .ag-handle::before, #agents > .row .ag-handle.open::before { --grip-dot: var(--muted); }
+#agents > .row .ag-handle:focus-visible::before { --grip-dot: var(--muted); }
 /* one hidden by hand reads as put away, with its way back beside its name */
 .agent-fold .row.put-away .ag-handle > .ic, .agent-fold .row.put-away .name { opacity: .6; }
 .agent-fold .row.put-away .who { display: flex; align-items: center; gap: 8px; }

internal/gui/tests/README.md

@@ -1336,9 +1336,10 @@ node --test internal/gui/tests/seg-contrast.test.cjs
 ```
 
 `agent-grip.test.cjs` checks that hiding an agent can be found without a
-right-click (#479): a row in the Agents list under the pointer draws a grip
-in its left margin, beside its logo, and no row does with the pointer away;
-the logo stays the logo on hover (no second grip over it); dragging the grip
+right-click or hovering (#479, #537): every row in the Agents list draws a
+faint grip in its left margin, beside its logo, with the pointer away, and the
+row under the pointer draws it darker; the logo stays the logo on hover (no
+second grip over it); dragging the grip
 moves the row, and clicking it opens the row's menu, whose Hide puts the row in the fold
 at the foot of the list. Opened, the fold's Show button is there without the
 pointer on its row, and brings the row back; no click moves the page. It runs

internal/gui/tests/agent-grip.test.cjs

@@ -3,11 +3,13 @@
 // Hide) showed nothing until the pointer was on it, so hiding an agent was
 // found only by right-clicking, and a hidden one's way back, the Show button
 // in the fold at the foot of the list, came up only with the pointer on its
-// row. Every row in the list then carried a faint grip in its left margin,
-// always there; down every row that was noise, and the logo also turned into
-// a second grip on hover. Now the margin grip is drawn only with the pointer
-// on its row, and the logo stays the logo: the grip is the handle's own, so
-// dragging it moves the row and clicking it opens the menu. Hidden from that menu, the row goes into the fold, whose Show button
+// row. Every row in the list then carried a faint grip in its left margin;
+// v0.1.619 took the logo's second grip on hover away and drew the margin grip
+// only under the pointer, which hid the way to Hide again (#537). Now the
+// margin grip is there, faint, with the pointer away, darker on the row under
+// the pointer, and the logo stays the logo: the grip is the handle's own, so
+// dragging it moves the row and clicking it opens the menu. Hidden from that
+// menu, the row goes into the fold, whose Show button
 // is there without the pointer on it and brings the row back. No click moves
 // the page. In the window and the tray panel, Chromium and WebKit, English
 // and Chinese; no backend, the API is faked here.
@@ -77,28 +79,29 @@ for (const engine of (process.env.BROWSER ? [process.env.BROWSER] : ["chromium",
         await page.locator("#agents > .row.agent").nth(2).waitFor();
         await page.mouse.move(1, 1);
 
-        // with the pointer away no row's grip is drawn; it is there, in the
-        // row's margin, for the row under the pointer, and the logo stays as
-        // it was
-        const shown = (page) => page.locator("#agents > .row.agent").evaluateAll((rs) => rs.map((r) => getComputedStyle(r.querySelector(".ag-handle"), "::before").opacity));
-        await page.waitForFunction(() => [...document.querySelectorAll("#agents > .row.agent .ag-handle")].every((h) => getComputedStyle(h, "::before").opacity === "0"));
+        // with the pointer away every row's grip is drawn, faint, in its
+        // margin; the row under the pointer has it darker, and the logo stays
+        // as it was
         let g = await grips(page);
         for (const x of g) {
-          assert.notEqual(x.content, "none", `${x.id} has no grip`);
+          assert.notEqual(x.content, "none", `${x.id} has no grip with the pointer away`);
           assert.match(x.image, /gradient/, `${x.id}'s grip draws nothing`);
-          assert(x.visibility === "visible" && x.w >= 4 && x.ht >= 8, `${x.id}'s grip can't be seen: ${JSON.stringify(x)}`);
+          assert(x.opacity === 1 && x.visibility === "visible" && x.w >= 4 && x.ht >= 8, `${x.id}'s grip can't be seen with the pointer away: ${JSON.stringify(x)}`);
           assert(x.inRow, `${x.id}'s grip is off its row or over its logo: ${JSON.stringify(x)}`);
         }
+        const faint = g[0].image;
+        assert(g.every((x) => x.image === faint), "the grips differ with the pointer away");
         assert.equal(await page.locator("#agents .ag-handle .grip").count(), 0, "the logo still has a grip of its own");
         const row1 = page.locator("#agents > .row.agent").nth(1);
         await row1.locator(".name").hover();
-        await page.waitForFunction(() => {
-          const rs = [...document.querySelectorAll("#agents > .row.agent .ag-handle")].map((h) => getComputedStyle(h, "::before").opacity);
-          return rs[1] === "1" && rs.every((o, i) => i === 1 || o === "0");
-        });
+        await page.waitForFunction((faint) => {
+          const rs = [...document.querySelectorAll("#agents > .row.agent .ag-handle")].map((h) => getComputedStyle(h, "::before").backgroundImage);
+          return rs[1] !== faint && rs.every((o, i) => i === 1 || o === faint);
+        }, faint);
         await row1.locator(".ag-handle").hover();
         assert.equal(await row1.locator(".ag-handle > .ic").evaluate((i) => getComputedStyle(i).opacity), "1", "the logo changes on hover");
-        assert.equal((await shown(page))[1], "1");
+        await page.mouse.move(1, 1);
+        await page.waitForFunction((faint) => [...document.querySelectorAll("#agents > .row.agent .ag-handle")].every((h) => getComputedStyle(h, "::before").backgroundImage === faint), faint);
 
         // dragging by the grip moves the row
         const before = await order(page);