GH-2191: Update purple box text to tracker tally

_locales/en/messages.json

@@ -190,12 +190,6 @@
 			}
 		}
 	},
-	"box_hide": {
-		"message": "Hide Box"
-	},
-	"box_hide_expanded": {
-		"message": "Hide Purple Box"
-	},
 	"box_looking": {
 		"message": "Looking"
 	},
@@ -822,7 +816,7 @@
 		"message": "Ads + Trackers + Annoyances"
 	},
 	"settings_purple_box": {
-		"message": "Purple Box"
+		"message": "Tracker-Tally"
 	},
 	"settings_notifications": {
 		"message": "Notifications"
@@ -882,7 +876,7 @@
 		"message": "Block new trackers added to Ghostery by default"
 	},
 	"settings_show_purple_box": {
-		"message": "Show the purple box in the corner of my browser"
+		"message": "Show the tracker-tally in the corner of my browser"
 	},
 	"settings_dismiss_after": {
 		"message": "Dismiss After"
@@ -909,7 +903,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:"
@@ -1026,7 +1020,7 @@
 		"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."
+		"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

@@ -24,8 +24,8 @@ const Purplebox = ({ settingsData, toggleCheckbox, selectItem }) => (
 				<h3>{ t('settings_purple_box') }</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>
+						<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_purple_box') }</span></label>
 						<div className="s-tooltip-down" data-g-tooltip={t('settings_show_purple_box_tooltip')}>
 							<img src="../../app/images/panel/icon-information-tooltip.svg" className="s-question" />
 						</div>

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;

src/classes/PurpleBox.js

@@ -68,10 +68,8 @@ class PurpleBox {
 				box_warning_slow: t('box_warning_slow'),
 				box_warning_nonsecure: t('box_warning_nonsecure'),
 				tracker: t('box_tracker'),
-				hide: t('box_hide'),
 				settings: t('box_settings'),
 				options_expanded: t('box_options_expanded'),
-				hide_expanded: t('box_hide_expanded'),
 				settings_expanded: t('box_settings_expanded'),
 				box_dismiss_0s: t('box_dismiss_0s'),
 				box_dismiss_5s: t('box_dismiss_5s'),