From 65a9eae1423e0913439570ea8ea72370a4100819 Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Mon, 4 Dec 2023 07:28:24 -0500
Subject: [PATCH] LibWebView: Draw some knurling on the draggable Inspector
 separator

---
 Base/res/html/inspector/inspector.css         | 19 +++++++++++++++----
 .../Libraries/LibWebView/InspectorClient.cpp  |  8 +++++++-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/Base/res/html/inspector/inspector.css b/Base/res/html/inspector/inspector.css
index 65757f9805..40757992f5 100644
--- a/Base/res/html/inspector/inspector.css
+++ b/Base/res/html/inspector/inspector.css
@@ -23,6 +23,9 @@ body {
     width: 100%;
     height: 5px;
 
+    display: flex;
+    justify-content: center;
+
     cursor: row-resize;
     user-select: none;
 }
@@ -84,6 +87,10 @@ body {
         background-color: dimgray;
     }
 
+    .split-view-separator circle {
+        fill: rgb(57, 57, 57);
+    }
+
     .tab-controls-container {
         background-color: rgb(57, 57, 57);
     }
@@ -103,14 +110,18 @@ body {
 }
 
 @media (prefers-color-scheme: light) {
-    .tab-controls-container {
-        background-color: rgb(229, 229, 229);
-    }
-
     .split-view-separator {
         background-color: lightgray;
     }
 
+    .split-view-separator circle {
+        fill: white;
+    }
+
+    .tab-controls-container {
+        background-color: rgb(229, 229, 229);
+    }
+
     .tab-controls button {
         color: black;
         background-color: white;
diff --git a/Userland/Libraries/LibWebView/InspectorClient.cpp b/Userland/Libraries/LibWebView/InspectorClient.cpp
index 6cd5c38265..525782f025 100644
--- a/Userland/Libraries/LibWebView/InspectorClient.cpp
+++ b/Userland/Libraries/LibWebView/InspectorClient.cpp
@@ -230,7 +230,13 @@ 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-separator" class="split-view-separator"></div>
+        <div id="inspector-separator" class="split-view-separator">
+            <svg viewBox="0 0 16 5" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="2" cy="2.5" r="2" />
+                <circle cx="8" cy="2.5" r="2" />
+                <circle cx="14" cy="2.5" r="2" />
+            </svg>
+        </div>
         <div id="inspector-bottom" class="split-view-container" style="height: calc(40% - 5px)">
             <div class="tab-controls-container">
                 <div class="tab-controls">