Saving (relatively) working code)

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

app/panel/components/Blocking/Categories.jsx

@@ -57,34 +57,31 @@ class Categories extends React.Component {
 			/>
 		));
 
-		const otherDataPointsCategory = (antiTracking && antiTracking.totalUnsafeCount) ? (
+		const otherDataPointsCategory = antiTracking.totalUnknownCount ? (
 			<Category
 				expandAll={expandAll}
 				globalBlocking={globalBlocking}
 				index={categoryList.length}
-				category={(() => {
-					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}

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 (
 			<div className={`${category.num_shown === 0 ? 'hide' : ''} blocking-category`}>

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 (
+			<div className="trk-cliqz-stats-outer-container">
+				{(oneOrMoreCookies || oneOrMoreFingerprints) && (
+					<div className="trk-cliqz-stats-container">
+						{this._renderCliqzCookiesAndFingerprintsIcon()}
+						{oneOrMoreCookies && this._renderCliqzCookieStat(cliqzCookieCount)}
+						{oneOrMoreFingerprints && this._renderCliqzFingerprintStat(cliqzFingerprintCount)}
+					</div>
+				)}
+				{oneOrMoreAds && (
+					<div className="trk-cliqz-stats-container">
+						{this._renderCliqzAdsIcon()}
+						{this._renderCliqzAdStat(cliqzAdCount)}
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	_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 (
+			<ReactSVG src={path} className="trk-cliqz-stats-icon" />
+		);
+	}
+
+	_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 (
+			<span className={cssClass}>
+				{count}
+				{' '}
+				{label}
+			</span>
+		);
+	}
+
 	/**
 	* Render a tracker in Blocking view.
 	* @return {ReactComponent}   ReactComponent instance
@@ -103,6 +172,7 @@ class OtherDataPoint extends React.Component {
 				<div className="row align-middle trk-header">
 					<div className="columns collapse-left">
 						<div className="data-point trk-name">{ tracker.name }</div>
+						{this._renderCliqzStatsContainer()}
 					</div>
 					<div className="columns shrink align-self-justify collapse-right">
 						<div className="OtherDataPoint__svgGroup">
@@ -121,7 +191,7 @@ class OtherDataPoint extends React.Component {
 							</span>
 
 							{/* USE INLINE SVG FOR ANTI-TRACKING SHIELD TO CHANGE COLORS WITH CSS */}
-							<span className="t-tooltip-up-left" data-g-tooltip="Scrub on this site" >
+							<span className="t-tooltip-up-left" data-g-tooltip="Scrub on this site">
 								<svg className="" onClick={this.clickTrackerRestrict} width="20px" height="20px" viewBox="0 0 20 20">
 									<g transform="translate(1 1)" fill="none" fillRule="evenodd">
 										<path className="border" stroke="#00AEF0" d="M-.5-.5h18.3v18.217H-.5z" />

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}
 						</span>
 					))}
-					{antiTracking && !!antiTracking.totalUnsafeCount && (
+					{!!antiTracking.totalUnknownCount && (
 						<span
 							className="DonutGraph__tooltip tooltip top"
 							id="other_data_points_tooltip"

app/panel/reducers/summary.js

@@ -17,7 +17,6 @@ import {
 	UPDATE_SUMMARY_DATA,
 	UPDATE_CLIQZ_MODULE_DATA,
 	UPDATE_ANTI_TRACKING_NUM_SHOWN,
-	UPDATE_ANTI_TRACKING_WHITELIST,
 	UPDATE_GHOSTERY_PAUSED,
 	UPDATE_SITE_POLICY,
 	UPDATE_TRACKER_COUNTS
@@ -38,6 +37,10 @@ const initialState = {
 		blocked: 0,
 	},
 	tab_id: 0,
+	antiTracking: {
+		totalUnsafeCount: 0,
+		totalUnknownCount: 0,
+	}
 };
 /**
  * Default export for summary view reducer.
@@ -53,12 +56,7 @@ export default (state = initialState, action) => {
 			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 });

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

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

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;

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