devtools/client/inspector/markup/test/browser_markup_grid_display_badge_telemetry.js

   1 /* Any copyright is dedicated to the Public Domain.
   2  http://creativecommons.org/publicdomain/zero/1.0/ */
   3
   4 "use strict";
   5
   6 // Test that the telemetry count is correct when the grid highlighter is activated from
   7 // the markup view.
   8
   9 const TEST_URI = `
  10   <style type="text/css">
  11     #grid {
  12       display: grid;
  13     }
  14   </style>
  15   <div id="grid"></div>
  16 `;
  17
  18 add_task(async function() {
  19   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
  20   startTelemetry();
  21   const { inspector } = await openLayoutView();
  22   const { highlighters, store } = inspector;
  23
  24   await selectNode("#grid", inspector);
  25   const gridContainer = await getContainerForSelector("#grid", inspector);
  26   const gridDisplayBadge = gridContainer.elt.querySelector(
  27     ".inspector-badge.interactive[data-display]");
  28
  29   info("Toggling ON the CSS grid highlighter from the grid display badge.");
  30   const onHighlighterShown = highlighters.once("grid-highlighter-shown");
  31   const onCheckboxChange = waitUntilState(store, state =>
  32     state.grids.length === 1 &&
  33     state.grids[0].highlighted);
  34   gridDisplayBadge.click();
  35   await onHighlighterShown;
  36   await onCheckboxChange;
  37
  38   checkResults();
  39 });
  40
  41 function checkResults() {
  42   checkTelemetry("devtools.markup.gridinspector.opened", "", 1, "scalar");
  43 }