From 9d82e8112493575f78f66b1a0dc65ae0e791e70b Mon Sep 17 00:00:00 2001
From: Chase Willden <chase.willden@gmail.com>
Date: Thu, 26 Sep 2024 19:35:58 -0600
Subject: [PATCH] Base: Navigate DOM tree with arrows

---
 Base/res/ladybird/inspector.js | 51 ++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/Base/res/ladybird/inspector.js b/Base/res/ladybird/inspector.js
index ee080589a1a..14482b328e8 100644
--- a/Base/res/ladybird/inspector.js
+++ b/Base/res/ladybird/inspector.js
@@ -767,31 +767,48 @@ document.addEventListener("DOMContentLoaded", () => {
     document.addEventListener("keydown", event => {
         const UP_ARROW_KEYCODE = 38;
         const DOWN_ARROW_KEYCODE = 40;
+        const RIGHT_ARROW_KEYCODE = 39;
+        const LEFT_ARROW_KEYCODE = 37;
         const RETURN_KEYCODE = 13;
         const SPACE_KEYCODE = 32;
 
+        const move = delta => {
+            let selectedIndex = visibleDOMNodes.indexOf(selectedDOMNode);
+            if (selectedIndex < 0) {
+                return;
+            }
+
+            let newIndex = selectedIndex + delta;
+
+            if (visibleDOMNodes[newIndex]) {
+                inspectDOMNode(visibleDOMNodes[newIndex]);
+            }
+        };
+
         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;
-                }
+            const isSummary = selectedDOMNode.parentNode.tagName === "SUMMARY";
+            const isDiv = selectedDOMNode.parentNode.tagName === "DIV";
 
-                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]);
-                }
+            if (event.keyCode == UP_ARROW_KEYCODE) {
+                move(-1);
+            } else if (event.keyCode == DOWN_ARROW_KEYCODE) {
+                move(1);
             } else if (event.keyCode == RETURN_KEYCODE || event.keyCode == SPACE_KEYCODE) {
-                if (selectedDOMNode.parentNode.tagName === "SUMMARY") {
+                if (isSummary) {
                     selectedDOMNode.parentNode.click();
                 }
+            } else if (event.keyCode == RIGHT_ARROW_KEYCODE) {
+                if (isSummary && selectedDOMNode.parentNode.parentNode.open === false) {
+                    selectedDOMNode.parentNode.click();
+                } else if (selectedDOMNode.parentNode.parentNode.open === true && !isDiv) {
+                    move(1);
+                }
+            } else if (event.keyCode == LEFT_ARROW_KEYCODE) {
+                if (isSummary && selectedDOMNode.parentNode.parentNode.open === true) {
+                    selectedDOMNode.parentNode.click();
+                } else if (selectedDOMNode.parentNode.parentNode.open === false || isDiv) {
+                    move(-1);
+                }
             }
         }
     });