Header styling and functionality complete, SVG buttons styled

app/panel/components/Blocking.jsx

@@ -112,8 +112,18 @@ class Blocking extends React.Component {
 			category.num_shown = (show) ? count : 0;
 		});
 
+		let whitelistedUrlCount = 0;
+		Object.keys(updatedAntiTracking.unknown).forEach((urlKey) => {
+			if (updatedAntiTracking.whitelistedUrls[urlKey]
+			&& updatedAntiTracking.unknown[urlKey] === 'safe') {
+				whitelistedUrlCount++;
+			}
+		});
+
 		updatedAntiTracking.num_shown = filterName === 'all' || filterName === 'other_data_points'
-			? updatedAntiTracking.totalUnsafeCount : 0;
+			? updatedAntiTracking.totalUnsafeCount + whitelistedUrlCount : 0;
+
+		console.log('UPDTATETEGEAF', updatedAntiTracking);
 
 		this.props.actions.updateCategories(updated_categories);
 		this.props.actions.updateAntiTrackingNumShown(updatedAntiTracking);

app/panel/components/Blocking/Categories.jsx

@@ -63,30 +63,25 @@ class Categories extends React.Component {
 				globalBlocking={globalBlocking}
 				index={categoryList.length}
 				category={(() => {
-					const unknownURLs = Object.keys(antiTracking.unknown);
-					const unsafeURLs = unknownURLs.filter(url => antiTracking.unknown[url] === 'unsafe');
+					const antiTrackingUrls = Object.keys(antiTracking.unknown).filter(urlKey => (
+						(antiTracking.unknown[urlKey] === 'safe' && antiTracking.whitelistedUrls[urlKey])
+						|| antiTracking.unknown[urlKey] === '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: true,
+						num_total: antiTrackingUrls.length,
+						num_blocked: antiTracking.totalUnsafeCount,
+						num_shown: antiTrackingUrls.length,
+						trackers: antiTrackingUrls.map((url, idx) => ({
+							blocked: antiTracking.unknown[url] === 'unsafe',
 							catId: 'other_data_points',
 							description: '',
 							id: 100000000 + idx,
 							name: url,
 							shouldShow: true,
-							sources: false,
-							ss_allowed: false,
-							ss_blocked: false,
-							warningCompatibility: false,
-							warningInsecure: false,
-							warningSlow: false,
-							warningSmartBlock: false,
 						})),
 					};
 				})()}

app/panel/components/Blocking/Category.jsx

@@ -185,7 +185,6 @@ class Category extends React.Component {
 			trackersBlockedCount = category.num_blocked || 0;
 		}
 
-
 		const clickCliqzFeature = (options) => {
 			const { feature, status, text } = options;
 			this.props.actions.showNotification({
@@ -197,9 +196,11 @@ class Category extends React.Component {
 		};
 		const cliqzInactive = paused_blocking || sitePolicy || IS_CLIQZ;
 
+		console.log('wuttt', category);
+
 		return (
 			<div className={`${category.num_shown === 0 ? 'hide' : ''} blocking-category`}>
-				<div className={`sticky-category${this.state.showTooltip ? ' no-sticky' : ''}${isDataPoint ? ' anti-track-header' : ''}`}>
+				<div className={`sticky-category${this.state.showTooltip ? ' no-sticky' : ''}${isDataPoint ? ' anti-tracking-header' : ''}`}>
 					{isDataPoint && (
 						<div className="Category__antiTrackingDivider">
 							<p className="Category__antiTrackingDividerText">
@@ -235,7 +236,7 @@ class Category extends React.Component {
 									(!!trackersBlockedCount || isDataPoint) &&
 									<div className="blocked-count">
 										<span className="count">
-											{isDataPoint ? category.num_total : `${trackersBlockedCount} `}
+											{isDataPoint ? category.num_blocked : `${trackersBlockedCount} `}
 										</span>
 										<span className="text">
 											{isDataPoint ? ' ANONYMIZED' : t('blocking_category_blocked') }
@@ -256,9 +257,6 @@ class Category extends React.Component {
 												<svg width="20px" height="20px" viewBox="1.5 1 20 20">
 													<path className="dash" d="M5,10.5 15,10.5" />
 												</svg>
-												{/* DATAPOINT CHECK: <svg width="14" height="14" viewBox="-3.5 -3.5 17 17">
-													<path className="check" fill="#FFF" fillRule="evenodd" stroke="#FFF" strokeWidth="1.75" d="M7.128 1.02a.433.433 0 0 0-.256 0L1.383 2.474A.492.492 0 0 0 1 2.961c.026 3.908 2.12 7.535 5.72 9.962A.515.515 0 0 0 7 13a.515.515 0 0 0 .28-.077c3.6-2.427 5.694-6.054 5.72-9.962a.492.492 0 0 0-.383-.486L7.127 1.02z" />
-												</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>

app/panel/components/Blocking/OtherDataPoint.jsx

@@ -24,13 +24,7 @@ class OtherDataPoint extends React.Component {
 		super(props);
 		this.state = {
 			trackerClasses: '',
-			warningImageTitle: '',
 		};
-
-		// click bindings
-		this.clickTrackerStatus = this.clickTrackerStatus.bind(this);
-		this.clickTrackerTrust = this.clickTrackerTrust.bind(this);
-		this.clickTrackerRestrict = this.clickTrackerRestrict.bind(this);
 	}
 	/**
 	 * Lifecycle event.
@@ -44,82 +38,17 @@ class OtherDataPoint extends React.Component {
 	componentWillReceiveProps(nextProps) {
 		this.updateTrackerClasses(nextProps.tracker);
 	}
-	/**
-	 * React hook used to optimise re-rendering of the list of trackers.
-	 * @param  {Object} nextProps	changed props
-	 * @param  {Object} nextState   changed state
-	 * @return {boolean}            true means proceed with rendering
-	 */
-	shouldComponentUpdate(nextProps) {
-		const { tracker } = nextProps;
-		if (!tracker || Object.keys(tracker).length === 0) {
-			return false;
-		}
-		return true;
-	}
 	/**
 	 * Set dynamic classes on .blocking-trk and save it in state.
 	 * @param  {Object} tracker    tracker object
 	 */
 	updateTrackerClasses(tracker) {
 		const classes = [];
-		let updated_title = '';
-
-		classes.push((!tracker.shouldShow) ? 'hide' : '');
 		classes.push((tracker.blocked) ? 'blocked' : '');
 		classes.push((tracker.ss_allowed) ? 'individual-trust' : '');
-		classes.push((tracker.ss_blocked) ? 'individual-restrict' : '');
-		classes.push((tracker.warningCompatibility || tracker.warningInsecure || tracker.warningSlow || tracker.warningSmartBlock) ? 'warning' : '');
-		if (tracker.warningSmartBlock) {
-			classes.push(tracker.warningSmartBlock === 'blocked' ? 'smart-blocked' : 'smart-unblocked');
-		} else {
-			classes.push((tracker.warningCompatibility) ? 'compatibility' : '');
-			classes.push((tracker.warningInsecure) ? 'insecure' : '');
-			classes.push((tracker.warningSlow) ? 'slow' : '');
-		}
-
-		// Create tooltips for tracker alerts
-		if (tracker.warningSmartBlock) {
-			updated_title = tracker.warningSmartBlock === 'blocked' ? t('panel_tracker_warning_smartblock_tooltip') : t('panel_tracker_warning_smartunblock_tooltip');
-		} else if (tracker.warningCompatibility) {
-			updated_title = t('panel_tracker_warning_compatibility_tooltip');
-		} else if (tracker.warningInsecure && tracker.warningSlow) {
-			updated_title = t('panel_tracker_warning_slow_nonsecure_tooltip');
-		} else if (tracker.warningInsecure) {
-			updated_title = t('panel_tracker_warning_nonsecure_tooltip');
-		} else if (tracker.warningSlow) {
-			updated_title = t('panel_tracker_warning_slow_tooltip');
-		}
 
 		this.setState({
 			trackerClasses: classes.join(' '),
-			warningImageTitle: updated_title,
-		});
-	}
-	/**
-	 * Implement handler for clicking on the tracker global block/unblock checkbox.
-	 * Trigger action which persists new tracker blocked state and spawns
-	 * re-rendering of the checkbox. It also shows notification to inform
-	 * user that the page should be reloaded.
-	 */
-	clickTrackerStatus() {
-		const blocked = !this.props.tracker.blocked;
-
-		if (this.props.paused_blocking || this.props.sitePolicy) {
-			return;
-		}
-
-		this.props.actions.updateTrackerBlocked({
-			smartBlockActive: this.props.smartBlockActive,
-			smartBlock: this.props.smartBlock,
-			app_id: this.props.tracker.id,
-			cat_id: this.props.cat_id,
-			blocked,
-		});
-
-		this.props.actions.showNotification({
-			updated: `${this.props.tracker.id}_blocked`,
-			reload: true,
 		});
 	}
 
@@ -172,39 +101,40 @@ class OtherDataPoint extends React.Component {
 		return (
 			<div className={`${this.state.trackerClasses} blocking-trk`}>
 				<div className="row align-middle trk-header">
-					<div className="columns shrink">
-						<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="data-point trk-name">{ 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">
+						<div className="OtherDataPoint__svgGroup">
+
+							{/* USE INLINE SVG FOR TRUST CIRCLE TO CHANGE COLORS WITH CSS */}
+							<span className="t-tooltip-up-left" data-g-tooltip="Trust on this site">
+								<svg className="" 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" />
+										<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" />
 										<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" />
+											<circle stroke="#FFF" 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">
+
+							{/* USE INLINE SVG FOR ANTI-TRACKING SHIELD TO CHANGE COLORS WITH CSS */}
+							<span className="t-tooltip-up-left" data-g-tooltip="Scrub on this site" >
+								<svg className="" 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" />
+										<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 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>
 									</g>
 								</svg>
 							</span>
+
 						</div>
 					</div>
 				</div>

app/scss/partials/_blocking.scss

@@ -131,9 +131,6 @@
 				color: #9b9b9b;
 				font-style: italic;
 				text-decoration: line-through;
-				&.data-point {
-					color: #1DAFED;
-				}
 			}
 			.trk-src-link {
 				font-style: italic;
@@ -174,6 +171,7 @@
 				font-style: italic;
 				text-decoration: line-through;
 				&.data-point {
+					padding-left: 50px;
 					color: #1DAFED;
 				}
 			}
@@ -253,7 +251,7 @@
 				font-style: italic;
 				text-decoration: line-through;
 				&.data-point {
-					color: #1DAFED;
+					padding-left: 50px;
 				}
 			}
 			.trk-src-link {

app/scss/partials/_blocking_category.scss

@@ -57,7 +57,7 @@
 		z-index: 1;
 		height: 62px;
 
-		&.anti-track-header {
+		&.anti-tracking-header {
 			height: 80px;
 			border-top: 0;
 			padding-top: 0;
@@ -144,7 +144,7 @@
 	}
 	.Category__antiTrackingDividerText {
 		margin: 0;
-		padding-top: 1px;
+		padding-top: 2px;
 		padding-left: 15px;
 		font-size: 10px;
 		color: white;

app/scss/partials/_blocking_tracker.scss

@@ -171,3 +171,7 @@ svg.blocking-icons {
 		stroke-linecap: square;
 	}
 }
+
+.OtherDataPoint__svgGroup {
+	padding-top: 5px;
+}