GH-1621: Site-Specific Whitelisting for Unknown Trackers via Anti-Tracking

_locales/en/messages.json

@@ -525,6 +525,10 @@
 		"description": "as in '5 (trackers) BLOCKED'",
 		"message": "Blocked"
 	},
+	"blocking_category_whitelisted": {
+		"description": "as in '5 (trackers) WHITELISTED'",
+		"message": "Whitelisted"
+	},
 	"panel_create_account": {
 		"message": "Create Account"
 	},
@@ -717,6 +721,9 @@
 	"panel_tracker_trust_tooltip": {
 		"message": "Trust on this site"
 	},
+	"panel_tracker_scrub_tooltip": {
+		"message": "Scrub on this site"
+	},
 	"panel_detail_menu_list_title": {
 		"message": "List View"
 	},
@@ -2247,5 +2254,14 @@
 	},
 	"ghostery_rewards": {
 		"message": "ghostery rewards"
+	},
+	"enhanced_anti_tracking": {
+		"message": "Enhanced Anti-Tracking"
+	},
+	"unknown": {
+		"message": "Unknown"
+	},
+	"unknown_description": {
+		"message": "Unknown trackers scrubbed by Anti-Tracking"
 	}
 }

app/images/panel/anti_tracking_unknown.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(1 1)">
+      <circle cx="11.865" cy="11.865" r="11.865" fill="#8459A5" stroke="#00AEF0" stroke-width=".5"/>
+      <path fill="#D2D2CC" d="M18.48 11.748L15.36 8.64l3.116 3.103.005.005"/>
+      <path fill="#4D4D4B" d="M7.2 14.282l.363-.362-.363.362"/>
+      <path fill="#64849B" d="M7.326 14.408l-.126-.126.363-.362.126.126-.363.362"/>
+    </g>
+    <path fill="#FFFFFE" stroke="#1DAFED" stroke-width="1.6" d="M13.149 6.022a.505.505 0 0 0-.298 0l-6.404 1.7A.574.574 0 0 0 6 8.286c.03 4.56 2.472 8.792 6.672 11.624.09.06.209.089.328.089.12 0 .238-.03.328-.09 4.2-2.83 6.642-7.063 6.672-11.623a.574.574 0 0 0-.447-.566L13.15 6.022z"/>
+  </g>
+</svg>

app/panel/actions/BlockingActions.js

@@ -15,9 +15,11 @@ import {
 	UPDATE_BLOCKING_DATA,
 	UPDATE_BLOCK_ALL_TRACKERS,
 	UPDATE_CATEGORIES,
+	UPDATE_ANTI_TRACKING_HIDE,
 	UPDATE_CATEGORY_BLOCKED,
 	UPDATE_TRACKER_BLOCKED,
 	UPDATE_TRACKER_TRUST_RESTRICT,
+	UPDATE_ANTI_TRACKING_WHITELIST,
 	TOGGLE_EXPAND_ALL
 } from '../constants/constants';
 
@@ -56,6 +58,19 @@ export function updateCategories(data) {
 	};
 }
 
+/**
+ * Called from Blocking setShow functions
+ * Hits the Summary reducer, as that is where the AntiTracking data is stored
+ * @param  {Object} data
+ * @return {Object}
+ */
+export function updateAntiTrackingHide(data) {
+	return {
+		type: UPDATE_ANTI_TRACKING_HIDE,
+		data,
+	};
+}
+
 /**
  * Called from Category.clickCategoryStatus()
  * @param  {Object} data
@@ -103,6 +118,22 @@ export function updateTrackerTrustRestrict(data) {
 	};
 }
 
+/**
+ * Called from Tracker.handleAntiTrackingWhitelist()
+ * @param  {Object} data
+ * @return {Object} dispatch
+ */
+export function updateAntiTrackingWhitelist(unknownTracker) {
+	return function(dispatch, getState) {
+		// use redux-thunk to get pageHost from summary
+		const { pageHost } = getState().summary;
+		dispatch({
+			type: UPDATE_ANTI_TRACKING_WHITELIST,
+			data: { unknownTracker, pageHost },
+		});
+	};
+}
+
 /**
  * Called from BlockingHeader.clickExpandAll()
  * @param  {Object} data

app/panel/components/Blocking.jsx

@@ -93,6 +93,7 @@ class Blocking extends React.Component {
 	*/
 	setShow(filterName) {
 		const updated_categories = JSON.parse(JSON.stringify(this.props.categories)); // deep clone
+		const updatedAntiTracking = JSON.parse(JSON.stringify(this.props.antiTracking)); // deep clone
 
 		updated_categories.forEach((category) => {
 			let count = 0;
@@ -111,7 +112,9 @@ class Blocking extends React.Component {
 			category.num_shown = (show) ? count : 0;
 		});
 
+		updatedAntiTracking.hide = !(filterName === 'all' || filterName === 'unknown');
 		this.props.actions.updateCategories(updated_categories);
+		this.props.actions.updateAntiTrackingHide(updatedAntiTracking);
 	}
 
 	/**
@@ -281,6 +284,8 @@ class Blocking extends React.Component {
 		const {
 			actions,
 			categories,
+			antiTracking,
+			enable_anti_tracking,
 			expand_all_trackers,
 			is_expanded,
 			language,
@@ -309,25 +314,27 @@ class Blocking extends React.Component {
 					smartBlockActive={smartBlockActive}
 					smartBlock={smartBlock}
 				/>
-				{(disableBlocking && is_expanded) ?
+				{(disableBlocking && is_expanded) ? (
 					<NotScanned />
-					: (
-						<div className={`${blockingClasses} blocking-trackers show-warnings`}>
-							{ categories.length > 0 && (
-								<Categories
-									expandAll={expand_all_trackers}
-									categories={categories}
-									actions={actions}
-									show_tracker_urls={show_tracker_urls}
-									sitePolicy={sitePolicy}
-									paused_blocking={paused_blocking}
-									language={language}
-									smartBlockActive={smartBlockActive}
-									smartBlock={smartBlock}
-								/>
-							)}
-						</div>
-					)}
+				) : (
+					<div className={`${blockingClasses} blocking-trackers show-warnings`}>
+						{categories.length > 0 && (
+							<Categories
+								expandAll={expand_all_trackers}
+								categories={categories}
+								actions={actions}
+								show_tracker_urls={show_tracker_urls}
+								sitePolicy={sitePolicy}
+								paused_blocking={paused_blocking}
+								language={language}
+								smartBlockActive={smartBlockActive}
+								smartBlock={smartBlock}
+								antiTracking={antiTracking}
+								enable_anti_tracking={enable_anti_tracking}
+							/>
+						)}
+					</div>
+				)}
 			</div>
 		);
 	}

app/panel/components/Blocking/BlockingHeader.jsx

@@ -32,6 +32,7 @@ class BlockingHeader extends React.Component {
 			filtered: false,
 			searchValue: '',
 			filterMenuOpened: false,
+			blockAllDisabled: true,
 		};
 
 		// event bindings
@@ -93,7 +94,12 @@ class BlockingHeader extends React.Component {
 				});
 			});
 			if (this.state.fromHere || totalShown === totalBlocked || totalBlocked === 0) {
-				this.setState({ allBlocked: (totalShown === totalBlocked), filtered, fromHere: false });
+				this.setState({
+					allBlocked: (totalShown === totalBlocked),
+					blockAllDisabled: !totalShown,
+					fromHere: false,
+					filtered
+				});
 			}
 		}
 	}
@@ -256,9 +262,14 @@ class BlockingHeader extends React.Component {
 						</div>
 					</div>
 					<div className="shrink columns align-self-justify text-right">
-						{this.props.categories && this.props.categories.length > 0 &&
-							<div className="block-text" onClick={this.clickBlockAll}>{blockText}</div>
-						}
+						{this.props.categories && this.props.categories.length > 0 && (
+							<div
+								className={`block-text${this.state.blockAllDisabled ? ' disabled' : ''}`}
+								onClick={this.clickBlockAll}
+							>
+								{blockText}
+							</div>
+						)}
 					</div>
 				</div>
 				{

app/panel/components/Blocking/Categories.jsx

@@ -29,28 +29,78 @@ class Categories extends React.Component {
 	* @return {ReactComponent}   ReactComponent instance
 	*/
 	render() {
-		const { categories, expandAll } = this.props;
+		const {
+			categories,
+			expandAll,
+			antiTracking,
+			enable_anti_tracking,
+		} = this.props;
 		const globalBlocking = !!this.props.globalBlocking;
 		const filtered = !!this.props.filtered;
-		const categoryList = categories.map((cat, index) => (
-			<Category
-				expandAll={expandAll}
-				globalBlocking={globalBlocking}
-				index={index}
-				category={cat}
-				actions={this.props.actions}
-				key={cat.id}
-				filtered={filtered}
-				showToast={this.props.showToast}
-				show_tracker_urls={this.props.show_tracker_urls}
-				sitePolicy={this.props.sitePolicy}
-				paused_blocking={this.props.paused_blocking}
-				language={this.props.language}
-				smartBlockActive={this.props.smartBlockActive}
-				smartBlock={this.props.smartBlock}
-			/>
-		));
-		return <div className="scroll-content">{ categoryList }</div>;
+
+		const renderCategory = (category, index, isUnknown) => {
+			let whitelistedTotal = 0;
+			const unknownCategoryMapping = isUnknown ? (
+				{
+					id: 'anti_tracking_unknown',
+					name: t('unknown'),
+					description: t('unknown_description'),
+					img_name: 'anti_tracking_unknown',
+					num_total: antiTracking.unknownTrackers.length,
+					num_blocked: antiTracking.unknownTrackerCount,
+					num_shown: antiTracking.hide ? 0 : antiTracking.unknownTrackers.length,
+					trackers: antiTracking.unknownTrackers.map((unknownTracker) => {
+						if (unknownTracker.whitelisted) { whitelistedTotal++; }
+						return {
+							name: unknownTracker.name,
+							domains: unknownTracker.domains,
+							whitelisted: unknownTracker.whitelisted,
+							blocked: false,
+							catId: 'anti_tracking_unknown',
+							description: '',
+							id: unknownTracker.name + unknownTracker.domains[0],
+							shouldShow: true,
+							cliqzAdCount: unknownTracker.ads,
+							cliqzCookieCount: unknownTracker.cookies,
+							cliqzFingerprintCount: unknownTracker.fingerprints,
+						};
+					}),
+					whitelistedTotal,
+				}
+			) : null;
+
+			return (
+				<Category
+					expandAll={expandAll}
+					globalBlocking={globalBlocking}
+					index={index}
+					category={isUnknown ? unknownCategoryMapping : category}
+					actions={this.props.actions}
+					key={isUnknown ? unknownCategoryMapping.id : category.id}
+					filtered={filtered}
+					showToast={this.props.showToast}
+					show_tracker_urls={this.props.show_tracker_urls}
+					sitePolicy={this.props.sitePolicy}
+					paused_blocking={this.props.paused_blocking}
+					language={this.props.language}
+					smartBlockActive={this.props.smartBlockActive}
+					smartBlock={this.props.smartBlock}
+					enable_anti_tracking={enable_anti_tracking}
+					isUnknown={isUnknown}
+				/>
+			);
+		};
+
+		const categoryList = categories.map((category, index) => renderCategory(category, index));
+		const unknownCategory = antiTracking && antiTracking.unknownTrackers.length
+			? renderCategory(null, categoryList.length, true) : null;
+
+		return (
+			<div className="scroll-content">
+				{categoryList}
+				{unknownCategory}
+			</div>
+		);
 	}
 }