Work towards implementing stub of new intro hub

app/ghostery-browser-hub/AppView/Constants.js

@@ -0,0 +1,16 @@
+/**
+ * App View Constants
+ *
+ * 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
+ */
+
+// App View
+export const SET_TOAST = 'SET_TOAST';
+export const SEND_PING = 'SEND_PING';

app/ghostery-browser-hub/AppView/Reducer.js

@@ -0,0 +1,34 @@
+/**
+ * Reducer used in the Ghostery Browser Hub App View
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * 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
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { SET_TOAST } from './Constants';
+
+const initialState = {};
+
+function GhosteryBrowserHubAppViewReducer(state = initialState, action) {
+	switch (action.type) {
+		case SET_TOAST: {
+			const { toastMessage, toastClass } = action.data;
+			return {
+				...state,
+				app: {
+					toastMessage,
+					toastClass
+				}
+			};
+		}
+		default: return state;
+	}
+}
+
+export default GhosteryBrowserHubAppViewReducer;

app/ghostery-browser-hub/createStore.js

@@ -0,0 +1,48 @@
+/**
+ * Ghostery Browser Hub React Store Init
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * 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
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ *
+ * @namespace GhosteryBrowserHubReactStore
+ */
+
+import {
+	applyMiddleware,
+	compose,
+	combineReducers,
+	createStore
+} from 'redux';
+import thunk from 'redux-thunk';
+
+import { reducer as app } from './Views/AppView';
+import { reducer as main } from './Views/MainView';
+import account from '../Account/AccountReducer';
+import settings from '../panel/reducers/settings';
+
+const reducer = combineReducers({
+	app,
+	account,
+	settings,
+});
+
+/**
+ * Build store using combined reducers and middleware
+ * @return {Object}
+ * @memberof HubReactStore
+ */
+export default function() {
+	return createStore(
+		reducer,
+		compose(
+			applyMiddleware(thunk),
+			window.devToolsExtension ? window.devToolsExtension() : f => f
+		),
+	);
+}

app/ghostery-browser-hub/index.jsx

@@ -0,0 +1,35 @@
+/**
+ * Ghostery Ghostery-Browser-Specific Hub React App Init
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * 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
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ *
+ * @namespace HubGhosteryBrowserComponents
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import createStore from './createStore';
+
+// Containers
+import HubGhosteryBrowserAppView from './Views/AppView';
+import HubGhosteryBrowserMainView from './Views/MainView';
+
+const store = createStore();
+
+ReactDOM.render(
+	(
+		<Provider store={store}>
+			<HubGhosteryBrowserAppView>
+				<HubGhosteryBrowserMainView />
+			</HubGhosteryBrowserAppView>
+		</Provider>
+	), document.getElementById('root'),
+);

app/scss/hub_ghostery_browser.scss

@@ -0,0 +1,99 @@
+/**
+ * Ghostery-Browser-Specific Hub Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * 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
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+// Import Global Partials
+@import './partials/colors';
+
+html, body, #root {
+	height: 100%;
+	width: 100%;
+	margin: 0;
+}
+
+.App {
+	position: fixed;
+	z-index: 0;
+}
+.App__mainContent {
+	margin-left: 230px;
+	overflow-y: auto;
+	// Very small windows/phone screens in Firefox slightly overflows on the x-axis
+	overflow-x: hidden;
+}
+@media only screen and (max-width: 740px)  {
+	.App__mainContent {
+		margin-left: 54px;
+	}
+	.android-relative {position: relative;}
+}
+
+// Foundation Overrides
+.button {
+	font-size: 14px;
+	font-weight: 700;
+	line-height: 1.3;
+	text-transform: uppercase;
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+	&.primary {
+		&:not(.hollow):hover {
+			background-color: $dark-ghosty-blue;
+		}
+		&.hollow:hover, &.hollow:focus {
+			border-color: $dark-ghosty-blue;
+			color: $dark-ghosty-blue;
+		}
+	}
+}
+
+// Helper Classes
+.clickable { cursor: pointer; }
+.full-height { height: 100%; }
+.full-width { width: 100%; }
+.display-inline { display: inline-block; }
+.flex-shrink-none { flex-shrink: 0; }
+
+@import 'settings_hub'; // Import Foundation
+@import './partials/_hub_mixins';
+@import './partials/_hub_svgs';
+@import './partials/_shared_components_svgs';
+@import './partials/_fonts';
+@import './partials/_loader';
+
+// Imports from ../hub directory
+@import '../hub/Views/SideNavigationView/SideNavigationView.scss';
+@import '../hub/Views/HomeView/HomeView.scss';
+@import '../hub/Views/SetupView/SetupView.scss';
+@import '../hub/Views/SetupViews/SetupHeader/SetupHeader.scss';
+@import '../hub/Views/SetupViews/SetupBlockingView/SetupBlockingView.scss';
+@import '../hub/Views/SetupViews/SetupBlockingDropdown/SetupBlockingDropdown.scss';
+@import '../hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteView.scss';
+@import '../hub/Views/SetupViews/SetupHumanWebView/SetupHumanWebView.scss';
+@import '../hub/Views/SetupViews/SetupDoneView/SetupDoneView.scss';
+@import '../hub/Views/TutorialView/TutorialView.scss';
+@import '../hub/Views/PlusView/PlusView.scss';
+@import '../hub/Views/RewardsView/RewardsView.scss';
+@import '../hub/Views/ProductsView/ProductsView.scss';
+@import '../hub/Views/SignedInView/SignedInView.scss';
+@import '../hub/Views/LogInView/LogInView.scss';
+@import '../hub/Views/CreateAccountView/CreateAccountView.scss';
+@import '../hub/Views/UpgradePlanView/UpgradePlanView.scss';
+
+// Imports from ../shared-components directory
+@import '../shared-components/ExitButton/ExitButton.scss';
+@import '../shared-components/Modal/Modal.scss';
+@import '../shared-components/ModalContent/PremiumPromoModalContent/PremiumPromoModalContent.scss';
+@import '../shared-components/SteppedNavigation/SteppedNavigation.scss';
+@import '../shared-components/ToastMessage/ToastMessage.scss';
+@import '../shared-components/ToggleCheckbox/ToggleCheckbox.scss';
+@import '../shared-components/ToggleSwitch/ToggleSwitch.scss';
+@import '../shared-components/ForgotPassword/ForgotPassword.scss';

app/templates/panel.html

@@ -22,6 +22,15 @@
 	<div id="ghostery-app">
 		<div id="ghostery-content"></div>
 	</div>
-	<script src="../../dist/panel_react.js"></script>
+	<script>
+		const body = document.getElementsByTagName('body')[0];
+		const js = document.createElement("script");
+
+		js.type = "text/javascript";
+		if (true) js.src = '../../dist/panel_react.js';
+		else js.src = '../../dist/panel_react.js'; //  TODO: update to point to hub
+
+		body.appendChild(js);
+	</script>
 </body>
 </html>

webpack.config.js

@@ -25,6 +25,7 @@ const SHARED_COMP_DIR = path.resolve(__dirname, 'app/shared-components');
 const PANEL_DIR = path.resolve(__dirname, 'app/panel');
 const PANEL_ANDROID_DIR = path.resolve(__dirname, 'app/panel-android');
 const HUB_DIR = path.resolve(__dirname, 'app/hub');
+const HUB_GHOSTERY_BROWSER_DIR = path.resolve(__dirname, 'app/ghostery-browser-hub');
 const LICENSES_DIR = path.resolve(__dirname, 'app/licenses');
 const REWARDS_DIR = path.resolve(__dirname, 'app/rewards');
 const SASS_DIR = path.resolve(__dirname, 'app/scss');
@@ -52,6 +53,7 @@ module.exports = {
 		content_script_bundle: [`${CONTENT_SCRIPTS_DIR}/content_script_bundle.js`],
 		ghostery_dot_com: [`${CONTENT_SCRIPTS_DIR}/ghostery_dot_com.js`],
 		hub_react: [`${HUB_DIR}/index.jsx`],
+		hub_ghostery_browser_react: [`${HUB_GHOSTERY_BROWSER_DIR}/index.jsx`],
 		licenses_react: [`${LICENSES_DIR}/Licenses.jsx`, `${LICENSES_DIR}/License.jsx`],
 		notifications: [`${CONTENT_SCRIPTS_DIR}/notifications.js`],
 		page_performance: [`${CONTENT_SCRIPTS_DIR}/page_performance.js`],
@@ -64,6 +66,7 @@ module.exports = {
 		foundation_hub: [`${SASS_DIR}/vendor/foundation_hub.scss`],
 		ghostery_dot_com_css: [`${SASS_DIR}/ghostery_dot_com.scss`],
 		hub: [`${SASS_DIR}/hub.scss`],
+		hub_ghostery_browser: [`${HUB_GHOSTERY_BROWSER_DIR}/hub_ghostery_browser.scss`],
 		licenses: [`${SASS_DIR}/licenses.scss`],
 		panel: [`${SASS_DIR}/panel.scss`],
 		panel_android: [`${SASS_DIR}/panel_android.scss`],
@@ -91,6 +94,7 @@ module.exports = {
 				`${RM} ./dist/foundation_hub.js`,
 				`${RM} ./dist/ghostery_dot_com_css.js`,
 				`${RM} ./dist/hub.js`,
+				`${RM} ./dist/hub_ghostery_browser.js`,
 				`${RM} ./dist/licenses.js`,
 				`${RM} ./dist/panel.js`,
 				`${RM} ./dist/panel_android.js`,
@@ -119,7 +123,7 @@ module.exports = {
 				}
 			}, {
 				test: /\.(js|jsx)$/,
-				include: [SHARED_COMP_DIR, PANEL_ANDROID_DIR, PANEL_DIR, HUB_DIR, LICENSES_DIR, CONTENT_SCRIPTS_DIR, REWARDS_DIR],
+				include: [SHARED_COMP_DIR, PANEL_ANDROID_DIR, PANEL_DIR, HUB_DIR, HUB_GHOSTERY_BROWSER_DIR, LICENSES_DIR, CONTENT_SCRIPTS_DIR, REWARDS_DIR],
 				exclude: /node_modules/,
 				use: [
 					{