Simplify Never-Consent UI/UX (#1484)

ghostery · Feb 26, 2024 · 5cb7164 · 5cb7164
1 parent 2f2e4fa
commit 5cb7164
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 110 deletions.
diff --git a/extension-manifest-v2/app/content-scripts/autoconsent.js b/extension-manifest-v2/app/content-scripts/autoconsent.js
@@ -24,7 +24,7 @@ if (document.contentType === 'text/html') {
 				if (shownIframe) return false;
 
 				showIframe(chrome.runtime.getURL(
-					`app/templates/autoconsent.html?host=${encodeURIComponent(msg.domain)}&default=${msg.defaultForAll ? 'all' : ''}`
+					`app/templates/autoconsent.html?host=${encodeURIComponent(msg.domain)}`
 				));
 				shownIframe = true;
 

diff --git a/extension-manifest-v2/src/background.js b/extension-manifest-v2/src/background.js
@@ -573,11 +573,9 @@ function onMessageHandler(request, sender, callback) {
 			if (message.url) {
 				conf.autoconsent_whitelist = (conf.autoconsent_whitelist || []).concat(message.url);
 				conf.autoconsent_blacklist = conf.autoconsent_blacklist || [];
-				conf.autoconsent_interactions += 1;
 			} else {
 				conf.autoconsent_whitelist = false;
 				conf.autoconsent_blacklist = false;
-				conf.autoconsent_interactions = 0;
 			}
 
 			account.saveUserSettings().catch(err => log('Background autoconsent', err));
@@ -588,12 +586,10 @@ function onMessageHandler(request, sender, callback) {
 			if (message.url) {
 				conf.autoconsent_whitelist = conf.autoconsent_whitelist || [];
 				conf.autoconsent_blacklist = (conf.autoconsent_blacklist || []).concat(message.url);
-				conf.autoconsent_interactions += 1;
 			} else {
 				conf.enable_autoconsent = false;
 				conf.autoconsent_whitelist = [];
 				conf.autoconsent_blacklist = [];
-				conf.autoconsent_interactions = 0;
 			}
 
 			account.saveUserSettings().catch(err => log('Background autoconsent', err));

diff --git a/extension-manifest-v2/src/classes/ConfData.js b/extension-manifest-v2/src/classes/ConfData.js
@@ -136,7 +136,6 @@ class ConfData {
 			_initProperty('account', null);
 			_initProperty('autoconsent_whitelist', []);
 			_initProperty('autoconsent_blacklist', []);
-			_initProperty('autoconsent_interactions', 0);
 			_initProperty('bugs', {});
 			_initProperty('click2play', {});
 			_initProperty('cmp_data', []);

diff --git a/extension-manifest-v2/src/classes/PanelData.js b/extension-manifest-v2/src/classes/PanelData.js
@@ -604,10 +604,6 @@ class PanelData {
 			syncSetDataChanged = true;
 		}
 
-		if (data.hasOwnProperty('enable_autoconsent')) {
-			conf.autoconsent_interactions = 0;
-		}
-
 		if (syncSetDataChanged) {
 			// TODO: skip it if the user is not logged in (to avoid errors in the debug logs)
 			account.saveUserSettings().catch((err) => {

diff --git a/extension-manifest-v2/src/modules/autoconsent.js b/extension-manifest-v2/src/modules/autoconsent.js
@@ -89,7 +89,7 @@ async function evalCode(code, id, tabId, frameId) {
 }
 
 async function openIframe(msg, tabId) {
-	const { autoconsent_whitelist, autoconsent_interactions } = conf;
+	const { autoconsent_whitelist } = conf;
 	if (!autoconsent_whitelist) return;
 
 	const domain = await getTabDomain(tabId);
@@ -104,7 +104,6 @@ async function openIframe(msg, tabId) {
 			action: 'autoconsent',
 			type: 'openIframe',
 			domain,
-			defaultForAll: autoconsent_interactions >= 2,
 		},
 		{ frameId: 0 },
 	);

diff --git a/extension-manifest-v3/src/background/autoconsent.js b/extension-manifest-v3/src/background/autoconsent.js
@@ -99,9 +99,7 @@ async function openIframe(msg, tabId) {
 
     sendShowIframeMessage(
       tabId,
-      `pages/autoconsent/index.html?host=${encodeURIComponent(
-        domain,
-      )}&default=${autoconsent.interactions >= 2 ? 'all' : ''}`,
+      `pages/autoconsent/index.html?host=${encodeURIComponent(domain)}`,
     );
   }
 }

diff --git a/extension-manifest-v3/src/pages/autoconsent/index.js b/extension-manifest-v3/src/pages/autoconsent/index.js
@@ -24,13 +24,12 @@ async function enable(_, event) {
   const options = await store.resolve(Options);
   const { all } = event.detail;
 
-  let { allowed, disallowed, interactions } = options.autoconsent;
+  let { allowed, disallowed } = options.autoconsent;
 
   if (all) {
     allowed = [];
     disallowed = [];
   } else {
-    interactions += 1;
     allowed = allowed.includes(hostname) ? allowed : allowed.concat(hostname);
     disallowed = disallowed.filter((h) => h !== hostname);
   }
@@ -41,7 +40,6 @@ async function enable(_, event) {
       all,
       allowed,
       disallowed,
-      interactions,
     },
   });
 }
@@ -54,22 +52,20 @@ async function disable(_, event) {
   const options = await store.resolve(Options);
   const { all } = event.detail;
 
-  let { disallowed, allowed, interactions } = options.autoconsent;
+  let { disallowed, allowed } = options.autoconsent;
 
   if (all) {
     disallowed = [];
     allowed = [];
-    interactions = 0;
   } else {
-    interactions += 1;
     disallowed = disallowed.includes(hostname)
       ? disallowed
       : disallowed.concat(hostname);
   }
 
   store.set(Options, {
     blockAnnoyances: !all,
-    autoconsent: { allowed, disallowed, interactions },
+    autoconsent: { allowed, disallowed },
   });
 }
 

diff --git a/extension-manifest-v3/src/store/options.js b/extension-manifest-v3/src/store/options.js
@@ -48,7 +48,6 @@ const Options = {
     all: false,
     allowed: [String],
     disallowed: [String],
-    interactions: 0,
   },
 
   // Browser icon
@@ -247,7 +246,6 @@ async function migrateFromMV2() {
         all: !storage.autoconsent_whitelist,
         allowed: storage.autoconsent_whitelist || [],
         disallowed: storage.autoconsent_blacklist || [],
-        interactions: storage.autoconsent_interactions || 0,
       };
 
       options.paused = storage.site_whitelist.map((domain) => ({

diff --git a/packages/ui/src/modules/autoconsent/views/confirm.js b/packages/ui/src/modules/autoconsent/views/confirm.js
@@ -9,7 +9,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import { html, msg, router, dispatch } from 'hybrids';
+import { html, msg, dispatch } from 'hybrids';
 
 function closeIframe(host) {
   dispatch(host, 'closeiframe', {
@@ -21,25 +21,25 @@ function closeIframe(host) {
 export default {
   enabled: false,
   content: ({ enabled }) => html`
-    <template layout="column margin:3 gap:4">
-      <div layout="column items:center gap margin:0:5">
-        <ui-text type="display-s" layout="block:center">
-          ${enabled
-            ? msg`Never-Consent is Enabled`
-            : msg`Never-Consent is Disabled`}
-        </ui-text>
-        <ui-text layout="block:center">
-          ${msg.html`You can always change these settings in the&nbsp;<strong>Ghostery control panel</strong>.`}
-        </ui-text>
-      </div>
-      <div layout="grid:2 gap:2">
-        <ui-button type="outline" size="small">
-          <a href="${router.backUrl()}">Back</a>
-        </ui-button>
-        <ui-button type="primary" size="small">
-          <button onclick="${closeIframe}">OK</button>
-        </ui-button>
-      </div>
+    <template layout="block">
+      <ui-autoconsent-card layout="row padding:2 padding:right:4 gap:2">
+        <ui-icon name="ghosty" color="primary-500" layout="size:4"></ui-icon>
+        <div layout="column gap:1.5">
+          <div layout="column gap">
+            <ui-text type="display-s">
+              ${enabled
+                ? msg`Never-Consent is Enabled`
+                : msg`Never-Consent is Disabled`}
+            </ui-text>
+            <ui-text>
+              ${msg.html`You can always change these settings in the&nbsp;<strong>Ghostery control panel</strong>.`}
+            </ui-text>
+          </div>
+          <ui-button type="outline" size="small">
+            <button onclick="${closeIframe}">OK</button>
+          </ui-button>
+        </div>
+      </ui-autoconsent-card>
     </template>
   `,
 };
diff --git a/packages/ui/src/modules/autoconsent/views/home.js b/packages/ui/src/modules/autoconsent/views/home.js
@@ -13,10 +13,6 @@ import { html, router, dispatch } from 'hybrids';
 
 import Confirm from './confirm.js';
 
-const defaultChoice = new URLSearchParams(window.location.search).get(
-  'default',
-);
-
 function onConfirm(type) {
   return (host) => {
     dispatch(host, type, {
@@ -28,66 +24,71 @@ function onConfirm(type) {
 
 export default {
   [router.connect]: { stack: [Confirm] },
-  scope: defaultChoice === 'all' ? 'all' : 'selected',
+  scope: 'all',
   content: ({ scope }) => html`
-    <template layout="column margin:3 gap:4">
-      <div layout="column items:center gap">
-        <ui-text type="display-s" layout="block:center">
-          TIRED OF COOKIE POPUPS?
-        </ui-text>
-        <ui-text layout="block:center">
-          Let Ghostery be your complete privacy advocate and reject all popups
-          and tracking for you, or do it yourself!
-        </ui-text>
-      </div>
-      <div layout="column items:center gap">
-        <ui-text type="display-2xs"> Enable Never-Consent? </ui-text>
-        <ui-text>Apply optimal privacy settings:</ui-text>
-        <div layout="column gap:0.5">
-          <label layout="row items:center gap">
-            <input
-              type="radio"
-              name="scope"
-              value="selected"
-              onchange="${html.set('scope')}"
-              checked="${scope === 'selected'}"
-              layout="margin:0"
-              style="accent-color: var(--ui-color-primary-700)"
-            />
-            <ui-text>on this website</ui-text>
-          </label>
-          <label layout="row items:center gap">
-            <input
-              type="radio"
-              name="scope"
-              value="all"
-              onchange="${html.set('scope')}"
-              checked="${scope === 'all'}"
-              layout="margin:0"
-              style="accent-color: var(--ui-color-primary-700)"
-            />
-            <ui-text>on all websites</ui-text>
-          </label>
+    <template layout="block">
+      <ui-autoconsent-card>
+        <ui-autoconsent-header></ui-autoconsent-header>
+        <div layout="column margin:3 gap:4">
+          <div layout="column items:center gap">
+            <ui-text type="display-s" layout="block:center">
+              TIRED OF COOKIE POPUPS?
+            </ui-text>
+            <ui-text layout="block:center">
+              Let Ghostery be your complete privacy advocate and reject all
+              popups and tracking for you, or do it yourself!
+            </ui-text>
+          </div>
+          <div layout="column items:center gap">
+            <ui-text type="display-2xs"> Enable Never-Consent? </ui-text>
+            <ui-text>Apply optimal privacy settings:</ui-text>
+            <div layout="column gap:0.5">
+              <label layout="row items:center gap">
+                <input
+                  type="radio"
+                  name="scope"
+                  value="all"
+                  onchange="${html.set('scope')}"
+                  checked="${scope === 'all'}"
+                  layout="margin:0"
+                  style="accent-color: var(--ui-color-primary-700)"
+                />
+                <ui-text>on all websites</ui-text>
+              </label>
+              <label layout="row items:center gap">
+                <input
+                  type="radio"
+                  name="scope"
+                  value="selected"
+                  onchange="${html.set('scope')}"
+                  checked="${scope === 'selected'}"
+                  layout="margin:0"
+                  style="accent-color: var(--ui-color-primary-700)"
+                />
+                <ui-text>on this website</ui-text>
+              </label>
+            </div>
+          </div>
+          <div layout="grid:2 gap:2">
+            <ui-button type="outline" size="small">
+              <a
+                href="${router.url(Confirm, { enabled: false })}"
+                onclick="${onConfirm('disable')}"
+              >
+                No
+              </a>
+            </ui-button>
+            <ui-button type="primary" size="small">
+              <a
+                href="${router.url(Confirm, { enabled: true })}"
+                onclick="${onConfirm('enable')}"
+              >
+                Yes
+              </a>
+            </ui-button>
+          </div>
         </div>
-      </div>
-      <div layout="grid:2 gap:2">
-        <ui-button type="outline" size="small">
-          <a
-            href="${router.url(Confirm, { enabled: false })}"
-            onclick="${onConfirm('disable')}"
-          >
-            No
-          </a>
-        </ui-button>
-        <ui-button type="primary" size="small">
-          <a
-            href="${router.url(Confirm, { enabled: true })}"
-            onclick="${onConfirm('enable')}"
-          >
-            Yes
-          </a>
-        </ui-button>
-      </div>
+      </ui-autoconsent-card>
     </template>
   `,
 };
diff --git a/packages/ui/src/modules/autoconsent/views/main.js b/packages/ui/src/modules/autoconsent/views/main.js
@@ -28,10 +28,7 @@ export default {
   },
   content: ({ stack, categories }) => html`
     <template layout="grid::min|1|min">
-      <ui-autoconsent-card oncloseiframe="${closeIframe}">
-        <ui-autoconsent-header></ui-autoconsent-header>
-        ${stack}
-      </ui-autoconsent-card>
+      <div oncloseiframe="${closeIframe}">${stack}</div>
       ${router.active(Home) &&
       html`
         <ui-autoconsent-card layout="margin:top:0.5">