Display real data for antitracking, adblock and smartblock

app/panel-android/actions/cliqzActions.js

@@ -0,0 +1,7 @@
+import { sendMessageInPromise } from '../utils/msg';
+
+export function getCliqzModuleData(tabId) {
+	return sendMessageInPromise('getCliqzModuleData', {
+		tabId,
+	});
+}

app/panel-android/actions/handler.js

@@ -1,7 +1,7 @@
 import { handleTrustButtonClick, handleRestrictButtonClick, handlePauseButtonClick, cliqzFeatureToggle } from './summaryActions';
 import { trustRestrictBlockSiteTracker, blockUnblockGlobalTracker, blockUnBlockAllTrackers, resetSettings } from './trackerActions';
 
-// Handler center
+// Handle all actions in Panel.jsx
 export default function handleAllActions({ actionName, actionData, state }) {
 	let updated = {};
 

app/panel-android/actions/trackerActions.js

@@ -162,7 +162,7 @@ export function blockUnblockGlobalTracker({ actionData, state }) {
 	const updated_blocking_category = updated_blocking_categories.find(item => item.id === cat_id);
 
 	const selectedBlockingTracker = updated_blocking_category.trackers
-																	.find(tracker => tracker.shouldShow && tracker.id === +app_id && !tracker.ss_allowed && !tracker.ss_blocked);
+																	.find(tracker => tracker.shouldShow && tracker.id === +app_id);
 	// Only update if the site tracker is neither trusted nor restricted
 	if (selectedBlockingTracker) {
 		const oldState = selectedBlockingTracker.blocked || selectedBlockingTracker.ss_blocked;

app/panel-android/components/Panel.jsx

@@ -8,6 +8,7 @@ import SiteTrackers from './SiteTrackers';
 import GlobalTrackers from './GlobalTrackers';
 import TrackersChart from './content/TrackersChart';
 import { getPanelData, getSummaryData, getSettingsData, getBlockingData } from '../actions/panelActions';
+import { getCliqzModuleData } from '../actions/cliqzActions';
 import handleAllActions from '../actions/handler';
 import { fromTrackersToChartData } from '../utils/chart';
 
@@ -19,6 +20,7 @@ export default class Panel extends React.Component {
 			summary: {},
 			settings: {},
 			blocking: {},
+			cliqzModuleData: {},
 		}
 	}
 
@@ -28,6 +30,7 @@ export default class Panel extends React.Component {
 		this.setSummaryState(tabId);
 		this.setSettingsState();
 		this.setBlockingState(tabId);
+		this.setCliqzDataState(tabId);
 	}
 
 	setPanelState = (tabId) => {
@@ -62,6 +65,14 @@ export default class Panel extends React.Component {
 		});
 	}
 
+	setCliqzDataState = (tabId) => {
+		getCliqzModuleData(tabId).then((data) => {
+			this.setState({
+				cliqzModuleData: data,
+			});
+		});
+	}
+
 	setGlobalState = (updated) => {
 		const newState = {};
 		Object.keys(updated).forEach((key) => {
@@ -134,7 +145,7 @@ export default class Panel extends React.Component {
 				<Tabs>
 					<Tab tabLabel={'Overview'} linkClassName={'custom-link'}>
 						<Overview categories={this.siteCategories} />
-						<FixedMenu panel={this.state.panel} />
+						<FixedMenu panel={this.state.panel} cliqzModuleData={this.state.cliqzModuleData} />
 					</Tab>
 
 					<Tab tabLabel={'Site Trackers'} linkClassName={'custom-link'}>

app/panel-android/components/content/FixedMenu.jsx

@@ -100,6 +100,52 @@ export default class FixedMenu extends React.Component {
 		return 'Enhanced Options';
 	}
 
+	get cliqzModuleData() {
+		return this.props.cliqzModuleData || {};
+	}
+
+	get antiTrackingData() {
+		return this.cliqzModuleData.antitracking || {};
+	}
+
+	get adBlockData() {
+		return this.cliqzModuleData.adblock || {};
+	}
+
+	get smartBlockData() {
+		return this.props.panel.smartBlock || {};
+	}
+
+	getCount = (type) => {
+		console.log('this.props.panel', this.props.panel);
+		let total = 0;
+		switch (type) {
+			case 'enable_anti_tracking':
+				for (const category in this.antiTrackingData) {
+					if (this.antiTrackingData.hasOwnProperty(category)) {
+						for (const app in this.antiTrackingData[category]) {
+							if (this.antiTrackingData[category][app] === 'unsafe') {
+								total++;
+							}
+						}
+					}
+				}
+				return total;
+			case 'enable_ad_block':
+				return this.adBlockData && this.adBlockData.totalCount || 0;
+			case 'enable_smart_block':
+				Object.keys(this.smartBlockData.blocked || {}).forEach((key) => {
+					total++;
+				});
+				Object.keys(this.smartBlockData.unblocked || {}).forEach((key) => {
+					total++;
+				});
+				return total;
+			default:
+				return 0;
+		}
+	}
+
 	render() {
 
 		return (
@@ -114,7 +160,7 @@ export default class FixedMenu extends React.Component {
 							updateHeadeText={this.updateHeadeText}
 							type={'anti_tracking'}
 							title={'Enhanced Anti-Tracking'}
-							numData={3}
+							numData={this.getCount('enable_anti_tracking')}
 							headline={'Personal data points anonymized'}
 							description={'Anonymize unblocked and unknown trackers for greater browsing protection.'}
 						/>
@@ -125,7 +171,7 @@ export default class FixedMenu extends React.Component {
 							updateHeadeText={this.updateHeadeText}
 							type={'ad_block'}
 							title={'Enhanced Ad Blocking'}
-							numData={4}
+							numData={this.getCount('enable_ad_block')}
 							headline={'Advertisements blocked'}
 							description={'Block all advertisements on websites you visit.'}
 						/>
@@ -136,7 +182,7 @@ export default class FixedMenu extends React.Component {
 							updateHeadeText={this.updateHeadeText}
 							type={'smart_block'}
 							title={'Smart Blocking'}
-							numData={3}
+							numData={this.getCount('enable_smart_block')}
 							headline={'Smart Blocking'}
 							description={'Automatically block and unblock trackers to optimize page performance.'}
 						/>
@@ -149,4 +195,5 @@ export default class FixedMenu extends React.Component {
 
 FixedMenu.propTypes = {
 	panel: PropTypes.object,
+	cliqzModuleData: PropTypes.object,
 };

app/panel-android/components/content/TrackerItem.jsx

@@ -45,7 +45,7 @@ export default class TrackerItem extends React.Component {
 				cat_id: this.props.categoryId,
 				trust: ss_allowed,
 				restrict: false,
-				block: false,
+				block: this.props.tracker.blocked, // Keep blocking
 			}
 		});
 		this.props.toggleMenu(this.props.index); // Hide menu
@@ -60,7 +60,7 @@ export default class TrackerItem extends React.Component {
 				cat_id: this.props.categoryId,
 				restrict: ss_blocked,
 				trust: false,
-				block: false,
+				block: this.props.tracker.blocked, // Keep blocking
 			}
 		});
 		this.props.toggleMenu(this.props.index);
@@ -104,6 +104,10 @@ export default class TrackerItem extends React.Component {
 		win.focus();
 	}
 
+	get disabledStatus() {
+		return ['trusted', 'restricted'].includes(this.trackerSelectStatus) ? 'disabled' : '';
+	}
+
 	render() {
 		return (
 			<div className={`tracker ${this.showMenu ? 'show-menu' : ''} ${this.trackerSelectStatus}`}>
@@ -120,7 +124,7 @@ export default class TrackerItem extends React.Component {
 					<button className="trackerOption restrict" onClick={this.clickButtonRestrict}>
 						{this.props.tracker.ss_blocked ? 'Unrestrict': 'Restrict'}
 					</button>
-					<button className="trackerOption block" onClick={this.clickButtonBlock}>
+					<button className={`trackerOption block ${this.disabledStatus}`} onClick={this.clickButtonBlock}>
 						{this.props.tracker.blocked ? 'UnBlock': 'Block'}
 					</button>
 				</div>

app/scss/android/_overview.scss

@@ -18,12 +18,6 @@
 				color: $tundora;
 			}
 
-			// &.changed {
-			// 	& > span {
-			// 		color: $white;
-			// 	}
-			// }
-
 			&.trust-site-btn {
 
 				& > span {
@@ -33,9 +27,9 @@
 				&.changed:not(.paused) {
 					background-color: #9ecc42;
 					border-color: #9ecc42;
-					color: $white;
 
 					& > span {
+						color: $white;
 						background-image: buildIconTrust($button-white);
 					}
 				}
@@ -50,9 +44,9 @@
 				&.changed:not(.paused) {
 					background-color: #e74055;
 					border-color: #e74055;
-					color: $white;
 
 					& > span {
+						color: $white;
 						background-image: buildIconRestrict($button-white);
 					}
 				}
@@ -61,7 +55,6 @@
 			&.pause-resume-btn {
 
 				& > span {
-					// background-image: buildIconPause($button-dark-grey);
 					background-image: url(../../app/images/panel-android/pause.svg);
 
 					&:last-child {
@@ -70,11 +63,10 @@
 				}
 
 				&.changed {
-					background-color: $ghosty-blue;
-					border-color: $ghosty-blue;
+					background-color: $cliqz-blue;
+					border-color: $cliqz-blue;
 
 					& > span {
-						// background-image: buildIconResume($button-dark-grey);
 						background-image: url(../../app/images/panel-android/play.svg);
 
 						&:first-child {

app/scss/android/content/_accordions.scss

@@ -207,6 +207,11 @@
 							&.block {
 								background-color: $button-block;
 								background-image: buildIconBlock($button-white);
+
+								&.disabled {
+									background-color: #C6C6C6;
+									pointer-events: none;
+								}
 							}
 						}
 

app/scss/android/content/_fixed-menu.scss

@@ -6,6 +6,7 @@
 	top: calc(100% - #{$fixed-menu-header-height});
 	@include prefix('transition', 'top 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53)');
 	@include prefix('box-shadow', '0px -3px 4px rgba(0,0,0,0.15)');
+	z-index: 1; //TODO: @mai check this
 
 	.menuHeader {
 		height: $fixed-menu-header-height;
@@ -83,7 +84,7 @@
 					}
 
 					.smart_block {
-						background-position-x: 25px;
+						background-position-x: 27px;
 						background-size: 17px;
 					}
 
@@ -148,13 +149,14 @@
 
 					.anti_tracking, .ad_block, .smart_block {
 						font-size: 40px;
-						padding-left: 50px;
+						padding-left: 37px;
 						background-size: 30px;
+						background-position: 5px center;
 					}
 
 					.smart_block {
-						background-position-x: 17px;
-						background-size: 25px;
+						background-position-x: 12px;
+						background-size: 23px;
 					}
 
 					.headline {

app/scss/android/content/_variables.scss

@@ -5,59 +5,14 @@ $fixed-menu-item-height: 50px;
 $fixed-menu-header-height: 50px;
 $tab-header-height: 50px;
 
+$white: #FFFFFF;
+$tundora: #4A4A4A;
 
-/*  GREYS	*/
-$black:						#000000; //form_content
-$dark-gray:					#111111; //bnkd_top_header
-$medium-gray:				#333333; //form_label
-$bright-gray:				#394045; //bknd_secondary_nav, $header-color
-$pale-sky:					#6E7B86; //secondary_nav_active_tab
-$silver-chalice:			#A3A3A3; //form_field_border
-$tundora:					#4A4A4A; //body-font-color
-$light-gray:				#A6A6A6; //top_nav, button_disabled
-$slate-gray:				#5F7B85; //$subheader-color
-$silver: 					#BABABA; //button_alt_font_color
-$mercury: 					#E5E5E5; //footer_border, $hr-border, $input-background-disabled
-$manatee:					#99999D;
-$porcelain:					#F0F3F4;
-$whisper:					#F7F8FB; //body-background
-$alabaster: 				#F7F7F7; //accordions
-$white:						#FFFFFF;
-
-/*  BLUES	*/
-$ghosty-blue:				#00AEF0;
-$active-blue:				#48ACD3; //top_nav_active_tab
-$link-blue:					#2092BF; //primary-color
-$button-primary:			#3AA2CF;
-
-/*  MARKETING COLORS */
-$red:						#E74055;
-$purple: 					#720174;
-$dark-magenta:				#910194;
-$sinopia:					#D3451E;
-$apple:						#67A73A; //button_special
-$caper:						#CEECAF; //success-color
-$dell: 						#477219; //callout-success-font-color
-$atlantis:					#9ECC42;
-$hoki:						#5F7C86;
-$mystic:					#E7ECEE; //bknd_third_nav
-$zumthor:					#CBD4D7;
-$orange:					#FF9000; //secondary-color
-
-$transparent-green: 		rgba($apple, 0.08);
-$transparent-red: 			rgba($red, 0.08);
-
-/* ADD PROJECT COLORS HERE */
-
-$button-grey: 979797;
-$button-dark-grey: 4A4A4A;
-$button-purple: 930194;
 $button-white: ffffff;
-$button-purple-f: unquote("##{$button-purple}");
 $button-blue: 1DAFED;
+$button-dark-grey: 4A4A4A;
 
 /* Control buttons */
-
 $button-trust: #9FCA4C;
 $button-restrict: #BC4A4B;
 $button-block: #E44258;