Introduce moveBefore() state-preserving atomic move API

[domfarolino]

This PR introduces a new DOM API on the ParentNode mixin: moveBefore(). It mirrors insertBefore() in shape, but defers to a new DOM manipulation primitive that this PR adds in service of this new API: the "move" primitive. The move primitive contains some of the DOM tree bookkeeping steps from the remove primitive, as well as the insert primitive, and does three more interesting things:

1. Calls the moving steps hook with the moved node and the old parent (possibly null, just like the removing steps)
2. Queues a custom element callback reaction for the connectedMoveCallback()
3. Queues two back-to-back mutation record tasks: one for removal from the old parent; one for insertion into the new one

The power of the move primitive comes from the fact that the algorithm does not defer to the traditional insert and removal primitives, and therefore does not invoke the removing steps and insertion steps. This allows most state to be preserved by default (i.e., we don't tear down iframes, or close dialogs). Sometimes, the insertion/removing step overrides in other specifications have steps that do need to be performed during a move anyways. These specifications are expected to override the moving steps hook and perform the necessary work accordingly. See whatwg/html#10657 for HTML.

Closes #1255. Closes #1335.

Remaining tasks (some will be PRs in other standards):

• Custom element integration
• Keep popovers open
• Don't call post-connection steps if state-preserving atomic move is in progress
• Don't call becomes connected / becomes browsing-context
• Only disconnect subframes on removal when state-preserving atomic move is not in progress
• Keep dialogs open: see removing steps
• img/source: this shouldn't count as a relevant mutation
• Preserve fullscreen
• Preserve focus
  • Need to resolve focusin event semantics
• ~[ ] Don't reset animations / transitions. See here
  • Maybe nothing needs to be done here. Given how element removals are handled, the spec does NOT require transitions to be removed from the UA's set of running transitions for moved nodes since they are never removed from the Document.~
• [ ] Preserve text-selection. See set the selection range. Edit: Nothing needs to be done here. Selection metadata (i.e., selectionStart and kin) is preserved by default in browsers, consistent with HTML (no action is taken on removal). The UI behavior of the selection not being highlighted is a side-effect of the element losing focus
• Selection API: don't reset the Document's selection
  • Updates to the selection range should happen according to how the DOM Standard primitives update ranges. The Selection API specification admits as much, by deferring to the insert and removal algorithms. Therefore, we should reference the move primitive from the Selection API specification, and ensure that the move primitive in this DOM Standard PR updates live ranges correctly: Reference the move primitive in DOM mutations section w3c/selection-api#341
  • selectionchange event: We've decided to allow selectionchange event to still fire, since it is queued in a task. No changes for this part are required.
• Pointer event state reset: see here
  • The specification does not reset an element's previously-set pointer capture upon DOM node insertion or removal. While this seems like a gap in that specification ([DOM integration] No state is reset on node removal w3c/pointerevents#526), it appears that nothing needs to be done in that specification to satisfy this preservation semantic.
  • Test: https://github.com/web-platform-tests/wpt/blob/master/dom/nodes/moveBefore/tentative/pointer-events.html
• Hide input/select picker: here
  • Nothing in the specification seems to hook into DOM for removal when the picker dialog is shown, so no work needs to be done in this PR. See "Show the picker" steps never dismisses the picker upon node removal html#10743 for a follow-up.
• Preserve pointer lock: here
  • When a "pointer-lock target becomes disconnected", pointer lock is exited. Since the "becomes disconnected" hook is not run during an atomic move, pointer lock is preserved naturally.
• Containment: keep last remembered size(see here)

• At least two implementers are interested (and none opposed):
  • Chromium: https://issues.chromium.org/issues/40150299
  • WebKit: DOM State-preserving move (Node.prototype.moveBefore) WebKit/standards-positions#375
  • Gecko: DOM State-preserving move (Node.prototype.moveBefore) mozilla/standards-positions#1053
• Tests are written and can be reviewed and commented upon at:
  • https://github.com/web-platform-tests/wpt/tree/master/dom/nodes/moveBefore/tentative (need to mark as non-tentative)
• Implementation bugs are filed:
  • Chromium: https://issues.chromium.org/issues/40150299
  • Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1923880
  • WebKit: https://bugs.webkit.org/show_bug.cgi?id=281223
• MDN issue is filed: Document the moveBefore() API mdn/mdn#613 & the impacts-documentation label
• The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

---

Preview | Diff

[annevk]

I think the mutation record needs some more design work. I would expect it to capture the information of a remove and an insert at the same time. Perhaps it needs to be a new object, though we could further overload the existing MutationRecord as well I guess. At least I think you need:

• old target
• target
• moved node (I'm not sure you can ever move multiple at this point, but maybe we should allow for it in the mutation record design?)
• old previous sibling
• old next sibling
• previous sibling
• next sibling

Would be good to know what @smaug---- thinks and maybe @ajklein even wants to chime in.

[smaug----]

• old target

• target

• moved node (I'm not sure you can ever move multiple at this point, but maybe we should allow for it in the mutation record design?)

Shouldn't the target node be all the time the same, it is just the siblings which change.
So we'd need only oldPreviousSibling and oldNextSibling. Oh, hmm, this isn't only about moving children but moving anything.

If this is really just remove and add back elsewhere, we could just reuse the existing childList MutationRecords, one for remove, one for adding node back, and possibly just add a flag to MutationRecord that it was about move.

(movedNodes is a bit confusing, since it seems to depend on the connectedness of the relevant nodes and it is apparently empty for the removal part. And it is unclear to me why we need the connectedness check. This is about basic DOM tree operations, and I'd assume those to work the same way whether or not the node is connected)

[annevk]

Creating two separate mutation records that a consumer would have to merge to (fully) understand it's a move seems suboptimal?

I agree that it should probably work for disconnected nodes as well, but I don't think we want to support a case where the shadow-including root changes.

[ajklein]

It's been a long time since I've thought about this stuff, but I'm inclined to agree with @smaug---- that creating a new type of MutationRecord feels unnecessary. Users of MutationObserver already have to do coalescing if they want to make sense of the stream of changes they observe. There are already other move-like operations, such as appending a child that's already somewhere else in the tree, which today generates two records.

[smaug----]

Are there any tests for MutationObserver + moveBefore?

[domfarolino]

Are there any tests for MutationObserver + moveBefore?

I thought there were but I cannot find them, so I'll add some today.

[domfarolino]

OK slotchange and MutationObserver tests are added in web-platform-tests/wpt#49810 and https://chromium-review.googlesource.com/c/chromium/src/+/6108064 (upstreamed soon), so I think everything here is resolved. I'll look at the comments on the HTML integration PR, but I think this one is ready to go.