feat(popup): bootstrap browser popup with react+redux (wip)

manifest/base.js

@@ -32,7 +32,8 @@ export default Object.freeze({
       '48': 'img/logo/48x48.png',
       '128': 'img/logo/128x128.png'
     },
-    'default_title': 'LMEM options',
+    'default_title': 'Le Même en Mieux',
+    'default_popup': 'popup.html',
   },
   'permissions': [
     'geolocation',

src/app/background/index.js

@@ -18,7 +18,6 @@ import {
 } from './actions/kraftBackend';
 import updateDraftRecommendations from './actions/updateDraftRecommendations';
 
-import { OPEN_PREFERENCE_PANEL } from '../constants/ActionTypes';
 import {LMEM_BACKEND_ORIGIN, LMEM_SCRIPTS_ORIGIN} from '../constants/origins';
 
 /**
@@ -118,10 +117,6 @@ configureStore(store => {
 
   store.dispatch(dispatchInitialStateFromBackend()); // store initialization from the kraft server
 
-  chrome.browserAction.onClicked.addListener(() => {
-    store.dispatch({ type: OPEN_PREFERENCE_PANEL });
-  });
-
   if (process.env.NODE_ENV !== 'production') {
     require('./inject');
   }

src/app/popup/PopupRoot.js

@@ -0,0 +1,46 @@
+import React, { PropTypes } from 'react';
+import { Provider, connect } from 'react-redux';
+
+import PopupScreen from './PopupScreen';
+import uiActions from '../content/actions/ui.js';
+
+import { IMAGES_URL } from '../constants/assetsUrls';
+import {
+  PREFERENCE_SCREEN_PANEL_ABOUT,
+  PREFERENCE_SCREEN_PANEL_SOURCES,
+} from '../constants/ui';
+
+const {
+  openPrefScreen,
+} = uiActions();
+
+
+function mapStateToProps(state) {
+  return {
+    imagesUrl: IMAGES_URL,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    openPrefScreenAbout() { dispatch(openPrefScreen(PREFERENCE_SCREEN_PANEL_ABOUT)); },
+    // FIXME there is no reducer on this action, 'panel' is not used
+    openPrefScreenSources() { dispatch(openPrefScreen(PREFERENCE_SCREEN_PANEL_SOURCES)); },
+  };
+}
+
+const Popup = connect(mapStateToProps, mapDispatchToProps)(PopupScreen);
+
+const PopupRoot = ({ store }) => (
+  <Provider store={store}>
+    <Popup />
+  </Provider>
+);
+
+PopupRoot.propTypes = {
+  store: PropTypes.object.isRequired
+};
+
+export default PopupRoot;
+
+

src/app/popup/PopupScreen.js

@@ -0,0 +1,13 @@
+import React, { Component, PropTypes } from 'react';
+
+export default function PopupScreen({ imagesUrl, openPrefScreenAbout, openPrefScreenSources }) {
+  return (
+    <section>
+      <p>Popup ok.</p>
+      <p>Image Src: {imagesUrl}</p>
+      <div><a onClick={openPrefScreenAbout} href>Préférences</a></div>
+      <div><a onClick={openPrefScreenSources} href>Sources de recommandation</a></div>
+    </section>
+  );
+}
+

src/app/popup/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import PopupRoot from './PopupRoot';
+
+import 'style!../styles/main.scss'; // eslint-disable-line import/no-unresolved
+
+const store = chrome.extension.getBackgroundPage().store;
+
+render(<PopupRoot store={store} />, document.getElementById('root'));

views/popup.jade

@@ -0,0 +1,9 @@
+doctype html
+
+html
+  head
+    meta(charset="utf-8")
+    title LMEM Popup
+  body
+    #root
+    script(src=config.output.publicPath + '/js/popup.bundle.js')

webpack/base.config.js

@@ -1,8 +1,18 @@
 import path from 'path';
 import webpack from 'webpack';
 
+const srcPath = path.join(__dirname, '../src/app');
+
 const baseConfig = ({ input, output = {}, globals = {}, plugins = [], loaders = [] }) => ({
-  entry: input,
+  entry: Object.assign(
+    {
+      background: [path.join(srcPath, './background/')],
+      content: [path.join(srcPath, './content/')],
+      options: [path.join(srcPath, './options/')],
+      popup: [path.join(srcPath, './popup/')],
+    },
+    input
+  ),
   output: Object.assign(
     {
       filename: 'js/[name].bundle.js',
@@ -17,8 +27,8 @@ const baseConfig = ({ input, output = {}, globals = {}, plugins = [], loaders =
   ],
   resolve: {
     alias: {
-      app: path.join(__dirname, '../src/app'),
-      extension: path.join(__dirname, '../src/app/background')
+      app: srcPath,
+      extension: path.join(srcPath, './background')
     },
     extensions: ['', '.js']
   },

webpack/chromium.config.js

@@ -4,11 +4,6 @@ import baseConfig from './base.config';
 const srcPath = path.join(__dirname, '../src/app/');
 
 export default baseConfig({
-  input: {
-    background: [`${srcPath}background/`],
-    content: [`${srcPath}content/`],
-    options: [`${srcPath}options/`],
-  },
   output: {
     path: path.join(__dirname, '../build/chromium'),
     publicPath: '.',

webpack/dev.config.js

@@ -1,15 +1,9 @@
 import path from 'path';
 import baseConfig from './base.config';
-const srcPath = path.join(__dirname, '../src/app/');
-const testPath = path.join(__dirname, '../test/');
-
 
 export default baseConfig({
   input: {
-    background: [`${srcPath}background/`],
-    content: [`${srcPath}content/`],
-    options: [`${srcPath}options/`],
-    test: [`${testPath}integration/`]
+    test: [path.join(__dirname, '../test/integration/')],
   },
   output: {
     path: path.join(__dirname, '../build/dev'),

webpack/firefox.config.js

@@ -4,11 +4,6 @@ import baseConfig from './base.config';
 const srcPath = path.join(__dirname, '../src/app/');
 
 export default baseConfig({
-  input: {
-    background: [`${srcPath}background/`],
-    content: [`${srcPath}content/`],
-    options: [`${srcPath}options/`],
-  },
   output: {
     path: path.join(__dirname, '../build/firefox'),
     publicPath: '.', // No remote URL with Firefox
@@ -20,6 +15,12 @@ export default baseConfig({
   }],
   plugins: [
     new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      comments: false,
+      compressor: {
+        warnings: false
+      }
+    })
   ],
   globals: {
     'process.env': {

webpack/staging.config.js

@@ -3,20 +3,9 @@ import baseConfig from './base.config';
 const srcPath = path.join(__dirname, '../src/app/');
 
 export default baseConfig({
-  input: {
-    background: [`${srcPath}background/`],
-    content: [`${srcPath}content/`],
-    options: [`${srcPath}options/`]
-  },
   output: {
     path: path.join(__dirname, '../build/staging'),
     publicPath: '.',
-    sftp: {
-      // See .ftppass https://github.com/gtg092x/gulp-sftp#authentication
-      auth: 'keyMain',
-      host: 'sftp.dc0.gpaas.net',
-      remotePath: '/lamp0/web/vhosts/testing-ui.lmem.net/htdocs/'
-    }
   },
   globals: {
     'process.env': {