From d2c775b0ca202aa9be81ab21b0c71a8f8ac005e3 Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Fri, 2 Aug 2024 10:34:41 -0400
Subject: [PATCH] LibWebView: Improve scrolling of Inspector content containers

Currently, the feel of scrolling containers in the Inspector is a bit
awkward. We make the entire split-view container scrollable, then we
absolutely position the tab control buttons to force them to not scroll.
The result is that the scroll bar is painted over the tab controls, and
the tab content that we actually want to scroll has to scroll under the
tab controls. This never looked quite right.

It was basically:

    <div tab-container> <!-- Scrollable -->
        <div tab-controls /> <!-- Pinned to not be scrollable -->
        <div tab-content /> <!-- The part we actually want to scroll -->
    </div>

This patch moves the "scrollability" to just the tab content. We then
don't need to go out of our way to ensure only the content is actually
scrollable.

So we now have:

    <div tab-container> <!-- Not scrollable -->
        <div tab-controls /> <!-- Not pinned, uses normal layout -->
        <div tab-content /> <!-- Scrollable -->
    </div>
---
 Base/res/ladybird/inspector.css | 16 ++++++++++------
 Base/res/ladybird/inspector.js  |  9 ---------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/Base/res/ladybird/inspector.css b/Base/res/ladybird/inspector.css
index d86179d031..23a5c94d07 100644
--- a/Base/res/ladybird/inspector.css
+++ b/Base/res/ladybird/inspector.css
@@ -15,8 +15,6 @@ body {
 .split-view-container {
     max-height: calc(100% - 40px);
     min-height: 40px;
-
-    overflow: scroll;
 }
 
 .split-view-separator {
@@ -28,10 +26,11 @@ body {
 
     cursor: row-resize;
     user-select: none;
+
+    z-index: 100;
 }
 
 .tab-controls-container {
-    position: absolute;
     width: 100%;
 
     padding: 4px;
@@ -69,13 +68,14 @@ body {
 }
 
 .tab-content {
-    height: 100%;
+    height: calc(100% - 40px);
 
     display: none;
     border-radius: 0.5rem;
 
-    margin-top: 30px;
     padding: 8px 0px 0px 4px;
+
+    overflow: scroll;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -175,6 +175,10 @@ details > :not(:first-child) {
     }
 }
 
+#console {
+    overflow: unset;
+}
+
 .console {
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     width: 100%;
@@ -182,7 +186,7 @@ details > :not(:first-child) {
 }
 
 .console-output {
-    height: calc(100% - 75px);
+    height: calc(100% - 32px);
     overflow: scroll;
 }
 
diff --git a/Base/res/ladybird/inspector.js b/Base/res/ladybird/inspector.js
index f76e0611ee..7bcc320b8c 100644
--- a/Base/res/ladybird/inspector.js
+++ b/Base/res/ladybird/inspector.js
@@ -73,15 +73,6 @@ const selectTopTab = (tabButton, tabID) => {
 const selectBottomTab = (tabButton, tabID) => {
     selectedBottomTab = selectTab(tabButton, tabID, selectedBottomTab, selectedBottomTabButton);
     selectedBottomTabButton = tabButton;
-
-    let inspectorBottom = document.getElementById("inspector-bottom");
-    inspectorBottom.scrollTo(0, 0);
-
-    if (tabID === "console") {
-        inspectorBottom.style.overflow = "hidden";
-    } else {
-        inspectorBottom.style.overflow = "scroll";
-    }
 };
 
 let initialTopTabButton = document.getElementById("dom-tree-button");