Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify Never-Consent UI/UX #1484

Merged
merged 1 commit into from
Feb 26, 2024
Merged

Simplify Never-Consent UI/UX #1484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion extension-manifest-v2/app/content-scripts/autoconsent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
4 changes: 0 additions & 4 deletions extension-manifest-v2/src/background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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));
Expand Down
1 change: 0 additions & 1 deletion extension-manifest-v2/src/classes/ConfData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', []);
Expand Down
4 changes: 0 additions & 4 deletions extension-manifest-v2/src/classes/PanelData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
3 changes: 1 addition & 2 deletions extension-manifest-v2/src/modules/autoconsent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -104,7 +104,6 @@ async function openIframe(msg, tabId) {
action: 'autoconsent',
type: 'openIframe',
domain,
defaultForAll: autoconsent_interactions >= 2,
},
{ frameId: 0 },
);
Expand Down
4 changes: 1 addition & 3 deletions extension-manifest-v3/src/background/autoconsent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}`,
);
}
}
Expand Down
10 changes: 3 additions & 7 deletions extension-manifest-v3/src/pages/autoconsent/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -41,7 +40,6 @@ async function enable(_, event) {
all,
allowed,
disallowed,
interactions,
},
});
}
Expand All @@ -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 },
});
}

Expand Down
2 changes: 0 additions & 2 deletions extension-manifest-v3/src/store/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ const Options = {
all: false,
allowed: [String],
disallowed: [String],
interactions: 0,
},

// Browser icon
Expand Down Expand Up @@ -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) => ({
Expand Down
40 changes: 20 additions & 20 deletions packages/ui/src/modules/autoconsent/views/confirm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand All @@ -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>
`,
};
125 changes: 63 additions & 62 deletions packages/ui/src/modules/autoconsent/views/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand All @@ -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>
`,
};
5 changes: 1 addition & 4 deletions packages/ui/src/modules/autoconsent/views/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading