update npm dependencies. refactor webpack, babel, eslint

.eslintrc.js

@@ -0,0 +1,89 @@
+/**
+ * ESLint Config
+ *
+ * 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/.
+ */
+
+module.exports = {
+	env: {
+		browser: true,
+		es6: true,
+		commonjs: true,
+		jest: true
+	},
+	extends: 'airbnb',
+	globals: {
+		chrome: true,
+		t: true,
+		Atomics: 'readonly',
+		SharedArrayBuffer: 'readonly',
+	},
+	parser: 'babel-eslint',
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true,
+		},
+		ecmaVersion: 2018,
+		sourceType: 'module',
+	},
+	plugins: [
+		'react',
+	],
+	// 0 = off, 1 = warn, 2 = error
+	rules: {
+		'camelcase': [0],
+		'class-methods-use-this': [0],
+		'comma-dangle': ['error', {
+			'arrays': 'only-multiline',
+			'objects': 'only-multiline',
+			'functions': 'ignore'
+		}],
+		'func-names': [0],
+		'function-paren-newline': [0],
+		'import/prefer-default-export': [0],
+		'indent': [1, 'tab', {
+			'SwitchCase': 1
+		}],
+		'linebreak-style': [0],
+		'lines-between-class-members': [1],
+		'max-len': [0],
+		'no-control-regex': [0],
+		'no-mixed-operators': [0],
+		'no-nested-ternary': [0],
+		'no-param-reassign': [2, { 'props': false }],
+		'no-plusplus': [0],
+		'no-prototype-builtins': [0],
+		'no-restricted-syntax': [0],
+		'no-tabs': [0],
+		'no-underscore-dangle': [0],
+		'no-unused-vars': [1],
+		'no-useless-escape': [1],
+		'operator-linebreak': [0],
+
+		// Plugin: Import
+		'import/no-cycle': [0],
+
+		// Plugin: React
+		'react/destructuring-assignment': [0],
+		'react/jsx-indent': [1, 'tab'],
+		'react/jsx-indent-props': [1, 'tab'],
+		'react/no-danger': [0],
+		'react/prop-types': [0],
+
+		// Plugin: JSX-A11y
+		'jsx-a11y/alt-text': [0],
+		'jsx-a11y/anchor-is-valid': [0],
+		'jsx-a11y/click-events-have-key-events': [0],
+		'jsx-a11y/label-has-for': [0],
+		'jsx-a11y/mouse-events-have-key-events': [0],
+		'jsx-a11y/no-noninteractive-element-interactions': [0],
+		'jsx-a11y/no-static-element-interactions': [0],
+	},
+};

.gitignore

@@ -1,8 +1,6 @@
 ## Build Files
 dist/
 build/
-web-ext-artifacts/
-*precompiled/
 licenses.json
 
 ## Node

README.md

@@ -36,17 +36,17 @@ $ yarn upgrade
 ## Building
 ```sh
 # Build all sources
-$ yarn run build.dev
+$ yarn build.dev
 ```
 
 ```sh
 # Build for production
-$ yarn run build.prod
+$ yarn build.prod
 ```
 
 ```sh
 # Build and watch for changes
-$ yarn run build.watch
+$ yarn build.watch
 ```
 
 ## Enable Debugging / Logging
@@ -57,33 +57,40 @@ $ yarn run build.watch
 ```
 
 ## Testing and Linting
+```sh
+# Update Jest snapshot artifacts
+$ yarn test.snapshot
+```
+
 ```sh
 # Run unit tests
-$ yarn run test.unit
+$ yarn test.unit
 ```
 
 ```sh
 # Run linter over the ./app and ./src folders
-$ yarn run lint
+$ yarn lint
 ```
 
 ```sh
 # Lint a specific file
-$ yarn run lint.raw -- src/utils/matcher.js
+$ yarn lint.raw src/utils/matcher.js
 ```
 
 ```sh
-# Disable lint
-$ NO_LINT=true yarn run build.dev
+# Test i18n string lengths for panel UI
+$ yarn leet
+# Reset back to original en language file
+$ yarn leet.reset
 ```
 
 ## Build Docs
 ```sh
 # Build JSDoc files to ./docs
-$ yarn run docs
+$ yarn docs
 ```
 
-## Translating Files
+## Internationalization
 We use Transifex and their CLI to manage our translation files. Follow
 [these instructions](https://docs.transifex.com/client/installing-the-client)
 to get started.

app/content-scripts/content_script_bundle.js

@@ -0,0 +1,20 @@
+/**
+ * Cliqz Content Scripts
+ *
+ * This file compiles content scripts for Cliqz modules
+ * (Ad-Blocker, HPN, Human Web)
+ *
+ * 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
+ */
+/**
+ * @namespace CliqzContentScript
+ */
+
+import 'browser-core/build/core/content';

app/hub/createStore.js

@@ -39,7 +39,6 @@ const reducer = combineReducers({
 
 /**
  * Build store using combined reducers and middleware
- * @return {[type]} [description]
  * @return {Object}
  * @memberof HubReactStore
  */

app/licenses/License.jsx

@@ -14,7 +14,7 @@
  * @namespace LicenseClasses
  */
 import React from 'react';
-import Markdown from 'react-remarkable';
+import Markdown from 'react-markdown';
 /**
  * @class Handles license entry on internal licenses.html page
  * which displays licenses for all third-party packages used by Ghostery

app/panel-android/components/Panel.jsx

@@ -13,7 +13,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import URLSearchParams from 'url-search-params';
 import Tabs from './content/Tabs';
 import Tab from './content/Tab';
 import Overview from './Overview';

app/panel/components/Blocking/Tracker.jsx

@@ -234,7 +234,7 @@ class Tracker extends React.Component {
 		const path = `/app/images/panel/tracker-detail-cliqz-${type}-icon.svg`;
 
 		return (
-			<ReactSVG path={path} className="trk-cliqz-stats-icon" />
+			<ReactSVG src={path} className="trk-cliqz-stats-icon" />
 		);
 	}
 	_renderCliqzCookieStat(count) { return this._renderCliqzStat(count, 'cookie'); }

app/panel/components/BuildingBlocks/NavButton.jsx

@@ -34,7 +34,7 @@ const NavButton = (props) => {
 
 	return (
 		<NavLink to={{ pathname: path, params }} className={classNames} >
-			<ReactSVG path={imagePath} />
+			<ReactSVG src={imagePath} />
 		</NavLink>
 	);
 };

app/panel/components/Header.jsx

@@ -209,17 +209,17 @@ class Header extends React.Component {
 		const backArrowAndGhostieLogo = (
 			<span className="header-logo">
 				<Link to={this.determineBackPath()}>
-					<ReactSVG path="/app/images/panel/header-back-arrow.svg" className={headerArrowClasses} />
+					<ReactSVG src="/app/images/panel/header-back-arrow.svg" className={headerArrowClasses} />
 				</Link>
-				<ReactSVG path="/app/images/panel/header-logo-icon.svg" className="logo-icon" />
+				<ReactSVG src="/app/images/panel/header-logo-icon.svg" className="logo-icon" />
 			</span>
 		);
 
 		const plusUpgradeBannerOrSubscriberBadgeLogolink = (
 			<div className={badgeClasses} onClick={this.clickUpgradeBannerOrGoldPlusIcon}>
 				{
-					(subscriber && <ReactSVG path="/app/images/panel/gold-plus-icon-expanded-view.svg" />) ||
-					<ReactSVG path="/app/images/panel/green-upgrade-banner-expanded-view.svg" />
+					(subscriber && <ReactSVG src="/app/images/panel/gold-plus-icon-expanded-view.svg" />) ||
+					<ReactSVG src="/app/images/panel/green-upgrade-banner-expanded-view.svg" />
 				}
 			</div>
 		);

app/panel/components/StatsView.jsx

@@ -100,14 +100,14 @@ const StatsView = (props) => {
 		<div id="content-stats">
 			<div className="stats-top-header">
 				<span className="stats-top-header-title">
-					<ReactSVG path={graphIconPath} className={`stats-top-header-icon ${view}`} />
+					<ReactSVG src={graphIconPath} className={`stats-top-header-icon ${view}`} />
 					{graphTitle}
 				</span>
 				<span className={resetStatsButton} onClick={resetStats}>
 					{t('panel_stats_reset')}
 					{!demo && (
 						<div className="hs-tooltip-down" data-g-tooltip={t('panel_stats_pitch_modal_tooltip')}>
-							<ReactSVG path="../../app/images/panel/info.svg" className="stats-top-header-info-icon" />
+							<ReactSVG src="../../app/images/panel/info.svg" className="stats-top-header-info-icon" />
 						</div>
 					)}
 				</span>

app/panel/components/Summary.jsx

@@ -695,7 +695,7 @@ class Summary extends React.Component {
 				{isPlusSubscriber &&
 					<div className="Summary__subscriberBadgeContainer">
 						<div className="SubscriberBadge">
-							<ReactSVG path="/app/images/panel/gold-plus-icon.svg" className="gold-plus-icon" />
+							<ReactSVG src="/app/images/panel/gold-plus-icon.svg" className="gold-plus-icon" />
 						</div>
 					</div>
 				}
@@ -704,7 +704,7 @@ class Summary extends React.Component {
 				<div className="Summary__upgradeBannerContainer">
 					<div className={upgradeBannerClassNames}>
 						<span className="UpgradeBanner__text">{t('subscription_upgrade_to')}</span>
-						<ReactSVG path="/app/images/panel/upgrade-banner-plus.svg" className="UpgradeBanner__plus" />
+						<ReactSVG src="/app/images/panel/upgrade-banner-plus.svg" className="UpgradeBanner__plus" />
 					</div>
 				</div>
 				}

app/panel/utils/history.js

@@ -11,7 +11,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import createMemoryHistory from 'history/createMemoryHistory';
+import { createMemoryHistory } from 'history';
 /**
  * @var {Object} history object to be used by React Routerfor navigation within the Ghostery panel.
  * @memberOf PanelUtils