Bug 1807898 - [devtools] Reuse toolbox's Telemetry instance from all panels. r=devtools-reviewers,nchevobbe

This was slightly more tricky in the debugger as the toolbox's telemetry should be provided to the telemetry module.

Differential Revision: https://phabricator.services.mozilla.com/D165934

devtools/client/accessibility/panel.js

@@ -5,8 +5,6 @@
 
 const EventEmitter = require("resource://devtools/shared/event-emitter.js");
 
-const Telemetry = require("resource://devtools/client/shared/telemetry.js");
-
 loader.lazyRequireGetter(
   this,
   "AccessibilityProxy",
@@ -83,7 +81,7 @@ AccessibilityPanel.prototype = {
       resolver = resolve;
     });
 
-    this._telemetry = new Telemetry();
+    this._telemetry = this._toolbox.telemetry;
     this.panelWin.gTelemetry = this._telemetry;
 
     this._toolbox.on("select", this.onPanelVisibilityChange);

devtools/client/application/initializer.js

@@ -37,7 +37,6 @@ const actions = require("resource://devtools/client/application/src/actions/inde
 const {
   WorkersListener,
 } = require("resource://devtools/client/shared/workers-listener.js");
-const Telemetry = require("resource://devtools/client/shared/telemetry.js");
 
 const {
   services,
@@ -70,8 +69,7 @@ window.Application = {
     this._commands = commands;
     this.client = commands.client;
 
-    this.telemetry = new Telemetry();
-    this.store = configureStore(this.telemetry, toolbox.sessionId);
+    this.store = configureStore(toolbox.telemetry, toolbox.sessionId);
     this.actions = bindActionCreators(actions, this.store.dispatch);
 
     services.init(this.toolbox);

devtools/client/debugger/src/main.js

@@ -6,6 +6,7 @@ import * as firefox from "./client/firefox";
 
 import { asyncStore, verifyPrefSchema, prefs } from "./utils/prefs";
 import { setupHelper } from "./utils/dbg";
+import { setToolboxTelemetry } from "./utils/telemetry";
 
 import {
   bootstrapApp,
@@ -112,6 +113,8 @@ export async function bootstrap({
     client: firefox.clientCommands,
   });
 
+  setToolboxTelemetry(panel.toolbox.telemetry);
+
   bootstrapApp(store, panel.getToolboxStore(), {
     fluentBundles,
     toolboxDoc: panel.panelWin.parent.document,

devtools/client/debugger/src/utils/telemetry.js

@@ -42,11 +42,18 @@
  * );
  */
 
-const Telemetry = require("devtools/client/shared/telemetry");
-
 import { isNode } from "./environment";
 
-const telemetry = new Telemetry();
+let telemetry;
+
+if (isNode()) {
+  const Telemetry = require("devtools/client/shared/telemetry");
+  telemetry = new Telemetry();
+}
+
+export function setToolboxTelemetry(toolboxTelemetry) {
+  telemetry = toolboxTelemetry;
+}
 
 /**
  * @memberof utils/telemetry

devtools/client/framework/toolbox-tabs-order-manager.js

@@ -10,7 +10,6 @@ const { AddonManager } = ChromeUtils.import(
 const {
   gDevTools,
 } = require("resource://devtools/client/framework/devtools.js");
-const Telemetry = require("resource://devtools/client/shared/telemetry.js");
 const TABS_REORDERED_SCALAR = "devtools.toolbox.tabs_reordered";
 const PREFERENCE_NAME = "devtools.toolbox.tabsOrder";
 
@@ -28,8 +27,6 @@ class ToolboxTabsOrderManager {
     this.onMouseUp = this.onMouseUp.bind(this);
 
     Services.prefs.addObserver(PREFERENCE_NAME, this.onOrderUpdated);
-
-    this.telemetry = new Telemetry();
   }
 
   async destroy() {
@@ -196,7 +193,7 @@ class ToolboxTabsOrderManager {
       // "How frequently are the tabs re-ordered, also which tabs get re-ordered?"
       const toolId =
         this.dragTarget.dataset.extensionId || this.dragTarget.dataset.id;
-      this.telemetry.keyedScalarAdd(TABS_REORDERED_SCALAR, toolId, 1);
+      this.toolbox.telemetry.keyedScalarAdd(TABS_REORDERED_SCALAR, toolId, 1);
     }
 
     this.eventTarget.removeEventListener("mousemove", this.onMouseMove);

devtools/client/inspector/shared/tooltips-overlay.js

@@ -61,12 +61,6 @@ loader.lazyRequireGetter(
   "resource://devtools/client/shared/widgets/tooltip/css-query-container-tooltip-helper.js",
   false
 );
-loader.lazyRequireGetter(
-  this,
-  "Telemetry",
-  "resource://devtools/client/shared/telemetry.js",
-  false
-);
 
 const PREF_IMAGE_TOOLTIP_SIZE = "devtools.inspector.imagePreviewTooltipSize";
 
@@ -90,7 +84,6 @@ const TOOLTIP_SHOWN_SCALAR = "devtools.tooltip.shown";
 function TooltipsOverlay(view) {
   this.view = view;
   this._instances = new Map();
-  this.telemetry = new Telemetry();
 
   this._onNewSelection = this._onNewSelection.bind(this);
   this.view.inspector.selection.on("new-node-front", this._onNewSelection);
@@ -438,7 +431,7 @@ TooltipsOverlay.prototype = {
    *        The node type from `devtools/client/inspector/shared/node-types` or the Tooltip type.
    */
   sendOpenScalarToTelemetry(type) {
-    this.telemetry.keyedScalarAdd(TOOLTIP_SHOWN_SCALAR, type, 1);
+    this.view.inspector.telemetry.keyedScalarAdd(TOOLTIP_SHOWN_SCALAR, type, 1);
   },
 
   /**
@@ -549,7 +542,6 @@ TooltipsOverlay.prototype = {
 
     this.view.inspector.selection.off("new-node-front", this._onNewSelection);
     this.view = null;
-    this.telemetry = null;
 
     this._isDestroyed = true;
   },

devtools/client/netmonitor/src/api.js

@@ -20,9 +20,6 @@ const {
 } = require("resource://devtools/client/netmonitor/src/constants.js");
 const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
 
-// Telemetry
-const Telemetry = require("resource://devtools/client/shared/telemetry.js");
-
 const {
   getDisplayedRequestById,
   getSortedRequests,
@@ -41,18 +38,11 @@ function NetMonitorAPI() {
   // Connector to the backend.
   this.connector = new Connector();
 
-  // Telemetry
-  this.telemetry = new Telemetry();
-
-  // Configure store/state object.
-  this.store = configureStore(this.connector, this.telemetry);
-
   // List of listeners for `devtools.network.onRequestFinished` WebExt API
   this._requestFinishedListeners = new Set();
 
   // Bind event handlers
   this.onPayloadReady = this.onPayloadReady.bind(this);
-  this.actions = bindActionCreators(Actions, this.store.dispatch);
 }
 
 NetMonitorAPI.prototype = {
@@ -64,6 +54,10 @@ NetMonitorAPI.prototype = {
 
     this.toolbox = toolbox;
 
+    // Configure store/state object.
+    this.store = configureStore(this.connector, this.toolbox.telemetry);
+    this.actions = bindActionCreators(Actions, this.store.dispatch);
+
     // Register listener for new requests (utilized by WebExtension API).
     this.on(EVENTS.PAYLOAD_READY, this.onPayloadReady);
 

devtools/client/webconsole/webconsole-wrapper.js

@@ -26,7 +26,6 @@ const {
   getMessage,
   getAllNetworkMessagesUpdateById,
 } = require("resource://devtools/client/webconsole/selectors/messages.js");
-const Telemetry = require("resource://devtools/client/shared/telemetry.js");
 
 const EventEmitter = require("resource://devtools/shared/event-emitter.js");
 const App = createFactory(
@@ -95,7 +94,8 @@ class WebConsoleWrapper {
     this.queuedMessageUpdates = [];
     this.queuedRequestUpdates = [];
     this.throttledDispatchPromise = null;
-    this.telemetry = new Telemetry();
+
+    this.telemetry = this.hud.telemetry;
   }
 
   #serviceContainer;

devtools/client/webconsole/webconsole.js

@@ -75,7 +75,9 @@ class WebConsole {
     this.hudId = "hud_" + ++gHudId;
     this.browserWindow = DevToolsUtils.getTopWindow(this.chromeWindow);
     this.isBrowserConsole = isBrowserConsole;
-    this.telemetry = new Telemetry();
+
+    // On the browser console, where we don't have a toolbox, we instantiate a dedicated Telemetry instance.
+    this.telemetry = toolbox?.telemetry || new Telemetry();
 
     const element = this.browserWindow.document.documentElement;
     if (element.getAttribute("windowtype") != gDevTools.chromeWindowType) {