android support for toggle report

build/app/public/css/popup.css

@@ -3939,12 +3939,14 @@ body.environment--macos, body.environment--browser, body.environment--windows, b
   visibility: hidden;
 }
 
-.environment--ios [data-toggle-report=child] {
+.environment--ios [data-toggle-report=child],
+.environment--android [data-toggle-report=child] {
   opacity: 0;
   visibility: hidden;
 }
 
-.environment--ios [data-toggle-report=child][data-ready=true] {
+.environment--ios [data-toggle-report=child][data-ready=true],
+.environment--android [data-toggle-report=child][data-ready=true] {
   opacity: 1;
   visibility: visible;
 }

build/app/public/js/base.js

@@ -14039,12 +14039,12 @@
   function privacyDashboardSendToggleReport() {
     invariant(window.webkit?.messageHandlers, "webkit.messageHandlers required");
     invariant(window.webkit.messageHandlers.privacyDashboardSendToggleReport, "privacyDashboardSendToggleReport required");
-    return window.webkit.messageHandlers.privacyDashboardSendToggleReport.postMessage({});
+    window.webkit.messageHandlers.privacyDashboardSendToggleReport.postMessage({});
   }
   function privacyDashboardRejectToggleReport() {
     invariant(window.webkit?.messageHandlers, "webkit.messageHandlers required");
     invariant(window.webkit.messageHandlers.privacyDashboardRejectToggleReport, "privacyDashboardRejectToggleReport required");
-    return window.webkit.messageHandlers.privacyDashboardRejectToggleReport.postMessage({});
+    window.webkit.messageHandlers.privacyDashboardRejectToggleReport.postMessage({});
   }
   function privacyDashboardSeeWhatIsSent() {
     invariant(window.webkit?.messageHandlers, "webkit.messageHandlers required");
@@ -14392,7 +14392,6 @@
     /**
      * {@inheritDoc common.openInNewTab}
      * @type {import("./common.js").openInNewTab}
-     *
      * ```js
      * const payload = JSON.stringify({
      *     "url": "https://help.duckduckgo.com/duckduckgo-help-pages/privacy/web-tracking-protections/"
@@ -14425,6 +14424,49 @@
       invariant(typeof window.PrivacyDashboard?.submitBrokenSiteReport, "window.PrivacyDashboard.submitBrokenSiteReport required");
       window.PrivacyDashboard.submitBrokenSiteReport(JSON.stringify(payload));
     }
+    /**
+     * {@inheritDoc common.getToggleReportOptions}
+     * @type {import("./common.js").getToggleReportOptions}
+     * @returns {Promise<import('../../../schema/__generated__/schema.types').ToggleReportScreen>}
+     */
+    getToggleReportOptions() {
+      invariant(typeof window.PrivacyDashboard?.getToggleReportOptions, "window.PrivacyDashboard.getToggleReportOptions required");
+      window.PrivacyDashboard.getToggleReportOptions();
+      return new Promise((resolve) => {
+        window.onGetToggleReportOptionsResponse = (data) => {
+          resolve(data);
+          Reflect.deleteProperty(window, "onGetToggleReportOptionsResponse");
+        };
+      });
+    }
+    /**
+     * {@inheritDoc common.sendToggleReport}
+     * @type {import("./common.js").sendToggleReport}
+     * @example
+     * ```js
+     * window.PrivacyDashboard.sendToggleReport()
+     * ```
+     */
+    sendToggleReport() {
+      invariant(window.PrivacyDashboard?.sendToggleReport, "sendToggleReport missing");
+      window.PrivacyDashboard.sendToggleReport();
+    }
+    /**
+     * {@inheritDoc common.rejectToggleReport}
+     * @type {import("./common.js").rejectToggleReport}
+     */
+    rejectToggleReport() {
+      invariant(window.PrivacyDashboard?.rejectToggleReport, "rejectToggleReport missing");
+      window.PrivacyDashboard.rejectToggleReport();
+    }
+    /**
+     * {@inheritDoc common.seeWhatIsSent}
+     * @type {import("./common.js").seeWhatIsSent}
+     */
+    seeWhatIsSent() {
+      invariant(window.PrivacyDashboard?.seeWhatIsSent, "seeWhatIsSent missing");
+      window.PrivacyDashboard.seeWhatIsSent();
+    }
   };
   var privacyDashboardApi;
   async function fetchAndroid(message) {
@@ -14461,6 +14503,18 @@
         target: message.target
       });
     }
+    if (message instanceof FetchToggleReportOptions) {
+      return privacyDashboardApi.getToggleReportOptions();
+    }
+    if (message instanceof SendToggleBreakageReport) {
+      return privacyDashboardApi.sendToggleReport();
+    }
+    if (message instanceof RejectToggleBreakageReport) {
+      return privacyDashboardApi.rejectToggleReport();
+    }
+    if (message instanceof SeeWhatIsSent) {
+      return privacyDashboardApi.seeWhatIsSent();
+    }
     console.warn("unhandled message", message);
   }
   var getBackgroundTabDataAndroid = () => {
@@ -17053,7 +17107,7 @@
   // shared/js/ui/components/toggle-report/use-ios-animation.js
   function useIosAnimation(state, dispatch) {
     p2(() => {
-      if (platform.name !== "ios")
+      if (platform.name !== "ios" && platform.name !== "android")
         return;
       if (state.value === "animating") {
         const child = (
@@ -17069,7 +17123,7 @@
       }
     }, [state.value]);
     p2(() => {
-      if (platform.name !== "ios")
+      if (platform.name !== "ios" && platform.name !== "android")
         return;
       const child = (
         /** @type {HTMLDivElement | null} */
@@ -17192,7 +17246,8 @@
 
   // shared/js/ui/components/toggle-report.jsx
   function ToggleReport() {
-    const innerGap = platform.name === "ios" ? "24px" : "16px";
+    const mobile = platform.name === "android" || platform.name === "ios";
+    const innerGap = mobile ? "24px" : "16px";
     const desktop = platform.name === "macos" || platform.name === "windows";
     const extension = platform.name === "browser";
     const { value, didClickSuccessScreen } = q2(ToggleReportContext);
@@ -17204,7 +17259,7 @@
     if (desktop || extension) {
       return /* @__PURE__ */ y(ToggleReportWrapper, { state: state.value }, extension && /* @__PURE__ */ y(SetAutoHeight, null), /* @__PURE__ */ y(Stack, { gap: "40px" }, /* @__PURE__ */ y(Stack, { gap: "24px" }, /* @__PURE__ */ y(Stack, { gap: innerGap }, /* @__PURE__ */ y("div", { className: "medium-icon-container hero-icon--toggle-report" }), /* @__PURE__ */ y(ToggleReportTitle, null, ns.toggleReport("siteNotWorkingTitle.title")), /* @__PURE__ */ y("div", null, /* @__PURE__ */ y("h2", { className: "token-title-3 text--center" }, ns.toggleReport("siteNotWorkingSubTitle.title")), /* @__PURE__ */ y(DesktopRevealText, { state, toggle: () => dispatch("toggle") }))), state.value === "showing" && /* @__PURE__ */ y(Scrollable, null, /* @__PURE__ */ y(ToggleReportDataList, { rows: value.data })), /* @__PURE__ */ y(ToggleReportButtons, { send: () => dispatch("send"), reject: () => dispatch("reject") }))));
     }
-    if (platform.name === "ios") {
+    if (mobile) {
       return /* @__PURE__ */ y(ToggleReportWrapper, { state: state.value }, /* @__PURE__ */ y(Stack, { gap: "40px" }, /* @__PURE__ */ y(Stack, { gap: "24px" }, /* @__PURE__ */ y(Stack, { gap: innerGap }, /* @__PURE__ */ y("div", { className: "medium-icon-container hero-icon--toggle-report" }), /* @__PURE__ */ y(ToggleReportTitle, null, ns.toggleReport("siteNotWorkingTitle.title")), /* @__PURE__ */ y("div", null, /* @__PURE__ */ y("h2", { className: "token-title-3 text--center" }, ns.toggleReport("siteNotWorkingSubTitle.title")))), /* @__PURE__ */ y(ToggleReportButtons, { send: () => dispatch("send"), reject: () => dispatch("reject") }), state.value !== "showing" && /* @__PURE__ */ y(RevealText, { toggle: () => dispatch("toggle-ios") })), state.value === "showing" && /* @__PURE__ */ y("div", { className: "ios-separator" }, /* @__PURE__ */ y(ToggleReportDataList, { rows: value.data }))));
     }
     return /* @__PURE__ */ y("p", null, "unsupported platform: ", platform.name);
@@ -17232,9 +17287,10 @@
     return null;
   }
   function ToggleReportButtons({ send, reject }) {
-    const buttonVariant = platform.name === "ios" ? "ios-secondary" : "macos-standard";
-    const buttonLayout = platform.name === "ios" ? "vertical" : "horizontal";
-    const buttonSize = platform.name === "ios" ? "big" : "small";
+    const mobile = platform.name === "ios" || platform.name === "android";
+    const buttonVariant = mobile ? "ios-secondary" : "macos-standard";
+    const buttonLayout = mobile ? "vertical" : "horizontal";
+    const buttonSize = mobile ? "big" : "small";
     return /* @__PURE__ */ y(ButtonBar, { layout: buttonLayout }, /* @__PURE__ */ y(Button, { variant: buttonVariant, btnSize: buttonSize, onClick: reject }, ns.toggleReport("dontSendReport.title")), /* @__PURE__ */ y(Button, { variant: buttonVariant, btnSize: buttonSize, onClick: send }, ns.report("sendReport.title")));
   }
   function RevealText({ toggle }) {

integration-tests/helpers.js

@@ -27,6 +27,9 @@ export async function playTimeline(page, state, platform) {
     if (platform.name === 'windows') {
         messages.windowsViewModel = state.toWindowsViewModel()
     }
+    if (platform.name === 'ios' || platform.name === 'macos') {
+        messages.privacyDashboardGetToggleReportOptions = toggleReportScreen
+    }
     await page.evaluate(mockDataProvider, { state, platform, messages })
     return messages
 }
@@ -52,7 +55,7 @@ export function installWindowsMocks(page) {
 export async function installWebkitMocks(page, _args) {
     await page.waitForFunction(() => typeof window.onChangeRequestData === 'function')
     return page.evaluate(webkitMockApis, {
-        responses: {
+        messages: {
             privacyDashboardGetToggleReportOptions: toggleReportScreen,
         },
     })

shared/js/browser/android-communication.js

@@ -18,7 +18,11 @@ import { setupBlurOnLongPress, setupGlobalOpenerListener } from '../ui/views/uti
 import {
     CheckBrokenSiteReportHandledMessage,
     CloseMessage,
+    FetchToggleReportOptions,
     OpenSettingsMessages,
+    RejectToggleBreakageReport,
+    SeeWhatIsSent,
+    SendToggleBreakageReport,
     SetListsMessage,
     setupColorScheme,
     SubmitBrokenSiteReportMessage,
@@ -287,7 +291,6 @@ export class PrivacyDashboardJavascriptInterface {
     /**
      * {@inheritDoc common.openInNewTab}
      * @type {import("./common.js").openInNewTab}
-     *
      * ```js
      * const payload = JSON.stringify({
      *     "url": "https://help.duckduckgo.com/duckduckgo-help-pages/privacy/web-tracking-protections/"
@@ -322,6 +325,53 @@ export class PrivacyDashboardJavascriptInterface {
         invariant(typeof window.PrivacyDashboard?.submitBrokenSiteReport, 'window.PrivacyDashboard.submitBrokenSiteReport required')
         window.PrivacyDashboard.submitBrokenSiteReport(JSON.stringify(payload))
     }
+
+    /**
+     * {@inheritDoc common.getToggleReportOptions}
+     * @type {import("./common.js").getToggleReportOptions}
+     * @returns {Promise<import('../../../schema/__generated__/schema.types').ToggleReportScreen>}
+     */
+    getToggleReportOptions() {
+        invariant(typeof window.PrivacyDashboard?.getToggleReportOptions, 'window.PrivacyDashboard.getToggleReportOptions required')
+        window.PrivacyDashboard.getToggleReportOptions()
+        return new Promise((resolve) => {
+            window.onGetToggleReportOptionsResponse = (data) => {
+                resolve(data)
+                Reflect.deleteProperty(window, 'onGetToggleReportOptionsResponse')
+            }
+        })
+    }
+
+    /**
+     * {@inheritDoc common.sendToggleReport}
+     * @type {import("./common.js").sendToggleReport}
+     * @example
+     * ```js
+     * window.PrivacyDashboard.sendToggleReport()
+     * ```
+     */
+    sendToggleReport() {
+        invariant(window.PrivacyDashboard?.sendToggleReport, 'sendToggleReport missing')
+        window.PrivacyDashboard.sendToggleReport()
+    }
+
+    /**
+     * {@inheritDoc common.rejectToggleReport}
+     * @type {import("./common.js").rejectToggleReport}
+     */
+    rejectToggleReport() {
+        invariant(window.PrivacyDashboard?.rejectToggleReport, 'rejectToggleReport missing')
+        window.PrivacyDashboard.rejectToggleReport()
+    }
+
+    /**
+     * {@inheritDoc common.seeWhatIsSent}
+     * @type {import("./common.js").seeWhatIsSent}
+     */
+    seeWhatIsSent() {
+        invariant(window.PrivacyDashboard?.seeWhatIsSent, 'seeWhatIsSent missing')
+        window.PrivacyDashboard.seeWhatIsSent()
+    }
 }
 
 /**
@@ -375,6 +425,22 @@ async function fetchAndroid(message) {
         })
     }
 
+    if (message instanceof FetchToggleReportOptions) {
+        return privacyDashboardApi.getToggleReportOptions()
+    }
+
+    if (message instanceof SendToggleBreakageReport) {
+        return privacyDashboardApi.sendToggleReport()
+    }
+
+    if (message instanceof RejectToggleBreakageReport) {
+        return privacyDashboardApi.rejectToggleReport()
+    }
+
+    if (message instanceof SeeWhatIsSent) {
+        return privacyDashboardApi.seeWhatIsSent()
+    }
+
     console.warn('unhandled message', message)
 }
 

shared/js/browser/common.js

@@ -280,31 +280,37 @@
 
 /**
  * Fetch the data needed to display the toggle report screen
+ * @returns {Promise<import('../../../schema/__generated__/schema.types').ToggleReportScreen>}
  */
 export async function getToggleReportOptions() {
     throw new Error('base impl')
 }
 
 /**
  * Send the toggle report
- * @returns {Promise<void>}
  */
-export async function sendToggleReport() {
+export function sendToggleReport() {
     throw new Error('base impl')
 }
 
 /**
  * Reject sending the toggle report
- * @returns {Promise<void>}
  */
-export async function rejectToggleReport() {
+export function rejectToggleReport() {
+    throw new Error('base impl')
+}
+
+/**
+ * Sent when the user expands the disclosure
+ */
+export function seeWhatIsSent() {
     throw new Error('base impl')
 }
 
 /**
  * Sent when the user expands the disclosure
  */
 export function seeWhatIsSent() {
     throw new Error('base impl')
 }
 

shared/js/browser/macos-communication.js

@@ -317,7 +317,7 @@ export function privacyDashboardGetToggleReportOptions() {
 export function privacyDashboardSendToggleReport() {
     invariant(window.webkit?.messageHandlers, 'webkit.messageHandlers required')
     invariant(window.webkit.messageHandlers.privacyDashboardSendToggleReport, 'privacyDashboardSendToggleReport required')
-    return window.webkit.messageHandlers.privacyDashboardSendToggleReport.postMessage({})
+    window.webkit.messageHandlers.privacyDashboardSendToggleReport.postMessage({})
 }
 
 /**
@@ -335,7 +335,7 @@ export function privacyDashboardSendToggleReport() {
 export function privacyDashboardRejectToggleReport() {
     invariant(window.webkit?.messageHandlers, 'webkit.messageHandlers required')
     invariant(window.webkit.messageHandlers.privacyDashboardRejectToggleReport, 'privacyDashboardRejectToggleReport required')
-    return window.webkit.messageHandlers.privacyDashboardRejectToggleReport.postMessage({})
+    window.webkit.messageHandlers.privacyDashboardRejectToggleReport.postMessage({})
 }
 
 /**