Bug 1509070 - Add histogram to track the type of flex elements selected r=miker
authorPatrick Brosset <pbrosset@mozilla.com>
Mon, 26 Nov 2018 16:39:23 +0000
changeset 507214 6713926d58d28f438b010bf217fba98722e2c1e8
parent 507213 6fdc307a0717b978eb31ef83f7e053b6e1beb33f
child 507215 d15d34168dd095c25dfbca6313a3bfa1b389da38
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmiker
bugs1509070
milestone65.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 1509070 - Add histogram to track the type of flex elements selected r=miker Differential Revision: https://phabricator.services.mozilla.com/D12564
devtools/client/inspector/flexbox/components/FlexItem.js
devtools/client/inspector/flexbox/components/FlexItemSelector.js
devtools/client/inspector/flexbox/components/Header.js
devtools/client/inspector/flexbox/flexbox.js
toolkit/components/telemetry/Histograms.json
--- a/devtools/client/inspector/flexbox/components/FlexItem.js
+++ b/devtools/client/inspector/flexbox/components/FlexItem.js
@@ -35,17 +35,18 @@ class FlexItem extends PureComponent {
       setSelectedNode,
     } = this.props;
     const { nodeFront } = flexItem;
 
     return (
       dom.button(
         {
           className: "devtools-button devtools-monospace",
-          onClick: () => {
+          onClick: e => {
+            e.stopPropagation();
             setSelectedNode(nodeFront);
             onHideBoxModelHighlighter();
           },
           onMouseOut: () => onHideBoxModelHighlighter(),
           onMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
         },
         dom.span({ className: "flex-item-index" }, index),
         Rep({
--- a/devtools/client/inspector/flexbox/components/FlexItemSelector.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSelector.js
@@ -30,16 +30,18 @@ class FlexItemSelector extends PureCompo
   }
 
   constructor(props) {
     super(props);
     this.onShowFlexItemMenu = this.onShowFlexItemMenu.bind(this);
   }
 
   onShowFlexItemMenu(event) {
+    event.stopPropagation();
+
     const {
       flexItem,
       flexItems,
       setSelectedNode,
     } = this.props;
     const menuItems = [];
 
     for (const item of flexItems) {
--- a/devtools/client/inspector/flexbox/components/Header.js
+++ b/devtools/client/inspector/flexbox/components/Header.js
@@ -119,17 +119,20 @@ class Header extends PureComponent {
       nodeFront,
     } = flexContainer;
 
     return (
       dom.div({ className: "flex-header devtools-monospace" },
         flexItemShown ?
           dom.button({
             className: "flex-header-button-prev devtools-button",
-            onClick: () => setSelectedNode(nodeFront),
+            onClick: e => {
+              e.stopPropagation();
+              setSelectedNode(nodeFront);
+            },
           })
           :
           null,
         dom.div(
           {
             className: "flex-header-content" +
                        (flexItemShown ? " flex-item-shown" : ""),
           },
--- a/devtools/client/inspector/flexbox/flexbox.js
+++ b/devtools/client/inspector/flexbox/flexbox.js
@@ -13,16 +13,17 @@ const {
   updateFlexboxColor,
   updateFlexboxHighlighted,
 } = require("./actions/flexbox");
 
 loader.lazyRequireGetter(this, "parseURL", "devtools/client/shared/source-utils", true);
 loader.lazyRequireGetter(this, "asyncStorage", "devtools/shared/async-storage");
 
 const FLEXBOX_COLOR = "#9400FF";
+const TELEMETRY_ELEMENT_TYPE_DISPLAYED = "DEVTOOLS_FLEXINSPECTOR_ELEMENT_TYPE_DISPLAYED";
 
 class FlexboxInspector {
   constructor(inspector, window) {
     this.document = window.document;
     this.inspector = inspector;
     this.selection = inspector.selection;
     this.store = inspector.store;
     this.walker = inspector.walker;
@@ -395,16 +396,38 @@ class FlexboxInspector {
     if (!this.isPanelVisible()) {
       return;
     }
 
     this.update();
   }
 
   /**
+   * Track usage of the tool via telemetry.
+   *
+   * @param  {Boolean} isContainerInfoShown
+   *         Whether the flex container accordion is displayed.
+   * @param  {Boolean} isItemInfoShown
+   *         Whether the flex item accordion is displayed.
+   */
+  sendTelemetryProbes(isContainerInfoShown, isItemInfoShown) {
+    const { telemetry } = this.inspector;
+
+    // Log the type of element being shown now (it can either be a container, or an item
+    // or both at the same time, but can never be none of these since this function is
+    // only ever called when something is being displayed).
+    let elementType = isContainerInfoShown ? "container" : "item";
+    if (isContainerInfoShown && isItemInfoShown) {
+      elementType = "both";
+    }
+
+    telemetry.getHistogramById(TELEMETRY_ELEMENT_TYPE_DISPLAYED).add(elementType);
+  }
+
+  /**
    * Updates the flexbox panel by dispatching the new flexbox data. This is called when
    * the layout view becomes visible or a new node is selected and needs to be update
    * with new flexbox data.
    *
    * @param  {FlexboxFront|null} flexboxFront
    *         The FlexboxFront of the flex container for the current node selection.
    */
   async update(flexboxFront) {
@@ -458,16 +481,20 @@ class FlexboxInspector {
           flexItemShown: flexItemShown ? flexItemShown.nodeFront.actorID : null,
           isFlexItemContainer: false,
           nodeFront: containerNodeFront,
           properties: flexboxFront.properties,
         },
         flexItemContainer,
         highlighted,
       }));
+
+      const isContainerInfoShown = !flexItemShown || !!flexItemContainer;
+      const isItemInfoShown = !!flexItemShown || !!flexItemContainer;
+      this.sendTelemetryProbes(isContainerInfoShown, isItemInfoShown);
     } catch (e) {
       // This call might fail if called asynchrously after the toolbox is finished
       // closing.
     }
   }
 }
 
 module.exports = FlexboxInspector;
--- a/toolkit/components/telemetry/Histograms.json
+++ b/toolkit/components/telemetry/Histograms.json
@@ -10410,16 +10410,26 @@
     "alert_emails": ["dev-developer-tools@lists.mozilla.org", "mbalfanz@mozilla.com"],
     "expires_in_version": "66",
     "bug_numbers": [1465424],
     "description": "Indicates if the font editor displayed its UI for a non-variable font or a variable font",
     "releaseChannelCollection": "opt-out",
     "kind": "categorical",
     "labels": ["variable", "nonvariable"]
   },
+  "DEVTOOLS_FLEXINSPECTOR_ELEMENT_TYPE_DISPLAYED": {
+    "record_in_processes": ["main"],
+    "alert_emails": ["dev-developer-tools@lists.mozilla.org", "mbalfanz@mozilla.com"],
+    "expires_in_version": "68",
+    "bug_numbers": [1503197],
+    "description": "Records the type of flex element displayed in the flex inspector (container, item, or both)",
+    "releaseChannelCollection": "opt-out",
+    "kind": "categorical",
+    "labels": ["container", "item", "both"]
+  },
   "BROWSER_IS_USER_DEFAULT": {
     "record_in_processes": ["main"],
     "expires_in_version": "never",
     "kind": "boolean",
     "releaseChannelCollection": "opt-out",
     "description": "The result of the startup default desktop browser check."
   },
   "BROWSER_IS_USER_DEFAULT_ERROR": {