Backed out 3 changesets (bug 1914057) for causing mochitests failures in browser_recommended_ad_test.js. CLOSED TREE

Backed out changeset 9d215f25967c (bug 1914057)
Backed out changeset 4105f16f245b (bug 1914057)
Backed out changeset 873a53c675ba (bug 1914057)

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

@@ -57,9 +57,3 @@
   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

@@ -24,7 +24,6 @@ class RecommendedAd extends MozLitElement {
       linkEl: "#recommended-ad-wrapper",
       priceEl: "#price",
       ratingEl: "moz-five-star",
-      sponsoredLabelEl: "#sponsored-label",
     };
   }
 
@@ -143,14 +142,7 @@ class RecommendedAd extends MozLitElement {
           </div>
         </a>
       </shopping-card>
-      ${
+      <p data-l10n-id="ad-by-fakespot"></p>
-        this.product.sponsored
-          ? html`<p
-              id="sponsored-label"
-              data-l10n-id="shopping-sponsored-label"
-            ></p>`
-          : null
-      }
     `;
   }
 }

browser/components/shopping/content/settings.css

@@ -26,6 +26,11 @@
     }
   }
 
+  #powered-by-fakespot {
+    font-size: 12px;
+    color: var(--text-color-deemphasized);
+  }
+
   #shopping-settings-toggles-section {
     display: grid;
     row-gap: 8px;
@@ -57,6 +62,7 @@
     }
 
     #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 {
@@ -66,8 +72,3 @@
     }
   }
 }
-
-#powered-by-fakespot {
-  font-size: var(--font-size-small);
-  color: var(--text-color-deemphasized);
-}

browser/components/shopping/content/settings.mjs

@@ -28,6 +28,7 @@ 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",
@@ -82,11 +83,11 @@ class ShoppingSettings extends MozLitElement {
           <moz-toggle
             id="shopping-settings-recommendations-toggle"
             ?pressed=${this.adsEnabledByUser}
-            data-l10n-id="shopping-settings-recommendations-toggle2"
+            data-l10n-id="shopping-settings-recommendations-toggle"
             data-l10n-attrs="label"
             @toggle=${this.onToggleRecommendations}>
           </moz-toggle/>
-          <span id="shopping-ads-learn-more" data-l10n-id="shopping-settings-recommendations-learn-more3">
+          <span id="shopping-ads-learn-more" data-l10n-id="shopping-settings-recommendations-learn-more2">
             <a
               id="shopping-ads-learn-more-link"
               target="_blank"
@@ -158,7 +159,7 @@ class ShoppingSettings extends MozLitElement {
       <shopping-card
         data-l10n-id="shopping-settings-label"
         data-l10n-attrs="label"
-        type="accordion"
+        type=${!this.autoOpenEnabled ? "accordion" : ""}
       >
         <div
           id="shopping-settings-wrapper"
@@ -168,14 +169,20 @@ class ShoppingSettings extends MozLitElement {
           slot="content"
         >
           <section id="shopping-settings-toggles-section">
-            ${autoOpenToggleMarkup} ${adsToggleMarkup}
+            ${adsToggleMarkup} ${autoOpenToggleMarkup}
           </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="small-button shopping-button"
+              class="shopping-button"
               id="shopping-settings-opt-out-button"
               data-l10n-id="shopping-settings-opt-out-button"
               @click=${this.onDisableShopping}
@@ -185,6 +192,7 @@ 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_recommended_ad_test.js

@@ -69,119 +69,3 @@ add_task(async function test_ads_requested_after_enabled() {
     }
   );
 });
-
-/**
- * Tests that the sponsored label only appears if served sponsored content.
- */
-add_task(async function test_sponsored_label_visible() {
-  await SpecialPowers.pushPrefEnv({
-    set: [
-      ["browser.shopping.experience2023.ads.enabled", true],
-      ["browser.shopping.experience2023.ads.userEnabled", true],
-      ["browser.shopping.experience2023.autoOpen.enabled", true],
-      ["toolkit.shopping.ohttpRelayURL", ""],
-      ["toolkit.shopping.ohttpConfigURL", ""],
-    ],
-  });
-  await BrowserTestUtils.withNewTab(
-    {
-      url: PRODUCT_TEST_URL,
-      gBrowser,
-    },
-    async browser => {
-      let sidebar = gBrowser
-        .getPanel(browser)
-        .querySelector("shopping-sidebar");
-      Assert.ok(sidebar, "Sidebar should exist");
-      Assert.ok(
-        BrowserTestUtils.isVisible(sidebar),
-        "Sidebar should be visible."
-      );
-      info("Waiting for sidebar to update.");
-      await promiseSidebarUpdated(sidebar, PRODUCT_TEST_URL);
-
-      await SpecialPowers.spawn(
-        sidebar.querySelector("browser"),
-        [],
-        async () => {
-          let shoppingContainer =
-            content.document.querySelector(
-              "shopping-container"
-            ).wrappedJSObject;
-
-          await shoppingContainer.updateComplete;
-
-          let recommendedCard = shoppingContainer.recommendedAdEl;
-          await recommendedCard.updateComplete;
-          Assert.ok(recommendedCard, "Recommended card should exist");
-          Assert.ok(
-            ContentTaskUtils.isVisible(recommendedCard),
-            "Recommended card is visible"
-          );
-          Assert.ok(
-            recommendedCard.sponsoredLabelEl,
-            "Sponsored label should exist"
-          );
-        }
-      );
-    }
-  );
-});
-
-/**
- * Tests that the sponsored label does not appear if served a recommendation.
- */
-add_task(async function test_sponsored_label_hidden() {
-  await SpecialPowers.pushPrefEnv({
-    set: [
-      ["browser.shopping.experience2023.ads.enabled", true],
-      ["browser.shopping.experience2023.ads.userEnabled", true],
-      ["browser.shopping.experience2023.autoOpen.enabled", true],
-      ["toolkit.shopping.ohttpRelayURL", ""],
-      ["toolkit.shopping.ohttpConfigURL", ""],
-    ],
-  });
-  await BrowserTestUtils.withNewTab(
-    {
-      url: PRODUCT_TEST_URL_NOT_SPONSORED,
-      gBrowser,
-    },
-    async browser => {
-      let sidebar = gBrowser
-        .getPanel(browser)
-        .querySelector("shopping-sidebar");
-      Assert.ok(sidebar, "Sidebar should exist");
-      Assert.ok(
-        BrowserTestUtils.isVisible(sidebar),
-        "Sidebar should be visible."
-      );
-      info("Waiting for sidebar to update.");
-      await promiseSidebarUpdated(sidebar, PRODUCT_TEST_URL_NOT_SPONSORED);
-
-      await SpecialPowers.spawn(
-        sidebar.querySelector("browser"),
-        [],
-        async () => {
-          let shoppingContainer =
-            content.document.querySelector(
-              "shopping-container"
-            ).wrappedJSObject;
-
-          await shoppingContainer.updateComplete;
-
-          let recommendedCard = shoppingContainer.recommendedAdEl;
-          await recommendedCard.updateComplete;
-          Assert.ok(recommendedCard, "Recommended card should exist");
-          Assert.ok(
-            ContentTaskUtils.isVisible(recommendedCard),
-            "Recommended card is visible"
-          );
-          Assert.ok(
-            !recommendedCard.sponsoredLabelEl,
-            "Sponsored label should not exist"
-          );
-        }
-      );
-    }
-  );
-});

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

@@ -420,6 +420,11 @@ 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,
@@ -436,6 +441,10 @@ 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,
@@ -497,6 +506,11 @@ 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,
@@ -513,6 +527,10 @@ 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,

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

@@ -64,7 +64,7 @@ const MOCK_HIGHLIGHTS = {
   },
 };
 
-const MOCK_RECOMMENDED_ADS_SPONSORED = [
+const MOCK_RECOMMENDED_ADS = [
   {
     name: "VIVO Electric 60 x 24 inch Stand Up Desk | Black Table Top, Black Frame, Height Adjustable Standing Workstation with Memory Preset Controller (DESK-KIT-1B6B)",
     url: "www.example.com",
@@ -77,19 +77,6 @@ const MOCK_RECOMMENDED_ADS_SPONSORED = [
   },
 ];
 
-const MOCK_RECOMMENDED_NOT_SPONSORED = [
-  {
-    name: "VIVO Electric 60 x 24 inch Stand Up Desk | Black Table Top, Black Frame, Height Adjustable Standing Workstation with Memory Preset Controller (DESK-KIT-1B6B)",
-    url: "www.example.com",
-    price: "249.99",
-    currency: "USD",
-    grade: "A",
-    adjusted_rating: 4.6,
-    sponsored: false,
-    image_blob: new Blob(new Uint8Array(), { type: "image/jpeg" }),
-  },
-];
-
 const Template = ({
   data,
   isOffline,
@@ -101,7 +88,6 @@ const Template = ({
   adsEnabledByUser,
   recommendationData,
   analysisProgress,
-  autoOpenEnabled,
 }) => html`
   <style>
     main {
@@ -128,7 +114,6 @@ const Template = ({
       ?adsEnabledByUser=${adsEnabledByUser}
       .recommendationData=${recommendationData}
       analysisProgress=${analysisProgress}
-      autoOpenEnabled=${autoOpenEnabled}
     >
     </shopping-container>
   </main>
@@ -207,7 +192,8 @@ ReanalysisInProgress.args = {
 };
 
 /**
- * When a sponsored ad is served, and the user wants the ad component visible.
+ * When ad functionality is enabled and the user wants the ad
+ * component visible.
  */
 export const AdVisibleByUser = Template.bind({});
 AdVisibleByUser.args = {
@@ -220,28 +206,12 @@ AdVisibleByUser.args = {
   },
   adsEnabled: true,
   adsEnabledByUser: true,
-  recommendationData: MOCK_RECOMMENDED_ADS_SPONSORED,
+  recommendationData: MOCK_RECOMMENDED_ADS,
 };
 
 /**
- * When a non-sponsored recommendation is served, and the user wants the recommendation component visible.
+ * When ad functionality is enabled, but the user wants the ad
- */
+ * component hidden.
-export const RecommendationVisibleByUser = Template.bind({});
-RecommendationVisibleByUser.args = {
-  data: {
-    product_id: "ABCD123",
-    needs_analysis: false,
-    adjusted_rating: 5,
-    grade: "B",
-    highlights: MOCK_HIGHLIGHTS,
-  },
-  adsEnabled: true,
-  adsEnabledByUser: true,
-  recommendationData: MOCK_RECOMMENDED_NOT_SPONSORED,
-};
-
-/**
- * When a sponsored ad is served, and the user wants the ad component hidden.
  */
 export const AdHiddenByUser = Template.bind({});
 AdHiddenByUser.args = {
@@ -254,7 +224,7 @@ AdHiddenByUser.args = {
   },
   adsEnabled: true,
   adsEnabledByUser: false,
-  recommendationData: MOCK_RECOMMENDED_ADS_SPONSORED,
+  recommendationData: MOCK_RECOMMENDED_ADS,
 };
 
 export const NotEnoughReviews = Template.bind({});

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

@@ -101,10 +101,10 @@ shopping-show-less-button = Show less
 
 shopping-settings-label =
   .label = Settings
-shopping-settings-recommendations-toggle2 =
+shopping-settings-recommendations-toggle =
-  .label = Show recommendations and sponsored content
+  .label = Show ads in Review Checker
-shopping-settings-recommendations-learn-more3 =
+shopping-settings-recommendations-learn-more2 =
-  { -brand-product-name } doesn’t share your personal data, so these recommendations won’t follow you around the internet. <a data-l10n-name="review-quality-url">Learn more</a>
+  You’ll see occasional ads for relevant products. We only advertise products with reliable reviews. <a data-l10n-name="review-quality-url">Learn more</a>
 shopping-settings-opt-out-button = Turn off Review Checker
 powered-by-fakespot = Review Checker is powered by <a data-l10n-name="fakespot-link">{ -fakespot-brand-full-name }</a>.
 
@@ -123,6 +123,8 @@ 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
@@ -185,7 +187,7 @@ shopping-unanalyzed-product-analyze-button = Check review quality
 
 more-to-consider-ad-label =
   .label = More to consider
-shopping-sponsored-label = Sponsored
+ad-by-fakespot = Ad by { -fakespot-brand-name }
 
 ## Shopping survey strings.
 

toolkit/components/shopping/test/browser/head.js

@@ -8,8 +8,6 @@ const OTHER_PRODUCT_TEST_URL =
   "https://example.com/Another-Product/dp/HIJKLMN456";
 const BAD_PRODUCT_TEST_URL = "https://example.com/Bad-Product/dp/0000000000";
 const NEEDS_ANALYSIS_TEST_URL = "https://example.com/Bad-Product/dp/OPQRSTU789";
-const PRODUCT_TEST_URL_NOT_SPONSORED =
-  "https://example.com/Some-Product/dp/VWXYZAB012";
 
 async function promiseSidebarUpdated(sidebar, expectedProduct) {
   let browser = sidebar.querySelector("browser");

toolkit/components/shopping/test/mockapis/analysis.sjs

@@ -22,7 +22,6 @@ let gResponses = new Map(
     INVALID123: { needs_analysis: false, grade: 0.85, adjusted_rating: 1.0 },
     HTTPERR503: { status: 503, error: "Service Unavailable" },
     HTTPERR429: { status: 429, error: "Too Many Requests" },
-    VWXYZAB012: { needs_analysis: false, grade: "B", adjusted_rating: 4.1 },
   })
 );
 

toolkit/components/shopping/test/mockapis/recommendations.sjs

@@ -33,21 +33,6 @@ let gResponses = new Map(
     ],
     HIJKLMN456: [],
     OPQRSTU789: [],
-    VWXYZAB012: [
-      {
-        name: "VIVO Electric 60 x 24 inch Stand Up Desk | Black Table Top, Black Frame, Height Adjustable Standing Workstation with Memory Preset Controller (DESK-KIT-1B6B)",
-        url: "https://example.com/Some-Product/dp/ABCDEFG123",
-        image_url: "https://example.com/api/image.jpg",
-        price: "249.99",
-        currency: "USD",
-        grade: "A",
-        adjusted_rating: 4.6,
-        analysis_url:
-          "https://www.fakespot.com/product/vivo-electric-60-x-24-inch-stand-up-desk-black-table-top-black-frame-height-adjustable-standing-workstation-with-memory-preset-controller-desk-kit-1b6b",
-        sponsored: false,
-        aid: "ELcC6OziGKu2jjQsCf5xMYHTpyPKFtjl/4mKPeygbSuQMyIqF/gkY3bTTznoMmNv0OsPV5uql0/NdzNsoguccIS0BujM3DwBADvkGIKLLF2WX0u3G+B2tvRpZmbTmC1NQW0ivS/KX7dTrRjae3Z84fs0i0PySM68buCo5JY848wvzdlyTfCrcT0B3/Ov0tJjZdy9FupF9skLuFtx0/lgElSRsnoGow/H--uLo2Tq7E++RNxgsl--YqlLhv5n8iGFYQwBD61VBg==",
-      },
-    ],
   })
 );
 

toolkit/components/shopping/test/mockapis/reporting.sjs

@@ -28,7 +28,6 @@ let gResponses = new Map(
     ABCDEFG123: { message: "report created" },
     HIJKLMN456: { message: "already reported" },
     OPQRSTU789: { message: "not deleted" },
-    VWXYZAB012: { message: "report created" },
   })
 );