GH-1979 Allow user selection of Ad Block filter lists

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 (#527)
 + 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 Block Lists"
+	},
+	"settings_adblocker_lists": {
+		"message": "Load the following Ad Block filter lists:"
+	},
+	"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/Rewards.jsx

@@ -20,7 +20,7 @@ import { sendMessage } from '../utils/msg';
 import globals from '../../../src/classes/Globals';
 import { log } from '../../../src/utils/common';
 
-const IS_CLIQZ = (globals.BROWSER_INFO.name === 'cliqz');
+const { IS_CLIQZ } = globals;
 
 /**
  * @class The Rewards Panel shows offers generated by Ghostery Rewards.

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/OptIn.jsx

@@ -14,7 +14,7 @@
 import React from 'react';
 import globals from '../../../../src/classes/Globals';
 
-const IS_CLIQZ = (globals.BROWSER_INFO.name === 'cliqz');
+const { IS_CLIQZ } = globals;
 
 /**
  * @class Implement Opt In subview as a React component.

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;
+
 /**
  * @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>

package.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@cliqz/adblocker-circumvention": "^1.12.2",
     "@cliqz/url-parser": "^1.1.3",
-    "browser-core": "https://github.com/cliqz-oss/browser-core/releases/download/7.45.0/browser-core-7.45.0.tgz",
+    "browser-core": "https://github.com/cliqz-oss/browser-core/releases/download/v7.45.2/browser-core-7.45.2.tgz",
     "classnames": "^2.2.5",
     "d3": "^5.15.1",
     "foundation-sites": "^6.6.2",

src/background.js

@@ -1056,11 +1056,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,

yarn.lock

@@ -1642,9 +1642,9 @@ brorand@^1.0.1:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
-"browser-core@https://github.com/cliqz-oss/browser-core/releases/download/7.45.0/browser-core-7.45.0.tgz":
-  version "7.45.0"
-  resolved "https://github.com/cliqz-oss/browser-core/releases/download/7.45.0/browser-core-7.45.0.tgz#bcd95e54f5992912f2e971ddabb607ba612c588d"
+"browser-core@https://github.com/cliqz-oss/browser-core/releases/download/v7.45.2/browser-core-7.45.2.tgz":
+  version "7.45.2"
+  resolved "https://github.com/cliqz-oss/browser-core/releases/download/v7.45.2/browser-core-7.45.2.tgz#548ff63f47ac7a92be2ffc2bb8edc6de84db7d73"
   dependencies:
     "@cliqz-oss/dexie" "^2.0.4"
     "@cliqz/adblocker-webextension" "^1.9.2"