Finish rebuilding feature in original branch with cleaner code

app/panel/actions/BlockingActions.js

@@ -18,7 +18,8 @@ import {
 	UPDATE_CATEGORY_BLOCKED,
 	UPDATE_TRACKER_BLOCKED,
 	UPDATE_TRACKER_TRUST_RESTRICT,
-	TOGGLE_EXPAND_ALL
+	TOGGLE_EXPAND_ALL,
+	UPDATE_ANTI_TRACKING_NUM_SHOWN
 } from '../constants/constants';
 
 /**
@@ -56,6 +57,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 updateAntiTrackingNumShown(data) {
+	return {
+		type: UPDATE_ANTI_TRACKING_NUM_SHOWN,
+		data,
+	};
+}
+
 /**
  * Called from Category.clickCategoryStatus()
  * @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,11 @@ class Blocking extends React.Component {
 			category.num_shown = (show) ? count : 0;
 		});
 
+		updatedAntiTracking.num_shown = filterName === 'all' || filterName === 'other_data_points'
+			? updatedAntiTracking.totalUnsafeCount : 0;
+
 		this.props.actions.updateCategories(updated_categories);
+		this.props.actions.updateAntiTrackingNumShown(updatedAntiTracking);
 	}
 
 	/**

app/panel/components/Blocking/Categories.jsx

@@ -30,9 +30,9 @@ class Categories extends React.Component {
 	*/
 	render() {
 		const { categories, expandAll, antiTracking } = this.props;
-		console.log(categories, antiTracking)
 		const globalBlocking = !!this.props.globalBlocking;
 		const filtered = !!this.props.filtered;
+
 		const categoryList = categories.map((cat, index) => (
 			<Category
 				expandAll={expandAll}
@@ -51,10 +51,57 @@ class Categories extends React.Component {
 				smartBlock={this.props.smartBlock}
 			/>
 		));
+
+		const otherDataPointsCategory = (antiTracking && antiTracking.totalUnsafeCount) ? (
+			<Category
+				expandAll={expandAll}
+				globalBlocking={globalBlocking}
+				index={categoryList.length}
+				category={(() => {
+					const unknownURLs = Object.keys(antiTracking.unknown);
+					const unsafeURLs = unknownURLs.filter(url => antiTracking.unknown[url] === 'unsafe');
+					return {
+						id: 'other_data_points',
+						name: 'Other Data Points',
+						description: 'Anonymized data points by Anti-Tracking',
+						img_name: 'other_data_points',
+						num_total: antiTracking.totalUnsafeCount,
+						num_blocked: 0,
+						num_shown: antiTracking.num_shown,
+						trackers: unsafeURLs.map((url, idx) => ({
+							blocked: false,
+							catId: 'other_data_points',
+							description: '',
+							id: 100000000 + idx,
+							name: url,
+							shouldShow: true,
+							sources: false,
+							ss_allowed: false,
+							ss_blocked: true,
+							warningCompatibility: false,
+							warningInsecure: false,
+							warningSlow: false,
+							warningSmartBlock: false,
+						})),
+					};
+				})()}
+				actions={this.props.actions}
+				key="other_data_points"
+				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}
+			/>
+		) : null;
+
 		return (
 			<div className="scroll-content">
 				{categoryList}
-				{antiTracking && <div />}
+				{otherDataPointsCategory}
 			</div>
 		);
 	}

app/panel/components/Blocking/Category.jsx

@@ -163,7 +163,6 @@ class Category extends React.Component {
 		const globalBlocking = !!this.props.globalBlocking;
 		const filteredText = { color: 'red' };
 		const checkBoxStyle = `${(this.state.totalShownBlocked && this.state.allShownBlocked) ? 'all-blocked ' : (this.state.totalShownBlocked ? 'some-blocked ' : '')} checkbox-container`;
-
 		let trackersBlockedCount;
 		if (paused_blocking || sitePolicy === 2) {
 			trackersBlockedCount = 0;
@@ -197,45 +196,58 @@ class Category extends React.Component {
 									}
 									<span className="count">{`${category.num_total} `}</span>
 									<span className="text">
-										{ (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') }
+										{ category.id === 'other_data_points' ? ' DATA POINTS' : (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') }
 									</span>
 								</div>
 								{
-									!!trackersBlockedCount &&
+									(!!trackersBlockedCount || category.id === 'other_data_points') &&
 									<div className="blocked-count">
-										<span className="count">{`${trackersBlockedCount} `}</span>
-										<span className="text">{ t('blocking_category_blocked') }</span>
+										<span className="count">
+											{category.id === 'other_data_points' ? category.num_total : `${trackersBlockedCount} `}
+										</span>
+										<span className="text">
+											{category.id === 'other_data_points' ? ' ANONYMIZED' : t('blocking_category_blocked') }
+										</span>
 									</div>
 								}
 							</div>
 						</div>
 						<div className="columns collapse-left collapse-right shrink align-self-justify">
 							<div className={this.state.isExpanded ? 'caret-up' : 'caret-down'} onClick={this.toggleCategoryTrackers} />
-							<div className={checkBoxStyle} onClick={this.clickCategoryStatus}>
-								<span className={this.props.index ? 't-tooltip-up-left' : 't-tooltip-down-left'} data-g-tooltip={t('panel_tracker_block_tooltip')} onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip} >
-									<svg className="blocking-icons status t-tooltip-up-left" data-g-tooltip={t('panel_tracker_block_tooltip')} onClick={this.clickTrackerStatus} width="20px" height="20px" viewBox="0 0 20 20">
-										<g transform="translate(1 1)" fill="none" fillRule="evenodd">
-											<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
-											<path className="background" d="M.5.5h16.3v16.217H.5z" />
-											<svg width="20px" height="20px" viewBox="1.5 1 20 20">
-												<path className="dash" d="M5,10.5 15,10.5" />
-											</svg>
-											<svg width="20px" height="20px" viewBox="-2.5 -2.5 20 20">
-												<path className="check" d="M8.062 6l3.51-3.51c.57-.57.57-1.493 0-2.063-.57-.57-1.495-.57-2.063 0L6 3.937 2.49.428c-.57-.57-1.493-.57-2.063 0-.57.57-.57 1.494 0 2.064L3.937 6 .426 9.51c-.57.57-.57 1.493 0 2.063.57.57 1.494.57 2.063 0L6 8.063l3.51 3.508c.57.57 1.493.57 2.063 0 .57-.57.57-1.493 0-2.062L8.063 6z" fillRule="nonzero" />
-											</svg>
-											<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
-												<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
-											</svg>
-											<svg width="20px" height="20px" viewBox="-2 -2 20 20">
-												<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
-													<path d="M1.958 1.958l7.834 7.834" />
-													<circle cx="5.753" cy="5.753" r="5.753" />
-												</g>
-											</svg>
-										</g>
+							{category.id !== 'other_data_points' && (
+								<div className={checkBoxStyle} onClick={this.clickCategoryStatus}>
+									<span className={this.props.index ? 't-tooltip-up-left' : 't-tooltip-down-left'} data-g-tooltip={t('panel_tracker_block_tooltip')} onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip} >
+										<svg className="blocking-icons status t-tooltip-up-left" data-g-tooltip={t('panel_tracker_block_tooltip')} onClick={this.clickTrackerStatus} width="20px" height="20px" viewBox="0 0 20 20">
+											<g transform="translate(1 1)" fill="none" fillRule="evenodd">
+												<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
+												<path className="background" d="M.5.5h16.3v16.217H.5z" />
+												<svg width="20px" height="20px" viewBox="1.5 1 20 20">
+													<path className="dash" d="M5,10.5 15,10.5" />
+												</svg>
+												<svg width="20px" height="20px" viewBox="-2.5 -2.5 20 20">
+													<path className="check" d="M8.062 6l3.51-3.51c.57-.57.57-1.493 0-2.063-.57-.57-1.495-.57-2.063 0L6 3.937 2.49.428c-.57-.57-1.493-.57-2.063 0-.57.57-.57 1.494 0 2.064L3.937 6 .426 9.51c-.57.57-.57 1.493 0 2.063.57.57 1.494.57 2.063 0L6 8.063l3.51 3.508c.57.57 1.493.57 2.063 0 .57-.57.57-1.493 0-2.062L8.063 6z" fillRule="nonzero" />
+												</svg>
+												<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
+													<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
+												</svg>
+												<svg width="20px" height="20px" viewBox="-2 -2 20 20">
+													<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
+														<path d="M1.958 1.958l7.834 7.834" />
+														<circle cx="5.753" cy="5.753" r="5.753" />
+													</g>
+												</svg>
+											</g>
+										</svg>
+									</span>
+								</div>
+							)}
+							{category.id === 'other_data_points' && (
+								<span className={this.props.index ? 't-tooltip-up-left' : 't-tooltip-down-left'} data-g-tooltip="Data points anonymized by Anti-Tracking" onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip} >
+									<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+										<path d="M10.190881 1.028859c-.114948-.038479-.267884-.038479-.382831 0L1.574491 3.211632C1.229895 3.2881 1 3.594463 1 3.93906c.038479 5.85937 3.178574 11.297185 8.578155 14.935303.114948.076469.268129.114948.42131.114948.153182 0 .306363-.038479.42131-.114948 5.399581-3.638118 8.539676-9.075933 8.578155-14.935303 0-.344597-.229894-.65096-.574491-.727428l-8.233558-2.182773z" stroke="#1DAFED" strokeWidth="2" fill="none" fillRule="evenodd" />
 									</svg>
 								</span>
-							</div>
+							)}
 						</div>
 					</div>
 				</div>
@@ -253,6 +265,7 @@ class Category extends React.Component {
 						language={this.props.language}
 						smartBlockActive={this.props.smartBlockActive}
 						smartBlock={this.props.smartBlock}
+						isDataPoint={category.id === 'other_data_points'}
 					/>
 				}
 			</div>

app/panel/components/Blocking/Tracker.jsx

@@ -205,7 +205,7 @@ class Tracker extends React.Component {
 	* @return {ReactComponent}   ReactComponent instance
 	*/
 	render() {
-		const { tracker } = this.props;
+		const { tracker, isDataPoint } = this.props;
 		let sources;
 
 		if (tracker.sources) {
@@ -229,57 +229,59 @@ class Tracker extends React.Component {
 						<div className={`warning-image right${this.state.warningImageTitle ? ' t-tooltip-up-right' : ''}`} data-g-tooltip={this.state.warningImageTitle} />
 					</div>
 					<div className="columns collapse-left">
-						<div className="trk-name" onClick={this.toggleDescription}>{ tracker.name }</div>
+						<div className={`${isDataPoint ? 'data-point' : ''} trk-name`} onClick={this.toggleDescription}>{ tracker.name }</div>
 					</div>
-					<div className="columns shrink align-self-justify collapse-right">
-						<div className="svg-container">
-							<span className="t-tooltip-up-left" data-g-tooltip={this.props.tracker.ss_allowed ? t('summary_undo') : t('panel_tracker_trust_tooltip')}>
-								<svg className="blocking-icons trust" onClick={this.clickTrackerTrust} width="20px" height="20px" viewBox="0 0 20 20">
-									<g transform="translate(1 1)" fill="none" fillRule="evenodd">
-										<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
-										<path className="background" d="M.5.5h16.3v16.217H.5z" />
-										<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
-											<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
-										</svg>
-									</g>
-								</svg>
-							</span>
-							<span className="t-tooltip-up-left" data-g-tooltip={this.props.tracker.ss_blocked ? t('summary_undo') : t('panel_tracker_restrict_tooltip')} >
-								<svg className="blocking-icons restrict" onClick={this.clickTrackerRestrict} width="20px" height="20px" viewBox="0 0 20 20">
-									<g transform="translate(1 1)" fill="none" fillRule="evenodd">
-										<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
-										<path className="background" d="M.5.5h16.3v16.217H.5z" />
-										<svg width="20px" height="20px" viewBox="-2 -2 20 20">
-											<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
-												<path d="M1.958 1.958l7.834 7.834" />
-												<circle cx="5.753" cy="5.753" r="5.753" />
-											</g>
-										</svg>
-									</g>
-								</svg>
-							</span>
-							<span className={(!this.props.tracker.ss_blocked && !this.props.tracker.ss_allowed) ? 't-tooltip-up-left' : ''} data-g-tooltip={t('panel_tracker_block_tooltip')} >
-								<svg className="blocking-icons status" onClick={() => { if (this.props.tracker.ss_allowed || this.props.tracker.ss_blocked) { return; } this.clickTrackerStatus(); }} width="20px" height="20px" viewBox="0 0 20 20">
-									<g transform="translate(1 1)" fill="none" fillRule="evenodd">
-										<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
-										<path className="background" d="M.5.5h16.3v16.217H.5z" />
-										<svg width="20px" height="20px" viewBox="-2.5 -2.5 20 20">
-											<path className="check" d="M8.062 6l3.51-3.51c.57-.57.57-1.493 0-2.063-.57-.57-1.495-.57-2.063 0L6 3.937 2.49.428c-.57-.57-1.493-.57-2.063 0-.57.57-.57 1.494 0 2.064L3.937 6 .426 9.51c-.57.57-.57 1.493 0 2.063.57.57 1.494.57 2.063 0L6 8.063l3.51 3.508c.57.57 1.493.57 2.063 0 .57-.57.57-1.493 0-2.062L8.063 6z" fillRule="nonzero" />
-										</svg>
-										<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
-											<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
-										</svg>
-										<svg width="20px" height="20px" viewBox="-2 -2 20 20">
-											<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
-												<path d="M1.958 1.958l7.834 7.834" />
-												<circle cx="5.753" cy="5.753" r="5.753" />
-											</g>
-										</svg>
-									</g>
-								</svg>
-							</span>
+					{!isDataPoint && (
+						<div className="columns shrink align-self-justify collapse-right">
+							<div className="svg-container">
+								<span className="t-tooltip-up-left" data-g-tooltip={this.props.tracker.ss_allowed ? t('summary_undo') : t('panel_tracker_trust_tooltip')}>
+									<svg className="blocking-icons trust" onClick={this.clickTrackerTrust} width="20px" height="20px" viewBox="0 0 20 20">
+										<g transform="translate(1 1)" fill="none" fillRule="evenodd">
+											<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
+											<path className="background" d="M.5.5h16.3v16.217H.5z" />
+											<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
+												<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
+											</svg>
+										</g>
+									</svg>
+								</span>
+								<span className="t-tooltip-up-left" data-g-tooltip={this.props.tracker.ss_blocked ? t('summary_undo') : t('panel_tracker_restrict_tooltip')} >
+									<svg className="blocking-icons restrict" onClick={this.clickTrackerRestrict} width="20px" height="20px" viewBox="0 0 20 20">
+										<g transform="translate(1 1)" fill="none" fillRule="evenodd">
+											<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
+											<path className="background" d="M.5.5h16.3v16.217H.5z" />
+											<svg width="20px" height="20px" viewBox="-2 -2 20 20">
+												<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
+													<path d="M1.958 1.958l7.834 7.834" />
+													<circle cx="5.753" cy="5.753" r="5.753" />
+												</g>
+											</svg>
+										</g>
+									</svg>
+								</span>
+								<span className={(!this.props.tracker.ss_blocked && !this.props.tracker.ss_allowed) ? 't-tooltip-up-left' : ''} data-g-tooltip={t('panel_tracker_block_tooltip')} >
+									<svg className="blocking-icons status" onClick={() => { if (this.props.tracker.ss_allowed || this.props.tracker.ss_blocked) { return; } this.clickTrackerStatus(); }} width="20px" height="20px" viewBox="0 0 20 20">
+										<g transform="translate(1 1)" fill="none" fillRule="evenodd">
+											<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
+											<path className="background" d="M.5.5h16.3v16.217H.5z" />
+											<svg width="20px" height="20px" viewBox="-2.5 -2.5 20 20">
+												<path className="check" d="M8.062 6l3.51-3.51c.57-.57.57-1.493 0-2.063-.57-.57-1.495-.57-2.063 0L6 3.937 2.49.428c-.57-.57-1.493-.57-2.063 0-.57.57-.57 1.494 0 2.064L3.937 6 .426 9.51c-.57.57-.57 1.493 0 2.063.57.57 1.494.57 2.063 0L6 8.063l3.51 3.508c.57.57 1.493.57 2.063 0 .57-.57.57-1.493 0-2.062L8.063 6z" fillRule="nonzero" />
+											</svg>
+											<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
+												<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
+											</svg>
+											<svg width="20px" height="20px" viewBox="-2 -2 20 20">
+												<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
+													<path d="M1.958 1.958l7.834 7.834" />
+													<circle cx="5.753" cy="5.753" r="5.753" />
+												</g>
+											</svg>
+										</g>
+									</svg>
+								</span>
+							</div>
 						</div>
-					</div>
+					)}
 				</div>
 				{
 					this.state.showMoreInfo &&

app/panel/components/Blocking/Trackers.jsx

@@ -38,7 +38,7 @@ class Trackers extends React.Component {
 	* @return {ReactComponent}   ReactComponent instance
 	*/
 	render() {
-		const { trackers } = this.props;
+		const { trackers, isDataPoint } = this.props;
 		let trackerList;
 		if (this.props.globalBlocking) {
 			const trackersToShow = [];
@@ -72,6 +72,7 @@ class Trackers extends React.Component {
 					language={this.props.language}
 					smartBlockActive={this.props.smartBlockActive}
 					smartBlock={this.props.smartBlock}
+					isDataPoint={isDataPoint}
 				/>
 			));
 		}

app/panel/constants/constants.js

@@ -39,6 +39,7 @@ export const SEND_SIGNAL = 'SEND_SIGNAL';
 // blocking
 export const UPDATE_BLOCKING_DATA = 'UPDATE_BLOCKING_DATA';
 export const UPDATE_CATEGORIES = 'UPDATE_CATEGORIES';
+export const UPDATE_ANTI_TRACKING_NUM_SHOWN = 'UPDATE_ANTI_TRACKING_NUM_SHOWN';
 export const UPDATE_CATEGORY_BLOCKED = 'UPDATE_CATEGORY_BLOCKED';
 export const UPDATE_TRACKER_BLOCKED = 'UPDATE_TRACKER_BLOCKED';
 export const UPDATE_TRACKER_TRUST_RESTRICT = 'UPDATE_TRACKER_TRUST_RESTRICT';

app/panel/reducers/summary.js

@@ -18,7 +18,8 @@ import {
 	UPDATE_CLIQZ_MODULE_DATA,
 	UPDATE_GHOSTERY_PAUSED,
 	UPDATE_SITE_POLICY,
-	UPDATE_TRACKER_COUNTS
+	UPDATE_TRACKER_COUNTS,
+	UPDATE_ANTI_TRACKING_NUM_SHOWN
 } from '../constants/constants';
 import { addToArray, removeFromArray } from '../utils/utils';
 import { sendMessage } from '../utils/msg';
@@ -72,6 +73,12 @@ export default (state = initialState, action) => {
 				},
 			});
 		}
+		case UPDATE_ANTI_TRACKING_NUM_SHOWN: {
+			console.log('here1', action.data)
+			return Object.assign({}, state, {
+				antiTracking: action.data
+			});
+		}
 		default: return state;
 	}
 };