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 rebuilding feature in original branch with cleaner code

  • Loading branch information
@Eden12345
Eden12345 committed Jun 10, 2019
commit c2002a5a5560afdbc43424d74f5cc531f8a6b21a
16 app/panel/actions/BlockingActions.js
View file
Open in desktop
@@ -18,7 +18,8 @@ import {
UPDATE_CATEGORY_BLOCKED,
UPDATE_TRACKER_BLOCKED,
UPDATE_TRACKER_TRUST_RESTRICT,
TOGGLE_EXPAND_ALL
TOGGLE_EXPAND_ALL,
UPDATE_ANTI_TRACKING_NUM_SHOWN
} from '../constants/constants';

/**
@@ -56,6 +57,19 @@ export function updateCategories(data) {
};
}

/**
* Called from Blocking setShow functions
* Hits the Summary reducer, as that is where the AntiTracking data is stored
* @param {Object} data
* @return {Object}
*/
export function updateAntiTrackingNumShown(data) {
return {
type: UPDATE_ANTI_TRACKING_NUM_SHOWN,
data,
};
}

/**
* Called from Category.clickCategoryStatus()
* @param {Object} data
5 app/panel/components/Blocking.jsx
View file
Open in desktop
@@ -93,6 +93,7 @@ class Blocking extends React.Component {
*/
setShow(filterName) {
const updated_categories = JSON.parse(JSON.stringify(this.props.categories)); // deep clone
const updatedAntiTracking = JSON.parse(JSON.stringify(this.props.antiTracking)); // deep clone

updated_categories.forEach((category) => {
let count = 0;
@@ -111,7 +112,11 @@ class Blocking extends React.Component {
category.num_shown = (show) ? count : 0;
});

updatedAntiTracking.num_shown = filterName === 'all' || filterName === 'other_data_points'
? updatedAntiTracking.totalUnsafeCount : 0;

this.props.actions.updateCategories(updated_categories);
this.props.actions.updateAntiTrackingNumShown(updatedAntiTracking);
}

/**
51 app/panel/components/Blocking/Categories.jsx
View file
Open in desktop
@@ -30,9 +30,9 @@ class Categories extends React.Component {
*/
render() {
const { categories, expandAll, antiTracking } = this.props;
console.log(categories, antiTracking)
const globalBlocking = !!this.props.globalBlocking;
const filtered = !!this.props.filtered;

const categoryList = categories.map((cat, index) => (
<Category
expandAll={expandAll}
@@ -51,10 +51,57 @@ class Categories extends React.Component {
smartBlock={this.props.smartBlock}
/>
));

const otherDataPointsCategory = (antiTracking && antiTracking.totalUnsafeCount) ? (
<Category
expandAll={expandAll}
globalBlocking={globalBlocking}
index={categoryList.length}
category={(() => {
const unknownURLs = Object.keys(antiTracking.unknown);
const unsafeURLs = unknownURLs.filter(url => antiTracking.unknown[url] === 'unsafe');
return {
id: 'other_data_points',
name: 'Other Data Points',
description: 'Anonymized data points by Anti-Tracking',
img_name: 'other_data_points',
num_total: antiTracking.totalUnsafeCount,
num_blocked: 0,
num_shown: antiTracking.num_shown,
trackers: unsafeURLs.map((url, idx) => ({
blocked: false,
catId: 'other_data_points',
description: '',
id: 100000000 + idx,

This comment has been minimized.

Sign in to view
@Eden12345

Eden12345 Jul 23, 2019
Author Contributor

Remove this line along with any other props that are unnecessary for the <Tracker /> component for Unknown trackers

This comment has been minimized.

Sign in to view
@Eden12345

Eden12345 Jul 23, 2019
Author Contributor

Edit: We still need a unique ID for this because it's used later as a React key prop when rendering all the trackers from the <Trackers /> component. I'll use the unknownTracker.name and concatenate it with the first domain listed in the unknownTracker.domains array (if the array is empty, it will just concatenate "undefined" onto the string).
name: url,
shouldShow: true,
sources: false,
ss_allowed: false,
ss_blocked: true,
warningCompatibility: false,
warningInsecure: false,
warningSlow: false,
warningSmartBlock: false,
})),
};
})()}
actions={this.props.actions}
key="other_data_points"
filtered={filtered}
showToast={this.props.showToast}
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}
/>
) : null;

return (
<div className="scroll-content">
{categoryList}
{antiTracking && <div />}
{otherDataPointsCategory}
</div>
);
}
69 app/panel/components/Blocking/Category.jsx
View file
Open in desktop
@@ -163,7 +163,6 @@ class Category extends React.Component {
const globalBlocking = !!this.props.globalBlocking;
const filteredText = { color: 'red' };
const checkBoxStyle = `${(this.state.totalShownBlocked && this.state.allShownBlocked) ? 'all-blocked ' : (this.state.totalShownBlocked ? 'some-blocked ' : '')} checkbox-container`;

let trackersBlockedCount;
if (paused_blocking || sitePolicy === 2) {
trackersBlockedCount = 0;
@@ -197,45 +196,58 @@ class Category extends React.Component {
}
<span className="count">{`${category.num_total} `}</span>
<span className="text">
{ (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') }
{ category.id === 'other_data_points' ? ' DATA POINTS' : (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') }
</span>
</div>
{
!!trackersBlockedCount &&
(!!trackersBlockedCount || category.id === 'other_data_points') &&
<div className="blocked-count">
<span className="count">{`${trackersBlockedCount} `}</span>
<span className="text">{ t('blocking_category_blocked') }</span>
<span className="count">
{category.id === 'other_data_points' ? category.num_total : `${trackersBlockedCount} `}
</span>
<span className="text">
{category.id === 'other_data_points' ? ' ANONYMIZED' : t('blocking_category_blocked') }
</span>
</div>
}
</div>
</div>
<div className="columns collapse-left collapse-right shrink align-self-justify">
<div className={this.state.isExpanded ? 'caret-up' : 'caret-down'} onClick={this.toggleCategoryTrackers} />
<div className={checkBoxStyle} onClick={this.clickCategoryStatus}>
<span className={this.props.index ? 't-tooltip-up-left' : 't-tooltip-down-left'} data-g-tooltip={t('panel_tracker_block_tooltip')} onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip} >
<svg className="blocking-icons status t-tooltip-up-left" data-g-tooltip={t('panel_tracker_block_tooltip')} onClick={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="1.5 1 20 20">
<path className="dash" d="M5,10.5 15,10.5" />
</svg>
<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>
{category.id !== 'other_data_points' && (
<div className={checkBoxStyle} onClick={this.clickCategoryStatus}>
<span className={this.props.index ? 't-tooltip-up-left' : 't-tooltip-down-left'} data-g-tooltip={t('panel_tracker_block_tooltip')} onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip} >
<svg className="blocking-icons status t-tooltip-up-left" data-g-tooltip={t('panel_tracker_block_tooltip')} onClick={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="1.5 1 20 20">
<path className="dash" d="M5,10.5 15,10.5" />
</svg>
<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>
)}
{category.id === 'other_data_points' && (
<span className={this.props.index ? 't-tooltip-up-left' : 't-tooltip-down-left'} data-g-tooltip="Data points anonymized by Anti-Tracking" onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip} >
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
<path d="M10.190881 1.028859c-.114948-.038479-.267884-.038479-.382831 0L1.574491 3.211632C1.229895 3.2881 1 3.594463 1 3.93906c.038479 5.85937 3.178574 11.297185 8.578155 14.935303.114948.076469.268129.114948.42131.114948.153182 0 .306363-.038479.42131-.114948 5.399581-3.638118 8.539676-9.075933 8.578155-14.935303 0-.344597-.229894-.65096-.574491-.727428l-8.233558-2.182773z" stroke="#1DAFED" strokeWidth="2" fill="none" fillRule="evenodd" />
</svg>
</span>
</div>
)}
</div>
</div>
</div>
@@ -253,6 +265,7 @@ class Category extends React.Component {
language={this.props.language}
smartBlockActive={this.props.smartBlockActive}
smartBlock={this.props.smartBlock}
isDataPoint={category.id === 'other_data_points'}
/>
}
</div>
102 app/panel/components/Blocking/Tracker.jsx
View file
Open in desktop
@@ -205,7 +205,7 @@ class Tracker extends React.Component {
* @return {ReactComponent} ReactComponent instance
*/
render() {
const { tracker } = this.props;
const { tracker, isDataPoint } = this.props;
let sources;

if (tracker.sources) {
@@ -229,57 +229,59 @@ class Tracker extends React.Component {
<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>
<div className={`${isDataPoint ? 'data-point' : ''} trk-name`} onClick={this.toggleDescription}>{ tracker.name }</div>
</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>
{!isDataPoint && (
<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>
</div>
</div>
)}
</div>
{
this.state.showMoreInfo &&
3 app/panel/components/Blocking/Trackers.jsx
View file
Open in desktop
@@ -38,7 +38,7 @@ class Trackers extends React.Component {
* @return {ReactComponent} ReactComponent instance
*/
render() {
const { trackers } = this.props;
const { trackers, isDataPoint } = this.props;
let trackerList;
if (this.props.globalBlocking) {
const trackersToShow = [];
@@ -72,6 +72,7 @@ class Trackers extends React.Component {
language={this.props.language}
smartBlockActive={this.props.smartBlockActive}
smartBlock={this.props.smartBlock}
isDataPoint={isDataPoint}
/>
));
}
1 app/panel/constants/constants.js
View file
Open in desktop
@@ -39,6 +39,7 @@ export const SEND_SIGNAL = 'SEND_SIGNAL';
// blocking
export const UPDATE_BLOCKING_DATA = 'UPDATE_BLOCKING_DATA';
export const UPDATE_CATEGORIES = 'UPDATE_CATEGORIES';
export const UPDATE_ANTI_TRACKING_NUM_SHOWN = 'UPDATE_ANTI_TRACKING_NUM_SHOWN';
export const UPDATE_CATEGORY_BLOCKED = 'UPDATE_CATEGORY_BLOCKED';
export const UPDATE_TRACKER_BLOCKED = 'UPDATE_TRACKER_BLOCKED';
export const UPDATE_TRACKER_TRUST_RESTRICT = 'UPDATE_TRACKER_TRUST_RESTRICT';
9 app/panel/reducers/summary.js
View file
Open in desktop
@@ -18,7 +18,8 @@ import {
UPDATE_CLIQZ_MODULE_DATA,
UPDATE_GHOSTERY_PAUSED,
UPDATE_SITE_POLICY,
UPDATE_TRACKER_COUNTS
UPDATE_TRACKER_COUNTS,
UPDATE_ANTI_TRACKING_NUM_SHOWN
} from '../constants/constants';
import { addToArray, removeFromArray } from '../utils/utils';
import { sendMessage } from '../utils/msg';
@@ -72,6 +73,12 @@ export default (state = initialState, action) => {
},
});
}
case UPDATE_ANTI_TRACKING_NUM_SHOWN: {
console.log('here1', action.data)
return Object.assign({}, state, {
antiTracking: action.data
});
}
default: return state;
}
};
ProTip! Use n and p to navigate between commits in a pull request.