Optimize tooltips and notifications

_locales/en/messages.json

@@ -1173,29 +1173,74 @@
 	"settings_filter_new": {
 		"message": "New Since Last Update"
 	},
+	"alert_anti_track_on": {
+		"message": "Enhanced Anti-Trackng ON. Private data points have been removed."
+	},
+	"alert_anti_track_off": {
+		"message": "Enhanced Anti-Tracking OFF."
+	},
+	"alert_ad_block_on": {
+		"message": "Enhanced Ad-Blocking ON. Advertisements have been blocked."
+	},
+	"alert_ad_block_off": {
+		"message": "Enhanced Ad-Blocking OFF."
+	},
+	"alert_smart_block_on": {
+		"message": "Smart Blocking ON. Tracker blocking adjusted to optimize page performance."
+	},
+	"alert_smart_block_off": {
+		"message": "Smart Blocking OFF."
+	},
+	"alert_site_trusted": {
+		"message": "Site whitelisted. Trackers are allowed and private data points unprotected."
+	},
+	"alert_site_trusted_off": {
+		"message": "Site removed from the whitelist."
+	},
+	"alert_site_restricted": {
+		"message": "Site blacklisted. Trackers are blocked and Anti-Tracking on for this site."
+	},
+	"alert_site_restricted_off": {
+		"message": "Site removed from the blacklist."
+	},
 	"tooltip_anti_track": {
 		"message": "Enhanced Anti-Tracking"
 	},
 	"tooltip_anti_track_body": {
-		"message": "Anonymize unblocked and unknown trackers for greater browsing protection."
+		"message": "Remove private data points for greater anonymity."
+	},
+	"tooltip_anti_track_body_on": {
+		"message": "Private data points have been removed."
 	},
 	"tooltip_ad_block": {
 		"message": "Enhanced Ad Blocking"
 	},
 	"tooltip_ad_block_body": {
-		"message": "Block advertisements on websites you visit."
+		"message": "Block advertisements."
+	},
+	"tooltip_ad_block_body_on": {
+		"message": "Advertisements have been blocked."
 	},
 	"tooltip_smart_block": {
 		"message": "Smart Blocking"
 	},
 	"tooltip_smart_block_body": {
 		"message": "Automatically block and unblock trackers to optimize page performance."
 	},
+	"tooltip_smart_block_body_on": {
+		"message": "Tracking blocking adjusted to optimize page performance."
+	},
 	"tooltip_trust": {
-		"message": "Always allow trackers on this site."
+		"message": "Always allow trackers & turn off Anti-Tracking on tis site."
+	},
+	"tooltip_trust_on": {
+		"message": "Trackers allowed and unprotected on site. Click to Undo."
 	},
 	"tooltip_restrict": {
-		"message": "Always block trackers on this site."
+		"message": "Always block trackers & protect my data on this site."
+	},
+	"tooltip_restrict_on": {
+		"message": "Trackers blocked and protected on site. Click to Undo."
 	},
 	"tooltip_custom_settings": {
 		"message": "Use my selected tracker settings."

app/panel/components/BuildingBlocks/CliqzFeatures.jsx

@@ -85,7 +85,11 @@ class CliqzFeatures extends React.Component {
 		if (this.props.isInactive) {
 			return;
 		}
-		this.props.clickButton('enable_ad_block', this.props.adBlockingActive);
+		this.props.clickButton({
+			feature: 'enable_ad_block',
+			status: this.props.adBlockingActive,
+			text: !this.props.adBlockingActive ? t('alert_ad_block_on') : t('alert_ad_block_off'),
+		});
 	}
 
 	/**
@@ -95,7 +99,11 @@ class CliqzFeatures extends React.Component {
 		if (this.props.isInactive) {
 			return;
 		}
-		this.props.clickButton('enable_smart_block', this.props.smartBlockingActive);
+		this.props.clickButton({
+			feature: 'enable_smart_block',
+			status: this.props.smartBlockingActive,
+			text: !this.props.smartBlockingActive ? t('alert_smart_block_on') : t('alert_smart_block_off'),
+		});
 	}
 
 	/**
@@ -105,34 +113,44 @@ class CliqzFeatures extends React.Component {
 		if (this.props.isInactive) {
 			return;
 		}
-		this.props.clickButton('enable_anti_tracking', this.props.antiTrackingActive);
+		this.props.clickButton({
+			feature: 'enable_anti_tracking',
+			status: this.props.antiTrackingActive,
+			text: !this.props.antiTrackingActive ? t('alert_anti_track_on') : t('alert_anti_track_off'),
+		});
 	}
 
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the Cliqz Features portion of the Summary View
 	 */
 	render() {
-		const showBody = true; // ToDo: use this later
-		const { isSmaller, isCondensed, isInactive } = this.props;
+		const {
+			isSmaller,
+			isCondensed,
+			isInactive,
+			antiTrackingActive,
+			adBlockingActive,
+			smartBlockingActive,
+		} = this.props;
 
 		const cliqzFeaturesClassNames = ClassNames('sub-component', 'cliqz-features', {
 			smaller: isSmaller,
 			condensed: isCondensed,
 			inactive: isInactive,
 		});
 		const antiTrackingClassNames = ClassNames('anti-tracking', 'cliqz-feature', {
-			active: this.props.antiTrackingActive,
+			active: antiTrackingActive,
 			clickable: !isInactive,
 			'not-clickable': isInactive,
 		});
 		const adBlockingClassNames = ClassNames('ad-blocking', 'cliqz-feature', {
-			active: this.props.adBlockingActive,
+			active: adBlockingActive,
 			clickable: !isInactive,
 			'not-clickable': isInactive,
 		});
 		const smartBlockingClassNames = ClassNames('smart-blocking', 'cliqz-feature', {
-			active: this.props.smartBlockingActive,
+			active: smartBlockingActive,
 			clickable: !isInactive,
 			'not-clickable': isInactive,
 		});
@@ -144,7 +162,7 @@ class CliqzFeatures extends React.Component {
 					<div className="icon g-tooltip">
 						<Tooltip
 							header={t('tooltip_anti_track')}
-							body={showBody && t('tooltip_anti_track_body')}
+							body={!(isSmaller && isCondensed) && (antiTrackingActive ? t('tooltip_anti_track_body_on') : t('tooltip_anti_track_body'))}
 							position={isCondensed ? 'right' : isSmaller ? 'top top-right' : 'top'}
 						/>
 					</div>
@@ -157,7 +175,7 @@ class CliqzFeatures extends React.Component {
 					<div className="icon g-tooltip">
 						<Tooltip
 							header={t('tooltip_ad_block')}
-							body={showBody && t('tooltip_ad_block_body')}
+							body={!(isSmaller && isCondensed) && (adBlockingActive ? t('tooltip_ad_block_body_on') : t('tooltip_ad_block_body'))}
 							position={isCondensed ? 'right' : 'top'}
 						/>
 					</div>
@@ -170,8 +188,8 @@ class CliqzFeatures extends React.Component {
 					<div className="icon g-tooltip">
 						<Tooltip
 							header={t('tooltip_smart_block')}
-							body={showBody && t('tooltip_smart_block_body')}
-							position={isCondensed ? 'right right-bottom' : isSmaller ? 'top top-left' : 'top'}
+							body={!(isSmaller && isCondensed) && (smartBlockingActive ? t('tooltip_smart_block_body_on') : t('tooltip_smart_block_body'))}
+							position={isCondensed ? 'right' : isSmaller ? 'top top-left' : 'top'}
 						/>
 					</div>
 					<div className="feature-name">

app/panel/components/BuildingBlocks/GhosteryFeatures.jsx

@@ -133,7 +133,7 @@ class GhosteryFeatures extends React.Component {
 								{this.getTrustText()}
 							</span>
 						</span>
-						<Tooltip header={(sitePolicy === 2) ? t('summary_undo') : t('tooltip_trust')} position={(isStacked) ? 'right' : 'top'} />
+						<Tooltip header={(sitePolicy === 2) ? t('tooltip_trust_on') : t('tooltip_trust')} position={(isStacked) ? 'right' : 'top'} />
 					</div>
 					<div className={customClassNames} onClick={this.clickCustomButton}>
 						<span className="flex-container align-center-middle full-height">
@@ -149,7 +149,7 @@ class GhosteryFeatures extends React.Component {
 								{this.getRestrictText()}
 							</span>
 						</span>
-						<Tooltip header={(sitePolicy === 1) ? t('summary_undo') : t('tooltip_restrict')} position={(isStacked) ? 'right' : 'top'} />
+						<Tooltip header={(sitePolicy === 1) ? t('tooltip_restrict_on') : t('tooltip_restrict')} position={(isStacked) ? 'right' : 'top'} />
 					</div>
 				</div>
 			</div>

app/panel/components/Panel.jsx

@@ -114,10 +114,12 @@ class Panel extends React.Component {
 			return null;
 		}
 		const needsReload = !!Object.keys(this.props.needsReload.changes).length;
-		const calloutText = needsReload ? (
+		const calloutText = (needsReload || this.props.notificationText) ? (
 			<span>
-				<span key="0">{ t('panel_needs_reload') }</span>
-				<span key="1" className="needs-reload-link" onClick={this.clickReloadBanner}>{ t('panel_click_to_reload') }</span>
+				<span key="0">{ this.props.notificationText || t('panel_needs_reload') }</span>
+				{needsReload ? (
+					<span key="1" className="needs-reload-link" onClick={this.clickReloadBanner}>{ t('panel_click_to_reload') }</span>
+				) : ''}
 			</span>
 		) : (this.props.notificationFilter === 'slow') ?
 			<span>

app/panel/components/Settings/GlobalBlocking.jsx

@@ -12,6 +12,7 @@
  */
 
 import React, { Component } from 'react';
+import ClassNames from 'classnames';
 import Categories from '../Blocking/Categories';
 import BlockingHeader from '../Blocking/BlockingHeader';
 /**
@@ -40,12 +41,12 @@ class GlobalBlocking extends React.Component {
 		const categories = this.props.settingsData ? this.props.settingsData.categories : [];
 		const filterText = this.props.settingsData ? this.props.settingsData.filterText : t('settings_filter_all_label');
 		const expandAll = this.props.settingsData ? this.props.settingsData.expand_all_trackers : false;
+		const condensedToggleClassNames = ClassNames('condensed-toggle', {
+			condensed: settingsData.is_expanded,
+		});
 		return (
 			<div id="settings-global-blocking" className={(settingsData.is_expanded ? 'expanded' : '')}>
-				<div className={`expertTab row align-middle align-right ${settingsData.is_expanded ? 'expanded' : ''}`} onClick={this.toggleExpanded} >
-					<div className={settingsData.is_expanded ? 'reverse-dash' : 'dash'} />
-					<div className={settingsData.is_expanded ? 'reverse-moon' : 'moon'} />
-				</div>
+				<div className={condensedToggleClassNames} onClick={this.toggleExpanded} />
 				<BlockingHeader
 					categories={categories}
 					filterText={filterText}

app/panel/components/Summary.jsx

@@ -187,7 +187,7 @@ class Summary extends React.Component {
 	 */
 	clickSitePolicy(button) {
 		const { paused_blocking, sitePolicy } = this.props;
-		let type;
+		let type, text;
 
 		if (this.state.disableBlocking || paused_blocking) {
 			return;
@@ -196,9 +196,11 @@ class Summary extends React.Component {
 		if (button === 'trust' || (button === 'custom' && sitePolicy === 2)) {
 			sendMessage('ping', 'trust_site');
 			type = 'whitelist';
+			text = (sitePolicy === 2) ? t('alert_site_trusted_off') : t('alert_site_trusted');
 		} else if (button === 'restrict' || (button === 'custom' && sitePolicy === 1)) {
 			sendMessage('ping', 'restrict_site');
 			type = 'blacklist';
+			text = (sitePolicy === 1) ? t('alert_site_restricted_off') : t('alert_site_restricted');
 		} else {
 			return;
 		}
@@ -212,18 +214,23 @@ class Summary extends React.Component {
 		this.props.actions.showNotification({
 			updated: type,
 			reload: true,
+			text,
 		});
 	}
 
 	/**
 	 * Handles clicking on Cliqz Features: AntiTracking, AdBlocking, SmartBlocking
-	 * @param {String} feature the Cliqz feature name: enable_anti_tracking, enable_ad_block, enable_smart_block
-	 * @param {Boolean} status whether the feature should be turned on or off
+	 * @param {Object} options options including:
+	 * 													feature: enable_anti_tracking, enable_ad_block, enable_smart_block
+	 * 													status: whether the feature should be turned on or off
+	 * 													text: the text for the notification.
 	 */
-	clickCliqzFeature(feature, status) {
+	clickCliqzFeature(options) {
+		const { feature, status, text } = options;
 		this.props.actions.showNotification({
 			updated: feature,
 			reload: true,
+			text,
 		});
 		this.props.actions.toggleCliqzFeature(feature, status);
 	}

app/panel/reducers/panel.js

@@ -185,7 +185,7 @@ const _showNotification = (state, action) => {
 		sendMessage('setPanelData', { needsReload: updated_needsReload });
 
 		// if we have changes and the user wants to see banners, then show
-		if (Object.keys(updated_needsReload.changes).length > 0 && reloadBannerStatus.show && nowTime > reloadBannerStatus.show_time) {
+		if ((msg.text || Object.keys(updated_needsReload.changes).length > 0) && reloadBannerStatus.show && nowTime > reloadBannerStatus.show_time) {
 			updated_notificationShown = true;
 		} else {
 			updated_notificationShown = false;

app/scss/partials/_tooltip.scss

@@ -94,11 +94,10 @@
 }
 
 .expert .sub-component.cliqz-features .g-tooltip .tooltip-content.right {
-	top: -40px;
 	margin-left: 16px;
 }
-.expert .sub-component.cliqz-features .ad-blocking .g-tooltip .tooltip-content.right {
-	top: -22px;
+.expert .sub-component.ghostery-features .g-tooltip .tooltip-content.right {
+	top: -50%;
 }
 
 .expert .g-tooltip .tooltip-content.top {
@@ -115,11 +114,3 @@
 		}
 	}
 }
-.expert .g-tooltip .tooltip-content.right {
-	&.right-bottom {
-		margin-top: -30px;
-		&:after {
-			top: 80px;
-		}
-	}
-}