Bug 1591757 - Add a test case checking cross-origin iframe elements logged in console can be highlighted. r=pbro. a=test-only
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Fri, 15 Nov 2019 14:50:25 +0000
changeset 563479 6e87f52e6eebdf777f975baa407d5c22e9756e80
parent 563478 1cf3ddc05b3ac4a27a2d48acd0e1b189b97b12ac
child 563480 192f60968befcde3d3174dc16a75b5ec8713fe5d
push id2195
push userffxbld-merge
push dateMon, 25 Nov 2019 12:02:33 +0000
treeherdermozilla-release@19adee6f7bb3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro, test-only
bugs1591757
milestone71.0
Bug 1591757 - Add a test case checking cross-origin iframe elements logged in console can be highlighted. r=pbro. a=test-only Differential Revision: https://phabricator.services.mozilla.com/D53039
devtools/client/webconsole/test/browser/browser_webconsole_inspect_cross_domain_object.js
devtools/client/webconsole/test/browser/test-inspect-cross-domain-objects-frame.html
--- a/devtools/client/webconsole/test/browser/browser_webconsole_inspect_cross_domain_object.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_inspect_cross_domain_object.js
@@ -3,18 +3,17 @@
 
 // Check that users can inspect objects logged from cross-domain iframes -
 // bug 869003.
 
 "use strict";
 
 const TEST_URI =
   "http://example.com/browser/devtools/client/webconsole/" +
-  "test/browser/" +
-  "test-inspect-cross-domain-objects-top.html";
+  "test/browser/test-inspect-cross-domain-objects-top.html";
 
 add_task(async function() {
   requestLongerTimeout(2);
 
   // Bug 1518138: GC heuristics are broken for this test, so that the test
   // ends up running out of memory. Try to work-around the problem by GCing
   // before the test begins.
   Cu.forceShrinkingGC();
@@ -26,21 +25,21 @@ add_task(async function() {
   info("Wait for the 'foobar' message to be logged by the frame");
   const onMessage = waitForMessage(hud, "foobar");
   BrowserTestUtils.loadURI(gBrowser.selectedBrowser, TEST_URI);
   const { node } = await onMessage;
 
   const objectInspectors = [...node.querySelectorAll(".tree")];
   is(
     objectInspectors.length,
-    2,
+    3,
     "There is the expected number of object inspectors"
   );
 
-  const [oi1, oi2] = objectInspectors;
+  const [oi1, oi2, oi3] = objectInspectors;
 
   info("Expanding the first object inspector");
   await expandObjectInspector(oi1);
 
   // The first object inspector now looks like:
   // ▼ {…}
   // |  bug: 869003
   // |  hello: "world!"
@@ -68,16 +67,54 @@ add_task(async function() {
   const oi2Nodes = oi2.querySelectorAll(".node");
   is(oi2Nodes.length, 9, "There is the expected number of nodes in the tree");
   ok(oi2.textContent.includes("arguments: null"), "Expected content");
   ok(oi2.textContent.includes("bug: 869003"), "Expected content");
   ok(oi2.textContent.includes("caller: null"), "Expected content");
   ok(oi2.textContent.includes('hello: "world!"'), "Expected content");
   ok(oi2.textContent.includes("length: 1"), "Expected content");
   ok(oi2.textContent.includes('name: "func"'), "Expected content");
+
+  info(
+    "Check that the logged element can be highlighted and clicked to jump to inspector"
+  );
+  const toolbox = hud.toolbox;
+  // Loading the inspector panel at first, to make it possible to listen for
+  // new node selections
+  await toolbox.loadTool("inspector");
+
+  const elementNode = oi3.querySelector(".objectBox-node");
+  ok(elementNode !== null, "Node was logged as expected");
+  const view = node.ownerDocument.defaultView;
+
+  info("Highlight the node by moving the cursor on it");
+  // the inspector should be initialized first and then the node should
+  // highlight after the hover effect.
+  const inspectorFront = await toolbox.target.getFront("inspector");
+  const onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
+
+  EventUtils.synthesizeMouseAtCenter(elementNode, { type: "mousemove" }, view);
+
+  await onNodeHighlight;
+  ok(true, "Highlighter is displayed");
+  // Move the mouse out of the node to prevent failure when test is run multiple times.
+  EventUtils.synthesizeMouseAtCenter(oi1, { type: "mousemove" }, view);
+
+  const openInInspectorIcon = elementNode.querySelector(".open-inspector");
+  ok(openInInspectorIcon !== null, "There is an open in inspector icon");
+
+  info(
+    "Clicking on the inspector icon and waiting for the inspector to be selected"
+  );
+  const onNewNode = toolbox.selection.once("new-node-front");
+  openInInspectorIcon.click();
+  const inspectorSelectedNodeFront = await onNewNode;
+
+  ok(true, "Inspector selected and new node got selected");
+  is(inspectorSelectedNodeFront.id, "testEl", "The expected node was selected");
 });
 
 function expandObjectInspector(oi) {
   const onMutation = waitForNodeMutation(oi, {
     childList: true,
   });
 
   oi.querySelector(".arrow").click();
--- a/devtools/client/webconsole/test/browser/test-inspect-cross-domain-objects-frame.html
+++ b/devtools/client/webconsole/test/browser/test-inspect-cross-domain-objects-frame.html
@@ -6,17 +6,18 @@
     <!-- Any copyright is dedicated to the Public Domain.
        - http://creativecommons.org/publicdomain/zero/1.0/ -->
     <script type="text/javascript">
       /* eslint-disable */
       window.onload = function testConsoleLogging()
       {
         var obj1 = { hello: "world!", bug: 869003 };
         var obj2 = Object.assign(function func(arg){}, obj1);
-        console.log("foobar", obj1, obj2);
+        var obj3 = document.getElementById("testEl");
+        console.log("foobar", obj1, obj2, obj3);
       };
     </script>
   </head>
   <body>
-    <p>Make sure users can inspect objects from cross-domain iframes.</p>
+    <p id="testEl">Make sure users can inspect objects from cross-domain iframes.</p>
     <p>Iframe window.</p>
   </body>
 </html>