Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dom inspector: this fixes non-sticky toolbars

This commit is contained in:
gorhill 2015-07-01 09:19:13 -04:00
parent bd9a63a73c
commit a0607702b1
6 changed files with 143 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/css/logger-ui-inspector.css
View File

@ -1,16 +1,9 @@
#domInspector { #domInspector {
border-top: 1px solid #ccc;
display: none; display: none;
max-height: 70%;
min-height: 70%;
overflow: auto;
} }
#domInspector.enabled { #inspectors.dom #domInspector {
display: block; display: block;
} }
#domInspector .permatoolbar {
position: absolute;
}
#domInspector .permatoolbar .highlightMode.invert { #domInspector .permatoolbar .highlightMode.invert {
transform: rotate(180deg); transform: rotate(180deg);
} }

142
src/css/logger-ui.css
View File

@ -1,17 +1,10 @@
body { body {
background-color: white; background-color: white;
border: 0; border: 0;
box-sizing: border-box;
color: black; color: black;
-moz-box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: flex-start;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
width: 100vw;
} }
input:focus { input:focus {
background-color: #ffe; background-color: #ffe;
@ -25,9 +18,13 @@ textarea {
.permatoolbar { .permatoolbar {
background-color: white; background-color: white;
border: 0; border: 0;
box-sizing: border-box;
font-size: 120%; font-size: 120%;
left: 0;
margin: 0; margin: 0;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
position: absolute;
top: 0;
z-index: 10; z-index: 10;
} }
.permatoolbar .button { .permatoolbar .button {
@ -61,95 +58,112 @@ textarea {
padding: 0.2em 0; padding: 0.2em 0;
} }
#events { #inspectors {
border-top: 1px solid #ccc; bottom: 0;
font: 13px sans-serif; position: absolute;
min-height: 60%; top: 0;
overflow-x: hidden;
overflow-y: auto;
width: 100%; width: 100%;
} }
#events .permatoolbar { .inspector {
border-top: 1px solid #ccc;
bottom: 0;
position: absolute; position: absolute;
top: 0;
width: 100%;
} }
#events #compactViewToggler.button:before { .vscrollable {
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
width: 100%;
}
#netInspector {
font: 13px sans-serif;
}
#inspectors.dom #netInspector {
display: none;
}
#netInspector #compactViewToggler.button:before {
content: '\f102'; content: '\f102';
} }
#events.compactView #compactViewToggler.button:before { #netInspector.compactView #compactViewToggler.button:before {
content: '\f103'; content: '\f103';
} }
#events #filterButton { #netInspector #filterButton {
opacity: 0.25; opacity: 0.25;
} }
#events.f #filterButton { #netInspector.f #filterButton {
opacity: 1; opacity: 1;
} }
#events #filterInput.bad { #netInspector #filterInput.bad {
background-color: #fee; background-color: #fee;
} }
#events #maxEntries { #netInspector #maxEntries {
margin: 0 2em; margin: 0 2em;
} }
#events table { #netInspector table {
border: 0; border: 0;
border-collapse: collapse; border-collapse: collapse;
direction: ltr; direction: ltr;
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
} }
#events table > colgroup > col:nth-of-type(1) { #netInspector table > colgroup > col:nth-of-type(1) {
width: 5em; width: 5em;
} }
#events table > colgroup > col:nth-of-type(2) { #netInspector table > colgroup > col:nth-of-type(2) {
width: 2.5em; width: 2.5em;
} }
#events table > colgroup > col:nth-of-type(3) { #netInspector table > colgroup > col:nth-of-type(3) {
width: 20%; width: 20%;
} }
#events table > colgroup > col:nth-of-type(4) { #netInspector table > colgroup > col:nth-of-type(4) {
width: 2.5em; width: 2.5em;
} }
#events table > colgroup > col:nth-of-type(5) { #netInspector table > colgroup > col:nth-of-type(5) {
width: 6em; width: 6em;
} }
#events table > colgroup > col:nth-of-type(6) { #netInspector table > colgroup > col:nth-of-type(6) {
width: calc(100% - 16em - 20%); width: calc(100% - 16em - 20%);
} }
#events.f table tr.f { #netInspector.f table tr.f {
display: none; display: none;
} }
#events tr.cat_info { #netInspector tr.cat_info {
color: #00f; color: #00f;
} }
#events tr.blocked { #netInspector tr.blocked {
background-color: rgba(192, 0, 0, 0.1); background-color: rgba(192, 0, 0, 0.1);
} }
body.colorBlind #events tr.blocked { body.colorBlind #netInspector tr.blocked {
background-color: rgba(0, 19, 110, 0.1); background-color: rgba(0, 19, 110, 0.1);
} }
#events tr.nooped { #netInspector tr.nooped {
background-color: rgba(108, 108, 108, 0.1); background-color: rgba(108, 108, 108, 0.1);
} }
body.colorBlind #events tr.nooped { body.colorBlind #netInspector tr.nooped {
background-color: rgba(96, 96, 96, 0.1); background-color: rgba(96, 96, 96, 0.1);
} }
#events tr.allowed { #netInspector tr.allowed {
background-color: rgba(0, 160, 0, 0.1); background-color: rgba(0, 160, 0, 0.1);
} }
body.colorBlind #events tr.allowed { body.colorBlind #netInspector tr.allowed {
background-color: rgba(255, 194, 57, 0.1) background-color: rgba(255, 194, 57, 0.1)
} }
#events tr.cb { #netInspector tr.cb {
background-color: rgba(255, 255, 0, 0.1); background-color: rgba(255, 255, 0, 0.1);
} }
#events tr.maindoc { #netInspector tr.maindoc {
background-color: #666; background-color: #666;
color: white; color: white;
text-align: center; text-align: center;
} }
body #events td { body #netInspector td {
border: 1px solid #ccc; border: 1px solid #ccc;
border-top: none; border-top: none;
min-width: 0.5em; min-width: 0.5em;
@ -159,87 +173,87 @@ body #events td {
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
} }
#events tr td { #netInspector tr td {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
#events tr td:first-of-type { #netInspector tr td:first-of-type {
border-left: none; border-left: none;
} }
#events tr td:last-of-type { #netInspector tr td:last-of-type {
border-right: none; border-right: none;
} }
#events.compactView td { #netInspector.compactView td {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
#events tr td:nth-of-type(1) { #netInspector tr td:nth-of-type(1) {
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
} }
#events tr td:nth-of-type(2) { #netInspector tr td:nth-of-type(2) {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
} }
#events tr.tab_bts > td:nth-of-type(2):before { #netInspector tr.tab_bts > td:nth-of-type(2):before {
content: '\f070'; content: '\f070';
font: 1em FontAwesome; font: 1em FontAwesome;
} }
#events tr.tab:not(.canMtx) { #netInspector tr.tab:not(.canMtx) {
opacity: 0.3; opacity: 0.3;
} }
#events tr.tab:not(.canMtx):hover { #netInspector tr.tab:not(.canMtx):hover {
opacity: 0.7; opacity: 0.7;
} }
#events tr.tab:not(.canMtx) > td:nth-of-type(2):before { #netInspector tr.tab:not(.canMtx) > td:nth-of-type(2):before {
content: '\f00d'; content: '\f00d';
font: 1em FontAwesome; font: 1em FontAwesome;
} }
body:not(.popupOn) #events tr.canMtx td:nth-of-type(2) { body:not(.popupOn) #netInspector tr.canMtx td:nth-of-type(2) {
cursor: zoom-in; cursor: zoom-in;
} }
body:not(.popupOn) #events tr.canMtx td:nth-of-type(2):hover { body:not(.popupOn) #netInspector tr.canMtx td:nth-of-type(2):hover {
background: #ccc; background: #ccc;
} }
#events tr.canLookup td:nth-of-type(3) { #netInspector tr.canLookup td:nth-of-type(3) {
cursor: zoom-in; cursor: zoom-in;
} }
#events tr.cat_net td:nth-of-type(4), #netInspector tr.cat_net td:nth-of-type(4),
#events tr.cat_cosmetic td:nth-of-type(4) { #netInspector tr.cat_cosmetic td:nth-of-type(4) {
font: 12px monospace; font: 12px monospace;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
} }
#events tr.cat_net td:nth-of-type(4) { #netInspector tr.cat_net td:nth-of-type(4) {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
#events tr.cat_net td:nth-of-type(4):hover { #netInspector tr.cat_net td:nth-of-type(4):hover {
background: #ccc; background: #ccc;
} }
#events tr.cat_net td:nth-of-type(6) > span > b { #netInspector tr.cat_net td:nth-of-type(6) > span > b {
font-weight: bold; font-weight: bold;
} }
#events tr td:nth-of-type(6) b { #netInspector tr td:nth-of-type(6) b {
font-weight: normal; font-weight: normal;
} }
#events tr.blocked td:nth-of-type(6) b { #netInspector tr.blocked td:nth-of-type(6) b {
background-color: rgba(192, 0, 0, 0.2); background-color: rgba(192, 0, 0, 0.2);
} }
body.colorBlind #events tr.blocked td:nth-of-type(6) b { body.colorBlind #netInspector tr.blocked td:nth-of-type(6) b {
background-color: rgba(0, 19, 110, 0.2); background-color: rgba(0, 19, 110, 0.2);
} }
#events tr.nooped td:nth-of-type(6) b { #netInspector tr.nooped td:nth-of-type(6) b {
background-color: rgba(108, 108, 108, 0.2); background-color: rgba(108, 108, 108, 0.2);
} }
body.colorBlind #events tr.nooped td:nth-of-type(6) b { body.colorBlind #netInspector tr.nooped td:nth-of-type(6) b {
background-color: rgba(96, 96, 96, 0.2); background-color: rgba(96, 96, 96, 0.2);
} }
#events tr.allowed td:nth-of-type(6) b { #netInspector tr.allowed td:nth-of-type(6) b {
background-color: rgba(0, 160, 0, 0.2); background-color: rgba(0, 160, 0, 0.2);
} }
body.colorBlind #events tr.allowed td:nth-of-type(6) b { body.colorBlind #netInspector tr.allowed td:nth-of-type(6) b {
background-color: rgba(255, 194, 57, 0.2); background-color: rgba(255, 194, 57, 0.2);
} }
@ -255,7 +269,7 @@ body.colorBlind #events tr.allowed td:nth-of-type(6) b {
top: 0; top: 0;
z-index: 200; z-index: 200;
} }
#events.popupOn #popupContainer { #netInspector.popupOn #popupContainer {
display: block; display: block;
} }
#popupContainer > div { #popupContainer > div {

14
src/js/logger-ui-inspector.js
View File

@ -100,7 +100,8 @@ var appendListItem = function(ul, li) {
/******************************************************************************/ /******************************************************************************/
var renderDOMFull = function(response) { var renderDOMFull = function(response) {
var ul = inspector.removeChild(domTree); var domTreeParent = domTree.parentElement;
var ul = domTreeParent.removeChild(domTree);
logger.removeAllChildren(domTree); logger.removeAllChildren(domTree);
var lvl = 0; var lvl = 0;
@ -140,7 +141,7 @@ var renderDOMFull = function(response) {
} }
ul.firstElementChild.classList.add('show'); ul.firstElementChild.classList.add('show');
inspector.appendChild(domTree); domTreeParent.appendChild(domTree);
}; };
// https://www.youtube.com/watch?v=IDGNA83mxDo // https://www.youtube.com/watch?v=IDGNA83mxDo
@ -464,7 +465,7 @@ var onClick = function(ev) {
inspectedTabId, inspectedTabId,
'dom-inspector.js' 'dom-inspector.js'
); );
var cantCreate = inspector.querySelector('#domTree .off') === null; var cantCreate = domTree.querySelector('.off') === null;
inspector.querySelector('.permatoolbar .revert').classList.toggle('disabled', cantCreate); inspector.querySelector('.permatoolbar .revert').classList.toggle('disabled', cantCreate);
inspector.querySelector('.permatoolbar .commit').classList.toggle('disabled', cantCreate); inspector.querySelector('.permatoolbar .commit').classList.toggle('disabled', cantCreate);
return; return;
@ -674,13 +675,7 @@ var toggleOn = function() {
uDom.nodeFromSelector('#domInspector .permatoolbar .highlightMode').addEventListener('click', toggleHighlightMode); uDom.nodeFromSelector('#domInspector .permatoolbar .highlightMode').addEventListener('click', toggleHighlightMode);
uDom.nodeFromSelector('#domInspector .permatoolbar .revert').addEventListener('click', revert); uDom.nodeFromSelector('#domInspector .permatoolbar .revert').addEventListener('click', revert);
uDom.nodeFromSelector('#domInspector .permatoolbar .commit').addEventListener('click', startDialog); uDom.nodeFromSelector('#domInspector .permatoolbar .commit').addEventListener('click', startDialog);
inspector.classList.add('enabled');
injectInspector(); injectInspector();
// Adjust tree view for toolbar height
domTree.style.setProperty(
'margin-top',
inspector.querySelector('.permatoolbar').clientHeight + 'px'
);
}; };
/******************************************************************************/ /******************************************************************************/
@ -695,7 +690,6 @@ var toggleOff = function() {
uDom.nodeFromSelector('#domInspector .permatoolbar .revert').removeEventListener('click', revert); uDom.nodeFromSelector('#domInspector .permatoolbar .revert').removeEventListener('click', revert);
uDom.nodeFromSelector('#domInspector .permatoolbar .commit').removeEventListener('click', startDialog); uDom.nodeFromSelector('#domInspector .permatoolbar .commit').removeEventListener('click', startDialog);
inspectedTabId = ''; inspectedTabId = '';
inspector.classList.remove('enabled');
}; };
/******************************************************************************/ /******************************************************************************/

54
src/js/logger-ui.js
View File

@ -57,21 +57,15 @@ var tabIdFromClassName = logger.tabIdFromClassName = function(className) {
// Adjust top padding of content table, to match that of toolbar height. // Adjust top padding of content table, to match that of toolbar height.
(function() { (function() {
var parent = uDom.nodeFromSelector('body > .permatoolbar'); var toolbar = uDom.nodeFromSelector('body > .permatoolbar');
var child = parent.firstElementChild; var size = toolbar.clientHeight + 'px';
var size = child.clientHeight + 'px'; uDom('#inspectors').css('top', size);
parent.style.setProperty('min-height', size); uDom('.vscrollable').css('padding-top', size);
parent = uDom.nodeFromId('events');
parent.querySelector('table').style.setProperty(
'margin-top',
parent.querySelector('.permatoolbar').clientHeight + 'px'
);
})(); })();
/******************************************************************************/ /******************************************************************************/
var tbody = document.querySelector('#events tbody'); var tbody = document.querySelector('#netInspector tbody');
var trJunkyard = []; var trJunkyard = [];
var tdJunkyard = []; var tdJunkyard = [];
var firstVarDataCol = 2; // currently, column 2 (0-based index) var firstVarDataCol = 2; // currently, column 2 (0-based index)
@ -581,7 +575,7 @@ var renderLogEntries = function(response) {
if ( yDelta === 0 ) { if ( yDelta === 0 ) {
return; return;
} }
var container = uDom.nodeFromId('events'); var container = uDom.nodeFromId('netInspector');
if ( container.scrollTop !== 0 ) { if ( container.scrollTop !== 0 ) {
container.scrollTop += yDelta; container.scrollTop += yDelta;
} }
@ -661,7 +655,7 @@ var truncateLog = function(size) {
if ( size === 0 ) { if ( size === 0 ) {
size = 5000; size = 5000;
} }
var tbody = document.querySelector('#events tbody'); var tbody = document.querySelector('#netInspector tbody');
size = Math.min(size, 10000); size = Math.min(size, 10000);
var tr; var tr;
while ( tbody.childElementCount > size ) { while ( tbody.childElementCount > size ) {
@ -728,7 +722,7 @@ var pageSelectorChanged = function() {
} }
if ( tabClass !== '' ) { if ( tabClass !== '' ) {
sheet.insertRule( sheet.insertRule(
'#events table tr:not(.' + tabClass + ') { display: none; }', '#netInspector table tr:not(.' + tabClass + ') { display: none; }',
0 0
); );
} }
@ -1505,10 +1499,10 @@ var rowFilterer = (function() {
var filterAll = function() { var filterAll = function() {
// Special case: no filter // Special case: no filter
if ( filters.length === 0 ) { if ( filters.length === 0 ) {
uDom('#events tr').removeClass('f'); uDom('#netInspector tr').removeClass('f');
return; return;
} }
var tbody = document.querySelector('#events tbody'); var tbody = document.querySelector('#netInspector tbody');
var rows = tbody.rows; var rows = tbody.rows;
var i = rows.length; var i = rows.length;
while ( i-- ) { while ( i-- ) {
@ -1532,7 +1526,7 @@ var rowFilterer = (function() {
})(); })();
var onFilterButton = function() { var onFilterButton = function() {
uDom.nodeFromId('events').classList.toggle('f'); uDom.nodeFromId('netInspector').classList.toggle('f');
}; };
uDom('#filterButton').on('click', onFilterButton); uDom('#filterButton').on('click', onFilterButton);
@ -1563,7 +1557,7 @@ var toJunkyard = function(trs) {
var clearBuffer = function() { var clearBuffer = function() {
var tabId = uDom.nodeFromId('pageSelector').value || null; var tabId = uDom.nodeFromId('pageSelector').value || null;
var tbody = document.querySelector('#events tbody'); var tbody = document.querySelector('#netInspector tbody');
var tr = tbody.lastElementChild; var tr = tbody.lastElementChild;
var trPrevious; var trPrevious;
while ( tr !== null ) { while ( tr !== null ) {
@ -1586,7 +1580,7 @@ var clearBuffer = function() {
/******************************************************************************/ /******************************************************************************/
var cleanBuffer = function() { var cleanBuffer = function() {
var rows = uDom('#events tr.tab:not(.canMtx)').remove(); var rows = uDom('#netInspector tr.tab:not(.canMtx)').remove();
var i = rows.length; var i = rows.length;
while ( i-- ) { while ( i-- ) {
trJunkyard.push(rows.nodeAt(i)); trJunkyard.push(rows.nodeAt(i));
@ -1597,7 +1591,13 @@ var cleanBuffer = function() {
/******************************************************************************/ /******************************************************************************/
var toggleCompactView = function() { var toggleCompactView = function() {
uDom.nodeFromId('events').classList.toggle('compactView'); uDom.nodeFromId('netInspector').classList.toggle('compactView');
};
/******************************************************************************/
var toggleInspectors = function() {
uDom.nodeFromId('inspectors').classList.toggle('dom');
}; };
/******************************************************************************/ /******************************************************************************/
@ -1610,7 +1610,7 @@ var popupManager = (function() {
var popupObserver = null; var popupObserver = null;
var style = null; var style = null;
var styleTemplate = [ var styleTemplate = [
'#events tr:not(.tab_{{tabId}}) {', '#netInspector tr:not(.tab_{{tabId}}) {',
'cursor: not-allowed;', 'cursor: not-allowed;',
'opacity: 0.2;', 'opacity: 0.2;',
'}' '}'
@ -1665,7 +1665,7 @@ var popupManager = (function() {
style = uDom.nodeFromId('popupFilterer'); style = uDom.nodeFromId('popupFilterer');
style.textContent = styleTemplate.replace('{{tabId}}', localTabId); style.textContent = styleTemplate.replace('{{tabId}}', localTabId);
var parent = uDom.nodeFromId('events'); var parent = uDom.nodeFromId('netInspector');
var rect = parent.getBoundingClientRect(); var rect = parent.getBoundingClientRect();
container.style.setProperty('top', rect.top + 'px'); container.style.setProperty('top', rect.top + 'px');
container.style.setProperty('right', (rect.right - parent.clientWidth) + 'px'); container.style.setProperty('right', (rect.right - parent.clientWidth) + 'px');
@ -1673,7 +1673,7 @@ var popupManager = (function() {
}; };
var toggleOff = function() { var toggleOff = function() {
uDom.nodeFromId('events').classList.remove('popupOn'); uDom.nodeFromId('netInspector').classList.remove('popupOn');
container.querySelector('div > span:nth-of-type(1)').removeEventListener('click', toggleSize); container.querySelector('div > span:nth-of-type(1)').removeEventListener('click', toggleSize);
container.querySelector('div > span:nth-of-type(2)').removeEventListener('click', toggleOff); container.querySelector('div > span:nth-of-type(2)').removeEventListener('click', toggleOff);
@ -1720,13 +1720,15 @@ uDom.onLoad(function() {
uDom('#pageSelector').on('change', pageSelectorChanged); uDom('#pageSelector').on('change', pageSelectorChanged);
uDom('#refresh').on('click', reloadTab); uDom('#refresh').on('click', reloadTab);
uDom('#showdom').on('click', toggleInspectors);
uDom('#compactViewToggler').on('click', toggleCompactView); uDom('#compactViewToggler').on('click', toggleCompactView);
uDom('#clean').on('click', cleanBuffer); uDom('#clean').on('click', cleanBuffer);
uDom('#clear').on('click', clearBuffer); uDom('#clear').on('click', clearBuffer);
uDom('#maxEntries').on('change', onMaxEntriesChanged); uDom('#maxEntries').on('change', onMaxEntriesChanged);
uDom('#events table').on('click', 'tr.canMtx > td:nth-of-type(2)', popupManager.toggleOn); uDom('#netInspector table').on('click', 'tr.canMtx > td:nth-of-type(2)', popupManager.toggleOn);
uDom('#events').on('click', 'tr.canLookup > td:nth-of-type(3)', reverseLookupManager.toggleOn); uDom('#netInspector').on('click', 'tr.canLookup > td:nth-of-type(3)', reverseLookupManager.toggleOn);
uDom('#events').on('click', 'tr.cat_net > td:nth-of-type(4)', netFilteringManager.toggleOn); uDom('#netInspector').on('click', 'tr.cat_net > td:nth-of-type(4)', netFilteringManager.toggleOn);
// https://github.com/gorhill/uBlock/issues/404 // https://github.com/gorhill/uBlock/issues/404
// Ensure page state is in sync with the state of its various widgets. // Ensure page state is in sync with the state of its various widgets.

2
src/js/scriptlets/dom-inspector.js
View File

@ -1001,7 +1001,7 @@ pickerRoot.onload = function() {
style.textContent = [ style.textContent = [
'body {', 'body {',
'background-color: transparent;', 'background-color: transparent;',
'cursor: crosshair;', 'cursor: not-allowed;',
'}', '}',
'svg {', 'svg {',
'height: 100%;', 'height: 100%;',

56
src/logger-ui.html
View File

@ -20,35 +20,41 @@
</div> </div>
</div> </div>
<div id="domInspector"> <div id="inspectors">
<div class="permatoolbar"> <div id="domInspector" class="inspector">
<div> <div class="permatoolbar">
<span class="button fa highlightMode" style="display: none">&#xf042;</span> <div>
<span class="button fa revert disabled">&#xf12d;</span> <span class="button fa highlightMode" style="display: none">&#xf042;</span>
<span class="button fa commit disabled">&#xf0c7;</span> <span class="button fa revert disabled">&#xf12d;</span>
<span class="button fa commit disabled">&#xf0c7;</span>
</div>
</div>
<div class="vscrollable">
<ul id="domTree"></ul>
</div> </div>
</div> </div>
<ul id="domTree"></ul>
</div>
<div id="events" class="compactView f"> <div id="netInspector" class="inspector compactView f">
<div class="permatoolbar"> <div class="permatoolbar">
<div> <div>
<span id="compactViewToggler" class="button fa"></span> <span id="compactViewToggler" class="button fa"></span>
<span id="clean" class="button fa disabled">&#xf00d;</span> <span id="clean" class="button fa disabled">&#xf00d;</span>
<span id="clear" class="button fa disabled">&#xf12d;</span> <span id="clear" class="button fa disabled">&#xf12d;</span>
<span id="filterButton" class="button fa">&#xf0b0;</span><input id="filterInput" type="text" placeholder="logFilterPrompt"> <span id="filterButton" class="button fa">&#xf0b0;</span><input id="filterInput" type="text" placeholder="logFilterPrompt">
<input id="maxEntries" type="text" size="5" title="logMaxEntriesTip"> <input id="maxEntries" type="text" size="5" title="logMaxEntriesTip">
</div>
</div>
<div class="vscrollable">
<style id="tabFilterer" scoped></style>
<style id="popupFilterer" scoped></style>
<table>
<colgroup><col><col><col><col><col></colgroup>
<tbody></tbody>
</table>
<div id="popupContainer">
<div><span>&#xf068;</span>&ensp;<span>&#xf00d;</span></div>
</div>
</div> </div>
</div>
<style id="tabFilterer" scoped></style>
<style id="popupFilterer" scoped></style>
<table>
<colgroup><col><col><col><col><col></colgroup>
<tbody></tbody>
</table>
<div id="popupContainer">
<div><span>&#xf068;</span>&ensp;<span>&#xf00d;</span></div>
</div> </div>
</div> </div>