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)
2024-08-27 01:59:48 +03:00 · 2024-08-27 01:59:48 +03:00 · 0d0c9dbbd0
--- a/browser/components/shopping/content/recommended-ad.css
+++ b/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);
-}
--- a/browser/components/shopping/content/recommended-ad.mjs
+++ b/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>
-      ${
-        this.product.sponsored
-          ? html`<p
-              id="sponsored-label"
-              data-l10n-id="shopping-sponsored-label"
-            ></p>`
-          : null
-      }
+      <p data-l10n-id="ad-by-fakespot"></p>
    `;
  }
 }
--- a/browser/components/shopping/content/settings.css
+++ b/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);
-}
--- a/browser/components/shopping/content/settings.mjs
+++ b/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}
      >
--- a/browser/components/shopping/tests/browser/browser_recommended_ad_test.js
+++ b/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"
-          );
-        }
-      );
-    }
-  );
-});
--- a/browser/components/shopping/tests/browser/browser_shopping_settings.js
+++ b/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,
--- a/browser/components/storybook/stories/shopping-container.stories.mjs
+++ b/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.
- */
-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.
+ * When ad functionality is enabled, but 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({});
--- a/browser/locales/en-US/browser/shopping.ftl
+++ b/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 =
-  .label = Show recommendations and sponsored content
-shopping-settings-recommendations-learn-more3 =
-  { -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>
+shopping-settings-recommendations-toggle =
+  .label = Show ads in Review Checker
+shopping-settings-recommendations-learn-more2 =
+  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.

--- a/toolkit/components/shopping/test/browser/head.js
+++ b/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");
--- a/toolkit/components/shopping/test/mockapis/analysis.sjs
+++ b/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 },
  })
 );

--- a/toolkit/components/shopping/test/mockapis/recommendations.sjs
+++ b/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==",
-      },
-    ],
  })
 );

--- a/toolkit/components/shopping/test/mockapis/reporting.sjs
+++ b/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" },
  })
 );