Bug 1914057 - update strings for review checker recommendations and settings, plus other minor UX changes. r=fluent-reviewers,shopping-reviewers,bolsson,Gijs

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

browser/components/shopping/content/recommended-ad.css

@@ -57,3 +57,9 @@
   display: flex;
   justify-content: space-between;
 }
+
+#sponsored-label {
+  font-size: var(--font-size-small);
+  margin-block-start: 8px;
+  color: var(--text-color-deemphasized);
+}

browser/components/shopping/content/recommended-ad.mjs

@@ -142,7 +142,7 @@ class RecommendedAd extends MozLitElement {
           </div>
         </a>
       </shopping-card>
-      <p data-l10n-id="ad-by-fakespot"></p>
+      <p id="sponsored-label" data-l10n-id="shopping-sponsored-label"></p>
     `;
   }
 }

browser/components/shopping/content/settings.css

@@ -26,11 +26,6 @@
     }
   }
 
-  #powered-by-fakespot {
-    font-size: 12px;
-    color: var(--text-color-deemphasized);
-  }
-
   #shopping-settings-toggles-section {
     display: grid;
     row-gap: 8px;
@@ -62,7 +57,6 @@
     }
 
     #shopping-settings-opt-out-section {
-      justify-content: flex-start;
       row-gap: var(--shopping-settings-between-label-and-control-option-gap);
 
       #shopping-settings-opt-out-button {
@@ -72,3 +66,8 @@
     }
   }
 }
+
+#powered-by-fakespot {
+  font-size: var(--font-size-small);
+  color: var(--text-color-deemphasized);
+}

browser/components/shopping/content/settings.mjs

@@ -28,7 +28,6 @@ class ShoppingSettings extends MozLitElement {
       autoOpenToggleEl: "#shopping-settings-auto-open-toggle",
       autoOpenToggleDescriptionEl: "#shopping-auto-open-description",
       dividerEl: ".divider",
-      sidebarEnabledStateEl: "#shopping-settings-sidebar-enabled-state",
       optOutButtonEl: "#shopping-settings-opt-out-button",
       shoppingCardEl: "shopping-card",
       adsLearnMoreLinkEl: "#shopping-ads-learn-more-link",
@@ -159,7 +158,7 @@ class ShoppingSettings extends MozLitElement {
       <shopping-card
         data-l10n-id="shopping-settings-label"
         data-l10n-attrs="label"
-        type=${!this.autoOpenEnabled ? "accordion" : ""}
+        type="accordion"
       >
         <div
           id="shopping-settings-wrapper"
@@ -169,20 +168,14 @@ class ShoppingSettings extends MozLitElement {
           slot="content"
         >
           <section id="shopping-settings-toggles-section">
-            ${adsToggleMarkup} ${autoOpenToggleMarkup}
+            ${autoOpenToggleMarkup} ${adsToggleMarkup}
           </section>
           ${this.autoOpenEnabled
             ? html`<span class="divider" role="separator"></span>`
             : null}
           <section id="shopping-settings-opt-out-section">
-            ${this.autoOpenEnabled
-              ? html`<span
-                  id="shopping-settings-sidebar-enabled-state"
-                  data-l10n-id="shopping-settings-sidebar-enabled-state"
-                ></span>`
-              : null}
             <button
-              class="shopping-button"
+              class="small-button shopping-button"
               id="shopping-settings-opt-out-button"
               data-l10n-id="shopping-settings-opt-out-button"
               @click=${this.onDisableShopping}
@@ -192,7 +185,6 @@ class ShoppingSettings extends MozLitElement {
       </shopping-card>
       <p
         id="powered-by-fakespot"
-        class="deemphasized"
         data-l10n-id="powered-by-fakespot"
         @click=${this.fakespotLinkClicked}
       >

browser/components/shopping/tests/browser/browser_shopping_settings.js

@@ -308,7 +308,10 @@ add_task(async function test_settings_toggle_ad_and_multiple_tabs() {
  */
 add_task(async function test_shopping_settings_experiment_auto_open_disabled() {
   await SpecialPowers.pushPrefEnv({
-    set: [["browser.shopping.experience2023.autoOpen.enabled", false]],
+    set: [
+      ["browser.shopping.experience2023.autoOpen.enabled", false],
+      ["browser.shopping.experience2023.active", true],
+    ],
   });
 
   await BrowserTestUtils.withNewTab(
@@ -420,11 +423,6 @@ add_task(
               ),
               "Settings card should have a special classname with autoOpen pref enabled"
             );
-            is(
-              shoppingSettings.shoppingCardEl?.type,
-              "",
-              "shopping-card type should be default"
-            );
 
             ok(
               shoppingSettings.recommendationsToggleEl,
@@ -441,10 +439,6 @@ add_task(
               "There should be a description for the auto-open toggle"
             );
             ok(shoppingSettings.dividerEl, "There should be a divider");
-            ok(
-              shoppingSettings.sidebarEnabledStateEl,
-              "There should be a message about the sidebar active state"
-            );
 
             ok(
               shoppingSettings.optOutButtonEl,
@@ -506,11 +500,6 @@ add_task(
               ),
               "Settings card should have a special classname with autoOpen pref enabled"
             );
-            is(
-              shoppingSettings.shoppingCardEl?.type,
-              "",
-              "shopping-card type should be default"
-            );
 
             ok(
               !shoppingSettings.recommendationsToggleEl,
@@ -527,10 +516,6 @@ add_task(
               "There should be a description for the auto-open toggle"
             );
             ok(shoppingSettings.dividerEl, "There should be a divider");
-            ok(
-              shoppingSettings.sidebarEnabledStateEl,
-              "There should be a message about the sidebar active state"
-            );
 
             ok(
               shoppingSettings.optOutButtonEl,
@@ -595,10 +580,23 @@ add_task(async function test_settings_auto_open_toggle() {
       let toggleStateChangePromise = ContentTaskUtils.waitForCondition(() => {
         return !autoOpenToggle.hasAttribute("pressed");
       }, "Waiting for auto-open toggle state to be disabled");
+      let autoOpenUserEnabledPromise = ContentTaskUtils.waitForEvent(
+        content.document,
+        "autoOpenEnabledByUserChanged"
+      );
+      let activePrefChange = ContentTaskUtils.waitForCondition(
+        () =>
+          !SpecialPowers.getBoolPref("browser.shopping.experience2023.active"),
+        "Sidebar active pref should be false, but isn't"
+      );
 
       autoOpenToggle.click();
 
-      await toggleStateChangePromise;
+      Promise.all([
+        await toggleStateChangePromise,
+        await autoOpenUserEnabledPromise,
+        await activePrefChange,
+      ]);
 
       ok(
         !SpecialPowers.getBoolPref(

browser/components/storybook/stories/shopping-container.stories.mjs

@@ -88,6 +88,7 @@ const Template = ({
   adsEnabledByUser,
   recommendationData,
   analysisProgress,
+  autoOpenEnabled,
 }) => html`
   <style>
     main {
@@ -114,6 +115,7 @@ const Template = ({
       ?adsEnabledByUser=${adsEnabledByUser}
       .recommendationData=${recommendationData}
       analysisProgress=${analysisProgress}
+      autoOpenEnabled=${autoOpenEnabled}
     >
     </shopping-container>
   </main>

browser/locales/en-US/browser/shopping.ftl

@@ -123,8 +123,6 @@ shopping-settings-auto-open-description-three-sites = When you view products on
 #   $currentSite (String) - The current shopping page name
 shopping-settings-auto-open-description-single-site = When you view products on { $currentSite }
 
-shopping-settings-sidebar-enabled-state = Review Checker is <strong>On</strong>
-
 ## Strings for the adjusted rating component
 
 # "Adjusted rating" means a star rating that has been adjusted to include only
@@ -187,7 +185,7 @@ shopping-unanalyzed-product-analyze-button = Check review quality
 
 more-to-consider-ad-label =
   .label = More to consider
-ad-by-fakespot = Ad by { -fakespot-brand-name }
+shopping-sponsored-label = Sponsored
 
 ## Shopping survey strings.