LibWebView: Add keyboard navigation to the Inspector

Author: https://github.com/circl-lastname
Commit: e59048e90f
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/628
Reviewed-by: https://github.com/ADKaster ✅
Reviewed-by: https://github.com/AtkinsSJ

Base/res/ladybird/inspector.js

@@ -7,6 +7,8 @@ let selectedBottomTabButton = null;
 let selectedDOMNode = null;
 let pendingEditDOMNode = null;
 
+let visibleDOMNodes = [];
+
 let consoleGroupStack = [];
 let consoleGroupNextID = 0;
 
@@ -123,6 +125,16 @@ inspector.loadDOMTree = tree => {
             event.preventDefault();
         });
     }
+
+    domNodes = domTree.querySelectorAll("details");
+
+    for (let domNode of domNodes) {
+        domNode.addEventListener("toggle", event => {
+            updateVisibleDOMNodes();
+        });
+    }
+
+    updateVisibleDOMNodes();
 };
 
 inspector.loadAccessibilityTree = tree => {
@@ -343,6 +355,30 @@ const addAttributeToDOMNode = domNode => {
     domNode.parentNode.insertBefore(container, domNode.parentNode.lastChild);
 };
 
+const updateVisibleDOMNodes = () => {
+    let domTree = document.getElementById("dom-tree");
+
+    visibleDOMNodes = [];
+
+    function recurseDOMNodes(node) {
+        for (let child of node.children) {
+            if (child.classList.contains("hoverable")) {
+                visibleDOMNodes.push(child);
+            }
+
+            if (child.tagName === "DIV") {
+                if (node.open) {
+                    recurseDOMNodes(child);
+                }
+            } else {
+                recurseDOMNodes(child);
+            }
+        }
+    }
+
+    recurseDOMNodes(domTree);
+};
+
 const requestContextMenu = (clientX, clientY, domNode) => {
     pendingEditDOMNode = null;
 
@@ -516,5 +552,37 @@ document.addEventListener("DOMContentLoaded", () => {
         event.preventDefault();
     });
 
+    document.addEventListener("keydown", event => {
+        const UP_ARROW_KEYCODE = 38;
+        const DOWN_ARROW_KEYCODE = 40;
+        const RETURN_KEYCODE = 13;
+        const SPACE_KEYCODE = 32;
+
+        if (document.activeElement.tagName !== "INPUT") {
+            if (event.keyCode == UP_ARROW_KEYCODE || event.keyCode == DOWN_ARROW_KEYCODE) {
+                let selectedIndex = visibleDOMNodes.indexOf(selectedDOMNode);
+                if (selectedIndex < 0) {
+                    return;
+                }
+
+                let newIndex;
+
+                if (event.keyCode == UP_ARROW_KEYCODE) {
+                    newIndex = selectedIndex - 1;
+                } else if (event.keyCode == DOWN_ARROW_KEYCODE) {
+                    newIndex = selectedIndex + 1;
+                }
+
+                if (visibleDOMNodes[newIndex]) {
+                    inspectDOMNode(visibleDOMNodes[newIndex]);
+                }
+            } else if (event.keyCode == RETURN_KEYCODE || event.keyCode == SPACE_KEYCODE) {
+                if (selectedDOMNode.parentNode.tagName === "SUMMARY") {
+                    selectedDOMNode.parentNode.click();
+                }
+            }
+        }
+    });
+
     inspector.inspectorLoaded();
 });