add new component to Settings panel for Ad Blocker settings

CHANGELOG.md

@@ -1,6 +1,7 @@
 ### GHOSTERY 8.5.0 ()
 
 + New Spring themes for Plus subscribers (#525)
++ New settings option to select Ad-Blocker lists (#)
 + Add password reset link to Intro Hub (#507)
 + Updated in-app promo modals (#509)
 + Fixes bug in site-specific tracker white-listing (#522, Fixes #519)

_locales/en/messages.json

@@ -806,6 +806,21 @@
 		"description": "Options page site whitelisting error message shown when whitelisting a URL that is already in the whitelist.",
 		"message": "This site is already whitelisted."
 	},
+	"settings_adblocker": {
+		"message": "Ad Blocker"
+	},
+	"settings_adblocker_lists": {
+		"message": "Select which Ad Blocking filter lists will be loaded."
+	},
+	"settings_adblocker_list_1": {
+		"message": "Ads only"
+	},
+	"settings_adblocker_list_2": {
+		"message": "Ads + Trackers"
+	},
+	"settings_adblocker_list_3": {
+		"message": "Ads + Trackers + Annoyances"
+	},
 	"settings_purple_box": {
 		"message": "Purple Box"
 	},

app/panel/components/Settings.jsx

@@ -17,6 +17,7 @@ import { Route } from 'react-router-dom';
 import { sendMessage } from '../utils/msg';
 import SettingsMenu from './Settings/SettingsMenu';
 import GlobalBlocking from './Settings/GlobalBlocking';
+import AdBlocker from './Settings/AdBlocker';
 import TrustAndRestrict from './Settings/TrustAndRestrict';
 import GeneralSettings from './Settings/GeneralSettings';
 import Notifications from './Settings/Notifications';
@@ -79,6 +80,8 @@ class Settings extends React.Component {
 
 	GeneralSettingsComponent = () => (<GeneralSettings toggleCheckbox={this.toggleCheckbox} settingsData={this.props} actions={this.props.actions} />);
 
+	AdBlockerComponent = () => (<AdBlocker settingsData={this.props} actions={this.props.actions} />);
+
 	PurpleboxComponent = () => (<Purplebox toggleCheckbox={this.toggleCheckbox} selectItem={this.selectItem} settingsData={this.props} actions={this.props.actions} />);
 
 	NotificationsComponent = () => (<Notifications toggleCheckbox={this.toggleCheckbox} settingsData={this.props} actions={this.props.actions} />);
@@ -165,6 +168,7 @@ class Settings extends React.Component {
 					<Route path="/settings/globalblocking" render={this.GlobalBlockingComponent} />
 					<Route path="/settings/trustandrestrict" render={this.TrustAndRestrictComponent} />
 					<Route path="/settings/generalsettings" render={this.GeneralSettingsComponent} />
+					<Route path="/settings/adblocker" render={this.AdBlockerComponent} />
 					<Route path="/settings/notifications" render={this.NotificationsComponent} />
 					<Route path="/settings/optin" render={this.OptInComponent} />
 					<Route path="/settings/purplebox" render={this.PurpleboxComponent} />

app/panel/components/Settings/AdBlocker.jsx

@@ -0,0 +1,65 @@
+/**
+ * Ad Blocker Settings Component
+ *
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import { RadioButtonGroup } from '../BuildingBlocks';
+
+/**
+ * @class Implement Ad Blocker Settings subview as a React component.
+ * The view opens from the left-side menu of the main Settings view.
+ * It allows the user to choose their Ad Blocker filter lists.
+ * @memberOf SettingsComponents
+ */
+const AdBlocker = (props) => {
+	const { settingsData } = props;
+
+	const handleListSelection = (index) => {
+		props.actions.selectItem({
+			event: 'cliqz_adb_mode',
+			value: index,
+		});
+	};
+
+	return (
+		<div className="s-tabs-panel">
+			<div className="row">
+				<div className="columns">
+					<h3>{ t('settings_adblocker') }</h3>
+					<h5>{ t('settings_adblocker_lists') }</h5>
+					<RadioButtonGroup
+						labels={['settings_adblocker_list_1', 'settings_adblocker_list_2', 'settings_adblocker_list_3']}
+						handleItemClick={handleListSelection}
+						indexClicked={settingsData.cliqz_adb_mode}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+AdBlocker.propTypes = {
+	settingsData: PropTypes.shape({
+		cliqz_adb_mode: PropTypes.number,
+	}),
+	actions: PropTypes.shape({
+		selectItem: PropTypes.func.isRequired,
+	}).isRequired,
+};
+AdBlocker.defaultProps = {
+	settingsData: {
+		cliqz_adb_mode: 0,
+	},
+};
+
+export default AdBlocker;

app/panel/components/Settings/SettingsMenu.jsx

@@ -14,6 +14,10 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import ClassNames from 'classnames';
+import globals from '../../../../src/classes/Globals';
+
+const IS_CLIQZ = (globals.BROWSER_INFO.name === 'cliqz');
+
 /**
  * @const Implement left pane of the main Settings view as a
  * menu which allows to navigate to Setting subviews.
@@ -41,6 +45,13 @@ const SettingsMenu = (props) => {
 					<span>{ t('settings_general_settings') }</span>
 				</NavLink>
 			</li>
+			{!IS_CLIQZ && (
+				<li className="s-tabs-title">
+					<NavLink to="/settings/adblocker">
+						<span>{ t('settings_adblocker') }</span>
+					</NavLink>
+				</li>
+			)}
 			<li className="s-tabs-title">
 				<NavLink to="/settings/notifications">
 					<span>{ t('settings_notifications') }</span>

src/background.js

@@ -1052,11 +1052,14 @@ function initializeDispatcher() {
 			setCliqzModuleEnabled(adblocker, false);
 		}
 	});
-
+	dispatcher.on('conf.save.cliqz_adb_mode', (val) => {
+		if (!IS_CLIQZ) {
+			cliqz.prefs.set('cliqz-adb-mode', val);
+		}
+	});
 	dispatcher.on('conf.changed.settings', debounce((key) => {
 		log('Conf value changed for a watched user setting:', key);
 	}, 200));
-
 	dispatcher.on('globals.save.paused_blocking', () => {
 		// if user has paused Ghostery, suspect broken page
 		if (globals.SESSION.paused_blocking) { metrics.handleBrokenPageTrigger(globals.BROKEN_PAGE_PAUSE); }

src/classes/ConfData.js

@@ -100,6 +100,7 @@ class ConfData {
 			_initProperty('block_by_default', false);
 			_initProperty('bugs_last_checked', 0);
 			_initProperty('bugs_last_updated', nowTime);
+			_initProperty('cliqz_adb_mode', 0);
 			_initProperty('cliqz_legacy_opt_in', false);
 			_initProperty('cliqz_import_state', 0);
 			_initProperty('cmp_version', 0);

src/classes/Globals.js

@@ -101,6 +101,7 @@ class Globals {
 			'alert_bubble_timeout',
 			'alert_expanded',
 			'block_by_default',
+			'cliqz_adb_mode',
 			'cliqz_module_whitelist',
 			'current_theme',
 			'enable_ad_block',

src/classes/PanelData.js

@@ -481,7 +481,7 @@ class PanelData {
 	 */
 	_getUserSettingsForSettingsView(userSettingsSource) {
 		const {
-			alert_bubble_pos, alert_bubble_timeout, block_by_default, enable_autoupdate,
+			alert_bubble_pos, alert_bubble_timeout, block_by_default, cliqz_adb_mode, enable_autoupdate,
 			enable_click2play, enable_click2play_social, enable_human_web, enable_offers,
 			enable_metrics, hide_alert_trusted, ignore_first_party, notify_library_updates,
 			notify_promotions, notify_upgrade_updates, selected_app_ids, show_alert, show_badge,
@@ -492,6 +492,7 @@ class PanelData {
 			alert_bubble_pos,
 			alert_bubble_timeout,
 			block_by_default,
+			cliqz_adb_mode,
 			enable_autoupdate,
 			enable_click2play,
 			enable_click2play_social,