dom inspector: this fixes non-sticky toolbars

2015-07-01 09:19:13 -04:00 · 2015-07-01 09:19:13 -04:00 · a0607702b1
parent bd9a63a73c
commit a0607702b1
6 changed files with 143 additions and 134 deletions
--- 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);
    }
--- 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 {
--- 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');
 };

 /******************************************************************************/
--- 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.
--- 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%;',
--- 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>