diff --git a/e2e/specs/grid-selection.spec.js b/e2e/specs/grid-selection.spec.js index 0262d03..4b7ffcf 100644 --- a/e2e/specs/grid-selection.spec.js +++ b/e2e/specs/grid-selection.spec.js @@ -59,7 +59,7 @@ async function cellAt(toplevel, position, cell) { /** The number cell selects and never opens an editor, which is why every gesture below lands on it. */ /** How many times the grid has been committed, which `CueList.tsx` counts on the element. */ function gridRenders() { - return browser.execute(() => Number(document.documentElement.dataset.gridRenders) || 0); + return browser.execute(() => Number(window.__gridRenders) || 0); } /** Wait until the grid stops drawing on its own, so the count below is about the click. */ diff --git a/src/components/CueList.tsx b/src/components/CueList.tsx index 49e426a..efff367 100644 --- a/src/components/CueList.tsx +++ b/src/components/CueList.tsx @@ -92,9 +92,12 @@ export default function CueList({ // Every commit of the grid, counted where a check can read it. Interface-spec 7.2 asks a click on // the row the cursor already holds to change nothing, and a render that happened for nothing is // invisible from outside by definition. No dependency list: this counts commits, not values. + // + // On a property and not on the element: the grid commits with the playhead, and an attribute + // written on `` that often can cost the whole document a style recalculation. See N175. useEffect(() => { - const root = document.documentElement; - root.dataset.gridRenders = String((Number(root.dataset.gridRenders) || 0) + 1); + const counted = window as unknown as { __gridRenders?: number }; + counted.__gridRenders = (counted.__gridRenders ?? 0) + 1; }); const [scrollTop, setScrollTop] = useState(0); const [viewport, setViewport] = useState(0);