From ae4090714ea34630063a5e9145e6f88e2f89c645 Mon Sep 17 00:00:00 2001
From: Chris <chris@chrismatic.io>
Date: Tue, 7 Apr 2015 00:36:17 -0600
Subject: [PATCH] Significant cleanup of request logger and various fixes;
 typography, readability, usability, and performance

---
 src/css/devtool-log.css | 40 ++++++++++++++--------
 src/css/devtools.css    | 76 +++++++++++++++++++++++------------------
 src/devtool-log.html    |  6 ++--
 src/devtools.html       |  4 +--
 src/js/devtools.js      |  2 +-
 5 files changed, 74 insertions(+), 54 deletions(-)

diff --git a/src/css/devtool-log.css b/src/css/devtool-log.css
index a72f0ee44..6bbc52636 100644
--- a/src/css/devtool-log.css
+++ b/src/css/devtool-log.css
@@ -4,35 +4,43 @@ body {
     -moz-box-sizing: border-box;
     font: 12px monospace;
     margin: 0;
-    overflow-x: hidden;
     padding: 0;
     white-space: nowrap;
     width: 100%;
+    overflow: hidden;
     }
 #toolbar {
-    background-color: white;
+    background-color: rgba(238, 238, 238, 0.85);
+    color: #444;
     border: 0;
     box-sizing: border-box;
-    height: 40px;
-    left: 0;
+    height: 41px;
     margin: 0;
     padding: 0 1em;
-    position: fixed;
-    top: 0;
-    width: 100%;
+    position: absolute;
+    top: 50px;
+    left: 0;
+    right: 0;
+    z-index: 9;
+    border-bottom: 1px solid #ccc;
+    }
+#toolbar > * {
+    display: inline-block;
+    vertical-align: middle;
+    }
+#toolbar input {
+    padding: 5px;
     }
 #toolbar .button {
-    background-color: white;
     border: none;
     box-sizing: border-box;
     cursor: pointer;
-    display: inline-block;
     font-size: 20px;
     margin: 0;
     padding: 8px;
     }
 #toolbar .button:hover {
-    background-color: #eee;
+    color: #999;
     }
 body.filterOff #toolbar #filterButton {
     opacity: 0.25;
@@ -40,14 +48,18 @@ body.filterOff #toolbar #filterButton {
 #filterExpression.bad {
     background-color: #fee;
     }
-#maxEntries {
-    margin-left: 3em;
-    }
 input:focus {
     background-color: #ffe;
     }
 #content {
-    margin-top: 40px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 0;
+    overflow-y: auto;
+    padding-top: 90px;
     }
 #content table {
     border: 0;
diff --git a/src/css/devtools.css b/src/css/devtools.css
index a33ae379b..81677c98d 100644
--- a/src/css/devtools.css
+++ b/src/css/devtools.css
@@ -5,69 +5,77 @@ body {
     padding: 0;
     }
 #toolbar {
-    background-color: #eee;
+    background-color: rgba(238, 238, 238, 0.85);
     border: none;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    height: 4em;
     padding: 1em;
-    position: fixed;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    height: 50px;
+    position: absolute;
     top: 0;
+    left: 0;
     width: 100%;
+    z-index: 5;
     }
 #toolbar > * {
     display: inline-block;
     position: relative;
     vertical-align: middle;
     }
-#toolbar button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    font-size: 2em;
-    margin: 0 0 0 1em;
-    vertical-align: middle;
-    }
 #pageSelector {
     max-width: 80%;
     }
-#toolbar #refresh {
-    margin-left: 4px;
+#toolbar .button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    margin: 0 0 0 1em;
+    }
+#toolbar .button:hover {
+    color: #999;
+    }
+#toolbar #popupToggler {
+    opacity: 0.4;
+    position: absolute;
+    top: 13px;
+    right: 13px;
+    z-index: 9;
+    font-size: 20px;
+    margin: 0;
+    }
+body.popupEnabled #popupToggler {
+    opacity: 1;
     }
 select {
     padding: 2px 0;
     font-size: 14px;
     min-width: 20em;
     max-width: 40em;
+    border: 1px solid #ccc;
     }
 select option {
     max-width: 40em;
     }
-#popupToggler {
-    opacity: 0.25;
-    position: absolute;
-    right: 0;
-    }
-body.popupEnabled #popupToggler {
-    opacity: 1;
-    }
 #content {
-    border: 0;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    height: calc(100vh - 4em);
-    margin-top: 4em;
-    overflow-y: auto;
-    padding: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
+    height: 100%;
+    border: 0;
+    padding: 0;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow-y: auto;
     }
 #popup {
     border: 1px solid gray;
     display: none;
     position: fixed;
-    right: 2px;
-    top: calc(4em + 2px);
+    right: 3px;
+    top: 53px;
     }
-body.popupEnabled #popup[src^="popup.html"] {
-    display: initial;
+body.popupEnabled #popup {
+    display: block;
     }
diff --git a/src/devtool-log.html b/src/devtool-log.html
index 61c9e3c4b..a2ef93830 100644
--- a/src/devtool-log.html
+++ b/src/devtool-log.html
@@ -8,9 +8,9 @@
 </head>
 <body>
 <div id="toolbar">
-    <span id="reload" class="button fa">&#xf021;</span>
-    <span id="clear" class="button fa">&#xf12d;</span>
-    <span id="filterButton" class="button fa">&#xf0b0;</span><input id="filterExpression" type="text" placeholder="logFilterPrompt">
+    <span id="reload" class="button"><svg class="icon icon-reload"><use xlink:href="img/icons.svg#icon-reload"></use></svg></span>
+    <span id="clear" class="button"><svg class="icon icon-eraser"><use xlink:href="img/icons.svg#icon-eraser"></use></svg></span>
+    <span id="filterButton" class="button"><svg class="icon icon-filter"><use xlink:href="img/icons.svg#icon-filter"></use></svg></span><input id="filterExpression" type="text" placeholder="logFilterPrompt">
     <input id="maxEntries" type="text" size="5" title="logMaxEntriesTip">
     </div>
 <div id="content">
diff --git a/src/devtools.html b/src/devtools.html
index 9f4832c0c..47ec701c9 100644
--- a/src/devtools.html
+++ b/src/devtools.html
@@ -13,8 +13,8 @@
 
 <div id="toolbar">
     <select id="pageSelector"></select>
-    <button id="refresh" class="fa" type="button">&#xf021;</button>
-    <button id="popupToggler" class="fa" type="button">&#xf0c8;</button>
+    <span id="refresh" class="button"><svg class="icon icon-reload"><use xlink:href="img/icons.svg#icon-reload"></use></svg></span>
+    <span id="popupToggler" class="button"><svg class="icon icon-stats"><use xlink:href="img/icons.svg#icon-stats"></use></svg></span>
 </div>
 <iframe id="content"></iframe>
 <iframe id="popup" src=""></iframe>
diff --git a/src/js/devtools.js b/src/js/devtools.js
index 17a783a55..7adaf4e15 100644
--- a/src/js/devtools.js
+++ b/src/js/devtools.js
@@ -115,7 +115,7 @@ var resizePopup = function() {
 /******************************************************************************/
 
 var onPopupLoaded = function() {
-    resizePopup();
+    setTimeout(resizePopup, 0);
 
     if ( popupObserver !== null ) {
         popupObserver.disconnect();