Use data URIs for tabzilla to cut down on requests

gulpfile.js

@@ -2,6 +2,7 @@ var gulp = require('gulp');
 var fs = require('fs');
 var plugins = require('gulp-load-plugins')();
 var del = require('del');
+var cssBase64 = require('gulp-css-base64');
 var glob = require('glob');
 var path = require('path');
 var marked = require('marked');
@@ -197,8 +198,9 @@ gulp.task('build:js', ['clean'], function() {
 
 gulp.task('build:tabzilla', ['clean'], function() {
   return gulp
-    .src('node_modules/mozilla-tabzilla/**/*.{css,png}')
-    .pipe(gulp.dest('dist/tabzilla'));
+    .src('node_modules/mozilla-tabzilla/css/*.css')
+    .pipe(cssBase64())
+    .pipe(gulp.dest('dist/'));
 });
 
 gulp.task('build:favicon', ['clean'], function() {

package.json

@@ -31,6 +31,7 @@
     "gulp-eslint": "^1.0.0",
     "gulp": "^3.9.0",
     "gulp-concat": "^2.6.0",
+    "gulp-css-base64": "^1.3.2",
     "gulp-docco": "0.0.4",
     "gulp-load-plugins": "^0.10.0",
     "gulp-rename": "^1.2.2",

src/css/style.css

@@ -68,13 +68,13 @@ body {
 }
 
 .loaded #tabzilla {
-  transition: opacity 1s;
+  transition: opacity .3s;
   opacity: 1;
 }
 
 .loaded #tabzilla:before {
   background: #333;
-  transition: background 1s;
+  transition: background .3s;
 }
 
 .tip {

src/tpl/layout.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>ServiceWorker Cookbook</title>
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-  <link rel="stylesheet" href="tabzilla/css/tabzilla.css">
+  <link rel="stylesheet" href="tabzilla.css">
   <link rel="stylesheet" href="bundle.css">
   <script type="text/javascript" src="bundle.js" defer></script>
 </head>