Update packages, css fixes, new logo

README.md

@@ -10,7 +10,7 @@ Demo: [https://poly-mail.appspot.com/](https://poly-mail.appspot.com/)   (m
 
 #### Performance
 
-*TLDR: paint is ~590ms and the app loads ~1s on Chrome desktop. Motorola G - Chrome - 3G Fast connection first paint is 1.66s*  The full performance improvements over the Polymer 0.5 version are documented [here](https://github.com/ebidel/polymer-gmail/issues/6#issuecomment-123875813). 
+*TLDR: paint is ~590ms and the app loads ~1s on Chrome desktop. Motorola G - Chrome - 3G Fast connection first paint is 1.66s*  The full performance improvements over the Polymer 0.5 version are documented [here](https://github.com/ebidel/polymer-gmail/issues/6#issuecomment-123875813).
 
 [Full results](https://github.com/ebidel/polymer-gmail/issues/6#issuecomment-123875813)
 
@@ -20,7 +20,9 @@ Demo: [https://poly-mail.appspot.com/](https://poly-mail.appspot.com/)   (m
 
 In your local checkout, install the deps and Polymer elements
 
-    npm install; bower install
+    npm install
+
+This will also run `bower install` for you.
 
 ### Development & Building
 

bower.json

@@ -5,6 +5,9 @@
     "Eric Bidelman <[email protected]>"
   ],
   "description": "Polymer version of Gmail app",
+  "scripts": {
+    "postinstall": "bower install"
+  },
   "main": "index.html",
   "keywords": [
     "webcomponents",

gulpfile.js

@@ -29,12 +29,22 @@ var babelify = require('babelify');
 var runSequence = require('run-sequence');
 var path = require('path');
 
-var version = null;
+var version = JSON.parse(fs.readFileSync('./package.json', 'utf8')).version;
 var isProd = false;
 
+const AUTOPREFIXER_BROWSERS = ['last 2 versions', 'ios 8', 'Safari 8'];
+
+function minifyHtml() {
+  return $.minifyHtml({quotes: true, empty: true, spare: true});
+}
+
+function uglifyJS() {
+  return $.uglify({preserveComments: 'some'});
+}
+
 /** Clean */
 gulp.task('clean', function(done) {
-  del(['dist', 'scripts/bundle.js'], done);
+  return del(['dist', 'scripts/bundle.js']);
 });
 
 /** Styles */
@@ -56,10 +66,7 @@ gulp.task('styles', function() {
 //       }))
 //       .pipe(gulp.dest('./dist/styles'));
   return gulp.src('./styles/*.css')
-    .pipe($.autoprefixer({
-      browsers: ['last 2 versions'],
-      cascade: false
-    }))
+    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
     .pipe($.minifyCss())
     .pipe($.license('Apache', {
       organization: 'Google Inc. All rights reserved.'
@@ -88,7 +95,7 @@ function buildBundle(file) {
     entries: [file],
     debug: isProd
   })
-  .transform(babelify) // es6 -> e5
+  .transform(babelify, {presets: ['es2015']}) // es6 -> e5
   .bundle();
 }
 
@@ -100,15 +107,15 @@ gulp.task('jsbundle', function() {
 
   return buildBundle('./scripts/app.js')
     .pipe(source('bundle.js'))
-    .pipe($.streamify($.uglify()))
+    .pipe($.streamify(uglifyJS()))
     .pipe($.license('Apache', {
       organization: 'Google Inc. All rights reserved.'
     }))
     .pipe(gulp.dest('./' + dest + '/scripts'))
 });
 
 /** Root */
-gulp.task('root', ['getversion'], function() {
+gulp.task('root', function() {
   gulp.src([
       './*.*',
       '!{package,bower}.json',
@@ -187,8 +194,9 @@ gulp.task('vulcanize', function() {
       //excludes: [path.resolve('./dist/third_party/polymer.html')]
       //stripExcludes: false,
     }))
-    // .pipe($.minifyInline()) // TODO: messes up SVG icons
-    .pipe($.crisper()) // Separate JS into its own file for CSP compliance.
+    .pipe($.crisper()) // Separate JS into its own file for CSP compliance and reduce html parser load.
+    .pipe($.if('*.html', minifyHtml())) // Minify html output
+    .pipe($.if('*.js', uglifyJS())) // Minify js output
     .pipe(gulp.dest('./dist/elements'))
 });
 
@@ -202,10 +210,6 @@ gulp.task('watch', function() {
   gulp.watch('./scripts/**/*.js', ['jsbundle']);
 });
 
-gulp.task('getversion', function() {
-  version = JSON.parse(fs.readFileSync('./package.json', 'utf8')).version;
-});
-
 /** Main tasks */
 
 var allTasks = ['root', 'styles', 'jsbundle', 'images'];//, 'serviceworker'];
@@ -220,10 +224,14 @@ gulp.task('bump', function() {
 
 gulp.task('default', function() {
   isProd = true;
-  return runSequence('clean', 'bump', 'getversion', 'js',
-                     allTasks, 'vulcanize', 'precache', 'copy_bower_components');
+  return runSequence('clean', 'js', allTasks, 'vulcanize', 'precache',
+                     'copy_bower_components');
 })
 
 gulp.task('dev', function() {
-  return runSequence('clean', 'getversion', allTasks, 'watch');
+  return runSequence('clean', allTasks, 'watch');
+});
+
+gulp.task('release', ['bump'], function() {
+  return runSequence('default');
 });

index.html

@@ -14,7 +14,7 @@
   <meta name="msapplication-tap-highlight" content="no">
   <meta name="theme-color" content="#e51c23">
 
-  <link rel="icon" sizes="192x192" href="images/gmail_small.png">
+  <link rel="icon" sizes="192x192" href="images/gmail.png">
   <link rel="manifest" href="manifest.json">
 
   <link rel="stylesheet" href="styles/app.css">

package.json

@@ -6,31 +6,33 @@
     "node": ">=0.10.0"
   },
   "devDependencies": {
-    "babelify": "^6.1.2",
-    "browserify": "^9.0.8",
-    "del": "^1.1.1",
-    "glob": "^5.0.12",
-    "gulp": "^3.8.11",
-    "gulp-autoprefixer": "^2.3.1",
-    "gulp-bump": "^0.3.0",
-    "gulp-crisper": "0.0.4",
-    "gulp-jscs": "^2.0.0",
-    "gulp-jshint": "^1.11.2",
+    "babel-preset-es2015": "^6.1.18",
+    "babelify": "^7.2.0",
+    "browserify": "^12.0.1",
+    "del": "^2.1.0",
+    "glob": "^6.0.1",
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-bump": "^1.0.0",
+    "gulp-crisper": "^1.0.0",
+    "gulp-if": "^2.0.0",
+    "gulp-jscs": "^3.0.2",
+    "gulp-jshint": "^2.0.0",
     "gulp-license": "^1.0.0",
-    "gulp-load-plugins": "^0.10.0",
+    "gulp-load-plugins": "^1.1.0",
     "gulp-minify-css": "^1.1.0",
-    "gulp-minify-inline": "^0.1.0",
+    "gulp-minify-html": "^1.0.4",
     "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.5.3",
-    "gulp-sass": "^1.3.3",
-    "gulp-streamify": "0.0.5",
-    "gulp-uglify": "^1.2.0",
-    "gulp-util": "^3.0.4",
-    "gulp-vulcanize": "^6.0.0",
-    "gulp-watch": "^4.2.4",
-    "jshint-stylish": "^2.0.1",
+    "gulp-replace": "^0.5.4",
+    "gulp-sass": "^2.1.0",
+    "gulp-streamify": "^1.0.2",
+    "gulp-uglify": "^1.5.1",
+    "gulp-util": "^3.0.7",
+    "gulp-vulcanize": "^6.1.0",
+    "gulp-watch": "^4.3.5",
+    "jshint-stylish": "^2.1.0",
     "lodash.assign": "^3.1.0",
-    "run-sequence": "^1.1.0",
+    "run-sequence": "^1.1.5",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
   }

scripts/app.js

@@ -323,7 +323,7 @@ import {GMail as Gmail, GPlus as Gplus} from './googleapis';
         });
 
         this._scrollArchiveSetup = false;
-      }.bind(this));
+      });
     }
 
     this._scrollArchiveSetup = true;
@@ -463,6 +463,22 @@ import {GMail as Gmail, GPlus as Gplus} from './googleapis';
     template.toggleToast('Connection is flaky. Content may be stale.');
   });
 
+  // Log first paint.
+  if (window.chrome.loadTimes) {
+    var getFP = function() {
+      let load = window.chrome.loadTimes();
+      let fp = (load.firstPaintTime - load.startLoadTime) * 1000;
+      return Math.round(fp);
+    };
+    window.onload = (e) => {
+      let render = () => {
+        let fp = getFP();
+        console.info(`First paint: ${fp} ms`);
+      };
+      setTimeout(render, 100); // Wait a tick so we're guaranteed a fp time.
+    };
+  }
+
   // // Prevent context menu.
   // window.oncontextmenu = function() {
   //   return false;

scripts/googleapis.js

@@ -72,7 +72,7 @@ export class GMail extends GoogleClientAPI {
 
   static getValueForHeaderField(headers, field) {
     // jshint boss:true
-    for (var i = 0, header; header = headers[i]; ++i) {
+    for (let i = 0, header; header = headers[i]; ++i) {
       if (header.name === field || header.name === field.toLowerCase()) {
         return header.value;
       }
@@ -88,15 +88,15 @@ export class GMail extends GoogleClientAPI {
   }
 
   fixUpMessages(resp) {
-    var messages = resp.result.messages;
+    let messages = resp.result.messages;
 
     // jshint boss:true
-    for (var j = 0, m; m = messages[j]; ++j) {
-      var headers = m.payload.headers;
+    for (let j = 0, m; m = messages[j]; ++j) {
+      let headers = m.payload.headers;
 
-      var date = new Date(GMail.getValueForHeaderField(headers, 'Date'));
+      let date = new Date(GMail.getValueForHeaderField(headers, 'Date'));
 
-      var isToday = GMail.isToday(new Date(), date);
+      let isToday = GMail.isToday(new Date(), date);
       if (isToday) {
         // Example: Thu Sep 25 2014 14:43:18 GMT-0700 (PDT) -> 14:43:18.
         m.date = date.toLocaleTimeString().replace(
@@ -109,8 +109,14 @@ export class GMail extends GoogleClientAPI {
       m.to = GMail.getValueForHeaderField(headers, 'To');
       m.subject = GMail.getValueForHeaderField(headers, 'Subject');
 
-      var fromHeaders = GMail.getValueForHeaderField(headers, 'From');
-      var fromHeaderMatches = fromHeaders.match(this._FROM_HEADER_REGEX);
+      let fromHeaders = GMail.getValueForHeaderField(headers, 'From');
+
+      // Use Reply-To Header if From header wasn't found.
+      if (!fromHeaders) {
+        fromHeaders = GMail.getValueForHeaderField(headers, 'Reply-To');
+      }
+
+      let fromHeaderMatches = fromHeaders.match(this._FROM_HEADER_REGEX);
 
       m.from = {};
 
@@ -137,15 +143,15 @@ export class GMail extends GoogleClientAPI {
 
   fetchLabels() {
     return this.init().then(api => {
-      var fetchLabels = api.users.labels.list({userId: 'me'});
+      let fetchLabels = api.users.labels.list({userId: 'me'});
       return fetchLabels.then(resp => {
-        var labels = resp.result.labels.filter((label, i) => {
+        let labels = resp.result.labels.filter((label, i) => {
           // Add color to label.
           label.color = GMail.Labels.Colors[i % GMail.Labels.Colors.length];
           return label.type !== 'system'; // Don't include system labels.
         });
 
-        var labelMap = labels.reduce((o, v, i) => {
+        let labelMap = labels.reduce((o, v, i) => {
           o[v.id] = v;
           return o;
         }, {});
@@ -158,27 +164,27 @@ export class GMail extends GoogleClientAPI {
   fetchMail(q) {
     return this.init().then(api => {
       // Fetch only the emails in the user's inbox.
-      var fetchThreads = api.users.threads.list({userId: 'me', q: q});
+      let fetchThreads = api.users.threads.list({userId: 'me', q: q});
       return fetchThreads.then(resp => {
 
-        var batch = gapi.client.newBatch();
-        var threads = resp.result.threads;
+        let batch = gapi.client.newBatch();
+        let threads = resp.result.threads;
 
         if (!threads) {
           return [];
         }
 
         // Setup a batch operation to fetch all messages for each thread.
         // jshint boss:true
-        for (var i = 0, thread; thread = threads[i]; ++i) {
-          var req = api.users.threads.get({userId: 'me', 'id': thread.id});
+        for (let i = 0, thread; thread = threads[i]; ++i) {
+          let req = api.users.threads.get({userId: 'me', 'id': thread.id});
           batch.add(req, {id: thread.id}); // Give each request a unique id for lookup later.
         }
 
         // Like Promise.all, but resp is an object instead of promise results.
         return batch.then(resp => {
           // jshint boss:true
-          for (var i = 0, thread; thread = threads[i]; ++i) {
+          for (let i = 0, thread; thread = threads[i]; ++i) {
             thread.messages = this.fixUpMessages(
                 resp.result[thread.id]).reverse();
             //thread.archived = false; // initialize archived.
@@ -222,7 +228,7 @@ export class GPlus extends GoogleClientAPI {
   }
 
   fetchFriendProfilePics() {
-    var users = {};
+    let users = {};
     return this.init().then(plus => {
       return new Promise((resolve, reject) => {
         this._getAllUserProfileImages(users, null, resolve);
@@ -234,7 +240,7 @@ export class GPlus extends GoogleClientAPI {
     return this.init().then(api => {
       // Get user's profile pic, cover image, email, and name.
       return api.people.get({userId: 'me'}).then(resp => {
-        // var img = resp.result.image && resp.result.image.url.replace(/(.+)\?sz=\d\d/, "$1?sz=" + this.PROFILE_IMAGE_SIZE);
+        // let img = resp.result.image && resp.result.image.url.replace(/(.+)\?sz=\d\d/, "$1?sz=" + this.PROFILE_IMAGE_SIZE);
         if (!resp.result.cover) {
           return null;
         }