Bug 1923946 - Update sidebar telemetry for resizing and panel toggling r=sidebar-reviewers,sclements

- Simplifies the resize tracking logic so that it hooks the splitter, rather than the browser. This removes the need to debounce and solves the issue of reporting automatic resizes.
- Rounds resize event data to the nearest integer.
- Records hide events whenever current panel is switched.

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

browser/components/sidebar/browser-sidebar.js

@@ -347,27 +347,19 @@ var SidebarController = {
         this._mainResizeObserverAdded = true;
       }
       if (!this._browserResizeObserver) {
-        let debounceTimeout = null;
         this._browserResizeObserver = () => {
           // Report resize events to Glean.
-          if (!this._browserResizeObserverEnabled) {
-            return;
-          }
-          clearTimeout(debounceTimeout);
-          debounceTimeout = setTimeout(() => {
-            const current = this.browser.getBoundingClientRect().width;
-            const previous = this._browserWidth;
-            const percentage = (current / window.innerWidth) * 100;
-            this._browserWidth = current;
-            Glean.sidebar.resize.record({
-              current,
-              previous,
-              percentage,
-            });
-            Glean.sidebar.width.set(current);
-          }, 1000);
+          const current = this.browser.getBoundingClientRect().width;
+          const previous = this._browserWidth;
+          const percentage = (current / window.innerWidth) * 100;
+          Glean.sidebar.resize.record({
+            current: Math.round(current),
+            previous: Math.round(previous),
+            percentage: Math.round(percentage),
+          });
+          this._recordBrowserSize();
         };
-        this.browser.addEventListener("resize", this._browserResizeObserver);
+        this._splitter.addEventListener("command", this._browserResizeObserver);
       }
       // Record Glean metrics.
       this.recordVisibilitySetting();
@@ -443,7 +435,7 @@ var SidebarController = {
       // setup by reactive controllers will also be removed.
       this.sidebarMain.remove();
     }
-    this.browser.removeEventListener("resize", this._browserResizeObserver);
+    this._splitter.removeEventListener("command", this._browserResizeObserver);
   },
 
   /**
@@ -784,10 +776,9 @@ var SidebarController = {
   },
 
   /**
-   * Start listening for panel resize events, which will be reported to Glean.
+   * Report the current browser width to Glean, and store it internally.
    */
-  _enableBrowserResizeObserver() {
-    this._browserResizeObserverEnabled = true;
+  _recordBrowserSize() {
     this._browserWidth = this.browser.getBoundingClientRect().width;
     Glean.sidebar.width.set(this._browserWidth);
   },
@@ -1362,6 +1353,11 @@ var SidebarController = {
    * @returns {Promise<boolean>}
    */
   async show(commandID, triggerNode) {
+    if (this.currentID) {
+      // If there is currently a panel open, we are about to hide it in order
+      // to show another one, so record a "hide" event on the current panel.
+      this._recordPanelToggle(this.currentID, false);
+    }
     this._recordPanelToggle(commandID, true);
 
     // Extensions without private window access wont be in the
@@ -1484,7 +1480,7 @@ var SidebarController = {
 
               // Now that the currentId is updated, fire a show event.
               this._fireShowEvent();
-              this._enableBrowserResizeObserver();
+              this._recordBrowserSize();
             }, 0);
           },
           { capture: true, once: true }
@@ -1494,7 +1490,7 @@ var SidebarController = {
 
         // Now that the currentId is updated, fire a show event.
         this._fireShowEvent();
-        this._enableBrowserResizeObserver();
+        this._recordBrowserSize();
       }
     });
   },
@@ -1511,7 +1507,6 @@ var SidebarController = {
     }
 
     this.hideSwitcherPanel();
-    this._browserResizeObserverEnabled = false;
     this._recordPanelToggle(this.currentID, false);
     if (this.sidebarRevampEnabled) {
       this._box.dispatchEvent(new CustomEvent("sidebar-hide"));

browser/components/sidebar/tests/browser/browser_glean_sidebar.js

@@ -12,6 +12,11 @@ ChromeUtils.defineESModuleGetters(lazy, {
     "resource:///modules/firefox-view-tabs-setup-manager.sys.mjs",
 });
 
+add_setup(async () => {
+  Services.fog.testResetFOG();
+  SidebarController.init();
+  await TestUtils.waitForTick();
+});
 registerCleanupFunction(() => {
   while (gBrowser.tabs.length > 1) {
     BrowserTestUtils.removeTab(gBrowser.tabs[0]);
@@ -19,7 +24,6 @@ registerCleanupFunction(() => {
 });
 
 add_task(async function test_metrics_initialized() {
-  await SidebarController.promiseInitialized;
   const metrics = ["displaySettings", "positionSettings", "tabsLayout"];
   for (const metric of metrics) {
     Assert.notEqual(
@@ -50,7 +54,7 @@ add_task(async function test_sidebar_expand() {
   Assert.equal(events?.length, 1, "One event was reported.");
 });
 
-async function testSidebarToggle(commandID, gleanEvent) {
+async function testSidebarToggle(commandID, gleanEvent, otherCommandID) {
   info(`Load the ${commandID} panel.`);
   await SidebarController.show(commandID);
 
@@ -62,8 +66,13 @@ async function testSidebarToggle(commandID, gleanEvent) {
     "Event indicates that the panel was opened."
   );
 
-  info(`Unload the ${commandID} panel.`);
-  SidebarController.hide();
+  if (otherCommandID) {
+    info(`Load the ${otherCommandID} panel.`);
+    await SidebarController.show(otherCommandID);
+  } else {
+    info(`Unload the ${commandID} panel.`);
+    SidebarController.hide();
+  }
 
   events = gleanEvent.testGetValue();
   Assert.equal(events?.length, 2, "Two events were reported.");
@@ -72,10 +81,17 @@ async function testSidebarToggle(commandID, gleanEvent) {
     "false",
     "Event indicates that the panel was closed."
   );
+  if (otherCommandID) {
+    SidebarController.hide();
+  }
 }
 
 add_task(async function test_history_sidebar_toggle() {
-  await testSidebarToggle("viewHistorySidebar", Glean.history.sidebarToggle);
+  await testSidebarToggle(
+    "viewHistorySidebar",
+    Glean.history.sidebarToggle,
+    "viewBookmarksSidebar"
+  );
 });
 
 add_task(async function test_synced_tabs_sidebar_toggle() {
@@ -340,7 +356,7 @@ add_task(async function test_customize_firefox_settings_clicked() {
   const component = contentDocument.querySelector("sidebar-customize");
 
   EventUtils.synthesizeMouseAtCenter(
-    component.shadowRoot.querySelector("#manage-settings"),
+    component.shadowRoot.querySelector("#manage-settings > a"),
     {},
     contentWindow
   );
@@ -354,6 +370,7 @@ add_task(async function test_sidebar_resize() {
   await SidebarController.show("viewHistorySidebar");
   const originalWidth = SidebarController._box.style.width;
   SidebarController._box.style.width = "500px";
+  SidebarController._splitter.dispatchEvent(new CustomEvent("command"));
 
   const events = await TestUtils.waitForCondition(
     () => Glean.sidebar.resize.testGetValue(),