gui: an agent row's grip is drawn only with the pointer on the row, as ec10d3b had it (the owner: 这个为什么又加回来了啊？不是说 hover 的时候才出现吗？一直出现太丑了) — 71ba715 (#537) drew the grip in every row's left margin with the pointer away, so the Agents list showed a column of dots beside its logos at all times. The grip is again drawn only on the row under the pointer, the one dragged, or a handle with its menu open or the keyboard on it, as the Providers list's is; dragging and clicking it do what they did, and Hide stays in the handle's menu and the row's right-click menu. agent-grip now checks no row's grip is drawn with the pointer away, the hovered row's alone is, and it goes when the pointer leaves; it fails without the change ("alpha's grip is drawn with the pointer away") and passes with it in WebKit (en/zh, window/panel). click-scroll and agent-layout pass in WebKit.

internal/gui/assets/app.css

@@ -338,17 +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 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. */
+/* a row in the list carries a grip in its left margin, drawn only while the
+   row is under the pointer, dragged, or its handle has the keyboard or its
+   menu open: always there it is clutter (the owner: 一直出现太丑了), as on
+   the Providers list. 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. Hide is in the handle's menu and the row's right-click menu. */
 #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(--grip-dot) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; --grip-dot: var(--faint); }
+#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; }
 body.panel #agents > .row .ag-handle::before { left: -9px; }
-#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); }
+#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; }
 /* 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

@@ -1445,11 +1445,11 @@ WebKit, in English and Chinese:
 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 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
+`agent-grip.test.cjs` checks an agent row's grip: with the pointer away no
+row in the Agents list draws it (always there it was clutter, the owner:
+一直出现太丑了), the row under the pointer draws it in its left margin, beside
+its logo, and it goes again when the pointer leaves; 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,12 +3,11 @@
 // 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;
-// 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
+// row. A grip in each row's left margin, always there (#479, #537), was
+// clutter (the owner: 一直出现太丑了), so it is drawn only on the row under
+// the pointer, as on the Providers list, 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
@@ -79,29 +78,30 @@ 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 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
+        // with the pointer away no row's grip is drawn (always there it is
+        // clutter, the owner: 一直出现太丑了); the row under the pointer has
+        // it, 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 with the pointer away`);
+          assert.notEqual(x.content, "none", `${x.id} has no grip`);
           assert.match(x.image, /gradient/, `${x.id}'s grip draws nothing`);
-          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.w >= 4 && x.ht >= 8, `${x.id}'s grip is too small: ${JSON.stringify(x)}`);
+          assert.equal(x.opacity, 0, `${x.id}'s grip is drawn with the pointer away`);
           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 shown = () => page.evaluate(() => [...document.querySelectorAll("#agents > .row.agent .ag-handle")].map((h) => getComputedStyle(h, "::before").opacity));
         const row1 = page.locator("#agents > .row.agent").nth(1);
         await row1.locator(".name").hover();
-        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 page.waitForFunction(() => {
+          const os = [...document.querySelectorAll("#agents > .row.agent .ag-handle")].map((h) => getComputedStyle(h, "::before").opacity);
+          return os[1] === "1" && os.every((o, i) => i === 1 || o === "0");
+        });
         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");
         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);
+        await page.waitForFunction(() => [...document.querySelectorAll("#agents > .row.agent .ag-handle")].every((h) => getComputedStyle(h, "::before").opacity === "0"));
+        assert.deepEqual(await shown(), g.map(() => "0"));
 
         // dragging by the grip moves the row
         const before = await order(page);