Bug 1539265 - Handle ::marker pseudos during drag & drop of nodes in the markup view. r=jdescottes

Prior to this the tab would crash with signature [@ nsINode::InsertChildBefore ]
if trying to insert before the ::marker.

Differential Revision: https://phabricator.services.mozilla.com/D25106

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/markup/markup.js

@@ -2180,12 +2180,16 @@ MarkupView.prototype = {
       nextSibling = target.parentNode.container.node;
     }
 
-    if (nextSibling && nextSibling.isBeforePseudoElement) {
-      nextSibling = target.parentNode.parentNode.children[1].container.node;
-    }
-    if (nextSibling && nextSibling.isAfterPseudoElement) {
-      parent = target.parentNode.container.node.parentNode();
-      nextSibling = null;
+    if (nextSibling) {
+      while (
+        nextSibling.isMarkerPseudoElement || nextSibling.isBeforePseudoElement
+      ) {
+        nextSibling = this.getContainer(nextSibling).elt.nextSibling.container.node;
+      }
+      if (nextSibling.isAfterPseudoElement) {
+        parent = target.parentNode.container.node.parentNode();
+        nextSibling = null;
+      }
     }
 
     if (parent.nodeType !== nodeConstants.ELEMENT_NODE) {

devtools/client/inspector/markup/test/browser.ini

@@ -115,6 +115,7 @@ skip-if = (os == 'linux' && bits == 32 && debug) || (os == "win" && processor ==
 [browser_markup_display_node_02.js]
 [browser_markup_dragdrop_autoscroll_01.js]
 [browser_markup_dragdrop_autoscroll_02.js]
+[browser_markup_dragdrop_before_marker_pseudo.js]
 [browser_markup_dragdrop_distance.js]
 [browser_markup_dragdrop_draggable.js]
 [browser_markup_dragdrop_dragRootNode.js]

devtools/client/inspector/markup/test/browser_markup_dragdrop_before_marker_pseudo.js

@@ -0,0 +1,64 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test drag and dropping a node before a ::marker pseudo.
+
+const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
+const SHOWANON_PREF = "devtools.inspector.showAllAnonymousContent";
+
+add_task(async function() {
+  await pushPref(SHOWANON_PREF, true);
+  const {inspector} = await openInspectorForURL(TEST_URL);
+
+  info("Expand #list node");
+  const parentFront = await getNodeFront("#list", inspector);
+  await inspector.markup.expandNode(parentFront.parentNode());
+  await inspector.markup.expandNode(parentFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  info("Scroll #list into view");
+  const parentContainer = await getContainerForNodeFront(parentFront, inspector);
+  parentContainer.elt.scrollIntoView(true);
+
+  info("Test placing an element before a ::marker psuedo");
+  await moveElementBeforeMarker("#last-list-child", parentFront, inspector);
+  const childNodes = await getChildrenOf(parentFront, inspector);
+  is(childNodes[0], "_moz_generated_content_marker",
+     "::marker is still the first child of #list");
+  is(childNodes[1], "last-list-child",
+     "#last-list-child is now the second child of #list");
+  is(childNodes[2], "first-list-child",
+     "#first-list-child is now the last child of #list");
+});
+
+async function moveElementBeforeMarker(selector, parentFront, inspector) {
+  info(`Placing ${selector} before its parent's ::marker`);
+
+  const container = await getContainerForSelector(selector, inspector);
+  const parentContainer = await getContainerForNodeFront(parentFront, inspector);
+  const offsetY = (parentContainer.tagLine.offsetTop +
+    parentContainer.tagLine.offsetHeight) - container.tagLine.offsetTop;
+
+  const onMutated = inspector.once("markupmutation");
+  const uiUpdate = inspector.once("inspector-updated");
+
+  await simulateNodeDragAndDrop(inspector, selector, 0, offsetY);
+
+  const mutations = await onMutated;
+  await uiUpdate;
+
+  is(mutations.length, 2, "2 mutations were received");
+}
+
+async function getChildrenOf(parentFront, {walker}) {
+  const {nodes} = await walker.children(parentFront);
+  return nodes.map(node => {
+    if (node.isMarkerPseudoElement) {
+      return node.displayName;
+    }
+    return node.id;
+  });
+}

devtools/client/inspector/markup/test/doc_markup_dragdrop.html

@@ -25,6 +25,12 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=858038
     <div slot="slot1" class="slotted2">slot1-2</div>
   </test-component>
 
+  <ol>
+    <li id="list"><span id="first-list-child"
+      >List item start</span><span id="last-list-child"
+      >List item end</span></li>
+  </ol>
+
   <script>
     "use strict";
     customElements.define("test-component", class extends HTMLElement {