Bug 1868604 - Only record reasonable widths for shopping sidebar. r=shopping-reviewers,Gijs,desktop-theme-reviewers,dao

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

browser/components/shopping/content/shopping-sidebar.js

@@ -61,8 +61,17 @@
       this.#initialized = true;
     }
 
-    resizeObserverFn() {
-      Services.prefs.setIntPref(SHOPPING_SIDEBAR_WIDTH_PREF, this.scrollWidth);
+    resizeObserverFn(entries) {
+      for (let entry of entries) {
+        if (entry.contentBoxSize[0].inlineSize < 1) {
+          return;
+        }
+
+        Services.prefs.setIntPref(
+          SHOPPING_SIDEBAR_WIDTH_PREF,
+          entry.contentBoxSize[0].inlineSize
+        );
+      }
     }
   }
 

browser/components/shopping/tests/browser/browser.toml

@@ -55,6 +55,8 @@ prefs = [
 
 ["browser_shopping_settings.js"]
 
+["browser_shopping_sidebar.js"]
+
 ["browser_shopping_survey.js"]
 
 ["browser_shopping_urlbar.js"]

browser/components/shopping/tests/browser/browser_shopping_sidebar.js

@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const SHOPPING_SIDEBAR_WIDTH_PREF =
+  "browser.shopping.experience2023.sidebarWidth";
+
+add_task(async function test_sidebar_opens_correct_size() {
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["toolkit.shopping.ohttpRelayURL", ""],
+      ["toolkit.shopping.ohttpConfigURL", ""],
+      ["browser.shopping.experience2023.active", true],
+      [SHOPPING_SIDEBAR_WIDTH_PREF, 0],
+    ],
+  });
+
+  let tab = await BrowserTestUtils.openNewForegroundTab({
+    gBrowser,
+    opening: PRODUCT_TEST_URL,
+  });
+
+  let browserPanel = gBrowser.getPanel(tab.linkedBrowser);
+  let sidebar = browserPanel.querySelector("shopping-sidebar");
+
+  await TestUtils.waitForCondition(() => sidebar.scrollWidth === 320);
+
+  is(sidebar.scrollWidth, 320, "Shopping sidebar should default to 320px");
+
+  let prefChangedPromise = TestUtils.waitForPrefChange(
+    SHOPPING_SIDEBAR_WIDTH_PREF
+  );
+  sidebar.style.width = "345px";
+  await TestUtils.waitForCondition(() => sidebar.scrollWidth === 345);
+  await prefChangedPromise;
+
+  let shoppingButton = document.getElementById("shopping-sidebar-button");
+  shoppingButton.click();
+  await BrowserTestUtils.waitForMutationCondition(
+    shoppingButton,
+    {
+      attributeFilter: ["shoppingsidebaropen"],
+    },
+    () => shoppingButton.getAttribute("shoppingsidebaropen") == "false"
+  );
+
+  shoppingButton.click();
+  await BrowserTestUtils.waitForMutationCondition(
+    shoppingButton,
+    {
+      attributeFilter: ["shoppingsidebaropen"],
+    },
+    () => shoppingButton.getAttribute("shoppingsidebaropen") == "true"
+  );
+
+  await TestUtils.waitForCondition(() => sidebar.scrollWidth === 345);
+
+  is(
+    sidebar.scrollWidth,
+    345,
+    "Shopping sidebar should open to previous set width of 345"
+  );
+
+  gBrowser.removeTab(tab);
+});

browser/themes/shared/browser-shared.css

@@ -1166,4 +1166,5 @@ shopping-sidebar {
   min-width: 16.92em;
   max-width: 32.31em;
   width: 320px;
+  box-sizing: content-box;
 }