Bug 1965948 - Add feature flag for card layout refinements. r=home-newtab-reviewers,nbarrett

Differential Revision: https://phabricator.services.mozilla.com/D249020
2025-05-14 00:12:05 +00:00
parent f5dd74f34d
commit 094f24d66f
6 changed files with 32 additions and 2 deletions
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1804,6 +1804,9 @@ pref("browser.newtabpage.activity-stream.mobileDownloadModal.variant-a", false);
 pref("browser.newtabpage.activity-stream.mobileDownloadModal.variant-b", false);
 pref("browser.newtabpage.activity-stream.mobileDownloadModal.variant-c", false);

+// Show refined card layout on newtab
+pref("browser.newtabpage.activity-stream.discoverystream.refinedCardsLayout.enabled", false)
+
 // Mozilla Ad Routing Service (MARS) unified ads service
 pref("browser.newtabpage.activity-stream.unifiedAds.tiles.enabled", true);
 pref("browser.newtabpage.activity-stream.unifiedAds.spocs.enabled", true);
--- a/browser/extensions/newtab/content-src/components/Base/Base.jsx
+++ b/browser/extensions/newtab/content-src/components/Base/Base.jsx
@@ -675,6 +675,7 @@ export class BaseContent extends React.PureComponent {
      prefs["discoverystream.sections.customizeMenuPanel.enabled"];
    const sectionsPersonalizationEnabled =
      prefs["discoverystream.sections.personalization.enabled"];
+
    // Logic to show follow/block topic mgmt panel in Customize panel
    const mayHavePersonalizedTopicSections =
      sectionsPersonalizationEnabled &&
--- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
+++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
@@ -711,6 +711,7 @@ export class _DSCard extends React.PureComponent {
    const layoutsVariantAEnabled = Prefs.values["newtabLayouts.variant-a"];
    const layoutsVariantBEnabled = Prefs.values["newtabLayouts.variant-b"];
    const sectionsEnabled = Prefs.values["discoverystream.sections.enabled"];
+    const refinedCardsLayout = "discoverystream.refinedCardsLayout.enabled";
    const layoutsVariantAorB = layoutsVariantAEnabled || layoutsVariantBEnabled;

    const smartCrop = Prefs.values["images.smart"];
@@ -749,6 +750,7 @@ export class _DSCard extends React.PureComponent {
    const descLinesClassName = `ds-card-desc-lines-${descLines}`;
    const isMediumRectangle = format === "rectangle";
    const spocFormatClassName = isMediumRectangle ? `ds-spoc-rectangle` : ``;
+    const refinedCardsClassName = refinedCardsLayout ? `refined-cards` : ``;

    let sizes = [];
    if (!isMediumRectangle) {
@@ -770,7 +772,7 @@ export class _DSCard extends React.PureComponent {

    return (
      <article
-        className={`ds-card ${listCardClassName} ${fakespotClassName} ${sectionsCardsClassName} ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${spocFormatClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName}`}
+        className={`ds-card ${listCardClassName} ${fakespotClassName} ${sectionsCardsClassName} ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${spocFormatClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName} ${refinedCardsClassName}`}
        ref={this.setContextMenuButtonHostRef}
        data-position-one={this.props["data-position-one"]}
        data-position-two={this.props["data-position-one"]}
--- a/browser/extensions/newtab/data/content/activity-stream.bundle.js
+++ b/browser/extensions/newtab/data/content/activity-stream.bundle.js
@@ -4002,6 +4002,7 @@ class _DSCard extends (external_React_default()).PureComponent {
    const layoutsVariantAEnabled = Prefs.values["newtabLayouts.variant-a"];
    const layoutsVariantBEnabled = Prefs.values["newtabLayouts.variant-b"];
    const sectionsEnabled = Prefs.values["discoverystream.sections.enabled"];
+    const refinedCardsLayout = "discoverystream.refinedCardsLayout.enabled";
    const layoutsVariantAorB = layoutsVariantAEnabled || layoutsVariantBEnabled;
    const smartCrop = Prefs.values["images.smart"];
    const faviconEnabled = Prefs.values["discoverystream.publisherFavicon.enabled"];
@@ -4027,6 +4028,7 @@ class _DSCard extends (external_React_default()).PureComponent {
    const descLinesClassName = `ds-card-desc-lines-${descLines}`;
    const isMediumRectangle = format === "rectangle";
    const spocFormatClassName = isMediumRectangle ? `ds-spoc-rectangle` : ``;
+    const refinedCardsClassName = refinedCardsLayout ? `refined-cards` : ``;
    let sizes = [];
    if (!isMediumRectangle) {
      sizes = this.dsImageSizes;
@@ -4040,7 +4042,7 @@ class _DSCard extends (external_React_default()).PureComponent {
      }
    }
    return /*#__PURE__*/external_React_default().createElement("article", {
-      className: `ds-card ${listCardClassName} ${fakespotClassName} ${sectionsCardsClassName} ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${spocFormatClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName}`,
+      className: `ds-card ${listCardClassName} ${fakespotClassName} ${sectionsCardsClassName} ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${spocFormatClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName} ${refinedCardsClassName}`,
      ref: this.setContextMenuButtonHostRef,
      "data-position-one": this.props["data-position-one"],
      "data-position-two": this.props["data-position-one"],
@@ -14863,6 +14865,7 @@ class BaseContent extends (external_React_default()).PureComponent {
    const topicLabelsEnabled = prefs["discoverystream.topicLabels.enabled"];
    const sectionsCustomizeMenuPanelEnabled = prefs["discoverystream.sections.customizeMenuPanel.enabled"];
    const sectionsPersonalizationEnabled = prefs["discoverystream.sections.personalization.enabled"];
+
    // Logic to show follow/block topic mgmt panel in Customize panel
    const mayHavePersonalizedTopicSections = sectionsPersonalizationEnabled && topicLabelsEnabled && sectionsEnabled && sectionsCustomizeMenuPanelEnabled && DiscoveryStream.feeds.loaded;
    const featureClassName = [mobileDownloadPromoEnabled && mobileDownloadPromoVariantABorC && "has-mobile-download-promo",
--- a/browser/extensions/newtab/lib/ActivityStream.sys.mjs
+++ b/browser/extensions/newtab/lib/ActivityStream.sys.mjs
@@ -262,6 +262,14 @@ export const PREFS_CONFIG = new Map([
      value: false,
    },
  ],
+  [
+    "discoverystream.refinedCardsLayout.enabled",
+    {
+      title:
+        "Boolean flag enable layout and styling refinements for content and ad cards across different card sizes",
+      value: false,
+    },
+  ],
  [
    "unifiedAds.adsFeed.enabled",
    {
--- a/toolkit/components/nimbus/FeatureManifest.yaml
+++ b/toolkit/components/nimbus/FeatureManifest.yaml
@@ -1380,6 +1380,19 @@ newtabMarsOhttp:
      description: >-
        Enables using OHTTP for unified ads API requests

+newtabRefinedCardsLayout:
+  description: Enable layout and styling refinements for content and ad cards across different card sizes
+  owner: rhamoui@mozilla.com
+  hasExposure: false
+  variables:
+    enabled:
+      type: boolean
+      setPref:
+        branch: user
+        pref: browser.newtabpage.activity-stream.discoverystream.refinedCardsLayout.enabled
+      description: Enables the refined cards layout for newtab
+
+
 pocketNewtab:
  description: The Pocket section in newtab
  owner: sdowne@mozilla.com