with the search-match ranges wrapped in
. Used for both the
+// title and the source eyebrow. Pure (only touches the document factory), so the node-vm test never
+// calls it and load-time stays DOM-free.
+function markedText(className, text, match) {
+ var node = document.createElement("div");
+ node.className = className; node.title = text;
+ if (!match || !match.length) {
+ node.textContent = text;
+ return node;
+ }
+ var last = 0;
+ for (var i = 0; i < match.length; i++) {
+ var range = match[i];
+ if (range[0] > last)
+ node.appendChild(document.createTextNode(text.slice(last, range[0])));
+ var m = document.createElement("mark");
+ m.textContent = text.slice(range[0], range[1]);
+ node.appendChild(m);
+ last = range[1];
+ }
+ if (last < text.length)
+ node.appendChild(document.createTextNode(text.slice(last)));
+ return node;
+}
+
+function starSvg(on) {
+ return '';
+}
+
+// ---- render ------------------------------------------------------------------
+function renderFav() {
+ favEl.innerHTML = "";
+ var favs = currentVisibleFavs();
+ favEl.hidden = favs.length === 0;
+ if (!favs.length && sel.zone === "fav")
+ sel = { zone: "list", i: 0 };
+ else if (sel.zone === "fav")
+ sel.i = Math.max(0, Math.min(sel.i, favs.length - 1));
+ updateFavEyebrow(favs);
+ favs.forEach(function (id, i) {
+ var a = byId(id);
+ var tile = document.createElement("button");
+ tile.className = "fav-tile" + (sel.zone === "fav" && sel.i === i ? " sel" : "");
+ tile.style.setProperty("--h", hue(id));
+ tile.textContent = tileCode(a, ACTIONS);
+ tile.title = a.title;
+ tile.setAttribute("aria-label", actionLabel(a, ACTIONS));
+ tile.onclick = function () { sel = { zone: "fav", i: i }; run(a); };
+ tile.oncontextmenu = function (ev) {
+ ev.preventDefault();
+ // why: selecting shows the eyebrow, which grows the launcher - resize so the popup
+ // isn't clipped (mirrors arrow-nav). requestResize no-ops when height is unchanged.
+ sel = { zone: "fav", i: i }; render({ resize: true });
+ showFavMenu(ev.clientX, ev.clientY, id);
+ };
+ favEl.appendChild(tile);
+ });
+}
+
+// ---- favourite context menu (right-click a tile) -----------------------------
+var favMenuEl = null;
+
+function hideFavMenu() { if (favMenuEl) favMenuEl.hidden = true; }
+
+function addFavMenuItem(label, enabled, fn) {
+ var item = document.createElement("button");
+ item.className = "ctx-item";
+ item.textContent = label;
+ item.disabled = !enabled;
+ item.onclick = function () { hideFavMenu(); fn(); };
+ favMenuEl.appendChild(item);
+}
+
+// One reused menu node (Move left/right + Unpin), positioned at the cursor and clamped
+// to the viewport. Native browser context menus can't add items, so we roll our own tiny one.
+function showFavMenu(x, y, id) {
+ if (!favMenuEl) {
+ favMenuEl = document.createElement("div");
+ favMenuEl.className = "ctx-menu";
+ document.body.appendChild(favMenuEl);
+ }
+ favMenuEl.innerHTML = "";
+ var favs = currentVisibleFavs();
+ var vi = favs.indexOf(id);
+ addFavMenuItem("Move left", vi > 0, function () { moveFav(id, -1); });
+ addFavMenuItem("Move right", vi >= 0 && vi < favs.length - 1, function () { moveFav(id, 1); });
+ addFavMenuItem("Unpin", true, function () { toggleFav(id); });
+ favMenuEl.hidden = false;
+ favMenuEl.style.left = Math.max(0, Math.min(x, window.innerWidth - favMenuEl.offsetWidth - 4)) + "px";
+ favMenuEl.style.top = Math.max(0, Math.min(y, window.innerHeight - favMenuEl.offsetHeight - 4)) + "px";
+}
+
+// Swap a favourite with its visible neighbour (dir -1/+1) and persist the new order. Swapping
+// by id inside FAVS (not the visible slice) keeps any hidden pins (no live action) in place.
+function moveFav(id, dir) {
+ var favs = currentVisibleFavs();
+ var vi = favs.indexOf(id);
+ var ni = vi + dir;
+ if (vi === -1 || ni < 0 || ni >= favs.length) return;
+ var a = FAVS.indexOf(id), b = FAVS.indexOf(favs[ni]);
+ if (a === -1 || b === -1) return;
+ FAVS[a] = favs[ni]; FAVS[b] = id;
+ SendMessage({ command: "reorder_favourites", ids: FAVS.slice() });
+ sel = { zone: "fav", i: ni };
+ render({ resize: true });
+}
+
+// Name of the selected favourite, shown above the bar; hidden unless a fav is selected.
+function updateFavEyebrow(favs) {
+ if (!eyeEl) return;
+ var a = sel.zone === "fav" && favs.length ? byId(favs[sel.i]) : null;
+ eyeEl.textContent = a ? a.title : "";
+ eyeEl.hidden = !a;
+}
+
+function renderList() {
+ var q = (query || "").trim();
+ var arr = filterActions(ACTIONS, query);
+ if (sel.zone === "list")
+ sel.i = Math.max(0, Math.min(sel.i, arr.length - 1));
+ listEl.innerHTML = "";
+ // why: search-first - the list stays blank until the user types; only a
+ // non-empty query with zero hits earns the "No actions match" message.
+ if (!shouldRenderActionList(query)) {
+ listEl.className = "dial-list empty";
+ if (countEl) countEl.hidden = true;
+ return;
+ }
+ listEl.className = "dial-list" + (!arr.length ? " empty" : "");
+ if (!arr.length) {
+ if (countEl) countEl.hidden = true;
+ var empty = document.createElement("div");
+ empty.className = "dial-empty";
+ empty.textContent = "No actions match (Total: " + ACTIONS.length + ")";
+ listEl.appendChild(empty);
+ return;
+ }
+ if (countEl) {
+ countEl.hidden = false;
+ countEl.textContent = resultCountText(ACTIONS.length, arr.length, query);
+ }
+ arr.forEach(function (a, i) {
+ var on = FAVS.indexOf(a.id) !== -1;
+ var row = document.createElement("div");
+ row.className = "row" + (sel.zone === "list" && sel.i === i ? " sel" : "");
+ row.setAttribute("aria-label", actionLabel(a, ACTIONS));
+
+ var tile = document.createElement("div");
+ tile.className = "tile";
+ tile.style.setProperty("--h", hue(a.id));
+ tile.textContent = tileCode(a, ACTIONS);
+
+ var left = document.createElement("div");
+ left.className = "row-left";
+ var mi = matchIndex[a.id];
+ var sourceEl = markedText("row-eyebrow", a.source, mi ? mi.source : null);
+ var line = document.createElement("div");
+ line.className = "row-line";
+ var name = markedText("row-name", a.title, mi ? mi.title : null);
+ line.appendChild(name);
+ if (a.shortcut) {
+ var sc = document.createElement("div");
+ sc.className = "row-sc";
+ a.shortcut.split("+").forEach(function (k) {
+ var key = document.createElement("kbd");
+ key.textContent = k;
+ sc.appendChild(key);
+ });
+ line.appendChild(sc);
+ }
+ left.appendChild(sourceEl);
+ left.appendChild(line);
+ row.appendChild(tile);
+ row.appendChild(left);
+
+ var star = document.createElement("button");
+ star.className = "star" + (on ? " on" : "");
+ star.innerHTML = starSvg(on);
+ star.title = on ? "Unpin from favourites" : "Pin to favourites";
+ star.onclick = function (ev) { ev.stopPropagation(); toggleFav(a.id); };
+ // why: two quick fav/unfav clicks must not dblclick-run the row
+ star.ondblclick = function (ev) { ev.stopPropagation(); };
+ row.appendChild(star);
+
+ row.onclick = function () { sel = { zone: "list", i: i }; render(); };
+ row.ondblclick = function () { sel = { zone: "list", i: i }; run(a); };
+ listEl.appendChild(row);
+ });
+}
+
+function render(opts) {
+ renderFav();
+ renderList();
+ scrollSelectedIntoView();
+ if (opts && opts.resetScroll)
+ resetScrollPositions(listEl, document);
+ if (opts && opts.resize)
+ requestResize();
+}
+
+// Keep the selected item in view as arrows move it: the list scrolls vertically, the fav bar
+// horizontally (arrow nav "pushes" the scrollable fav row to follow the selection).
+function scrollSelectedIntoView() {
+ var el = null;
+ if (sel.zone === "list" && listEl)
+ el = listEl.querySelector(".row.sel");
+ else if (sel.zone === "fav" && favEl)
+ el = favEl.querySelector(".fav-tile.sel");
+ if (el && el.scrollIntoView)
+ el.scrollIntoView({ block: "nearest", inline: "nearest" });
+}
+
+function requestResize() {
+ if (!document.body)
+ return;
+ setTimeout(function () {
+ var launcher = document.querySelector(".launcher");
+ if (!launcher)
+ return;
+ var height = Math.ceil(launcher.getBoundingClientRect().height);
+ if (!height || height === lastResizeHeight)
+ return;
+ lastResizeHeight = height;
+ SendMessage({ command: "resize", height: height });
+ }, 0);
+}
+
+// ---- actions -----------------------------------------------------------------
+function toggleFav(id) {
+ var k = FAVS.indexOf(id);
+ var newState = k === -1;
+ if (newState) FAVS.push(id); else FAVS.splice(k, 1);
+ SendMessage({ command: "toggle_favourite", id: id, fav: newState });
+ render({ resize: true });
+}
+
+// Fire the action; C++ owns the run-confirm (native dialog) + suppression, then closes the popup + toasts.
+function run(a) {
+ if (!a) return;
+ SendMessage({ command: "run_action", id: a.id, title: a.title });
+}
+
+function runSelected() {
+ var id = selectedActionId(sel, filterActions(ACTIONS, query), currentVisibleFavs(), query);
+ if (id) run(byId(id));
+}
+
+function focusInput() { setTimeout(function () { qEl.focus(); }, 0); }
+
+// ---- init --------------------------------------------------------------------
+function OnInit() {
+ qEl = $("q"); listEl = $("list"); favEl = $("favBar"); clearEl = $("clear"); eyeEl = $("favEyebrow"); countEl = $("count");
+ syncClearButton();
+
+ $("clear").onclick = function () {
+ query = ""; qEl.value = ""; sel = { zone: "list", i: 0 }; render({ resize: true, resetScroll: true }); qEl.focus();
+ syncClearButton();
+ };
+ qEl.addEventListener("input", function () {
+ query = qEl.value; sel = { zone: "list", i: 0 }; syncClearButton(); render({ resize: true, resetScroll: true });
+ });
+
+ // why: dismiss the fav context menu on any click/scroll away from it (capture scroll to catch nested scrollers).
+ document.addEventListener("click", hideFavMenu);
+ document.addEventListener("scroll", hideFavMenu, true);
+
+ document.addEventListener("keydown", function (e) {
+ if (favMenuEl && !favMenuEl.hidden && e.key === "Escape") { e.preventDefault(); hideFavMenu(); return; }
+ var arr = filterActions(ACTIONS, query);
+ var favs = currentVisibleFavs();
+ // why: Up/Down always navigate; Left/Right only navigate the fav bar. In the list zone,
+ // let Left/Right fall through so they move the caret in the focused search field.
+ var lr = e.key === "ArrowLeft" || e.key === "ArrowRight";
+ if (e.key === "ArrowDown" || e.key === "ArrowUp" || (lr && sel.zone === "fav")) {
+ e.preventDefault();
+ sel = nextSel(sel, e.key, arr.length, favs.length);
+ // why: entering/leaving the fav zone toggles the eyebrow line, changing launcher height;
+ // resize so the popup grows/shrinks instead of clipping. requestResize no-ops when unchanged.
+ render({ resize: true });
+ } else if (e.key === "Enter") {
+ e.preventDefault();
+ runSelected();
+ } else if (e.key === "Escape") {
+ e.preventDefault();
+ if (query) { query = ""; qEl.value = ""; sel = { zone: "list", i: 0 }; syncClearButton(); render({ resize: true, resetScroll: true }); }
+ else SendMessage({ command: "close_page" });
+ }
+ });
+
+ SendMessage({ command: "request_actions" });
+}
diff --git a/resources/web/dialog/SpeedDial/speeddial.test.js b/resources/web/dialog/SpeedDial/speeddial.test.js
new file mode 100644
index 0000000000..05c1e69c23
--- /dev/null
+++ b/resources/web/dialog/SpeedDial/speeddial.test.js
@@ -0,0 +1,45 @@
+// Regression tests for the DOM-free Speed Dial helpers.
+// Run: node resources/web/dialog/SpeedDial/speeddial.test.js
+const assert = require("assert");
+const fs = require("fs");
+const vm = require("vm");
+
+const ctx = {};
+ctx.window = ctx;
+vm.createContext(ctx);
+vm.runInContext(fs.readFileSync(__dirname + "/../../js/fuzzy-search.js", "utf8"), ctx);
+vm.runInContext(fs.readFileSync(__dirname + "/speeddial.js", "utf8"), ctx);
+
+assert.equal(typeof ctx.parseId, "undefined", "opaque action ids must never be parsed");
+
+const duplicateActions = [
+ { id: "0123456789abcdef", title: "Repair", source: "Mesh Tools" },
+ { id: "fedcba9876543210", title: "Repair", source: "Mesh Tools" }
+];
+assert.equal(
+ ctx.actionLabel(duplicateActions[0], duplicateActions),
+ "Repair from Mesh Tools (0123456789abcdef)",
+ "duplicate labels should use the opaque id without interpreting its contents"
+);
+
+assert.equal(ctx.shouldRenderActionList(""), false, "an empty search keeps the action list hidden");
+assert.equal(ctx.shouldRenderActionList(" "), false, "whitespace-only search keeps the action list hidden");
+assert.equal(ctx.shouldRenderActionList("r"), true, "typing starts rendering matching actions");
+
+assert.equal(
+ ctx.selectedActionId({ zone: "list", i: 0 }, duplicateActions, [], ""),
+ null,
+ "Enter with an empty query must not resolve to an action the blank list never showed"
+);
+assert.equal(
+ ctx.selectedActionId({ zone: "list", i: 0 }, duplicateActions, [], "rep"),
+ "0123456789abcdef",
+ "a typed query resolves the list selection"
+);
+assert.equal(
+ ctx.selectedActionId({ zone: "fav", i: 0 }, duplicateActions, ["fedcba9876543210"], ""),
+ "fedcba9876543210",
+ "favourites stay runnable with an empty query - the fav bar is always visible"
+);
+
+console.log("ok");
diff --git a/resources/web/dialog/SpeedDial/style.css b/resources/web/dialog/SpeedDial/style.css
new file mode 100644
index 0000000000..72de412f66
--- /dev/null
+++ b/resources/web/dialog/SpeedDial/style.css
@@ -0,0 +1,225 @@
+* { box-sizing: border-box; }
+html, body { margin: 0; }
+body {
+ font-family: var(--orca-font, "Segoe UI", sans-serif);
+ font-size: 13px;
+ color: var(--text, var(--orca-fg, #1b1c1e));
+ background: var(--bg, var(--orca-bg, #fff));
+ overflow: hidden;
+ user-select: none;
+}
+.launcher {
+ display: flex;
+ flex-direction: column;
+ background: var(--panel, var(--orca-bg, #fff));
+ border: 1px solid var(--border, var(--orca-border, #ddd));
+ overflow: hidden;
+ /* why: no height cap here - the launcher reports its true natural height to C++, which
+ sizes the popup to match (HTML is source of truth). The list's own max-height is what
+ bounds growth; capping the launcher would make the measurement circular. */
+}
+.fav-bar {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 9px 10px;
+ border-bottom: 1px solid var(--border, var(--orca-border, #ddd));
+ overflow-x: auto; /* scroll horizontally once favourites overflow the row */
+ scrollbar-width: thin;
+ /* why: keep scrollIntoView (arrow-nav) from scrolling the first/last tile flush to the edge,
+ which would clip its selected outline. Matches the 10px horizontal padding. */
+ scroll-padding-inline: 10px;
+}
+.fav-bar[hidden] { display: none; }
+/* Name of the selected favourite, above the bar; left-aligned to the tiles' 10px inset. */
+.fav-eyebrow { flex: 0 0 auto; padding: 8px 10px 0; }
+.fav-tile {
+ flex: 0 0 auto; /* keep tiles full-size; don't shrink to fit - scroll instead */
+ width: 30px;
+ height: 30px;
+ border: 0;
+ border-radius: 8px;
+ cursor: pointer;
+ color: hsl(var(--h) var(--speed-tile-text-s, 72%) var(--speed-tile-text-l, 38%));
+ font-weight: 700;
+ /* why: mirror .tile centering - tileCode can be 2-3 chars (e.g. "EA1") on collision, and a
+ bare