GH-1798: Update Unknown category to include Ad Blocker unknowns

CHANGELOG.md

@@ -1,6 +1,6 @@
 ### GHOSTERY 8.4.1 (UNRELEASED)
 
-+ Add new Data Points tracker category in detail view with anti-tracking whitelist (#417)
++ Add new Unknown tracker category in detail view with anti-tracking whitelist (#417, #433)
 + Fixes broken `target=_blank` links in Opera (#426)
 + Fixes error `Uncaught TypeError: c.querySelectorAll` (#406)
 + Show ad-blocking icons in detail view tracker list (#411)

CODEOWNERS

@@ -13,21 +13,21 @@
 /src/classes/PolicySmartBlock.js @jsignanini
 /src/classes/Conf.js @zarembsky
 /src/classes/ConfData.js @zarembsky
-/src/classes/PanelData.js @zarembsky
+/src/classes/PanelData.js @wlycdgr
 
 # Background
 /src/background.js @zarembsky
 
 # The Ghostery Hub
-/app/hub/ @IAmThePan
+/app/hub/ @Eden12345
 
 # Shared Components
-/app/shared-components @IAmThePan
+/app/shared-components @wlycdgr
 
 # Build Tools
 .eslintrc.js @christophertino
 babel.config.js @christophertino
 webpack.config.js @christophertino
 
 # Unit Tests
-/test/ @IAmThePan
+/test/ @Eden12345

app/images/panel/unknown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><g fill="none" transform="translate(1 1)"><circle cx="11.865" cy="11.865" r="11.865" fill="#8459A5" stroke="#86449B" stroke-width=".5"/><path fill="#86449B" d="M17.152 6.847a1.994 1.994 0 0 0-1.462-.607h-6.9c-.57 0-1.058.203-1.463.607A1.995 1.995 0 0 0 6.72 8.31v6.9c0 .57.203 1.058.607 1.463.405.404.893.607 1.463.607h6.9c.57 0 1.058-.203 1.462-.607.405-.405.608-.893.608-1.463v-6.9c0-.57-.203-1.058-.608-1.463zm-5.86 5.991a1.469 1.469 0 0 1-1.079.446 1.469 1.469 0 0 1-1.078-.446 1.469 1.469 0 0 1-.446-1.078c0-.422.15-.781.446-1.078a1.469 1.469 0 0 1 1.078-.446c.422 0 .78.149 1.078.446.291.282.453.672.446 1.078.007.406-.155.796-.446 1.078zm4.053 0a1.468 1.468 0 0 1-1.078.446 1.469 1.469 0 0 1-1.079-.446 1.469 1.469 0 0 1-.445-1.078c0-.422.149-.781.445-1.078a1.469 1.469 0 0 1 1.079-.446c.421 0 .781.149 1.078.446.29.282.452.672.446 1.078.006.406-.155.796-.446 1.078z"/><path fill="#F5A623" d="M16.672 6.367a1.994 1.994 0 0 0-1.462-.607h-6.9c-.57 0-1.058.203-1.463.607A1.995 1.995 0 0 0 6.24 7.83v6.9c0 .57.203 1.058.607 1.463.405.404.893.607 1.463.607h6.9c.57 0 1.058-.203 1.462-.607.405-.405.608-.893.608-1.463v-6.9c0-.57-.203-1.058-.608-1.463zm-5.86 5.991a1.469 1.469 0 0 1-1.079.446 1.469 1.469 0 0 1-1.078-.446 1.469 1.469 0 0 1-.446-1.078c0-.422.15-.781.446-1.078a1.469 1.469 0 0 1 1.078-.446c.422 0 .78.149 1.078.446.291.282.453.672.446 1.078.007.406-.155.796-.446 1.078zm4.053 0a1.468 1.468 0 0 1-1.078.446 1.469 1.469 0 0 1-1.079-.446 1.469 1.469 0 0 1-.445-1.078c0-.422.149-.781.445-1.078a1.469 1.469 0 0 1 1.079-.446c.421 0 .781.149 1.078.446.29.282.452.672.446 1.078.006.406-.155.796-.446 1.078z"/></g></svg>

app/panel/actions/BlockingActions.js

@@ -15,11 +15,11 @@ import {
 	UPDATE_BLOCKING_DATA,
 	UPDATE_BLOCK_ALL_TRACKERS,
 	UPDATE_CATEGORIES,
-	UPDATE_ANTI_TRACKING_HIDE,
+	UPDATE_UNKNOWN_CATEGORY_HIDE,
 	UPDATE_CATEGORY_BLOCKED,
 	UPDATE_TRACKER_BLOCKED,
 	UPDATE_TRACKER_TRUST_RESTRICT,
-	UPDATE_ANTI_TRACKING_WHITELIST,
+	UPDATE_CLIQZ_MODULE_WHITELIST,
 	TOGGLE_EXPAND_ALL
 } from '../constants/constants';
 
@@ -64,9 +64,9 @@ export function updateCategories(data) {
  * @param  {Object} data
  * @return {Object}
  */
-export function updateAntiTrackingHide(data) {
+export function updateUnknownCategoryHide(data) {
 	return {
-		type: UPDATE_ANTI_TRACKING_HIDE,
+		type: UPDATE_UNKNOWN_CATEGORY_HIDE,
 		data,
 	};
 }
@@ -119,16 +119,16 @@ export function updateTrackerTrustRestrict(data) {
 }
 
 /**
- * Called from Tracker.handleAntiTrackingWhitelist()
+ * Called from Tracker.handleCliqzTrackerWhitelist()
  * @param  {Object} data
  * @return {Object} dispatch
  */
-export function updateAntiTrackingWhitelist(unknownTracker) {
+export function updateCliqzModuleWhitelist(unknownTracker) {
 	return function(dispatch, getState) {
 		// use redux-thunk to get pageHost from summary
 		const { pageHost } = getState().summary;
 		dispatch({
-			type: UPDATE_ANTI_TRACKING_WHITELIST,
+			type: UPDATE_CLIQZ_MODULE_WHITELIST,
 			data: { unknownTracker, pageHost },
 		});
 	};

app/panel/components/Blocking.jsx

@@ -93,7 +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
+		const updatedUnknownCategory = JSON.parse(JSON.stringify(this.props.unknownCategory)); // deep clone
 
 		updated_categories.forEach((category) => {
 			let count = 0;
@@ -112,9 +112,9 @@ class Blocking extends React.Component {
 			category.num_shown = (show) ? count : 0;
 		});
 
-		updatedAntiTracking.hide = !(filterName === 'all' || filterName === 'unknown');
+		updatedUnknownCategory.hide = !(filterName === 'all' || filterName === 'unknown');
 		this.props.actions.updateCategories(updated_categories);
-		this.props.actions.updateAntiTrackingHide(updatedAntiTracking);
+		this.props.actions.updateUnknownCategoryHide(updatedUnknownCategory);
 	}
 
 	/**
@@ -284,7 +284,7 @@ class Blocking extends React.Component {
 		const {
 			actions,
 			categories,
-			antiTracking,
+			unknownCategory,
 			enable_anti_tracking,
 			expand_all_trackers,
 			is_expanded,
@@ -329,7 +329,7 @@ class Blocking extends React.Component {
 								language={language}
 								smartBlockActive={smartBlockActive}
 								smartBlock={smartBlock}
-								antiTracking={antiTracking}
+								unknownCategory={unknownCategory}
 								enable_anti_tracking={enable_anti_tracking}
 							/>
 						)}

app/panel/components/Blocking/Categories.jsx

@@ -32,7 +32,7 @@ class Categories extends React.Component {
 		const {
 			categories,
 			expandAll,
-			antiTracking,
+			unknownCategory,
 			enable_anti_tracking,
 			sitePolicy,
 		} = this.props;
@@ -43,22 +43,23 @@ class Categories extends React.Component {
 			let whitelistedTotal = 0;
 			const unknownCategoryMapping = isUnknown ? (
 				{
-					id: 'anti_tracking_unknown',
+					id: '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) => {
+					img_name: 'unknown',
+					num_total: unknownCategory.unknownTrackers.length,
+					num_blocked: unknownCategory.unknownTrackerCount,
+					num_shown: unknownCategory.hide ? 0 : unknownCategory.unknownTrackers.length,
+					trackers: unknownCategory.unknownTrackers.map((unknownTracker) => {
 						if (unknownTracker.whitelisted) { whitelistedTotal++; }
 						return {
 							name: unknownTracker.name,
 							domains: unknownTracker.domains,
 							whitelisted: unknownTracker.whitelisted,
+							type: unknownTracker.type,
 							siteRestricted: sitePolicy === 1,
 							blocked: false,
-							catId: 'anti_tracking_unknown',
+							catId: 'unknown',
 							description: '',
 							id: unknownTracker.name + unknownTracker.domains[0],
 							shouldShow: true,
@@ -94,13 +95,13 @@ class Categories extends React.Component {
 		};
 
 		const categoryList = categories.map((category, index) => renderCategory(category, index));
-		const unknownCategory = antiTracking && antiTracking.unknownTrackers.length
+		const renderUnknownCategory = unknownCategory && unknownCategory.unknownTrackers.length
 			? renderCategory(null, categoryList.length, true) : null;
 
 		return (
 			<div className="scroll-content">
 				{categoryList}
-				{unknownCategory}
+				{renderUnknownCategory}
 			</div>
 		);
 	}

app/panel/components/Blocking/Category.jsx

@@ -13,8 +13,6 @@
 
 import React from 'react';
 import Trackers from './Trackers';
-import { CliqzFeature } from '../BuildingBlocks';
-import Globals from '../../../../src/classes/Globals';
 
 /**
  * @class Implement Category component, which represents a
@@ -165,8 +163,6 @@ class Category extends React.Component {
 			category,
 			paused_blocking,
 			sitePolicy,
-			enable_anti_tracking,
-			actions,
 			isUnknown,
 		} = this.props;
 
@@ -185,26 +181,11 @@ class Category extends React.Component {
 			trackersBlockedCount = category.num_blocked || 0;
 		}
 
-		const clickCliqzFeature = (options) => {
-			const { feature, status, text } = options;
-			this.props.actions.showNotification({
-				updated: feature,
-				reload: true,
-				text,
-			});
-			actions.toggleCliqzFeature(feature, status);
-		};
-		const cliqzInactive = paused_blocking || sitePolicy || Globals.IS_CLIQZ;
-
 		return (
 			<div className={`${category.num_shown === 0 ? 'hide' : ''} blocking-category`}>
 				<div className={`sticky-category${this.state.showTooltip ? ' no-sticky' : ''}${isUnknown ? ' anti-tracking-header' : ''}`}>
 					{isUnknown && (
-						<div className="Category__antiTrackingDivider">
-							<p className="Category__antiTrackingDividerText">
-								{t('enhanced_anti_tracking')}
-							</p>
-						</div>
+						<div className="Category__antiTrackingDivider" />
 					)}
 					<div className="row align-middle">
 						<div className="columns shrink align-self-top">
@@ -272,20 +253,6 @@ class Category extends React.Component {
 									</span>
 								</div>
 							)}
-							{isUnknown && (
-								<div className="Category__antiTrackingButton">
-									<CliqzFeature
-										clickButton={clickCliqzFeature}
-										type="anti_track"
-										active={enable_anti_tracking}
-										cliqzInactive={cliqzInactive}
-										isTiny
-										isTooltipHeader
-										isTooltipBody
-										tooltipPosition="left"
-									/>
-								</div>
-							)}
 						</div>
 					</div>
 				</div>

app/panel/components/Blocking/Tracker.jsx

@@ -42,7 +42,7 @@ class Tracker extends React.Component {
 		this.clickTrackerStatus = this.clickTrackerStatus.bind(this);
 		this.clickTrackerTrust = this.clickTrackerTrust.bind(this);
 		this.clickTrackerRestrict = this.clickTrackerRestrict.bind(this);
-		this.handleAntiTrackingWhitelist = this.handleAntiTrackingWhitelist.bind(this);
+		this.handleCliqzTrackerWhitelist = this.handleCliqzTrackerWhitelist.bind(this);
 	}
 
 	/**
@@ -217,10 +217,10 @@ class Tracker extends React.Component {
 	 * Trigger actions which persist the new setting and notify user
 	 * that the page should be reloaded.
 	 */
-	handleAntiTrackingWhitelist() {
+	handleCliqzTrackerWhitelist() {
 		const { tracker } = this.props;
 
-		this.props.actions.updateAntiTrackingWhitelist(tracker);
+		this.props.actions.updateCliqzModuleWhitelist(tracker);
 		this.props.actions.showNotification({
 			updated: `${tracker.name}-whitelisting-status-changed`,
 			reload: true,
@@ -335,16 +335,18 @@ class Tracker extends React.Component {
 						{!tracker.whitelisted && this._renderCliqzStatsContainer()}
 					</div>
 					<div className="columns shrink align-self-justify collapse-right">
-						{!isUnknown ? renderKnownTrackerButtons(
+						{!isUnknown && renderKnownTrackerButtons(
 							this.props.tracker.ss_allowed,
 							this.props.tracker.ss_blocked,
 							this.clickTrackerTrust,
 							this.clickTrackerRestrict,
 							this.clickTrackerStatus,
-						) : renderUnknownTrackerButtons(
-							this.handleAntiTrackingWhitelist,
+						)}
+						{isUnknown && tracker.type === 'antiTracking' && renderUnknownTrackerButtons(
+							this.handleCliqzTrackerWhitelist,
 							tracker.whitelisted,
 							tracker.siteRestricted,
+							tracker.type,
 						)}
 					</div>
 				</div>

app/panel/components/Blocking/trackerButtonRenderHelpers.jsx

@@ -54,7 +54,7 @@ export const renderKnownTrackerButtons = (
 );
 
 export const renderUnknownTrackerButtons = (
-	handleAntiTrackingWhitelist, whitelisted, siteRestricted
+	handleCliqzTrackerWhitelist, whitelisted, siteRestricted, type
 ) => {
 	const svgContainerClasses = ClassNames('unknown-svg-container', {
 		whitelisted: whitelisted && !siteRestricted,
@@ -65,7 +65,7 @@ export const renderUnknownTrackerButtons = (
 		<div className={svgContainerClasses}>
 			{/* USE INLINE SVG FOR TRUST CIRCLE TO CHANGE COLORS WITH CSS */}
 			<span className="t-tooltip-up-left" data-g-tooltip={t('panel_tracker_trust_tooltip')}>
-				<svg className="anti-track-trust" onClick={handleAntiTrackingWhitelist} width="20px" height="20px" viewBox="0 0 20 20">
+				<svg className="cliqz-tracker-trust" onClick={handleCliqzTrackerWhitelist} width="20px" height="20px" viewBox="0 0 20 20">
 					<g transform="translate(1 1)" fill="none" fillRule="evenodd">
 						<path className="border" stroke="#96c761" d="M-.5-.5h18.3v18.217H-.5z" />
 						<path className="background" stroke="#FFF" fill="#96c761" d="M.5.5h16.3v16.217H.5z" />
@@ -78,15 +78,24 @@ export const renderUnknownTrackerButtons = (
 
 			{/* USE INLINE SVG FOR ANTI-TRACKING SHIELD TO CHANGE COLORS WITH CSS */}
 			<span className="t-tooltip-up-left" data-g-tooltip={t('panel_tracker_scrub_tooltip')}>
-				<svg className="anti-track-scrub" onClick={handleAntiTrackingWhitelist} width="20px" height="20px" viewBox="0 0 20 20">
+				<svg className="cliqz-tracker-scrub" onClick={handleCliqzTrackerWhitelist} width="20px" height="20px" viewBox="0 0 20 20">
 					<g transform="translate(1 1)" fill="none" fillRule="evenodd">
 						<path className="border" stroke="#00AEF0" d="M-.5-.5h18.3v18.217H-.5z" />
 						<path className="background" stroke="#FFF" fill="#00AEF0" d="M.5.5h16.3v16.217H.5z" />
-						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 19.5 19.5">
-							<g transform="translate(2.5 2.5)">
-								<path className="shield" fill="none" fillRule="evenodd" stroke="#FFF" strokeWidth="1.4" d="M8.149 1.022a.505.505 0 0 0-.298 0l-6.404 1.7A.574.574 0 0 0 1 3.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-.566L8.15 1.022z" />
-							</g>
-						</svg>
+						{type === 'antiTracking' ? (
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 19.5 19.5">
+								<g transform="translate(2.5 2.5)">
+									<path className="shield" fill="none" fillRule="evenodd" stroke="#FFF" strokeWidth="1.4" d="M8.149 1.022a.505.505 0 0 0-.298 0l-6.404 1.7A.574.574 0 0 0 1 3.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-.566L8.15 1.022z" />
+								</g>
+							</svg>
+						) : (
+							<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 20 20">
+								<g fill="none" fillRule="evenodd" transform="translate(2 2)">
+									<path className="shield" d="M10.101 1.922l3.183 3.473-.206 4.706-3.473 3.183-4.706-.206-3.183-3.473.206-4.706 3.473-3.183z" />
+									<path className="shield" fill="#FFF" stroke="#FFF" d="M3.527 11.132c.416.417.83.833 1.247 1.246.03.03.09.046.137.046 1.424.003 2.847.003 4.272 0a.245.245 0 0 0 .154-.064c1.009-1.004 2.015-2.011 3.02-3.02a.244.244 0 0 0 .067-.154c.004-1.428.003-2.856.002-4.285 0-.039-.01-.09-.034-.116-.418-.424-.839-.845-1.255-1.263l-7.61 7.61m-.577-.572l7.608-7.609c-.408-.408-.821-.824-1.24-1.237a.21.21 0 0 0-.134-.047 937.737 937.737 0 0 0-4.272 0 .241.241 0 0 0-.156.062 1000.334 1000.334 0 0 0-3.03 3.029.211.211 0 0 0-.059.131 1227.38 1227.38 0 0 0 0 4.31.17.17 0 0 0 .04.113c.416.421.835.84 1.243 1.248M13.2 7.053c0 .769-.003 1.536.002 2.304a.536.536 0 0 1-.168.412c-1.091 1.086-2.18 2.175-3.266 3.265a.527.527 0 0 1-.4.168 997.623 997.623 0 0 0-4.644 0 .53.53 0 0 1-.4-.166C3.237 11.942 2.145 10.85 1.05 9.76a.508.508 0 0 1-.16-.389C.892 7.824.892 6.276.889 4.727c0-.162.049-.286.163-.4 1.095-1.09 2.187-2.181 3.276-3.275.11-.11.23-.163.387-.163 1.553.003 3.105.003 4.658 0 .158 0 .278.05.388.161 1.093 1.097 2.188 2.191 3.285 3.285a.498.498 0 0 1 .156.377c-.004.78-.002 1.56-.002 2.341" />
+								</g>
+							</svg>
+						)}
 					</g>
 				</svg>
 			</span>