Bug 1532584 - Test event-collector.js with chrome enabled r=ochameau
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Mon, 11 Mar 2019 16:38:09 +0000
changeset 521513 4ebf7861fca3
parent 521512 f6705b832049
child 521514 18fa4e4ce035
push id10867
push userdvarga@mozilla.com
push dateThu, 14 Mar 2019 15:20:45 +0000
treeherdermozilla-beta@abad13547875 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersochameau
bugs1532584
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1532584 - Test event-collector.js with chrome enabled r=ochameau ### Try https://treeherder.mozilla.org/#/jobs?repo=try&revision=719ecb363402f4c058c970e11c73633e14f7339c Differential Revision: https://phabricator.services.mozilla.com/D22076
devtools/client/inspector/markup/test/browser_markup_events_chrome_blocked.js
devtools/client/inspector/markup/test/browser_markup_events_chrome_not_blocked.js
devtools/client/inspector/markup/test/doc_markup_events_chrome_listeners.html
devtools/client/inspector/markup/test/head.js
devtools/client/inspector/markup/test/helper_events_test_runner.js
devtools/client/inspector/markup/views/element-editor.js
--- a/devtools/client/inspector/markup/test/browser_markup_events_chrome_blocked.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_chrome_blocked.js
@@ -1,26 +1,52 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 /* import-globals-from helper_events_test_runner.js */
+/* global sendAsyncMessage */
 
 "use strict";
 
-// Test that markup view event bubbles are hidden for <video> tags in the
-// content process when devtools.chrome.enabled=false.
-// <video> tags have 22 chrome listeners.
+// Test that markup view chrome event bubbles are hidden when
+// devtools.chrome.enabled = false.
 
 const TEST_URL = URL_ROOT + "doc_markup_events_chrome_listeners.html";
+const FRAMESCRIPT_URL = `data:,(${frameScript.toString()})()`;
 
 loadHelperScript("helper_events_test_runner.js");
 
 const TEST_DATA = [
   {
-    selector: "video",
-    expected: [ ],
+    selector: "div",
+    expected: [],
   },
 ];
 
 add_task(async function() {
+  waitForExplicitFinish();
   await pushPref("devtools.chrome.enabled", false);
-  await runEventPopupTests(TEST_URL, TEST_DATA);
+
+  const {tab, inspector, testActor} = await openInspectorForURL(TEST_URL);
+  const browser = tab.linkedBrowser;
+  const mm = browser.messageManager;
+
+  const badgeEventAdded = inspector.markup.once("badge-added-event");
+
+  info("Loading frame script");
+  mm.loadFrameScript(`${FRAMESCRIPT_URL}`, false);
+
+  // We need to check that the "badge-added-event" event is not triggered so we
+  // need to wait for 5 seconds here.
+  const result = await awaitWithTimeout(badgeEventAdded, 3000);
+  is(result, "timeout", "Ensure that no event badges were added");
+
+  for (const test of TEST_DATA) {
+    await checkEventsForNode(test, inspector, testActor);
+  }
 });
+
+function frameScript() {
+  const div = content.document.querySelector("div");
+  div.addEventListener("click", () => {
+   /* Do nothing */
+  });
+}
--- a/devtools/client/inspector/markup/test/browser_markup_events_chrome_not_blocked.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_chrome_not_blocked.js
@@ -1,74 +1,57 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 /* import-globals-from helper_events_test_runner.js */
+/* global sendAsyncMessage */
 
 "use strict";
 
-// Test that markup view event bubbles are shown for <video> tags in the
-// content process when devtools.chrome.enabled=true.
+// Test that markup view chrome event bubbles are shown when
+// devtools.chrome.enabled = true.
 
 const TEST_URL = URL_ROOT + "doc_markup_events_chrome_listeners.html";
+const FRAMESCRIPT_URL = `data:,(${frameScript.toString()})()`;
 
 loadHelperScript("helper_events_test_runner.js");
 
 const TEST_DATA = [
   {
-    selector: "video",
+    selector: "div",
     expected: [
-      createEvent("canplay"),
-      createEvent("canplaythrough"),
-      createEvent("emptied"),
-      createEvent("ended"),
-      createEvent("error"),
-      createEvent("keypress"),
-      createEvent("loadeddata"),
-      createEvent("loadedmetadata"),
-      createEvent("loadstart"),
-      createEvent("mozvideoonlyseekbegin"),
-      createEvent("mozvideoonlyseekcompleted"),
-      createEvent("pause"),
-      createEvent("play"),
-      createEvent("playing"),
-      createEvent("progress"),
-      createEvent("seeked"),
-      createEvent("seeking"),
-      createEvent("stalled"),
-      createEvent("suspend"),
-      createEvent("timeupdate"),
-      createEvent("volumechange"),
-      createEvent("waiting"),
+      {
+        type: "click",
+        filename: `${FRAMESCRIPT_URL}:1`,
+        attributes: [
+          "Bubbling",
+          "DOM2",
+        ],
+        handler: `() => { /* Do nothing */ }`,
+      },
     ],
   },
 ];
 
-function createEvent(type) {
-  return {
-    type: type,
-    filename: "chrome://global/content/elements/videocontrols.js:437",
-    attributes: [
-      "Capturing",
-      "DOM2",
-    ],
-    handler: `
-      ${type === "play" ? "function" : "handleEvent"}(aEvent) {
-        if (!aEvent.isTrusted) {
-          this.log("Drop untrusted event ----> " + aEvent.type);
-          return;
-        }
+add_task(async function() {
+  waitForExplicitFinish();
+  await pushPref("devtools.chrome.enabled", true);
+
+  const {tab, inspector, testActor} = await openInspectorForURL(TEST_URL);
+  const browser = tab.linkedBrowser;
+  const mm = browser.messageManager;
 
-        this.log("Got event ----> " + aEvent.type);
+  const eventBadgeAdded = inspector.markup.once("badge-added-event");
+  info("Loading frame script");
+  mm.loadFrameScript(`${FRAMESCRIPT_URL}`, false);
+  await eventBadgeAdded;
 
-        if (this.videoEvents.includes(aEvent.type)) {
-          this.handleVideoEvent(aEvent);
-        } else {
-          this.handleControlEvent(aEvent);
-        }
-      }`,
-  };
+  for (const test of TEST_DATA) {
+    await checkEventsForNode(test, inspector, testActor);
+  }
+});
+
+function frameScript() {
+  const div = content.document.querySelector("div");
+  div.addEventListener("click", () => {
+   /* Do nothing */
+  });
 }
-
-add_task(async function() {
-  await pushPref("devtools.chrome.enabled", true);
-  await runEventPopupTests(TEST_URL, TEST_DATA);
-});
--- a/devtools/client/inspector/markup/test/doc_markup_events_chrome_listeners.html
+++ b/devtools/client/inspector/markup/test/doc_markup_events_chrome_listeners.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 </head>
 <body>
-	<video controls></video>
+	<div></div>
 </body>
 </html>
\ No newline at end of file
--- a/devtools/client/inspector/markup/test/head.js
+++ b/devtools/client/inspector/markup/test/head.js
@@ -349,16 +349,46 @@ var isEditingMenuEnabled = async functio
  */
 function promiseNextTick() {
   return new Promise(resolve => {
     executeSoon(resolve);
   });
 }
 
 /**
+ * `await` with timeout.
+ *
+ * Usage:
+ *   const badgeEventAdded = inspector.markup.once("badge-added-event");
+ *   ...
+ *   const result = await awaitWithTimeout(badgeEventAdded, 3000);
+ *   is(result, "timeout", "Ensure that no event badges were added");
+ *
+ * @param  {Promise} promise
+ *         Promise to resolve
+ * @param  {Number} ms
+ *         Milliseconds to wait.
+ * @return "timeout" on timeout, otherwise the result of the fulfilled promise.
+ */
+async function awaitWithTimeout(promise, ms) {
+  const timeout = new Promise(resolve => {
+    // eslint-disable-next-line
+    const wait = setTimeout(() => {
+      clearTimeout(wait);
+      resolve("timeout");
+    }, ms);
+  });
+
+  return Promise.race([
+    promise,
+    timeout,
+  ]);
+}
+
+/**
  * Collapses the current text selection in an input field and tabs to the next
  * field.
  */
 function collapseSelectionAndTab(inspector) {
   // collapse selection and move caret to end
   EventUtils.sendKey("tab", inspector.panelWin);
   // next element
   EventUtils.sendKey("tab", inspector.panelWin);
--- a/devtools/client/inspector/markup/test/helper_events_test_runner.js
+++ b/devtools/client/inspector/markup/test/helper_events_test_runner.js
@@ -89,17 +89,18 @@ async function checkEventsForNode(test, 
   }
 
   // Check values
   const headers = tooltip.panel.querySelectorAll(".event-header");
   const nodeFront = container.node;
   const cssSelector = nodeFront.nodeName + "#" + nodeFront.id;
 
   for (let i = 0; i < headers.length; i++) {
-    info("Processing header[" + i + "] for " + cssSelector);
+    const label = `${cssSelector}.${expected[i].type} (index ${i})`;
+    info(`${label} START`);
 
     const header = headers[i];
     const type = header.querySelector(".event-tooltip-event-type");
     const filename = header.querySelector(".event-tooltip-filename");
     const attributes = header.querySelectorAll(".event-tooltip-attributes");
     const contentBox = header.nextElementSibling;
 
     info("Looking for " + type.textContent);
@@ -131,19 +132,23 @@ async function checkEventsForNode(test, 
         "We are in expanded state and icon changed");
 
     const editor = tooltip.eventTooltip._eventEditors.get(contentBox).editor;
     const tidiedHandler = beautify.js(expected[i].handler, {
       "indent_size": 2,
     });
     testDiff(editor.getText(), tidiedHandler,
        "handler matches for " + cssSelector, ok);
+
+    info(`${label} END`);
   }
 
+  const tooltipHidden = tooltip.once("hidden");
   tooltip.hide();
+  await tooltipHidden;
 }
 
 /**
  * Create diff of two strings.
  *
  * @param  {String} text1
  *         String to compare with text2.
  * @param  {String} text2 [description]
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -289,16 +289,17 @@ ElementEditor.prototype = {
   _createEventBadge: function() {
     this._eventBadge = this.doc.createElement("div");
     this._eventBadge.className = "inspector-badge interactive";
     this._eventBadge.dataset.event = "true";
     this._eventBadge.textContent = "event";
     this._eventBadge.title = INSPECTOR_L10N.getStr("markupView.event.tooltiptext");
     // Badges order is [event][display][custom], insert event badge before others.
     this.elt.insertBefore(this._eventBadge, this._displayBadge || this._customBadge);
+    this.markup.emit("badge-added-event");
   },
 
   updateScrollableBadge: function() {
     if (this.node.isScrollable && !this._scrollableBadge) {
       this._createScrollableBadge();
     } else if (this._scrollableBadge && !this.node.isScrollable) {
       this._scrollableBadge.remove();
       this._scrollableBadge = null;