From 80c2ce907455f60a758f0024685bdc492ced8808 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 30 Apr 2019 14:19:36 -0400 Subject: [PATCH 01/19] Experiment with getGhosteryStats antitrack action --- src/utils/cliqzModulesData.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/utils/cliqzModulesData.js b/src/utils/cliqzModulesData.js index 57cc2512f..f9de5e441 100644 --- a/src/utils/cliqzModulesData.js +++ b/src/utils/cliqzModulesData.js @@ -25,8 +25,9 @@ export function getCliqzAntitrackingData(tabId) { }); } - antitracking.background.actions.aggregatedBlockingStats(tabId).then((antitrackingData) => { - let totalUnsafeCount = 0; + // antitracking.background.actions.aggregatedBlockingStats(tabId).then((antitrackingData) => { + antitracking.background.actions.getGhosteryStats(tabId).then((antitrackingData) => { + let totalUnsafeCount = 0; for (const category in antitrackingData) { if (antitrackingData.hasOwnProperty(category)) { for (const app in antitrackingData[category]) { @@ -37,6 +38,10 @@ export function getCliqzAntitrackingData(tabId) { } } antitrackingData.totalUnsafeCount = totalUnsafeCount; + + console.error('Object returned by Cliqz antitracking.background.actions.getGhosteryStats(tabId)'); + console.error(antitrackingData); + resolve(antitrackingData); }).catch(() => { resolve({ From 7dda52254d97629d12b1663d8b1e29fb2163efdb Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 30 Apr 2019 18:37:32 -0400 Subject: [PATCH 02/19] Work on reconciling data returned by getGhosteryStats with our categories array data --- app/panel/components/Blocking.jsx | 8 +++++++ src/classes/PanelData.js | 5 ++++- src/utils/cliqzModulesData.js | 36 +++++++++++++++++++++++++------ 3 files changed, 42 insertions(+), 7 deletions(-) diff --git a/app/panel/components/Blocking.jsx b/app/panel/components/Blocking.jsx index be118bd50..fd33e852d 100644 --- a/app/panel/components/Blocking.jsx +++ b/app/panel/components/Blocking.jsx @@ -216,6 +216,14 @@ class Blocking extends React.Component { handlePortMessage(msg) { if (msg.to !== 'blocking' || !msg.body) { return; } + if (msg.body.bugs) { + console.error('Cliqz Ghostery Stats received by Blocking component'); + console.error(msg.body); + } else { + console.error('Categories array received by Blocking component:'); + console.error(msg.body.categories); + } + this.props.actions.updateBlockingData(msg.body); } diff --git a/src/classes/PanelData.js b/src/classes/PanelData.js index a60fdb605..5af889852 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 { sendCliqzModulesData } from '../utils/cliqzModulesData'; +import { getCliqzGhosteryStats, sendCliqzModulesData } from '../utils/cliqzModulesData'; import { getActiveTab, flushChromeMemoryCache, processUrl } from '../utils/utils'; import { objectEntries, log } from '../utils/common'; @@ -110,6 +110,8 @@ class PanelData { case 'BlockingComponentDidMount': this._mountedComponents.blocking = true; this._setTrackerListAndCategories(); + console.error(getCliqzGhosteryStats(tab.id)); + this._postMessage('blocking', getCliqzGhosteryStats(tab.id)); this._postMessage('blocking', this._getBlockingData()); break; case 'BlockingComponentWillUnmount': @@ -223,6 +225,7 @@ class PanelData { } if (blocking) { + // this._postMessage('blocking', getCliqzGhosteryStats(this._activeTab.id)); this._postMessage('blocking', this._getDynamicBlockingData()); } diff --git a/src/utils/cliqzModulesData.js b/src/utils/cliqzModulesData.js index f9de5e441..d91a5830c 100644 --- a/src/utils/cliqzModulesData.js +++ b/src/utils/cliqzModulesData.js @@ -25,8 +25,7 @@ export function getCliqzAntitrackingData(tabId) { }); } - // antitracking.background.actions.aggregatedBlockingStats(tabId).then((antitrackingData) => { - antitracking.background.actions.getGhosteryStats(tabId).then((antitrackingData) => { + antitracking.background.actions.aggregatedBlockingStats(tabId).then((antitrackingData) => { let totalUnsafeCount = 0; for (const category in antitrackingData) { if (antitrackingData.hasOwnProperty(category)) { @@ -38,10 +37,6 @@ export function getCliqzAntitrackingData(tabId) { } } antitrackingData.totalUnsafeCount = totalUnsafeCount; - - console.error('Object returned by Cliqz antitracking.background.actions.getGhosteryStats(tabId)'); - console.error(antitrackingData); - resolve(antitrackingData); }).catch(() => { resolve({ @@ -62,10 +57,39 @@ export function getCliqzAdblockingData(tabId) { return adBlocking || { 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", + }, + ... + } + } + */ +export function getCliqzGhosteryStats(tabId) { + const ghosteryStats = antitracking.background.actions.getGhosteryStats(tabId); + return ghosteryStats; +} + export function sendCliqzModulesData(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; From 59663e036ab6289923cff0e91726252b1155c929 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 17:48:32 -0400 Subject: [PATCH 03/19] Increase height of tracker header to accommodate new fingerprints and cookies data --- app/panel/components/Blocking/Tracker.jsx | 4 ++++ app/scss/partials/_blocking_tracker.scss | 2 +- src/utils/cliqzModulesData.js | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index 84b839908..ab26f1bde 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -230,6 +230,10 @@ class Tracker extends React.Component {
{ tracker.name }
+
+ 5 Cookies + 1 Fingerprint +
diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index 3aef6b1a3..394c6f183 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -21,7 +21,7 @@ .trk-header { padding-top: 5px; padding-bottom: 5px; - height: 39px; + height: 61px; .trk-name { @extend %pointer; font-size: 14px; diff --git a/src/utils/cliqzModulesData.js b/src/utils/cliqzModulesData.js index d91a5830c..a984cae22 100644 --- a/src/utils/cliqzModulesData.js +++ b/src/utils/cliqzModulesData.js @@ -26,7 +26,7 @@ export function getCliqzAntitrackingData(tabId) { } antitracking.background.actions.aggregatedBlockingStats(tabId).then((antitrackingData) => { - let totalUnsafeCount = 0; + let totalUnsafeCount = 0; for (const category in antitrackingData) { if (antitrackingData.hasOwnProperty(category)) { for (const app in antitrackingData[category]) { From 4810c57cccb0deaa37935e637990f947eb71dddf Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 18:54:06 -0400 Subject: [PATCH 04/19] Add color to fingerprints and cookies readouts --- app/panel/components/Blocking/Tracker.jsx | 6 +++--- app/scss/partials/_blocking_tracker.scss | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index ab26f1bde..0d4305eae 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -230,9 +230,9 @@ class Tracker extends React.Component {
{ tracker.name }
-
- 5 Cookies - 1 Fingerprint +
+ 5 Cookies + 1 Fingerprint
diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index 394c6f183..0d43dc3d1 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -30,6 +30,9 @@ color: #4a4a4a; @extend %nowrap; } + .trk-cliqz-stats-container { + color: #1dafed; + } .svg-container { height: 20px; } From 45c993d80021555c1aff7f77df00558d5b5adeb6 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 19:19:53 -0400 Subject: [PATCH 05/19] Add svg badge icon for fingerprints and cookies readout in tracker list --- app/images/panel/cookies-and-fingerprints-cliqz-badge.svg | 4 ++++ app/panel/components/Blocking/Tracker.jsx | 2 ++ app/scss/partials/_blocking_tracker.scss | 5 +++++ 3 files changed, 11 insertions(+) create mode 100644 app/images/panel/cookies-and-fingerprints-cliqz-badge.svg diff --git a/app/images/panel/cookies-and-fingerprints-cliqz-badge.svg b/app/images/panel/cookies-and-fingerprints-cliqz-badge.svg new file mode 100644 index 000000000..8a5c467ad --- /dev/null +++ b/app/images/panel/cookies-and-fingerprints-cliqz-badge.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index 0d4305eae..380f2c5bd 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -14,6 +14,7 @@ /* eslint react/no-array-index-key: 0 */ import React from 'react'; +import ReactSVG from 'react-svg'; import globals from '../../../../src/classes/Globals'; import { log } from '../../../../src/utils/common'; import { sendMessageInPromise } from '../../utils/msg'; @@ -231,6 +232,7 @@ class Tracker extends React.Component {
{ tracker.name }
+ 5 Cookies 1 Fingerprint
diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index 0d43dc3d1..2c075008c 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -33,6 +33,11 @@ .trk-cliqz-stats-container { color: #1dafed; } + .trk-cliqz-stat-shield-badge-svg { + display: inline-block; + padding-right: 5px; + vertical-align: middle; + } .svg-container { height: 20px; } From 9dc72c0a4d04ef7ffebaa1d34fa3c1a89db6e50e Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 22:32:22 -0400 Subject: [PATCH 06/19] Tweak tracker header padding & line height --- app/scss/partials/_blocking_tracker.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index 2c075008c..a920ece99 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -19,13 +19,11 @@ border-top: none; } .trk-header { - padding-top: 5px; - padding-bottom: 5px; height: 61px; .trk-name { @extend %pointer; font-size: 14px; - line-height: 19px; + line-height: 25px; font-weight: 400; color: #4a4a4a; @extend %nowrap; From 9d9a0f1c44d8a686ee60efd0f5f23877f2f23ed9 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 22:42:28 -0400 Subject: [PATCH 07/19] Tweak font styling for cookie and fingerprint count stats --- app/scss/partials/_blocking_tracker.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index a920ece99..5ef754703 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -30,6 +30,9 @@ } .trk-cliqz-stats-container { color: #1dafed; + font-size: 10px; + font-family: "Open Sans", "Roboto", Arial, Helvetica, sans-serif; + font-weight: 600; } .trk-cliqz-stat-shield-badge-svg { display: inline-block; From f121a23e3a5583fb647d871407b855750cb5c01a Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 22:58:06 -0400 Subject: [PATCH 08/19] Tweak cliqz cookie and fingerprint counts spacing. Factor rendering of this bit out to a render helper in Tracker component --- app/panel/components/Blocking/Tracker.jsx | 17 ++++++++++++----- app/scss/partials/_blocking_tracker.scss | 8 +++++++- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index 380f2c5bd..f6f251ad8 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -201,6 +201,17 @@ class Tracker extends React.Component { reload: true, }); } + + _renderCliqzStatsContainer() { + return ( +
+ + 5 Cookies + 1 Fingerprint +
+ ); + } + /** * Render a tracker in Blocking view. * @return {ReactComponent} ReactComponent instance @@ -231,11 +242,7 @@ class Tracker extends React.Component {
{ tracker.name }
-
- - 5 Cookies - 1 Fingerprint -
+ {this._renderCliqzStatsContainer()}
diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index 5ef754703..672a428a4 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -36,8 +36,14 @@ } .trk-cliqz-stat-shield-badge-svg { display: inline-block; - padding-right: 5px; + padding-right: 6px; vertical-align: middle; + } + .trk-cliqz-stat-cookies-count { + padding-right: 4px; + } + .trk-cliqz-stat-fingerprint-count { + } .svg-container { height: 20px; From 286f1686d5820b93edd8c8021483e0c1bda58774 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 10 Jun 2019 23:31:59 -0400 Subject: [PATCH 09/19] Implement conditional display and pluralization logic for cookie and fingerprint count readouts --- _locales/en/messages.json | 12 ++++++++++++ app/panel/components/Blocking/Tracker.jsx | 13 ++++++++++--- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c23068f07..3954e01e3 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2212,5 +2212,17 @@ }, "panel_stats_pitch_modal_tooltip": { "message": "Erase all statistics history up until this point in time." + }, + "cookie": { + "message": "Cookie" + }, + "cookies": { + "message": "Cookies" + }, + "fingerprint": { + "message": "Fingerprint" + }, + "fingerprints": { + "message": "Fingerprints" } } diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index f6f251ad8..a2133dbc1 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -203,11 +203,18 @@ class Tracker extends React.Component { } _renderCliqzStatsContainer() { + const cookieCount = Math.floor(Math.random() * 3); + const fingerprintCount = Math.floor(Math.random() * 3); + const oneOrMoreCookies = cookieCount >= 1; + const oneOrMoreFingerprints = fingerprintCount >= 1; + const oneCookie = cookieCount === 1; + const oneFingerprint = fingerprintCount === 1; + return (
- - 5 Cookies - 1 Fingerprint + {(oneOrMoreCookies || oneOrMoreFingerprints) && } + {oneOrMoreCookies && {cookieCount} {oneCookie ? t('cookie') : t('cookies')}} + {oneOrMoreFingerprints && {fingerprintCount} {oneFingerprint ? t('fingerprint') : t('fingerprints')}}
); } From 99a535aaa872e05f8bebb99f19a296530bdb3c49 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 11 Jun 2019 02:13:29 -0400 Subject: [PATCH 10/19] Implement passing of cookes and fingerprints ghostery stats from background to Tracker component and their display there --- app/panel/components/Blocking.jsx | 8 ------- app/panel/components/Blocking/Tracker.jsx | 17 +++++++------- src/classes/FoundBugs.js | 10 ++++++++ src/classes/PanelData.js | 28 ++++++++++++++++++----- 4 files changed, 41 insertions(+), 22 deletions(-) diff --git a/app/panel/components/Blocking.jsx b/app/panel/components/Blocking.jsx index fd33e852d..be118bd50 100644 --- a/app/panel/components/Blocking.jsx +++ b/app/panel/components/Blocking.jsx @@ -216,14 +216,6 @@ class Blocking extends React.Component { handlePortMessage(msg) { if (msg.to !== 'blocking' || !msg.body) { return; } - if (msg.body.bugs) { - console.error('Cliqz Ghostery Stats received by Blocking component'); - console.error(msg.body); - } else { - console.error('Categories array received by Blocking component:'); - console.error(msg.body.categories); - } - this.props.actions.updateBlockingData(msg.body); } diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index a2133dbc1..cb0f44f27 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -203,18 +203,19 @@ class Tracker extends React.Component { } _renderCliqzStatsContainer() { - const cookieCount = Math.floor(Math.random() * 3); - const fingerprintCount = Math.floor(Math.random() * 3); - const oneOrMoreCookies = cookieCount >= 1; - const oneOrMoreFingerprints = fingerprintCount >= 1; - const oneCookie = cookieCount === 1; - const oneFingerprint = fingerprintCount === 1; + const { tracker } = this.props; + const { cliqz_cookies, cliqz_fingerprints } = tracker; + + const oneOrMoreCookies = cliqz_cookies >= 1; + const oneOrMoreFingerprints = cliqz_fingerprints >= 1; + const oneCookie = cliqz_cookies === 1; + const oneFingerprint = cliqz_fingerprints === 1; return (
{(oneOrMoreCookies || oneOrMoreFingerprints) && } - {oneOrMoreCookies && {cookieCount} {oneCookie ? t('cookie') : t('cookies')}} - {oneOrMoreFingerprints && {fingerprintCount} {oneFingerprint ? t('fingerprint') : t('fingerprints')}} + {oneOrMoreCookies && {cliqz_cookies} {oneCookie ? t('cookie') : t('cookies')}} + {oneOrMoreFingerprints && {cliqz_fingerprints} {oneFingerprint ? t('fingerprint') : t('fingerprints')}}
); } diff --git a/src/classes/FoundBugs.js b/src/classes/FoundBugs.js index 759b91554..c5763c4a2 100644 --- a/src/classes/FoundBugs.js +++ b/src/classes/FoundBugs.js @@ -276,6 +276,16 @@ class FoundBugs { return apps_arr; } + getAppsById(tab_id) { + if (!this._ensure(tab_id)) { + return []; + } + + const { appsById } = this._foundApps[tab_id]; + + return appsById; + } + /** * Get the categories from BugsDb that match bugs found * on a tab_id. diff --git a/src/classes/PanelData.js b/src/classes/PanelData.js index 4d1ffa57c..a7b8f8b24 100644 --- a/src/classes/PanelData.js +++ b/src/classes/PanelData.js @@ -121,8 +121,6 @@ class PanelData { case 'BlockingComponentDidMount': this._mountedComponents.blocking = true; this._setTrackerListAndCategories(); - console.error(getCliqzGhosteryStats(tab.id)); - this._postMessage('blocking', getCliqzGhosteryStats(tab.id)); this._postMessage('blocking', this._getBlockingData()); break; case 'BlockingComponentWillUnmount': @@ -246,7 +244,6 @@ class PanelData { } if (blocking) { - // this._postMessage('blocking', getCliqzGhosteryStats(this._activeTab.id)); this._postMessage('blocking', this._getDynamicBlockingData()); } @@ -742,7 +739,7 @@ class PanelData { */ _buildTracker(tracker, trackerState, smartBlock) { const { - id, name, cat, sources, hasCompatibilityIssue, hasInsecureIssue, hasLatencyIssue + id, name, cat, sources, hasCompatibilityIssue, hasInsecureIssue, hasLatencyIssue, cliqz_cookies, cliqz_fingerprints } = tracker; const { blocked, ss_allowed, ss_blocked } = trackerState; @@ -759,7 +756,9 @@ class PanelData { warningCompatibility: hasCompatibilityIssue, warningInsecure: hasInsecureIssue, warningSlow: hasLatencyIssue, - warningSmartBlock: (smartBlock.blocked.hasOwnProperty(id) && 'blocked') || (smartBlock.unblocked.hasOwnProperty(id) && 'unblocked') || false + warningSmartBlock: (smartBlock.blocked.hasOwnProperty(id) && 'blocked') || (smartBlock.unblocked.hasOwnProperty(id) && 'unblocked') || false, + cliqz_cookies, + cliqz_fingerprints, }; } @@ -811,7 +810,7 @@ class PanelData { } /** - * Store the tracker list and categories values to reduce code duplicdation between the blocking and summary data getters, + * Store the tracker list and categories values to reduce code duplication between the blocking and summary data getters, * and since these values may be accessed 2+ times in a single updatePanelUI call */ _setTrackerListAndCategories() { @@ -820,6 +819,23 @@ class PanelData { const { id, url } = this._activeTab; this._trackerList = foundBugs.getApps(id, false, url) || []; + + const ghosteryStats = getCliqzGhosteryStats(id); + + if (ghosteryStats && ghosteryStats.bugs) { + const gsBugs = ghosteryStats.bugs; + const bugsIds = Object.keys(gsBugs); + const appsById = foundBugs.getAppsById(id); + + bugsIds.forEach((bugsId) => { + const trackerId = conf.bugs.bugs[bugsId]; + const trackerListIndex = appsById[trackerId.aid]; + + this._trackerList[trackerListIndex].cliqz_cookies = gsBugs[bugsId].cookies; + this._trackerList[trackerListIndex].cliqz_fingerprints = gsBugs[bugsId].fingerprints; + }); + } + this._categories = this._buildCategories(); } // [/DATA SETTING] From c81b781ca23f2a808006f9379e385d098f17e12f Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 11 Jun 2019 15:01:48 -0400 Subject: [PATCH 11/19] Add ads cliqz stat to tracker detail view --- _locales/en/messages.json | 14 ++++-- .../panel/tracker-detail-cliqz-ads-icon.svg | 7 +++ ...l-cliqz-cookies-and-fingerprints-icon.svg} | 0 app/panel/components/Blocking/Tracker.jsx | 43 +++++++++++++++---- app/scss/partials/_blocking_tracker.scss | 16 ++++--- src/classes/PanelData.js | 21 ++++++--- 6 files changed, 79 insertions(+), 22 deletions(-) create mode 100644 app/images/panel/tracker-detail-cliqz-ads-icon.svg rename app/images/panel/{cookies-and-fingerprints-cliqz-badge.svg => tracker-detail-cliqz-cookies-and-fingerprints-icon.svg} (100%) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 3954e01e3..098204300 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2213,16 +2213,22 @@ "panel_stats_pitch_modal_tooltip": { "message": "Erase all statistics history up until this point in time." }, - "cookie": { + "tracker_detail_cliqz_cookie": { "message": "Cookie" }, - "cookies": { + "tracker_detail_cliqz_cookies": { "message": "Cookies" }, - "fingerprint": { + "tracker_detail_cliqz_fingerprint": { "message": "Fingerprint" }, - "fingerprints": { + "tracker_detail_cliqz_fingerprints": { "message": "Fingerprints" + }, + "tracker_detail_cliqz_ad": { + "message": "Ad" + }, + "tracker_detail_cliqz_ads": { + "message": "Ads" } } diff --git a/app/images/panel/tracker-detail-cliqz-ads-icon.svg b/app/images/panel/tracker-detail-cliqz-ads-icon.svg new file mode 100644 index 000000000..110de5043 --- /dev/null +++ b/app/images/panel/tracker-detail-cliqz-ads-icon.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/app/images/panel/cookies-and-fingerprints-cliqz-badge.svg b/app/images/panel/tracker-detail-cliqz-cookies-and-fingerprints-icon.svg similarity index 100% rename from app/images/panel/cookies-and-fingerprints-cliqz-badge.svg rename to app/images/panel/tracker-detail-cliqz-cookies-and-fingerprints-icon.svg diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index cb0f44f27..3e98969f3 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -204,21 +204,48 @@ class Tracker extends React.Component { _renderCliqzStatsContainer() { const { tracker } = this.props; - const { cliqz_cookies, cliqz_fingerprints } = tracker; + const { cliqzAdCount, cliqzCookieCount, cliqzFingerprintCount } = tracker; - const oneOrMoreCookies = cliqz_cookies >= 1; - const oneOrMoreFingerprints = cliqz_fingerprints >= 1; - const oneCookie = cliqz_cookies === 1; - const oneFingerprint = cliqz_fingerprints === 1; + const oneOrMoreCookies = cliqzCookieCount >= 1; + const oneOrMoreFingerprints = cliqzFingerprintCount >= 1; + const oneOrMoreAds = cliqzAdCount >= 1; return (
- {(oneOrMoreCookies || oneOrMoreFingerprints) && } - {oneOrMoreCookies && {cliqz_cookies} {oneCookie ? t('cookie') : t('cookies')}} - {oneOrMoreFingerprints && {cliqz_fingerprints} {oneFingerprint ? t('fingerprint') : t('fingerprints')}} + {(oneOrMoreCookies || oneOrMoreFingerprints) && this._renderCookiesAndFingerprintsIcon()} + {oneOrMoreCookies && this._renderCliqzCookieStat(cliqzCookieCount)} + {oneOrMoreFingerprints && this._renderCliqzFingerprintStat(cliqzFingerprintCount)} + {(oneOrMoreCookies || oneOrMoreFingerprints) && oneOrMoreAds && this._renderDivider()} + {oneOrMoreAds && this._renderAdsIcon()} + {oneOrMoreAds && this._renderCliqzAdStat(cliqzAdCount)}
); } + _renderCookiesAndFingerprintsIcon() { + return ( + + ); + } + _renderAdsIcon() { + return ( + + ); + } + _renderDivider() { 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(`tracker_detail_cliqz_${type}`) : + t(`tracker_detail_cliqz_${type}s`); + const cssClass = `trk-cliqz-stat trk-cliqz-stat-${type}s-count`; + + return ( + {count} {label} + ); + } /** * Render a tracker in Blocking view. diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index 672a428a4..5e874f98e 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -29,21 +29,27 @@ @extend %nowrap; } .trk-cliqz-stats-container { - color: #1dafed; font-size: 10px; font-family: "Open Sans", "Roboto", Arial, Helvetica, sans-serif; font-weight: 600; } - .trk-cliqz-stat-shield-badge-svg { + .trk-cliqz-stat-cookies-and-fingerprints-icon-svg, + .trk-cliqz-stat-ads-icon-svg { display: inline-block; padding-right: 6px; vertical-align: middle; } - .trk-cliqz-stat-cookies-count { + .trk-cliqz-stat { + color: #1dafed; + } + .trk-cliqz-stat-cookies-count, + .trk-cliqz-stat-fingerprints-count { padding-right: 4px; } - .trk-cliqz-stat-fingerprint-count { - + .trk-cliqz-stat-divider { + padding-left: 4px; + padding-right: 8px; + color: #c8c7c2; } .svg-container { height: 20px; diff --git a/src/classes/PanelData.js b/src/classes/PanelData.js index a7b8f8b24..fad2d5b42 100644 --- a/src/classes/PanelData.js +++ b/src/classes/PanelData.js @@ -739,7 +739,16 @@ class PanelData { */ _buildTracker(tracker, trackerState, smartBlock) { const { - id, name, cat, sources, hasCompatibilityIssue, hasInsecureIssue, hasLatencyIssue, cliqz_cookies, cliqz_fingerprints + cat, + cliqzAdCount, + cliqzCookieCount, + cliqzFingerprintCount, + hasCompatibilityIssue, + hasInsecureIssue, + hasLatencyIssue, + id, + name, + sources, } = tracker; const { blocked, ss_allowed, ss_blocked } = trackerState; @@ -757,8 +766,9 @@ class PanelData { warningInsecure: hasInsecureIssue, warningSlow: hasLatencyIssue, warningSmartBlock: (smartBlock.blocked.hasOwnProperty(id) && 'blocked') || (smartBlock.unblocked.hasOwnProperty(id) && 'unblocked') || false, - cliqz_cookies, - cliqz_fingerprints, + cliqzAdCount, + cliqzCookieCount, + cliqzFingerprintCount, }; } @@ -831,8 +841,9 @@ class PanelData { const trackerId = conf.bugs.bugs[bugsId]; const trackerListIndex = appsById[trackerId.aid]; - this._trackerList[trackerListIndex].cliqz_cookies = gsBugs[bugsId].cookies; - this._trackerList[trackerListIndex].cliqz_fingerprints = gsBugs[bugsId].fingerprints; + this._trackerList[trackerListIndex].cliqzCookieCount = gsBugs[bugsId].cookies; + this._trackerList[trackerListIndex].cliqzFingerprintCount = gsBugs[bugsId].fingerprints; + this._trackerList[trackerListIndex].cliqzAdCount = gsBugs[bugsId].ads; }); } From fe70332005f32856bb806bc1dd5af53d79d1c217 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 11 Jun 2019 15:15:59 -0400 Subject: [PATCH 12/19] Document FoundBugs#getAppsById --- src/classes/FoundBugs.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/classes/FoundBugs.js b/src/classes/FoundBugs.js index c5763c4a2..452d362b0 100644 --- a/src/classes/FoundBugs.js +++ b/src/classes/FoundBugs.js @@ -276,6 +276,13 @@ class FoundBugs { return apps_arr; } + /** + * Returns an object where the keys are the ids of the apps found on this tab + * and the values are their indices in the array returned by #getApps + * + * @param {number} tab_id tab id + * @return {Object} object of app-id-to-#getApps-array-index mappings + */ getAppsById(tab_id) { if (!this._ensure(tab_id)) { return []; From e67dc1a993c938e8ce8c19c4711cac5d433eae62 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Tue, 11 Jun 2019 16:24:09 -0400 Subject: [PATCH 13/19] Ensure the panel does not break if a bug id returned by getGhosteryStats does not match an app id in the PanelData _trackerList --- src/classes/PanelData.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/classes/PanelData.js b/src/classes/PanelData.js index fad2d5b42..77e8fdd8e 100644 --- a/src/classes/PanelData.js +++ b/src/classes/PanelData.js @@ -839,7 +839,10 @@ class PanelData { bugsIds.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; From 31fd112b2b6ad46071dc7fd19fae62d7fce9e9bf Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 12 Jun 2019 10:17:40 -0400 Subject: [PATCH 14/19] Add guards to getCliqzGhosteryStats to account for the case when antitracking is off --- src/utils/cliqzModulesData.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/utils/cliqzModulesData.js b/src/utils/cliqzModulesData.js index a984cae22..017b94f33 100644 --- a/src/utils/cliqzModulesData.js +++ b/src/utils/cliqzModulesData.js @@ -81,6 +81,13 @@ export function getCliqzAdblockingData(tabId) { } */ export function getCliqzGhosteryStats(tabId) { + if (!antitracking || !antitracking.background || !antitracking.background.actions) { + return { + bugs: {}, + others: {}, + }; + } + const ghosteryStats = antitracking.background.actions.getGhosteryStats(tabId); return ghosteryStats; } From f285940039cefcdc154771e61b53308df57a1805 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 12 Jun 2019 10:51:02 -0400 Subject: [PATCH 15/19] Convert locale strings for Cliqz stats in tracker detail view to use the strings themselves as the keys. --- _locales/en/messages.json | 24 +++++++++++------------ app/panel/components/Blocking/Tracker.jsx | 4 ++-- app/scss/partials/_blocking_tracker.scss | 1 + 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 098204300..270aa5d49 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2213,22 +2213,22 @@ "panel_stats_pitch_modal_tooltip": { "message": "Erase all statistics history up until this point in time." }, - "tracker_detail_cliqz_cookie": { - "message": "Cookie" + "cookie": { + "message": "cookie" }, - "tracker_detail_cliqz_cookies": { - "message": "Cookies" + "cookies": { + "message": "cookies" }, - "tracker_detail_cliqz_fingerprint": { - "message": "Fingerprint" + "fingerprint": { + "message": "fingerprint" }, - "tracker_detail_cliqz_fingerprints": { - "message": "Fingerprints" + "fingerprints": { + "message": "fingerprints" }, - "tracker_detail_cliqz_ad": { - "message": "Ad" + "ad": { + "message": "ad" }, - "tracker_detail_cliqz_ads": { - "message": "Ads" + "ads": { + "message": "ads" } } diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index 3e98969f3..26bc9219d 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -238,8 +238,8 @@ class Tracker extends React.Component { _renderCliqzStat(count, type) { const exactlyOne = count === 1; const label = exactlyOne ? - t(`tracker_detail_cliqz_${type}`) : - t(`tracker_detail_cliqz_${type}s`); + t(`${type}`) : + t(`${type}s`); const cssClass = `trk-cliqz-stat trk-cliqz-stat-${type}s-count`; return ( diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index 5e874f98e..c14ee1647 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -41,6 +41,7 @@ } .trk-cliqz-stat { color: #1dafed; + text-transform: capitalize; } .trk-cliqz-stat-cookies-count, .trk-cliqz-stat-fingerprints-count { From 3199e95052a51f598ea572ee2577951268acb7e8 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 12 Jun 2019 12:50:23 -0400 Subject: [PATCH 16/19] Update getCliqzGhosteryStats guard for when anti-tracking is off --- src/utils/cliqzModulesData.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/cliqzModulesData.js b/src/utils/cliqzModulesData.js index 017b94f33..46e6485c9 100644 --- a/src/utils/cliqzModulesData.js +++ b/src/utils/cliqzModulesData.js @@ -81,7 +81,7 @@ export function getCliqzAdblockingData(tabId) { } */ export function getCliqzGhosteryStats(tabId) { - if (!antitracking || !antitracking.background || !antitracking.background.actions) { + if (!conf.enable_anti_tracking) { return { bugs: {}, others: {}, From 0b7856e47c29635300dc3ac5159f230c70b8f545 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 13 Jun 2019 12:09:24 -0400 Subject: [PATCH 17/19] Implement slide out animation UI for Cliqz stats readout in tracker detail list --- .../panel/tracker-detail-cliqz-ads-icon.svg | 4 +- app/panel/components/Blocking/Tracker.jsx | 35 ++++++++++-------- app/scss/partials/_blocking_tracker.scss | 37 +++++++++++++------ 3 files changed, 47 insertions(+), 29 deletions(-) diff --git a/app/images/panel/tracker-detail-cliqz-ads-icon.svg b/app/images/panel/tracker-detail-cliqz-ads-icon.svg index 110de5043..2674f8621 100644 --- a/app/images/panel/tracker-detail-cliqz-ads-icon.svg +++ b/app/images/panel/tracker-detail-cliqz-ads-icon.svg @@ -1,7 +1,7 @@ - + - \ No newline at end of file + diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index 26bc9219d..598d8f6c2 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -211,27 +211,32 @@ class Tracker extends React.Component { const oneOrMoreAds = cliqzAdCount >= 1; return ( -
- {(oneOrMoreCookies || oneOrMoreFingerprints) && this._renderCookiesAndFingerprintsIcon()} - {oneOrMoreCookies && this._renderCliqzCookieStat(cliqzCookieCount)} - {oneOrMoreFingerprints && this._renderCliqzFingerprintStat(cliqzFingerprintCount)} - {(oneOrMoreCookies || oneOrMoreFingerprints) && oneOrMoreAds && this._renderDivider()} - {oneOrMoreAds && this._renderAdsIcon()} - {oneOrMoreAds && this._renderCliqzAdStat(cliqzAdCount)} +
+ {(oneOrMoreCookies || oneOrMoreFingerprints) && +
+ {this._renderCliqzCookiesAndFingerprintsIcon()} + {oneOrMoreCookies && this._renderCliqzCookieStat(cliqzCookieCount)} + {oneOrMoreFingerprints && this._renderCliqzFingerprintStat(cliqzFingerprintCount)} +
+ } + {oneOrMoreAds && +
+ {this._renderCliqzAdsIcon()} + {this._renderCliqzAdStat(cliqzAdCount)} +
+ }
); } - _renderCookiesAndFingerprintsIcon() { - return ( - - ); - } - _renderAdsIcon() { + _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 ( - + ); } - _renderDivider() { return (|); } _renderCliqzCookieStat(count) { return this._renderCliqzStat(count, 'cookie'); } _renderCliqzFingerprintStat(count) { return this._renderCliqzStat(count, 'fingerprint'); } _renderCliqzAdStat(count) { return this._renderCliqzStat(count, 'ad'); } diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index c14ee1647..08668f579 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -19,7 +19,7 @@ border-top: none; } .trk-header { - height: 61px; + height: 54px; .trk-name { @extend %pointer; font-size: 14px; @@ -28,30 +28,43 @@ color: #4a4a4a; @extend %nowrap; } - .trk-cliqz-stats-container { + .trk-cliqz-stats-outer-container { + // prevent jitter from breaking to new line + // if all three of cookies fingerprints and ads are present + // and we hover over the ad icon while the cookies & fingerprints section is expanded + white-space: nowrap; + font-size: 10px; font-family: "Open Sans", "Roboto", Arial, Helvetica, sans-serif; font-weight: 600; } - .trk-cliqz-stat-cookies-and-fingerprints-icon-svg, - .trk-cliqz-stat-ads-icon-svg { + .trk-cliqz-stats-icon { + // vertical alignment with text label + position: relative; + top: -2px; + display: inline-block; padding-right: 6px; - vertical-align: middle; } .trk-cliqz-stat { color: #1dafed; text-transform: capitalize; + display: inline-block; + max-width: 0px; + padding-right: 0px; + transition: max-width 0.6s, padding 0.6s; + transition-delay: 0.2s; + overflow-x: hidden; + white-space: nowrap; } - .trk-cliqz-stat-cookies-count, - .trk-cliqz-stat-fingerprints-count { - padding-right: 4px; + .trk-cliqz-stats-container { + display: inline-block; } - .trk-cliqz-stat-divider { - padding-left: 4px; - padding-right: 8px; - color: #c8c7c2; + .trk-cliqz-stats-container:hover .trk-cliqz-stat { + max-width: 100px; + padding-right: 4px; } + .svg-container { height: 20px; } From 1d4796fb9d4b3a08d9dddc49b78fa9619d7b9417 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 13 Jun 2019 12:13:25 -0400 Subject: [PATCH 18/19] Appease linter --- app/panel/components/Blocking/Tracker.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index 598d8f6c2..840c5fbd1 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -229,7 +229,7 @@ class Tracker extends React.Component { ); } _renderCliqzCookiesAndFingerprintsIcon() { return this._renderCliqzStatsIcon('cookies-and-fingerprints'); } - _renderCliqzAdsIcon() { return this._renderCliqzStatsIcon('ads')} + _renderCliqzAdsIcon() { return this._renderCliqzStatsIcon('ads'); } _renderCliqzStatsIcon(type) { const path = `/app/images/panel/tracker-detail-cliqz-${type}-icon.svg`; From c7175539614cdbb89e2185c43cc93c3deb4a3241 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 13 Jun 2019 12:36:35 -0400 Subject: [PATCH 19/19] Indentation fix --- app/panel/components/Blocking/Tracker.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index 840c5fbd1..5486858a7 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -213,17 +213,17 @@ class Tracker extends React.Component { return (
{(oneOrMoreCookies || oneOrMoreFingerprints) && -
- {this._renderCliqzCookiesAndFingerprintsIcon()} - {oneOrMoreCookies && this._renderCliqzCookieStat(cliqzCookieCount)} - {oneOrMoreFingerprints && this._renderCliqzFingerprintStat(cliqzFingerprintCount)} -
+
+ {this._renderCliqzCookiesAndFingerprintsIcon()} + {oneOrMoreCookies && this._renderCliqzCookieStat(cliqzCookieCount)} + {oneOrMoreFingerprints && this._renderCliqzFingerprintStat(cliqzFingerprintCount)} +
} {oneOrMoreAds && -
- {this._renderCliqzAdsIcon()} - {this._renderCliqzAdStat(cliqzAdCount)} -
+
+ {this._renderCliqzAdsIcon()} + {this._renderCliqzAdStat(cliqzAdCount)} +
}
);