Commit 3b0dc3d0 authored by Nina Pypchenko's avatar Nina Pypchenko
Browse files

Bug 1953049 - Update Ads Context Menu r=home-newtab-reviewers,fluent-reviewers,bolsson,thecount 

- Replaced the existing context menu for sponsored stories with three updated options:
   - Dismiss
   - Manage sponsored content
   - Our sponsors and your privacy

- Simplified the context menu for recommended stories.

- Updated related tests.

Differential Revision: https://phabricator.services.mozilla.com/D241129
parent 1a990a21

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx

+18 −18
Original line number Diff line number Diff line
@@ -10,33 +10,33 @@ import React from "react"; 
export class DSLinkMenu extends React.PureComponent {

  render() {

    const { index, dispatch } = this.props;

    let pocketMenuOptions = [];

    let TOP_STORIES_CONTEXT_MENU_OPTIONS = [

      "OpenInNewWindow",

      "OpenInPrivateWindow",

    let TOP_STORIES_CONTEXT_MENU_OPTIONS;



    // Sponsored stories have their own context menu options.

    if (this.props.card_type === "spoc") {

      TOP_STORIES_CONTEXT_MENU_OPTIONS = [

        "BlockUrl",

        "ManageSponsoredContent",

        "OurSponsorsAndYourPrivacy",

      ];

    if (!this.props.isRecentSave) {

      // Show Pocket context menu options if applicable.

      // Additionally, show these menu options for all section cards.

      if (

        this.props.pocket_button_enabled &&

        (this.props.saveToPocketCard || this.props.isSectionsCard) &&

        this.props.card_type !== "spoc"

      ) {

        pocketMenuOptions = ["CheckSavedToPocket"];

      }

      // Recommended stories have a different context menu.

    } else {

      // If Pocket is enabled, insert extra menu options after the bookmark.

      const saveToPocketOptions = this.props.pocket_button_enabled

        ? ["CheckArchiveFromPocket", "CheckSavedToPocket"]

        : [];



      TOP_STORIES_CONTEXT_MENU_OPTIONS = [

        "CheckBookmark",

        "CheckArchiveFromPocket",

        ...pocketMenuOptions,

        ...saveToPocketOptions,

        "Separator",

        "OpenInNewWindow",

        "OpenInPrivateWindow",

        "Separator",

        "BlockUrl",

        ...(this.props.showPrivacyInfo ? ["ShowPrivacyInfo"] : []),

      ];

    }



    const type = this.props.type || "DISCOVERY_STREAM";

    const title = this.props.title || this.props.source;

browser/extensions/newtab/content-src/lib/link-menu-options.mjs

+13 −0
Original line number Diff line number Diff line
@@ -490,4 +490,17 @@ export const LinkMenuOptions = { 
      },

    }),

  }),

  ManageSponsoredContent: () => ({

    id: "newtab-menu-manage-sponsored-content",

    action: ac.OnlyToMain({ type: at.SETTINGS_OPEN }),

  }),

  OurSponsorsAndYourPrivacy: () => ({

    id: "newtab-menu-our-sponsors-and-your-privacy",

    action: ac.OnlyToMain({

      type: at.OPEN_LINK,

      data: {

        url: "https://support.mozilla.org/kb/pocket-sponsored-stories-new-tabs",

      },

    }),

  }),

};

browser/extensions/newtab/data/content/activity-stream.bundle.js

+23 −9
Original line number Diff line number Diff line
@@ -2166,6 +2166,19 @@ const LinkMenuOptions = { 
      },

    }),

  }),

  ManageSponsoredContent: () => ({

    id: "newtab-menu-manage-sponsored-content",

    action: actionCreators.OnlyToMain({ type: actionTypes.SETTINGS_OPEN }),

  }),

  OurSponsorsAndYourPrivacy: () => ({

    id: "newtab-menu-our-sponsors-and-your-privacy",

    action: actionCreators.OnlyToMain({

      type: actionTypes.OPEN_LINK,

      data: {

        url: "https://support.mozilla.org/kb/pocket-sponsored-stories-new-tabs",

      },

    }),

  }),

};



;// CONCATENATED MODULE: ./content-src/components/LinkMenu/LinkMenu.jsx
@@ -2353,15 +2366,16 @@ class DSLinkMenu extends (external_React_default()).PureComponent { 
      index,

      dispatch

    } = this.props;

    let pocketMenuOptions = [];

    let TOP_STORIES_CONTEXT_MENU_OPTIONS = ["OpenInNewWindow", "OpenInPrivateWindow"];

    if (!this.props.isRecentSave) {

      // Show Pocket context menu options if applicable.

      // Additionally, show these menu options for all section cards.

      if (this.props.pocket_button_enabled && (this.props.saveToPocketCard || this.props.isSectionsCard) && this.props.card_type !== "spoc") {

        pocketMenuOptions = ["CheckSavedToPocket"];

      }

      TOP_STORIES_CONTEXT_MENU_OPTIONS = ["CheckBookmark", "CheckArchiveFromPocket", ...pocketMenuOptions, "Separator", "OpenInNewWindow", "OpenInPrivateWindow", "Separator", "BlockUrl", ...(this.props.showPrivacyInfo ? ["ShowPrivacyInfo"] : [])];

    let TOP_STORIES_CONTEXT_MENU_OPTIONS;



    // Sponsored stories have their own context menu options.

    if (this.props.card_type === "spoc") {

      TOP_STORIES_CONTEXT_MENU_OPTIONS = ["BlockUrl", "ManageSponsoredContent", "OurSponsorsAndYourPrivacy"];

      // Recommended stories have a different context menu.

    } else {

      // If Pocket is enabled, insert extra menu options after the bookmark.

      const saveToPocketOptions = this.props.pocket_button_enabled ? ["CheckArchiveFromPocket", "CheckSavedToPocket"] : [];

      TOP_STORIES_CONTEXT_MENU_OPTIONS = ["CheckBookmark", ...saveToPocketOptions, "Separator", "OpenInNewWindow", "OpenInPrivateWindow", "Separator", "BlockUrl"];

    }

    const type = this.props.type || "DISCOVERY_STREAM";

    const title = this.props.title || this.props.source;

browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx

+9 −37
Original line number Diff line number Diff line
@@ -31,6 +31,7 @@ describe("<DSLinkMenu>", () => { 
    const ValidDSLinkMenuProps = {

      site: {},

      pocket_button_enabled: true,

      card_type: "organic",

    };



    beforeEach(() => {
@@ -67,30 +68,7 @@ describe("<DSLinkMenu>", () => { 
      ].forEach(prop => assert.property(linkMenuProps, prop));

    });



    it("should pass through the correct menu options to LinkMenu", () => {

      wrapper

        .find(ContextMenuButton)

        .simulate("click", { preventDefault: () => {} });

      const linkMenuProps = wrapper.find(LinkMenu).props();

      assert.deepEqual(linkMenuProps.options, [

        "CheckBookmark",

        "CheckArchiveFromPocket",

        "Separator",

        "OpenInNewWindow",

        "OpenInPrivateWindow",

        "Separator",

        "BlockUrl",

      ]);

    });



    it("should pass through the correct menu options to LinkMenu for spocs", () => {

      wrapper = shallow(

        <DSLinkMenu

          {...ValidDSLinkMenuProps}

          flightId="1234"

          showPrivacyInfo={true}

        />

      );

    it("should pass through the correct menu options to LinkMenu for recommended stories if Pocket is enabled", () => {

      wrapper

        .find(ContextMenuButton)

        .simulate("click", { preventDefault: () => {} });
@@ -98,18 +76,18 @@ describe("<DSLinkMenu>", () => { 
      assert.deepEqual(linkMenuProps.options, [

        "CheckBookmark",

        "CheckArchiveFromPocket",

        "CheckSavedToPocket",

        "Separator",

        "OpenInNewWindow",

        "OpenInPrivateWindow",

        "Separator",

        "BlockUrl",

        "ShowPrivacyInfo",

      ]);

    });



    it("should pass through the correct menu options to LinkMenu for save to Pocket button", () => {

    it("should pass through the correct menu options to LinkMenu for recommended stories if Pocket is disabled", () => {

      wrapper = shallow(

        <DSLinkMenu {...ValidDSLinkMenuProps} saveToPocketCard={true} />

        <DSLinkMenu {...ValidDSLinkMenuProps} pocket_button_enabled={false} />

      );

      wrapper

        .find(ContextMenuButton)
@@ -117,8 +95,6 @@ describe("<DSLinkMenu>", () => { 
      const linkMenuProps = wrapper.find(LinkMenu).props();

      assert.deepEqual(linkMenuProps.options, [

        "CheckBookmark",

        "CheckArchiveFromPocket",

        "CheckSavedToPocket",

        "Separator",

        "OpenInNewWindow",

        "OpenInPrivateWindow",
@@ -127,22 +103,18 @@ describe("<DSLinkMenu>", () => { 
      ]);

    });



    it("should pass through the correct menu options to LinkMenu if Pocket is disabled", () => {

    it("should pass through the correct menu options to LinkMenu for SPOCs", () => {

      wrapper = shallow(

        <DSLinkMenu {...ValidDSLinkMenuProps} pocket_button_enabled={false} />

        <DSLinkMenu {...ValidDSLinkMenuProps} card_type="spoc" />

      );

      wrapper

        .find(ContextMenuButton)

        .simulate("click", { preventDefault: () => {} });

      const linkMenuProps = wrapper.find(LinkMenu).props();

      assert.deepEqual(linkMenuProps.options, [

        "CheckBookmark",

        "CheckArchiveFromPocket",

        "Separator",

        "OpenInNewWindow",

        "OpenInPrivateWindow",

        "Separator",

        "BlockUrl",

        "ManageSponsoredContent",

        "OurSponsorsAndYourPrivacy",

      ]);

    });

  });

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

+5 −0
Original line number Diff line number Diff line
@@ -124,6 +124,11 @@ newtab-menu-section-block = Block 
# e.g. Following the travel section of stories.

newtab-menu-section-unfollow = Unfollow topic



## Context menu options for sponsored stories and new ad formats on New Tab.



newtab-menu-manage-sponsored-content = Manage sponsored content

newtab-menu-our-sponsors-and-your-privacy = Our sponsors and your privacy



## Message displayed in a modal window to explain privacy and provide context for sponsored content.



newtab-privacy-modal-button-done = Done