Updated Firefox Android extension (#587)

* add linting for no-param-reassign and fix resulting linting errors * add linting for prefer-object-spread and fix resulting linting errors * add linting for no-restricted-syntax and fix 1/2 of resulting errors * add linting for no-prototype-builtins and fix resulting linting errors * add linting for class-methods-use-this and fix most resulting errors. Add /tools and /tests to linter. Update height in UpgradeBanner * finish linting for class-methods-use-this * add linting for no-mixed-operators and fix resulting linting errors * add linting for import/prefer-default-export and fix resulting linting errors * add linting for react/no-access-state-in-setstate and fix resulting linting errors * add linting for react/jsx-props-no-spreading and fix resulting linting errors * finish linting errors for no-restricted-syntax. 1 remains: couldn't resolve removing iterator loops for urlSearchParams * Fix linting errors resulting from the merge with develop * Refactor UNSAFE_componentWillMount into either constructor or componentDidMount, leave notes for how decision was made. * Refactor UNSAFE_componentWillReceiveProps to componentDidUpdate or getDerivedStateFromProps * re-enable lint exception for no-prototype-builtins and revert calls back to hasOwnProperty * add single line exception for no-restricted-syntax linting rule * add linting for react/destructuring-assignment and fix errors. ToDo: test code and check for errors * Fix minor bugs * Fix General Settings last updated text * rework linting rule no-param-reassign to have more exceptions and param object destructuring * Remove file and line linting exceptions. * re-add linting rule react/sort-comp and fix resulting errors * remove added linting exception consistent-return and fix resulting errors * remove added linting expression no-use-before-define and fix resulting errors. fix BugDB.js bug. * Fix linting error * fix minor bugs * Code cleanup: fix PromoModal imports * remove unnecessary hasOwnProperty calls after refactored for...in loops * Fix missing strings bug * Fix last remaining string bug * Begin work on a global object for debugging. * Add accountEvents array to Ghostery Debug for logging login/out events * Add way to output window.GHOSTERY for the user * prevent error when not signed in * Promises don't reject, just give important data to user * Download DebugInfo as a JSON file. * Update panel so it can be opened in a seperate tab * Update panel-android Tabs. Non-happy path tests needed. * Refactor the Panel Android React app * Panel Android OverviewTab more complete * More work on PanelAndroid I * More work on PanelAndroid II * More work on PanelAndroid III * More work on PanelAndroid IV * More work on PanelAndroid: BlockingTracker and BlockingCategory need final touches. More tests needed. * PanelAndroid update all components complete. Need to fix bugs and add new features * Clean up PanelAndroid * Add Account and Settings route to PanelAndroid * Add Account and Settings to PanelAndroid. * Rework OverviewTab and add tests * Add actions to PanelAndroid Settings * Update BlockingTracker to render in a List compoent to better performance * Update PausedButton actions to work with dropdown * Update path to cliqz trackerdb. Update compyright year for touched files in this PR * Fix linting error * Add CliqzFeatures to PanelAndroid TrackerList * Fix linting and testing errors * Add unknown category in tracker list * sort unknown trackers and hide category when there are no trackers * Add Help and About to PanelAndroid Settings Menu. UI Tweak for Settings and make clicking RadioButton Labels switch Radios. * Hide account icon, try to unhide tab label * Update tests * fix android icons and bump FF min version * remove console debugging code * clean up hub components on Android * fixing issues with unknown trackers on android * update snapshots * Fix broken tests * update hub tutorial images for android * Remove PanelAndroid account code. Replace with Hub/Account-Web * Update tests * add support for new Ghostery android UA string * Add Import/Export to PanelAndroid. Need actions implemented * wire up unknown tracker whitelisting * fix issue where block/allow unknown trackers did not persist on android * Hide ImportExport, add tests for some Settings * Add NeedsReload message to PanelAndroid * Fix bug on BlockingTracker * Add tests for components used in PanelAndroid Settings * fix linting error * Update GeneralSettings test to not depend on MomentJS * fix linting error * Implement Import/Export feature * fix android UA detection * fix hw opt-in for android browser * fix humanweb opt-in for hub on android * clean up annotation and naming for android * refactor getBrowserInfo check * ternary cleanup Co-authored-by: Caleb Richelson <caleb.richelson@gmail.com>
ghostery · wlycdgr · Jul 31, 2020 · Aug 10, 2020 · Aug 10, 2020 · Aug 10, 2020
commit 4b3e1920ed71387fdc85153487b8dafeb73fc230
@@ -833,6 +833,9 @@
 	"settings_account": {
 		"message": "Account"
 	},
+	"settings_import_export": {
+		"message": "Import & Export Settings"
+	},
 	"settings_trackers": {
 		"message": "Trackers"
 	},
@@ -1234,6 +1237,48 @@
 			}
 		}
 	},
+	"android_tab_overview": {
+		"message": "Overview"
+	},
+	"android_tab_site_blocking": {
+		"message": "Site Blocking"
+	},
+	"android_tab_global_blocking": {
+		"message": "Global Blocking"
+	},
+	"android_site_blocking_header": {
+		"message": "Trackers on this site"
+	},
+	"android_global_blocking_header": {
+		"message": "Global Tracking"
+	},
+	"android_blocking_reset": {
+		"message": "Reset Settings"
+	},
+	"android_block": {
+		"message": "Block"
+	},
+	"android_unblock": {
+		"message": "Unblock"
+	},
+	"android_restrict": {
+		"message": "Restrict"
+	},
+	"android_unrestrict": {
+		"message": "Undo"
+	},
+	"android_trust": {
+		"message": "Trust"
+	},
+	"android_untrust": {
+		"message": "Undo"
+	},
+	"android_anonymize": {
+		"message": "Anonymize"
+	},
+	"android_anonymized": {
+		"message": "Anonymized"
+	},
 	"hub_side_navigation_home": {
 		"message": "Home"
 	},

@@ -1,13 +1,13 @@
 /**
- * Ghostery NotificationsContentScript
+ * Ghostery Notifications Content Script
  *
  * This file provides notification alerts for the CMP, update dialogs
  * and import/export functionality
  *
  * Ghostery Browser Extension
  * https://www.ghostery.com/
  *
- * Copyright 2019 Ghostery, Inc. All rights reserved.
+ * Copyright 2020 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
@@ -607,10 +607,12 @@ const NotificationsContentScript = (function(win, doc) {
 	 * @memberOf NotificationsContentScript
 	 * @package
 	 */
-	const exportFile = function(content) {
+	const exportFile = function(content, type) {
 		const textFileAsBlob = new Blob([content], { type: 'text/plain' });
+		const ext = type === 'Ghostery-Backup' ? 'ghost' : 'json';
 		const d = new Date();
-		const fileNameToSaveAs = `Ghostery-Backup-${d.getMonth() + 1}-${d.getDate()}-${d.getFullYear()}.ghost`;
+		const dStr = `${d.getMonth() + 1}-${d.getDate()}-${d.getFullYear()}`;
+		const fileNameToSaveAs = `${type}-${dStr}.${ext}`;
 		let url = '';
 		if (window.URL) {
 			url = window.URL.createObjectURL(textFileAsBlob);
@@ -764,7 +766,8 @@ const NotificationsContentScript = (function(win, doc) {
 			} else if (name === 'onFileImported') {
 				updateBrowseWindow(message);
 			} else if (name === 'exportFile') {
-				exportFile(message);
+				const { content, type } = message;
+				exportFile(content, type);
 			}
 
 			// trigger a response callback to src/background so that we can handle errors properly

@@ -18,8 +18,7 @@ import { NavLink } from 'react-router-dom';
 import globals from '../../../../src/classes/Globals';
 import { ToggleCheckbox } from '../../../shared-components';
 
-const { IS_CLIQZ } = globals;
-const IS_FIREFOX = (globals.BROWSER_INFO.name === 'firefox');
+const { IS_CLIQZ, BROWSER_INFO } = globals;
 
 /**
  * A Functional React component for rendering the Home View
@@ -40,10 +39,10 @@ const HomeView = (props) => {
 	const accountHref = globals.ACCOUNT_BASE_URL;
 
 	let headerInfoText = t('hub_home_header_info');
-	if (globals.BROWSER_INFO) {
-		if (IS_FIREFOX) {
+	if (BROWSER_INFO) {
+		if (BROWSER_INFO.name === 'firefox') {
 			headerInfoText = t('hub_home_header_info_opted_out');
-		} else if (IS_CLIQZ) {
+		} else if (IS_CLIQZ || BROWSER_INFO.name === 'ghostery_android') {
 			headerInfoText = t('hub_home_header_info_cliqz');
 		}
 	}

@@ -28,7 +28,7 @@ const SetupView = (props) => {
 	const { extraRoutes, sendMountActions, steps } = props;
 
 	return (
-		<div className="full-height flex-container flex-dir-column">
+		<div className="full-height flex-container flex-dir-column android-relative">
 			<div className="flex-child-grow">
 				{steps.map(step => (
 					<Route

@@ -29,6 +29,7 @@ import SetupDoneView from '../SetupViews/SetupDoneView';
 
 const { BROWSER_INFO } = globals;
 const IS_FIREFOX = (BROWSER_INFO.name === 'firefox');
+const IS_ANDROID = (BROWSER_INFO.os === 'android');
 
 /**
  * @class Implement the Setup View for the Ghostery Hub
@@ -109,8 +110,8 @@ class SetupViewContainer extends Component {
 		actions.setAntiTracking({ enable_anti_tracking: true });
 		actions.setAdBlock({ enable_ad_block: true });
 		actions.setSmartBlocking({ enable_smart_block: true });
-		actions.setGhosteryRewards({ enable_ghostery_rewards: !IS_FIREFOX });
-		actions.setHumanWeb({ enable_human_web: !IS_FIREFOX });
+		actions.setGhosteryRewards({ enable_ghostery_rewards: !IS_FIREFOX && !IS_ANDROID });
+		actions.setHumanWeb({ enable_human_web: !IS_FIREFOX || BROWSER_INFO.name === 'ghostery_android' });
 	}
 
 	/**

@@ -2,7 +2,7 @@
 
 exports[`app/hub/Views/SetupView component More Snapshot tests with react-test-renderer, but for edge cases edge case where activeIndex not in steps index 1`] = `
 <div
-  className="full-height flex-container flex-dir-column"
+  className="full-height flex-container flex-dir-column android-relative"
 >
   <div
     className="flex-child-grow"
@@ -15,7 +15,7 @@ exports[`app/hub/Views/SetupView component More Snapshot tests with react-test-r
 
 exports[`app/hub/Views/SetupView component More Snapshot tests with react-test-renderer, but for edge cases edge case where steps is empty array 1`] = `
 <div
-  className="full-height flex-container flex-dir-column"
+  className="full-height flex-container flex-dir-column android-relative"
 >
   <div
     className="flex-child-grow"
@@ -28,7 +28,7 @@ exports[`app/hub/Views/SetupView component More Snapshot tests with react-test-r
 
 exports[`app/hub/Views/SetupView component Snapshot tests with react-test-renderer setup view is rendered correctly on first and extra route 1`] = `
 <div
-  className="full-height flex-container flex-dir-column"
+  className="full-height flex-container flex-dir-column android-relative"
 >
   <div
     className="flex-child-grow"
@@ -53,7 +53,7 @@ exports[`app/hub/Views/SetupView component Snapshot tests with react-test-render
 
 exports[`app/hub/Views/SetupView component Snapshot tests with react-test-renderer setup view is rendered correctly on first route 1`] = `
 <div
-  className="full-height flex-container flex-dir-column"
+  className="full-height flex-container flex-dir-column android-relative"
 >
   <div
     className="flex-child-grow"
@@ -75,7 +75,7 @@ exports[`app/hub/Views/SetupView component Snapshot tests with react-test-render
 
 exports[`app/hub/Views/SetupView component Snapshot tests with react-test-renderer setup view is rendered correctly on last route 1`] = `
 <div
-  className="full-height flex-container flex-dir-column"
+  className="full-height flex-container flex-dir-column android-relative"
 >
   <div
     className="flex-child-grow"

@@ -8,7 +8,7 @@ exports[`app/hub/Views/SetupView container Snapshot tests with react-test-render
     className="Modal"
   />
   <div
-    className="full-height flex-container flex-dir-column"
+    className="full-height flex-container flex-dir-column android-relative"
   >
     <div
       className="flex-child-grow"
@@ -60,7 +60,7 @@ exports[`app/hub/Views/SetupView container Snapshot tests with react-test-render
     className="Modal"
   />
   <div
-    className="full-height flex-container flex-dir-column"
+    className="full-height flex-container flex-dir-column android-relative"
   >
     <div
       className="flex-child-grow"
@@ -112,7 +112,7 @@ exports[`app/hub/Views/SetupView container Snapshot tests with react-test-render
     className="Modal"
   />
   <div
-    className="full-height flex-container flex-dir-column"
+    className="full-height flex-container flex-dir-column android-relative"
   >
     <div
       className="flex-child-grow"
@@ -167,7 +167,7 @@ exports[`app/hub/Views/SetupView container Snapshot tests with react-test-render
     className="Modal"
   />
   <div
-    className="full-height flex-container flex-dir-column"
+    className="full-height flex-container flex-dir-column android-relative"
   >
     <div
       className="flex-child-grow"
@@ -219,7 +219,7 @@ exports[`app/hub/Views/SetupView container Snapshot tests with react-test-render
     className="Modal"
   />
   <div
-    className="full-height flex-container flex-dir-column"
+    className="full-height flex-container flex-dir-column android-relative"
   >
     <div
       className="flex-child-grow"

@@ -17,7 +17,8 @@ import SetupAntiSuiteView from './SetupAntiSuiteView';
 import globals from '../../../../../src/classes/Globals';
 
 // simple consts
-const { IS_CLIQZ } = globals;
+const { IS_CLIQZ, BROWSER_INFO } = globals;
+const IS_ANDROID = (BROWSER_INFO.os === 'android');
 
 /**
  * @class Implement the Setup Anti-Suite View for the Ghostery Hub
@@ -133,7 +134,7 @@ class SetupAntiSuiteViewContainer extends Component {
 			}
 		];
 
-		if (!IS_CLIQZ) {
+		if (!IS_CLIQZ && !IS_ANDROID) {
 			features.push({
 				id: 'ghostery-rewards',
 				name: t('hub_setup_ghosteryrewards_name_rewards'),

@@ -16,7 +16,8 @@ import PropTypes from 'prop-types';
 import SideNavigationView from './SideNavigationView';
 import globals from '../../../../src/classes/Globals';
 
-const { IS_CLIQZ } = globals;
+const { IS_CLIQZ, BROWSER_INFO } = globals;
+const IS_ANDROID = (BROWSER_INFO.os === 'android');
 
 /**
  * @class Implement the Side Navigation View for the Ghostery Hub
@@ -55,8 +56,8 @@ class SideNavigationViewContainer extends Component {
 			{ href: '/setup', icon: 'setup', text: t('customize_setup') },
 			{ href: '/tutorial', icon: 'tutorial', text: t('hub_side_navigation_tutorial') },
 			{ href: '/plus', icon: 'plus', text: t('get_ghostery_plus') },
-			...((IS_CLIQZ) ? [] : [{ href: '/rewards', icon: 'rewards', text: t('hub_side_navigation_rewards') }]),
-			{ href: '/products', icon: 'products', text: t('hub_side_navigation_products') }
+			...((IS_CLIQZ || IS_ANDROID) ? [] : [{ href: '/rewards', icon: 'rewards', text: t('hub_side_navigation_rewards') }]),
+			...((IS_ANDROID) ? [] : [{ href: '/products', icon: 'products', text: t('hub_side_navigation_products') }])
 		];
 		const bottomItems = user ? [
 			{ id: 'email', href: `${globals.ACCOUNT_BASE_URL}/`, text: user.email },

@@ -24,16 +24,16 @@ import TutorialNavigation from '../TutorialViews/TutorialNavigation';
  * @memberof HubComponents
  */
 const TutorialView = (props) => {
-	const { sendMountActions, steps } = props;
+	const { sendMountActions, steps, isAndroid } = props;
 
 	return (
-		<div className="full-height flex-container flex-dir-column">
+		<div className="full-height flex-container flex-dir-column android-relative">
 			<div className="TutorialView--paddingTopLarge flex-child-grow flex-container align-middle">
 				{steps.map(step => (
 					<Route
 						key={`route-${step.index}`}
 						path={step.path}
-						render={() => <step.bodyComponent index={step.index} sendMountActions={sendMountActions} />}
+						render={() => <step.bodyComponent index={step.index} sendMountActions={sendMountActions} isAndroid={isAndroid} />}
 					/>
 				))}
 			</div>

@@ -149,8 +149,17 @@
 		left: 1%;
 		padding-right: 12%;
 		margin-bottom: 30px;
+		@media only screen and (max-width: 740px) {
+			left: auto;
+			padding-right: 0;
+		}
+	}
+	&.layout-detailed {
+		left: -11%;
+		@media only screen and (max-width: 740px) {
+			left: auto;
+		}
 	}
-	&.layout-detailed { left: -11%; }
 }
 @media only screen and (max-width: 960px) {
 	.TutorialLayoutView .TutorialView__tagline {

@@ -14,6 +14,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import TutorialView from './TutorialView';
+import globals from '../../../../src/classes/Globals';
 
 // Component Views
 import TutorialVideoView from '../TutorialViews/TutorialVideoView';
@@ -23,6 +24,9 @@ import TutorialLayoutView from '../TutorialViews/TutorialLayoutView';
 import TutorialTrustView from '../TutorialViews/TutorialTrustView';
 import TutorialAntiSuiteView from '../TutorialViews/TutorialAntiSuiteView';
 
+const { BROWSER_INFO } = globals;
+const IS_ANDROID = (BROWSER_INFO.os === 'android');
+
 /**
  * @class Implement the Tutorial View for the Ghostery Hub
  * @extends Component
@@ -88,7 +92,7 @@ class TutorialViewContainer extends Component {
 			},
 		];
 
-		return <TutorialView steps={steps} sendMountActions={sendMountActions} />;
+		return <TutorialView steps={steps} sendMountActions={sendMountActions} isAndroid={IS_ANDROID} />;
 	}
 }
 

@@ -2,7 +2,7 @@
 
 exports[`app/hub/Views/TutorialView component Snapshot tests with react-test-renderer tutorial view is rendered correctly 1`] = `
 <div
-  className="full-height flex-container flex-dir-column"
+  className="full-height flex-container flex-dir-column android-relative"
 >
   <div
     className="TutorialView--paddingTopLarge flex-child-grow flex-container align-middle"