Vertically expand/collapse in steps in dom inspector

Additionally, lock the inspected page to the item under the mouse in the dom inspector.
gorhill · Dec 8, 2023 · 885bc38 · 885bc38
1 parent 77b33c4
commit 885bc38
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>