From 057611ba255301f95d5f9441bc886db283250976 Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Sat, 25 Apr 2015 07:59:33 -0400
Subject: [PATCH] visually separate document boundaries in logger

---
 src/css/devtool-log.css | 17 ++++++++++++-----
 src/js/devtool-log.js   | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/css/devtool-log.css b/src/css/devtool-log.css
index d9d2f7f8d..1ae7a9487 100644
--- a/src/css/devtool-log.css
+++ b/src/css/devtool-log.css
@@ -55,23 +55,30 @@ input:focus {
     font: 12px monospace;
     width: 100%;
     }
+#content table tr.docBoundary {
+    background-color: #666;
+    color: white;
+    text-align: center;
+    }
+#content table tr.docBoundary > td:nth-of-type(1) {
+    padding: 1em 0;
+    }
 #content table tr.blocked {
-    background-color: rgba(192, 0, 0, 0.1)
+    background-color: rgba(192, 0, 0, 0.1);
     }
 body.colorBlind #content table tr.blocked {
-    background-color: rgba(0, 19, 110, 0.1)
+    background-color: rgba(0, 19, 110, 0.1);
     }
 #content table tr.allowed {
-    background-color: rgba(0, 160, 0, 0.1)
+    background-color: rgba(0, 160, 0, 0.1);
     }
 body.colorBlind #content table tr.allowed {
     background-color: rgba(255, 194, 57, 0.1)
     }
 #content table tr.maindoc {
-    background-color: #eee;
     }
 #content table tr.cosmetic {
-    background-color: rgba(255, 255, 0, 0.1)
+    background-color: rgba(255, 255, 0, 0.1);
     }
 body:not(.filterOff) #content table tr.hidden {
     display: none;
diff --git a/src/js/devtool-log.js b/src/js/devtool-log.js
index e2e78e78a..d2c742682 100644
--- a/src/js/devtool-log.js
+++ b/src/js/devtool-log.js
@@ -121,9 +121,28 @@ var createRow = function() {
 
 /******************************************************************************/
 
+var insertGap = function(url) {
+    var tr = doc.createElement('tr');
+    tr.classList.add('docBoundary');
+    var td = doc.createElement('td');
+    td.setAttribute('colspan', '4');
+    td.textContent = url;
+    tr.appendChild(td);
+    tbody.insertBefore(tr, tbody.firstChild);
+};
+
+/******************************************************************************/
+
 var renderLogEntry = function(entry) {
     var tr = createRow();
 
+    // If the request is that of a root frame, insert a gap in the table
+    // in order to visually separate entries for different documents. 
+    if ( entry.type === 'main_frame' ) {
+        insertGap(entry.url);
+        tr.classList.add('maindoc');
+    }
+
     // Cosmetic filter?
     if ( entry.result.charAt(0) === 'c' ) {
         tr.classList.add('cosmetic');