Add new telemetry to the old plus button menu

docs/metrics.md

@@ -68,6 +68,16 @@ Containers will use Test Pilot Telemetry with no batching of data.  Details
 of when pings are sent are below, along with examples of the `payload` portion
 of a `testpilottest` telemetry ping for each scenario.
 
+* The user shows the new tab menu
+
+```js
+  {
+    "uuid": <uuid>,
+    "event": "show-plus-button-menu",
+    "eventSource": ["plus-button"]
+  }
+```
+
 * The user clicks on a container name to open a tab in that container
 
 ```js
@@ -76,7 +86,7 @@ of a `testpilottest` telemetry ping for each scenario.
     "userContextId": <userContextId>,
     "clickedContainerTabCount": <number-of-tabs-in-the-container>,
     "event": "open-tab",
-    "eventSource": ["tab-bar"|"pop-up"|"file-menu"|"alltabs-menu"]
+    "eventSource": ["tab-bar"|"pop-up"|"file-menu"|"alltabs-menu"|"plus-button"]
   }
 ```
 
@@ -269,7 +279,7 @@ local schema = {
 
 ### Valid data should be enforced on the server side:
 
-* `eventSource` should be one of `tab-bar`, `pop-up`, or `file-menu`.
+* `eventSource` should be one of `tab-bar`, `pop-up`, `file-menu`, "alltabs-nmenu" or "plus-button".
 
 All Mozilla data is kept by default for 180 days and in accordance with our
 privacy policies.

index.js

@@ -243,18 +243,15 @@ const ContainerService = {
     }
 
     tabs.on("open", tab => {
-      this._hideAllPanels();
       this._restyleTab(tab);
       this._remapTab(tab);
     });
 
     tabs.on("close", tab => {
-      this._hideAllPanels();
       this._remapTab(tab);
     });
 
     tabs.on("activate", tab => {
-      this._hideAllPanels();
       this._restyleActiveTab(tab).catch(() => {});
       this._configureActiveWindows();
       this._remapTab(tab);
@@ -1102,9 +1099,42 @@ ContainerWindow.prototype = {
     this._window = window;
     this._tabsElement = this._window.document.getElementById("tabbrowser-tabs");
     this._style = Style({ uri: self.data.url("usercontext.css") });
+    this._plusButton = this._window.document.getAnonymousElementByAttribute(this._tabsElement, "anonid", "tabs-newtab-button");
+    this._overflowPlusButton = this._window.document.getElementById("new-tab-button");
+
+    // Only hack the normal plus button as the alltabs is done elsewhere
+    this.attachMenuEvent("plus-button", this._plusButton);
+
     attachTo(this._style, this._window);
   },
 
+  attachMenuEvent(source, button) {
+    const popup = button.querySelector(".new-tab-popup");
+    popup.addEventListener("popupshown", () => {
+      ContainerService.sendTelemetryPayload({
+        "event": "show-plus-button-menu",
+        "eventSource": source
+      });
+      popup.querySelector("menuseparator").remove();
+      const popupMenuItems = [...popup.querySelectorAll("menuitem")];
+      popupMenuItems.forEach((item) => {
+        const userContextId = item.getAttribute("data-usercontextid");
+        if (!userContextId) {
+          item.remove();
+        }
+        item.setAttribute("command", "");
+        item.addEventListener("command", (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          ContainerService.openTab({
+            userContextId: userContextId,
+            source: source
+          });
+        });
+      });
+    });
+  },
+
   configure() {
     return Promise.all([
       this._configureActiveTab(),