Bug 1713187 - adding unique button ids r=thecount

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

browser/components/pocket/content/SaveToPocket.jsm

@@ -183,6 +183,7 @@ var SaveToPocket = {
 
   _readerButtonData: {
     id: "pocket-button",
+    telemetryId: "save-to-pocket",
     label: gStrings.formatStringFromName("readerView.savetopocket.label", [
       "Pocket",
     ]),

toolkit/components/narrate/NarrateControls.jsm

@@ -46,6 +46,7 @@ function NarrateControls(win, languagePromise) {
   let toggle = win.document.createElement("li");
   let toggleButton = win.document.createElement("button");
   toggleButton.className = "dropdown-toggle button narrate-toggle";
+  toggleButton.dataset.telemetryId = "reader-listen";
   let tip = win.document.createElement("span");
   let labelText = gStrings.GetStringFromName("listen");
   tip.textContent = labelText;

toolkit/components/reader/AboutReader.jsm

@@ -309,6 +309,7 @@ AboutReader.prototype = {
         ) {
           let btn = this._doc.createElement("button");
           btn.dataset.buttonid = message.data.id;
+          btn.dataset.telemetryId = `reader-${message.data.telemetryId}`;
           btn.className = "button " + message.data.id;
           let tip = this._doc.createElement("span");
           tip.className = "hover-label";
@@ -374,11 +375,20 @@ AboutReader.prototype = {
         }
         break;
       case "click":
-        const buttonLabel = target.attributes.getNamedItem(`aria-label`).value;
+        const buttonLabel = target.attributes.getNamedItem(`data-telemetry-id`)
+          ?.value;
 
-        Services.telemetry.recordEvent("readermode", "button", "click", null, {
-          label: buttonLabel,
-        });
+        if (buttonLabel) {
+          Services.telemetry.recordEvent(
+            "readermode",
+            "button",
+            "click",
+            null,
+            {
+              label: buttonLabel,
+            }
+          );
+        }
 
         if (target.classList.contains("dropdown-toggle")) {
           this._toggleDropdownClicked(aEvent);

toolkit/components/reader/content/aboutReader.html

@@ -18,10 +18,10 @@
   <div id="toolbar" class="toolbar-container">
     <div class="toolbar reader-toolbar">
       <div class="reader-controls">
-        <button class="close-button button "></button>
+        <button class="close-button button " data-telemetry-id="reader-close"></button>
         <ul class="dropdown style-dropdown">
           <li>
-            <button class="dropdown-toggle button style-button"></button>
+            <button class="dropdown-toggle button style-button" data-telemetry-id="reader-type-controls"></button>
           </li>
           <li class="dropdown-popup">
             <div class="dropdown-arrow"></div>