GH-1246 GH-1239 Tracker count incorperates the Anti-Suite. Trackers B…

…locked count incorperates Anti-Suite and Trust/Restrict/Pause

app/panel/components/Blocking/Category.jsx

@@ -112,7 +112,7 @@ 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;

app/panel/components/Summary.jsx

@@ -274,10 +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 = this.props.antiTracking && this.props.antiTracking.totalUnsafeCount || 0;
-		const adBlockBlocked = this.props.adBlock && this.props.adBlock.totalCount || 0;
+		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,
@@ -287,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,
@@ -298,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 && (
@@ -360,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 + antiTrackUnsafe + adBlockBlocked || 0}
+								{trackersBlockedCount}
 							</span>
 						</div>
 						<div className={pageLoadClassNames}>

app/scss/partials/_summary.scss

@@ -101,8 +101,6 @@
 		font-weight: 600;
 		margin-bottom: 40px;
 		.blocked-trackers .value { color: #e74055; }
-		.blocked-trackers.paused .value { color: #f9d0d5; }
-		.blocked-trackers.paused .text { color: #cccccc; }
 		.page-load .value { color: #ffc063; }
 		.page-load.fast .value { color: #9ecc42; }
 		.page-load.slow .value { color: #e74055; }