// fixtures/dom-writes.mjs — the two functions that write to the DOM
// only when the value would change. Every DOM write in the editor's
// chrome goes through one of them.
//
// THIS MODULE EXISTS BECAUSE ITS ABSENCE SHIPPED A VISIBLE FLASH, TWICE.
//
// Both bars re-derive every control's state on every ProseMirror state
// update, which is right: the selection moves under the arrow keys,
// under a click on the page and under a remote edit arriving through
// the CRDT, so a bar that only updates on its own buttons is wrong most
// of the time. What was wrong was writing the answer down again every
// time. setAttribute with the value already there is not free, and
// neither is a property: setting a reflected boolean like `disabled` to
// the value it already holds still sets the content attribute, so it
// still invalidates style and still records a mutation. A bar doing
// that for every control on every update repaints itself once per
// keystroke.
//
// It became VISIBLE on a tab switch, because a hidden tab pays for the
// whole backlog in its first frame back. Measured in a real browser
// with one genuinely hidden tab: 23 mutations on reveal, 21 of them
// attribute writes on chrome that was already on screen, and recording
// each one's old value against its new one, 21 of 21 were redundant.
// Zero changed anything — aria-pressed "false" to "false", disabled ""
// to "". The same measurement gave 12 before the toolbar redesign, so
// the cost was growing with every control added.
//
// It is a shared module rather than a pair of functions in toolbar.mjs
// for a reason worth stating plainly. The first fix routed toolbar.mjs
// through a local copy and left 5 of the 23 mutations behind, all of
// them in menu.mjs — a module written AFTER the toolbar, by a different
// session, which reproduced the defect from scratch because nothing
// stopped it. Two copies of this comparison would be two places for the
// next surface to not know about. There is one, both bars import it,
// and fixtures/toolbar.test.mjs holds both of them to it against their
// source as well as against a recording stand-in for the DOM.
//
// Two functions rather than one because the kinds do not compare alike:
// an attribute is a string and is read back with getAttribute, a
// property (disabled, value, tabIndex) is whatever type it is and is
// read back as itself.

// setAttr writes an attribute only if the element does not already
// carry that exact string.
export function setAttr(el, name, value) {
  if (el.getAttribute(name) !== value) el.setAttribute(name, value)
}

// setProp writes a property only if the element does not already hold
// that exact value.
export function setProp(el, name, value) {
  if (el[name] !== value) el[name] = value
}