Bug 1954653 - Build reporting UI. r=home-newtab-reviewers,fluent-reviewers,frontend-codestyle-reviewers,mossop,nbarrett,bolsson

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

Author: reemhamz

browser/app/profile/firefox.js

@@ -1939,6 +1939,9 @@ pref("browser.newtabpage.activity-stream.discoverystream.spocMessageVariant", ""
 
 pref("browser.newtabpage.activity-stream.discoverystream.sendToPocket.enabled", true);
 
+// Pref enabling content reporting
+pref("browser.newtabpage.activity-stream.discoverystream.reportContent.enabled", false);
+
 // List of regions that do not get stories, regardless of locale-list-config.
 pref("browser.newtabpage.activity-stream.discoverystream.region-stories-block", "");
 // List of locales that get stories, regardless of region-stories-config.

browser/components/preferences/preferences.xhtml

@@ -74,6 +74,7 @@
   <link rel="localization" href="preview/translations.ftl"/>
   <link rel="localization" href="preview/enUS-searchFeatures.ftl"/>
   <link rel="localization" href="preview/backupSettings.ftl"/>
+  <link rel="localization" href="preview/reportContentTemporary.ftl"/>
   <link rel="localization" href="security/certificates/certManager.ftl"/>
   <link rel="localization" href="security/certificates/deviceManager.ftl"/>
   <link rel="localization" href="toolkit/updates/history.ftl"/>

browser/extensions/newtab/.eslintrc.js

@@ -32,6 +32,7 @@ module.exports = {
         "content-src/components/WallpapersSection/**",
         "content-src/components/DiscoveryStreamComponents/TopicSelection/TopicSelection.jsx",
         "content-src/components/DiscoveryStreamComponents/InterestPicker/InterestPicker.jsx",
+        "content-src/components/DiscoveryStreamComponents/ReportContent/ReportContent.jsx",
       ],
       rules: {
         "jsx-a11y/anchor-has-content": "off",

browser/extensions/newtab/bin/render-activity-stream-html.js

@@ -79,6 +79,7 @@ function templateHTML(options) {
     <link rel="localization" href="toolkit/branding/brandings.ftl" />
     <link rel="localization" href="browser/newtab/newtab.ftl" />
     <link rel="localization" href="toolkit/global/mozMessageBar.ftl" />
+    <link rel="localization" href="preview/reportContentTemporary.ftl" />
     <link
       rel="stylesheet"
       href="chrome://global/skin/design-system/tokens-brand.css"
@@ -119,6 +120,11 @@ function templateHTML(options) {
       type="module"
       src="chrome://global/content/elements/moz-message-bar.mjs"
     ></script>
+    <script
+      async
+      type="module"
+      src="chrome://global/content/elements/moz-radio-group.mjs"
+    ></script>
   </body>
 </html>
 `.trimLeft();

browser/extensions/newtab/common/Actions.mjs

@@ -137,6 +137,8 @@ for (const type of [
   "PREVIEW_REQUEST_CANCEL",
   "PREVIEW_RESPONSE",
   "REMOVE_DOWNLOAD_FILE",
+  "REPORT_CLOSE",
+  "REPORT_OPEN",
   "RICH_ICON_MISSING",
   "SAVE_SESSION_PERF_DATA",
   "SAVE_TO_POCKET",

browser/extensions/newtab/common/Reducers.sys.mjs

@@ -102,6 +102,10 @@ export const INITIAL_STATE = {
     isUserLoggedIn: false,
     recentSavesEnabled: false,
     showTopicSelection: false,
+    report: {
+      visible: false,
+      data: {},
+    },
   },
   // Messages received from ASRouter to render in newtab
   Messages: {
@@ -892,6 +896,22 @@ function DiscoveryStream(prevState = INITIAL_STATE.DiscoveryStream, action) {
         showBlockSectionConfirmation: true,
         sectionData: action.data,
       };
+    case at.REPORT_OPEN:
+      return {
+        ...prevState,
+        report: {
+          ...prevState.report,
+          visible: true,
+        },
+      };
+    case at.REPORT_CLOSE:
+      return {
+        ...prevState,
+        report: {
+          ...prevState.report,
+          visible: false,
+        },
+      };
     default:
       return prevState;
   }

browser/extensions/newtab/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -8,6 +8,7 @@ import { CollapsibleSection } from "content-src/components/CollapsibleSection/Co
 import { connect } from "react-redux";
 import { DSMessage } from "content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage";
 import { DSPrivacyModal } from "content-src/components/DiscoveryStreamComponents/DSPrivacyModal/DSPrivacyModal";
+import { ReportContent } from "../DiscoveryStreamComponents/ReportContent/ReportContent";
 import { DSSignup } from "content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup";
 import { DSTextPromo } from "content-src/components/DiscoveryStreamComponents/DSTextPromo/DSTextPromo";
 import { Highlights } from "content-src/components/DiscoveryStreamComponents/Highlights/Highlights";
@@ -252,6 +253,8 @@ export class _DiscoveryStreamBase extends React.PureComponent {
     const { config } = this.props.DiscoveryStream;
     const topicSelectionEnabled =
       this.props.Prefs.values["discoverystream.topicSelection.enabled"];
+    const reportContentEnabled =
+      this.props.Prefs.values["discoverystream.reportContent.enabled"];
 
     // Allow rendering without extracting special components
     if (!config.collapsible) {
@@ -322,6 +325,9 @@ export class _DiscoveryStreamBase extends React.PureComponent {
         {this.props.DiscoveryStream.isPrivacyInfoModalVisible && (
           <DSPrivacyModal dispatch={this.props.dispatch} />
         )}
+
+        {reportContentEnabled && <ReportContent />}
+
         {topSites &&
           this.renderLayout([
             {

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

@@ -89,6 +89,7 @@ export const AdBanner = ({
           spoc={spoc}
           position={row}
           type={type}
+          prefs={prefs}
         />
         <SafeAnchor
           className="ad-banner-link"

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

@@ -20,9 +20,13 @@ import { LinkMenu } from "../../LinkMenu/LinkMenu";
  * @returns {Element}
  * @constructor
  */
-export function AdBannerContextMenu({ dispatch, spoc, position, type }) {
+export function AdBannerContextMenu({ dispatch, spoc, position, type, prefs }) {
+  const PREF_REPORT_CONTENT_ENABLED = "discoverystream.reportContent.enabled";
+  const showReporting = prefs[PREF_REPORT_CONTENT_ENABLED];
+
   const ADBANNER_CONTEXT_MENU_OPTIONS = [
     "BlockAdUrl",
+    ...(showReporting ? ["ReportAd"] : []),
     "ManageSponsoredContent",
     "OurSponsorsAndYourPrivacy",
   ];

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

@@ -6,28 +6,32 @@ import { LinkMenu } from "content-src/components/LinkMenu/LinkMenu";
 import { ContextMenuButton } from "content-src/components/ContextMenu/ContextMenuButton";
 import { actionCreators as ac } from "common/Actions.mjs";
 import React from "react";
+import { connect } from "react-redux";
 
-export class DSLinkMenu extends React.PureComponent {
+export class _DSLinkMenu extends React.PureComponent {
   render() {
     const { index, dispatch } = this.props;
     let TOP_STORIES_CONTEXT_MENU_OPTIONS;
+    const PREF_REPORT_CONTENT_ENABLED = "discoverystream.reportContent.enabled";
+    const prefs = this.props.Prefs.values;
+    const showReporting = prefs[PREF_REPORT_CONTENT_ENABLED];
+    const isSpoc = this.props.card_type === "spoc";
 
-    // Sponsored stories have their own context menu options.
-    if (this.props.card_type === "spoc") {
+    if (isSpoc) {
       TOP_STORIES_CONTEXT_MENU_OPTIONS = [
         "BlockUrl",
+        ...(showReporting ? ["ReportAd"] : []),
         "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",
+        ...(showReporting ? ["ReportContent"] : []),
         ...saveToPocketOptions,
         "Separator",
         "OpenInNewWindow",
@@ -88,3 +92,7 @@ export class DSLinkMenu extends React.PureComponent {
     );
   }
 }
+
+export const DSLinkMenu = connect(state => ({
+  Prefs: state.Prefs,
+}))(_DSLinkMenu);