Merge pull request #70 from insitu-project/develop

First Public Release

gulp/tasks/build.js

@@ -1,28 +1,48 @@
 import gulp from 'gulp';
 import gutil from 'gulp-util';
 import webpack from 'webpack';
+import path from 'path';
 
 import devConfig from '../../webpack/dev.config';
 import stagingConfig from '../../webpack/staging.config';
 import extConfig from '../../webpack/production.config';
 
-const build = (config, callback) => {
-  let myConfig = Object.create(config);
-  webpack(myConfig, (err, stats) => {
-    if (err) {
-      throw new gutil.PluginError('webpack:build', err);
-    }
-    gutil.log('[webpack:build]', stats.toString({ colors: true }));
+function compiler(config) {
+  return webpack(Object.create(config));
+}
+
+function staticCompiler(config) {
+  if (!staticCompiler.instance) {
+    staticCompiler.instance = compiler(config);
+  }
+  return staticCompiler.instance;
+}
+
+function build(compiler, callback) {
+  compiler.run((err, stats) => {
+    if (err) throw new gutil.PluginError('webpack:build', err);
+    gutil.log('[webpack:build]', stats.toString({
+      chunks: false,
+      colors: true,
+    }));
     callback();
   });
-};
+}
 
+gulp.task('webpack:watch', () => {
+  const globs = [
+    path.join(__dirname, '../../src/') + '**/*',
+    path.join(__dirname, '../../test/') + '**/*',
+  ];
+  return gulp.watch(globs, ['webpack:build:dev']);
+});
 gulp.task('webpack:build:dev', (callback) => {
-  build(devConfig, callback);
+  // Instance webpack compiler once over multiple times (watch)
+  build(staticCompiler(devConfig), callback);
 });
 gulp.task('webpack:build:staging', (callback) => {
-  build(stagingConfig, callback);
+  build(compiler(stagingConfig), callback);
 });
 gulp.task('webpack:build:production', (callback) => {
-  build(extConfig, callback);
+  build(compiler(extConfig), callback);
 });

gulpfile.babel.js

@@ -4,7 +4,8 @@ requireDir('./gulp/tasks');
 
 gulp.task('default',['build:dev']);
 gulp.task('build:dev',
-  ['webpack:build:dev', 'views:build:dev', 'copy:build:dev', 'copy:watch']);
+  ['webpack:build:dev', 'views:build:dev', 'copy:build:dev',
+    'copy:watch', 'webpack:watch']);
 gulp.task('build:staging',
   ['webpack:build:staging', 'views:build:staging', 'copy:build:staging']);
 gulp.task('build:production',

package.json

@@ -8,8 +8,8 @@
     "build:staging": "gulp build:staging",
     "build:dev": "gulp build:dev",
     "clean": "rm -rf build",
-    "test": "LMEM_BACKEND_ORIGIN='' NODE_ENV=test mocha --compilers js:babel-core/register test/app --recursive",
-    "lint": "git ls-files -om --exclude-standard | grep \\.js$ | xargs eslint --fix",
+    "test": "LMEM_BACKEND_ORIGIN='' LMEM_SCRIPTS_ORIGIN='.' NODE_ENV=test mocha --compilers js:babel-core/register test/app --recursive",
+    "lint": "git diff-index --name-only --cached HEAD | grep \\.js$ | xargs eslint --fix",
     "deploy:production": "gulp deploy:production",
     "deploy:staging": "gulp deploy:staging"
   },

src/app/actions/install.js

@@ -0,0 +1,23 @@
+import { INSTALLED } from '../constants/ActionTypes';
+
+// Promise constructed when the module is first imported (very early)
+// in order to not miss the "install" event.
+const onInstalledPromise = new Promise(resolve => {
+  chrome.runtime.onInstalled.addListener(details => {
+    if (details.reason !== 'install') return;
+
+    resolve(Object.assign({}, details, {
+      datetime: new Date(),
+      version: chrome.runtime.getManifest().version,
+    }));
+  });
+});
+
+export default function () {
+  return dispatch => {
+    onInstalledPromise.then(onInstalledDetails => dispatch({
+      type: INSTALLED,
+      onInstalledDetails
+    }));
+  };
+}

src/app/components/AlternativeHeader.js

@@ -41,23 +41,25 @@ class AlternativeHeader extends Component {
         <div className="menu-content">
           <ul className="menu-list">
             <li>
-              <button className="not-button with-image" onClick={ e => onDeactivate({
-                where: DEACTIVATE_EVERYWHERE,
-                duration: SESSION_DEACTIVATE_DELAY
-              }) }
-                >
+              <button
+                className="not-button with-image"
+                onClick={ e => onDeactivate({
+                  where: DEACTIVATE_EVERYWHERE,
+                  duration: SESSION_DEACTIVATE_DELAY
+                })}>
                 <img
                   role="presentation"
                   className="lmem-controls-picto"
                   src={ imagesUrl + 'power-timer.svg' } />
                 <span>Désactiver partout pour 30mins</span>
               </button>
             </li><li>
-              <button className="not-button with-image" onClick={ e => onDeactivate({
-                where: window.location && location.hostname,
-                duration: DEACTIVATE_WEBSITE_ALWAYS
-              }) }
-                >
+              <button
+                className="not-button with-image"
+                onClick={ e => onDeactivate({
+                  where: window.location && location.hostname,
+                  duration: DEACTIVATE_WEBSITE_ALWAYS
+                })}>
                 <img
                   role="presentation"
                   className="lmem-controls-picto"
@@ -84,26 +86,32 @@ class AlternativeHeader extends Component {
     const headerButtons = preferenceScreenPanel ?
       (<li>
         <div className="button-directive">
-          <button className="button button-compact with-tooltip"
+          <button
+            className="button button-compact with-tooltip"
             onClick={closePrefScreen}>
-            <img role="presentation" src={ imagesUrl + 'close.svg' }
+            <img
+              role="presentation"
+              src={ imagesUrl + 'close.svg' }
               className="lmem-controls-picto" />
             <span className={tooltipButtonClassName}><span>
-              Fermer l'écran des préférences
+              Fermer l’écran des préférences
             </span></span>
           </button>
         </div>
       </li>) :
       [(<li>
         <div className="button-directive">
-          <button className="button button-compact with-tooltip"
+          <button
+            className="button button-compact with-tooltip"
             onClick={e => {
               if(reduced){
                 onExtend();
               }
               openPrefScreen(PREFERENCE_SCREEN_PANEL_ABOUT);
             }}>
-            <img role="presentation" src={ imagesUrl + 'settings.svg' }
+            <img
+              role="presentation"
+              src={ imagesUrl + 'settings.svg' }
               className="lmem-controls-picto" />
             <span className={tooltipButtonClassName}><span>
               Préférences
@@ -113,12 +121,13 @@ class AlternativeHeader extends Component {
       </li>),
       (<li className="with-menu">
         <div className="button-directive">
-          <button className="button button-compact with-tooltip"
-            onClick={deactivateButtonOnClick}
-            >
-            <img role="presentation" src={ imagesUrl + 'power.svg' }
-              className="lmem-controls-picto"
-              />
+          <button
+            className="button button-compact with-tooltip"
+            onClick={deactivateButtonOnClick}>
+            <img
+              role="presentation"
+              src={ imagesUrl + 'power.svg' }
+              className="lmem-controls-picto" />
             <span className={tooltipButtonClassName}><span>
               Désactiver
             </span></span>
@@ -128,21 +137,35 @@ class AlternativeHeader extends Component {
         <div className="menu-directive menu-deactivate" ref="deactivateMenu">
           { deactivateMenu }
         </div>
+      </li>),
+      (<li>
+        <button
+          className="reduce button-compact with-image with-tooltip"
+          onClick={this.onClick.bind(this) }>
+          <img
+            role="presentation"
+            src={ imagesUrl + 'arrow.svg' }
+            className={ buttonButtonClassName }
+          />
+          <span className="button-label">{reduceButtonText}</span>
+          <span className={tooltipButtonClassName}>
+            {reduceButtonText}
+          </span>
+        </button>
       </li>)];
 
 
 
     const extendReduceButton = preferenceScreenPanel ? undefined :
     (<div className="button-wrapper">
       <div className="button-directive">
-        <button className="button button-compact with-image with-tooltip"
-          onClick={this.onClick.bind(this) }
-          >
+        <button
+          className="button button-compact with-image with-tooltip"
+          onClick={this.onClick.bind(this) }>
           <img
             role="presentation"
             src={ imagesUrl + 'arrow.svg' }
-            className={ buttonButtonClassName }
-            />
+            className={ buttonButtonClassName } />
           <span className="button-label">{reduceButtonText}</span>
           <span className={tooltipButtonClassName}><span>
             {reduceButtonText}
@@ -158,9 +181,9 @@ class AlternativeHeader extends Component {
 
     return (
       <header>
-        <button className="with-tooltip logo"
-          onClick={this.onClick.bind(this) }
-        >
+        <button
+          className="with-tooltip logo"
+          onClick={this.onClick.bind(this) }>
           <img width="45" src={ imagesUrl + 'logo-lmem.svg' } alt="" />
           <span className="tooltip tooltip-right">
             { reduceButtonText + ' le panneau comparatif' }
@@ -170,7 +193,7 @@ class AlternativeHeader extends Component {
         <div className="separation-bar" />
 
         <h1 className="lmem-topbar-title">
-          <strong>{headerContent}</strong>
+          {headerContent}
         </h1>
 
 
@@ -179,21 +202,6 @@ class AlternativeHeader extends Component {
         </ul>
 
 
-        <button className="reduce button-compact with-image with-tooltip"
-          onClick={this.onClick.bind(this) }
-        >
-          <img 
-            role="presentation" 
-            src={ imagesUrl + 'arrow.svg' } 
-            className={ buttonButtonClassName }
-            />
-          <span className="button-label">{reduceButtonText}</span>
-          <span className={tooltipButtonClassName}>
-            {reduceButtonText}
-          </span>
-        </button>
-
-
       </header>
     );
   }
@@ -208,21 +216,21 @@ class AlternativeHeader extends Component {
 
   componentWillUnmount() {
     this.refs.deactivateMenu.ownerDocument
-      .removeEventListener('click', this._closeMenuDocumentClickHandler);
+      .removeEventListener('click', this.closeMenuDocumentClickHandler);
   }
 
   watchForMenuExit() {
     const menuElement = this.refs.deactivateMenu;
 
-    this._closeMenuDocumentClickHandler = event => {
+    this.closeMenuDocumentClickHandler = event => {
       if (!this.state.deactivateMenuOpen) return;
 
       if (!event.target.matches('.menu-deactivate, .menu-deactivate *')) {
         this.setState({ deactivateMenuOpen: false });
       }
     };
 
-    menuElement.ownerDocument.addEventListener('click', this._closeMenuDocumentClickHandler);
+    menuElement.ownerDocument.addEventListener('click', this.closeMenuDocumentClickHandler);
   }
 
 

src/app/components/AlternativeMain.js

@@ -39,7 +39,9 @@ const AlternativeMain = ({ imagesUrl, contributorUrl, recommendation }) => {
             <p>{recommendation.description}</p>
           </div>
           <div className="reco-summary-link-referral">
-            <img alt="Logo le même en mieux" src={imagesUrl + 'logo-lmem-new.svg'} />
+            <img
+              alt="Logo le même en mieux"
+              src={'https://www.google.com/s2/favicons?domain=' + encodeURIComponent(recommendation.alternatives[0].url_to_redirect)} />
             <span>{
               recommendation.alternatives[0].url_to_redirect.replace(/^https?:\/\/(www.)?/, '')
             }</span>
@@ -58,7 +60,7 @@ const AlternativeMain = ({ imagesUrl, contributorUrl, recommendation }) => {
         </div>
       </div>
     </a>
-  </main>)
+  </main>);
 };
 
 AlternativeMain.propTypes = {

src/app/components/Alternatives.js

@@ -17,15 +17,18 @@ class Alternatives extends Component {
     const { props, state } = this;
     const {
       recommendation, imagesUrl, reduced, contributorUrl, preferenceScreenPanel, deactivatedWebsites,
-      onExtend, onReduce, onDeactivate, togglePrefPanel, onReactivateWebsite, closePrefScreen, openPrefScreen
+      onExtend, onReduce, onDeactivate, togglePrefPanel, onReactivateWebsite, closePrefScreen, openPrefScreen,
+      onInstalledDetails
     } = props;
-    
+
     const body = (preferenceScreenPanel ?
       <PreferenceScreen
         preferenceScreenPanel={preferenceScreenPanel}
         deactivatedWebsites={deactivatedWebsites} 
         onReactivateWebsite={onReactivateWebsite}
         openPrefScreen={openPrefScreen}
+        imagesUrl={imagesUrl}
+        onInstalledDetails={onInstalledDetails}
       /> :
       <AlternativeMain imagesUrl={imagesUrl} recommendation={recommendation} contributorUrl={contributorUrl} />);
 
@@ -55,6 +58,7 @@ Alternatives.propTypes = {
   reduced: PropTypes.bool.isRequired,
   onExtend: PropTypes.func.isRequired,
   onReduce: PropTypes.func.isRequired,
+  onInstalledDetails: PropTypes.object.isRequired,
 };
 
 export default Alternatives;