Feature/gh 1239

_locales/en/messages.json

@@ -672,14 +672,8 @@
 	"panel_tracker_slow_non_secure_end": {
 		"message": " on this page."
 	},
-	"tracker_signular": {
-		"message": "tracker"
-	},
-	"tracker_plural": {
-		"message": "trackers"
-	},
-	"tracker_found": {
-		"message": "found"
+	"panel_tracker_total_tooltip": {
+		"message": "Total count of trackers found, ads blocked and data points anonymized."
 	},
 	"panel_signin_success": {
 		"message": "You are now signed in as "

app/panel/components/Blocking.jsx

@@ -68,7 +68,8 @@ class Blocking extends React.Component {
 		// Update the summary blocking count whenever the blocking component updated.
 		// This will also show pending blocking changes if the panel is re-opened
 		// before a page refresh
-		updateSummaryBlockingCount(this.props.categories, this.props.smartBlock, this.props.actions.updateTrackerCounts);
+		const smartBlock = this.props.smartBlockActive && this.props.smartBlock || { blocked: {}, unblocked: {} };
+		updateSummaryBlockingCount(this.props.categories, smartBlock, this.props.actions.updateTrackerCounts);
 	}
 	/**
 	* Filter trackers by category, or reset filters. Trigger action.
@@ -106,7 +107,8 @@ class Blocking extends React.Component {
 		updated_categories.forEach((category) => {
 			let count = 0;
 			category.trackers.forEach((tracker) => {
-				if ((tracker.blocked && !tracker.ss_allowed) || tracker.ss_blocked) {
+				const isSbBlocked = this.props.smartBlockActive && tracker.warningSmartBlock;
+				if ((tracker.blocked && !tracker.ss_allowed) || isSbBlocked || tracker.ss_blocked) {
 					tracker.shouldShow = true;
 					count++;
 				} else {
@@ -253,6 +255,7 @@ class Blocking extends React.Component {
 					sitePolicy={this.props.sitePolicy}
 					paused_blocking={this.props.paused_blocking}
 					selected_app_ids={this.props.selected_app_ids}
+					smartBlockActive={this.props.smartBlockActive}
 					smartBlock={this.props.smartBlock}
 				/>
 				{(this.state.disableBlocking && this.props.is_expanded) ?
@@ -267,6 +270,7 @@ class Blocking extends React.Component {
 								sitePolicy={this.props.sitePolicy}
 								paused_blocking={this.props.paused_blocking}
 								language={this.props.language}
+								smartBlockActive={this.props.smartBlockActive}
 								smartBlock={this.props.smartBlock}
 							/>
 						}

app/panel/components/Blocking/BlockingHeader.jsx

@@ -55,7 +55,8 @@ class BlockingHeader extends React.Component {
 
 		if (typeof this.props.actions.updateTrackerCounts === 'function') {
 			// if we're on GlobalSettings, we don't need to run this function
-			updateSummaryBlockingCount(this.props.categories, this.props.smartBlock, this.props.actions.updateTrackerCounts);
+			const smartBlock = this.props.smartBlockActive && this.props.smartBlock || { blocked: {}, unblocked: {} };
+			updateSummaryBlockingCount(this.props.categories, smartBlock, this.props.actions.updateTrackerCounts);
 		}
 	}
 	/**
@@ -117,13 +118,15 @@ class BlockingHeader extends React.Component {
 				}
 
 				this.props.actions.updateBlockAllTrackers({
-					allBlocked,
+					smartBlockActive: this.props.smartBlockActive,
 					smartBlock: this.props.smartBlock,
+					allBlocked,
 				});
 
 				if (typeof this.props.actions.updateTrackerCounts === 'function') {
 					// if we're on GlobalSettings, we don't need to run this function
-					updateSummaryBlockingCount(this.props.categories, this.props.smartBlock, this.props.actions.updateTrackerCounts);
+					const smartBlock = this.props.smartBlockActive && this.props.smartBlock || { blocked: {}, unblocked: {} };
+					updateSummaryBlockingCount(this.props.categories, smartBlock, this.props.actions.updateTrackerCounts);
 				}
 
 				this.props.actions.showNotification({

app/panel/components/Blocking/Categories.jsx

@@ -43,6 +43,7 @@ class Categories extends React.Component {
 				sitePolicy={this.props.sitePolicy}
 				paused_blocking={this.props.paused_blocking}
 				language={this.props.language}
+				smartBlockActive={this.props.smartBlockActive}
 				smartBlock={this.props.smartBlock}
 			/>
 		));

app/panel/components/Blocking/Category.jsx

@@ -112,13 +112,14 @@ class Category extends React.Component {
 	 */
 	clickCategoryStatus() {
 		const globalBlocking = !!this.props.globalBlocking;
-		const blocked = !(this.props.category.num_blocked === this.props.category.num_total);
+		const blocked = !this.state.allShownBlocked;
 
 		if ((this.props.paused_blocking || this.props.sitePolicy) && !globalBlocking) {
 			return;
 		}
 
 		this.props.actions.updateCategoryBlocked({
+			smartBlockActive: this.props.smartBlockActive,
 			smartBlock: this.props.smartBlock,
 			category: this.props.category.id,
 			blocked,
@@ -233,6 +234,7 @@ class Category extends React.Component {
 						sitePolicy={this.props.sitePolicy}
 						paused_blocking={this.props.paused_blocking}
 						language={this.props.language}
+						smartBlockActive={this.props.smartBlockActive}
 						smartBlock={this.props.smartBlock}
 					/>
 				}

app/panel/components/Blocking/Tracker.jsx

@@ -148,10 +148,11 @@ class Tracker extends React.Component {
 		}
 
 		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,
-			smartBlock: this.props.smartBlock,
 		});
 
 		this.props.actions.showNotification({

app/panel/components/Blocking/Trackers.jsx

@@ -70,6 +70,7 @@ class Trackers extends React.Component {
 					sitePolicy={this.props.sitePolicy}
 					paused_blocking={this.props.paused_blocking}
 					language={this.props.language}
+					smartBlockActive={this.props.smartBlockActive}
 					smartBlock={this.props.smartBlock}
 				/>
 			));

app/panel/components/BuildingBlocks/CliqzFeatures.jsx

@@ -65,17 +65,7 @@ class CliqzFeatures extends React.Component {
 		if (!this.props.antiTrackingActive) {
 			return '-';
 		}
-		let antiTrackingTotal = 0;
-		for (const category in this.props.antiTracking) {
-			if (this.props.antiTracking.hasOwnProperty(category)) {
-				for (const app in this.props.antiTracking[category]) {
-					if (this.props.antiTracking[category][app] === 'unsafe') {
-						antiTrackingTotal++;
-					}
-				}
-			}
-		}
-		return antiTrackingTotal;
+		return this.props.antiTracking && this.props.antiTracking.totalUnsafeCount || 0;
 	}
 
 	/**

app/panel/components/BuildingBlocks/DonutGraph.jsx

@@ -15,6 +15,7 @@ import React, { Component } from 'react';
 import ClassNames from 'classnames';
 import * as d3 from 'd3';
 import { scaleLinear } from 'd3-scale';
+import Tooltip from '../Tooltip';
 
 /**
  * @class Generate donut graph. Used to display tracker data in the Summary View.
@@ -271,12 +272,13 @@ class DonutGraph extends React.Component {
 				</div>
 				<div className="graph-ref" ref={(node) => { this.node = node; }} />
 				<div className="graph-text clickable" onClick={this.clickGraphText}>
-					<div className="graph-text-count">{totalCount}</div>
-					<div className="graph-text-trackers">
-						{(totalCount === 1) ? t('tracker_signular') : t('tracker_plural')}
-						<div className="show-on-big">
-							{t('tracker_found')}
-						</div>
+					<div className="graph-text-count g-tooltip">
+						{totalCount}
+						<Tooltip
+							delay="0"
+							body={t('panel_tracker_total_tooltip')}
+							position="right"
+						/>
 					</div>
 				</div>
 			</div>

app/panel/components/BuildingBlocks/GhosteryFeatures.jsx

@@ -141,7 +141,7 @@ class GhosteryFeatures extends React.Component {
 								{this.getTrustText()}
 							</span>
 						</span>
-						<Tooltip header={(sitePolicy === 2) ? t('tooltip_trust_on') : t('tooltip_trust')} position={(isStacked) ? 'right' : 'top'} />
+						<Tooltip body={(sitePolicy === 2) ? t('tooltip_trust_on') : t('tooltip_trust')} position={(isStacked) ? 'right' : 'top'} />
 					</div>
 					{isAbPause && (
 						<div className={customClassNames} onClick={this.clickCustomButton}>
@@ -150,7 +150,7 @@ class GhosteryFeatures extends React.Component {
 									{t('summary_custom_settings')}
 								</span>
 							</span>
-							<Tooltip header={t('tooltip_custom_settings')} position={(isStacked) ? 'right' : 'top'} />
+							<Tooltip body={t('tooltip_custom_settings')} position={(isStacked) ? 'right' : 'top'} />
 						</div>
 					)}
 					<div className={restrictClassNames} onClick={this.clickRestrictButton}>
@@ -159,7 +159,7 @@ class GhosteryFeatures extends React.Component {
 								{this.getRestrictText()}
 							</span>
 						</span>
-						<Tooltip header={(sitePolicy === 1) ? t('tooltip_restrict_on') : t('tooltip_restrict')} position={(isStacked) ? 'right' : 'top'} />
+						<Tooltip body={(sitePolicy === 1) ? t('tooltip_restrict_on') : t('tooltip_restrict')} position={(isStacked) ? 'right' : 'top'} />
 					</div>
 				</div>
 			</div>

app/panel/components/BuildingBlocks/PauseButton.jsx

@@ -169,7 +169,7 @@ class PauseButton extends React.Component {
 						{this.renderPauseButtonText()}
 						{!this.props.isAbPause && (
 							<Tooltip
-								header={this.props.isPaused ? t('summary_resume_ghostery_tooltip') : t('summary_pause_ghostery_tooltip')}
+								body={this.props.isPaused ? t('summary_resume_ghostery_tooltip') : t('summary_pause_ghostery_tooltip')}
 								position={(this.props.isCentered) ? 'right' : 'top'}
 							/>
 						)}

app/panel/components/Summary.jsx

@@ -13,6 +13,7 @@
 
 import React, { Component } from 'react';
 import ClassNames from 'classnames';
+import Tooltip from './Tooltip';
 import { sendMessage } from '../utils/msg';
 import globals from '../../../src/classes/Globals';
 import {
@@ -273,8 +274,25 @@ class Summary extends React.Component {
 	*/
 	render() {
 		const { abPause } = this.state;
-		const { is_expert, is_expanded, paused_blocking } = this.props;
+		const {
+			is_expert,
+			is_expanded,
+			enable_anti_tracking,
+			enable_ad_block,
+			enable_smart_block,
+			antiTracking,
+			adBlock,
+			smartBlock,
+			paused_blocking,
+			sitePolicy,
+			trackerCounts,
+		} = this.props;
 		const showCondensed = is_expert && is_expanded;
+		const antiTrackUnsafe = enable_anti_tracking && antiTracking && antiTracking.totalUnsafeCount || 0;
+		const adBlockBlocked = enable_ad_block && adBlock && adBlock.totalCount || 0;
+		const sbBlocked = (!trackerCounts.hasOwnProperty('sbBlocked') || (trackerCounts.sbBlocked !== Object.keys(smartBlock.blocked).length)) && Object.keys(smartBlock.blocked).length || 0;
+		const sbAllowed = (!trackerCounts.hasOwnProperty('sbAllowed') || (trackerCounts.sbAllowed !== Object.keys(smartBlock.unblocked).length)) && Object.keys(smartBlock.unblocked).length || 0;
+		const sbAdjust = enable_smart_block && (sbBlocked - sbAllowed) || 0;
 
 		const summaryClassNames = ClassNames('', {
 			expert: is_expert,
@@ -284,7 +302,6 @@ class Summary extends React.Component {
 
 		const blockedTrackersClassNames = ClassNames('blocked-trackers', {
 			clickable: is_expert,
-			paused: paused_blocking,
 		});
 		const pageLoadClassNames = ClassNames('page-load', {
 			fast: +this.state.trackerLatencyTotal < 5,
@@ -295,6 +312,15 @@ class Summary extends React.Component {
 			'not-clickable': this.state.disableBlocking
 		});
 
+		let trackersBlockedCount;
+		if (paused_blocking || sitePolicy === 2) {
+			trackersBlockedCount = 0;
+		} else if (sitePolicy === 1) {
+			trackersBlockedCount = trackerCounts.blocked + trackerCounts.allowed + antiTrackUnsafe + adBlockBlocked || 0;
+		} else {
+			trackersBlockedCount = trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked + sbAdjust || 0;
+		}
+
 		return (
 			<div id="content-summary" className={summaryClassNames}>
 				{abPause && (
@@ -327,7 +353,7 @@ class Summary extends React.Component {
 							categories={this.props.categories}
 							renderRedscale={this.props.sitePolicy === 1}
 							renderGreyscale={this.props.paused_blocking}
-							totalCount={this.props.trackerCounts.allowed + this.props.trackerCounts.blocked || 0}
+							totalCount={this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0}
 							ghosteryFeatureSelect={this.props.sitePolicy}
 							isSmall={is_expert}
 							clickDonut={this.clickDonut}
@@ -336,7 +362,13 @@ class Summary extends React.Component {
 				)}
 				{!this.state.disableBlocking && showCondensed && (
 					<div className="total-tracker-count clickable" onClick={this.clickTrackersCount}>
-						{this.props.trackerCounts.allowed + this.props.trackerCounts.blocked || 0}
+						<span className="summary-total-tracker-count g-tooltip">
+							{this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0}
+							<Tooltip
+								header={t('panel_tracker_total_tooltip')}
+								position="right"
+							/>
+						</span>
 					</div>
 				)}
 
@@ -351,7 +383,7 @@ class Summary extends React.Component {
 						<div className={blockedTrackersClassNames} onClick={this.clickTrackersBlocked}>
 							<span className="text">{t('trackers_blocked')} </span>
 							<span className="value">
-								{this.props.trackerCounts.blocked || 0}
+								{trackersBlockedCount}
 							</span>
 						</div>
 						<div className={pageLoadClassNames}>

app/panel/containers/BlockingContainer.js

@@ -32,6 +32,7 @@ const mapStateToProps = (state, ownProps) => Object.assign({}, state.blocking, {
 	pageHost: state.summary.pageHost,
 	paused_blocking: state.summary.paused_blocking,
 	sitePolicy: state.summary.sitePolicy,
+	smartBlockActive: state.panel.enable_smart_block,
 	smartBlock: state.panel.smartBlock,
 });
 /**

app/panel/reducers/__tests__/summary.js

@@ -57,7 +57,9 @@ describe('app/panel/reducers/summary.js', () => {
 
 		expect(summaryReducer(initState, action)).toEqual({
 			adBlock: {},
-			antiTracking: {},
+			antiTracking: {
+				totalUnsafeCount: 0
+			},
 		});
 	});
 

app/panel/reducers/summary.js

@@ -51,6 +51,18 @@ export default (state = initialState, action) => {
 			return Object.assign({}, state, action.data);
 		}
 		case GET_CLIQZ_MODULE_DATA: {
+			const antiTracking = action.data.antitracking;
+			let totalUnsafeCount = 0;
+			for (const category in antiTracking) {
+				if (antiTracking.hasOwnProperty(category)) {
+					for (const app in antiTracking[category]) {
+						if (antiTracking[category][app] === 'unsafe') {
+							totalUnsafeCount++;
+						}
+					}
+				}
+			}
+			antiTracking.totalUnsafeCount = totalUnsafeCount;
 			return Object.assign({}, state, { adBlock: action.data.adblock, antiTracking: action.data.antitracking });
 		}
 		case UPDATE_GHOSTERY_PAUSED: {

app/panel/utils/blocking.js

@@ -71,14 +71,14 @@ export function updateSummaryBlockingCount(categories = [], smartBlock, updateTr
  * @memberOf PanelUtils
  * @param  {Object} state 				current state
  * @param  {Object} action 				current action which provides data
- *
  * @return {Object} 					updated categories and selected app ids
  */
 export function updateBlockAllTrackers(state, action) {
 	const blocked = !action.data.allBlocked;
 	const updated_app_ids = JSON.parse(JSON.stringify(state.selected_app_ids)) || {};
 	const updated_categories = JSON.parse(JSON.stringify(state.categories)) || [];
-	const smartBlock = action.data.smartBlock || { blocked: {}, unblocked: {} };
+	const { smartBlockActive } = action.data;
+	const smartBlock = smartBlockActive && action.data.smartBlock || { blocked: {}, unblocked: {} };
 
 	updated_categories.forEach((category) => {
 		category.num_blocked = 0;
@@ -118,8 +118,8 @@ export function updateBlockAllTrackers(state, action) {
  * @return {Object} 		    updated categories and selected app ids
  */
 export function updateCategoryBlocked(state, action) {
-	const { blocked } = action.data;
-	const smartBlock = action.data.smartBlock || { blocked: {}, unblocked: {} };
+	const { blocked, smartBlockActive } = action.data;
+	const smartBlock = smartBlockActive && action.data.smartBlock || { blocked: {}, unblocked: {} };
 	const updated_app_ids = JSON.parse(JSON.stringify(state.selected_app_ids)) || {};
 	const updated_categories = JSON.parse(JSON.stringify(state.categories)); // deep clone
 	const catIndex = updated_categories.findIndex(item => item.id === action.data.category);
@@ -205,8 +205,8 @@ export function updateTrackerBlocked(state, action) {
 		return {};
 	}
 
-	const { blocked } = action.data;
-	const smartBlock = action.data.smartBlock || { blocked: {}, unblocked: {} };
+	const { blocked, smartBlockActive } = action.data;
+	const smartBlock = smartBlockActive && action.data.smartBlock || { blocked: {}, unblocked: {} };
 	const updated_app_ids = JSON.parse(JSON.stringify(state.selected_app_ids)) || {};
 	const updated_categories = JSON.parse(JSON.stringify(state.categories)) || []; // deep clone
 	const catIndex = updated_categories.findIndex(item => item.id === action.data.cat_id);