From a0607702b1f3b905323c961d77002afee779cb86 Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Wed, 1 Jul 2015 09:19:13 -0400
Subject: [PATCH] dom inspector: this fixes non-sticky toolbars

---
 src/css/logger-ui-inspector.css    |   9 +-
 src/css/logger-ui.css              | 142 ++++++++++++++++-------------
 src/js/logger-ui-inspector.js      |  14 +--
 src/js/logger-ui.js                |  54 +++++------
 src/js/scriptlets/dom-inspector.js |   2 +-
 src/logger-ui.html                 |  56 +++++++-----
 6 files changed, 143 insertions(+), 134 deletions(-)

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 @@
     </div>
 </div>
 
-<div id="domInspector">
-    <div class="permatoolbar">
-        <div>
-            <span class="button fa highlightMode" style="display: none">&#xf042;</span>
-            <span class="button fa revert disabled">&#xf12d;</span>
-            <span class="button fa commit disabled">&#xf0c7;</span>
+<div id="inspectors">
+    <div id="domInspector" class="inspector">
+        <div class="permatoolbar">
+            <div>
+                <span class="button fa highlightMode" style="display: none">&#xf042;</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>
-    <ul id="domTree"></ul>
-</div>
 
-<div id="events" class="compactView f">
-    <div class="permatoolbar">
-        <div>
-            <span id="compactViewToggler" class="button fa"></span>
-            <span id="clean" class="button fa disabled">&#xf00d;</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">
-            <input id="maxEntries" type="text" size="5" title="logMaxEntriesTip">
+    <div id="netInspector" class="inspector compactView f">
+        <div class="permatoolbar">
+            <div>
+                <span id="compactViewToggler" class="button fa"></span>
+                <span id="clean" class="button fa disabled">&#xf00d;</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">
+                <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>
-    <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>