GH-863 update tooltip and notification logic

_locales/en/messages.json

@@ -1174,22 +1174,25 @@
 		"message": "New Since Last Update"
 	},
 	"alert_anti_track_on": {
-		"message": "Enhanced Anti-Trackng ON. Private data points have been removed."
+		"message": "Enhanced Anti-Trackng ON. Private data will be anonymized."
 	},
 	"alert_anti_track_off": {
-		"message": "Enhanced Anti-Tracking OFF."
+		"message": "Enhanced Anti-Tracking OFF. Personal data will not be anonymized."
 	},
 	"alert_ad_block_on": {
-		"message": "Enhanced Ad-Blocking ON. Advertisements have been blocked."
+		"message": "Enhanced Ad-Blocking ON. Advertisements will be blocked."
 	},
 	"alert_ad_block_off": {
-		"message": "Enhanced Ad-Blocking OFF."
+		"message": "Enhanced Ad-Blocking OFF. Advertisements will not be blocked."
 	},
 	"alert_smart_block_on": {
-		"message": "Smart Blocking ON. Tracker blocking adjusted to optimize page performance."
+		"message": "Smart Blocking ON. Tracker blocking will be adjusted to optimize page performance."
 	},
 	"alert_smart_block_off": {
-		"message": "Smart Blocking OFF."
+		"message": "Smart Blocking OFF. Tracker blocking will not be automatically adjusted."
+	},
+	"alert_reload": {
+		"message": "Reload to see changes."
 	},
 	"alert_site_trusted": {
 		"message": "Site whitelisted. Trackers are allowed and private data points unprotected."
@@ -1207,10 +1210,10 @@
 		"message": "Enhanced Anti-Tracking"
 	},
 	"tooltip_anti_track_body": {
-		"message": "Remove private data points for greater anonymity."
+		"message": "Anonymize personal data for greater protection."
 	},
 	"tooltip_anti_track_body_on": {
-		"message": "Private data points have been removed."
+		"message": "Personal data points anonymized."
 	},
 	"tooltip_ad_block": {
 		"message": "Enhanced Ad Blocking"

app/panel/components/BuildingBlocks/CliqzFeatures.jsx

@@ -161,8 +161,8 @@ class CliqzFeatures extends React.Component {
 					<div className="count">{this.getAntiTrackingTotal()}</div>
 					<div className="icon g-tooltip">
 						<Tooltip
-							header={t('tooltip_anti_track')}
-							body={!(isSmaller && isCondensed) && (antiTrackingActive ? t('tooltip_anti_track_body_on') : t('tooltip_anti_track_body'))}
+							header={isSmaller && t('tooltip_anti_track')}
+							body={!isCondensed && (antiTrackingActive ? t('tooltip_anti_track_body_on') : t('tooltip_anti_track_body'))}
 							position={isCondensed ? 'right' : isSmaller ? 'top top-right' : 'top'}
 						/>
 					</div>
@@ -174,8 +174,8 @@ class CliqzFeatures extends React.Component {
 					<div className="count">{this.getAdBlockingTotal()}</div>
 					<div className="icon g-tooltip">
 						<Tooltip
-							header={t('tooltip_ad_block')}
-							body={!(isSmaller && isCondensed) && (adBlockingActive ? t('tooltip_ad_block_body_on') : t('tooltip_ad_block_body'))}
+							header={isSmaller && t('tooltip_ad_block')}
+							body={!isCondensed && (adBlockingActive ? t('tooltip_ad_block_body_on') : t('tooltip_ad_block_body'))}
 							position={isCondensed ? 'right' : 'top'}
 						/>
 					</div>
@@ -187,8 +187,8 @@ class CliqzFeatures extends React.Component {
 					<div className="count">{this.getSmartBlockingTotal()}</div>
 					<div className="icon g-tooltip">
 						<Tooltip
-							header={t('tooltip_smart_block')}
-							body={!(isSmaller && isCondensed) && (smartBlockingActive ? t('tooltip_smart_block_body_on') : t('tooltip_smart_block_body'))}
+							header={isSmaller && t('tooltip_smart_block')}
+							body={!isCondensed && (smartBlockingActive ? t('tooltip_smart_block_body_on') : t('tooltip_smart_block_body'))}
 							position={isCondensed ? 'right' : isSmaller ? 'top top-left' : 'top'}
 						/>
 					</div>

app/panel/components/Panel.jsx

@@ -114,26 +114,44 @@ class Panel extends React.Component {
 			return null;
 		}
 		const needsReload = !!Object.keys(this.props.needsReload.changes).length;
-		const calloutText = (needsReload || this.props.notificationText) ? (
-			<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>
-				<span key="0" className="filter-link slow-insecure" onClick={this.filterTrackers} dangerouslySetInnerHTML={{ __html: this.props.notificationText }} />
-				<span key="1">{ t('panel_tracker_slow_non_secure_end') }</span>
-			</span>
-			: (this.props.notificationFilter === 'compatibility') ?
+		let calloutText;
+
+		if (this.props.notificationText) {
+			calloutText = (
+				<span>
+					<span key="0" dangerouslySetInnerHTML={{ __html: this.props.notificationText || t('panel_needs_reload') }} />
+					{needsReload && (
+						<div key="1" className="needs-reload-link" onClick={this.clickReloadBanner}>{ t('alert_reload') }</div>
+					)}
+				</span>
+			);
+		} else if (needsReload) {
+			calloutText = (
+				<span>
+					<span key="0">{t('panel_needs_reload')}</span>
+					<span key="1" className="needs-reload-link" onClick={this.clickReloadBanner}>{ t('alert_reload') }</span>
+				</span>
+			);
+		} else if (this.props.notificationFilter === 'slow') {
+			calloutText = (
+				<span>
+					<span key="0" className="filter-link slow-insecure" onClick={this.filterTrackers} dangerouslySetInnerHTML={{ __html: this.props.notificationText }} />
+					<span key="1">{ t('panel_tracker_slow_non_secure_end') }</span>
+				</span>
+			);
+		} else if (this.props.notificationFilter === 'compatibility') {
+			calloutText = (
 				<span>
 					<span key="0" className="filter-link compatibility" onClick={this.filterTrackers} dangerouslySetInnerHTML={{ __html: this.props.notificationText }} />
 					<span key="1">{ t('panel_tracker_breaking_page_end') }</span>
 				</span>
-				: (
-					<span dangerouslySetInnerHTML={{ __html: this.props.notificationText }} />
-				);
+			);
+		} else {
+			calloutText = (
+				<span dangerouslySetInnerHTML={{ __html: this.props.notificationText }} />
+			);
+		}
+
 		return (
 			<div id="panel">
 				<div className="callout-container">