feat(panel): Add the "Report a broken page" view

src/background/broken-page-report.js

@@ -0,0 +1,104 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { store } from 'hybrids';
+
+import Options, { SYNC_OPTIONS } from '/store/options.js';
+
+import getBrowserInfo from '/utils/browser-info.js';
+import { SUPPORT_PAGE_URL } from '/utils/urls.js';
+
+import { tabStats } from './stats.js';
+
+async function getMetadata(tab) {
+  let result = '\n\n------\n\n';
+
+  const { version } = chrome.runtime.getManifest();
+  result += `Extension version: ${version}`;
+
+  const trackers = tabStats.get(tab.id)?.trackers.map((t) => t.id);
+  if (trackers) {
+    result += `\nTrackers(${trackers.length}): ${trackers.join(', ')}`;
+  }
+
+  // Send only not-private options
+  const options = Object.fromEntries(
+    Object.entries(await store.resolve(Options)).filter(([key]) =>
+      SYNC_OPTIONS.includes(key),
+    ),
+  );
+
+  result += `\nOptions: ${JSON.stringify(options)}`;
+
+  return result;
+}
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  if (msg.action === 'report-broken-page') {
+    (async () => {
+      try {
+        const formData = new FormData();
+        const browserInfo = await getBrowserInfo();
+
+        formData.append('support_ticket[user_name]', '');
+        formData.append('support_ticket[user_email]', msg.email);
+        formData.append(
+          'support_ticket[subject]',
+          `[GBE] Broken page report: ${msg.url}`,
+        );
+
+        formData.append(
+          'support_ticket[message]',
+          msg.description + (await getMetadata(msg.tab)),
+        );
+
+        formData.append('support_ticket[selected_browser]', browserInfo.name);
+        formData.append('support_ticket[browser_version]', browserInfo.version);
+
+        if (browserInfo.osVersion !== 'other') {
+          formData.append('support_ticket[selected_os]', browserInfo.osVersion);
+          formData.append('support_ticket[os_version]', '');
+        }
+
+        if (msg.screenshot) {
+          const screenshot = await chrome.tabs.captureVisibleTab(null, {
+            format: 'jpeg',
+            quality: 100,
+          });
+          formData.append(
+            'support_ticket[screenshot]',
+            await fetch(screenshot).then((res) => res.blob()),
+            'screenshot.jpeg',
+          );
+        }
+
+        await fetch(SUPPORT_PAGE_URL, {
+          method: 'POST',
+          body: formData,
+        }).then((res) => {
+          if (!res.ok || res.status > 204) {
+            throw new Error(
+              `Sending report has failed with status: ${res.status}`,
+            );
+          }
+        });
+
+        sendResponse();
+      } catch (e) {
+        sendResponse(e.message);
+      }
+    })();
+
+    return true;
+  }
+
+  return false;
+});

src/background/index.js

@@ -22,6 +22,7 @@ import './session.js';
 import './stats.js';
 import './notifications.js';
 import './serp.js';
+import './broken-page-report.js';
 
 import './helpers.js';
 import './external.js';

src/background/session.js

@@ -9,7 +9,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 import { UPDATE_SESSION_ACTION_NAME } from '/store/session.js';
-import { HOME_PAGE_URL, ACCOUNT_PAGE_URL } from '/utils/api.js';
+import { HOME_PAGE_URL, ACCOUNT_PAGE_URL } from '/utils/urls.js';
 
 // Observe cookie changes (login/logout actions)
 chrome.webNavigation.onDOMContentLoaded.addListener(async ({ url = '' }) => {

src/background/sync.js

@@ -15,7 +15,7 @@ import Session from '/store/session.js';
 
 import { getUserOptions, setUserOptions } from '/utils/api.js';
 import * as OptionsObserver from '/utils/options-observer.js';
-import { HOME_PAGE_URL, ACCOUNT_PAGE_URL } from '/utils/api.js';
+import { HOME_PAGE_URL, ACCOUNT_PAGE_URL } from '/utils/urls.js';
 import debounce from '/utils/debounce.js';
 
 const syncOptions = debounce(

src/manifest.chromium.json

@@ -14,6 +14,7 @@
     "storage",
     "scripting",
     "tabs",
+    "activeTab",
     "webRequest",
     "offscreen"
   ],

src/manifest.firefox.json

@@ -11,6 +11,7 @@
     "storage",
     "scripting",
     "tabs",
+    "activeTab",
     "webNavigation",
     "webRequest",
     "webRequestBlocking",

src/manifest.safari.json

@@ -13,7 +13,8 @@
     "webNavigation",
     "storage",
     "scripting",
-    "tabs"
+    "tabs",
+    "activeTab"
   ],
   "host_permissions": [
     "http://*/*",

src/pages/panel/components/pause.js

@@ -89,7 +89,6 @@ export default {
             html`<ui-text type="body-xs" color="inherit">
               <ui-revoke-at revokeAt="${revokeAt}"></ui-revoke-at>
             </ui-text>`}
-            <slot></slot>
           </div>
         </div>
         <div
@@ -119,6 +118,7 @@ export default {
               `}
         </div>
       </button>
+      <slot></slot>
       ${pauseList &&
       html`
         <section

src/pages/panel/views/main.js

@@ -24,6 +24,8 @@ import sleep from '../assets/sleep.svg';
 import Menu from './menu.js';
 import TrackerDetails from './tracker-details.js';
 import ProtectionStatus from './protection-status.js';
+import ReportForm from './report-form.js';
+import ReportConfirm from './report-confirm.js';
 
 const SETTINGS_URL = chrome.runtime.getURL(
   '/pages/settings/index.html#@settings-privacy',
@@ -97,7 +99,9 @@ function setStatsType(host, event) {
 }
 
 export default {
-  [router.connect]: { stack: [Menu, TrackerDetails, ProtectionStatus] },
+  [router.connect]: {
+    stack: [Menu, ReportForm, ReportConfirm, TrackerDetails, ProtectionStatus],
+  },
   options: store(Options),
   stats: store(TabStats),
   notification: store(Notification),
@@ -166,6 +170,29 @@ export default {
                 revokeAt="${globalPause?.revokeAt || paused?.revokeAt}"
                 data-qa="component:pause"
               >
+                ${paused?.revokeAt &&
+                html`
+                  <div layout="row center">
+                    <ui-action>
+                      <a
+                        href="${router.url(ReportForm)}"
+                        layout="row center gap padding:0.5:1:1 margin:top:-1"
+                      >
+                        <ui-text type="body-s">Something wrong?</ui-text>
+                        <ui-text
+                          type="label-s"
+                          layout="row inline items:center gap:0.5"
+                        >
+                          Report a broken page
+                          <ui-icon
+                            name="arrow-right"
+                            layout="size:1.5"
+                          ></ui-icon>
+                        </ui-text>
+                      </a>
+                    </ui-action>
+                  </div>
+                `}
               </panel-pause>
             `
           : html`

src/pages/panel/views/report-confirm.js

@@ -0,0 +1,49 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { html, router } from 'hybrids';
+
+import contributionImage from '../assets/contribution.svg';
+
+export default {
+  render: () => html`
+    <template layout="column grow">
+      <ui-header>
+        <div layout="row gap items:center">
+          <ui-icon name="report" layout="size:2"></ui-icon>
+          Report a broken page
+        </div>
+        <ui-action slot="actions">
+          <a href="${router.backUrl()}">
+            <ui-icon name="close" color="gray-800" layout="size:3"></ui-icon>
+          </a>
+        </ui-action>
+      </ui-header>
+
+      <panel-container>
+        <div layout="column items:center gap padding:2:2:4">
+          <img
+            src="${contributionImage}"
+            alt="Contribution"
+            layout="size:20 margin:3"
+          />
+          <ui-text type="headline-s" layout="block:center width:::40">
+            Many thanks for your report!
+          </ui-text>
+          <ui-text type="body-m" layout="block:center width:::36">
+            Your contribution helps build a more private and safe internet for
+            the entire Ghostery community.
+          </ui-text>
+        </div>
+      </panel-container>
+    </template>
+  `,
+};