From 51fe39eca622c3bf1a421253896cff455e2533ca Mon Sep 17 00:00:00 2001
From: sideshowbarker <mike@w3.org>
Date: Sun, 17 Nov 2024 16:11:39 +0900
Subject: [PATCH] LibWebView: Restyle element nodes as container in the DOM
 inspector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This restyles the tree view in the DOM inspector to more clearly
represent elements as (expandable) containers/boxes.

Additionally, it changes the text color of comments to make them less
obtrusive — essentially, to intentionally make them fade into to
background more — but also adds some styling so that when you hover over
a comment, the text color of the comment changes, to bring it out of the
background and into the foreground more, and make it more readable.
---
 Libraries/LibWebView/SourceHighlighter.h | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/Libraries/LibWebView/SourceHighlighter.h b/Libraries/LibWebView/SourceHighlighter.h
index 8b938075e1b..f564424d373 100644
--- a/Libraries/LibWebView/SourceHighlighter.h
+++ b/Libraries/LibWebView/SourceHighlighter.h
@@ -87,7 +87,9 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
         }
 
         :root {
-            --comment-color: lightgreen;
+            --comment-color: dimgrey;
+            --comment-hover-color: lightgreen;
+            --details-background-color: #333;
             --keyword-color: orangered;
             --name-color: orange;
             --value-color: deepskyblue;
@@ -100,7 +102,9 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
 
     @media (prefers-color-scheme: light) {
         :root {
-            --comment-color: green;
+            --comment-color: silver;
+            --comment-hover-color: green;
+            --details-background-color: whitesmoke;
             --keyword-color: red;
             --name-color: darkorange;
             --value-color: blue;
@@ -133,6 +137,16 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
         color: var(--line-number-color);
     }
 
+    details, div {
+        margin-top: 4px;
+        margin-bottom: 4px;
+
+    details {
+        border: 1px solid #777;
+        border-radius: 6px;
+        padding: 2px 3px 2px 3px !important;
+        background-color: var(--details-background-color);
+    }
     .tag {
         font-weight: 600;
         color: var(--keyword-color);
@@ -140,6 +154,10 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
     .comment {
         color: var(--comment-color);
     }
+    .comment:hover {
+        color: var(--comment-hover-color);
+        background-color: inherit !important;
+    }
     .attribute-name {
         color: var(--name-color);
     }