Add tooltips for BlockSettingsView and move <Tooltip /> to shared-hub…

…. Remove some unused translation messages

_locales/en/messages.json

@@ -1819,7 +1819,7 @@
 		"message": "Ad free"
 	},
 	"ghostery_browser_hub_onboarding_supports_ghosterys_mission": {
-		"message": "Supports Ghostery's Mission"
+		"message": "Supports Ghostery's mission"
 	},
 	"ghostery_browser_hub_onboarding_unlimited_bandwidth": {
 		"message": "Unlimited Bandwidth"
@@ -1861,25 +1861,7 @@
 		"message": "Private by design"
 	},
 	"ghostery_browser_hub_onboarding_private_by_design_description": {
-		"message": "Privacy is incredibly important to us at Ghostery and we've taken extra care to design our products that limits the amount of personal information collected."
-	},
-	"ghostery_browser_hub_onboarding_why_do_you_need_my_email": {
-		"message": "Why do you need my email?"
-	},
-	"ghostery_browser_hub_onboarding_why_do_you_need_my_email_description": {
-		"message": "We've found email is the simplest way to create and secure a unique account without sharing your information. It helps sync your custom settings across your devices."
-	},
-	"ghostery_browser_hub_onboarding_what_do_you_use_my_email_for": {
-		"message": "What do you use my email for?"
-	},
-	"ghostery_browser_hub_onboarding_what_do_you_use_my_email_for_description": {
-		"message": "We never share or sell your personal information. Your email address is used for account management, technical support, product-related communications, and some opt-in features."
-	},
-	"ghostery_browser_hub_onboarding_how_secure_is_": {
-		"message": "How secure is"
-	},
-	"ghostery_browser_hub_onboarding_how_secure_is_ghostery_description": {
-		"message": "We never share or sell your personal information. Your email address is used for account management, technical support, product-related communications, and some opt-in features."
+		"message": "Privacy is incredibly important to us at Ghostery. That’s why we enforce a strict policy when it comes to your data. When you create an account at Ghostery, the only data we collect is your name and email. This information allows us to offer you a user experience wherein you can sync your settings across devices and hear from us about important updates. Under no circumstances do we share or sell this data with any kind of third party."
 	},
 	"ghostery_browser_hub_onboarding_can_i_remove_my_account": {
 		"message": "Can I remove my account?"
@@ -1896,11 +1878,11 @@
 	"ghostery_browser_hub_onboarding_you_are_signed_in_as": {
 		"message": "You are signed in as"
 	},
-	"ghostery_browser_hub_onboarding_yay_youre_all_set": {
-		"message": "Yay! You're all set."
+	"ghostery_browser_hub_onboarding_youve_successfully_set_up_your_browser": {
+		"message": "You've successfully set up your browser!"
 	},
-	"ghostery_browser_hub_onboarding_start_browsing_the_web_with": {
-		"message": "Start browsing the web with"
+	"ghostery_browser_hub_onboarding_surf_with_ease": {
+		"message": "Now you can surf with the greatest of ease."
 	},
 	"ghostery_browser_hub_onboarding_lets_search": {
 		"message": "Let's search"
@@ -1939,7 +1921,7 @@
 		"message": "Blocking \"all trackers\" may cause some websites to break."
 	},
 	"ghostery_browser_hub_info_anti_tracking": {
-		"message": "Anti-tracking anonymizes uniquely identifiable data that trackers try to collect"
+		"message": "Anti-tracking anonymizes uniquely identifiable data that trackers try to collect."
 	},
 	"ghostery_browser_hub_info_smart_browsing": {
 		"message": "Smart-browsing adjusts your blocking settings to decrease page breakage and accelerate page loads."

app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx

@@ -29,21 +29,6 @@ const faqList = [
 		label: t('ghostery_browser_hub_onboarding_private_by_design'),
 		description: t('ghostery_browser_hub_onboarding_private_by_design_description'),
 	},
-	{
-		icon: 'ghosty-letter.svg',
-		label: t('ghostery_browser_hub_onboarding_why_do_you_need_my_email'),
-		description: t('ghostery_browser_hub_onboarding_why_do_you_need_my_email_description'),
-	},
-	{
-		icon: 'ghosty-shield-letter.svg',
-		label: t('ghostery_browser_hub_onboarding_what_do_you_use_my_email_for'),
-		description: t('ghostery_browser_hub_onboarding_what_do_you_use_my_email_for_description'),
-	},
-	{
-		icon: 'ghosty-lock.svg',
-		label: `${t('ghostery_browser_hub_onboarding_how_secure_is_')} Ghostery?`,
-		description: t('ghostery_browser_hub_onboarding_how_secure_is_ghostery_description'),
-	},
 	{
 		icon: 'ghosty-box.svg',
 		label: t('ghostery_browser_hub_onboarding_can_i_remove_my_account'),

app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss

@@ -158,7 +158,8 @@ $color-create-account-form-error-red: #e74055;
 	cursor: pointer;
 	@include breakpoint(small down) {
 		margin: 39px auto 0 auto;
-		text-align: center;
+		display: flex;
+		justify-content: center;
 		float: none;
 	}
 }

app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx

@@ -13,7 +13,7 @@
 
 import React, { Component } from 'react';
 
-// import Tooltip from '../../../../panel/components/Tooltip';
+import Tooltip from '../../../../shared-components/Tooltip';
 import RadioButton from '../../../../shared-components/RadioButton/RadioButton';
 import ToggleCheckbox from '../../../../shared-components/ToggleCheckbox/ToggleCheckbox';
 import { CHOOSE_DEFAULT_SEARCH, ONBOARDING } from '../../OnboardingView/OnboardingConstants';
@@ -137,7 +137,9 @@ class BlockSettingsView extends Component {
 						<li className="BlockSettingsView_question">
 							<div className="BlockSettingsView_questionBlock">
 								{t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')}
-								<div className="BlockSettingsView__infoIcon" />
+								<div className="BlockSettingsView__infoIcon g-tooltip">
+									<Tooltip header={t('ghostery_browser_hub_info_blocking_all')} position="top" isOnboardingHub />
+								</div>
 							</div>
 						</li>
 						<div className="BlockSettingsView_answerBlock">
@@ -159,8 +161,12 @@ class BlockSettingsView extends Component {
 							<div className="BlockSettingsView_answerText">{t('ghostery_browser_hub_onboarding_kinds_of_trackers_none')}</div>
 						</div>
 						<li className="BlockSettingsView_question">
-							{t('ghostery_browser_hub_onboarding_question_anti_tracking')}
-							<div className="BlockSettingsView__infoIcon" />
+							<div className="BlockSettingsView_questionBlock">
+								{t('ghostery_browser_hub_onboarding_question_anti_tracking')}
+								<div className="BlockSettingsView__infoIcon g-tooltip">
+									<Tooltip header={t('ghostery_browser_hub_info_anti_tracking')} position="top" isOnboardingHub />
+								</div>
+							</div>
 						</li>
 						<div className="BlockSettingsView_answerBlock">
 							<div className="BlockSettingsView__radioButtonContainer">
@@ -175,8 +181,12 @@ class BlockSettingsView extends Component {
 							<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
 						</div>
 						<li className="BlockSettingsView_question">
-							{t('ghostery_browser_hub_onboarding_question_smart_browsing')}
-							<div className="BlockSettingsView__infoIcon" src="/app/images/hub/setup/info.svg" />
+							<div className="BlockSettingsView_questionBlock">
+								{t('ghostery_browser_hub_onboarding_question_smart_browsing')}
+								<div className="BlockSettingsView__infoIcon g-tooltip">
+									<Tooltip header={t('ghostery_browser_hub_info_smart_browsing')} position="top" isOnboardingHub />
+								</div>
+							</div>
 						</li>
 						<div className="BlockSettingsView_answerBlock">
 							<div className="BlockSettingsView__radioButtonContainer">

app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx

@@ -23,8 +23,8 @@ const SuccessView = (props) => {
 	const { sendPing } = actions;
 	return (
 		<div className="SuccessView__container">
-			<div className="SuccessView__title">{t('ghostery_browser_hub_onboarding_yay_youre_all_set')}</div>
-			<div className="SuccessView__subtitle">{`${t('ghostery_browser_hub_onboarding_start_browsing_the_web_with')} Ghostery`}</div>
+			<div className="SuccessView__title">{t('ghostery_browser_hub_onboarding_youve_successfully_set_up_your_browser')}</div>
+			<div className="SuccessView__subtitle">{`${t('ghostery_browser_hub_onboarding_surf_with_ease')}`}</div>
 			<img className="SuccessView__ghosterySuite" src="/app/images/hub/success/ghostery-suite.png" />
 			<button className="SuccessView__ctaButton" onClick={() => sendPing({ type: 'gb_onboarding_success' })} type="button">{t('ghostery_browser_hub_onboarding_lets_search')}</button>
 		</div>

app/panel-android/components/content/__tests__/OverviewTab.jsx

@@ -16,7 +16,7 @@ import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import OverviewTab from '../OverviewTab';
 
-jest.mock('../../../../panel/components/Tooltip');
+jest.mock('../../../../shared-components/Tooltip');
 
 describe('app/panel-android/components/content/OverviewTab.jsx', () => {
 	describe('Snapshot tests with react-test-renderer', () => {

app/panel/components/BuildingBlocks/CliqzFeature.jsx

@@ -14,7 +14,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ClassNames from 'classnames';
-import Tooltip from '../Tooltip';
+import Tooltip from '../../../shared-components/Tooltip';
 
 /**
  * @class Implements rendering and interaction for Cliqz feature icon toggles

app/panel/components/BuildingBlocks/DonutGraph.jsx

@@ -23,7 +23,7 @@ import {
 	scaleLinear,
 	select
 } from 'd3';
-import Tooltip from '../Tooltip';
+import Tooltip from '../../../shared-components/Tooltip';
 
 /**
  * @class Generate donut graph. Used to display tracker data in the Summary View.

app/panel/components/BuildingBlocks/GhosteryFeature.jsx

@@ -14,7 +14,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ClassNames from 'classnames';
-import Tooltip from '../Tooltip';
+import Tooltip from '../../../shared-components/Tooltip';
 import globals from '../../../../src/classes/Globals';
 
 const { BLACKLISTED, WHITELISTED } = globals;

app/panel/components/BuildingBlocks/PauseButton.jsx

@@ -14,7 +14,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ClassNames from 'classnames';
-import Tooltip from '../Tooltip';
+import Tooltip from '../../../shared-components/Tooltip';
 
 /**
  * @class Implements the Pause button on the Summary view.

app/panel/components/BuildingBlocks/__tests__/CliqzFeature.jsx

@@ -22,7 +22,7 @@ global.t = function(str) {
 };
 
 // Fake the Tooltip implementation
-jest.mock('../../Tooltip');
+jest.mock('../../../../shared-components/Tooltip');
 
 describe('app/panel/components/CliqzFeature.jsx', () => {
 	describe('Snapshot tests with react-test-renderer', () => {

app/panel/components/BuildingBlocks/__tests__/DonutGraph.jsx

@@ -22,7 +22,7 @@ global.t = function(str) {
 };
 
 // Fake the Tooltip implementation
-jest.mock('../../Tooltip');
+jest.mock('../../../../shared-components/Tooltip');
 
 describe('app/panel/components/DonutGraph.jsx', () => {
 	describe('Snapshot tests with react-test-renderer', () => {

app/panel/components/BuildingBlocks/__tests__/GhosteryFeature.jsx

@@ -22,7 +22,7 @@ global.t = function(str) {
 };
 
 // Fake the Tooltip implementation
-jest.mock('../../Tooltip');
+jest.mock('../../../../shared-components/Tooltip');
 
 describe('app/panel/components/GhosteryFeature.jsx', () => {
 	describe('Snapshot tests with react-test-renderer', () => {

app/panel/components/Header.jsx

@@ -15,7 +15,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { ReactSVG } from 'react-svg';
 import ClassNames from 'classnames';
-import Tooltip from './Tooltip';
+import Tooltip from '../../shared-components/Tooltip';
 import HeaderMenu from './HeaderMenu';
 import { sendMessage, sendMessageInPromise } from '../utils/msg';
 import { log } from '../../../src/utils/common';

app/panel/components/Summary.jsx

@@ -14,7 +14,7 @@
 import React from 'react';
 import { ReactSVG } from 'react-svg';
 import ClassNames from 'classnames';
-import Tooltip from './Tooltip';
+import Tooltip from '../../shared-components/Tooltip';
 import DynamicUIPortContext from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';
 import globals from '../../../src/classes/Globals';

app/scss/hub_ghostery_browser.scss

@@ -82,5 +82,4 @@ html, body, #root {
 // Imports from ../shared-components directory
 @import '../shared-components/ToastMessage/ToastMessage.scss';
 @import '../shared-components/ToggleCheckbox/ToggleCheckbox.scss';
-
-
+@import '../shared-components/Tooltip/Tooltip.scss';

app/scss/panel.scss

@@ -69,7 +69,6 @@ html body {
 @import './partials/_donut_graph';
 @import './partials/_ghostery_feature';
 @import './partials/_cliqz_feature';
-@import './partials/_tooltip';
 @import './partials/_not_scanned';
 @import './partials/_subscribe';
 @import './partials/_stats';
@@ -83,3 +82,4 @@ html body {
 @import '../shared-components/ModalContent/PlusPromoModalContent/PlusPromoModalContent.scss';
 @import '../shared-components/ModalContent/InsightsPromoModalContent/InsightsPromoModalContent.scss';
 @import '../shared-components/ForgotPassword/ForgotPassword.scss';
+@import '../shared-components/Tooltip/Tooltip.scss';

app/panel/components/Tooltip.jsx → app/shared-components/Tooltip/Tooltip.jsx

@@ -87,11 +87,12 @@ class Tooltip extends React.Component {
 	 */
 	render() {
 		const {
-			theme, position, header, body
+			theme, position, header, body, isOnboardingHub
 		} = this.props;
 		const { show } = this.state;
 		const compClassNames = ClassNames({
 			'dark-theme': theme === 'dark',
+			onboarding: isOnboardingHub
 		});
 
 		return (

app/scss/partials/_tooltip.scss → app/shared-components/Tooltip/Tooltip.scss

@@ -108,6 +108,35 @@
 			line-height: 1.5;
 		}
 	}
+	.onboarding .tooltip-content {
+		color: $white;
+		background-color: $black;
+		font-size: 14px;
+		line-height: 1.5;
+		padding: 11px 10px;
+		width: 150px;
+		text-align: center;
+		position: absolute;
+		z-index: 20;
+		box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
+		box-sizing: border-box;
+		opacity: .96;
+		border-radius: 4px;
+		&:after {
+			box-sizing: border-box;
+			border-style: solid;
+			content: '';
+			position: absolute;
+			border-width: 7px;
+			border-color: transparent transparent $black $black;
+			box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.2);
+			transform-origin: 0 0;
+		}
+		.tooltip-header {
+			font-weight: 500;
+		}
+	}
+
 	.dark-theme .tooltip-content {
 		background-color: #333333;
 		color: #ffffff;

app/shared-components/Tooltip/index.js

@@ -0,0 +1,16 @@
+/**
+ * Point of entry index.js file for Tooltip
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import Tooltip from './Tooltip';
+
+export default Tooltip;

src/classes/Metrics.js

@@ -407,7 +407,6 @@ class Metrics {
 	 * @return {number} The deepest setup page reached by user during setup
 	 */
 	static _getSetupStep(type) {
-		console.log('conf.setup_step', conf.setup_step);
 		if (conf.metrics.install_complete_all
 			|| type === 'install_complete'
 			|| type === 'gb_onboarding'