Skip to content

Commit 10d8a9d

Browse files
smallubansmalluban
committed
Selective blocking in panel UI
1 parent 70d0123 commit 10d8a9d

File tree

28 files changed

+656
-106
lines changed

28 files changed

+656
-106
lines changed

‎extension-manifest-v2/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"foundation-sites": "^6.6.2",
5252
"ghostery-common": "^1.3.12",
5353
"history": "^4.10.1",
54-
"hybrids": "^8.2.14",
54+
"hybrids": "^8.2.15",
5555
"linkedom": "^0.14.21",
5656
"moment": "^2.29.1",
5757
"prop-types": "^15.6.2",

‎extension-manifest-v3/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"@ghostery/ui": "^1.0.0",
4040
"@github/relative-time-element": "^4.3.0",
4141
"@whotracksme/webextension-packages": "5.0.5",
42-
"hybrids": "^8.2.14",
42+
"hybrids": "^8.2.15",
4343
"idb": "^7.1.1",
4444
"jwt-decode": "^4.0.0",
4545
"tldts-experimental": "^6.0.19"

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

+6-10
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,22 @@ export default {
3838
},
3939
},
4040
render: () => html`
41-
<template layout="contents">
41+
<template layout="block relative layer:400">
42+
<div id="backdrop" layout="fixed inset:0" onclick="${close}"></div>
4243
<div
4344
id="dialog"
4445
layout="
4546
grid::max|1
46-
width:full::full height:auto::auto
47+
width:full::full height:auto::94vh
4748
margin:0 padding:0
48-
fixed inset top:4 bottom layer:400
49+
fixed inset bottom top:auto
4950
"
5051
>
5152
<section
5253
id="header"
53-
layout="grid:24px|1|24px items:center padding:1.5:2"
54+
layout="grid:24px|1|24px items:center padding:1.5:2 gap"
5455
>
55-
<div layout="column items:center area:2/3">
56+
<div layout="block:center column items:center area:2/3">
5657
<slot name="header"></slot>
5758
</div>
5859
<ui-action>
@@ -69,11 +70,6 @@ export default {
6970
<slot></slot>
7071
</section>
7172
</div>
72-
<div
73-
id="backdrop"
74-
layout="fixed layer:300 inset:0"
75-
onclick="${close}"
76-
></div>
7773
</template>
7874
`.css`
7975
#dialog {

‎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

+30-4
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,19 @@ 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, {
17+
getExceptionStatus,
18+
} from '/store/tracker-exception.js';
1619
import Notification from '../store/notification.js';
1720

1821
import { openTabWithUrl } from '/utils/tabs.js';
22+
import { isCategoryBlockedByDefault } from '/utils/trackerdb.js';
1923

2024
import sleep from '../assets/sleep.svg';
2125

2226
import Navigation from './navigation.js';
2327
import TrackerDetails from './tracker-details.js';
28+
import ProtectionStatus from './protection-status.js';
2429

2530
const SETTINGS_URL = chrome.runtime.getURL('/pages/settings/index.html');
2631
const ONBOARDING_URL = chrome.runtime.getURL('/pages/onboarding/index.html');
@@ -72,13 +77,33 @@ function setStatsType(host, event) {
7277
}
7378

7479
export default {
75-
[router.connect]: { stack: [Navigation, TrackerDetails] },
80+
[router.connect]: { stack: [Navigation, TrackerDetails, ProtectionStatus] },
7681
options: store(Options),
7782
stats: store(TabStats),
83+
trackerExceptions: store([TrackerException]),
84+
trackers: ({ stats, trackerExceptions }) =>
85+
store.ready(stats, trackerExceptions) &&
86+
stats.trackers.map((t) => {
87+
const exception = trackerExceptions.find((e) => e.id === t.id);
88+
return {
89+
...t,
90+
status: exception
91+
? getExceptionStatus(exception, stats.domain)
92+
: Promise.resolve(
93+
isCategoryBlockedByDefault(t.category) ? 'blocked' : 'trusted',
94+
),
95+
};
96+
}),
7897
notification: store(Notification),
79-
content: ({ options, stats, notification }) => html`
98+
content: ({
99+
options,
100+
stats,
101+
notification,
102+
trackerExceptions,
103+
trackers,
104+
}) => html`
80105
<template layout="column grow relative">
81-
${store.ready(options, stats) &&
106+
${store.ready(options, stats, trackerExceptions) &&
82107
html`
83108
${options.terms &&
84109
html`
@@ -128,8 +153,9 @@ export default {
128153
<ui-panel-stats
129154
domain="${stats.domain}"
130155
categories="${stats.topCategories}"
131-
trackers="${stats.trackers}"
156+
trackers="${trackers}"
132157
dialog="${TrackerDetails}"
158+
exceptionDialog="${ProtectionStatus}"
133159
type="${options.panel.statsType}"
134160
ontypechange="${setStatsType}"
135161
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+
<ui-text slot="header" type="body-s" color="gray-600">
54+
${tracker.company &&
55+
tracker.company !== tracker.name &&
56+
tracker.company + ' •'}
57+
${labels.categories[tracker.category]}
58+
</ui-text>
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+
};

0 commit comments

Comments
 (0)