Bug 2063209 - [devtools] Telemetry for stylesheet usage in the style editor r=devtools-reviewers,jdescottes

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

devtools/client/framework/toolbox.js

@@ -4750,7 +4750,7 @@ class Toolbox extends EventEmitter {
       Glean.devtoolsDebuggerStylesheets.linksOpenedInDebuggerCount.add(1);
       return viewSource.viewSourceInDebugger(this, url, line, column, null);
     }
-
+    Glean.devtoolsStyleeditorStylesheets.linksOpenedInStyleEditorCount.add(1);
     return viewSource.viewSourceInStyleEditor(this, url, line, column);
   }
 
@@ -4786,7 +4786,7 @@ class Toolbox extends EventEmitter {
         stylesheetResource.resourceId
       );
     }
-
+    Glean.devtoolsStyleeditorStylesheets.linksOpenedInStyleEditorCount.add(1);
     return viewSource.viewSourceInStyleEditor(
       this,
       stylesheetResource,

devtools/client/shared/metrics.yaml

@@ -3146,3 +3146,50 @@ devtools.debugger.stylesheets:
       - devtools-telemetry-alerts@mozilla.com
       - hmanilla@mozilla.com
     expires: never
+
+devtools.styleeditor.stylesheets:
+  links_opened_in_style_editor_count:
+    type: counter
+    description: >
+      Number of times stylesheets link from another panel opens
+      the stylesheet in the style editor.
+    bugs:
+      - https://bugzil.la/2063209
+    data_reviews:
+      - https://bugzil.la/2063209
+    data_sensitivity:
+      - interaction
+    notification_emails:
+      - devtools-telemetry-alerts@mozilla.com
+      - hmanilla@mozilla.com
+    expires: never
+
+  stylesheets_edited_count:
+    type: counter
+    description: >
+      Number of unique stylesheets edited in the style editor.
+    bugs:
+      - https://bugzil.la/2063209
+    data_reviews:
+      - https://bugzil.la/2063209
+    data_sensitivity:
+      - interaction
+    notification_emails:
+      - devtools-telemetry-alerts@mozilla.com
+      - hmanilla@mozilla.com
+    expires: never
+
+  stylesheets_opened_count:
+    type: counter
+    description: >
+      Number of times stylesheets have been selected and opened in the style editor.
+    bugs:
+      - https://bugzil.la/2063209
+    data_reviews:
+      - https://bugzil.la/2063209
+    data_sensitivity:
+      - interaction
+    notification_emails:
+      - devtools-telemetry-alerts@mozilla.com
+      - hmanilla@mozilla.com
+    expires: never

devtools/client/styleeditor/StyleEditorUI.sys.mjs

@@ -1844,7 +1844,7 @@ export class StyleEditorUI extends EventEmitter {
       editor.onShow(options);
 
       this.#updatePrettyPrintButton();
-
+      Glean.devtoolsStyleeditorStylesheets.stylesheetsOpenedCount.add(1);
       this.emit("editor-selected", editor);
     } catch (e) {
       console.error(e);

devtools/client/styleeditor/StyleSheetEditor.sys.mjs

@@ -99,6 +99,7 @@ export class StyleSheetEditor extends EventEmitter {
     this._window = win;
     this._isNew = this.styleSheet.isNew;
     this.styleSheetFriendlyIndex = styleSheetFriendlyIndex;
+    this._telemetryEditedPingForSource = false;
 
     // True when we've just set the editor text based on a style-applied
     // event from the StyleSheetActor.
@@ -655,6 +656,12 @@ export class StyleSheetEditor extends EventEmitter {
         this.transitionsEnabled,
         STYLE_SHEET_UPDATE_CAUSED_BY_STYLE_EDITOR
       );
+      // This tries to ensure only one ping per resource sent to Glean,
+      // even if the user edits the same source multiple times.
+      if (!this._telemetryEditedPingForSource) {
+        Glean.devtoolsStyleeditorStylesheets.stylesheetsEditedCount.add(1);
+        this._telemetryEditedPingForSource = true;
+      }
 
       // Clear any existing mappings from automatic CSS prettification
       // because they were likely invalided by manually editing the stylesheet.

devtools/client/styleeditor/test/browser.toml

@@ -245,6 +245,8 @@ fail-if = [
 
 ["browser_styleeditor_syncIntoRuleView.js"]
 
+["browser_styleeditor_telemetry.js"]
+
 ["browser_styleeditor_transition_rule.js"]
 fail-if = [
   "a11y_checks", # Bug 1849028 clicked element may not be focusable and/or labeled

devtools/client/styleeditor/test/browser_styleeditor_telemetry.js

@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Assert the functionality of telemetry probes in the style editor.
+add_task(async function testStylesheetLinksToStyleEditorTelemetry() {
+  Services.fog.testResetFOG();
+  // Make sure the style sheets will open in the style editor.
+  await pushPref("devtools.debugger.features.stylesheets-in-debugger", false);
+
+  await addTab(
+    "data:text/html,<style>body { background: red; }</style><body>css changes</body>"
+  );
+
+  const { toolbox } = await openStyleEditor();
+  const { inspector, view: ruleView } = await openRuleView();
+
+  await selectNode("body", inspector);
+
+  info(
+    "Find the style link in the rule view and click it to open in the style editor"
+  );
+  const link = getRuleViewLinkByIndex(ruleView, 1);
+  is(
+    link.querySelector(".ruleview-rule-source-label").textContent,
+    "inline:1",
+    "The link text is correct"
+  );
+
+  link.scrollIntoView();
+  link.click();
+
+  await toolbox.once("styleeditor-selected");
+
+  is(
+    Glean.devtoolsStyleeditorStylesheets.linksOpenedInStyleEditorCount.testGetValue(),
+    1,
+    "The links opened in style editor count is 1"
+  );
+});
+
+// Assert the functionality of telemetry probes in the style editor when a style sheet is selected.
+add_task(async function testSelectStyleSheetTelemetry() {
+  Services.fog.testResetFOG();
+  const { ui } = await openStyleEditorForURL(TEST_BASE_HTTPS + "simple.html");
+  const editor = ui.editors[1];
+
+  info("Selecting style sheet #1.");
+  await ui.selectStyleSheet(editor.styleSheet, 5);
+
+  // Assert the telemetry counter for style sheet opened in style editor is incremented.
+  // 1 from the pre-selected style sheet, and 1 from the selectStyleSheet call.
+  await waitFor(
+    () =>
+      Glean.devtoolsStyleeditorStylesheets.stylesheetsOpenedCount.testGetValue() ===
+      2,
+    "The style sheet opened in the style editor count is 2"
+  );
+});
+
+// Assert the functionality of telemetry probes in the style editor when a style sheet is edited.
+add_task(async function testEditStyleSheetTelemetry() {
+  Services.fog.testResetFOG();
+  const { ui } = await openStyleEditorForURL(TEST_BASE_HTTPS + "simple.html");
+  const editor = ui.editors[1];
+
+  info("Selecting style sheet #1.");
+  await ui.selectStyleSheet(editor.styleSheet, 5);
+
+  await waitUntil(() => editor.sourceEditor);
+
+  const onStyleApplied = editor.once("style-applied");
+  editor.sourceEditor.setText("body { background: red; }");
+  await onStyleApplied;
+
+  await waitFor(
+    () =>
+      Glean.devtoolsStyleeditorStylesheets.stylesheetsEditedCount.testGetValue() ===
+      1,
+    "The style sheet edited in the style editor count is 1"
+  );
+});