GH-888 updated pause button location and tooltips

_locales/en/messages.json

@@ -474,6 +474,12 @@
 		"message": "Undo"
 	},
 	"summary_pause_ghostery": {
+		"message": "Pause Ghostery"
+	},
+	"summary_pause_ghostery_tooltip": {
+		"message": "Pause Ghostery extension."
+	},
+	"summary_pause_ghostery_ab_pause": {
 		"message": "Pause"
 	},
 	"pause_30_min": {
@@ -495,6 +501,12 @@
 		"message": "24 hrs"
 	},
 	"summary_resume_ghostery": {
+		"message": "Resume Ghostery"
+	},
+	"summary_resume_ghostery_tooltip": {
+		"message": "Ghostery extension paused. Click to resume."
+	},
+	"summary_resume_ghostery_ab_pause": {
 		"message": "Resume"
 	},
 	"summary_show_menu": {
@@ -1173,8 +1185,14 @@
 	"settings_filter_new": {
 		"message": "New Since Last Update"
 	},
+	"alert_ghostery_paused": {
+		"message": "Ghostery extension has been paused."
+	},
+	"alert_ghostery_resumed": {
+		"message": "Ghostery extension has been resumed."
+	},
 	"alert_anti_track_on": {
-		"message": "Enhanced Anti-Trackng ON. Private data will be anonymized."
+		"message": "Enhanced Anti-Trackng ON. Personal data will be anonymized."
 	},
 	"alert_anti_track_off": {
 		"message": "Enhanced Anti-Tracking OFF. Personal data will not be anonymized."
@@ -1231,7 +1249,7 @@
 		"message": "Automatically block and unblock trackers to optimize page performance."
 	},
 	"tooltip_smart_block_body_on": {
-		"message": "Tracking blocking adjusted to optimize page performance."
+		"message": "Tracker blocking adjusted to optimize page performance."
 	},
 	"tooltip_trust": {
 		"message": "Always allow trackers & disable Anti-Tracking on this site."

app/panel/components/BuildingBlocks/GhosteryFeatures.jsx

@@ -93,6 +93,7 @@ class GhosteryFeatures extends React.Component {
 	 */
 	render() {
 		const {
+			isAbPause,
 			isInactive,
 			isStacked,
 			isCondensed,
@@ -104,23 +105,27 @@ class GhosteryFeatures extends React.Component {
 			stacked: isStacked,
 		});
 		const trustClassNames = ClassNames('button', 'button-trust', 'g-tooltip', {
-			'button-left': !isStacked,
-			'button-top': isStacked,
+			'ab-pause': isAbPause,
+			'button-left': isAbPause && !isStacked,
+			'button-top': (isAbPause || isCondensed) && isStacked,
 			condensed: isCondensed,
 			active: sitePolicy === 2,
 			clickable: !isInactive,
 			'not-clickable': isInactive,
 		});
 		const customClassNames = ClassNames('button', 'button-custom', 'g-tooltip', {
-			'button-center': true,
+			'ab-pause': isAbPause,
+			'button-center': isAbPause && true,
 			condensed: isCondensed,
 			active: !sitePolicy,
 			clickable: !isInactive,
 			'not-clickable': isInactive,
 		});
 		const restrictClassNames = ClassNames('button', 'button-restrict', 'g-tooltip', {
-			'button-right': !isStacked,
-			'button-bottom': isStacked,
+			'ab-pause': isAbPause,
+			'button-right': isAbPause && !isStacked,
+			'button-bottom': isAbPause && isStacked,
+			'button-center': !isAbPause && isCondensed && isStacked,
 			condensed: isCondensed,
 			active: sitePolicy === 1,
 			clickable: !isInactive,
@@ -138,14 +143,16 @@ class GhosteryFeatures extends React.Component {
 						</span>
 						<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">
-							<span className="button-text">
-								{t('summary_custom_settings')}
+					{isAbPause && (
+						<div className={customClassNames} onClick={this.clickCustomButton}>
+							<span className="flex-container align-center-middle full-height">
+								<span className="button-text">
+									{t('summary_custom_settings')}
+								</span>
 							</span>
-						</span>
-						<Tooltip header={t('tooltip_custom_settings')} position={(isStacked) ? 'right' : 'top'} />
-					</div>
+							<Tooltip header={t('tooltip_custom_settings')} position={(isStacked) ? 'right' : 'top'} />
+						</div>
+					)}
 					<div className={restrictClassNames} onClick={this.clickRestrictButton}>
 						<span className="flex-container align-center-middle full-height">
 							<span className="button-text">

app/panel/components/BuildingBlocks/PauseButton.jsx

@@ -101,12 +101,40 @@ class PauseButton extends React.Component {
 		);
 	}
 
+	/**
+	 * Helper render function for Pause Button text
+	 * @return {JSX} JSX for the Pause Button's text
+	 */
+	renderPauseButtonText() {
+		const {
+			isPaused,
+			isCondensed,
+			isAbPause,
+		} = this.props;
+
+		if (isCondensed) {
+			return (<span className="pause-button-icon pause-button-text" />);
+		} else if (isAbPause) {
+			return (
+				<span className="pause-button-icon pause-button-text">
+					{isPaused ? t('summary_resume_ghostery_ab_pause') : t('summary_pause_ghostery_ab_pause')}
+				</span>
+			);
+		}
+		return (
+			<span className="pause-button-text">
+				{isPaused ? t('summary_resume_ghostery') : t('summary_pause_ghostery')}
+			</span>
+		);
+	}
+
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the Pause Button on the Summary View
 	 */
 	render() {
 		const pauseButtonClassNames = ClassNames('button', 'button-left', 'button-pause', {
+			'g-tooltip': !this.props.isAbPause,
 			active: this.props.isPaused,
 			smaller: !this.props.isCentered,
 			smallest: this.props.isCentered && this.props.isCondensed,
@@ -115,14 +143,16 @@ class PauseButton extends React.Component {
 		});
 		const dropdownButtonClassNames = ClassNames('button', 'button-right', 'button-caret', {
 			active: this.state.showDropdown,
+			smaller: !this.props.isCentered,
+			smallest: this.props.isCentered && this.props.isCondensed,
 			'no-border-radius': this.props.isCentered && this.props.isCondensed,
 			'dropdown-open': this.state.showDropdown,
 		});
 		const dropdownContainerClassNames = ClassNames('button-group', 'dropdown-container', {
 			centered: this.props.isCentered,
 		});
 		const dropdownContainerStyles = {
-			left: `${this.props.isCentered ? this.pauseLeft : 0}px`,
+			left: `${(this.props.isCentered && this.props.isAbPause) ? this.pauseLeft : 0}px`,
 		};
 
 		return (
@@ -136,12 +166,12 @@ class PauseButton extends React.Component {
 							this.pauseLeft = node && node.offsetLeft;
 						}}
 					>
-						{this.props.isCondensed ? (
-							<span />
-						) : (
-							<span>
-								{this.props.isPaused ? t('summary_resume_ghostery') : t('summary_pause_ghostery')}
-							</span>
+						{this.renderPauseButtonText()}
+						{!this.props.isAbPause && (
+							<Tooltip
+								header={this.props.isPaused ? t('summary_resume_ghostery_tooltip') : t('summary_pause_ghostery_tooltip')}
+								position={(this.props.isCentered) ? 'right' : 'top'}
+							/>
 						)}
 					</div>
 					<div className={dropdownButtonClassNames} onClick={this.clickDropdownCaret}>

app/panel/components/Summary.jsx

@@ -24,6 +24,7 @@ import {
 } from './BuildingBlocks';
 
 const { IS_CLIQZ } = globals;
+const AB_PAUSE_BUTTON = true;
 
 /**
  * @class Implements the Summary View, which is displayed as the entire panel
@@ -38,6 +39,7 @@ class Summary extends React.Component {
 		this.state = {
 			trackerLatencyTotal: '',
 			disableBlocking: false,
+			abPause: AB_PAUSE_BUTTON,
 		};
 
 		// Event Bindings
@@ -122,6 +124,7 @@ class Summary extends React.Component {
 	 */
 	clickPauseButton(time) {
 		const ghosteryPaused = this.props.paused_blocking;
+		const text = ghosteryPaused ? t('alert_ghostery_resumed') : t('alert_ghostery_paused');
 		sendMessage('ping', ghosteryPaused ? 'resume' : 'pause');
 		if (typeof time === 'number') {
 			sendMessage('ping', 'pause_snooze');
@@ -135,6 +138,7 @@ class Summary extends React.Component {
 		this.props.actions.showNotification({
 			updated: 'ghosteryPaused',
 			reload: true,
+			text,
 		});
 	}
 
@@ -261,12 +265,14 @@ class Summary extends React.Component {
 	* @return {JSX} JSX for rendering the Summary View of the panel
 	*/
 	render() {
+		const { abPause } = this.state;
 		const { is_expert, is_expanded } = this.props;
 		const showCondensed = is_expert && is_expanded;
 
 		const summaryClassNames = ClassNames('', {
 			expert: is_expert,
 			condensed: showCondensed,
+			'ab-pause': abPause,
 		});
 
 		const blockedTrackersClassNames = ClassNames('blocked-trackers', {
@@ -283,24 +289,27 @@ class Summary extends React.Component {
 
 		return (
 			<div id="content-summary" className={summaryClassNames}>
-				<div className="pause-button-container">
-					<PauseButton
-						isPaused={this.props.paused_blocking}
-						isPausedTimeout={this.props.paused_blocking_timeout}
-						clickPause={this.clickPauseButton}
-						dropdownItems={this.pauseOptions}
-						isCentered={is_expert}
-						isCondensed={showCondensed}
-					/>
-				</div>
+				{abPause && (
+					<div className="pause-button-container">
+						<PauseButton
+							isPaused={this.props.paused_blocking}
+							isPausedTimeout={this.props.paused_blocking_timeout}
+							clickPause={this.clickPauseButton}
+							dropdownItems={this.pauseOptions}
+							isAbPause={abPause}
+							isCentered={is_expert}
+							isCondensed={showCondensed}
+						/>
+					</div>
+				)}
 
 				{this.state.disableBlocking && !showCondensed && (
 					<NotScanned isSmall={is_expert} />
 				)}
 
-				{!this.state.disableBlocking && is_expert && !showCondensed && (
+				{abPause && !this.state.disableBlocking && is_expert && !showCondensed && (
 					<div className="page-host">
-						{this.props.pageHost || 'bloink fallon'}
+						{this.props.pageHost}
 					</div>
 				)}
 
@@ -323,7 +332,7 @@ class Summary extends React.Component {
 					</div>
 				)}
 
-				{!this.state.disableBlocking && !is_expert && !showCondensed && (
+				{!this.state.disableBlocking && (!abPause || !is_expert) && !showCondensed && (
 					<div className="page-host">
 						{this.props.pageHost}
 					</div>
@@ -354,10 +363,23 @@ class Summary extends React.Component {
 					<GhosteryFeatures
 						clickButton={this.clickSitePolicy}
 						sitePolicy={this.props.sitePolicy}
+						isAbPause={abPause}
 						isStacked={is_expert}
 						isInactive={this.props.paused_blocking || this.state.disableBlocking}
 						isCondensed={showCondensed}
 					/>
+
+					{!abPause && (
+						<PauseButton
+							isPaused={this.props.paused_blocking}
+							isPausedTimeout={this.props.paused_blocking_timeout}
+							clickPause={this.clickPauseButton}
+							dropdownItems={this.pauseOptions}
+							isAbPause={abPause}
+							isCentered={is_expert}
+							isCondensed={showCondensed}
+						/>
+					)}
 				</div>
 
 				<div className="cliqz-features-container">

app/panel/components/__tests__/PauseButton.jsx

@@ -16,14 +16,19 @@ import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
 import PauseButton from '../BuildingBlocks/PauseButton';
 
+
 // Fake the translation function to only return the translation key
 global.t = function (str) {
 	return str;
 };
 
+// Fake the Tooltip implementation
+jest.mock('../Tooltip');
+
 // Snapshot Tests
 it('renders unpaused state in simple view', () => {
 	const initialState = {
+		isAbPause: false,
 		isPaused: false,
 		isPausedTimeout: null,
 		clickPause: () => {},
@@ -41,6 +46,7 @@ it('renders unpaused state in simple view', () => {
 
 it('renders paused state in detailed view', () => {
 	const initialState = {
+		isAbPause: false,
 		isPaused: true,
 		isPausedTimeout: null,
 		clickPause: () => {},
@@ -58,6 +64,7 @@ it('renders paused state in detailed view', () => {
 
 it('renders paused state in detailed condensed view', () => {
 	const initialState = {
+		isAbPause: true,
 		isPaused: true,
 		isPausedTimeout: null,
 		clickPause: () => {},