diff --git a/libmproxy/web/static/css/app.css b/libmproxy/web/static/css/app.css index 27acd68a5..dcc31d18b 100644 --- a/libmproxy/web/static/css/app.css +++ b/libmproxy/web/static/css/app.css @@ -11,54 +11,34 @@ html { height: 32px; } .resource-icon-css { - background-image: url("../images/sprite.png"); - background-position: 0px 0px; - background-size: 32px 320px!important; + background-image: url(../images/chrome-devtools/resourceCSSIcon.png); } .resource-icon-document { - background-image: url("../images/sprite.png"); - background-position: 0px -32px; - background-size: 32px 320px!important; + background-image: url(../images/chrome-devtools/resourceDocumentIcon.png); } .resource-icon-js { - background-image: url("../images/sprite.png"); - background-position: 0px -64px; - background-size: 32px 320px!important; + background-image: url(../images/chrome-devtools/resourceJSIcon.png); } .resource-icon-plain { - background-image: url("../images/sprite.png"); - background-position: 0px -96px; - background-size: 32px 320px!important; + background-image: url(../images/chrome-devtools/resourcePlainIcon.png); } .resource-icon-executable { - background-image: url("../images/sprite.png"); - background-position: 0px -128px; - background-size: 32px 320px!important; + background-image: url(../images/resourceExecutableIcon.png); } .resource-icon-flash { - background-image: url("../images/sprite.png"); - background-position: 0px -160px; - background-size: 32px 320px!important; + background-image: url(../images/resourceFlashIcon.png); } .resource-icon-image { - background-image: url("../images/sprite.png"); - background-position: 0px -192px; - background-size: 32px 320px!important; + background-image: url(../images/resourceImageIcon.png); } .resource-icon-java { - background-image: url("../images/sprite.png"); - background-position: 0px -224px; - background-size: 32px 320px!important; + background-image: url(../images/resourceJavaIcon.png); } .resource-icon-not-modified { - background-image: url("../images/sprite.png"); - background-position: 0px -256px; - background-size: 32px 320px!important; + background-image: url(../images/resourceNotModifiedIcon.png); } .resource-icon-redirect { - background-image: url("../images/sprite.png"); - background-position: 0px -288px; - background-size: 32px 320px!important; + background-image: url(../images/resourceRedirectIcon.png); } 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 { diff --git a/libmproxy/web/static/images/chrome-devtools/LICENSE b/libmproxy/web/static/images/chrome-devtools/LICENSE new file mode 100644 index 000000000..6e4f8b9f6 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/libmproxy/web/static/images/chrome-devtools/resourceCSSIcon.png b/libmproxy/web/static/images/chrome-devtools/resourceCSSIcon.png new file mode 100644 index 000000000..18828d065 Binary files /dev/null and b/libmproxy/web/static/images/chrome-devtools/resourceCSSIcon.png differ diff --git a/libmproxy/web/static/images/chrome-devtools/resourceDocumentIcon.png b/libmproxy/web/static/images/chrome-devtools/resourceDocumentIcon.png new file mode 100644 index 000000000..fdc10e477 Binary files /dev/null and b/libmproxy/web/static/images/chrome-devtools/resourceDocumentIcon.png differ diff --git a/libmproxy/web/static/images/chrome-devtools/resourceJSIcon.png b/libmproxy/web/static/images/chrome-devtools/resourceJSIcon.png new file mode 100644 index 000000000..c1b721892 Binary files /dev/null and b/libmproxy/web/static/images/chrome-devtools/resourceJSIcon.png differ diff --git a/libmproxy/web/static/images/chrome-devtools/resourcePlainIcon.png b/libmproxy/web/static/images/chrome-devtools/resourcePlainIcon.png new file mode 100644 index 000000000..8c82a4c76 Binary files /dev/null and b/libmproxy/web/static/images/chrome-devtools/resourcePlainIcon.png differ diff --git a/libmproxy/web/static/images/resourceExecutableIcon.png b/libmproxy/web/static/images/resourceExecutableIcon.png new file mode 100644 index 000000000..fa70c2fdb Binary files /dev/null and b/libmproxy/web/static/images/resourceExecutableIcon.png differ diff --git a/libmproxy/web/static/images/resourceFlashIcon.png b/libmproxy/web/static/images/resourceFlashIcon.png new file mode 100644 index 000000000..ead5a4d03 Binary files /dev/null and b/libmproxy/web/static/images/resourceFlashIcon.png differ diff --git a/libmproxy/web/static/images/resourceImageIcon.png b/libmproxy/web/static/images/resourceImageIcon.png new file mode 100644 index 000000000..231630428 Binary files /dev/null and b/libmproxy/web/static/images/resourceImageIcon.png differ diff --git a/libmproxy/web/static/images/resourceJavaIcon.png b/libmproxy/web/static/images/resourceJavaIcon.png new file mode 100644 index 000000000..553b3391c Binary files /dev/null and b/libmproxy/web/static/images/resourceJavaIcon.png differ diff --git a/libmproxy/web/static/images/resourceNotModifiedIcon.png b/libmproxy/web/static/images/resourceNotModifiedIcon.png new file mode 100644 index 000000000..9c6a879d2 Binary files /dev/null and b/libmproxy/web/static/images/resourceNotModifiedIcon.png differ diff --git a/libmproxy/web/static/images/resourceRedirectIcon.png b/libmproxy/web/static/images/resourceRedirectIcon.png new file mode 100644 index 000000000..58fe3ac1d Binary files /dev/null and b/libmproxy/web/static/images/resourceRedirectIcon.png differ diff --git a/libmproxy/web/static/images/sprite.png b/libmproxy/web/static/images/sprite.png deleted file mode 100644 index ff57a37d4..000000000 Binary files a/libmproxy/web/static/images/sprite.png and /dev/null differ diff --git a/web/gulpfile.js b/web/gulpfile.js index c1ca8e67a..66554051f 100644 --- a/web/gulpfile.js +++ b/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"], - spritefile: "css/sprites.less" + app: ["css/app.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 () { - // Sprite generator is a gulp task, which accepts options object and - // returns two streams for style and image piping. - var spriteOutput = gulp.src([path.css.spritefile], {base: "src", cwd: "src"}) - .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("images", function () { + //(spriting code in commit 4ca720b55680e40b3a4361141a2ad39f9de81111) + return gulp.src(["src/images/**"]) + .pipe(gulp.dest(path.dist + "static/images")); }); 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"])); diff --git a/web/package.json b/web/package.json index de90587f6..932c32706 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/css/app.less b/web/src/css/app.less index 39ac14cd7..cc65cfdd5 100644 --- a/web/src/css/app.less +++ b/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"; diff --git a/web/src/css/flowtable.less b/web/src/css/flowtable.less index deef9c81b..f96b7abf4 100644 --- a/web/src/css/flowtable.less +++ b/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; diff --git a/web/src/css/sprites.compiled.less b/web/src/css/sprites.compiled.less deleted file mode 100644 index 27951ee57..000000000 --- a/web/src/css/sprites.compiled.less +++ /dev/null @@ -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; -} \ No newline at end of file