LibWebView: Add a draggable separator between the two Inspector panes

Author: https://github.com/trflynn89
Commit: https://github.com/SerenityOS/serenity/commit/b9902fef36
Pull-request: https://github.com/SerenityOS/serenity/pull/22136

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;

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();
 

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>