visually separate document boundaries in logger

This commit is contained in:
gorhill 2015-04-25 07:59:33 -04:00
parent 9f9465d7e9
commit 057611ba25
2 changed files with 31 additions and 5 deletions

View File

@ -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;

View File

@ -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');