Implement passing of cookes and fingerprints ghostery stats from back…

…ground to Tracker component and their display there

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

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 (
 			<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">{cookieCount} {oneCookie ? t('cookie') : t('cookies')}</span>}
-				{oneOrMoreFingerprints && <span className="trk-cliqz-stat-fingerprint-count">{fingerprintCount} {oneFingerprint ? t('fingerprint') : t('fingerprints')}</span>}
+				{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>}
 			</div>
 		);
 	}

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.

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]