Skip to content

Commit

Permalink
Vertically expand/collapse in steps in dom inspector
Browse files Browse the repository at this point in the history
Additionally, lock the inspected page to the item under
the mouse in the dom inspector.
  • Loading branch information
gorhill committed Dec 8, 2023
1 parent 77b33c4 commit 885bc38
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 12 deletions.
6 changes: 4 additions & 2 deletions src/css/dom-inspector.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
8 changes: 7 additions & 1 deletion src/css/logger-ui-inspector.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down
6 changes: 5 additions & 1 deletion src/css/logger-ui.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ body {
textarea {
box-sizing: border-box;
direction: ltr;
resize: none;
min-height: 6rem;
resize: vertical;
width: 100%;
}
.permatoolbar {
Expand Down Expand Up @@ -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)
}
Expand Down
30 changes: 27 additions & 3 deletions src/js/logger-ui-inspector.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
};

Expand All @@ -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);
Expand All @@ -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);
Expand Down
17 changes: 12 additions & 5 deletions src/js/scriptlets/dom-inspector.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand All @@ -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);
Expand All @@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/logger-ui.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
<div id="domInspector" class="inspector hCompact">
<div class="permatoolbar">
<div>
<button class="iconified notext vExpandToggler"><span class="fa-icon">double-angle-up</span><span class="hover"></span></button>
<button class="iconified notext vCompactToggler"><span class="fa-icon">double-angle-up</span><span class="hover"></span></button>
<button class="iconified notext hCompactToggler"><span class="fa-icon">double-angle-left</span><span class="hover"></span></button>
<button class="iconified notext revert disabled"><span class="fa-icon">eraser</span><span class="hover"></span></button>
Expand Down

0 comments on commit 885bc38

Please sign in to comment.