GH-1256 Update. Reduce ambiguity for total trackers

_locales/en/messages.json

@@ -672,14 +672,8 @@
 	"panel_tracker_slow_non_secure_end": {
 		"message": " on this page."
 	},
-	"tracker_signular": {
-		"message": "tracker"
-	},
-	"tracker_plural": {
-		"message": "trackers"
-	},
-	"tracker_found": {
-		"message": "found"
+	"panel_tracker_total_tooltip": {
+		"message": "Total count of trackers found, ads blocked and data points anonymized."
 	},
 	"panel_signin_success": {
 		"message": "You are now signed in as "

app/panel/components/BuildingBlocks/DonutGraph.jsx

@@ -15,6 +15,7 @@ import React, { Component } from 'react';
 import ClassNames from 'classnames';
 import * as d3 from 'd3';
 import { scaleLinear } from 'd3-scale';
+import Tooltip from '../Tooltip';
 
 /**
  * @class Generate donut graph. Used to display tracker data in the Summary View.
@@ -271,12 +272,13 @@ class DonutGraph extends React.Component {
 				</div>
 				<div className="graph-ref" ref={(node) => { this.node = node; }} />
 				<div className="graph-text clickable" onClick={this.clickGraphText}>
-					<div className="graph-text-count">{totalCount}</div>
-					<div className="graph-text-trackers">
-						{(totalCount === 1) ? t('tracker_signular') : t('tracker_plural')}
-						<div className="show-on-big">
-							{t('tracker_found')}
-						</div>
+					<div className="graph-text-count g-tooltip">
+						{totalCount}
+						<Tooltip
+							delay="0"
+							body={t('panel_tracker_total_tooltip')}
+							position="right"
+						/>
 					</div>
 				</div>
 			</div>

app/panel/components/BuildingBlocks/GhosteryFeatures.jsx

@@ -141,7 +141,7 @@ class GhosteryFeatures extends React.Component {
 								{this.getTrustText()}
 							</span>
 						</span>
-						<Tooltip header={(sitePolicy === 2) ? t('tooltip_trust_on') : t('tooltip_trust')} position={(isStacked) ? 'right' : 'top'} />
+						<Tooltip body={(sitePolicy === 2) ? t('tooltip_trust_on') : t('tooltip_trust')} position={(isStacked) ? 'right' : 'top'} />
 					</div>
 					{isAbPause && (
 						<div className={customClassNames} onClick={this.clickCustomButton}>
@@ -150,7 +150,7 @@ class GhosteryFeatures extends React.Component {
 									{t('summary_custom_settings')}
 								</span>
 							</span>
-							<Tooltip header={t('tooltip_custom_settings')} position={(isStacked) ? 'right' : 'top'} />
+							<Tooltip body={t('tooltip_custom_settings')} position={(isStacked) ? 'right' : 'top'} />
 						</div>
 					)}
 					<div className={restrictClassNames} onClick={this.clickRestrictButton}>
@@ -159,7 +159,7 @@ class GhosteryFeatures extends React.Component {
 								{this.getRestrictText()}
 							</span>
 						</span>
-						<Tooltip header={(sitePolicy === 1) ? t('tooltip_restrict_on') : t('tooltip_restrict')} position={(isStacked) ? 'right' : 'top'} />
+						<Tooltip body={(sitePolicy === 1) ? t('tooltip_restrict_on') : t('tooltip_restrict')} position={(isStacked) ? 'right' : 'top'} />
 					</div>
 				</div>
 			</div>

app/panel/components/BuildingBlocks/PauseButton.jsx

@@ -169,7 +169,7 @@ class PauseButton extends React.Component {
 						{this.renderPauseButtonText()}
 						{!this.props.isAbPause && (
 							<Tooltip
-								header={this.props.isPaused ? t('summary_resume_ghostery_tooltip') : t('summary_pause_ghostery_tooltip')}
+								body={this.props.isPaused ? t('summary_resume_ghostery_tooltip') : t('summary_pause_ghostery_tooltip')}
 								position={(this.props.isCentered) ? 'right' : 'top'}
 							/>
 						)}

app/panel/components/Summary.jsx

@@ -13,6 +13,7 @@
 
 import React, { Component } from 'react';
 import ClassNames from 'classnames';
+import Tooltip from './Tooltip';
 import { sendMessage } from '../utils/msg';
 import globals from '../../../src/classes/Globals';
 import {
@@ -338,7 +339,13 @@ class Summary extends React.Component {
 				)}
 				{!this.state.disableBlocking && showCondensed && (
 					<div className="total-tracker-count clickable" onClick={this.clickTrackersCount}>
-						{this.props.trackerCounts.allowed + this.props.trackerCounts.blocked || 0}
+						<span className="summary-total-tracker-count g-tooltip">
+							{this.props.trackerCounts.allowed + this.props.trackerCounts.blocked + antiTrackUnsafe + adBlockBlocked || 0}
+							<Tooltip
+								header={t('panel_tracker_total_tooltip')}
+								position="right"
+							/>
+						</span>
 					</div>
 				)}
 

app/scss/partials/_donut_graph.scss

@@ -12,35 +12,33 @@
  */
 
 .sub-component.donut-graph {
-	.show-on-big { display: none; }
-	&.big .show-on-big { display: block; }
-
 	.graph-text {
 		text-transform: capitalize;
 		text-align: center;
 		font-size: 12px;
 		line-height: 16px;
 		font-weight: 500;
+		padding: 13px 0;
 		color: #4a4a4a;
 	}
 	&.big .graph-text {
 		margin-top: -125px;
-		padding-top: 22px;
 		height: 120px;
 	}
 	&.small .graph-text {
 		margin-top: -99px;
-		padding-top: 18px;
 		height: 94px;
 	}
 	.graph-text-count {
-		font-size: 30px;
-		line-height: 41px;
+		height: 94px;
+		font-size: 42px;
+		line-height: 90px;
 		font-weight: 700;
 	}
 	&.small .graph-text-count {
+		height: 68px;
 		font-size: 28px;
-		line-height: 35px;
+		line-height: 64px;
 	}
 
 	.tooltip-container {

app/scss/partials/_tooltip.scss

@@ -100,15 +100,27 @@
 	}
 }
 
+.summary-total-tracker-count.g-tooltip .tooltip-content.right {
+	margin-top: -20px;
+	margin-left: 24px;
+}
+.sub-component.donut-graph.small .g-tooltip .tooltip-content.right {
+	margin-top: -8px;
+	margin-left: 15px;
+}
+.sub-component.donut-graph.big .g-tooltip .tooltip-content.right {
+	margin-top: 5px;
+	margin-left: 10px;
+}
 .expert .sub-component.cliqz-features .g-tooltip .tooltip-content.right {
 	margin-left: 16px;
 }
 .expert .sub-component.ghostery-features .g-tooltip .tooltip-content.right {
-	top: -50%;
+	margin-top: -18px;
 }
 .expert .sub-component.pause-button .g-tooltip .tooltip-content.right {
+	margin-top: -12px;
 	margin-left: 28px;
-	top: -33%;
 }
 .sub-component.pause-button .g-tooltip .tooltip-content.top {
 	left: 75px;