GH-1239 Tracker count respects SmartBlock block/unblock

app/panel/components/Blocking.jsx

@@ -68,7 +68,7 @@ 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.actions.updateTrackerCounts);
+		updateSummaryBlockingCount(this.props.categories, this.props.smartBlock, this.props.actions.updateTrackerCounts);
 	}
 	/**
 	* Filter trackers by category, or reset filters. Trigger action.
@@ -253,6 +253,7 @@ class Blocking extends React.Component {
 					sitePolicy={this.props.sitePolicy}
 					paused_blocking={this.props.paused_blocking}
 					selected_app_ids={this.props.selected_app_ids}
+					smartBlock={this.props.smartBlock}
 				/>
 				{(this.state.disableBlocking && this.props.is_expanded) ?
 					<NotScanned />
@@ -266,6 +267,7 @@ class Blocking extends React.Component {
 								sitePolicy={this.props.sitePolicy}
 								paused_blocking={this.props.paused_blocking}
 								language={this.props.language}
+								smartBlock={this.props.smartBlock}
 							/>
 						}
 					</div>

app/panel/components/Blocking/BlockingHeader.jsx

@@ -55,7 +55,7 @@ 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.actions.updateTrackerCounts);
+			updateSummaryBlockingCount(this.props.categories, this.props.smartBlock, this.props.actions.updateTrackerCounts);
 		}
 	}
 	/**
@@ -118,11 +118,12 @@ class BlockingHeader extends React.Component {
 
 				this.props.actions.updateBlockAllTrackers({
 					allBlocked,
+					smartBlock: this.props.smartBlock,
 				});
 
 				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.actions.updateTrackerCounts);
+					updateSummaryBlockingCount(this.props.categories, this.props.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}
+				smartBlock={this.props.smartBlock}
 			/>
 		));
 		return <div className="scroll-content">{ categoryList }</div>;

app/panel/components/Blocking/Category.jsx

@@ -119,6 +119,7 @@ class Category extends React.Component {
 		}
 
 		this.props.actions.updateCategoryBlocked({
+			smartBlock: this.props.smartBlock,
 			category: this.props.category.id,
 			blocked,
 		});
@@ -232,6 +233,7 @@ class Category extends React.Component {
 						sitePolicy={this.props.sitePolicy}
 						paused_blocking={this.props.paused_blocking}
 						language={this.props.language}
+						smartBlock={this.props.smartBlock}
 					/>
 				}
 			</div>

app/panel/components/Blocking/Tracker.jsx

@@ -151,6 +151,7 @@ class Tracker extends React.Component {
 			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}
+					smartBlock={this.props.smartBlock}
 				/>
 			));
 		}

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,
+	smartBlock: state.panel.smartBlock,
 });
 /**
  * Bind Blocking view component action creators using Redux's bindActionCreators

app/panel/reducers/summary.js

@@ -67,6 +67,8 @@ export default (state = initialState, action) => {
 					allowed: action.data.num_total - action.data.num_blocked,
 					ssBlocked: action.data.num_ss_blocked,
 					ssAllowed: action.data.num_ss_allowed,
+					sbBlocked: action.data.num_sb_blocked,
+					sbAllowed: action.data.num_sb_allowed,
 				},
 			});
 		}

app/panel/utils/blocking.js

@@ -21,18 +21,24 @@ import { sendMessage } from './msg';
  * Dispatch action to SummaryActions to update trackerCounts.
  * @memberOf PanelUtils
  * @param {array}	 categories        		array of categories
+ * @param {object} smartBlock 	blocked and unblocked of Smart Blocking
  * @param {function} updateTrackerCounts 	from SummaryActions
  */
-export function updateSummaryBlockingCount(categories = [], updateTrackerCounts) {
+export function updateSummaryBlockingCount(categories = [], smartBlock, updateTrackerCounts) {
 	let numTotal = 0;
 	let numTotalBlocked = 0;
 	let numTotalSsBlocked = 0;
 	let numTotalSsUnblocked = 0;
+	let numTotalSbBlocked = 0;
+	let numTotalSbUnblocked = 0;
 
 	categories.forEach((category) => {
 		category.trackers.forEach((tracker) => {
 			numTotal++;
-			if ((tracker.blocked && !tracker.ss_allowed) || tracker.ss_blocked) {
+			const sbBlocked = smartBlock.blocked.hasOwnProperty(tracker.id);
+			const sbUnblocked = smartBlock.unblocked.hasOwnProperty(tracker.id);
+
+			if (tracker.ss_blocked || sbBlocked || (tracker.blocked && !tracker.ss_allowed && !sbUnblocked)) {
 				numTotalBlocked++;
 			}
 			if (tracker.ss_blocked) {
@@ -41,6 +47,12 @@ export function updateSummaryBlockingCount(categories = [], updateTrackerCounts)
 			if (tracker.ss_allowed) {
 				numTotalSsUnblocked++;
 			}
+			if (sbBlocked) {
+				numTotalSbBlocked++;
+			}
+			if (sbUnblocked) {
+				numTotalSbUnblocked++;
+			}
 		});
 	});
 
@@ -49,6 +61,8 @@ export function updateSummaryBlockingCount(categories = [], updateTrackerCounts)
 		num_blocked: numTotalBlocked,
 		num_ss_blocked: numTotalSsBlocked,
 		num_ss_allowed: numTotalSsUnblocked,
+		num_sb_blocked: numTotalSbBlocked,
+		num_sb_allowed: numTotalSbUnblocked,
 	});
 }
 
@@ -64,15 +78,21 @@ 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: {} };
 
 	updated_categories.forEach((category) => {
 		category.num_blocked = 0;
 		category.trackers.forEach((tracker) => {
+			const sbBlocked = smartBlock.blocked.hasOwnProperty(tracker.id);
+			const sbUnblocked = smartBlock.unblocked.hasOwnProperty(tracker.id);
+
 			if (tracker.shouldShow) {
 				tracker.blocked = blocked;
 				const key = tracker.id;
-				if (blocked) {
+				if (sbBlocked || (blocked && !sbUnblocked)) {
 					category.num_blocked++;
+				}
+				if (blocked) {
 					updated_app_ids[key] = 1;
 				} else {
 					delete updated_app_ids[key];
@@ -99,17 +119,23 @@ export function updateBlockAllTrackers(state, action) {
  */
 export function updateCategoryBlocked(state, action) {
 	const { blocked } = action.data;
+	const smartBlock = 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);
 	const updated_category = updated_categories[catIndex];
 	updated_category.num_blocked = 0;
 	updated_category.trackers.forEach((tracker) => {
+		const sbBlocked = smartBlock.blocked.hasOwnProperty(tracker.id);
+		const sbUnblocked = smartBlock.unblocked.hasOwnProperty(tracker.id);
+
 		if (tracker.shouldShow) {
 			tracker.blocked = blocked;
 			const key = tracker.id;
-			if (blocked) {
+			if (sbBlocked || (blocked && !sbUnblocked)) {
 				updated_category.num_blocked++;
+			}
+			if (blocked) {
 				updated_app_ids[key] = 1;
 			} else {
 				delete updated_app_ids[key];
@@ -180,13 +206,17 @@ export function updateTrackerBlocked(state, action) {
 	}
 
 	const { blocked } = action.data;
+	const smartBlock = 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);
 	const updated_category = updated_categories[catIndex];
 
 	updated_category.num_blocked = 0;
 	updated_category.trackers.forEach((tracker) => {
+		const sbBlocked = smartBlock.blocked.hasOwnProperty(tracker.id);
+		const sbUnblocked = smartBlock.unblocked.hasOwnProperty(tracker.id);
+
 		if (tracker.shouldShow) {
 			if (tracker.id === action.data.app_id) {
 				tracker.blocked = blocked;
@@ -197,7 +227,7 @@ export function updateTrackerBlocked(state, action) {
 					delete updated_app_ids[key];
 				}
 			}
-			if (tracker.blocked) {
+			if (sbBlocked || (tracker.blocked && !sbUnblocked)) {
 				updated_category.num_blocked++;
 			}
 		}

src/classes/PanelData.js

@@ -416,14 +416,16 @@ class PanelData {
 			const blocked = selectedAppIds.hasOwnProperty(tracker.id);
 			const ss_allowed = pageUnblocks.includes(+tracker.id);
 			const ss_blocked = pageBlocks.includes(+tracker.id);
+			const sb_blocked = smartBlock.blocked.hasOwnProperty(`${tracker.id}`);
+			const sb_allowed = smartBlock.unblocked.hasOwnProperty(`${tracker.id}`);
 
 			if (t(`category_${category}`) === `category_${category}`) {
 				category = 'uncategorized';
 			}
 
 			if (categories.hasOwnProperty(category)) {
 				categories[category].num_total++;
-				if (blocked || ss_blocked) {
+				if (ss_blocked || sb_blocked || (blocked && !ss_allowed && !sb_allowed)) {
 					categories[category].num_blocked++;
 				}
 			} else {
@@ -434,7 +436,7 @@ class PanelData {
 					img_name: (category === 'advertising') ? 'adv' : // Because AdBlock blocks images with 'advertising' in the name.
 						(category === 'social_media') ? 'smed' : category, // Because AdBlock blocks images with 'social' in the name.
 					num_total: 1,
-					num_blocked: (blocked || ss_blocked) ? 1 : 0,
+					num_blocked: (ss_blocked || sb_blocked || (blocked && !ss_allowed && !sb_allowed)) ? 1 : 0,
 					trackers: [],
 					expanded: this._confData.get('expand_all_trackers')
 				};