Skip to content

/ ghostery-extension

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.

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

Jump to bottom

GH-1621: Site-Specific Whitelisting for Unknown Trackers via Anti-Tracking #417

Merged
merged 21 commits into from Jul 24, 2019
+815 −216
Merged

GH-1621: Site-Specific Whitelisting for Unknown Trackers via Anti-Tracking #417

Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
d17e342
Add anonymized data points to donut graph
Eden12345 Jun 4, 2019
3ec01dc
Half of original implementation complete
Eden12345 Jun 5, 2019
1f80f91
Copy icons to original branch
Eden12345 Jun 10, 2019
c2002a5
Finish rebuilding feature in original branch with cleaner code
Eden12345 Jun 10, 2019
3dcfa15
Rendering is working properly for the detailed view list, holding off…
Eden12345 Jun 12, 2019
3cea1c7
fix tracker counting to include ad-block data
christophertino Jul 8, 2019
c610b08
Merge master into branch to access CliqzFeature component
Eden12345 Jul 9, 2019
82cb4bb
Get Anti-Tracking button working in category header
Eden12345 Jul 9, 2019
d57dc3d
Finish styling header
Eden12345 Jul 10, 2019
df763d6
Header styling and functionality complete, SVG buttons styled
Eden12345 Jul 11, 2019
0fdb21f
Resolve merge conflicts with Tino's changes to CliqzModuleData
Eden12345 Jul 11, 2019
6896ad7
Saving (relatively) working code)
Eden12345 Jul 17, 2019
8a88239
Complete core functionality, UI needs to be completed and refactored
Eden12345 Jul 18, 2019
45a97be
Finish styling
Eden12345 Jul 18, 2019
62d6129
Resolve merge conflicts with develop
Eden12345 Jul 22, 2019
fa3bc84
Fix whitelisting UI bug, hide block all button for Unknown category, …
Eden12345 Jul 22, 2019
a07526e
Add expansion functionality, refactory Categories component
Eden12345 Jul 22, 2019
c0995c2
Move strings into translation library
Eden12345 Jul 22, 2019
d14fca6
Update Summary reducer tests
Eden12345 Jul 22, 2019
ccdc375
Remove console.log from Summary reducer test
Eden12345 Jul 22, 2019
208d475
Fix Settings breakage with antiTracking variable short circuit, fix o…
Eden12345 Jul 23, 2019
File filter
Filter file types
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next
Loading status checks…

Finish styling

  • Loading branch information
@Eden12345
Eden12345 committed Jul 18, 2019
commit 45a97be30951446ae601b8855650987aaa71eeaa
4 app/panel/components/Blocking/Categories.jsx
View file
Open in desktop
@@ -65,7 +65,7 @@ class Categories extends React.Component {
category={(() => ({
id: 'unknown',
name: 'Unknown',
description: 'Unknown trackers blocked by Anti-Tracking',
description: 'Unknown trackers scrubbed by Anti-Tracking',
img_name: 'unknown',
num_total: antiTracking.unknownTrackers.length,
num_blocked: antiTracking.unknownTrackerCount,
@@ -74,7 +74,7 @@ class Categories extends React.Component {
name: otherDataPoint.name,
domains: otherDataPoint.domains,
whitelisted: otherDataPoint.whitelisted,
blocked: !otherDataPoint.whitelisted,
blocked: false,
catId: 'other_data_points',
description: '',
id: 100000000 + idx,
5 app/panel/components/Blocking/Category.jsx
View file
Open in desktop
@@ -230,8 +230,9 @@ class Category extends React.Component {
{ (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') }
</span>
</div>
{(!!trackersBlockedCount || (isUnknown && category.num_blocked !== category.num_total)) && (
<div className="blocked-count">
{((!isUnknown && !!trackersBlockedCount)
|| (isUnknown && category.num_blocked !== category.num_total)) && (
<div className={`blocked-count${isUnknown ? ' ghosty-blue' : ''}`}>
<span className="count">
{isUnknown ? category.num_total - category.num_blocked : `${trackersBlockedCount} `}
</span>
126 app/panel/components/Blocking/Tracker.jsx
View file
Open in desktop
@@ -15,9 +15,12 @@

import React from 'react';
import ReactSVG from 'react-svg';
import ClassNames from 'classnames';

import globals from '../../../../src/classes/Globals';
import { log } from '../../../../src/utils/common';
import { sendMessageInPromise } from '../../utils/msg';
import { renderKnownTrackerButtons, renderUnknownTrackerButtons } from './trackerButtonRenderHelpers';
/**
* @class Implement Tracker component which represents single tracker
* in the Blocking view.
@@ -39,6 +42,7 @@ class Tracker extends React.Component {
this.clickTrackerStatus = this.clickTrackerStatus.bind(this);
this.clickTrackerTrust = this.clickTrackerTrust.bind(this);
this.clickTrackerRestrict = this.clickTrackerRestrict.bind(this);
this.handleAntiTrackingWhitelist = this.handleAntiTrackingWhitelist.bind(this);
}

/**
@@ -208,6 +212,21 @@ class Tracker extends React.Component {
});
}

/**
* Implement handler for clicking on the trust or scrub SVGs for an unknown tracker
* Trigger actions which persist the new setting and notify user
* that the page should be reloaded.
*/
handleAntiTrackingWhitelist() {
const { tracker } = this.props;

this.props.actions.updateAntiTrackingWhitelist(tracker);
this.props.actions.showNotification({
updated: `${tracker.name}-whitelisting-status-changed`,
reload: true,
});
}

_renderCliqzStatsContainer() {
const { tracker } = this.props;
const { cliqzAdCount, cliqzCookieCount, cliqzFingerprintCount } = tracker;
@@ -274,9 +293,9 @@ class Tracker extends React.Component {
* @return {ReactComponent} ReactComponent instance
*/
render() {
const { tracker } = this.props;
let sources;
const { tracker, isUnknown } = this.props;

let sources;
if (tracker.sources) {
sources = tracker.sources.map((source, index) => (
<a
@@ -291,85 +310,58 @@ class Tracker extends React.Component {
</a>
));
}

const trackerNameClasses = ClassNames('trk-name', {
unknown: isUnknown,
'is-whitelisted': tracker.whitelisted,
});

return (
<div className={`${this.state.trackerClasses} blocking-trk`}>
<div className="row align-middle trk-header">
<div className="columns shrink">
<div className={`warning-image right${this.state.warningImageTitle ? ' t-tooltip-up-right' : ''}`} data-g-tooltip={this.state.warningImageTitle} />
</div>
<div className="columns collapse-left">
<div className="trk-name" onClick={this.toggleDescription}>{ tracker.name }</div>
{this._renderCliqzStatsContainer()}
<div
className={trackerNameClasses}
onClick={this.toggleDescription}
>
{tracker.name}
</div>
{!tracker.whitelisted && this._renderCliqzStatsContainer()}
</div>
<div className="columns shrink align-self-justify collapse-right">
<div className="svg-container">
<span className="t-tooltip-up-left" data-g-tooltip={this.props.tracker.ss_allowed ? t('summary_undo') : t('panel_tracker_trust_tooltip')}>
<svg className="blocking-icons trust" onClick={this.clickTrackerTrust} width="20px" height="20px" viewBox="0 0 20 20">
<g transform="translate(1 1)" fill="none" fillRule="evenodd">
<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
<path className="background" d="M.5.5h16.3v16.217H.5z" />
<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
</svg>
</g>
</svg>
</span>
<span className="t-tooltip-up-left" data-g-tooltip={this.props.tracker.ss_blocked ? t('summary_undo') : t('panel_tracker_restrict_tooltip')}>
<svg className="blocking-icons restrict" onClick={this.clickTrackerRestrict} width="20px" height="20px" viewBox="0 0 20 20">
<g transform="translate(1 1)" fill="none" fillRule="evenodd">
<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
<path className="background" d="M.5.5h16.3v16.217H.5z" />
<svg width="20px" height="20px" viewBox="-2 -2 20 20">
<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
<path d="M1.958 1.958l7.834 7.834" />
<circle cx="5.753" cy="5.753" r="5.753" />
</g>
</svg>
</g>
</svg>
</span>
<span className={(!this.props.tracker.ss_blocked && !this.props.tracker.ss_allowed) ? 't-tooltip-up-left' : ''} data-g-tooltip={t('panel_tracker_block_tooltip')}>
<svg className="blocking-icons status" onClick={() => { if (this.props.tracker.ss_allowed || this.props.tracker.ss_blocked) { return; } this.clickTrackerStatus(); }} width="20px" height="20px" viewBox="0 0 20 20">
<g transform="translate(1 1)" fill="none" fillRule="evenodd">
<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
<path className="background" d="M.5.5h16.3v16.217H.5z" />
<svg width="20px" height="20px" viewBox="-2.5 -2.5 20 20">
<path className="check" d="M8.062 6l3.51-3.51c.57-.57.57-1.493 0-2.063-.57-.57-1.495-.57-2.063 0L6 3.937 2.49.428c-.57-.57-1.493-.57-2.063 0-.57.57-.57 1.494 0 2.064L3.937 6 .426 9.51c-.57.57-.57 1.493 0 2.063.57.57 1.494.57 2.063 0L6 8.063l3.51 3.508c.57.57 1.493.57 2.063 0 .57-.57.57-1.493 0-2.062L8.063 6z" fillRule="nonzero" />
</svg>
<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
</svg>
<svg width="20px" height="20px" viewBox="-2 -2 20 20">
<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
<path d="M1.958 1.958l7.834 7.834" />
<circle cx="5.753" cy="5.753" r="5.753" />
</g>
</svg>
</g>
</svg>
</span>
</div>
{!isUnknown ? renderKnownTrackerButtons(
this.props.tracker.ss_allowed,
this.props.tracker.ss_blocked,
this.clickTrackerTrust,
this.clickTrackerRestrict,
this.clickTrackerStatus,
) : renderUnknownTrackerButtons(
this.handleAntiTrackingWhitelist,
tracker.whitelisted,
)}
</div>
</div>
{
this.state.showMoreInfo && (
<div className={`${!this.state.showMoreInfo ? 'hide' : ''} row trk-moreinfo`}>
<div className="columns">
<div className="trk-description">
{ this.state.description }
<div className={(!this.state.showTrackerLearnMore ? 'hide' : '')}>
<a target="_blank" rel="noopener noreferrer" title={tracker.name} href={`https://${globals.APPS_SUB_DOMAIN}.ghostery.com/${this.props.language}/apps/${encodeURIComponent(tracker.name.replace(/\s+/g, '_').toLowerCase())}`}>
{ t('tracker_description_learn_more') }
</a>
</div>
</div>
<div className={`${!this.props.show_tracker_urls ? 'hide' : ''}`}>
<div className="trk-srcs-title">{ t('panel_tracker_found_sources_title') }</div>
<div className="trk-srcs">{ sources }</div>
{this.state.showMoreInfo && (
<div className={`${!this.state.showMoreInfo ? 'hide' : ''} row trk-moreinfo`}>
<div className="columns">
<div className="trk-description">
{ this.state.description }
<div className={(!this.state.showTrackerLearnMore ? 'hide' : '')}>
<a target="_blank" rel="noopener noreferrer" title={tracker.name} href={`https://${globals.APPS_SUB_DOMAIN}.ghostery.com/${this.props.language}/apps/${encodeURIComponent(tracker.name.replace(/\s+/g, '_').toLowerCase())}`}>
{ t('tracker_description_learn_more') }
</a>
</div>
</div>
<div className={`${!this.props.show_tracker_urls ? 'hide' : ''}`}>
<div className="trk-srcs-title">{ t('panel_tracker_found_sources_title') }</div>
<div className="trk-srcs">{ sources }</div>
</div>
</div>
)}
</div>
)}
</div>
);
}
18 app/panel/components/Blocking/Trackers.jsx
View file
Open in desktop
@@ -14,7 +14,7 @@
import React from 'react';
import Tracker from './Tracker';
import GlobalTracker from './GlobalTracker';
import OtherDataPoint from './OtherDataPoint';

/**
* @class Implement Trackers component which represents a container for trackers
* in both Blocking view and Global Blocking subview of Settings.
@@ -61,22 +61,6 @@ class Trackers extends React.Component {
language={this.props.language}
/>
));
} else if (isUnknown) {
trackerList = trackers.map(tracker => (
<OtherDataPoint
tracker={tracker}
key={tracker.id}
cat_id={this.props.cat_id}
actions={this.props.actions}
show_tracker_urls={this.props.show_tracker_urls}
sitePolicy={this.props.sitePolicy}
paused_blocking={this.props.paused_blocking}
language={this.props.language}
smartBlockActive={this.props.smartBlockActive}
smartBlock={this.props.smartBlock}
isUnknown={isUnknown}
/>
));
} else {
trackerList = trackers.map(tracker => (
<Tracker
90 app/panel/components/Blocking/trackerButtonRenderHelpers.jsx
View file
Open in desktop
@@ -0,0 +1,90 @@
import React from 'react';
import ClassNames from 'classnames';

export const renderKnownTrackerButtons = (
ss_allowed, ss_blocked, clickTrackerTrust, clickTrackerRestrict, clickTrackerStatus
) => (
<div className="svg-container">
<span className="t-tooltip-up-left" data-g-tooltip={ss_allowed ? t('summary_undo') : t('panel_tracker_trust_tooltip')}>
<svg className="blocking-icons trust" onClick={clickTrackerTrust} width="20px" height="20px" viewBox="0 0 20 20">
<g transform="translate(1 1)" fill="none" fillRule="evenodd">
<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
<path className="background" d="M.5.5h16.3v16.217H.5z" />
<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
</svg>
</g>
</svg>
</span>
<span className="t-tooltip-up-left" data-g-tooltip={ss_blocked ? t('summary_undo') : t('panel_tracker_restrict_tooltip')}>
<svg className="blocking-icons restrict" onClick={clickTrackerRestrict} width="20px" height="20px" viewBox="0 0 20 20">
<g transform="translate(1 1)" fill="none" fillRule="evenodd">
<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
<path className="background" d="M.5.5h16.3v16.217H.5z" />
<svg width="20px" height="20px" viewBox="-2 -2 20 20">
<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
<path d="M1.958 1.958l7.834 7.834" />
<circle cx="5.753" cy="5.753" r="5.753" />
</g>
</svg>
</g>
</svg>
</span>
<span className={(!ss_blocked && !ss_allowed) ? 't-tooltip-up-left' : ''} data-g-tooltip={t('panel_tracker_block_tooltip')}>
<svg className="blocking-icons status" onClick={() => { if (ss_allowed || ss_blocked) { return; } clickTrackerStatus(); }} width="20px" height="20px" viewBox="0 0 20 20">
<g transform="translate(1 1)" fill="none" fillRule="evenodd">
<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
<path className="background" d="M.5.5h16.3v16.217H.5z" />
<svg width="20px" height="20px" viewBox="-2.5 -2.5 20 20">
<path className="check" d="M8.062 6l3.51-3.51c.57-.57.57-1.493 0-2.063-.57-.57-1.495-.57-2.063 0L6 3.937 2.49.428c-.57-.57-1.493-.57-2.063 0-.57.57-.57 1.494 0 2.064L3.937 6 .426 9.51c-.57.57-.57 1.493 0 2.063.57.57 1.494.57 2.063 0L6 8.063l3.51 3.508c.57.57 1.493.57 2.063 0 .57-.57.57-1.493 0-2.062L8.063 6z" fillRule="nonzero" />
</svg>
<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
</svg>
<svg width="20px" height="20px" viewBox="-2 -2 20 20">
<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
<path d="M1.958 1.958l7.834 7.834" />
<circle cx="5.753" cy="5.753" r="5.753" />
</g>
</svg>
</g>
</svg>
</span>
</div>
);

export const renderUnknownTrackerButtons = (handleAntiTrackingWhitelist, whitelisted) => {
const svgContainerClasses = ClassNames('unknown-svg-container', { whitelisted });

return (
<div className={svgContainerClasses}>
{/* USE INLINE SVG FOR TRUST CIRCLE TO CHANGE COLORS WITH CSS */}
<span className="t-tooltip-up-left" data-g-tooltip="Trust on this site">
<svg className="anti-track-trust" onClick={handleAntiTrackingWhitelist} width="20px" height="20px" viewBox="0 0 20 20">
<g transform="translate(1 1)" fill="none" fillRule="evenodd">
<path className="border" stroke="#96c761" d="M-.5-.5h18.3v18.217H-.5z" />
<path className="background" stroke="#FFF" fill="#96c761" d="M.5.5h16.3v16.217H.5z" />
<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
<circle className="trust-circle" stroke="#FFF" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
</svg>
</g>
</svg>
</span>

{/* USE INLINE SVG FOR ANTI-TRACKING SHIELD TO CHANGE COLORS WITH CSS */}
<span className="t-tooltip-up-left" data-g-tooltip="Scrub on this site">
<svg className="anti-track-scrub" onClick={handleAntiTrackingWhitelist} width="20px" height="20px" viewBox="0 0 20 20">
<g transform="translate(1 1)" fill="none" fillRule="evenodd">
<path className="border" stroke="#00AEF0" d="M-.5-.5h18.3v18.217H-.5z" />
<path className="background" stroke="#FFF" fill="#00AEF0" d="M.5.5h16.3v16.217H.5z" />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 19.5 19.5">
<g transform="translate(2.5 2.5)">
<path className="shield" fill="none" fillRule="evenodd" stroke="#FFF" strokeWidth="1.4" d="M8.149 1.022a.505.505 0 0 0-.298 0l-6.404 1.7A.574.574 0 0 0 1 3.286c.03 4.56 2.472 8.792 6.672 11.624.09.06.209.089.328.089.12 0 .238-.03.328-.09 4.2-2.83 6.642-7.063 6.672-11.623a.574.574 0 0 0-.447-.566L8.15 1.022z" />
</g>
</svg>
</g>
</svg>
</span>
</div>
);
};
6 app/panel/reducers/blocking.js
View file
Open in desktop
@@ -226,6 +226,12 @@ const _updateAntiTrackingWhitelist = (state, action) => {
addToWhitelist();
}

updatedAntiTracking.unknownTrackers.forEach((tracker) => {
if (tracker.name === unknownTracker.name) {
tracker.whitelisted = !tracker.whitelisted;
}
});

sendMessage('setPanelData', { anti_tracking_whitelist: whitelistedUrls });

return updatedAntiTracking;
7 app/scss/partials/_blocking.scss
View file
Open in desktop
@@ -170,10 +170,6 @@
color: #9b9b9b;
font-style: italic;
text-decoration: line-through;
&.data-point {
padding-left: 50px;
color: #1DAFED;
}
}
.trk-src-link {
font-style: italic;
@@ -250,9 +246,6 @@
color: #9b9b9b;
font-style: italic;
text-decoration: line-through;
&.data-point {
padding-left: 50px;
}
}
.trk-src-link {
font-style: italic;
4 app/scss/partials/_blocking_category.scss
View file
Open in desktop
@@ -126,6 +126,10 @@
max-width: 125px;
overflow-y: hidden;
@extend %nowrap;

&.ghosty-blue {
color: #00AEF0;
}
}
}
.checkbox-container {
ProTip! Use n and p to navigate between commits in a pull request.