add features to the traffic table, introduce image spriting

4 files changed, 126 insertions, 0 deletions

diff --git a/web/src/css/app.less b/web/src/css/app.less
index 1eec0687..39ac14cd 100644
--- a/web/src/css/app.less
+++ b/web/src/css/app.less
@@ -7,6 +7,7 @@ html {
     box-sizing: inherit;
 }
 
+@import (less) "sprites.compiled.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 95f235f4..deef9c81 100644
--- a/web/src/css/flowtable.less
+++ b/web/src/css/flowtable.less
@@ -1,5 +1,34 @@
 .flow-table {
 	width: 100%;
+	table-layout: fixed;
 
+	thead {
+		background-color: #dadada;  
+	}
 
+	td {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+
+	.col-tls {
+		width: 10px;
+	}
+	.col-tls-https {
+		background-color: rgba(0, 185, 0, 0.5);
+	}
+	.col-icon {
+		width: 32px;
+	}
+	.col-method {
+		width: 60px;
+	}
+	.col-status {
+		width: 50px;
+	}
+	.col-time {
+		width: 120px;
+	}
 }
\ No newline at end of file
diff --git a/web/src/css/sprites.compiled.less b/web/src/css/sprites.compiled.less
new file mode 100644
index 00000000..27951ee5
--- /dev/null
+++ b/web/src/css/sprites.compiled.less
@@ -0,0 +1,58 @@
+.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
diff --git a/web/src/css/sprites.less b/web/src/css/sprites.less
new file mode 100644
index 00000000..9a63fdd3
--- /dev/null
+++ b/web/src/css/sprites.less
@@ -0,0 +1,38 @@
+.resource-icon {
+    width: 32px;
+    height: 32px;
+}
+
+// From Chrome Dev Tools
+.resource-icon-css {
+	background-image: url(../images/chrome-devtools/resourceCSSIcon.png);
+}
+.resource-icon-document {
+	background-image: url(../images/chrome-devtools/resourceDocumentIcon.png);
+}
+.resource-icon-js {
+	background-image: url(../images/chrome-devtools/resourceJSIcon.png);
+}
+.resource-icon-plain {
+	background-image: url(../images/chrome-devtools/resourcePlainIcon.png);
+}
+
+// Own
+.resource-icon-executable {
+	background-image: url(../images/resourceExecutableIcon.png);
+}
+.resource-icon-flash {
+	background-image: url(../images/resourceFlashIcon.png);
+}
+.resource-icon-image {
+	background-image: url(../images/resourceImageIcon.png);
+}
+.resource-icon-java {
+	background-image: url(../images/resourceJavaIcon.png);
+}
+.resource-icon-not-modified {
+	background-image: url(../images/resourceNotModifiedIcon.png);
+}
+.resource-icon-redirect {
+	background-image: url(../images/resourceRedirectIcon.png);
+}
\ No newline at end of file