Bug 1465873 - part5: Add mochitest for hovering shadowdom with element-picker;r=bgrins draft
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 26 Jun 2018 19:22:31 +0200
changeset 814186 fcdb2d81471e05d8335968ddd81867929798ccd7
parent 814185 9dbae35e59b81283337281d7eae47e2d0b8f8800
child 814187 33f1f6e8dd221754a4a8fb32f954e5d277110917
push id115123
push userjdescottes@mozilla.com
push dateWed, 04 Jul 2018 17:42:29 +0000
reviewersbgrins
bugs1465873
milestone63.0a1
Bug 1465873 - part5: Add mochitest for hovering shadowdom with element-picker;r=bgrins MozReview-Commit-ID: FCzWwF8bKZW
devtools/client/inspector/markup/test/browser.ini
devtools/client/inspector/markup/test/browser_markup_shadowdom_hover.js
--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -164,16 +164,17 @@ skip-if = verify
 [browser_markup_remove_xul_attributes.js]
 skip-if = e10s # Bug 1036409 - The last selected node isn't reselected
 [browser_markup_search_01.js]
 [browser_markup_shadowdom.js]
 [browser_markup_shadowdom_clickreveal.js]
 [browser_markup_shadowdom_clickreveal_scroll.js]
 [browser_markup_shadowdom_delete.js]
 [browser_markup_shadowdom_dynamic.js]
+[browser_markup_shadowdom_hover.js]
 [browser_markup_shadowdom_maxchildren.js]
 [browser_markup_shadowdom_mutations_shadow.js]
 [browser_markup_shadowdom_navigation.js]
 [browser_markup_shadowdom_noslot.js]
 [browser_markup_shadowdom_slotupdate.js]
 [browser_markup_tag_delete_whitespace_node.js]
 [browser_markup_tag_edit_01.js]
 [browser_markup_tag_edit_02.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_hover.js
@@ -0,0 +1,94 @@
+/* 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";
+
+// Bug 1465873
+// Tests that hovering nodes in the content page with the element picked and finally
+// picking one does not break the markup view. The markup and sequence used here is a bit
+// eccentric but the issue from Bug 1465873 is tricky to reproduce.
+
+const TEST_URL = `data:text/html;charset=utf-8,` + encodeURIComponent(`
+  <test-component id="component1" background>
+    <div slot="slot1" data-index="1">slot1-1</div>
+  </test-component>
+  <script>
+  (function() {
+    'use strict';
+
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super(); // always call super() first in the ctor.
+
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = \`
+          <div id="wrapper" style="padding-top: 20px;">
+            a<span class="pick-target">pick-target</span>
+            <div id="slot1-container">
+              <slot id="slot1" name="slot1"></slot>
+            </div>
+          </div>
+        \`;
+      }
+    });
+  })();
+  </script>`);
+
+add_task(async function() {
+  await enableWebComponents();
+
+  const { inspector, toolbox, testActor } = await openInspectorForURL(TEST_URL);
+
+  info("Waiting for element picker to become active.");
+  await startPicker(toolbox);
+
+  info("Move mouse over the padding of the test-component");
+  await hoverElement("test-component", 10, 10);
+
+  info("Move mouse over the pick-target");
+  // Note we can't reach pick-target with a selector because this element lives in the
+  // shadow-dom of test-component. We aim for PADDING + 5 pixels
+  await hoverElement("test-component", 10, 25);
+
+  info("Click and pick the pick-target");
+  await pickElement("test-component", 10, 25);
+
+  info("Check that the markup view has the expected content after using the picker");
+  const tree = `
+    test-component
+      #shadow-root
+        wrapper
+          a
+          pick-target
+          slot1-container
+            slot1
+              div!slotted
+      div`;
+  await assertMarkupViewAsTree(tree, "test-component", inspector);
+
+  const hostFront = await getNodeFront("test-component", inspector);
+  const hostContainer = inspector.markup.getContainer(hostFront);
+  const moreNodesLink = hostContainer.elt.querySelector(".more-nodes");
+  ok(!moreNodesLink, "There is no 'more nodes' button displayed in the host container");
+
+  /**
+   * Helpers defined in the test task to reuse easily the inspector and testActor
+   * variables.
+   */
+  function hoverElement(selector, x, y) {
+    info("Waiting for element " + selector + " to be hovered");
+    const onHovered = inspector.toolbox.once("picker-node-hovered");
+    testActor.synthesizeMouse({selector, x, y, options: {type: "mousemove"}});
+    return onHovered;
+  }
+
+  function pickElement(selector, x, y) {
+    info("Waiting for element " + selector + " to be picked");
+    // Use an empty options argument in order trigger the default synthesizeMouse behavior
+    // which will trigger mousedown, then mouseup.
+    const onNewNodeFront = inspector.selection.once("new-node-front");
+    testActor.synthesizeMouse({selector, x, y, options: {}});
+    return onNewNodeFront;
+  }
+});