Skip to content

Commit 8493a14

Browse files
smallubansmalluban
committed
Selective blocking in panel UI
1 parent cb3b6c6 commit 8493a14

File tree

18 files changed

+421
-60
lines changed

18 files changed

+421
-60
lines changed

‎extension-manifest-v3/src/pages/panel/components/dialog.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,16 @@ export default {
4343
id="dialog"
4444
layout="
4545
grid::max|1
46-
width:full::full height:auto::auto
46+
width:full::full height:auto::94vh
4747
margin:0 padding:0
48-
fixed inset top:4 bottom layer:400
48+
fixed inset bottom top:auto layer:400
4949
"
5050
>
5151
<section
5252
id="header"
53-
layout="grid:24px|1|24px items:center padding:1.5:2"
53+
layout="grid:24px|1|24px items:center padding:1.5:2 gap"
5454
>
55-
<div layout="column items:center area:2/3">
55+
<div layout="block:center column items:center area:2/3">
5656
<slot name="header"></slot>
5757
</div>
5858
<ui-action>

‎extension-manifest-v3/src/pages/panel/components/feedback.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default {
2020
html`
2121
<section layout="column center grow">
2222
<div layout="row center gap:0.5">
23-
<ui-icon name="block" color="danger-700"></ui-icon>
23+
<ui-icon name="block-s" color="danger-700"></ui-icon>
2424
<ui-text type="headline-m">${blocked}</ui-text>
2525
</div>
2626
<div layout="row center gap:0.5">

‎extension-manifest-v3/src/pages/panel/views/home.js

+33-4
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,17 @@ import { html, store, router } from 'hybrids';
1313

1414
import Options from '/store/options.js';
1515
import TabStats from '/store/tab-stats.js';
16+
import TrackerException from '/store/tracker-exception.js';
1617
import Notification from '../store/notification.js';
1718

1819
import { openTabWithUrl } from '/utils/tabs.js';
20+
import { isCategoryBlockedByDefault } from '/utils/trackerdb.js';
1921

2022
import sleep from '../assets/sleep.svg';
2123

2224
import Navigation from './navigation.js';
2325
import TrackerDetails from './tracker-details.js';
26+
import ProtectionStatus from './protection-status.js';
2427

2528
const SETTINGS_URL = chrome.runtime.getURL('/pages/settings/index.html');
2629
const ONBOARDING_URL = chrome.runtime.getURL('/pages/onboarding/index.html');
@@ -72,13 +75,38 @@ function setStatsType(host, event) {
7275
}
7376

7477
export default {
75-
[router.connect]: { stack: [Navigation, TrackerDetails] },
78+
[router.connect]: { stack: [Navigation, TrackerDetails, ProtectionStatus] },
7679
options: store(Options),
7780
stats: store(TabStats),
81+
trackerExceptions: store([TrackerException]),
82+
trackers: ({ stats, trackerExceptions }) =>
83+
store.ready(stats, trackerExceptions) &&
84+
stats.trackers.map((t) => {
85+
const exception = trackerExceptions.find((e) => e.id === t.id);
86+
let blocked = isCategoryBlockedByDefault(t.category);
87+
88+
if (exception) {
89+
blocked =
90+
isCategoryBlockedByDefault(t.category) == exception.overwriteStatus
91+
? exception.blocked.includes(stats.domain)
92+
: !exception.allowed.includes(stats.domain);
93+
}
94+
95+
return {
96+
...t,
97+
exceptionBlocked: blocked,
98+
};
99+
}),
78100
notification: store(Notification),
79-
content: ({ options, stats, notification }) => html`
101+
content: ({
102+
options,
103+
stats,
104+
notification,
105+
trackerExceptions,
106+
trackers,
107+
}) => html`
80108
<template layout="column grow relative">
81-
${store.ready(options, stats) &&
109+
${store.ready(options, stats, trackerExceptions) &&
82110
html`
83111
${options.terms &&
84112
html`
@@ -128,8 +156,9 @@ export default {
128156
<ui-panel-stats
129157
domain="${stats.domain}"
130158
categories="${stats.topCategories}"
131-
trackers="${stats.trackers}"
159+
trackers="${trackers}"
132160
dialog="${TrackerDetails}"
161+
exceptionDialog="${ProtectionStatus}"
133162
type="${options.panel.statsType}"
134163
ontypechange="${setStatsType}"
135164
layout="margin:1:1.5"

‎extension-manifest-v3/src/pages/panel/views/protection-status.js

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { html, msg, router, store } from 'hybrids';
2+
3+
import * as labels from '@ghostery/ui/labels';
4+
5+
import { isCategoryBlockedByDefault } from '/utils/trackerdb.js';
6+
7+
import TabStats from '/store/tab-stats.js';
8+
import TrackerException from '/store/tracker-exception.js';
9+
10+
function toggleException(type) {
11+
return ({ exception, stats }) => {
12+
const list = [...exception[type]];
13+
const index = list.indexOf(stats.domain);
14+
if (index !== -1) {
15+
list.splice(index, 1);
16+
} else {
17+
list.push(stats.domain);
18+
}
19+
20+
store.set(exception, { [type]: list });
21+
};
22+
}
23+
24+
export default {
25+
[router.connect]: { dialog: true },
26+
stats: store(TabStats),
27+
trackerId: '',
28+
tracker: ({ stats, trackerId }) =>
29+
stats.trackers.find((t) => t.id === trackerId),
30+
exception: store(TrackerException, { id: 'trackerId' }),
31+
blockedByDefault: ({ tracker }) =>
32+
isCategoryBlockedByDefault(tracker.category),
33+
blockedOnSite: ({ stats, exception }) =>
34+
store.ready(exception) && exception.blocked.includes(stats.domain),
35+
allowedOnSite: ({ stats, exception }) =>
36+
store.ready(exception) && exception.allowed.includes(stats.domain),
37+
content: ({
38+
stats,
39+
tracker,
40+
exception,
41+
blockedByDefault,
42+
blockedOnSite,
43+
allowedOnSite,
44+
}) => html`
45+
<template layout="column">
46+
<gh-panel-dialog>
47+
<div
48+
id="gh-panel-company-alerts"
49+
layout="absolute inset:1 bottom:auto"
50+
></div>
51+
<ui-text slot="header" type="label-l">${tracker.name}</ui-text>
52+
53+
${tracker.company !== tracker.name &&
54+
html`
55+
<ui-text slot="header" type="body-s" color="gray-600">
56+
${tracker.company} • ${labels.categories[tracker.category]}
57+
</ui-text>
58+
`}
59+
${store.ready(exception) &&
60+
html`
61+
<div layout="column gap">
62+
<div layout="row:wrap gap">
63+
<div layout="grow">
64+
<ui-text type="label-m">Protection status</ui-text>
65+
<ui-text type="body-s" color="gray-500">
66+
For all websites
67+
</ui-text>
68+
</div>
69+
<ui-panel-protection-status-toggle
70+
layout="shrink:0"
71+
value="${exception.overwriteStatus}"
72+
blockByDefault="${blockedByDefault}"
73+
tooltip
74+
onchange="${html.set(exception, 'overwriteStatus')}"
75+
></ui-panel-protection-status-toggle>
76+
</div>
77+
<ui-line></ui-line>
78+
<div layout="row gap items:center">
79+
<div layout="grow">
80+
<ui-text type="label-m">
81+
Add ${stats.domain} as exception
82+
</ui-text>
83+
<ui-text type="body-m" color="gray-500">
84+
${blockedByDefault === exception.overwriteStatus
85+
? msg`Block on this website`
86+
: msg`Trust on this website`}
87+
</ui-text>
88+
</div>
89+
${blockedByDefault === exception.overwriteStatus
90+
? html`
91+
<ui-toggle
92+
value="${blockedOnSite}"
93+
onchange="${toggleException('blocked')}"
94+
type="status"
95+
color="danger-500"
96+
></ui-toggle>
97+
`
98+
: html`
99+
<ui-toggle
100+
value="${allowedOnSite}"
101+
onchange="${toggleException('allowed')}"
102+
type="status"
103+
color="success-500"
104+
></ui-toggle>
105+
`}
106+
</div>
107+
</div>
108+
`}
109+
</gh-panel-dialog>
110+
</template>
111+
`,
112+
};

‎extension-manifest-v3/src/pages/panel/views/tracker-details.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import { html, router, store } from 'hybrids';
1414
import TabStats from '/store/tab-stats.js';
1515
import { openTabWithUrl } from '/utils/tabs.js';
1616

17+
import * as labels from '@ghostery/ui/labels';
18+
1719
function cleanUp(text) {
1820
return text.replace(/(\\"|\\n|\\t|\\r)/g, '').trim();
1921
}
@@ -55,7 +57,7 @@ export default {
5557
${tracker.company !== tracker.name &&
5658
html`
5759
<ui-text slot="header" type="body-s" color="gray-600">
58-
${tracker.company}
60+
${tracker.company} • ${labels.categories[tracker.category]}
5961
</ui-text>
6062
`}
6163
${(tracker.description || wtmUrl) &&
@@ -106,7 +108,7 @@ export default {
106108
`}
107109
${tracker.requestsBlocked.length > 0 &&
108110
html`
109-
<ui-icon name="block"></ui-icon>
111+
<ui-icon name="block-s"></ui-icon>
110112
<div layout="column gap">
111113
<ui-text type="label-s">URLs blocked</ui-text>
112114
<div layout="column gap:2">

‎extension-manifest-v3/src/pages/settings/views/account.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -107,11 +107,11 @@ export default {
107107
</div>
108108
${store.ready(session) &&
109109
html`
110-
<ui-settings-toggle
110+
<ui-toggle
111111
disabled="${!session.user}"
112112
value="${session.user && options.sync}"
113113
onchange="${session.user && html.set(options, 'sync')}"
114-
></ui-settings-toggle>
114+
></ui-toggle>
115115
`}
116116
</div>
117117
</div>

‎extension-manifest-v3/src/pages/settings/views/privacy.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,10 @@ export default {
8282
Eliminates ads on wesbites for safe and fast browsing.
8383
</ui-text>
8484
</div>
85-
<ui-settings-toggle
85+
<ui-toggle
8686
value="${options.blockAds}"
8787
onchange="${html.set(options, 'blockAds')}"
88-
></ui-settings-toggle>
88+
></ui-toggle>
8989
</div>
9090
</div>
9191
<div layout="row items:start gap:2" layout@768px="gap:5">
@@ -105,10 +105,10 @@ export default {
105105
technology.
106106
</ui-text>
107107
</div>
108-
<ui-settings-toggle
108+
<ui-toggle
109109
value="${options.blockTrackers}"
110110
onchange="${html.set(options, 'blockTrackers')}"
111-
></ui-settings-toggle>
111+
></ui-toggle>
112112
</div>
113113
</div>
114114
<div layout="row items:start gap:2" layout@768px="gap:5">
@@ -127,10 +127,10 @@ export default {
127127
Automatically rejects of cookie consent notices.
128128
</ui-text>
129129
</div>
130-
<ui-settings-toggle
130+
<ui-toggle
131131
value="${options.blockAnnoyances}"
132132
onchange="${toggleNeverConsent}"
133-
></ui-settings-toggle>
133+
></ui-toggle>
134134
</div>
135135
</div>
136136
<ui-text type="headline-m" mobile-type="headline-s">
@@ -155,10 +155,10 @@ export default {
155155
their servers instead of linking directly to pages.
156156
</ui-text>
157157
</div>
158-
<ui-settings-toggle
158+
<ui-toggle
159159
value="${options.serpTrackingPrevention}"
160160
onchange="${html.set(options, 'serpTrackingPrevention')}"
161-
></ui-settings-toggle>
161+
></ui-toggle>
162162
</div>
163163
</div>
164164
</section>

‎extension-manifest-v3/src/pages/settings/views/whotracksme.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@ export default {
7171
tracker wheel.
7272
</ui-text>
7373
</div>
74-
<ui-settings-toggle
74+
<ui-toggle
7575
value="${options.trackerWheel}"
7676
onchange="${html.set(options, 'trackerWheel')}"
77-
></ui-settings-toggle>
77+
></ui-toggle>
7878
</div>
7979
</div>
8080
${Options.trackerCount &&
@@ -96,10 +96,10 @@ export default {
9696
browser toolbar.
9797
</ui-text>
9898
</div>
99-
<ui-settings-toggle
99+
<ui-toggle
100100
value="${options.trackerCount}"
101101
onchange="${html.set(options, 'trackerCount')}"
102-
></ui-settings-toggle>
102+
></ui-toggle>
103103
</div>
104104
</div>
105105
`}
@@ -132,10 +132,10 @@ export default {
132132
</a>
133133
</ui-text>
134134
</div>
135-
<ui-settings-toggle
135+
<ui-toggle
136136
value="${options.wtmSerpReport}"
137137
onchange="${html.set(options, 'wtmSerpReport')}"
138-
></ui-settings-toggle>
138+
></ui-toggle>
139139
</div>
140140
</div>
141141
</section>

0 commit comments

Comments
 (0)