diff --git a/resources/web/dialog/SpeedDial/speeddial.js b/resources/web/dialog/SpeedDial/speeddial.js
index 6f251d35eb..9045262ea3 100644
--- a/resources/web/dialog/SpeedDial/speeddial.js
+++ b/resources/web/dialog/SpeedDial/speeddial.js
@@ -222,42 +222,29 @@ function shouldRenderActionList(query) {
return !!((query || "").trim());
}
-// Monogram code for a tile: title initial, escalated on collision by PREPENDING the source
-// initial (pi+ti, e.g. "GC"), then a 1-based ordinal - so same-titled items stay distinct.
-// why: ordinal is assigned by id, not by list order - list order is frecency-sorted and
-// reshuffles as usage changes, which would otherwise flip who's "1" and who's "2" across runs.
-function monogramFor(item, list, titleOf, sourceOf, idOf) {
- var items = list || [];
- var title = titleOf(item) || " ";
- var ti = title.charAt(0).toUpperCase();
- var sameTitle = items.filter(function (o) { return (titleOf(o) || " ").charAt(0).toUpperCase() === ti; });
- if (sameTitle.length <= 1)
- return ti;
- var source = sourceOf(item) || " ";
- var pi = source.charAt(0).toUpperCase();
- var sameSource = sameTitle.filter(function (o) { return (sourceOf(o) || " ").charAt(0).toUpperCase() === pi; });
- if (sameSource.length <= 1)
- return pi + ti;
- sameSource.sort(function (a, b) { return idOf(a) < idOf(b) ? -1 : idOf(a) > idOf(b) ? 1 : 0; });
- for (var i = 0; i < sameSource.length; i++)
- if (sameSource[i] === item || idOf(sameSource[i]) === idOf(item))
- return pi + ti + (i + 1);
- return pi + ti;
+// Tile pictogram base path. The page lives at resources/web/dialog/SpeedDial/, so this climbs to
+// resources/images/ where the same SVG icons the native GUI controls use are shipped.
+var ICON_BASE = "../../../images/";
+
+// SVG base name for an action's tile pictogram, or "" when it has none (commands without a GUI
+// icon, plugins). Pure so the node-vm test can exercise it.
+function actionIcon(a) {
+ return (a && a.icon) ? a.icon : "";
}
-// Action tile code - see monogramFor for the escalation ladder. Settings are actions now, so
-// they share this ladder (title initial, then source, then a stable ordinal).
-function tileCode(action, actions) {
- return monogramFor(action, actions,
- function (o) { return o.title; },
- function (o) { return o.source; },
- function (o) { return o.id; });
-}
-
-// Put an action's monogram into a tile (search row or favourites tile). A null action (a tab row
-// with no backing action) renders an empty tile.
-function fillTile(tile, a) {
- tile.textContent = a ? tileCode(a, ACTIONS) : "";
+// Put a pictogram into a tile (search row, favourites tile, or tab row). No icon leaves the tile
+// blank. `mono` marks the white tab-strip glyphs, which the CSS recolors to the shared gray.
+function fillTile(tile, a, mono) {
+ tile.textContent = "";
+ var icon = actionIcon(a);
+ if (!icon)
+ return;
+ var img = document.createElement("img");
+ img.className = mono ? "tile-icon tab-mono" : "tile-icon";
+ img.src = ICON_BASE + icon + ".svg";
+ img.alt = "";
+ img.setAttribute("aria-hidden", "true");
+ tile.appendChild(img);
}
// The active list for the main phase. A typed query ranks every action (commands/plugins/settings)
@@ -461,13 +448,6 @@ function currentList() {
return []; // percent - the input itself is the only field
}
-function hue(id) {
- var h = 0;
- for (var i = 0; i < id.length; i++)
- h = (h * 31 + id.charCodeAt(i)) >>> 0;
- return h % 360;
-}
-
// Build a
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.
@@ -528,7 +508,6 @@ function renderFav() {
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));
fillTile(tile, a);
var tileBadge = modeBadge(a, USER_MODE);
tile.title = a.title + (tileBadge ? " (" + tileBadge + ")" : "");
@@ -629,7 +608,6 @@ function renderActionRow(a, i) {
var tile = document.createElement("div");
tile.className = "tile";
- tile.style.setProperty("--h", hue(a.id));
fillTile(tile, a);
var left = document.createElement("div");
@@ -805,8 +783,7 @@ function renderTabRow(t, i) {
var tile = document.createElement("div");
tile.className = "tile";
- tile.style.setProperty("--h", hue(t.id));
- fillTile(tile, null);
+ fillTile(tile, t, true);
var left = document.createElement("div");
left.className = "row-left";
diff --git a/resources/web/dialog/SpeedDial/speeddial.test.js b/resources/web/dialog/SpeedDial/speeddial.test.js
index c8fd43add6..4fe72aba11 100644
--- a/resources/web/dialog/SpeedDial/speeddial.test.js
+++ b/resources/web/dialog/SpeedDial/speeddial.test.js
@@ -195,21 +195,15 @@ assert.deepEqual(ctx.visibleFavourites(["b", "a", "b"], [{ id: "a" }, { id: "b"
assert.deepEqual(ctx.visibleFavourites([], [{ id: "a" }]), [], "no pins renders an empty quick-bar");
assert.deepEqual(ctx.visibleFavourites(["a"], []), [], "a stale config with no actions renders nothing");
-// tileCode: monogram ladder - title initial, then title+source initials, then a stable ordinal
-// by id. The ordinal is keyed by id, not by list order, so frecency reshuffles never renumber tiles.
-const monoPool = [
- { id: "z", title: "Repair", source: "Mesh Tools" },
- { id: "a", title: "Repair", source: "Mesh Tools" },
- { id: "b", title: "Repair", source: "Filament" }
-];
-assert.equal(ctx.tileCode(monoPool[0], monoPool), "MR2",
- "same title+source resolves to source+title initials with an id-keyed ordinal (id z sorts after id a)");
-assert.equal(ctx.tileCode(monoPool[1], monoPool), "MR1",
- "the earlier id is numbered first among same-title+source tiles");
-assert.equal(ctx.tileCode(monoPool[2], monoPool), "FR",
- "same title but different source resolves to source+title initials");
-assert.equal(ctx.tileCode({ id: "x", title: "Slice", source: "OrcaSlicer" }, [{ id: "x", title: "Slice", source: "OrcaSlicer" }]),
- "S", "a unique title resolves to the bare title initial");
+// actionIcon: the SVG base name for a tile's pictogram, or "" when the action has none (blank tile).
+assert.equal(ctx.actionIcon({ id: "x", title: "Slice", icon: "media_play" }), "media_play",
+ "an action's icon base name is returned verbatim");
+assert.equal(ctx.actionIcon({ id: "x", title: "Go to tab...", icon: "" }), "",
+ "an empty icon renders a blank tile");
+assert.equal(ctx.actionIcon({ id: "x", title: "Plugin action" }), "",
+ "a missing icon field renders a blank tile");
+assert.equal(ctx.actionIcon(null), "",
+ "a null action (tab row) renders a blank tile");
// needsModeSwitch: a setting is gated only when its required mode outranks the user's current mode.
assert.equal(ctx.needsModeSwitch({ mode: "advanced" }, "simple"), true, "Advanced is gated in Simple mode");
diff --git a/resources/web/dialog/SpeedDial/style.css b/resources/web/dialog/SpeedDial/style.css
index d6bc8ff8bf..3aea0cf15a 100644
--- a/resources/web/dialog/SpeedDial/style.css
+++ b/resources/web/dialog/SpeedDial/style.css
@@ -60,9 +60,7 @@ body {
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 - icons/placeholder are 18px glyphs, and a bare