fix(studio): keep the add-folder button on the machine row visible without hover

.github/workflows/studio.yml

@@ -149,6 +149,7 @@ jobs:
           node perf/branch-tooltip.mjs
           node perf/branch-menu.mjs
           node perf/image-preview.mjs
+          node perf/addfolder-rest.mjs
           node perf/search-toggle.mjs
           node perf/selfcheck.mjs branch-tooltip
 

desktop/frontend-next/perf/addfolder-rest.mjs

@@ -0,0 +1,49 @@
+// The "+" that opens a project folder sits on the machine row where a person
+// looks for it, and is there before the row is hovered. It was drawn only on
+// hover once, and two people on 2.39.0 reported that they could not choose a
+// folder at all. Opacity and hit-testing need a real browser.
+import { chromium } from "playwright";
+
+const BASE = process.env.PERF_URL ?? "http://localhost:4399/perf.html?pref=zh";
+const fails = [];
+const check = (name, ok, detail = "") => {
+  console.log(`${ok ? "  ok" : "FAIL"}  ${name}${detail ? "  — " + detail : ""}`);
+  if (!ok) fails.push(name);
+};
+
+const browser = await chromium.launch();
+try {
+  for (const theme of ["light", "dark"]) {
+    for (const width of [1280, 1600]) {
+      const page = await browser.newPage({ viewport: { width, height: 800 }, colorScheme: theme, reducedMotion: "reduce" });
+      page.on("pageerror", (e) => fails.push("page error: " + e.message));
+      await page.goto(BASE, { waitUntil: "networkidle" });
+      await page.waitForSelector(".machrow[data-here]");
+      await page.mouse.move(width - 2, 790);
+      await page.waitForTimeout(300);
+      const g = await page.evaluate(() => {
+        const row = document.querySelector(".machrow[data-here]");
+        const add = row?.querySelector('[data-action="workspace.add"]');
+        if (!add) return null;
+        const r = add.getBoundingClientRect();
+        const hit = document.elementFromPoint(r.x + r.width / 2, r.y + r.height / 2);
+        let seen = 1;
+        for (let el = add; el && el !== document.body; el = el.parentElement) seen *= Number(getComputedStyle(el).opacity);
+        return { opacity: seen, width: r.width, height: r.height, hits: hit === add || add.contains(hit), shown: row.matches(":hover") };
+      });
+      const where = `${theme} ${width}`;
+      check(`${where}: the machine row has the add-folder button`, g !== null);
+      if (!g) continue;
+      check(`${where}: it is visible without hovering the row`, !g.shown && g.opacity === 1 && g.width > 0 && g.height > 0, JSON.stringify(g));
+      check(`${where}: it takes the pointer`, g.hits);
+      await page.close();
+    }
+  }
+} finally {
+  await browser.close();
+}
+if (fails.length) {
+  console.log(`\n${fails.length} failed`);
+  process.exit(1);
+}
+console.log("\nall passed");

desktop/frontend-next/src/styles/treerows.css

@@ -25,3 +25,6 @@
 .studio-session-segments button { font-size: 12px; }
 .studio-session-segments b { font-size: 10px; }
 .rail .machrow { margin-right: 15px; }
+.machrow[data-here] { grid-template-columns: 10px 6px minmax(0, 1fr) auto auto; }
+.machrow[data-here] > .machpick { grid-area: 1 / 5; opacity: 1; width: 22px; height: 22px; border-radius: 6px; color: var(--text); box-shadow: inset 0 0 0 1px var(--hair); }
+.machrow[data-here] > .machpick:is(:hover, :active, [data-busy]):not(:disabled) { background: var(--raised); box-shadow: inset 0 0 0 1px var(--border); }

desktop/frontend-next/src/ui/LocalMachine.tsx

@@ -43,11 +43,6 @@ export function LocalMachine({ shut, count, adder, canSelect, selecting, onToggl
       <span className="rowswap">
         {count !== undefined && <span className="rowcount" data-words="">{t("{n} 个项目", { n: count })}</span>}
         <span className="rowbtns">
-          <button className="machpick" data-busy={adder.busy ? "" : undefined}
-            title={t("打开或新建项目…")} aria-label={t("打开或新建项目…")}
-            data-action="workspace.add" onClick={() => adder.add()}>
-            <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.7v8.6M3.7 8h8.6" /></svg>
-          </button>
           <button ref={more} className="wsmore" title={t("更多操作")}
             aria-label={t("这台机器的更多操作")} aria-haspopup="menu" aria-expanded={open}
             data-action="machine.menu" onClick={() => setOpen((v) => !v)}>
@@ -55,6 +50,11 @@ export function LocalMachine({ shut, count, adder, canSelect, selecting, onToggl
           </button>
         </span>
       </span>
+      <button className="machpick" data-busy={adder.busy ? "" : undefined}
+        title={t("打开或新建项目…")} aria-label={t("打开或新建项目…")}
+        data-action="workspace.add" onClick={() => adder.add()}>
+        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.7v8.6M3.7 8h8.6" /></svg>
+      </button>
       {open && createPortal(
         <div ref={menu} className="session-pop" role="menu" aria-label={t("这台机器的更多操作")}
           data-action-keydown="machine.menu" onKeyDown={workspaceMenuKeys}>

release-notes/studio/unreleased/13043.md

@@ -0,0 +1,2 @@
+- 侧栏「这台机器」行上打开或新建项目文件夹的“＋”按钮现在始终可见，不再要把鼠标移到行上才出现。关联 #13043、#13072。
+- The "+" that opens or creates a project folder on the sidebar's "This machine" row is now always visible instead of appearing only when the row is hovered. Refs #13043, #13072.