From d17e342c3395ddfb04bef813eb495025b0eab59c Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Tue, 4 Jun 2019 17:24:32 -0400 Subject: [PATCH 01/17] Add anonymized data points to donut graph --- .../components/BuildingBlocks/DonutGraph.jsx | 35 +++++++++++++--- app/panel/components/Summary.jsx | 41 ++++++++++--------- 2 files changed, 52 insertions(+), 24 deletions(-) diff --git a/app/panel/components/BuildingBlocks/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx index a4af6d4e0..ca4a0633f 100644 --- a/app/panel/components/BuildingBlocks/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx @@ -56,6 +56,8 @@ class DonutGraph extends React.Component { return '#87d7ef'; case 'social_media': return '#388ee8'; + case 'other_data_points': + return '#8459a5'; default: return '#e8e8e8'; } @@ -74,6 +76,7 @@ class DonutGraph extends React.Component { componentDidMount() { const { categories, + antiTracking, renderRedscale, renderGreyscale, isSmall, @@ -87,7 +90,7 @@ class DonutGraph extends React.Component { .value(d => d.value); this.prepareDonutContainer(isSmall); - this.bakeDonut(categories, { + this.bakeDonut(categories, antiTracking, { renderRedscale, renderGreyscale }); @@ -99,6 +102,7 @@ class DonutGraph extends React.Component { componentWillReceiveProps(nextProps) { const { categories, + antiTracking, renderRedscale, renderGreyscale, ghosteryFeatureSelect, @@ -115,12 +119,20 @@ class DonutGraph extends React.Component { return; } - // componentWillReceiveProps gets called many times during page load as new trackers are found + // componentWillReceiveProps gets called many times during page load as new trackers or unsafe data points are found // so only compare tracker totals if we don't already have to redraw anyway as a result of the cheaper checks above const trackerTotal = categories.reduce((total, category) => total + category.num_total, 0); const nextTrackerTotal = nextProps.categories.reduce((total, category) => total + category.num_total, 0); if (trackerTotal !== nextTrackerTotal) { this.nextPropsDonut(nextProps); + return; + } + + if (!antiTracking && !nextProps.antiTracking) { return; } + const unsafeDataPoints = antiTracking ? antiTracking.totalUnsafeCount : 0; + const nextUnsafeDataPoints = nextProps.antiTracking ? nextProps.antiTracking.totalUnsafeCount : 0; + if (unsafeDataPoints !== nextUnsafeDataPoints) { + this.nextPropsDonut(nextProps); } } @@ -142,7 +154,7 @@ class DonutGraph extends React.Component { * Helper function that updates donut with nextProps values */ nextPropsDonut(nextProps) { - this.bakeDonut(nextProps.categories, { + this.bakeDonut(nextProps.categories, nextProps.antiTracking, { renderRedscale: nextProps.renderRedscale, renderGreyscale: nextProps.renderGreyscale, isSmall: nextProps.isSmall, @@ -180,7 +192,7 @@ class DonutGraph extends React.Component { */ bakeDonut = throttle(this._bakeDonut.bind(this), 600, { leading: true, trailing: true }) // matches panelData#updatePanelUI throttling - _bakeDonut(categories, options) { + _bakeDonut(categories, antiTracking, options) { const { renderRedscale, renderGreyscale, @@ -208,6 +220,14 @@ class DonutGraph extends React.Component { graphData.sort((a, b) => a.value < b.value); } + if (antiTracking && antiTracking.totalUnsafeCount) { + graphData.push({ + id: 'other_data_points', + name: 'Data Points Anonymized', + value: antiTracking.totalUnsafeCount, + }); + } + const trackerArc = arc() .innerRadius(this.donutRadius - 13) .outerRadius(this.donutRadius); @@ -313,7 +333,7 @@ class DonutGraph extends React.Component { * @return {JSX} JSX for rendering the donut-graph portion of the Summary View */ render() { - const { isSmall, totalCount } = this.props; + const { isSmall, totalCount, antiTracking } = this.props; const componentClasses = ClassNames('sub-component', 'donut-graph', { small: isSmall, big: !isSmall, @@ -327,6 +347,11 @@ class DonutGraph extends React.Component { {cat.name} ))} + {antiTracking && !!antiTracking.totalUnsafeCount && ( + + Other Data Points + + )}
{ this.node = node; }} />
diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 443a03cc5..13ceb31c4 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -293,10 +293,12 @@ class Summary extends React.Component { enable_anti_tracking, enable_ad_block, enable_smart_block, + categories, antiTracking, adBlock, smartBlock, paused_blocking, + paused_blocking_timeout, sitePolicy, trackerCounts, } = this.props; @@ -351,8 +353,8 @@ class Summary extends React.Component { {abPause && (
)} {!this.state.disableBlocking && showCondensed && (
- {this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} + {trackerCounts.allowed + trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0} {!abPause && ( From 3ec01dc5da0264260d5130cb1b3c4937755eb81c Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Wed, 5 Jun 2019 18:25:46 -0400 Subject: [PATCH 02/17] Half of original implementation complete --- app/panel/components/Blocking.jsx | 2 ++ app/panel/components/Blocking/Categories.jsx | 10 ++++++++-- app/panel/components/BuildingBlocks/DonutGraph.jsx | 9 +++++++-- app/panel/containers/BlockingContainer.js | 1 + 4 files changed, 18 insertions(+), 4 deletions(-) diff --git a/app/panel/components/Blocking.jsx b/app/panel/components/Blocking.jsx index be118bd50..0cc78dc58 100644 --- a/app/panel/components/Blocking.jsx +++ b/app/panel/components/Blocking.jsx @@ -281,6 +281,7 @@ class Blocking extends React.Component { const { actions, categories, + antiTracking, expand_all_trackers, is_expanded, language, @@ -324,6 +325,7 @@ class Blocking extends React.Component { language={language} smartBlockActive={smartBlockActive} smartBlock={smartBlock} + antiTracking={antiTracking} /> }
diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index 193f233fd..b3e78049f 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -29,7 +29,8 @@ class Categories extends React.Component { * @return {ReactComponent} ReactComponent instance */ render() { - const { categories, expandAll } = this.props; + 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) => ( @@ -50,7 +51,12 @@ class Categories extends React.Component { smartBlock={this.props.smartBlock} /> )); - return
{ categoryList }
; + return ( +
+ {categoryList} + {antiTracking &&
} +
+ ); } } diff --git a/app/panel/components/BuildingBlocks/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx index ca4a0633f..a994de75d 100644 --- a/app/panel/components/BuildingBlocks/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx @@ -333,7 +333,12 @@ class DonutGraph extends React.Component { * @return {JSX} JSX for rendering the donut-graph portion of the Summary View */ render() { - const { isSmall, totalCount, antiTracking } = this.props; + const { + isSmall, + categories, + antiTracking, + totalCount, + } = this.props; const componentClasses = ClassNames('sub-component', 'donut-graph', { small: isSmall, big: !isSmall, @@ -342,7 +347,7 @@ class DonutGraph extends React.Component { return (
- {this.props.categories.map(cat => ( + {categories.map(cat => ( {cat.name} diff --git a/app/panel/containers/BlockingContainer.js b/app/panel/containers/BlockingContainer.js index 105d7399e..8235aa6a5 100644 --- a/app/panel/containers/BlockingContainer.js +++ b/app/panel/containers/BlockingContainer.js @@ -34,6 +34,7 @@ const mapStateToProps = state => Object.assign({}, state.blocking, { sitePolicy: state.summary.sitePolicy, smartBlockActive: state.panel.enable_smart_block, smartBlock: state.panel.smartBlock, + antiTracking: state.summary.antiTracking, }); /** * Bind Blocking view component action creators using Redux's bindActionCreators From 1f80f918eca4fa3ec847b4475e2e71468efc4ba8 Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Mon, 10 Jun 2019 15:51:28 -0400 Subject: [PATCH 03/17] Copy icons to original branch --- app/images/panel/anti_track_shield.svg | 3 +++ app/images/panel/other_data_points.svg | 7 +++++++ 2 files changed, 10 insertions(+) create mode 100644 app/images/panel/anti_track_shield.svg create mode 100644 app/images/panel/other_data_points.svg diff --git a/app/images/panel/anti_track_shield.svg b/app/images/panel/anti_track_shield.svg new file mode 100644 index 000000000..88db7a71d --- /dev/null +++ b/app/images/panel/anti_track_shield.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/panel/other_data_points.svg b/app/images/panel/other_data_points.svg new file mode 100644 index 000000000..ce291e0c5 --- /dev/null +++ b/app/images/panel/other_data_points.svg @@ -0,0 +1,7 @@ + + + + + + + From c2002a5a5560afdbc43424d74f5cc531f8a6b21a Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Mon, 10 Jun 2019 16:44:40 -0400 Subject: [PATCH 04/17] Finish rebuilding feature in original branch with cleaner code --- app/panel/actions/BlockingActions.js | 16 ++- app/panel/components/Blocking.jsx | 5 + app/panel/components/Blocking/Categories.jsx | 51 +++++++++- app/panel/components/Blocking/Category.jsx | 69 ++++++++----- app/panel/components/Blocking/Tracker.jsx | 102 ++++++++++--------- app/panel/components/Blocking/Trackers.jsx | 3 +- app/panel/constants/constants.js | 1 + app/panel/reducers/summary.js | 9 +- app/scss/partials/_blocking.scss | 9 ++ app/scss/partials/_blocking_tracker.scss | 4 + 10 files changed, 186 insertions(+), 83 deletions(-) diff --git a/app/panel/actions/BlockingActions.js b/app/panel/actions/BlockingActions.js index b656eed6f..01dcd7952 100644 --- a/app/panel/actions/BlockingActions.js +++ b/app/panel/actions/BlockingActions.js @@ -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 diff --git a/app/panel/components/Blocking.jsx b/app/panel/components/Blocking.jsx index 0cc78dc58..fe1b2380f 100644 --- a/app/panel/components/Blocking.jsx +++ b/app/panel/components/Blocking.jsx @@ -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); } /** diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index b3e78049f..f1153d671 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -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) => ( )); + + const otherDataPointsCategory = (antiTracking && antiTracking.totalUnsafeCount) ? ( + { + 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, + 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 (
{categoryList} - {antiTracking &&
} + {otherDataPointsCategory}
); } diff --git a/app/panel/components/Blocking/Category.jsx b/app/panel/components/Blocking/Category.jsx index 69ecfc9f7..fe840b5b4 100644 --- a/app/panel/components/Blocking/Category.jsx +++ b/app/panel/components/Blocking/Category.jsx @@ -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 { } {`${category.num_total} `} - { (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') }
{ - !!trackersBlockedCount && + (!!trackersBlockedCount || category.id === 'other_data_points') &&
- {`${trackersBlockedCount} `} - { t('blocking_category_blocked') } + + {category.id === 'other_data_points' ? category.num_total : `${trackersBlockedCount} `} + + + {category.id === 'other_data_points' ? ' ANONYMIZED' : t('blocking_category_blocked') } +
}
-
- - - - - - - - - - - - - - - - - - - - - + {category.id !== 'other_data_points' && ( +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ )} + {category.id === 'other_data_points' && ( + + + -
+ )}
@@ -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'} /> }
diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index 84b839908..a6763b6a4 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -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 {
-
{ tracker.name }
+
{ tracker.name }
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - { if (this.props.tracker.ss_allowed || this.props.tracker.ss_blocked) { return; } this.clickTrackerStatus(); }} width="20px" height="20px" viewBox="0 0 20 20"> - - - - - - - - - - - - - - - - - - + {!isDataPoint && ( +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + { if (this.props.tracker.ss_allowed || this.props.tracker.ss_blocked) { return; } this.clickTrackerStatus(); }} width="20px" height="20px" viewBox="0 0 20 20"> + + + + + + + + + + + + + + + + + + +
-
+ )}
{ this.state.showMoreInfo && diff --git a/app/panel/components/Blocking/Trackers.jsx b/app/panel/components/Blocking/Trackers.jsx index 405953d3f..e6d7a5f20 100644 --- a/app/panel/components/Blocking/Trackers.jsx +++ b/app/panel/components/Blocking/Trackers.jsx @@ -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} /> )); } diff --git a/app/panel/constants/constants.js b/app/panel/constants/constants.js index b8ec460d9..92674bb2e 100644 --- a/app/panel/constants/constants.js +++ b/app/panel/constants/constants.js @@ -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'; diff --git a/app/panel/reducers/summary.js b/app/panel/reducers/summary.js index e94a644dc..eb97b2500 100644 --- a/app/panel/reducers/summary.js +++ b/app/panel/reducers/summary.js @@ -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; } }; diff --git a/app/scss/partials/_blocking.scss b/app/scss/partials/_blocking.scss index a9f995c28..e7abe51e7 100644 --- a/app/scss/partials/_blocking.scss +++ b/app/scss/partials/_blocking.scss @@ -131,6 +131,9 @@ color: #9b9b9b; font-style: italic; text-decoration: line-through; + &.data-point { + color: #1DAFED; + } } .trk-src-link { font-style: italic; @@ -170,6 +173,9 @@ color: #9b9b9b; font-style: italic; text-decoration: line-through; + &.data-point { + color: #1DAFED; + } } .trk-src-link { font-style: italic; @@ -246,6 +252,9 @@ color: #9b9b9b; font-style: italic; text-decoration: line-through; + &.data-point { + color: #1DAFED; + } } .trk-src-link { font-style: italic; diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index 3aef6b1a3..c2e0d27fe 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -29,6 +29,10 @@ font-weight: 400; color: #4a4a4a; @extend %nowrap; + &.data-point { + pointer-events: none; + cursor: default; + } } .svg-container { height: 20px; From 3dcfa154e722195b6066a6afcd0dbeb8bdcffce8 Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Wed, 12 Jun 2019 12:14:41 -0400 Subject: [PATCH 05/17] Rendering is working properly for the detailed view list, holding off on further commits until Design is finished reviewing the feature (a console.log has been added in each place where logic may be added to match upcoming feature implementation requirements) --- app/panel/components/Blocking/Categories.jsx | 4 +- app/panel/components/Blocking/Category.jsx | 13 +- .../components/Blocking/OtherDataPoint.jsx | 220 ++++++++++++++++++ app/panel/components/Blocking/Tracker.jsx | 102 ++++---- app/panel/components/Blocking/Trackers.jsx | 17 ++ app/panel/reducers/summary.js | 22 +- src/background.js | 5 + src/classes/ConfData.js | 1 + src/classes/PanelData.js | 2 + src/classes/Policy.js | 1 + src/utils/cliqzModulesData.js | 5 +- 11 files changed, 322 insertions(+), 70 deletions(-) create mode 100644 app/panel/components/Blocking/OtherDataPoint.jsx diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index f1153d671..4ce15dfec 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -69,7 +69,7 @@ class Categories extends React.Component { num_blocked: 0, num_shown: antiTracking.num_shown, trackers: unsafeURLs.map((url, idx) => ({ - blocked: false, + blocked: true, catId: 'other_data_points', description: '', id: 100000000 + idx, @@ -77,7 +77,7 @@ class Categories extends React.Component { shouldShow: true, sources: false, ss_allowed: false, - ss_blocked: true, + ss_blocked: false, warningCompatibility: false, warningInsecure: false, warningSlow: false, diff --git a/app/panel/components/Blocking/Category.jsx b/app/panel/components/Blocking/Category.jsx index fe840b5b4..df190e490 100644 --- a/app/panel/components/Blocking/Category.jsx +++ b/app/panel/components/Blocking/Category.jsx @@ -171,6 +171,7 @@ class Category extends React.Component { } else { trackersBlockedCount = category.num_blocked || 0; } + const isDataPoint = category.id === 'other_data_points'; return (
@@ -196,17 +197,17 @@ class Category extends React.Component { } {`${category.num_total} `} - { category.id === 'other_data_points' ? ' DATA POINTS' : (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') } + { isDataPoint ? ' DATA POINTS' : (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') }
{ - (!!trackersBlockedCount || category.id === 'other_data_points') && + (!!trackersBlockedCount || isDataPoint) &&
- {category.id === 'other_data_points' ? category.num_total : `${trackersBlockedCount} `} + {isDataPoint ? category.num_total : `${trackersBlockedCount} `} - {category.id === 'other_data_points' ? ' ANONYMIZED' : t('blocking_category_blocked') } + {isDataPoint ? ' ANONYMIZED' : t('blocking_category_blocked') }
} @@ -241,7 +242,7 @@ class Category extends React.Component {
)} - {category.id === 'other_data_points' && ( + {isDataPoint && ( @@ -265,7 +266,7 @@ class Category extends React.Component { language={this.props.language} smartBlockActive={this.props.smartBlockActive} smartBlock={this.props.smartBlock} - isDataPoint={category.id === 'other_data_points'} + isDataPoint={isDataPoint} /> } diff --git a/app/panel/components/Blocking/OtherDataPoint.jsx b/app/panel/components/Blocking/OtherDataPoint.jsx new file mode 100644 index 000000000..3c3bcaf08 --- /dev/null +++ b/app/panel/components/Blocking/OtherDataPoint.jsx @@ -0,0 +1,220 @@ +/** + * Tracker Component + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +/* eslint react/no-array-index-key: 0 */ + +import React from 'react'; +/** + * @class Implement Tracker component which represents single tracker + * in the Blocking view. + * @memberOf BlockingComponents + */ +class OtherDataPoint extends React.Component { + constructor(props) { + super(props); + this.state = { + trackerClasses: '', + warningImageTitle: '', + }; + + // click bindings + this.clickTrackerStatus = this.clickTrackerStatus.bind(this); + this.clickTrackerTrust = this.clickTrackerTrust.bind(this); + this.clickTrackerRestrict = this.clickTrackerRestrict.bind(this); + } + /** + * Lifecycle event. + */ + componentWillMount() { + this.updateTrackerClasses(this.props.tracker); + } + /** + * Lifecycle event. + */ + componentWillReceiveProps(nextProps) { + this.updateTrackerClasses(nextProps.tracker); + } + /** + * React hook used to optimise re-rendering of the list of trackers. + * @param {Object} nextProps changed props + * @param {Object} nextState changed state + * @return {boolean} true means proceed with rendering + */ + shouldComponentUpdate(nextProps) { + const { tracker } = nextProps; + if (!tracker || Object.keys(tracker).length === 0) { + return false; + } + return true; + } + /** + * Set dynamic classes on .blocking-trk and save it in state. + * @param {Object} tracker tracker object + */ + updateTrackerClasses(tracker) { + const classes = []; + let updated_title = ''; + + classes.push((!tracker.shouldShow) ? 'hide' : ''); + classes.push((tracker.blocked) ? 'blocked' : ''); + classes.push((tracker.ss_allowed) ? 'individual-trust' : ''); + classes.push((tracker.ss_blocked) ? 'individual-restrict' : ''); + classes.push((tracker.warningCompatibility || tracker.warningInsecure || tracker.warningSlow || tracker.warningSmartBlock) ? 'warning' : ''); + if (tracker.warningSmartBlock) { + classes.push(tracker.warningSmartBlock === 'blocked' ? 'smart-blocked' : 'smart-unblocked'); + } else { + classes.push((tracker.warningCompatibility) ? 'compatibility' : ''); + classes.push((tracker.warningInsecure) ? 'insecure' : ''); + classes.push((tracker.warningSlow) ? 'slow' : ''); + } + + // Create tooltips for tracker alerts + if (tracker.warningSmartBlock) { + updated_title = tracker.warningSmartBlock === 'blocked' ? t('panel_tracker_warning_smartblock_tooltip') : t('panel_tracker_warning_smartunblock_tooltip'); + } else if (tracker.warningCompatibility) { + updated_title = t('panel_tracker_warning_compatibility_tooltip'); + } else if (tracker.warningInsecure && tracker.warningSlow) { + updated_title = t('panel_tracker_warning_slow_nonsecure_tooltip'); + } else if (tracker.warningInsecure) { + updated_title = t('panel_tracker_warning_nonsecure_tooltip'); + } else if (tracker.warningSlow) { + updated_title = t('panel_tracker_warning_slow_tooltip'); + } + + this.setState({ + trackerClasses: classes.join(' '), + warningImageTitle: updated_title, + }); + } + /** + * Implement handler for clicking on the tracker global block/unblock checkbox. + * Trigger action which persists new tracker blocked state and spawns + * re-rendering of the checkbox. It also shows notification to inform + * user that the page should be reloaded. + */ + clickTrackerStatus() { + const blocked = !this.props.tracker.blocked; + + if (this.props.paused_blocking || this.props.sitePolicy) { + return; + } + + this.props.actions.updateTrackerBlocked({ + smartBlockActive: this.props.smartBlockActive, + smartBlock: this.props.smartBlock, + app_id: this.props.tracker.id, + cat_id: this.props.cat_id, + blocked, + }); + + this.props.actions.showNotification({ + updated: `${this.props.tracker.id}_blocked`, + reload: true, + }); + } + + /** + * Implement handler for clicking on the tracker site-specific trust icon. + * Trigger actions which persist the new setting and notify user + * that the page should be reloaded. + */ + clickTrackerTrust() { + const ss_allowed = !this.props.tracker.ss_allowed; + this.props.actions.updateTrackerTrustRestrict({ + app_id: this.props.tracker.id, + cat_id: this.props.cat_id, + trust: ss_allowed, + restrict: false, + }); + + this.props.actions.showNotification({ + updated: `${this.props.tracker.id}_ss_allowed`, + reload: true, + }); + } + + /** + * Implement handler for clicking on the tracker site-specific block icon. + * Trigger actions which persist the new setting and notify user + * that the page should be reloaded. + */ + clickTrackerRestrict() { + const ss_blocked = !this.props.tracker.ss_blocked; + this.props.actions.updateTrackerTrustRestrict({ + app_id: this.props.tracker.id, + cat_id: this.props.cat_id, + trust: false, + restrict: ss_blocked, + }); + + this.props.actions.showNotification({ + updated: `${this.props.tracker.id}_ss_blocked`, + reload: true, + }); + } + /** + * Render a tracker in Blocking view. + * @return {ReactComponent} ReactComponent instance + */ + render() { + const { tracker } = this.props; + + return ( +
+
+
+
+
+
+
{ tracker.name }
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ ); + } +} + +OtherDataPoint.defaultProps = { + tracker: {}, +}; + +export default OtherDataPoint; diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index a6763b6a4..84b839908 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -205,7 +205,7 @@ class Tracker extends React.Component { * @return {ReactComponent} ReactComponent instance */ render() { - const { tracker, isDataPoint } = this.props; + const { tracker } = this.props; let sources; if (tracker.sources) { @@ -229,59 +229,57 @@ class Tracker extends React.Component {
-
{ tracker.name }
+
{ tracker.name }
- {!isDataPoint && ( -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - { if (this.props.tracker.ss_allowed || this.props.tracker.ss_blocked) { return; } this.clickTrackerStatus(); }} width="20px" height="20px" viewBox="0 0 20 20"> - - - - - - - - - - - - - - - - - - -
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + { if (this.props.tracker.ss_allowed || this.props.tracker.ss_blocked) { return; } this.clickTrackerStatus(); }} width="20px" height="20px" viewBox="0 0 20 20"> + + + + + + + + + + + + + + + + + +
- )} +
{ this.state.showMoreInfo && diff --git a/app/panel/components/Blocking/Trackers.jsx b/app/panel/components/Blocking/Trackers.jsx index e6d7a5f20..1ffc8808a 100644 --- a/app/panel/components/Blocking/Trackers.jsx +++ b/app/panel/components/Blocking/Trackers.jsx @@ -14,6 +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. @@ -59,6 +60,22 @@ class Trackers extends React.Component { language={this.props.language} /> )); + } else if (isDataPoint) { + trackerList = trackers.map(tracker => ( + + )); } else { trackerList = trackers.map(tracker => ( { return Object.assign({}, state, action.data); } case UPDATE_CLIQZ_MODULE_DATA: { + console.log('RECEIVING ANTITRACKING DATA', action.data.antitracking); return Object.assign({}, state, { adBlock: action.data.adblock, antiTracking: action.data.antitracking }); } + case UPDATE_ANTI_TRACKING_WHITELIST: { + const updated = _updateSitePolicy(state, action); + return Object.assign({}, state, updated); + } + case UPDATE_ANTI_TRACKING_NUM_SHOWN: { + return Object.assign({}, state, { antiTracking: action.data }); + } case UPDATE_GHOSTERY_PAUSED: { return Object.assign({}, state, { paused_blocking: action.data.ghosteryPaused, paused_blocking_timeout: action.data.time }); } @@ -73,18 +82,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; } }; /** - * Update blacklist / whitelist + * Update site blacklist / whitelist * @memberOf PanelReactReducers * @private * @@ -140,6 +143,7 @@ const _updateSitePolicy = (state, action) => { } // persist to background - note that sitePolicy is not included + // console.log("HEY WOA -> we'll need to do this for anti-trakcing whitelisting, too") sendMessage('setPanelData', { site_whitelist: updated_whitelist, site_blacklist: updated_blacklist, diff --git a/src/background.js b/src/background.js index 431048a25..36b8d08cd 100644 --- a/src/background.js +++ b/src/background.js @@ -816,6 +816,7 @@ function onMessageHandler(request, sender, callback) { insights.action('clearData'); return false; } else if (name === 'setPanelData') { + console.log('SET PANEL DATA IS CALLED', message); panelData.set(message); callback(); return false; @@ -1246,6 +1247,10 @@ function initialiseWebRequestPipeline() { */ function isWhitelisted(state) { const url = state.tabUrl; + if (state.url && state.url.includes('yahoo.com') && state.tabUrl.includes('huffpost.com')) { + console.log('HUFF POST WORKING', state.url, state.tabUrl, state.originUrl); + return true; + } // state.ghosteryWhitelisted is sometimes undefined so force to bool return Boolean(globals.SESSION.paused_blocking || events.policy.getSitePolicy(url) === 2 || state.ghosteryWhitelisted); } diff --git a/src/classes/ConfData.js b/src/classes/ConfData.js index 54c86231d..ebce5ac25 100644 --- a/src/classes/ConfData.js +++ b/src/classes/ConfData.js @@ -150,6 +150,7 @@ class ConfData { _initProperty('site_specific_blocks', {}); _initProperty('site_specific_unblocks', {}); _initProperty('site_whitelist', []); + _initProperty('anti_tracking_whitelist', {}); _initProperty('surrogates', {}); _initProperty('version_history', []); _initProperty('account', null); diff --git a/src/classes/PanelData.js b/src/classes/PanelData.js index a60fdb605..63da6ab04 100644 --- a/src/classes/PanelData.js +++ b/src/classes/PanelData.js @@ -566,6 +566,7 @@ class PanelData { * @param {Object} data */ set(data) { + console.log('PANEL DATA IS BEING SET', data); let syncSetDataChanged = false; if (IS_CLIQZ) { @@ -578,6 +579,7 @@ class PanelData { // Set the conf from data // TODO can this now be replaced by Object.entries? for (const [key, value] of objectEntries(data)) { + console.log('CHECK VALS', key, value); if (conf.hasOwnProperty(key) && !_.isEqual(conf[key], value)) { conf[key] = value; syncSetDataChanged = SYNC_SET.has(key) ? true : syncSetDataChanged; diff --git a/src/classes/Policy.js b/src/classes/Policy.js index 0989243bc..133d9b82f 100644 --- a/src/classes/Policy.js +++ b/src/classes/Policy.js @@ -65,6 +65,7 @@ class Policy { url = processUrl(url).host; url = url.replace(/^www\./, ''); const sites = conf.site_whitelist || []; + console.log('WHITELIST CHECK (we will want to make a new function similar to this just for anti-tracking)', sites); const num_sites = sites.length; // TODO: speed up diff --git a/src/utils/cliqzModulesData.js b/src/utils/cliqzModulesData.js index 57cc2512f..fd0ea683b 100644 --- a/src/utils/cliqzModulesData.js +++ b/src/utils/cliqzModulesData.js @@ -37,10 +37,13 @@ export function getCliqzAntitrackingData(tabId) { } } antitrackingData.totalUnsafeCount = totalUnsafeCount; + console.log('PASSING ANTITRACKING DATA', conf.anti_tracking_whitelist); + antitrackingData.whitelistedUrls = conf.anti_tracking_whitelist; resolve(antitrackingData); }).catch(() => { resolve({ - totalUnsafeCount: 0 + totalUnsafeCount: 0, + whitelistedUrls: conf.anti_tracking_whitelist }); }); }); From 3cea1c7b1a899a0d8e4e5a9af55249d156ea7b8a Mon Sep 17 00:00:00 2001 From: Christopher Tino Date: Mon, 8 Jul 2019 18:52:52 -0400 Subject: [PATCH 06/17] fix tracker counting to include ad-block data --- src/background.js | 8 +-- src/classes/BrowserButton.js | 25 ++++--- src/classes/PanelData.js | 24 +++---- src/utils/cliqzModulesData.js | 126 +++++++++++++++------------------- 4 files changed, 85 insertions(+), 98 deletions(-) diff --git a/src/background.js b/src/background.js index 213aca689..b21efb30c 100644 --- a/src/background.js +++ b/src/background.js @@ -49,7 +49,7 @@ import * as common from './utils/common'; import * as utils from './utils/utils'; import { _getJSONAPIErrorsObject } from './utils/api'; import { importCliqzSettings } from './utils/cliqzSettingImport'; -import { sendCliqzModulesData } from './utils/cliqzModulesData'; +import { sendCliqzModuleCounts } from './utils/cliqzModulesData'; // For debug purposes, provide Access to the internals of `browser-core` // module from Developer Tools Console. @@ -841,12 +841,12 @@ function onMessageHandler(request, sender, callback) { callback(); return false; } - if (name === 'getCliqzModuleData') { + if (name === 'getCliqzModuleData') { // panel-android only if (message && message.tabId) { - sendCliqzModulesData(message.tabId, callback); + sendCliqzModuleCounts(message.tabId, callback); } else { utils.getActiveTab((tab) => { - sendCliqzModulesData(tab.id, callback); + sendCliqzModuleCounts(tab.id, callback); }); } return true; diff --git a/src/classes/BrowserButton.js b/src/classes/BrowserButton.js index 028c1a4eb..ffdc820aa 100644 --- a/src/classes/BrowserButton.js +++ b/src/classes/BrowserButton.js @@ -17,7 +17,7 @@ import conf from './Conf'; import foundBugs from './FoundBugs'; import rewards from './Rewards'; import Policy from './Policy'; -import { getCliqzAntitrackingData, getCliqzAdblockingData } from '../utils/cliqzModulesData'; +import { getCliqzAntiTrackingCount, getCliqzAdBlockingCount } from '../utils/cliqzModulesData'; import { getTab } from '../utils/utils'; import { log } from '../utils/common'; import globals from './Globals'; @@ -144,20 +144,19 @@ class BrowserButton { return; } - getCliqzAntitrackingData(tabId).then((antitrackingData) => { - const { appsCount, appsAlertCount } = this._getTrackerCount(tabId); - const adBlockingCount = getCliqzAdblockingData(tabId).totalCount; + const { appsCount, appsAlertCount } = this._getTrackerCount(tabId); + const adBlockingCount = getCliqzAdBlockingCount(tabId).totalCount; + const antiTrackingCount = getCliqzAntiTrackingCount(tabId).totalUnsafeCount; - alert = (appsAlertCount > 0); - trackerCount = (appsCount + antitrackingData.totalUnsafeCount + adBlockingCount).toString(); + alert = (appsAlertCount > 0); + trackerCount = (appsCount + antiTrackingCount + adBlockingCount).toString(); - // gray-out the icon when blocking has been disabled for whatever reason - if (trackerCount === '') { - this._setIcon(false, tabId, trackerCount, alert); - } else { - this._setIcon(!globals.SESSION.paused_blocking && !this.policy.whitelisted(tab.url), tabId, trackerCount, alert); - } - }); + // gray-out the icon when blocking has been disabled for whatever reason + if (trackerCount === '') { + this._setIcon(false, tabId, trackerCount, alert); + } else { + this._setIcon(!globals.SESSION.paused_blocking && !this.policy.whitelisted(tab.url), tabId, trackerCount, alert); + } } /** diff --git a/src/classes/PanelData.js b/src/classes/PanelData.js index d5e9cf80e..9fdc9c6a9 100644 --- a/src/classes/PanelData.js +++ b/src/classes/PanelData.js @@ -26,7 +26,7 @@ import tabInfo from './TabInfo'; import rewards from './Rewards'; import account from './Account'; import dispatcher from './Dispatcher'; -import { getCliqzGhosteryStats, sendCliqzModulesData } from '../utils/cliqzModulesData'; +import { getCliqzGhosteryBugs, sendCliqzModuleCounts } from '../utils/cliqzModulesData'; import { getActiveTab, flushChromeMemoryCache, processUrl } from '../utils/utils'; import { objectEntries, log } from '../utils/common'; @@ -206,7 +206,7 @@ class PanelData { } /** - * Wrapper helper passed as callback to utils/cliqzModuleData#sendCliqzModulesData + * Wrapper helper passed as callback to utils/cliqzModuleData#sendCliqzModuleCounts */ postMessageToSummary = ((message) => { this._postMessage('summary', message); @@ -545,12 +545,12 @@ class PanelData { } /** - * Retrieves antitracking and adblock Cliqz data and sends it to the panel + * Retrieves antitracking and adblock counts and sends it to the panel */ _postCliqzModulesData() { if (!this._panelPort || !this._activeTab) { return; } - sendCliqzModulesData(this._activeTab.id, this.postMessageToSummary); + sendCliqzModuleCounts(this._activeTab.id, this.postMessageToSummary); } /** @@ -830,23 +830,23 @@ class PanelData { this._trackerList = foundBugs.getApps(id, false, url) || []; - const ghosteryStats = getCliqzGhosteryStats(id); + const ghosteryBugs = getCliqzGhosteryBugs(id); - if (ghosteryStats && ghosteryStats.bugs) { - const gsBugs = ghosteryStats.bugs; - const bugsIds = Object.keys(gsBugs); + if (ghosteryBugs && ghosteryBugs.bugs) { + const { bugs } = ghosteryBugs; + const bugIds = Object.keys(bugs); const appsById = foundBugs.getAppsById(id); - bugsIds.forEach((bugsId) => { + bugIds.forEach((bugsId) => { const trackerId = conf.bugs.bugs[bugsId]; if (!trackerId) return; const trackerListIndex = appsById[trackerId.aid]; if (!trackerListIndex) return; - this._trackerList[trackerListIndex].cliqzCookieCount = gsBugs[bugsId].cookies; - this._trackerList[trackerListIndex].cliqzFingerprintCount = gsBugs[bugsId].fingerprints; - this._trackerList[trackerListIndex].cliqzAdCount = gsBugs[bugsId].ads; + this._trackerList[trackerListIndex].cliqzCookieCount = bugs[bugsId].cookies; + this._trackerList[trackerListIndex].cliqzFingerprintCount = bugs[bugsId].fingerprints; + this._trackerList[trackerListIndex].cliqzAdCount = bugs[bugsId].ads; }); } diff --git a/src/utils/cliqzModulesData.js b/src/utils/cliqzModulesData.js index 46e6485c9..cba9032b5 100644 --- a/src/utils/cliqzModulesData.js +++ b/src/utils/cliqzModulesData.js @@ -12,96 +12,84 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ +import { extend } from 'underscore'; import conf from '../classes/Conf'; import cliqz from '../classes/Cliqz'; const { adblocker, antitracking } = cliqz.modules; -export function getCliqzAntitrackingData(tabId) { - return new Promise((resolve) => { - if (!conf.enable_anti_tracking || !antitracking.background) { - resolve({ - totalUnsafeCount: 0 - }); - } +/** + * Get the totalUnsafeCount of trackers found by Anti-Tracking on this tabId + * @param {int} tabId + * @return {object} totalUnsafeCount + */ +export function getCliqzAntiTrackingCount(tabId) { + let count = 0; + if (!conf.enable_anti_tracking || !antitracking.background) { + return { + totalUnsafeCount: count + }; + } - antitracking.background.actions.aggregatedBlockingStats(tabId).then((antitrackingData) => { - let totalUnsafeCount = 0; - for (const category in antitrackingData) { - if (antitrackingData.hasOwnProperty(category)) { - for (const app in antitrackingData[category]) { - if (antitrackingData[category][app] === 'unsafe') { - totalUnsafeCount++; - } - } - } - } - antitrackingData.totalUnsafeCount = totalUnsafeCount; - resolve(antitrackingData); - }).catch(() => { - resolve({ - totalUnsafeCount: 0 - }); - }); - }); + // Count up number of fingerprints and cookies found + const { bugs, others } = antitracking.background.actions.getGhosteryStats(tabId); + const allStats = Object.assign({}, bugs, others); + const values = Object.values(allStats); + + for (const val of values) { + count += val.cookies + val.fingerprints; + } + + return { + totalUnsafeCount: count + }; } -export function getCliqzAdblockingData(tabId) { +/** + * Get the totalCount of ads found by the Ad Blocker on this tabId + * @param {int} tabId + * @return {object} + */ +export function getCliqzAdBlockingCount(tabId) { if (!conf.enable_ad_block || !adblocker.background) { return { totalCount: 0 }; } - const adBlocking = adblocker.background.actions.getAdBlockInfoForTab(tabId); - return adBlocking || { totalCount: 0 }; + const adBlockInfo = adblocker.background.actions.getAdBlockInfoForTab(tabId); + return { + totalCount: adBlockInfo.totalCount || 0, + }; } /** - * TODO: Add a test that verifies the following structure so that we automatically know if Cliqz changes it and we need to updated it - The returned object has the following structure: - { - bugs: { - 4147: { cookies: 3, fingerprints: 4, ads: 0 }, - another_bug_id: { cookies: 2, ..... - .... - }, - others: { - CloudFlare: { - ads: 0, - cat: "cdn", - cookies: 3, - domains: ["cdnjs.cloudlare.com", ...], - fingerprints: 4, - name: "CloudFlare", - wtm: "cloudflare", - }, - ... - } - } + * Get list of matched bug_ids from Anti-Tracking and Ad-Blocking for this + * tab, along with list of 'other' trackers found that do not match known bug_ids. + * @param {int} tabId + * @return {object} */ -export function getCliqzGhosteryStats(tabId) { - if (!conf.enable_anti_tracking) { - return { - bugs: {}, - others: {}, - }; - } +export function getCliqzGhosteryBugs(tabId) { + // Merge Ad-Block stats into Anti-Track Stats + const antiTrackingStats = (conf.enable_anti_tracking) ? antitracking.background.actions.getGhosteryStats(tabId) : { bugs: {}, others: {} }; + const adBlockingStats = (conf.enable_ad_block) ? adblocker.background.actions.getGhosteryStats(tabId) : { bugs: {}, others: {} }; - const ghosteryStats = antitracking.background.actions.getGhosteryStats(tabId); - return ghosteryStats; + return { + bugs: extend({}, antiTrackingStats.bugs, adBlockingStats.bugs), + others: extend({}, antiTrackingStats.others, adBlockingStats.others), + }; } -export function sendCliqzModulesData(tabId, callback) { +/** + * Send `totalCount` of ads found by Ad Blocker and `totalUnsafeCount` + * found by Anti-Tracking + * @param {int} tabId + * @param {Function} callback + */ +export function sendCliqzModuleCounts(tabId, callback) { const modules = { adblock: {}, antitracking: {} }; - modules.adblock = getCliqzAdblockingData(tabId); - - // TODO convert to use finally to avoid duplication (does our Babel transpile it?) - getCliqzAntitrackingData(tabId).then((antitrackingData) => { - modules.antitracking = antitrackingData; - callback(modules); - }).catch(() => { - callback(modules); - }); + modules.adblock = getCliqzAdBlockingCount(tabId); + modules.antitracking = getCliqzAntiTrackingCount(tabId); + callback(modules); } From 82cb4bbfd1305ad618155eb5815c506b4920ed9c Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Tue, 9 Jul 2019 18:31:55 -0400 Subject: [PATCH 07/17] Get Anti-Tracking button working in category header --- app/images/panel/anti_track_shield.svg | 3 - app/panel/components/Blocking.jsx | 2 + app/panel/components/Blocking/Categories.jsx | 8 ++- app/panel/components/Blocking/Category.jsx | 57 +++++++++++++++---- .../components/BuildingBlocks/DonutGraph.jsx | 12 +++- app/panel/containers/BlockingContainer.js | 14 ++++- app/scss/partials/_blocking_category.scss | 13 ++++- 7 files changed, 88 insertions(+), 21 deletions(-) delete mode 100644 app/images/panel/anti_track_shield.svg diff --git a/app/images/panel/anti_track_shield.svg b/app/images/panel/anti_track_shield.svg deleted file mode 100644 index 88db7a71d..000000000 --- a/app/images/panel/anti_track_shield.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/panel/components/Blocking.jsx b/app/panel/components/Blocking.jsx index fe1b2380f..26b00277c 100644 --- a/app/panel/components/Blocking.jsx +++ b/app/panel/components/Blocking.jsx @@ -287,6 +287,7 @@ class Blocking extends React.Component { actions, categories, antiTracking, + enable_anti_tracking, expand_all_trackers, is_expanded, language, @@ -331,6 +332,7 @@ class Blocking extends React.Component { smartBlockActive={smartBlockActive} smartBlock={smartBlock} antiTracking={antiTracking} + enable_anti_tracking={enable_anti_tracking} /> }
diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index 4ce15dfec..01875bad7 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -29,7 +29,12 @@ class Categories extends React.Component { * @return {ReactComponent} ReactComponent instance */ render() { - const { categories, expandAll, antiTracking } = this.props; + const { + categories, + expandAll, + antiTracking, + enable_anti_tracking, + } = this.props; const globalBlocking = !!this.props.globalBlocking; const filtered = !!this.props.filtered; @@ -95,6 +100,7 @@ class Categories extends React.Component { language={this.props.language} smartBlockActive={this.props.smartBlockActive} smartBlock={this.props.smartBlock} + enable_anti_tracking={enable_anti_tracking} /> ) : null; diff --git a/app/panel/components/Blocking/Category.jsx b/app/panel/components/Blocking/Category.jsx index df190e490..09d35db4a 100644 --- a/app/panel/components/Blocking/Category.jsx +++ b/app/panel/components/Blocking/Category.jsx @@ -13,6 +13,8 @@ import React from 'react'; import Trackers from './Trackers'; +import { CliqzFeature } from '../BuildingBlocks'; +import { IS_CLIQZ } from '../../../../src/classes/Globals'; /** * @class Implement Category component, which represents a @@ -159,10 +161,21 @@ class Category extends React.Component { * @return {ReactComponent} ReactComponent instance */ render() { - const { category, paused_blocking, sitePolicy } = this.props; + const { + category, + paused_blocking, + sitePolicy, + enable_anti_tracking, + actions, + } = this.props; + const globalBlocking = !!this.props.globalBlocking; - const filteredText = { color: 'red' }; + const isDataPoint = category.id === 'other_data_points'; + const checkBoxStyle = `${(this.state.totalShownBlocked && this.state.allShownBlocked) ? 'all-blocked ' : (this.state.totalShownBlocked ? 'some-blocked ' : '')} checkbox-container`; + const caretClasses = (this.state.isExpanded ? 'caret-up' : 'caret-down') + (isDataPoint ? ' Category__antiTrackingCaret' : ''); + const filteredText = { color: 'red' }; + let trackersBlockedCount; if (paused_blocking || sitePolicy === 2) { trackersBlockedCount = 0; @@ -171,7 +184,18 @@ class Category extends React.Component { } else { trackersBlockedCount = category.num_blocked || 0; } - const isDataPoint = category.id === 'other_data_points'; + + + const clickCliqzFeature = (options) => { + const { feature, status, text } = options; + this.props.actions.showNotification({ + updated: feature, + reload: true, + text, + }); + actions.toggleCliqzFeature(feature, status); + }; + const cliqzInactive = paused_blocking || sitePolicy || IS_CLIQZ; return (
@@ -180,7 +204,7 @@ class Category extends React.Component {
-
+
{ category.name }
@@ -214,8 +238,8 @@ class Category extends React.Component {
-
- {category.id !== 'other_data_points' && ( +
+ {!isDataPoint && (
@@ -225,9 +249,13 @@ class Category extends React.Component { + {/* DATAPOINT CHECK: + + */} + {/* DO WE NEED THE TWO SVGS BELOW? THEY ARE NEVER DISPLAYED */} @@ -243,11 +271,18 @@ class Category extends React.Component {
)} {isDataPoint && ( - - - - - +
+ +
)}
diff --git a/app/panel/components/BuildingBlocks/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx index 48051ce5b..288d7a66e 100644 --- a/app/panel/components/BuildingBlocks/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx @@ -349,12 +349,20 @@ class DonutGraph extends React.Component {
{categories.map(cat => ( - + {cat.name} ))} {antiTracking && !!antiTracking.totalUnsafeCount && ( - + Other Data Points )} diff --git a/app/panel/containers/BlockingContainer.js b/app/panel/containers/BlockingContainer.js index 8235aa6a5..323c56b4b 100644 --- a/app/panel/containers/BlockingContainer.js +++ b/app/panel/containers/BlockingContainer.js @@ -16,7 +16,7 @@ import { bindActionCreators } from 'redux'; import Blocking from '../components/Blocking'; import * as blockingActions from '../actions/BlockingActions'; import { updateTrackerCounts } from '../actions/SummaryActions'; -import { showNotification } from '../actions/PanelActions'; +import { showNotification, toggleCliqzFeature } from '../actions/PanelActions'; /** * Map redux store state properties to Blocking view component own properties. * @memberOf PanelContainers @@ -29,11 +29,12 @@ import { showNotification } from '../actions/PanelActions'; const mapStateToProps = state => Object.assign({}, state.blocking, { is_expanded: state.panel.is_expanded, language: state.panel.language, + smartBlock: state.panel.smartBlock, + enable_anti_tracking: state.panel.enable_anti_tracking, pageHost: state.summary.pageHost, paused_blocking: state.summary.paused_blocking, sitePolicy: state.summary.sitePolicy, smartBlockActive: state.panel.enable_smart_block, - smartBlock: state.panel.smartBlock, antiTracking: state.summary.antiTracking, }); /** @@ -44,7 +45,14 @@ const mapStateToProps = state => Object.assign({}, state.blocking, { * @return {function} to be used as an argument in redux connect call */ const mapDispatchToProps = dispatch => ({ - actions: bindActionCreators(Object.assign(blockingActions, { updateTrackerCounts, showNotification }), dispatch) + actions: bindActionCreators( + Object.assign(blockingActions, { + updateTrackerCounts, + showNotification, + toggleCliqzFeature + }), + dispatch + ) }); /** * Connects Blocking component to the Redux store. diff --git a/app/scss/partials/_blocking_category.scss b/app/scss/partials/_blocking_category.scss index 637aa399f..7d8751e0a 100644 --- a/app/scss/partials/_blocking_category.scss +++ b/app/scss/partials/_blocking_category.scss @@ -5,7 +5,7 @@ * https://www.ghostery.com/ * * Copyright 2019 Ghostery, Inc. All rights reserved. - * + * * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0 @@ -129,4 +129,15 @@ fill: $alabaster; } } + .Category__antiTrackingCaret { + position: relative; + top: -22px; + right: -19px; + } + .Category__antiTrackingButton { + display: inline-block; + position: relative; + top: -3px; + right: -9px; + } } From d57dc3d2f1c8ec668853279ba2c36f51e782859b Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Wed, 10 Jul 2019 16:39:12 -0400 Subject: [PATCH 08/17] Finish styling header --- app/images/panel/other_data_points.svg | 14 ++++++---- .../panel/white-shield-svg-path-copy.svg | 3 ++ app/panel/components/Blocking/Category.jsx | 13 +++++++-- .../BuildingBlocks/CliqzFeature.jsx | 3 ++ app/scss/partials/_blocking_category.scss | 28 ++++++++++++++++--- app/scss/partials/_cliqz_feature.scss | 13 +++++++++ app/scss/partials/_tooltip.scss | 4 +++ 7 files changed, 66 insertions(+), 12 deletions(-) create mode 100644 app/images/panel/white-shield-svg-path-copy.svg diff --git a/app/images/panel/other_data_points.svg b/app/images/panel/other_data_points.svg index ce291e0c5..936cfeb8c 100644 --- a/app/images/panel/other_data_points.svg +++ b/app/images/panel/other_data_points.svg @@ -1,7 +1,11 @@ - - - - - + + + + + + + + + diff --git a/app/images/panel/white-shield-svg-path-copy.svg b/app/images/panel/white-shield-svg-path-copy.svg new file mode 100644 index 000000000..86ee004b7 --- /dev/null +++ b/app/images/panel/white-shield-svg-path-copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/panel/components/Blocking/Category.jsx b/app/panel/components/Blocking/Category.jsx index 09d35db4a..ad577d315 100644 --- a/app/panel/components/Blocking/Category.jsx +++ b/app/panel/components/Blocking/Category.jsx @@ -199,7 +199,14 @@ class Category extends React.Component { return (
-
+
+ {isDataPoint && ( +
+

+ Enhanced Anti-Tracking +

+
+ )}
@@ -277,10 +284,10 @@ class Category extends React.Component { type="anti_track" active={enable_anti_tracking} cliqzInactive={cliqzInactive} - isCondensed + isTiny isTooltipHeader isTooltipBody - tooltipPosition="top top-left" + tooltipPosition="left" />
)} diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index 93d786c15..72cfe1372 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -82,6 +82,7 @@ class CliqzFeature extends React.Component { cliqzInactive, isSmaller, isCondensed, + isTiny, isTooltipBody, isTooltipHeader, tooltipPosition, @@ -92,6 +93,7 @@ class CliqzFeature extends React.Component { 'CliqzFeature--normal': !isSmaller && !isCondensed, 'CliqzFeature--smaller': isSmaller, 'CliqzFeature--condensed': isCondensed, + 'CliqzFeature--tiny': isTiny, 'CliqzFeature--active': active, 'CliqzFeature--inactive': !active, clickable: !cliqzInactive, @@ -111,6 +113,7 @@ class CliqzFeature extends React.Component { header={this._getTooltipHeaderText(isTooltipHeader, type)} body={this._getTooltipBodyText(active, isTooltipBody, type)} position={tooltipPosition} + // className={isTiny ? 'CliqzFeature--tooltipUp' : ''} />
diff --git a/app/scss/partials/_blocking_category.scss b/app/scss/partials/_blocking_category.scss index 7d8751e0a..f73ee5247 100644 --- a/app/scss/partials/_blocking_category.scss +++ b/app/scss/partials/_blocking_category.scss @@ -56,6 +56,13 @@ top: 0; z-index: 1; height: 62px; + + &.anti-track-header { + height: 80px; + border-top: 0; + padding-top: 0; + } + .caret-down { @extend %pointer; display: inline-block; @@ -129,15 +136,28 @@ fill: $alabaster; } } + .Category__antiTrackingDivider { + background-color: #00AEF0; + width: 110%; + height: 18px; + margin-bottom: 9px; + } + .Category__antiTrackingDividerText { + margin: 0; + padding-top: 1px; + padding-left: 15px; + font-size: 10px; + color: white; + } .Category__antiTrackingCaret { position: relative; - top: -22px; - right: -19px; + bottom: 14px; + left: 8px; } .Category__antiTrackingButton { display: inline-block; position: relative; - top: -3px; - right: -9px; + left: 4px; + bottom: 4px } } diff --git a/app/scss/partials/_cliqz_feature.scss b/app/scss/partials/_cliqz_feature.scss index 5379840d0..d88f0b5e2 100644 --- a/app/scss/partials/_cliqz_feature.scss +++ b/app/scss/partials/_cliqz_feature.scss @@ -73,6 +73,19 @@ $cliqz-feature--darker-gray: #a4a4a4; .CliqzFeature__feature-name { display: none; } } +.CliqzFeature--tiny { + .CliqzFeature__status { + line-height: 17px; + font-size: 9px; + } + .CliqzFeature__icon { + height: 28px; + width: 28px; + background-size: 26px 26px; + } + .CliqzFeature__feature-name { display: none; } +} + // Modifications to element styling based on state-related block-level modifiers // The CliqzFeature block is always either active or inactive // and always either clickable or not-clickable diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss index ef37da0b4..830a92be9 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/scss/partials/_tooltip.scss @@ -201,3 +201,7 @@ margin-left: 0 !important; } } + +.Category__antiTrackingButton .tooltip-content.left { + top: -27px; +} From df763d64767728c7ca2c987698722254dd509eed Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Thu, 11 Jul 2019 15:14:19 -0400 Subject: [PATCH 09/17] Header styling and functionality complete, SVG buttons styled --- app/panel/components/Blocking.jsx | 12 +- app/panel/components/Blocking/Categories.jsx | 23 ++-- app/panel/components/Blocking/Category.jsx | 10 +- .../components/Blocking/OtherDataPoint.jsx | 106 +++--------------- app/scss/partials/_blocking.scss | 6 +- app/scss/partials/_blocking_category.scss | 4 +- app/scss/partials/_blocking_tracker.scss | 4 + 7 files changed, 50 insertions(+), 115 deletions(-) diff --git a/app/panel/components/Blocking.jsx b/app/panel/components/Blocking.jsx index 26b00277c..f090ec824 100644 --- a/app/panel/components/Blocking.jsx +++ b/app/panel/components/Blocking.jsx @@ -112,8 +112,18 @@ class Blocking extends React.Component { category.num_shown = (show) ? count : 0; }); + let whitelistedUrlCount = 0; + Object.keys(updatedAntiTracking.unknown).forEach((urlKey) => { + if (updatedAntiTracking.whitelistedUrls[urlKey] + && updatedAntiTracking.unknown[urlKey] === 'safe') { + whitelistedUrlCount++; + } + }); + updatedAntiTracking.num_shown = filterName === 'all' || filterName === 'other_data_points' - ? updatedAntiTracking.totalUnsafeCount : 0; + ? updatedAntiTracking.totalUnsafeCount + whitelistedUrlCount : 0; + + console.log('UPDTATETEGEAF', updatedAntiTracking); this.props.actions.updateCategories(updated_categories); this.props.actions.updateAntiTrackingNumShown(updatedAntiTracking); diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index 01875bad7..9f6075753 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -63,30 +63,25 @@ class Categories extends React.Component { globalBlocking={globalBlocking} index={categoryList.length} category={(() => { - const unknownURLs = Object.keys(antiTracking.unknown); - const unsafeURLs = unknownURLs.filter(url => antiTracking.unknown[url] === 'unsafe'); + const antiTrackingUrls = Object.keys(antiTracking.unknown).filter(urlKey => ( + (antiTracking.unknown[urlKey] === 'safe' && antiTracking.whitelistedUrls[urlKey]) + || antiTracking.unknown[urlKey] === '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: true, + num_total: antiTrackingUrls.length, + num_blocked: antiTracking.totalUnsafeCount, + num_shown: antiTrackingUrls.length, + trackers: antiTrackingUrls.map((url, idx) => ({ + blocked: antiTracking.unknown[url] === 'unsafe', catId: 'other_data_points', description: '', id: 100000000 + idx, name: url, shouldShow: true, - sources: false, - ss_allowed: false, - ss_blocked: false, - warningCompatibility: false, - warningInsecure: false, - warningSlow: false, - warningSmartBlock: false, })), }; })()} diff --git a/app/panel/components/Blocking/Category.jsx b/app/panel/components/Blocking/Category.jsx index ad577d315..9a48caea2 100644 --- a/app/panel/components/Blocking/Category.jsx +++ b/app/panel/components/Blocking/Category.jsx @@ -185,7 +185,6 @@ class Category extends React.Component { trackersBlockedCount = category.num_blocked || 0; } - const clickCliqzFeature = (options) => { const { feature, status, text } = options; this.props.actions.showNotification({ @@ -197,9 +196,11 @@ class Category extends React.Component { }; const cliqzInactive = paused_blocking || sitePolicy || IS_CLIQZ; + console.log('wuttt', category); + return (
-
+
{isDataPoint && (

@@ -235,7 +236,7 @@ class Category extends React.Component { (!!trackersBlockedCount || isDataPoint) &&

- {isDataPoint ? category.num_total : `${trackersBlockedCount} `} + {isDataPoint ? category.num_blocked : `${trackersBlockedCount} `} {isDataPoint ? ' ANONYMIZED' : t('blocking_category_blocked') } @@ -256,9 +257,6 @@ class Category extends React.Component { - {/* DATAPOINT CHECK: - - */} diff --git a/app/panel/components/Blocking/OtherDataPoint.jsx b/app/panel/components/Blocking/OtherDataPoint.jsx index 3c3bcaf08..c6f8ac903 100644 --- a/app/panel/components/Blocking/OtherDataPoint.jsx +++ b/app/panel/components/Blocking/OtherDataPoint.jsx @@ -24,13 +24,7 @@ class OtherDataPoint extends React.Component { super(props); this.state = { trackerClasses: '', - warningImageTitle: '', }; - - // click bindings - this.clickTrackerStatus = this.clickTrackerStatus.bind(this); - this.clickTrackerTrust = this.clickTrackerTrust.bind(this); - this.clickTrackerRestrict = this.clickTrackerRestrict.bind(this); } /** * Lifecycle event. @@ -44,82 +38,17 @@ class OtherDataPoint extends React.Component { componentWillReceiveProps(nextProps) { this.updateTrackerClasses(nextProps.tracker); } - /** - * React hook used to optimise re-rendering of the list of trackers. - * @param {Object} nextProps changed props - * @param {Object} nextState changed state - * @return {boolean} true means proceed with rendering - */ - shouldComponentUpdate(nextProps) { - const { tracker } = nextProps; - if (!tracker || Object.keys(tracker).length === 0) { - return false; - } - return true; - } /** * Set dynamic classes on .blocking-trk and save it in state. * @param {Object} tracker tracker object */ updateTrackerClasses(tracker) { const classes = []; - let updated_title = ''; - - classes.push((!tracker.shouldShow) ? 'hide' : ''); classes.push((tracker.blocked) ? 'blocked' : ''); classes.push((tracker.ss_allowed) ? 'individual-trust' : ''); - classes.push((tracker.ss_blocked) ? 'individual-restrict' : ''); - classes.push((tracker.warningCompatibility || tracker.warningInsecure || tracker.warningSlow || tracker.warningSmartBlock) ? 'warning' : ''); - if (tracker.warningSmartBlock) { - classes.push(tracker.warningSmartBlock === 'blocked' ? 'smart-blocked' : 'smart-unblocked'); - } else { - classes.push((tracker.warningCompatibility) ? 'compatibility' : ''); - classes.push((tracker.warningInsecure) ? 'insecure' : ''); - classes.push((tracker.warningSlow) ? 'slow' : ''); - } - - // Create tooltips for tracker alerts - if (tracker.warningSmartBlock) { - updated_title = tracker.warningSmartBlock === 'blocked' ? t('panel_tracker_warning_smartblock_tooltip') : t('panel_tracker_warning_smartunblock_tooltip'); - } else if (tracker.warningCompatibility) { - updated_title = t('panel_tracker_warning_compatibility_tooltip'); - } else if (tracker.warningInsecure && tracker.warningSlow) { - updated_title = t('panel_tracker_warning_slow_nonsecure_tooltip'); - } else if (tracker.warningInsecure) { - updated_title = t('panel_tracker_warning_nonsecure_tooltip'); - } else if (tracker.warningSlow) { - updated_title = t('panel_tracker_warning_slow_tooltip'); - } this.setState({ trackerClasses: classes.join(' '), - warningImageTitle: updated_title, - }); - } - /** - * Implement handler for clicking on the tracker global block/unblock checkbox. - * Trigger action which persists new tracker blocked state and spawns - * re-rendering of the checkbox. It also shows notification to inform - * user that the page should be reloaded. - */ - clickTrackerStatus() { - const blocked = !this.props.tracker.blocked; - - if (this.props.paused_blocking || this.props.sitePolicy) { - return; - } - - this.props.actions.updateTrackerBlocked({ - smartBlockActive: this.props.smartBlockActive, - smartBlock: this.props.smartBlock, - app_id: this.props.tracker.id, - cat_id: this.props.cat_id, - blocked, - }); - - this.props.actions.showNotification({ - updated: `${this.props.tracker.id}_blocked`, - reload: true, }); } @@ -172,39 +101,40 @@ class OtherDataPoint extends React.Component { return (
-
-
-
{ tracker.name }
-
- - +
+ + {/* USE INLINE SVG FOR TRUST CIRCLE TO CHANGE COLORS WITH CSS */} + + - - + + - + - - + + {/* USE INLINE SVG FOR ANTI-TRACKING SHIELD TO CHANGE COLORS WITH CSS */} + + - - - - - - + + + + + +
diff --git a/app/scss/partials/_blocking.scss b/app/scss/partials/_blocking.scss index e7abe51e7..adecd18f0 100644 --- a/app/scss/partials/_blocking.scss +++ b/app/scss/partials/_blocking.scss @@ -131,9 +131,6 @@ color: #9b9b9b; font-style: italic; text-decoration: line-through; - &.data-point { - color: #1DAFED; - } } .trk-src-link { font-style: italic; @@ -174,6 +171,7 @@ font-style: italic; text-decoration: line-through; &.data-point { + padding-left: 50px; color: #1DAFED; } } @@ -253,7 +251,7 @@ font-style: italic; text-decoration: line-through; &.data-point { - color: #1DAFED; + padding-left: 50px; } } .trk-src-link { diff --git a/app/scss/partials/_blocking_category.scss b/app/scss/partials/_blocking_category.scss index f73ee5247..19c377433 100644 --- a/app/scss/partials/_blocking_category.scss +++ b/app/scss/partials/_blocking_category.scss @@ -57,7 +57,7 @@ z-index: 1; height: 62px; - &.anti-track-header { + &.anti-tracking-header { height: 80px; border-top: 0; padding-top: 0; @@ -144,7 +144,7 @@ } .Category__antiTrackingDividerText { margin: 0; - padding-top: 1px; + padding-top: 2px; padding-left: 15px; font-size: 10px; color: white; diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index da198a70c..d3a754330 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -171,3 +171,7 @@ svg.blocking-icons { stroke-linecap: square; } } + +.OtherDataPoint__svgGroup { + padding-top: 5px; +} From 6896ad75b96ced416280c156028caddaf1998cba Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Wed, 17 Jul 2019 17:54:57 -0400 Subject: [PATCH 10/17] Saving (relatively) working code) --- app/panel/components/Blocking.jsx | 10 +-- app/panel/components/Blocking/Categories.jsx | 45 ++++++------ app/panel/components/Blocking/Category.jsx | 6 +- .../components/Blocking/OtherDataPoint.jsx | 72 ++++++++++++++++++- .../components/BuildingBlocks/DonutGraph.jsx | 14 ++-- app/panel/reducers/summary.js | 12 ++-- src/background.js | 19 +++-- src/classes/BrowserButton.js | 4 +- src/classes/PanelData.js | 8 ++- src/classes/Policy.js | 2 +- src/utils/cliqzModulesData.js | 61 +++++++++++++--- 11 files changed, 181 insertions(+), 72 deletions(-) diff --git a/app/panel/components/Blocking.jsx b/app/panel/components/Blocking.jsx index df76d3383..507d6ef17 100644 --- a/app/panel/components/Blocking.jsx +++ b/app/panel/components/Blocking.jsx @@ -112,16 +112,8 @@ class Blocking extends React.Component { category.num_shown = (show) ? count : 0; }); - let whitelistedUrlCount = 0; - Object.keys(updatedAntiTracking.unknown).forEach((urlKey) => { - if (updatedAntiTracking.whitelistedUrls[urlKey] - && updatedAntiTracking.unknown[urlKey] === 'safe') { - whitelistedUrlCount++; - } - }); - updatedAntiTracking.num_shown = filterName === 'all' || filterName === 'other_data_points' - ? updatedAntiTracking.totalUnsafeCount + whitelistedUrlCount : 0; + ? updatedAntiTracking.unknown.length : 0; console.log('UPDTATETEGEAF', updatedAntiTracking); diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index 9f6075753..af572ca2c 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -57,34 +57,31 @@ class Categories extends React.Component { /> )); - const otherDataPointsCategory = (antiTracking && antiTracking.totalUnsafeCount) ? ( + const otherDataPointsCategory = antiTracking.totalUnknownCount ? ( { - const antiTrackingUrls = Object.keys(antiTracking.unknown).filter(urlKey => ( - (antiTracking.unknown[urlKey] === 'safe' && antiTracking.whitelistedUrls[urlKey]) - || antiTracking.unknown[urlKey] === 'unsafe' - )); - return { - id: 'other_data_points', - name: 'Other Data Points', - description: 'Anonymized data points by Anti-Tracking', - img_name: 'other_data_points', - num_total: antiTrackingUrls.length, - num_blocked: antiTracking.totalUnsafeCount, - num_shown: antiTrackingUrls.length, - trackers: antiTrackingUrls.map((url, idx) => ({ - blocked: antiTracking.unknown[url] === 'unsafe', - catId: 'other_data_points', - description: '', - id: 100000000 + idx, - name: url, - shouldShow: true, - })), - }; - })()} + category={(() => ({ + id: 'other_data_points', + name: 'Other Data Points', + description: 'Anonymized data points by Anti-Tracking', + img_name: 'other_data_points', + num_total: antiTracking.unknown.length, + num_blocked: antiTracking.unknownTrackerCount, + num_shown: antiTracking.num_shown === 0 ? 0 : antiTracking.unknown.length, + trackers: antiTracking.unknown.map((otherDataPoint, idx) => ({ + blocked: !otherDataPoint.whitelisted, + catId: 'other_data_points', + description: '', + id: 100000000 + idx, + name: otherDataPoint.name, + shouldShow: true, + cliqzAdCount: otherDataPoint.ads, + cliqzCookieCount: otherDataPoint.cookies, + cliqzFingerprintCount: otherDataPoint.fingerprints, + })), + }))()} actions={this.props.actions} key="other_data_points" filtered={filtered} diff --git a/app/panel/components/Blocking/Category.jsx b/app/panel/components/Blocking/Category.jsx index 5f554ae94..3170feaad 100644 --- a/app/panel/components/Blocking/Category.jsx +++ b/app/panel/components/Blocking/Category.jsx @@ -14,7 +14,7 @@ import React from 'react'; import Trackers from './Trackers'; import { CliqzFeature } from '../BuildingBlocks'; -import { IS_CLIQZ } from '../../../../src/classes/Globals'; +import Globals from '../../../../src/classes/Globals'; /** * @class Implement Category component, which represents a @@ -194,9 +194,7 @@ class Category extends React.Component { }); actions.toggleCliqzFeature(feature, status); }; - const cliqzInactive = paused_blocking || sitePolicy || IS_CLIQZ; - - console.log('wuttt', category); + const cliqzInactive = paused_blocking || sitePolicy || Globals.IS_CLIQZ; return (
diff --git a/app/panel/components/Blocking/OtherDataPoint.jsx b/app/panel/components/Blocking/OtherDataPoint.jsx index c6f8ac903..e12e3a8f9 100644 --- a/app/panel/components/Blocking/OtherDataPoint.jsx +++ b/app/panel/components/Blocking/OtherDataPoint.jsx @@ -14,6 +14,8 @@ /* eslint react/no-array-index-key: 0 */ import React from 'react'; +import ReactSVG from 'react-svg'; + /** * @class Implement Tracker component which represents single tracker * in the Blocking view. @@ -26,18 +28,21 @@ class OtherDataPoint extends React.Component { trackerClasses: '', }; } + /** * Lifecycle event. */ componentWillMount() { this.updateTrackerClasses(this.props.tracker); } + /** * Lifecycle event. */ componentWillReceiveProps(nextProps) { this.updateTrackerClasses(nextProps.tracker); } + /** * Set dynamic classes on .blocking-trk and save it in state. * @param {Object} tracker tracker object @@ -91,6 +96,70 @@ class OtherDataPoint extends React.Component { reload: true, }); } + + _renderCliqzStatsContainer() { + const { tracker } = this.props; + const { cliqzAdCount, cliqzCookieCount, cliqzFingerprintCount } = tracker; + + const oneOrMoreCookies = cliqzCookieCount >= 1; + const oneOrMoreFingerprints = cliqzFingerprintCount >= 1; + const oneOrMoreAds = cliqzAdCount >= 1; + + console.log(tracker); + + return ( +
+ {(oneOrMoreCookies || oneOrMoreFingerprints) && ( +
+ {this._renderCliqzCookiesAndFingerprintsIcon()} + {oneOrMoreCookies && this._renderCliqzCookieStat(cliqzCookieCount)} + {oneOrMoreFingerprints && this._renderCliqzFingerprintStat(cliqzFingerprintCount)} +
+ )} + {oneOrMoreAds && ( +
+ {this._renderCliqzAdsIcon()} + {this._renderCliqzAdStat(cliqzAdCount)} +
+ )} +
+ ); + } + + _renderCliqzCookiesAndFingerprintsIcon() { return this._renderCliqzStatsIcon('cookies-and-fingerprints'); } + + _renderCliqzAdsIcon() { return this._renderCliqzStatsIcon('ads'); } + + _renderCliqzStatsIcon(type) { + const path = `/app/images/panel/tracker-detail-cliqz-${type}-icon.svg`; + + return ( + + ); + } + + _renderCliqzCookieStat(count) { return this._renderCliqzStat(count, 'cookie'); } + + _renderCliqzFingerprintStat(count) { return this._renderCliqzStat(count, 'fingerprint'); } + + _renderCliqzAdStat(count) { return this._renderCliqzStat(count, 'ad'); } + + _renderCliqzStat(count, type) { + const exactlyOne = count === 1; + const label = exactlyOne ? + t(`${type}`) : + t(`${type}s`); + const cssClass = `trk-cliqz-stat trk-cliqz-stat-${type}s-count`; + + return ( + + {count} + {' '} + {label} + + ); + } + /** * Render a tracker in Blocking view. * @return {ReactComponent} ReactComponent instance @@ -103,6 +172,7 @@ class OtherDataPoint extends React.Component {
{ tracker.name }
+ {this._renderCliqzStatsContainer()}
@@ -121,7 +191,7 @@ class OtherDataPoint extends React.Component { {/* USE INLINE SVG FOR ANTI-TRACKING SHIELD TO CHANGE COLORS WITH CSS */} - + diff --git a/app/panel/components/BuildingBlocks/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx index 8be5d3916..daf32605c 100644 --- a/app/panel/components/BuildingBlocks/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx @@ -128,10 +128,10 @@ class DonutGraph extends React.Component { return; } - if (!antiTracking && !nextProps.antiTracking) { return; } - const unsafeDataPoints = antiTracking ? antiTracking.totalUnsafeCount : 0; - const nextUnsafeDataPoints = nextProps.antiTracking ? nextProps.antiTracking.totalUnsafeCount : 0; - if (unsafeDataPoints !== nextUnsafeDataPoints) { + if (!antiTracking.totalUnknownCount && !nextProps.antiTracking.totalUnknownCount) { return; } + const unknownDataPoints = antiTracking.totalUnknownCount; + const nextUnknownDataPoints = nextProps.antiTracking.totalUnknownCount; + if (unknownDataPoints !== nextUnknownDataPoints) { this.nextPropsDonut(nextProps); } } @@ -221,11 +221,11 @@ class DonutGraph extends React.Component { graphData.sort((a, b) => a.value < b.value); } - if (antiTracking && antiTracking.totalUnsafeCount) { + if (antiTracking.totalUnknownCount) { graphData.push({ id: 'other_data_points', name: 'Data Points Anonymized', - value: antiTracking.totalUnsafeCount, + value: antiTracking.totalUnknownCount, }); } @@ -359,7 +359,7 @@ class DonutGraph extends React.Component { {cat.name} ))} - {antiTracking && !!antiTracking.totalUnsafeCount && ( + {!!antiTracking.totalUnknownCount && ( { return Object.assign({}, state, action.data); } case UPDATE_CLIQZ_MODULE_DATA: { - console.log('RECEIVING ANTITRACKING DATA', action.data.antitracking); - return Object.assign({}, state, { adBlock: action.data.adblock, antiTracking: action.data.antitracking }); - } - case UPDATE_ANTI_TRACKING_WHITELIST: { - const updated = _updateSitePolicy(state, action); - return Object.assign({}, state, updated); + return Object.assign({}, state, { adBlock: action.data.adblock, antiTracking: action.data.antiTracking }); } case UPDATE_ANTI_TRACKING_NUM_SHOWN: { return Object.assign({}, state, { antiTracking: action.data }); diff --git a/src/background.js b/src/background.js index b7628b373..4a75e666a 100644 --- a/src/background.js +++ b/src/background.js @@ -1278,10 +1278,21 @@ function initialiseWebRequestPipeline() { */ function isWhitelisted(state) { const url = state.tabUrl; - if (state.url && state.url.includes('yahoo.com') && state.tabUrl.includes('huffpost.com')) { - console.log('HUFF POST WORKING', state.url, state.tabUrl, state.originUrl); - return true; - } + // if (state.url && state.url.includes('yahoo.com') && state.tabUrl.includes('huffpost.com')) { + // console.log('HUFF POST WORKING', state.url, state.tabUrl, state.originUrl); + // return true; + // } + + // if (state.url && (state.url.includes('facebook.com'))) { + // console.log('TWITTER?', state); return true; + // } + // if (state.url && (state.url.includes('twitter.com'))) { + // console.log('TWITTER?', state); return true; + // } + // if (state.url && (state.url.includes('twimg.com'))) { + // console.log('TWerlifgnerTTER?', state); return true; + // } + // state.ghosteryWhitelisted is sometimes undefined so force to bool return Boolean(globals.SESSION.paused_blocking || events.policy.getSitePolicy(url) === 2 || state.ghosteryWhitelisted); } diff --git a/src/classes/BrowserButton.js b/src/classes/BrowserButton.js index ffdc820aa..7e16cc03d 100644 --- a/src/classes/BrowserButton.js +++ b/src/classes/BrowserButton.js @@ -17,7 +17,7 @@ import conf from './Conf'; import foundBugs from './FoundBugs'; import rewards from './Rewards'; import Policy from './Policy'; -import { getCliqzAntiTrackingCount, getCliqzAdBlockingCount } from '../utils/cliqzModulesData'; +import { getCliqzAntiTrackingData, getCliqzAdBlockingCount } from '../utils/cliqzModulesData'; import { getTab } from '../utils/utils'; import { log } from '../utils/common'; import globals from './Globals'; @@ -146,7 +146,7 @@ class BrowserButton { const { appsCount, appsAlertCount } = this._getTrackerCount(tabId); const adBlockingCount = getCliqzAdBlockingCount(tabId).totalCount; - const antiTrackingCount = getCliqzAntiTrackingCount(tabId).totalUnsafeCount; + const antiTrackingCount = getCliqzAntiTrackingData(tabId).totalUnsafeCount; alert = (appsAlertCount > 0); trackerCount = (appsCount + antiTrackingCount + adBlockingCount).toString(); diff --git a/src/classes/PanelData.js b/src/classes/PanelData.js index 5ee2894fb..119e6744f 100644 --- a/src/classes/PanelData.js +++ b/src/classes/PanelData.js @@ -550,7 +550,11 @@ class PanelData { _postCliqzModulesData() { if (!this._panelPort || !this._activeTab) { return; } - sendCliqzModuleCounts(this._activeTab.id, this.postMessageToSummary); + sendCliqzModuleCounts( + this._activeTab.id, + processUrl(this._activeTab.url).host, + this.postMessageToSummary, + ); } /** @@ -605,7 +609,6 @@ class PanelData { * @param {Object} data */ set(data) { - console.log('PANEL DATA IS BEING SET', data); let syncSetDataChanged = false; if (IS_CLIQZ) { @@ -618,7 +621,6 @@ class PanelData { // Set the conf from data // TODO can this now be replaced by Object.entries? for (const [key, value] of objectEntries(data)) { - console.log('CHECK VALS', key, value); if (conf.hasOwnProperty(key) && !isEqual(conf[key], value)) { conf[key] = value; syncSetDataChanged = SYNC_SET.has(key) ? true : syncSetDataChanged; diff --git a/src/classes/Policy.js b/src/classes/Policy.js index fa9e6cad6..0f446d7c0 100644 --- a/src/classes/Policy.js +++ b/src/classes/Policy.js @@ -66,7 +66,7 @@ class Policy { url = processUrl(url).host; url = url.replace(/^www\./, ''); const sites = conf.site_whitelist || []; - console.log('WHITELIST CHECK (we will want to make a new function similar to this just for anti-tracking)', sites); + // console.log('WHITELIST CHECK (we will want to make a new function similar to this just for anti-tracking)', sites); const num_sites = sites.length; // TODO: speed up diff --git a/src/utils/cliqzModulesData.js b/src/utils/cliqzModulesData.js index cba9032b5..7e93fc12d 100644 --- a/src/utils/cliqzModulesData.js +++ b/src/utils/cliqzModulesData.js @@ -23,25 +23,66 @@ const { adblocker, antitracking } = cliqz.modules; * @param {int} tabId * @return {object} totalUnsafeCount */ -export function getCliqzAntiTrackingCount(tabId) { - let count = 0; +export function getCliqzAntiTrackingData(tabId, tabHostUrl) { + let totalUnsafeCount = 0; + let totalUnknownCount = 0; + let unknownTrackerCount = 0; if (!conf.enable_anti_tracking || !antitracking.background) { return { - totalUnsafeCount: count + totalUnsafeCount, + totalUnknownCount, }; } // Count up number of fingerprints and cookies found const { bugs, others } = antitracking.background.actions.getGhosteryStats(tabId); - const allStats = Object.assign({}, bugs, others); - const values = Object.values(allStats); + // const allStats = Object.assign({}, bugs, others); + const bugsValues = Object.values(bugs); + const othersValues = Object.values(others); - for (const val of values) { - count += val.cookies + val.fingerprints; + let othersCaught; + const unknown = []; + + for (const bug of bugsValues) { + totalUnsafeCount += bug.cookies + bug.fingerprints; + } + + for (const other of othersValues) { + if (other.cookies || other.fingerprints) { + totalUnsafeCount += other.cookies + other.fingerprints; + totalUnknownCount += other.cookies + other.fingerprints; + unknownTrackerCount += 1; + const { + name, domains, ads, cookies, fingerprints + } = other; + unknown.push({ + name, domains, ads, cookies, fingerprints, whitelisted: false + }); + othersCaught = true; + } else { + other.domains.some((domain) => { + if (conf.anti_tracking_whitelist[domain] === tabHostUrl) { + const { + name, domains, ads, cookies, fingerprints + } = other; + unknown.push({ + name, domains, ads, cookies, fingerprints, whitelisted: true + }); + return true; + } + return false; + }); + } } + console.log(`~~~~~${othersCaught ? '***IT HAPPENED***' : ''}~~~~~`, others); + return { - totalUnsafeCount: count + totalUnsafeCount, + whitelistedUrls: conf.anti_tracking_whitelist, + unknown, + unknownTrackerCount, + totalUnknownCount, }; } @@ -86,10 +127,10 @@ export function getCliqzGhosteryBugs(tabId) { * @param {int} tabId * @param {Function} callback */ -export function sendCliqzModuleCounts(tabId, callback) { +export function sendCliqzModuleCounts(tabId, tabHostUrl, callback) { const modules = { adblock: {}, antitracking: {} }; modules.adblock = getCliqzAdBlockingCount(tabId); - modules.antitracking = getCliqzAntiTrackingCount(tabId); + modules.antiTracking = getCliqzAntiTrackingData(tabId, tabHostUrl); callback(modules); } From 45a97be30951446ae601b8855650987aaa71eeaa Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Thu, 18 Jul 2019 18:30:40 -0400 Subject: [PATCH 11/17] Finish styling --- app/panel/components/Blocking/Categories.jsx | 4 +- app/panel/components/Blocking/Category.jsx | 5 +- app/panel/components/Blocking/Tracker.jsx | 126 ++++++++---------- app/panel/components/Blocking/Trackers.jsx | 18 +-- .../Blocking/trackerButtonRenderHelpers.jsx | 90 +++++++++++++ app/panel/reducers/blocking.js | 6 + app/scss/partials/_blocking.scss | 7 - app/scss/partials/_blocking_category.scss | 4 + app/scss/partials/_blocking_tracker.scss | 56 +++++++- 9 files changed, 220 insertions(+), 96 deletions(-) create mode 100644 app/panel/components/Blocking/trackerButtonRenderHelpers.jsx diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index fec0a17c5..c79ade4ee 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -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, diff --git a/app/panel/components/Blocking/Category.jsx b/app/panel/components/Blocking/Category.jsx index 4a966a6e7..1ba87a51e 100644 --- a/app/panel/components/Blocking/Category.jsx +++ b/app/panel/components/Blocking/Category.jsx @@ -230,8 +230,9 @@ class Category extends React.Component { { (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') }
- {(!!trackersBlockedCount || (isUnknown && category.num_blocked !== category.num_total)) && ( -
+ {((!isUnknown && !!trackersBlockedCount) + || (isUnknown && category.num_blocked !== category.num_total)) && ( +
{isUnknown ? category.num_total - category.num_blocked : `${trackersBlockedCount} `} diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index 634549af3..e462da94f 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -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) => ( )); } + + const trackerNameClasses = ClassNames('trk-name', { + unknown: isUnknown, + 'is-whitelisted': tracker.whitelisted, + }); + return (
@@ -298,78 +323,45 @@ class Tracker extends React.Component {
-
{ tracker.name }
- {this._renderCliqzStatsContainer()} +
+ {tracker.name} +
+ {!tracker.whitelisted && this._renderCliqzStatsContainer()}
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - { if (this.props.tracker.ss_allowed || this.props.tracker.ss_blocked) { return; } this.clickTrackerStatus(); }} width="20px" height="20px" viewBox="0 0 20 20"> - - - - - - - - - - - - - - - - - - -
+ {!isUnknown ? renderKnownTrackerButtons( + this.props.tracker.ss_allowed, + this.props.tracker.ss_blocked, + this.clickTrackerTrust, + this.clickTrackerRestrict, + this.clickTrackerStatus, + ) : renderUnknownTrackerButtons( + this.handleAntiTrackingWhitelist, + tracker.whitelisted, + )}
- { - this.state.showMoreInfo && ( -
-
- -
-
{ t('panel_tracker_found_sources_title') }
-
{ sources }
+ {this.state.showMoreInfo && ( +
+
+
+ { this.state.description } +
+
+
{ t('panel_tracker_found_sources_title') }
+
{ sources }
+
- )} +
+ )}
); } diff --git a/app/panel/components/Blocking/Trackers.jsx b/app/panel/components/Blocking/Trackers.jsx index 7a9457c9d..5b9bc0dce 100644 --- a/app/panel/components/Blocking/Trackers.jsx +++ b/app/panel/components/Blocking/Trackers.jsx @@ -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 => ( - - )); } else { trackerList = trackers.map(tracker => ( ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + { if (ss_allowed || ss_blocked) { return; } clickTrackerStatus(); }} width="20px" height="20px" viewBox="0 0 20 20"> + + + + + + + + + + + + + + + + + + +
+); + +export const renderUnknownTrackerButtons = (handleAntiTrackingWhitelist, whitelisted) => { + const svgContainerClasses = ClassNames('unknown-svg-container', { whitelisted }); + + return ( +
+ {/* USE INLINE SVG FOR TRUST CIRCLE TO CHANGE COLORS WITH CSS */} + + + + + + + + + + + + + {/* USE INLINE SVG FOR ANTI-TRACKING SHIELD TO CHANGE COLORS WITH CSS */} + + + + + + + + + + + + + +
+ ); +}; diff --git a/app/panel/reducers/blocking.js b/app/panel/reducers/blocking.js index fb0739ed5..8295cac49 100644 --- a/app/panel/reducers/blocking.js +++ b/app/panel/reducers/blocking.js @@ -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; diff --git a/app/scss/partials/_blocking.scss b/app/scss/partials/_blocking.scss index adecd18f0..a9f995c28 100644 --- a/app/scss/partials/_blocking.scss +++ b/app/scss/partials/_blocking.scss @@ -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; diff --git a/app/scss/partials/_blocking_category.scss b/app/scss/partials/_blocking_category.scss index 19c377433..9f0cb86cc 100644 --- a/app/scss/partials/_blocking_category.scss +++ b/app/scss/partials/_blocking_category.scss @@ -126,6 +126,10 @@ max-width: 125px; overflow-y: hidden; @extend %nowrap; + + &.ghosty-blue { + color: #00AEF0; + } } } .checkbox-container { diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index d3a754330..505104928 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -27,10 +27,13 @@ font-weight: 400; color: #4a4a4a; @extend %nowrap; - &.data-point { + &.unknown { pointer-events: none; cursor: default; } + &.is-whitelisted { + color: #00AEF0; + } } .trk-cliqz-stats-outer-container { // prevent jitter from breaking to new line @@ -131,6 +134,57 @@ display: block; } } + + .unknown-svg-container { + position: relative; + top: 3px; + width: 42px; + display: flex; + align-items: center; + justify-content: space-between; + + &:not(.whitelisted) { + .anti-track-trust { + visibility: hidden; + cursor: pointer; + .border { stroke: #d8d8d8; } + .background { fill: #f7f7f7; } + .trust-circle { stroke: #9B9B9B; } + } + + .anti-track-scrub { + pointer-events: none; + } + } + + &.whitelisted { + flex-direction: row-reverse; + + .anti-track-trust { + pointer-events: none; + } + .anti-track-scrub { + visibility: hidden; + pointer-events: auto; + cursor: pointer; + .border { stroke: #d8d8d8; } + .background { fill: #f7f7f7; } + .shield { stroke: #9B9B9B; } + } + } + + &:hover { + .anti-track-trust { + visibility: visible; + } + } + + &.whitelisted:hover { + .anti-track-scrub { + visibility: visible; + } + } + } } // SVG icons shared with _blocking_category From fa3bc8430cd210db0c92bcdcb2c9c6c74ff01238 Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Mon, 22 Jul 2019 11:49:01 -0400 Subject: [PATCH 12/17] Fix whitelisting UI bug, hide block all button for Unknown category, use tracker total for Donut Graph --- ...{unknown.svg => anti_tracking_unknown.svg} | 0 .../panel/white-shield-svg-path-copy.svg | 3 - app/panel/actions/BlockingActions.js | 8 +- app/panel/components/Blocking.jsx | 2 +- .../components/Blocking/BlockingHeader.jsx | 19 +- app/panel/components/Blocking/Categories.jsx | 23 ++- app/panel/components/Blocking/Category.jsx | 2 +- .../components/Blocking/OtherDataPoint.jsx | 193 ------------------ .../components/BuildingBlocks/DonutGraph.jsx | 12 +- app/panel/constants/constants.js | 2 +- app/panel/reducers/blocking.js | 10 +- app/panel/reducers/summary.js | 9 +- app/scss/partials/_blocking_header.scss | 2 + src/utils/cliqzModulesData.js | 35 ++-- 14 files changed, 70 insertions(+), 250 deletions(-) rename app/images/panel/{unknown.svg => anti_tracking_unknown.svg} (100%) delete mode 100644 app/images/panel/white-shield-svg-path-copy.svg delete mode 100644 app/panel/components/Blocking/OtherDataPoint.jsx diff --git a/app/images/panel/unknown.svg b/app/images/panel/anti_tracking_unknown.svg similarity index 100% rename from app/images/panel/unknown.svg rename to app/images/panel/anti_tracking_unknown.svg diff --git a/app/images/panel/white-shield-svg-path-copy.svg b/app/images/panel/white-shield-svg-path-copy.svg deleted file mode 100644 index 86ee004b7..000000000 --- a/app/images/panel/white-shield-svg-path-copy.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/panel/actions/BlockingActions.js b/app/panel/actions/BlockingActions.js index 360b044c7..5e4c273f9 100644 --- a/app/panel/actions/BlockingActions.js +++ b/app/panel/actions/BlockingActions.js @@ -15,12 +15,12 @@ import { UPDATE_BLOCKING_DATA, UPDATE_BLOCK_ALL_TRACKERS, UPDATE_CATEGORIES, + UPDATE_ANTI_TRACKING_HIDE, UPDATE_CATEGORY_BLOCKED, UPDATE_TRACKER_BLOCKED, UPDATE_TRACKER_TRUST_RESTRICT, UPDATE_ANTI_TRACKING_WHITELIST, - TOGGLE_EXPAND_ALL, - UPDATE_ANTI_TRACKING_NUM_SHOWN + TOGGLE_EXPAND_ALL } from '../constants/constants'; /** @@ -64,9 +64,9 @@ export function updateCategories(data) { * @param {Object} data * @return {Object} */ -export function updateAntiTrackingNumShown(data) { +export function updateAntiTrackingHide(data) { return { - type: UPDATE_ANTI_TRACKING_NUM_SHOWN, + type: UPDATE_ANTI_TRACKING_HIDE, data, }; } diff --git a/app/panel/components/Blocking.jsx b/app/panel/components/Blocking.jsx index 86d83fbce..a26c4c2fe 100644 --- a/app/panel/components/Blocking.jsx +++ b/app/panel/components/Blocking.jsx @@ -114,7 +114,7 @@ class Blocking extends React.Component { updatedAntiTracking.hide = !(filterName === 'all' || filterName === 'unknown'); this.props.actions.updateCategories(updated_categories); - this.props.actions.updateAntiTrackingNumShown(updatedAntiTracking); + this.props.actions.updateAntiTrackingHide(updatedAntiTracking); } /** diff --git a/app/panel/components/Blocking/BlockingHeader.jsx b/app/panel/components/Blocking/BlockingHeader.jsx index ab059af79..6bd2e6e5a 100644 --- a/app/panel/components/Blocking/BlockingHeader.jsx +++ b/app/panel/components/Blocking/BlockingHeader.jsx @@ -32,6 +32,7 @@ class BlockingHeader extends React.Component { filtered: false, searchValue: '', filterMenuOpened: false, + blockAllDisabled: true, }; // event bindings @@ -93,7 +94,12 @@ class BlockingHeader extends React.Component { }); }); if (this.state.fromHere || totalShown === totalBlocked || totalBlocked === 0) { - this.setState({ allBlocked: (totalShown === totalBlocked), filtered, fromHere: false }); + this.setState({ + allBlocked: (totalShown === totalBlocked), + blockAllDisabled: !totalShown, + fromHere: false, + filtered + }); } } } @@ -256,9 +262,14 @@ class BlockingHeader extends React.Component {
- {this.props.categories && this.props.categories.length > 0 && -
{blockText}
- } + {this.props.categories && this.props.categories.length > 0 && ( +
+ {blockText} +
+ )}
{ diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index c79ade4ee..377ad36d5 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -57,35 +57,36 @@ class Categories extends React.Component { /> )); + // Change name to UnknownCategory const otherDataPointsCategory = antiTracking.unknownTrackers.length ? ( ({ - id: 'unknown', + id: 'anti_tracking_unknown', name: 'Unknown', description: 'Unknown trackers scrubbed by Anti-Tracking', - img_name: 'unknown', + img_name: 'anti_tracking_unknown', num_total: antiTracking.unknownTrackers.length, num_blocked: antiTracking.unknownTrackerCount, num_shown: antiTracking.hide ? 0 : antiTracking.unknownTrackers.length, - trackers: antiTracking.unknownTrackers.map((otherDataPoint, idx) => ({ - name: otherDataPoint.name, - domains: otherDataPoint.domains, - whitelisted: otherDataPoint.whitelisted, + trackers: antiTracking.unknownTrackers.map((unknownTracker, idx) => ({ + name: unknownTracker.name, + domains: unknownTracker.domains, + whitelisted: unknownTracker.whitelisted, blocked: false, - catId: 'other_data_points', + catId: 'anti_tracking_unknown', description: '', id: 100000000 + idx, shouldShow: true, - cliqzAdCount: otherDataPoint.ads, - cliqzCookieCount: otherDataPoint.cookies, - cliqzFingerprintCount: otherDataPoint.fingerprints, + cliqzAdCount: unknownTracker.ads, + cliqzCookieCount: unknownTracker.cookies, + cliqzFingerprintCount: unknownTracker.fingerprints, })), }))()} actions={this.props.actions} - key="other_data_points" + key="anti_tracking_unknown" filtered={filtered} showToast={this.props.showToast} show_tracker_urls={this.props.show_tracker_urls} diff --git a/app/panel/components/Blocking/Category.jsx b/app/panel/components/Blocking/Category.jsx index 1ba87a51e..aad1d2897 100644 --- a/app/panel/components/Blocking/Category.jsx +++ b/app/panel/components/Blocking/Category.jsx @@ -170,7 +170,7 @@ class Category extends React.Component { } = this.props; const globalBlocking = !!this.props.globalBlocking; - const isUnknown = category.id === 'unknown'; + const isUnknown = category.id === 'anti_tracking_unknown'; const checkBoxStyle = `${(this.state.totalShownBlocked && this.state.allShownBlocked) ? 'all-blocked ' : (this.state.totalShownBlocked ? 'some-blocked ' : '')} checkbox-container`; const caretClasses = (this.state.isExpanded ? 'caret-up' : 'caret-down') + (isUnknown ? ' Category__antiTrackingCaret' : ''); diff --git a/app/panel/components/Blocking/OtherDataPoint.jsx b/app/panel/components/Blocking/OtherDataPoint.jsx deleted file mode 100644 index f6ae82de7..000000000 --- a/app/panel/components/Blocking/OtherDataPoint.jsx +++ /dev/null @@ -1,193 +0,0 @@ -/** - * Tracker Component - * - * Ghostery Browser Extension - * https://www.ghostery.com/ - * - * Copyright 2019 Ghostery, Inc. All rights reserved. - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0 - */ - -/* eslint react/no-array-index-key: 0 */ - -import React from 'react'; -import ReactSVG from 'react-svg'; - -/** - * @class Implement Tracker component which represents single tracker - * in the Blocking view. - * @memberOf BlockingComponents - */ -class OtherDataPoint extends React.Component { - constructor(props) { - super(props); - this.state = { trackerClasses: '' }; - - this.handleAntiTrackingWhitelist = this.handleAntiTrackingWhitelist.bind(this); - } - - /** - * Lifecycle event. - */ - componentWillMount() { - this.updateTrackerClasses(this.props.tracker); - } - - /** - * Lifecycle event. - */ - componentWillReceiveProps(nextProps) { - this.updateTrackerClasses(nextProps.tracker); - } - - /** - * Set dynamic classes on .blocking-trk and save it in state. - * @param {Object} tracker tracker object - */ - updateTrackerClasses(tracker) { - const classes = []; - classes.push((tracker.blocked) ? 'blocked' : ''); - classes.push((tracker.ss_allowed) ? 'individual-trust' : ''); - - this.setState({ - trackerClasses: classes.join(' '), - }); - } - - /** - * 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; - - const oneOrMoreCookies = cliqzCookieCount >= 1; - const oneOrMoreFingerprints = cliqzFingerprintCount >= 1; - const oneOrMoreAds = cliqzAdCount >= 1; - - return ( -
- {(oneOrMoreCookies || oneOrMoreFingerprints) && ( -
- {this._renderCliqzCookiesAndFingerprintsIcon()} - {oneOrMoreCookies && this._renderCliqzCookieStat(cliqzCookieCount)} - {oneOrMoreFingerprints && this._renderCliqzFingerprintStat(cliqzFingerprintCount)} -
- )} - {oneOrMoreAds && ( -
- {this._renderCliqzAdsIcon()} - {this._renderCliqzAdStat(cliqzAdCount)} -
- )} -
- ); - } - - _renderCliqzCookiesAndFingerprintsIcon() { return this._renderCliqzStatsIcon('cookies-and-fingerprints'); } - - _renderCliqzAdsIcon() { return this._renderCliqzStatsIcon('ads'); } - - _renderCliqzStatsIcon(type) { - const path = `/app/images/panel/tracker-detail-cliqz-${type}-icon.svg`; - - return ( - - ); - } - - _renderCliqzCookieStat(count) { return this._renderCliqzStat(count, 'cookie'); } - - _renderCliqzFingerprintStat(count) { return this._renderCliqzStat(count, 'fingerprint'); } - - _renderCliqzAdStat(count) { return this._renderCliqzStat(count, 'ad'); } - - _renderCliqzStat(count, type) { - const exactlyOne = count === 1; - const label = exactlyOne ? - t(`${type}`) : - t(`${type}s`); - const cssClass = `trk-cliqz-stat trk-cliqz-stat-${type}s-count`; - - return ( - - {count} - {' '} - {label} - - ); - } - - /** - * Render a tracker in Blocking view. - * @return {ReactComponent} ReactComponent instance - */ - render() { - const { tracker } = this.props; - - return ( -
-
-
-
{ tracker.name }
- {this._renderCliqzStatsContainer()} -
-
-
- - {/* USE INLINE SVG FOR TRUST CIRCLE TO CHANGE COLORS WITH CSS */} - - - - - - - - - - - - - {/* USE INLINE SVG FOR ANTI-TRACKING SHIELD TO CHANGE COLORS WITH CSS */} - - - - - - - - - - - - - - -
-
-
-
- ); - } -} - -OtherDataPoint.defaultProps = { - tracker: {}, -}; - -export default OtherDataPoint; diff --git a/app/panel/components/BuildingBlocks/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx index 63302cddd..71e52bc6a 100644 --- a/app/panel/components/BuildingBlocks/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx @@ -128,9 +128,9 @@ class DonutGraph extends React.Component { return; } - if (!antiTracking.totalUnknownCount && !nextProps.antiTracking.totalUnknownCount) { return; } - const unknownDataPoints = antiTracking.totalUnknownCount; - const nextUnknownDataPoints = nextProps.antiTracking.totalUnknownCount; + if (!antiTracking.unknownTrackerCount && !nextProps.antiTracking.unknownTrackerCount) { return; } + const unknownDataPoints = antiTracking.unknownTrackerCount; + const nextUnknownDataPoints = nextProps.antiTracking.unknownTrackerCount; if (unknownDataPoints !== nextUnknownDataPoints) { this.nextPropsDonut(nextProps); } @@ -221,11 +221,11 @@ class DonutGraph extends React.Component { graphData.sort((a, b) => a.value < b.value); } - if (antiTracking.totalUnknownCount) { + if (antiTracking.unknownTrackerCount) { graphData.push({ id: 'unknown', name: 'Unknown', - value: antiTracking.totalUnknownCount, + value: antiTracking.unknownTrackerCount, }); } @@ -359,7 +359,7 @@ class DonutGraph extends React.Component { {cat.name} ))} - {!!antiTracking.totalUnknownCount && ( + {!!antiTracking.unknownTrackerCount && ( { case UPDATE_CATEGORIES: { return Object.assign({}, state, { categories: action.data }); } + case UPDATE_ANTI_TRACKING_HIDE: { + return Object.assign({}, state, { antiTracking: action.data }); + } case UPDATE_CATEGORY_BLOCKED: { const updated = updateCategoryBlocked(state, action); return Object.assign({}, state, updated); @@ -103,9 +106,6 @@ export default (state = initialState, action) => { antiTracking: Object.assign({}, action.data.antiTracking, { hide }) }); } - case UPDATE_ANTI_TRACKING_NUM_SHOWN: { - return Object.assign({}, state, { antiTracking: action.data }); - } default: return state; } diff --git a/app/panel/reducers/summary.js b/app/panel/reducers/summary.js index acf74ded9..1aef810d4 100644 --- a/app/panel/reducers/summary.js +++ b/app/panel/reducers/summary.js @@ -37,8 +37,9 @@ const initialState = { }, tab_id: 0, antiTracking: { - totalUnsafeCount: 0, - totalUnknownCount: 0, + totalUnsafeCount: 0, // The amount of data points scrubbed by Anti-Tracking + totalUnknownCount: 0, // The amount of data points scrubbed by Anti-Tracking for Trackers not in the Ghostery DB + unknownTrackerCount: 0, // The amount of trackers blocked by Anti-Tracking } }; /** @@ -55,10 +56,10 @@ export default (state = initialState, action) => { return Object.assign({}, state, action.data); } case UPDATE_CLIQZ_MODULE_DATA: { - const { totalUnsafeCount, totalUnknownCount } = action.data.antiTracking; + const { totalUnsafeCount, totalUnknownCount, unknownTrackerCount } = action.data.antiTracking; return Object.assign({}, state, { adBlock: action.data.adblock, - antiTracking: { totalUnsafeCount, totalUnknownCount }, + antiTracking: { totalUnsafeCount, totalUnknownCount, unknownTrackerCount }, }); } case UPDATE_GHOSTERY_PAUSED: { diff --git a/app/scss/partials/_blocking_header.scss b/app/scss/partials/_blocking_header.scss index 1c8a43972..5962e457d 100644 --- a/app/scss/partials/_blocking_header.scss +++ b/app/scss/partials/_blocking_header.scss @@ -61,6 +61,8 @@ line-height: 19px; &.disabled { color: #acacac; + pointer-events: none; + visibility: hidden; } } .caret-down { diff --git a/src/utils/cliqzModulesData.js b/src/utils/cliqzModulesData.js index db8d30623..84b8f2282 100644 --- a/src/utils/cliqzModulesData.js +++ b/src/utils/cliqzModulesData.js @@ -22,7 +22,6 @@ const { adblocker, antitracking } = cliqz.modules; /** * Get the totalUnsafeCount of trackers found by Anti-Tracking on this tabId -<<<<<<< HEAD * @memberOf BackgroundUtils * @param {int} tabId * @return {object} totalUnsafeCount @@ -50,29 +49,31 @@ export function getCliqzAntiTrackingData(tabId, tabHostUrl) { } for (const other of othersValues) { - if (other.cookies || other.fingerprints) { + let whitelisted = false; + const scrubbed = other.cookies || other.fingerprints; + + other.domains.some((domain) => { + if (conf.anti_tracking_whitelist[domain] + && conf.anti_tracking_whitelist[domain].hosts.includes(tabHostUrl)) { + whitelisted = true; + return true; + } + return false; + }); + + if (scrubbed) { totalUnsafeCount += other.cookies + other.fingerprints; totalUnknownCount += other.cookies + other.fingerprints; unknownTrackerCount += 1; + } + + if (scrubbed || whitelisted) { const { name, domains, ads, cookies, fingerprints } = other; + unknownTrackers.push({ - name, domains, ads, cookies, fingerprints, whitelisted: false - }); - } else { - other.domains.some((domain) => { - if (conf.anti_tracking_whitelist[domain] - && conf.anti_tracking_whitelist[domain].hosts.includes(tabHostUrl)) { - const { - name, domains, ads, cookies, fingerprints - } = other; - unknownTrackers.push({ - name, domains, ads, cookies, fingerprints, whitelisted: true - }); - return true; - } - return false; + name, domains, ads, cookies, fingerprints, whitelisted }); } } From a07526ee96f075a244b73275964dc3e21682a842 Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Mon, 22 Jul 2019 13:07:59 -0400 Subject: [PATCH 13/17] Add expansion functionality, refactory Categories component --- app/panel/components/Blocking/Categories.jsx | 105 +++++++++---------- app/panel/components/Blocking/Category.jsx | 6 +- app/panel/components/Blocking/Tracker.jsx | 23 ++-- app/scss/partials/_blocking_tracker.scss | 8 +- 4 files changed, 72 insertions(+), 70 deletions(-) diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index 377ad36d5..5a9003070 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -38,32 +38,10 @@ class Categories extends React.Component { const globalBlocking = !!this.props.globalBlocking; const filtered = !!this.props.filtered; - const categoryList = categories.map((cat, index) => ( - - )); - - // Change name to UnknownCategory - const otherDataPointsCategory = antiTracking.unknownTrackers.length ? ( - ({ + const renderCategory = (category, index, isUnknown) => { + let whitelistedTotal = 0; + const unknownCategoryMapping = isUnknown ? ( + { id: 'anti_tracking_unknown', name: 'Unknown', description: 'Unknown trackers scrubbed by Anti-Tracking', @@ -71,38 +49,57 @@ class Categories extends React.Component { num_total: antiTracking.unknownTrackers.length, num_blocked: antiTracking.unknownTrackerCount, num_shown: antiTracking.hide ? 0 : antiTracking.unknownTrackers.length, - trackers: antiTracking.unknownTrackers.map((unknownTracker, idx) => ({ - name: unknownTracker.name, - domains: unknownTracker.domains, - whitelisted: unknownTracker.whitelisted, - blocked: false, - catId: 'anti_tracking_unknown', - description: '', - id: 100000000 + idx, - shouldShow: true, - cliqzAdCount: unknownTracker.ads, - cliqzCookieCount: unknownTracker.cookies, - cliqzFingerprintCount: unknownTracker.fingerprints, - })), - }))()} - actions={this.props.actions} - key="anti_tracking_unknown" - 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} - enable_anti_tracking={enable_anti_tracking} - /> - ) : null; + trackers: antiTracking.unknownTrackers.map((unknownTracker, idx) => { + if (unknownTracker.whitelisted) { whitelistedTotal++; } + return { + name: unknownTracker.name, + domains: unknownTracker.domains, + whitelisted: unknownTracker.whitelisted, + blocked: false, + catId: 'anti_tracking_unknown', + description: '', + id: 100000000 + idx, + shouldShow: true, + cliqzAdCount: unknownTracker.ads, + cliqzCookieCount: unknownTracker.cookies, + cliqzFingerprintCount: unknownTracker.fingerprints, + }; + }), + whitelistedTotal, + } + ) : null; + console.log(whitelistedTotal) + + return ( + + ); + }; + + const categoryList = categories.map((category, index) => renderCategory(category, index)); + const unknownCategory = antiTracking.unknownTrackers.length + ? renderCategory(null, categoryList.length, true) : null; return (
{categoryList} - {otherDataPointsCategory} + {unknownCategory}
); } diff --git a/app/panel/components/Blocking/Category.jsx b/app/panel/components/Blocking/Category.jsx index aad1d2897..c28b14271 100644 --- a/app/panel/components/Blocking/Category.jsx +++ b/app/panel/components/Blocking/Category.jsx @@ -167,10 +167,10 @@ class Category extends React.Component { sitePolicy, enable_anti_tracking, actions, + isUnknown, } = this.props; const globalBlocking = !!this.props.globalBlocking; - const isUnknown = category.id === 'anti_tracking_unknown'; const checkBoxStyle = `${(this.state.totalShownBlocked && this.state.allShownBlocked) ? 'all-blocked ' : (this.state.totalShownBlocked ? 'some-blocked ' : '')} checkbox-container`; const caretClasses = (this.state.isExpanded ? 'caret-up' : 'caret-down') + (isUnknown ? ' Category__antiTrackingCaret' : ''); @@ -231,10 +231,10 @@ class Category extends React.Component {
{((!isUnknown && !!trackersBlockedCount) - || (isUnknown && category.num_blocked !== category.num_total)) && ( + || (isUnknown && !!category.whitelistedTotal)) && (
- {isUnknown ? category.num_total - category.num_blocked : `${trackersBlockedCount} `} + {isUnknown ? category.whitelistedTotal : `${trackersBlockedCount} `} {isUnknown ? ' WHITELISTED' : t('blocking_category_blocked') } diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index e462da94f..c71926b8d 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -309,10 +309,13 @@ class Tracker extends React.Component { { source.src } )); + } else if (tracker.domains) { + sources = tracker.domains.map((domain, index) => ( +

{domain}

+ )); } const trackerNameClasses = ClassNames('trk-name', { - unknown: isUnknown, 'is-whitelisted': tracker.whitelisted, }); @@ -347,16 +350,18 @@ class Tracker extends React.Component { {this.state.showMoreInfo && (
-
- { this.state.description } - + )}
-
{ t('panel_tracker_found_sources_title') }
+
{isUnknown ? 'Dectected unknown tracker URLs' : t('panel_tracker_found_sources_title') }
{ sources }
diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index 505104928..33b5af48c 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -27,10 +27,6 @@ font-weight: 400; color: #4a4a4a; @extend %nowrap; - &.unknown { - pointer-events: none; - cursor: default; - } &.is-whitelisted { color: #00AEF0; } @@ -115,6 +111,10 @@ margin-right: 10px; overflow-y: hidden; @extend %nowrap; + &.unknown { + margin: 0 10px 0 0; + color: #4a4a4a; + } } } svg.blocking-icons { From c0995c22bf877e4088203db09dcb88d835759be8 Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Mon, 22 Jul 2019 17:10:02 -0400 Subject: [PATCH 14/17] Move strings into translation library --- _locales/en/messages.json | 16 ++++++++++++++++ app/panel/components/Blocking/Categories.jsx | 5 ++--- app/panel/components/Blocking/Category.jsx | 19 +++++++++---------- app/panel/components/Blocking/Tracker.jsx | 2 +- .../Blocking/trackerButtonRenderHelpers.jsx | 4 ++-- .../components/BuildingBlocks/DonutGraph.jsx | 2 +- 6 files changed, 31 insertions(+), 17 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index bd019b4ee..c4da83e77 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -525,6 +525,10 @@ "description": "as in '5 (trackers) BLOCKED'", "message": "Blocked" }, + "blocking_category_whitelisted": { + "description": "as in '5 (trackers) WHITELISTED'", + "message": "Whitelisted" + }, "panel_create_account": { "message": "Create Account" }, @@ -717,6 +721,9 @@ "panel_tracker_trust_tooltip": { "message": "Trust on this site" }, + "panel_tracker_scrub_tooltip": { + "message": "Scrub on this site" + }, "panel_detail_menu_list_title": { "message": "List View" }, @@ -2247,5 +2254,14 @@ }, "ghostery_rewards": { "message": "ghostery rewards" + }, + "enhanced_anti_tracking": { + "message": "Enhanced Anti-Tracking" + }, + "unknown": { + "message": "Unknown" + }, + "unknown_description": { + "message": "Unknown trackers scrubbed by Anti-Tracking" } } diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index 5a9003070..9578f0e8d 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -43,8 +43,8 @@ class Categories extends React.Component { const unknownCategoryMapping = isUnknown ? ( { id: 'anti_tracking_unknown', - name: 'Unknown', - description: 'Unknown trackers scrubbed by Anti-Tracking', + name: t('unknown'), + description: t('unknown_description'), img_name: 'anti_tracking_unknown', num_total: antiTracking.unknownTrackers.length, num_blocked: antiTracking.unknownTrackerCount, @@ -68,7 +68,6 @@ class Categories extends React.Component { whitelistedTotal, } ) : null; - console.log(whitelistedTotal) return (

- Enhanced Anti-Tracking + {t('enhanced_anti_tracking')}

)} @@ -212,19 +212,18 @@ class Category extends React.Component {
- { category.name } + {category.name}
- { - this.props.filtered && ( - - t(`blocking_category_tracker_found`) - - )} + {this.props.filtered && ( + + {t('blocking_category_tracker_found')} + + )} {`${category.num_total} `} { (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') } @@ -234,10 +233,10 @@ class Category extends React.Component { || (isUnknown && !!category.whitelistedTotal)) && (
- {isUnknown ? category.whitelistedTotal : `${trackersBlockedCount} `} + {isUnknown ? `${category.whitelistedTotal} ` : `${trackersBlockedCount} `} - {isUnknown ? ' WHITELISTED' : t('blocking_category_blocked') } + {isUnknown ? t('blocking_category_whitelisted') : t('blocking_category_blocked') }
)} diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index c71926b8d..6eeb073a5 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -361,7 +361,7 @@ class Tracker extends React.Component {
)}
-
{isUnknown ? 'Dectected unknown tracker URLs' : t('panel_tracker_found_sources_title') }
+
{t('panel_tracker_found_sources_title')}
{ sources }
diff --git a/app/panel/components/Blocking/trackerButtonRenderHelpers.jsx b/app/panel/components/Blocking/trackerButtonRenderHelpers.jsx index e106f40d2..2ea712a7c 100644 --- a/app/panel/components/Blocking/trackerButtonRenderHelpers.jsx +++ b/app/panel/components/Blocking/trackerButtonRenderHelpers.jsx @@ -59,7 +59,7 @@ export const renderUnknownTrackerButtons = (handleAntiTrackingWhitelist, whiteli return (
{/* USE INLINE SVG FOR TRUST CIRCLE TO CHANGE COLORS WITH CSS */} - + @@ -72,7 +72,7 @@ export const renderUnknownTrackerButtons = (handleAntiTrackingWhitelist, whiteli {/* USE INLINE SVG FOR ANTI-TRACKING SHIELD TO CHANGE COLORS WITH CSS */} - + diff --git a/app/panel/components/BuildingBlocks/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx index 71e52bc6a..f22a79e84 100644 --- a/app/panel/components/BuildingBlocks/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx @@ -365,7 +365,7 @@ class DonutGraph extends React.Component { id="unknown_tooltip" key="unknown" > - Unknown + {t('unknown')} )}
From d14fca60a863298e95dec7b780179d88197e9c23 Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Mon, 22 Jul 2019 17:39:24 -0400 Subject: [PATCH 15/17] Update Summary reducer tests --- app/panel/reducers/__tests__/summary.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/app/panel/reducers/__tests__/summary.js b/app/panel/reducers/__tests__/summary.js index fe34442fa..1e92bf2f3 100644 --- a/app/panel/reducers/__tests__/summary.js +++ b/app/panel/reducers/__tests__/summary.js @@ -35,6 +35,11 @@ const initialState = Immutable({ blocked: 0, }, tab_id: 0, + antiTracking: { + totalUnsafeCount: 0, + totalUnknownCount: 0, + unknownTrackerCount: 0, + }, }); describe('app/panel/reducers/summary.js', () => { @@ -57,11 +62,10 @@ describe('app/panel/reducers/summary.js', () => { changedData: true, newData: true }, - antitracking: { - totalUnsafeCount: 3, - unchangedData: false, - changedData: true, - newData: true + antiTracking: { + totalUnsafeCount: 5, + totalUnknownCount: 3, + unknownTrackerCount: 1 } }; const action = { data, type: UPDATE_CLIQZ_MODULE_DATA }; @@ -73,16 +77,18 @@ describe('app/panel/reducers/summary.js', () => { }, antiTracking: { totalUnsafeCount: 1, - unchangedData: false, - changedData: false + totalUnknownCount: 0, + unknownTrackerCount: 0 } }); const updatedState = Immutable.merge(initState, { adBlock: data.adblock, - antiTracking: data.antitracking + antiTracking: data.antiTracking }); + console.log('~~~~~~~~~~~~', summaryReducer(initState, action)); + expect(summaryReducer(initState, action)).toEqual(updatedState); }); From ccdc37565d1bb062c16205ad024be799075415ac Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Mon, 22 Jul 2019 17:42:03 -0400 Subject: [PATCH 16/17] Remove console.log from Summary reducer test --- app/panel/reducers/__tests__/summary.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/panel/reducers/__tests__/summary.js b/app/panel/reducers/__tests__/summary.js index 1e92bf2f3..412422c68 100644 --- a/app/panel/reducers/__tests__/summary.js +++ b/app/panel/reducers/__tests__/summary.js @@ -87,8 +87,6 @@ describe('app/panel/reducers/summary.js', () => { antiTracking: data.antiTracking }); - console.log('~~~~~~~~~~~~', summaryReducer(initState, action)); - expect(summaryReducer(initState, action)).toEqual(updatedState); }); From 208d47597dcefa6ee2fae0d019eef4787d414f14 Mon Sep 17 00:00:00 2001 From: Ethan Gooding Date: Tue, 23 Jul 2019 17:55:19 -0400 Subject: [PATCH 17/17] Fix Settings breakage with antiTracking variable short circuit, fix occasional bug with unwhitelisting --- app/panel/components/Blocking/Categories.jsx | 6 +++--- app/panel/components/Blocking/Tracker.jsx | 6 +++--- app/panel/reducers/blocking.js | 2 ++ 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/app/panel/components/Blocking/Categories.jsx b/app/panel/components/Blocking/Categories.jsx index 9578f0e8d..db1605fee 100644 --- a/app/panel/components/Blocking/Categories.jsx +++ b/app/panel/components/Blocking/Categories.jsx @@ -49,7 +49,7 @@ class Categories extends React.Component { num_total: antiTracking.unknownTrackers.length, num_blocked: antiTracking.unknownTrackerCount, num_shown: antiTracking.hide ? 0 : antiTracking.unknownTrackers.length, - trackers: antiTracking.unknownTrackers.map((unknownTracker, idx) => { + trackers: antiTracking.unknownTrackers.map((unknownTracker) => { if (unknownTracker.whitelisted) { whitelistedTotal++; } return { name: unknownTracker.name, @@ -58,7 +58,7 @@ class Categories extends React.Component { blocked: false, catId: 'anti_tracking_unknown', description: '', - id: 100000000 + idx, + id: unknownTracker.name + unknownTracker.domains[0], shouldShow: true, cliqzAdCount: unknownTracker.ads, cliqzCookieCount: unknownTracker.cookies, @@ -92,7 +92,7 @@ class Categories extends React.Component { }; const categoryList = categories.map((category, index) => renderCategory(category, index)); - const unknownCategory = antiTracking.unknownTrackers.length + const unknownCategory = antiTracking && antiTracking.unknownTrackers.length ? renderCategory(null, categoryList.length, true) : null; return ( diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index 6eeb073a5..da04eae41 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -352,17 +352,17 @@ class Tracker extends React.Component {
{!isUnknown && (
- { this.state.description } + {this.state.description}
)}
{t('panel_tracker_found_sources_title')}
-
{ sources }
+
{sources}
diff --git a/app/panel/reducers/blocking.js b/app/panel/reducers/blocking.js index 61f4b2339..c47e5fcbd 100644 --- a/app/panel/reducers/blocking.js +++ b/app/panel/reducers/blocking.js @@ -205,6 +205,8 @@ const _updateAntiTrackingWhitelist = (state, action) => { }; const removeFromWhitelist = (domain) => { + if (!whitelistedUrls[domain]) { return; } + whitelistedUrls[domain].hosts = whitelistedUrls[domain].hosts.filter(hostUrl => ( hostUrl !== pageHost ));