Add ads cliqz stat to tracker detail view

_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"
 	}
 }

app/images/panel/tracker-detail-cliqz-ads-icon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#FFF" d="M7.49 1.234L9.922 3.89l-.157 3.6L7.11 9.922l-3.6-.157L1.078 7.11l.157-3.6L3.89 1.078z"/>
+    <path fill="#1DAFED" stroke="#1DAFED" stroke-width=".5" d="M2.788 8.54c.315.315.628.63.944.943.023.023.067.035.103.035 1.077.001 2.153.002 3.23-.001.04 0 .09-.02.117-.048a820.63 820.63 0 0 0 2.285-2.285.184.184 0 0 0 .05-.116c.003-1.08.003-2.16.002-3.24-.001-.03-.008-.068-.026-.088-.316-.321-.635-.64-.95-.956L2.789 8.54m-.436-.433l5.754-5.754c-.308-.309-.621-.623-.937-.936a.16.16 0 0 0-.102-.036 709.213 709.213 0 0 0-3.231 0c-.04 0-.09.02-.118.048-.765.762-1.53 1.525-2.291 2.29a.16.16 0 0 0-.045.1 928.271 928.271 0 0 0 0 3.26c0 .029.01.065.03.085.314.318.631.634.94.943m7.752-2.652c0 .581-.002 1.162.002 1.743a.405.405 0 0 1-.127.31 879.44 879.44 0 0 0-2.47 2.47.398.398 0 0 1-.303.128c-1.17-.003-2.341-.003-3.512 0a.4.4 0 0 1-.302-.126A884.3 884.3 0 0 0 .915 7.503a.385.385 0 0 1-.121-.294c.002-1.17.002-2.342 0-3.513 0-.122.036-.216.123-.303.827-.824 1.653-1.65 2.477-2.477a.388.388 0 0 1 .293-.123c1.174.002 2.348.002 3.523 0 .119 0 .21.038.293.122.827.83 1.655 1.657 2.484 2.484.081.08.12.17.119.285-.004.59-.002 1.181-.002 1.771"/>
+  </g>
+</svg>

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 (
 			<div className="trk-cliqz-stats-container">
-				{(oneOrMoreCookies || oneOrMoreFingerprints) && <ReactSVG path="/app/images/panel/cookies-and-fingerprints-cliqz-badge.svg" className="trk-cliqz-stat-shield-badge-svg" />}
-				{oneOrMoreCookies && <span className="trk-cliqz-stat-cookies-count">{cliqz_cookies} {oneCookie ? t('cookie') : t('cookies')}</span>}
-				{oneOrMoreFingerprints && <span className="trk-cliqz-stat-fingerprint-count">{cliqz_fingerprints} {oneFingerprint ? t('fingerprint') : t('fingerprints')}</span>}
+				{(oneOrMoreCookies || oneOrMoreFingerprints) && this._renderCookiesAndFingerprintsIcon()}
+				{oneOrMoreCookies && this._renderCliqzCookieStat(cliqzCookieCount)}
+				{oneOrMoreFingerprints && this._renderCliqzFingerprintStat(cliqzFingerprintCount)}
+				{(oneOrMoreCookies || oneOrMoreFingerprints) && oneOrMoreAds && this._renderDivider()}
+				{oneOrMoreAds && this._renderAdsIcon()}
+				{oneOrMoreAds && this._renderCliqzAdStat(cliqzAdCount)}
 			</div>
 		);
 	}
+	_renderCookiesAndFingerprintsIcon() {
+		return (
+			<ReactSVG path="/app/images/panel/tracker-detail-cliqz-cookies-and-fingerprints-icon.svg" className="trk-cliqz-stat-cookies-and-fingerprints-icon-svg" />
+		);
+	}
+	_renderAdsIcon() {
+		return (
+			<ReactSVG path="/app/images/panel/tracker-detail-cliqz-ads-icon.svg" className="trk-cliqz-stat-ads-icon-svg" />
+		);
+	}
+	_renderDivider() { return (<span className="trk-cliqz-stat-divider">|</span>); }
+	_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 (
+			<span className={cssClass}>{count} {label}</span>
+		);
+	}
 
 	/**
 	* Render a tracker in Blocking view.

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;

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;
 			});
 		}