diff --git a/src/css/logger-ui-inspector.css b/src/css/logger-ui-inspector.css index 3cc17cc97..919743c7e 100644 --- a/src/css/logger-ui-inspector.css +++ b/src/css/logger-ui-inspector.css @@ -1,16 +1,9 @@ #domInspector { - border-top: 1px solid #ccc; display: none; - max-height: 70%; - min-height: 70%; - overflow: auto; } -#domInspector.enabled { +#inspectors.dom #domInspector { display: block; } -#domInspector .permatoolbar { - position: absolute; - } #domInspector .permatoolbar .highlightMode.invert { transform: rotate(180deg); } diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 449b77e5b..1db62dac5 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -1,17 +1,10 @@ body { background-color: white; border: 0; - box-sizing: border-box; color: black; - -moz-box-sizing: border-box; - display: flex; - flex-direction: column; - height: 100vh; - justify-content: flex-start; margin: 0; overflow: hidden; padding: 0; - width: 100vw; } input:focus { background-color: #ffe; @@ -25,9 +18,13 @@ textarea { .permatoolbar { background-color: white; border: 0; + box-sizing: border-box; font-size: 120%; + left: 0; margin: 0; padding: 0.25em 0.5em; + position: absolute; + top: 0; z-index: 10; } .permatoolbar .button { @@ -61,95 +58,112 @@ textarea { padding: 0.2em 0; } -#events { - border-top: 1px solid #ccc; - font: 13px sans-serif; - min-height: 60%; - overflow-x: hidden; - overflow-y: auto; +#inspectors { + bottom: 0; + position: absolute; + top: 0; width: 100%; } -#events .permatoolbar { +.inspector { + border-top: 1px solid #ccc; + bottom: 0; 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'; } -#events.compactView #compactViewToggler.button:before { +#netInspector.compactView #compactViewToggler.button:before { content: '\f103'; } -#events #filterButton { +#netInspector #filterButton { opacity: 0.25; } -#events.f #filterButton { +#netInspector.f #filterButton { opacity: 1; } -#events #filterInput.bad { +#netInspector #filterInput.bad { background-color: #fee; } -#events #maxEntries { +#netInspector #maxEntries { margin: 0 2em; } -#events table { +#netInspector table { border: 0; border-collapse: collapse; direction: ltr; table-layout: fixed; width: 100%; } -#events table > colgroup > col:nth-of-type(1) { +#netInspector table > colgroup > col:nth-of-type(1) { width: 5em; } -#events table > colgroup > col:nth-of-type(2) { +#netInspector table > colgroup > col:nth-of-type(2) { width: 2.5em; } -#events table > colgroup > col:nth-of-type(3) { +#netInspector table > colgroup > col:nth-of-type(3) { width: 20%; } -#events table > colgroup > col:nth-of-type(4) { +#netInspector table > colgroup > col:nth-of-type(4) { width: 2.5em; } -#events table > colgroup > col:nth-of-type(5) { +#netInspector table > colgroup > col:nth-of-type(5) { width: 6em; } -#events table > colgroup > col:nth-of-type(6) { +#netInspector table > colgroup > col:nth-of-type(6) { width: calc(100% - 16em - 20%); } -#events.f table tr.f { +#netInspector.f table tr.f { display: none; } -#events tr.cat_info { +#netInspector tr.cat_info { color: #00f; } -#events tr.blocked { +#netInspector tr.blocked { 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); } -#events tr.nooped { +#netInspector tr.nooped { 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); } -#events tr.allowed { +#netInspector tr.allowed { 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) } -#events tr.cb { +#netInspector tr.cb { background-color: rgba(255, 255, 0, 0.1); } -#events tr.maindoc { +#netInspector tr.maindoc { background-color: #666; color: white; text-align: center; } -body #events td { +body #netInspector td { border: 1px solid #ccc; border-top: none; min-width: 0.5em; @@ -159,87 +173,87 @@ body #events td { word-break: break-all; word-wrap: break-word; } -#events tr td { +#netInspector tr td { border-top: 1px solid #ccc; } -#events tr td:first-of-type { +#netInspector tr td:first-of-type { border-left: none; } -#events tr td:last-of-type { +#netInspector tr td:last-of-type { border-right: none; } -#events.compactView td { +#netInspector.compactView td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -#events tr td:nth-of-type(1) { +#netInspector tr td:nth-of-type(1) { text-align: right; white-space: nowrap; } -#events tr td:nth-of-type(2) { +#netInspector tr td:nth-of-type(2) { text-align: center; 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'; font: 1em FontAwesome; } -#events tr.tab:not(.canMtx) { +#netInspector tr.tab:not(.canMtx) { opacity: 0.3; } -#events tr.tab:not(.canMtx):hover { +#netInspector tr.tab:not(.canMtx):hover { 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'; 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; } -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; } -#events tr.canLookup td:nth-of-type(3) { +#netInspector tr.canLookup td:nth-of-type(3) { cursor: zoom-in; } -#events tr.cat_net td:nth-of-type(4), -#events tr.cat_cosmetic td:nth-of-type(4) { +#netInspector tr.cat_net td:nth-of-type(4), +#netInspector tr.cat_cosmetic td:nth-of-type(4) { font: 12px monospace; text-align: center; white-space: nowrap; } -#events tr.cat_net td:nth-of-type(4) { +#netInspector tr.cat_net td:nth-of-type(4) { cursor: pointer; position: relative; } -#events tr.cat_net td:nth-of-type(4):hover { +#netInspector tr.cat_net td:nth-of-type(4):hover { 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; } -#events tr td:nth-of-type(6) b { +#netInspector tr td:nth-of-type(6) b { 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); } -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); } -#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); } -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); } -#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); } -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); } @@ -255,7 +269,7 @@ body.colorBlind #events tr.allowed td:nth-of-type(6) b { top: 0; z-index: 200; } -#events.popupOn #popupContainer { +#netInspector.popupOn #popupContainer { display: block; } #popupContainer > div { diff --git a/src/js/logger-ui-inspector.js b/src/js/logger-ui-inspector.js index 2e25e8a04..bd43fdfa0 100644 --- a/src/js/logger-ui-inspector.js +++ b/src/js/logger-ui-inspector.js @@ -100,7 +100,8 @@ var appendListItem = function(ul, li) { /******************************************************************************/ var renderDOMFull = function(response) { - var ul = inspector.removeChild(domTree); + var domTreeParent = domTree.parentElement; + var ul = domTreeParent.removeChild(domTree); logger.removeAllChildren(domTree); var lvl = 0; @@ -140,7 +141,7 @@ var renderDOMFull = function(response) { } ul.firstElementChild.classList.add('show'); - inspector.appendChild(domTree); + domTreeParent.appendChild(domTree); }; // https://www.youtube.com/watch?v=IDGNA83mxDo @@ -464,7 +465,7 @@ var onClick = function(ev) { inspectedTabId, '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 .commit').classList.toggle('disabled', cantCreate); return; @@ -674,13 +675,7 @@ var toggleOn = function() { uDom.nodeFromSelector('#domInspector .permatoolbar .highlightMode').addEventListener('click', toggleHighlightMode); uDom.nodeFromSelector('#domInspector .permatoolbar .revert').addEventListener('click', revert); uDom.nodeFromSelector('#domInspector .permatoolbar .commit').addEventListener('click', startDialog); - inspector.classList.add('enabled'); 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 .commit').removeEventListener('click', startDialog); inspectedTabId = ''; - inspector.classList.remove('enabled'); }; /******************************************************************************/ diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index 409defe69..01e24d344 100644 --- a/src/js/logger-ui.js +++ b/src/js/logger-ui.js @@ -57,21 +57,15 @@ var tabIdFromClassName = logger.tabIdFromClassName = function(className) { // Adjust top padding of content table, to match that of toolbar height. (function() { - var parent = uDom.nodeFromSelector('body > .permatoolbar'); - var child = parent.firstElementChild; - var size = child.clientHeight + 'px'; - parent.style.setProperty('min-height', size); - - parent = uDom.nodeFromId('events'); - parent.querySelector('table').style.setProperty( - 'margin-top', - parent.querySelector('.permatoolbar').clientHeight + 'px' - ); + var toolbar = uDom.nodeFromSelector('body > .permatoolbar'); + var size = toolbar.clientHeight + 'px'; + uDom('#inspectors').css('top', size); + uDom('.vscrollable').css('padding-top', size); })(); /******************************************************************************/ -var tbody = document.querySelector('#events tbody'); +var tbody = document.querySelector('#netInspector tbody'); var trJunkyard = []; var tdJunkyard = []; var firstVarDataCol = 2; // currently, column 2 (0-based index) @@ -581,7 +575,7 @@ var renderLogEntries = function(response) { if ( yDelta === 0 ) { return; } - var container = uDom.nodeFromId('events'); + var container = uDom.nodeFromId('netInspector'); if ( container.scrollTop !== 0 ) { container.scrollTop += yDelta; } @@ -661,7 +655,7 @@ var truncateLog = function(size) { if ( size === 0 ) { size = 5000; } - var tbody = document.querySelector('#events tbody'); + var tbody = document.querySelector('#netInspector tbody'); size = Math.min(size, 10000); var tr; while ( tbody.childElementCount > size ) { @@ -728,7 +722,7 @@ var pageSelectorChanged = function() { } if ( tabClass !== '' ) { sheet.insertRule( - '#events table tr:not(.' + tabClass + ') { display: none; }', + '#netInspector table tr:not(.' + tabClass + ') { display: none; }', 0 ); } @@ -1505,10 +1499,10 @@ var rowFilterer = (function() { var filterAll = function() { // Special case: no filter if ( filters.length === 0 ) { - uDom('#events tr').removeClass('f'); + uDom('#netInspector tr').removeClass('f'); return; } - var tbody = document.querySelector('#events tbody'); + var tbody = document.querySelector('#netInspector tbody'); var rows = tbody.rows; var i = rows.length; while ( i-- ) { @@ -1532,7 +1526,7 @@ var rowFilterer = (function() { })(); var onFilterButton = function() { - uDom.nodeFromId('events').classList.toggle('f'); + uDom.nodeFromId('netInspector').classList.toggle('f'); }; uDom('#filterButton').on('click', onFilterButton); @@ -1563,7 +1557,7 @@ var toJunkyard = function(trs) { var clearBuffer = function() { var tabId = uDom.nodeFromId('pageSelector').value || null; - var tbody = document.querySelector('#events tbody'); + var tbody = document.querySelector('#netInspector tbody'); var tr = tbody.lastElementChild; var trPrevious; while ( tr !== null ) { @@ -1586,7 +1580,7 @@ var clearBuffer = 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; while ( i-- ) { trJunkyard.push(rows.nodeAt(i)); @@ -1597,7 +1591,13 @@ var cleanBuffer = 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 style = null; var styleTemplate = [ - '#events tr:not(.tab_{{tabId}}) {', + '#netInspector tr:not(.tab_{{tabId}}) {', 'cursor: not-allowed;', 'opacity: 0.2;', '}' @@ -1665,7 +1665,7 @@ var popupManager = (function() { style = uDom.nodeFromId('popupFilterer'); style.textContent = styleTemplate.replace('{{tabId}}', localTabId); - var parent = uDom.nodeFromId('events'); + var parent = uDom.nodeFromId('netInspector'); var rect = parent.getBoundingClientRect(); container.style.setProperty('top', rect.top + 'px'); container.style.setProperty('right', (rect.right - parent.clientWidth) + 'px'); @@ -1673,7 +1673,7 @@ var popupManager = (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(2)').removeEventListener('click', toggleOff); @@ -1720,13 +1720,15 @@ uDom.onLoad(function() { uDom('#pageSelector').on('change', pageSelectorChanged); uDom('#refresh').on('click', reloadTab); + uDom('#showdom').on('click', toggleInspectors); + uDom('#compactViewToggler').on('click', toggleCompactView); uDom('#clean').on('click', cleanBuffer); uDom('#clear').on('click', clearBuffer); uDom('#maxEntries').on('change', onMaxEntriesChanged); - uDom('#events 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('#events').on('click', 'tr.cat_net > td:nth-of-type(4)', netFilteringManager.toggleOn); + uDom('#netInspector table').on('click', 'tr.canMtx > td:nth-of-type(2)', popupManager.toggleOn); + uDom('#netInspector').on('click', 'tr.canLookup > td:nth-of-type(3)', reverseLookupManager.toggleOn); + uDom('#netInspector').on('click', 'tr.cat_net > td:nth-of-type(4)', netFilteringManager.toggleOn); // https://github.com/gorhill/uBlock/issues/404 // Ensure page state is in sync with the state of its various widgets. diff --git a/src/js/scriptlets/dom-inspector.js b/src/js/scriptlets/dom-inspector.js index 054264493..f10ebb80e 100644 --- a/src/js/scriptlets/dom-inspector.js +++ b/src/js/scriptlets/dom-inspector.js @@ -1001,7 +1001,7 @@ pickerRoot.onload = function() { style.textContent = [ 'body {', 'background-color: transparent;', - 'cursor: crosshair;', + 'cursor: not-allowed;', '}', 'svg {', 'height: 100%;', diff --git a/src/logger-ui.html b/src/logger-ui.html index adcd8fc26..067e0dbb9 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -20,35 +20,41 @@ -