Bug 1480638 - Inspect Element is not reported into panel enter/exit events r=nchevobbe
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Mon, 20 Aug 2018 06:11:31 +0000
changeset 490597 32e98ec84de35a219e857c660cf69efcd9ff1b1c
parent 490596 0f52720def8442a28e0542505e6a24e4647d6c1a
child 490598 ee51ad97d401d529454fd1fe7dc8b2fc44389afd
push id1815
push userffxbld-merge
push dateMon, 15 Oct 2018 10:40:45 +0000
treeherdermozilla-release@18d4c09e9378 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1480638
milestone63.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 1480638 - Inspect Element is not reported into panel enter/exit events r=nchevobbe Send `inspect_dom` properties from appropriate places. Differential Revision: https://phabricator.services.mozilla.com/D3511
devtools/client/framework/devtools.js
devtools/client/framework/toolbox-highlighter-utils.js
devtools/client/framework/toolbox.js
devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
devtools/client/webconsole/webconsole-output-wrapper.js
--- a/devtools/client/framework/devtools.js
+++ b/devtools/client/framework/devtools.js
@@ -442,30 +442,32 @@ DevTools.prototype = {
    *        The id of the tool to show
    * @param {Toolbox.HostType} hostType
    *        The type of host (bottom, window, left, right)
    * @param {object} hostOptions
    *        Options for host specifically
    * @param {Number} startTime
    *        Optional, indicates the time at which the user event related to this toolbox
    *        opening started. This is a `Cu.now()` timing.
+   * @param {string} reason
+   *        Reason the tool was opened
    *
    * @return {Toolbox} toolbox
    *        The toolbox that was opened
    */
-  async showToolbox(target, toolId, hostType, hostOptions, startTime) {
+  async showToolbox(target, toolId, hostType, hostOptions, startTime, reason = "toolbox_show") {
     let toolbox = this._toolboxes.get(target);
 
     if (toolbox) {
       if (hostType != null && toolbox.hostType != hostType) {
         await toolbox.switchHost(hostType);
       }
 
       if (toolId != null && toolbox.currentToolId != toolId) {
-        await toolbox.selectTool(toolId, "toolbox_show");
+        await toolbox.selectTool(toolId, reason);
       }
 
       toolbox.raise();
     } else {
       // As toolbox object creation is async, we have to be careful about races
       // Check for possible already in process of loading toolboxes before
       // actually trying to create a new one.
       const promise = this._creatingToolboxes.get(target);
@@ -687,17 +689,18 @@ DevTools.prototype = {
    *        Optional, indicates the time at which the user event related to this node
    *        inspection started. This is a `Cu.now()` timing.
    * @return {Promise} a promise that resolves when the node is selected in the inspector
    *         markup view.
    */
   async inspectNode(tab, nodeSelectors, startTime) {
     const target = TargetFactory.forTab(tab);
 
-    const toolbox = await gDevTools.showToolbox(target, "inspector", null, null, startTime);
+    const toolbox = await gDevTools.showToolbox(target, "inspector", null, null,
+                                                startTime, "inspect_dom");
     const inspector = toolbox.getCurrentPanel();
 
     // If the toolbox has been switched into a nested frame, we should first remove
     // selectors according to the frame depth.
     nodeSelectors.splice(0, toolbox.selectedFrameDepth);
 
     // new-node-front tells us when the node has been selected, whether the
     // browser is remote or not.
--- a/devtools/client/framework/toolbox-highlighter-utils.js
+++ b/devtools/client/framework/toolbox-highlighter-utils.js
@@ -107,17 +107,17 @@ exports.getHighlighterUtils = function(t
   const startPicker = exported.startPicker =
     requireInspector(async function(doFocus = false) {
       if (isPicking) {
         return;
       }
       isPicking = true;
 
       toolbox.pickerButton.isChecked = true;
-      await toolbox.selectTool("inspector");
+      await toolbox.selectTool("inspector", "inspect_dom");
       toolbox.on("select", cancelPicker);
 
       if (isRemoteHighlightable()) {
         toolbox.walker.on("picker-node-hovered", onPickerNodeHovered);
         toolbox.walker.on("picker-node-picked", onPickerNodePicked);
         toolbox.walker.on("picker-node-previewed", onPickerNodePreviewed);
         toolbox.walker.on("picker-node-canceled", onPickerNodeCanceled);
 
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -2758,17 +2758,17 @@ Toolbox.prototype = {
     if (objectActor.preview &&
         objectActor.preview.nodeType === domNodeConstants.ELEMENT_NODE) {
       // Open the inspector and select the DOM Element.
       await this.loadTool("inspector");
       const inspector = this.getPanel("inspector");
       const nodeFound = await inspector.inspectNodeActor(objectActor.actor,
                                                          inspectFromAnnotation);
       if (nodeFound) {
-        await this.selectTool("inspector", "inspect_dom");
+        await this.selectTool("inspector");
       }
     } else if (objectActor.type !== "null" &&
                objectActor.type !== "undefined") {
       // Open then split console and inspect the object in the variables view,
       // when the objectActor doesn't represent an undefined or null value.
       await this.openSplitConsole();
       const panel = this.getPanel("webconsole");
       const jsterm = panel.hud.jsterm;
--- a/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
+++ b/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
@@ -3,25 +3,78 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 // Testing that clicking the pick button switches the toolbox to the inspector
 // panel.
 
 const TEST_URI = "data:text/html;charset=UTF-8," +
   "<p>Switch to inspector on pick</p>";
+const OPTOUT = Ci.nsITelemetry.DATASET_RELEASE_CHANNEL_OPTOUT;
+
+const DATA = [
+  {
+    timestamp: 3562,
+    category: "devtools.main",
+    method: "enter",
+    object: "webconsole",
+    extra: {
+      host: "bottom",
+      start_state: "initial_panel",
+      panel_name: "webconsole",
+      cold: "true",
+      message_count: "0",
+      width: "1300"
+    }
+  },
+  {
+    timestamp: 3671,
+    category: "devtools.main",
+    method: "exit",
+    object: "webconsole",
+    extra: {
+      host: "bottom",
+      width: "1300",
+      panel_name: "webconsole",
+      next_panel: "inspector",
+      reason: "inspect_dom"
+    }
+  },
+  {
+    timestamp: 3671,
+    category: "devtools.main",
+    method: "enter",
+    object: "inspector",
+    extra: {
+      host: "bottom",
+      start_state: "inspect_dom",
+      panel_name: "inspector",
+      cold: "true",
+      width: "1300"
+    }
+  }
+];
 
 add_task(async function() {
+  // Let's reset the counts.
+  Services.telemetry.clearEvents();
+
+  // Ensure no events have been logged
+  const snapshot = Services.telemetry.snapshotEvents(OPTOUT, true);
+  ok(!snapshot.parent, "No events have been logged for the main process");
+
   const tab = await addTab(TEST_URI);
   const toolbox = await openToolbox(tab);
 
   await startPickerAndAssertSwitchToInspector(toolbox);
 
   info("Stoppping element picker.");
   await toolbox.highlighterUtils.stopPicker();
+
+  checkResults();
 });
 
 function openToolbox(tab) {
   info("Opening webconsole.");
   const target = TargetFactory.forTab(tab);
   return gDevTools.showToolbox(target, "webconsole");
 }
 
@@ -29,8 +82,43 @@ async function startPickerAndAssertSwitc
   info("Clicking element picker button.");
   const pickButton = toolbox.doc.querySelector("#command-button-pick");
   pickButton.click();
 
   info("Waiting for inspector to be selected.");
   await toolbox.once("inspector-selected");
   is(toolbox.currentToolId, "inspector", "Switched to the inspector");
 }
+
+function checkResults() {
+  const snapshot = Services.telemetry.snapshotEvents(OPTOUT, true);
+  const events = snapshot.parent.filter(event => event[1] === "devtools.main" &&
+                                                 event[2] === "enter" ||
+                                                 event[2] === "exit"
+  );
+
+  for (const i in DATA) {
+    const [ timestamp, category, method, object, value, extra ] = events[i];
+    const expected = DATA[i];
+
+    // ignore timestamp
+    ok(timestamp > 0, "timestamp is greater than 0");
+    is(category, expected.category, "category is correct");
+    is(method, expected.method, "method is correct");
+    is(object, expected.object, "object is correct");
+    is(value, null, "value is correct");
+    ok(extra.width > 0, "width is greater than 0");
+
+    checkExtra("host", extra, expected);
+    checkExtra("start_state", extra, expected);
+    checkExtra("reason", extra, expected);
+    checkExtra("panel_name", extra, expected);
+    checkExtra("next_panel", extra, expected);
+    checkExtra("message_count", extra, expected);
+    checkExtra("cold", extra, expected);
+  }
+}
+
+function checkExtra(propName, extra, expected) {
+  if (extra[propName]) {
+    is(extra[propName], expected.extra[propName], `${propName} is correct`);
+  }
+}
--- a/devtools/client/webconsole/webconsole-output-wrapper.js
+++ b/devtools/client/webconsole/webconsole-output-wrapper.js
@@ -225,17 +225,17 @@ WebConsoleOutputWrapper.prototype = {
               : null;
           },
           unHighlightDomElement: (forceHide = false) => {
             return this.toolbox.highlighterUtils
               ? this.toolbox.highlighterUtils.unhighlight(forceHide)
               : null;
           },
           openNodeInInspector: async (grip) => {
-            const onSelectInspector = this.toolbox.selectTool("inspector");
+            const onSelectInspector = this.toolbox.selectTool("inspector", "inspect_dom");
             const onGripNodeToFront = this.toolbox.highlighterUtils.gripToNodeFront(grip);
             const [
               front,
               inspector
             ] = await Promise.all([onGripNodeToFront, onSelectInspector]);
 
             const onInspectorUpdated = inspector.once("inspector-updated");
             const onNodeFrontSet = this.toolbox.selection