v1.8.12 — Storage view: kill the per-keystroke and per-hover flash on search-active racks

Author: BenGlut

CHANGELOG.md

@@ -5,6 +5,14 @@ Versions follow [Semantic Versioning](https://semver.org/).
 
 ---
 
+## v1.8.12 — 2026-05-31
+
+### Fixed
+
+- **Storage view no longer flashes on every search keystroke or rack hover.** Typing in the search bar with the Storage view open used to flash the whole grid at every letter, and sweeping the mouse between racks that both contained search matches produced a visible flash too — most noticeably on large inventories like a friend's read-only view. Both issues are now gone. The root causes were CSS animations on properties that force a per-frame GPU repaint (the orange "match" ring pulse), a hover-triggered reflow that decaled every match-slot by 14 px (the column-number coords row used to expand from 0 to 14 px on rack hover), and a full DOM rebuild of all rack slots on every keystroke. Side effect: each rack reserves a small space above the first shelf for the column-number coords in permanence (they still only become visible when you hover the rack), so racks are ever-so-slightly taller than before.
+
+---
+
 ## v1.8.11 — 2026-05-31
 
 ### Added

WORKLOG.md

@@ -1,17 +1,17 @@
-# Worklog — v1.8.11 (in progress)
+# Worklog — v1.8.12 (in progress)
 
 ## Added
 
 ## Changed
-- Storage view: the in-stats "+ New Rack" tile is gone — the header **+ Add Rack** button (same one that becomes "Add Product" in inventory views and "Add Device" in printer views) is now the primary "add a rack" entry point. The header button label and click handler dispatch by current view mode (inventory / printer / storage). The empty-state CTA when the user has zero racks still works — `renderer/inventory.js` (`setViewMode`, `btnAddProduct` handler, `renderRackView`), `renderer/locales/*.json` (new `addRackBtn` key)
-- Storage view "not stored" side panel: contextual **+ Add Rack** CTA with a short hint, shown only when the active unranked spool count exceeds the number of free slots (i.e. the user genuinely needs more rack capacity). Orange accent to echo the "not stored" pill in the stats bar — `renderer/inventory.js` (`renderRackView`, click handler), `renderer/css/30-racks.css` (`.rp-side-add-rack*`), `renderer/locales/*.json` (new `rackNoSpaceHint` key)
 
 ## Fixed
-- Storage view: rack stats no longer count "ghost" spools — both the global header (`filled / total slots`, `free`) and the per-rack header (`filled/total`) used to include any spool that still had a `rackId` set, even when the rack had been deleted or the spool's `rackLevel`/`rackPos` were out of bounds. That allowed the filled count to exceed total capacity (e.g. `130/117 slots`, `0 free`) and per-rack numbers to be larger than what was actually rendered. A shared `_isInValidSlot()` helper now requires the rackId to match a current rack and the level/position to fall inside its grid, so stats match what's visible in the slots — `renderer/inventory.js` (`renderRackView`)
-- Deleting a rack now fully unassigns the spools that were inside it (both modern `rack: null` and the legacy flat `rack_id` / `level` / `position` fields are cleared via `FV.delete()`). The old code only nulled the modern field, leaving the legacy ones intact — `normalizeRow` then resolved `rackId` via the flat fallback and the spool stayed ghost-assigned to the deleted rack forever. Pre-existing orphan references are also auto-cleaned on first opening the Storage view (one-shot batch, guarded against concurrent fires) — `renderer/inventory.js` (`deleteRack`, `_cleanupOrphanRackRefs`)
-- Storage view "not stored" panel now also surfaces spools whose `rackId` points to a rack that no longer exists (orphans). Until the background cleanup nulls their stale rackId, they're shown as unranked so the user can immediately see and re-assign them — `renderer/inventory.js` (`getUnrackedSpools`)
+- Storage view: stop the GPU `tile_manager.cc:997 WARNING: tile memory limits exceeded` flood and the visual flash that happened on every search keystroke and when hover-sweeping between racks containing search matches. Five coupled changes:
+  - `renderer/css/30-racks.css` — the search-match pulse on `.rp-slot--match` no longer animates `box-shadow` (per-frame GPU repaint that saturated tile memory once ~15+ matches were on screen). It now animates `transform: scale` with `will-change: transform`, keeping the shadow static at the midpoint of the previous keyframe so visibility is preserved.
+  - `renderer/css/30-racks.css` — `.rp-row--header` (the column-number row) now reserves its 14px height permanently instead of expanding from 0 → 14px on rack-hover. The hover-driven height change forced a reflow that re-rasterized every match-slot's compositor layer, producing a visible flash between racks. Coords are now revealed via opacity-only on `.rp-col-label`.
+  - `renderer/css/30-racks.css` — on hover, `.rp-slot--match` cancels the pulse and snaps back to `scale(1)`. The parent `.rp-slot--filled:hover` rule applies `transform: translateY(-1px)`, which overrode the scale animation and produced a visible flash whenever the mouse swept across multiple animating match-slots in quick succession.
+  - `renderer/css/30-racks.css` — `.rp-slot--filled.rp-dim` no longer transitions `filter`. Animating `filter: grayscale` on 100-300 slots whenever the dim set churned (every search keystroke, every filter change) forced a per-frame repaint of the whole grid. Opacity transition stays (compositor-friendly).
+  - `renderer/inventory.js` — search/clear listeners (`#searchInv`) no longer call the full `renderInventory()` → `renderRackView()` rebuild in rack view. They now short-circuit to `applyRackSearchDim()` which just toggles `rp-dim`/`rp-slot--match` classes on existing slots. Stats (racks / filled / locked) don't depend on the search, so the class toggle is sufficient.
 
 ## Removed
 
 ## i18n
-- Added: `addRackBtn`, `rackNoSpaceHint`, `camWallEmptyTitle`, `camWallEmptySub` — 9 locales. The two cam-wall keys were referenced in code but missing from all locales, so the cam view's empty state was showing the raw key names ("camWallEmptyTitle" / "camWallEmptySub") instead of localized text.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tigertag-inventory",
-  "version": "1.8.11",
+  "version": "1.8.12",
   "description": "Tiger Studio Manager — desktop app",
   "main": "main.js",
   "engines": {

renderer/css/30-racks.css

@@ -580,16 +580,19 @@
     text-transform: uppercase;
     transition: opacity .18s;
   }
-  /* Column number header — sits above the first shelf, no border, no padding */
+  /* Column number header — sits above the first shelf, no border, no padding.
+     Height is reserved permanently (was height: 0 / 14px on hover): the height
+     transition forced a reflow of every slot on rack-hover, which re-rasterized
+     the compositor layers of `.rp-slot--match` slots (transform: scale animation)
+     and produced a visible flash when sweeping between racks that both contained
+     matches. Reveal is now opacity-only on `.rp-col-label` (compositor-only). */
   .rp-row--header {
     padding-bottom: 4px;
     border-bottom: none;
-    /* Collapse the row when coordinates are hidden so the rack is more compact */
-    height: 0;
+    height: 14px;
     overflow: hidden;
     padding-top: 0;
     margin-bottom: 0;
-    transition: height .18s, padding-top .18s;
   }
   .rp-row--header .rp-col-label {
     font-size: 10px; font-weight: 700; color: var(--muted);
@@ -604,11 +607,6 @@
   body.is-dragging-spool .rp-row-label {
     opacity: .65;
   }
-  .rp-rack:hover .rp-row--header,
-  body.is-dragging-spool .rp-row--header {
-    height: 14px;
-    padding-top: 0;
-  }
   .rp-rack:hover .rp-row--header .rp-col-label,
   body.is-dragging-spool .rp-row--header .rp-col-label {
     opacity: .55;
@@ -746,35 +744,51 @@
   /* Search dim — applied to filled rack slots that don't match the query.
      The slot stays in place but loses color saturation and most opacity, so
      the matching slots visually pop. */
+  /* No `transition: filter` — animating filter:grayscale per-frame on 100-300
+     slots when the search churns the dim set on every keystroke flashed the
+     entire grid. opacity is compositor-friendly so its transition stays. */
   .rp-slot--filled.rp-dim {
     opacity: .18;
     filter: grayscale(.85);
-    transition: opacity .15s, filter .15s;
+    transition: opacity .15s;
   }
   .rp-slot--filled.rp-dim:hover { opacity: .4; }   /* hint that it's still there */
 
   /* Search-match indicator on the slot CONTAINER — makes the slot stand
      out via a border+glow on the box itself, NOT via the inner color fill.
      This is critical for depleted spools (.rp-fill height ~ 0): the slot's
      box still glows in orange so the user sees it when they search. */
+  /* Static shadow uses the midpoint of the old keyframe so visibility is
+     preserved. Pulse is driven by `transform: scale` (compositor-only) instead
+     of animating box-shadow — animating shadow forced a GPU repaint on every
+     frame, saturating Chromium's tile memory (`tile_manager.cc:997 WARNING:
+     tile memory limits exceeded`) when ~15+ matches were on screen. */
   .rp-slot--filled.rp-slot--match {
     border-color: var(--primary) !important;
     box-shadow:
-      0 0 0 2px rgba(249,115,22,.55),
-      0 0 8px rgba(249,115,22,.55),
+      0 0 0 2.5px rgba(249,115,22,.7),
+      0 0 11px rgba(249,115,22,.7),
       inset 0 0 0 1px rgba(255,255,255,.28);
     z-index: 2;
     animation: rp-slot-match-pulse 1.6s ease-in-out infinite;
+    /* Pre-promote to a compositor layer so the rack-hover reveal (which expands
+       `.rp-row--header` from 0 → 14px and shifts every slot below it) doesn't
+       re-rasterize the scaled match-slots — that re-rasterization was visible
+       as a brief flash and also re-triggered `tile_manager` warnings. */
+    will-change: transform;
   }
   @keyframes rp-slot-match-pulse {
-    0%, 100% { box-shadow:
-      0 0 0 2px rgba(249,115,22,.55),
-      0 0 8px rgba(249,115,22,.55),
-      inset 0 0 0 1px rgba(255,255,255,.28); }
-    50%      { box-shadow:
-      0 0 0 3px rgba(249,115,22,.85),
-      0 0 14px rgba(249,115,22,.85),
-      inset 0 0 0 1px rgba(255,255,255,.28); }
+    0%, 100% { transform: scale(1); }
+    50%      { transform: scale(1.06); }
+  }
+  /* Hover on a match slot: pause the pulse and snap back to scale(1) — the
+     parent `.rp-slot--filled:hover` rule applies `transform: translateY(-1px)`,
+     which would override the animation's `transform: scale` and cause a visible
+     flash whenever the mouse swept across multiple animating match-slots. The
+     permanent orange ring already provides ample hover affordance here. */
+  .rp-slot--filled.rp-slot--match:hover {
+    animation: none;
+    transform: scale(1);
   }
 
   /* Locked slot — solid amber tint + small lock badge top-right.

renderer/inventory.js

@@ -4995,11 +4995,20 @@ import { elgFanStep } from './printers/elegoo/widget_control.js';
     });
   }
 
+  // In rack view we skip the full DOM rebuild and just re-classify existing
+  // slots via applyRackSearchDim() — rebuilding all 100-300 rack slots on each
+  // keystroke flashed visually and forced a paint of the entire grid.
+  // Stats (racks / filled / locked) don't depend on the search, so a class
+  // toggle is sufficient.
+  function _onFilterChange() {
+    if (state.viewMode === "rack") { applyRackSearchDim(); return; }
+    renderInventory();
+  }
   $("searchInv").addEventListener("input", e => {
     const v = e.target.value;
     state.search = v.trim();
     _refreshSearchClearVisibility(v);
-    renderInventory();
+    _onFilterChange();
   });
   // Clear button — wipes the input, refocuses for further typing, and
   // re-renders the inventory immediately. We dispatch an `input` event
@@ -5011,7 +5020,7 @@ import { elgFanStep } from './printers/elegoo/widget_control.js';
     inp.value = "";
     state.search = "";
     _refreshSearchClearVisibility("");
-    renderInventory();
+    _onFilterChange();
     inp.focus();
   });
   // Initial sync — covers the case where the input was pre-populated