From b9902fef362818e28e778614c47ad9028725b063 Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Sat, 2 Dec 2023 10:59:37 -0500
Subject: [PATCH] LibWebView: Add a draggable separator between the two
 Inspector panes

---
 Base/res/html/inspector/inspector.css         | 21 ++++++++++++
 Base/res/html/inspector/inspector.js          | 32 +++++++++++++++++++
 .../Libraries/LibWebView/InspectorClient.cpp  |  3 +-
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/Base/res/html/inspector/inspector.css b/Base/res/html/inspector/inspector.css
index 8520d1aca8..b753072ea9 100644
--- a/Base/res/html/inspector/inspector.css
+++ b/Base/res/html/inspector/inspector.css
@@ -8,12 +8,25 @@ body {
 .split-view {
     width: 100vw;
     height: 100vh;
+
+    overflow: hidden;
 }
 
 .split-view-container {
+    max-height: calc(100% - 40px);
+    min-height: 40px;
+
     overflow: scroll;
 }
 
+.split-view-separator {
+    width: 100%;
+    height: 5px;
+
+    cursor: row-resize;
+    user-select: none;
+}
+
 .tab-controls-container {
     position: absolute;
     width: 100%;
@@ -67,6 +80,10 @@ body {
         background-color: rgb(23, 23, 23);
     }
 
+    .split-view-separator {
+        background-color: dimgray;
+    }
+
     .tab-controls-container {
         background-color: rgb(57, 57, 57);
     }
@@ -90,6 +107,10 @@ body {
         background-color: rgb(229, 229, 229);
     }
 
+    .split-view-separator {
+        background-color: lightgray;
+    }
+
     .tab-controls button {
         color: black;
         background-color: white;
diff --git a/Base/res/html/inspector/inspector.js b/Base/res/html/inspector/inspector.js
index 5a8b789c53..3c00040c53 100644
--- a/Base/res/html/inspector/inspector.js
+++ b/Base/res/html/inspector/inspector.js
@@ -12,6 +12,35 @@ let consoleGroupNextID = 0;
 let consoleHistory = [];
 let consoleHistoryIndex = 0;
 
+const beginSplitViewDrag = () => {
+    let inspectorTop = document.getElementById("inspector-top");
+    let inspectorBottom = document.getElementById("inspector-bottom");
+    let inspectorSeparator = document.getElementById("inspector-separator");
+
+    const windowHeight = window.innerHeight;
+    const separatorHeight = inspectorSeparator.clientHeight;
+
+    const updateSplitView = event => {
+        let position = Math.min(event.clientY, windowHeight - separatorHeight);
+        position = Math.max(position, 0);
+
+        inspectorTop.style.height = `${position}px`;
+        inspectorBottom.style.height = `${windowHeight - position - separatorHeight}px`;
+
+        event.preventDefault();
+    };
+
+    const endSplitViewDrag = () => {
+        document.removeEventListener("mousemove", updateSplitView);
+        document.removeEventListener("mouseup", endSplitViewDrag);
+        document.body.style.cursor = "";
+    };
+
+    document.addEventListener("mousemove", updateSplitView);
+    document.addEventListener("mouseup", endSplitViewDrag);
+    document.body.style.cursor = "row-resize";
+};
+
 const selectTab = (tabButton, tabID, selectedTab, selectedTabButton) => {
     let tab = document.getElementById(tabID);
 
@@ -252,6 +281,9 @@ inspector.endConsoleGroup = () => {
 };
 
 document.addEventListener("DOMContentLoaded", () => {
+    let inspectorSeparator = document.getElementById("inspector-separator");
+    inspectorSeparator.addEventListener("mousedown", beginSplitViewDrag);
+
     let consoleInput = document.getElementById("console-input");
     consoleInput.focus();
 
diff --git a/Userland/Libraries/LibWebView/InspectorClient.cpp b/Userland/Libraries/LibWebView/InspectorClient.cpp
index f1baf300a2..e2b0ed82e1 100644
--- a/Userland/Libraries/LibWebView/InspectorClient.cpp
+++ b/Userland/Libraries/LibWebView/InspectorClient.cpp
@@ -210,7 +210,8 @@ void InspectorClient::load_inspector()
             <div id="dom-tree" class="tab-content html"></div>
             <div id="accessibility-tree" class="tab-content"></div>
         </div>
-        <div id="inspector-bottom" class="split-view-container" style="height: 40%">
+        <div id="inspector-separator" class="split-view-separator"></div>
+        <div id="inspector-bottom" class="split-view-container" style="height: calc(40% - 5px)">
             <div class="tab-controls-container">
                 <div class="tab-controls">
                     <button id="console-button" onclick="selectBottomTab(this, 'console')">Console</button>