Change user-facing purple box to tracker tally

_locales/en/messages.json

@@ -191,10 +191,10 @@
 		}
 	},
 	"box_hide": {
-		"message": "Hide Box"
+		"message": "Hide Tally"
 	},
 	"box_hide_expanded": {
-		"message": "Hide Purple Box"
+		"message": "Hide Tracker-Tally"
 	},
 	"box_looking": {
 		"message": "Looking"
@@ -821,8 +821,8 @@
 	"settings_adblocker_list_3": {
 		"message": "Ads + Trackers + Annoyances"
 	},
-	"settings_purple_box": {
-		"message": "Purple Box"
+	"settings_tracker_tally": {
+		"message": "Tracker-Tally"
 	},
 	"settings_notifications": {
 		"message": "Notifications"
@@ -881,8 +881,8 @@
 	"settings_block_trackers": {
 		"message": "Block new trackers added to Ghostery by default"
 	},
-	"settings_show_purple_box": {
-		"message": "Show the purple box in the corner of my browser"
+	"settings_show_tracker_tally": {
+		"message": "Show the tracker-tally in the corner of my browser"
 	},
 	"settings_dismiss_after": {
 		"message": "Dismiss After"
@@ -909,7 +909,7 @@
 		"message": "secs"
 	},
 	"settings_hide_alert_trusted": {
-		"message": "Hide the purple box on trusted websites"
+		"message": "Hide the tracker-tally on trusted websites"
 	},
 	"settings_notify_me": {
 		"message": "Notify me when Ghostery:"
@@ -1025,8 +1025,8 @@
 	"settings_allow_trackers_tooltip": {
 		"message": "For example, blocking a Facebook tracker on facebook.com might break the site."
 	},
-	"settings_show_purple_box_tooltip": {
-		"message": "The purple box is a real-time list of trackers that is displayed in the corner of your browser. This feature will help you see trackers as they are added onto a webpage."
+	"settings_show_tracker_tally_tooltip": {
+		"message": "The tracker-tally is a list in the corner of your browser that displays trackers as they load in real-time."
 	},
 	"settings_notify_me_tooltip": {
 		"message": "Allow Ghostery to show messages in my browser related to new product features, updates, and customer feedback."

app/content-scripts/purplebox.js

@@ -448,10 +448,10 @@ const Ghostery = (function(win, doc) {
 
 		const style = createEl('style');
 
-		style.textContent = '@media print {#ghostery-purple-box {display:none !important}}';
+		style.textContent = '@media print {#ghostery-tracker-tally {display:none !important}}';
 		appendChild(doc.getElementsByTagName('head')[0], style);
 
-		ghostery.id = 'ghostery-purple-box';
+		ghostery.id = 'ghostery-tracker-tally';
 		ghostery.className = 'ghostery-bottom ghostery-right ghostery-none';
 		box.id = 'ghostery-box';
 		count.id = 'ghostery-count';

app/panel/components/Settings/Purplebox.jsx

@@ -21,12 +21,12 @@ const Purplebox = ({ settingsData, toggleCheckbox, selectItem }) => (
 	<div className="s-tabs-panel">
 		<div className="row">
 			<div className="columns">
-				<h3>{ t('settings_purple_box') }</h3>
+				<h3>{ t('settings_tracker_tally') }</h3>
 				<div className="s-option-group">
 					<div className="s-square-checkbox">
-						<input type="checkbox" id="settings-show-purple-box" name="show_alert" defaultChecked={settingsData.show_alert} onClick={toggleCheckbox} />
-						<label htmlFor="settings-show-purple-box"><span>{ t('settings_show_purple_box') }</span></label>
-						<div className="s-tooltip-down" data-g-tooltip={t('settings_show_purple_box_tooltip')}>
+						<input type="checkbox" id="settings-show-tracker-tally" name="show_alert" defaultChecked={settingsData.show_alert} onClick={toggleCheckbox} />
+						<label htmlFor="settings-show-tracker-tally"><span>{ t('settings_show_tracker_tally') }</span></label>
+						<div className="s-tooltip-down" data-g-tooltip={t('settings_show_tracker_tally_tooltip')}>
 							<img src="../../app/images/panel/icon-information-tooltip.svg" className="s-question" />
 						</div>
 					</div>

app/panel/components/Settings/SettingsMenu.jsx

@@ -64,7 +64,7 @@ const SettingsMenu = ({ is_expanded }) => {
 			</li>
 			<li className="s-tabs-title">
 				<NavLink to="/settings/purplebox">
-					<span>{ t('settings_purple_box') }</span>
+					<span>{ t('settings_tracker_tally') }</span>
 				</NavLink>
 			</li>
 			<li className="s-tabs-title">

app/scss/purplebox.scss

@@ -14,7 +14,7 @@
 @import './partials/_placeholders';
 @import './partials/_mixins';
 
-#ghostery-purple-box {
+#ghostery-tracker-tally {
 	@extend %reset;
 	@extend %noselect;
 	font-family: "Open Sans", "Roboto", Arial, Helvetica, sans-serif !important;