From bd402b4b6046847c46ff22e41a99773a6e8d910a Mon Sep 17 00:00:00 2001
From: sideshowbarker <mike@w3.org>
Date: Sun, 17 Nov 2024 16:08:59 +0900
Subject: [PATCH 1/2] LibWebView: Drop angle brackets from elements/comments in
 DOM inspector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This change drops the angle brackets around elements in the devtools DOM
inspector, and also drops the similar delimiters around comments

It also adds a “title” element tooltip to comments — so that when you
hover over some comment text, the UI shows “comment” (to make it more
obvious that what you’re reading is comment, and not a text node).
---
 Libraries/LibWebView/InspectorClient.cpp | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/Libraries/LibWebView/InspectorClient.cpp b/Libraries/LibWebView/InspectorClient.cpp
index 52d463695b4..b88b67d9f70 100644
--- a/Libraries/LibWebView/InspectorClient.cpp
+++ b/Libraries/LibWebView/InspectorClient.cpp
@@ -610,9 +610,7 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
             comment = escape_html_entities(comment);
 
             builder.appendff("<span class=\"hoverable comment\" {}>", data_attributes.string_view());
-            builder.append("<span>&lt;!--</span>"sv);
-            builder.appendff("<span data-node-type=\"comment\" class=\"editable\">{}</span>", comment);
-            builder.append("<span>--&gt;</span>"sv);
+            builder.appendff("<span data-node-type=\"comment\" class=\"editable\" title=\"comment\">{}</span>", comment);
             builder.append("</span>"sv);
             return;
         }
@@ -639,7 +637,6 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
         auto tag = name.to_lowercase();
 
         builder.appendff("<span class=\"hoverable\" {}>", data_attributes.string_view());
-        builder.append("<span>&lt;</span>"sv);
         builder.appendff("<span data-node-type=\"tag\" data-tag=\"{0}\" class=\"editable tag\">{0}</span>", tag);
 
         if (auto attributes = node.get_object("attributes"sv); attributes.has_value()) {
@@ -658,7 +655,6 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
             });
         }
 
-        builder.append("<span>&gt;</span>"sv);
         builder.append("</span>"sv);
     });
 

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 2/2] 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);
     }