From 885bc3875b723f2198db73ba0f3643ba5f11798d Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Thu, 7 Dec 2023 20:59:45 -0500 Subject: [PATCH] Vertically expand/collapse in steps in dom inspector Additionally, lock the inspected page to the item under the mouse in the dom inspector. --- src/css/dom-inspector.css | 6 ++++-- src/css/logger-ui-inspector.css | 8 +++++++- src/css/logger-ui.css | 6 +++++- src/js/logger-ui-inspector.js | 30 +++++++++++++++++++++++++++--- src/js/scriptlets/dom-inspector.js | 17 ++++++++++++----- src/logger-ui.html | 1 + 6 files changed, 56 insertions(+), 12 deletions(-) diff --git a/src/css/dom-inspector.css b/src/css/dom-inspector.css index 96f1d40dea4d8..71ba34826852b 100644 --- a/src/css/dom-inspector.css +++ b/src/css/dom-inspector.css @@ -19,6 +19,9 @@ html#ublock0-inspector, top: 0; width: 100%; } +#ublock0-inspector svg > path { + stroke-width: 1px; + } #ublock0-inspector svg > path:nth-of-type(1) { fill: rgba(255,0,0,0.2); stroke: #F00; @@ -33,6 +36,5 @@ html#ublock0-inspector, } #ublock0-inspector svg > path:nth-of-type(4) { fill: rgba(0,0,255,0.1); - stroke: #FFF; - stroke-width: 0.5px; + stroke: #00F; } diff --git a/src/css/logger-ui-inspector.css b/src/css/logger-ui-inspector.css index 33bde295b13a6..975d90bf988d4 100644 --- a/src/css/logger-ui-inspector.css +++ b/src/css/logger-ui-inspector.css @@ -7,6 +7,12 @@ #domInspector .permatoolbar .highlightMode.invert { transform: rotate(180deg); } +#domInspector button.vExpandToggler > .fa-icon { + transform: scaleY(-1) + } +#domInspector button.vCompactToggler > .fa-icon { + transform: scaleY(1) + } #domInspector .vscrollable { overflow-x: auto; } @@ -84,7 +90,7 @@ display: none; } -#domInspector:not(.vExpanded) li:not(.hasCosmeticHide):not(.isCosmeticHide) { +#domInspector li:not(.hasCosmeticHide):not(.isCosmeticHide):not(.show) { display: none; } #domInspector #domTree > li { diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index c590358be0c09..ea3098d930225 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -8,7 +8,8 @@ body { textarea { box-sizing: border-box; direction: ltr; - resize: none; + min-height: 6rem; + resize: vertical; width: 100%; } .permatoolbar { @@ -78,6 +79,9 @@ textarea { overflow-y: auto; } +#domInspector button.vExpandToggler > .fa-icon { + transform: scaleY(1) + } .inspector:not(.vExpanded) button.vCompactToggler > .fa-icon { transform: scaleY(-1) } diff --git a/src/js/logger-ui-inspector.js b/src/js/logger-ui-inspector.js index d8808ce94d001..092baf8882bcc 100644 --- a/src/js/logger-ui-inspector.js +++ b/src/js/logger-ui-inspector.js @@ -613,11 +613,33 @@ const onTabIdChanged = ( ) => { /******************************************************************************/ +const toggleVExpandView = ( ) => { + const branches = qsa$('#domTree li.branch.show > ul > li.branch:not(.show)'); + for ( const branch of branches ) { + dom.cl.add(branch, 'show'); + } +}; + const toggleVCompactView = ( ) => { - const state = dom.cl.toggle(inspector, 'vExpanded'); - const branches = qsa$('#domInspector li.branch'); + const branches = qsa$('#domTree li.branch.show > ul > li:not(.show)'); + const tohideSet = new Set(); for ( const branch of branches ) { - dom.cl.toggle(branch, 'show', state); + const node = branch.closest('li.branch.show'); + if ( node.id === 'n1' ) { continue; } + tohideSet.add(node); + } + const tohideList = Array.from(tohideSet); + let i = tohideList.length - 1; + while ( i > 0 ) { + if ( tohideList[i-1].contains(tohideList[i]) ) { + tohideList.splice(i-1, 1); + } else if ( tohideList[i].contains(tohideList[i-1]) ) { + tohideList.splice(i, 1); + } + i -= 1; + } + for ( const node of tohideList ) { + dom.cl.remove(node, 'show'); } }; @@ -642,6 +664,7 @@ const toggleOn = ( ) => { document.addEventListener('tabIdChanged', onTabIdChanged); domTree.addEventListener('click', onClicked, true); domTree.addEventListener('mouseover', onMouseOver, true); + dom.on('#domInspector .vExpandToggler', 'click', toggleVExpandView); dom.on('#domInspector .vCompactToggler', 'click', toggleVCompactView); dom.on('#domInspector .hCompactToggler', 'click', toggleHCompactView); dom.on('#domInspector .permatoolbar .revert', 'click', revert); @@ -660,6 +683,7 @@ const toggleOff = ( ) => { document.removeEventListener('tabIdChanged', onTabIdChanged); domTree.removeEventListener('click', onClicked, true); domTree.removeEventListener('mouseover', onMouseOver, true); + dom.off('#domInspector .vExpandToggler', 'click', toggleVExpandView); dom.off('#domInspector .vCompactToggler', 'click', toggleVCompactView); dom.off('#domInspector .hCompactToggler', 'click', toggleHCompactView); dom.off('#domInspector .permatoolbar .revert', 'click', revert); diff --git a/src/js/scriptlets/dom-inspector.js b/src/js/scriptlets/dom-inspector.js index 20882016bf4ba..469a7a4e498f3 100644 --- a/src/js/scriptlets/dom-inspector.js +++ b/src/js/scriptlets/dom-inspector.js @@ -151,7 +151,7 @@ const domLayout = (( ) => { layout.push(domNode); } // children - if ( node.firstElementChild !== null ) { + if ( domNode !== null && node.firstElementChild !== null ) { stack.push(node); lvl += 1; node = node.firstElementChild; @@ -704,6 +704,13 @@ const onMessage = request => { case 'highlightOne': blueNodes = selectNodes(request.selector, request.nid); + if ( blueNodes.length !== 0 ) { + blueNodes[0].scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'nearest', + }); + } highlightElements(); break; @@ -728,8 +735,8 @@ const onMessage = request => { if ( nodes.length !== 0 ) { nodes[0].scrollIntoView({ behavior: 'smooth', - block: 'center', - inline: 'center', + block: 'nearest', + inline: 'nearest', }); } toggleExceptions(nodesFromFilter(request.filter), request.target); @@ -741,8 +748,8 @@ const onMessage = request => { if ( nodes.length !== 0 ) { nodes[0].scrollIntoView({ behavior: 'smooth', - block: 'center', - inline: 'center', + block: 'nearest', + inline: 'nearest', }); } toggleFilter(nodes, request.target); diff --git a/src/logger-ui.html b/src/logger-ui.html index 389856d85c625..14850e5dd9e01 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -34,6 +34,7 @@
+