| 1 | // fixtures/dom-writes.mjs — the two functions that write to the DOM |
| 2 | // only when the value would change. Every DOM write in the editor's |
| 3 | // chrome goes through one of them. |
| 4 | // |
| 5 | // THIS MODULE EXISTS BECAUSE ITS ABSENCE SHIPPED A VISIBLE FLASH, TWICE. |
| 6 | // |
| 7 | // Both bars re-derive every control's state on every ProseMirror state |
| 8 | // update, which is right: the selection moves under the arrow keys, |
| 9 | // under a click on the page and under a remote edit arriving through |
| 10 | // the CRDT, so a bar that only updates on its own buttons is wrong most |
| 11 | // of the time. What was wrong was writing the answer down again every |
| 12 | // time. setAttribute with the value already there is not free, and |
| 13 | // neither is a property: setting a reflected boolean like `disabled` to |
| 14 | // the value it already holds still sets the content attribute, so it |
| 15 | // still invalidates style and still records a mutation. A bar doing |
| 16 | // that for every control on every update repaints itself once per |
| 17 | // keystroke. |
| 18 | // |
| 19 | // It became VISIBLE on a tab switch, because a hidden tab pays for the |
| 20 | // whole backlog in its first frame back. Measured in a real browser |
| 21 | // with one genuinely hidden tab: 23 mutations on reveal, 21 of them |
| 22 | // attribute writes on chrome that was already on screen, and recording |
| 23 | // each one's old value against its new one, 21 of 21 were redundant. |
| 24 | // Zero changed anything — aria-pressed "false" to "false", disabled "" |
| 25 | // to "". The same measurement gave 12 before the toolbar redesign, so |
| 26 | // the cost was growing with every control added. |
| 27 | // |
| 28 | // It is a shared module rather than a pair of functions in toolbar.mjs |
| 29 | // for a reason worth stating plainly. The first fix routed toolbar.mjs |
| 30 | // through a local copy and left 5 of the 23 mutations behind, all of |
| 31 | // them in menu.mjs — a module written AFTER the toolbar, by a different |
| 32 | // session, which reproduced the defect from scratch because nothing |
| 33 | // stopped it. Two copies of this comparison would be two places for the |
| 34 | // next surface to not know about. There is one, both bars import it, |
| 35 | // and fixtures/toolbar.test.mjs holds both of them to it against their |
| 36 | // source as well as against a recording stand-in for the DOM. |
| 37 | // |
| 38 | // Two functions rather than one because the kinds do not compare alike: |
| 39 | // an attribute is a string and is read back with getAttribute, a |
| 40 | // property (disabled, value, tabIndex) is whatever type it is and is |
| 41 | // read back as itself. |
| 42 | |
| 43 | // setAttr writes an attribute only if the element does not already |
| 44 | // carry that exact string. |
| 45 | export function setAttr(el, name, value) { |
| 46 | if (el.getAttribute(name) !== value) el.setAttribute(name, value) |
| 47 | } |
| 48 | |
| 49 | // setProp writes a property only if the element does not already hold |
| 50 | // that exact value. |
| 51 | export function setProp(el, name, value) { |
| 52 | if (el[name] !== value) el[name] = value |
| 53 | } |
| 54 | |
amadan