undo spriting

libmproxy/web/static/css/app.css

@@ -11,54 +11,34 @@ html {
   height: 32px;
 }
 .resource-icon-css {
-  background-image: url("../images/sprite.png");
+  background-image: url(../images/chrome-devtools/resourceCSSIcon.png);
-  background-position: 0px 0px;
-  background-size: 32px 320px!important;
 }
 .resource-icon-document {
-  background-image: url("../images/sprite.png");
+  background-image: url(../images/chrome-devtools/resourceDocumentIcon.png);
-  background-position: 0px -32px;
-  background-size: 32px 320px!important;
 }
 .resource-icon-js {
-  background-image: url("../images/sprite.png");
+  background-image: url(../images/chrome-devtools/resourceJSIcon.png);
-  background-position: 0px -64px;
-  background-size: 32px 320px!important;
 }
 .resource-icon-plain {
-  background-image: url("../images/sprite.png");
+  background-image: url(../images/chrome-devtools/resourcePlainIcon.png);
-  background-position: 0px -96px;
-  background-size: 32px 320px!important;
 }
 .resource-icon-executable {
-  background-image: url("../images/sprite.png");
+  background-image: url(../images/resourceExecutableIcon.png);
-  background-position: 0px -128px;
-  background-size: 32px 320px!important;
 }
 .resource-icon-flash {
-  background-image: url("../images/sprite.png");
+  background-image: url(../images/resourceFlashIcon.png);
-  background-position: 0px -160px;
-  background-size: 32px 320px!important;
 }
 .resource-icon-image {
-  background-image: url("../images/sprite.png");
+  background-image: url(../images/resourceImageIcon.png);
-  background-position: 0px -192px;
-  background-size: 32px 320px!important;
 }
 .resource-icon-java {
-  background-image: url("../images/sprite.png");
+  background-image: url(../images/resourceJavaIcon.png);
-  background-position: 0px -224px;
-  background-size: 32px 320px!important;
 }
 .resource-icon-not-modified {
-  background-image: url("../images/sprite.png");
+  background-image: url(../images/resourceNotModifiedIcon.png);
-  background-position: 0px -256px;
-  background-size: 32px 320px!important;
 }
 .resource-icon-redirect {
-  background-image: url("../images/sprite.png");
+  background-image: url(../images/resourceRedirectIcon.png);
-  background-position: 0px -288px;
-  background-size: 32px 320px!important;
 }
 html,
 body,
@@ -128,12 +108,18 @@ header .menu {
 .flow-table thead {
   background-color: #dadada;
 }
+.flow-table tr {
+  cursor: pointer;
+}
 .flow-table td {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.flow-table .col-tls {
+.flow-table tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.flow-table  .col-tls {
   width: 10px;
 }
 .flow-table .col-tls-https {

libmproxy/web/static/images/chrome-devtools/LICENSE

@@ -0,0 +1,30 @@
+// Copyright 2014 The Chromium Authors. All rights reserved.
+//
+// The Chromium Authors can be found at
+// http://src.chromium.org/svn/trunk/src/AUTHORS
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

web/gulpfile.js

@@ -12,7 +12,6 @@ var qunit = require("gulp-qunit");
 var react = require("gulp-react");
 var rename = require("gulp-rename");
 var sourcemaps = require('gulp-sourcemaps');
-var sprite = require('gulp-sprite-generator');
 var uglify = require('gulp-uglify');
 
 
@@ -52,8 +51,7 @@ var path = {
     },
     css: {
         vendor: ["css/vendor.less"],
-        app: ["css/app.less"],
+        app: ["css/app.less"]
-        spritefile: "css/sprites.less"
     },
     fonts: ["src/vendor/fontawesome/fontawesome-webfont.*"],
     html: ["src/*.html", "!src/benchmark.html", "!src/test.html"],
@@ -131,20 +129,10 @@ gulp.task("jshint", function () {
         .pipe(jshint.reporter("jshint-stylish"));
 });
 
-gulp.task("sprites", function () {
+gulp.task("images", function () {
-    // Sprite generator is a gulp task, which accepts options object and
+    //(spriting code in commit 4ca720b55680e40b3a4361141a2ad39f9de81111)
-    // returns two streams for style and image piping.
+    return gulp.src(["src/images/**"])
-    var spriteOutput = gulp.src([path.css.spritefile], {base: "src", cwd: "src"})
+        .pipe(gulp.dest(path.dist + "static/images"));
-        .pipe(sprite({
-            spriteSheetName: "sprite.png",
-            spriteSheetPath: "../images",
-        }));
-    var css = spriteOutput.css
-        .pipe(rename({extname:".compiled.less"}))
-        .pipe(gulp.dest("src/css"));
-    var img = spriteOutput.img.pipe(gulp.dest(path.dist + "static/images"));
-    // https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md
-    return merge(css, img);
 });
 
 gulp.task("html", function () {
@@ -160,7 +148,7 @@ gulp.task('test', function() {
 });
 
 
-common = ["fonts", "html", "jshint", "sprites"];
+common = ["fonts", "html", "jshint", "images"];
 gulp.task("dev", common.concat(["styles-dev", "scripts-dev"]));
 gulp.task("prod", common.concat(["styles-prod", "scripts-prod"]));
 

web/package.json

@@ -17,7 +17,6 @@
     "gulp-react": "^1.0.1",
     "gulp-rename": "^1.2.0",
     "gulp-sourcemaps": "^1.1.5",
-    "gulp-sprite-generator": "^0.2.0",
     "gulp-uglify": "^1.0.1",
     "gulp-util": "^3.0.1",
     "jshint-stylish": "^0.4.0",

web/src/css/app.less

@@ -7,7 +7,7 @@ html {
     box-sizing: inherit;
 }
 
-@import (less) "sprites.compiled.less";
+@import (less) "sprites.less";
 @import (less) "layout.less";
 @import (less) "header.less";
 @import (less) "flowtable.less";

web/src/css/flowtable.less

@@ -6,12 +6,21 @@
 		background-color: #dadada;  
 	}
 
+	tr {
+		cursor: pointer;
+	}
+
 	td {
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
 
+	//tr:nth-child(odd) { background-color : white; }
+	tr:nth-child(even) { background-color : rgba(0,0,0,0.05); }
+	//tr:hover { background-color : hsla(209, 52%, 84%, 0.5); }
+​
+
 
 	.col-tls {
 		width: 10px;

web/src/css/sprites.compiled.less

@@ -1,58 +0,0 @@
-.resource-icon {
-    width: 32px;
-    height: 32px;
-}
-
-// From Chrome Dev Tools
-.resource-icon-css {
-	background-image: url("../images/sprite.png");
-    background-position: -0px -0px;
-    background-size: 32px 320px!important;
-}
-.resource-icon-document {
-	background-image: url("../images/sprite.png");
-    background-position: -0px -32px;
-    background-size: 32px 320px!important;
-}
-.resource-icon-js {
-	background-image: url("../images/sprite.png");
-    background-position: -0px -64px;
-    background-size: 32px 320px!important;
-}
-.resource-icon-plain {
-	background-image: url("../images/sprite.png");
-    background-position: -0px -96px;
-    background-size: 32px 320px!important;
-}
-
-// Own
-.resource-icon-executable {
-	background-image: url("../images/sprite.png");
-    background-position: -0px -128px;
-    background-size: 32px 320px!important;
-}
-.resource-icon-flash {
-	background-image: url("../images/sprite.png");
-    background-position: -0px -160px;
-    background-size: 32px 320px!important;
-}
-.resource-icon-image {
-	background-image: url("../images/sprite.png");
-    background-position: -0px -192px;
-    background-size: 32px 320px!important;
-}
-.resource-icon-java {
-	background-image: url("../images/sprite.png");
-    background-position: -0px -224px;
-    background-size: 32px 320px!important;
-}
-.resource-icon-not-modified {
-	background-image: url("../images/sprite.png");
-    background-position: -0px -256px;
-    background-size: 32px 320px!important;
-}
-.resource-icon-redirect {
-	background-image: url("../images/sprite.png");
-    background-position: -0px -288px;
-    background-size: 32px 320px!important;
-}