beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 07:30:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Compare commits

base: beenull:6b95ddc38440523d80a053c1677120f8c41b0fd3
Branches Tags
beenull:master
...
compare: beenull:aaff1a4b6c729b1edb40114fc9490f7651c8cbec
Branches Tags
beenull:master

3 commits
6b95ddc384 ... aaff1a4b6c

Author SHA1 Message Date
sideshowbarker
aaff1a4b6c
Merge 51fe39eca6 into d6bcd3fb0b 2024-11-20 20:01:46 -05:00
sideshowbarker
51fe39eca6
LibWebView: Restyle element nodes as container in the DOM inspector 
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.
 2024-11-17 16:20:25 +09:00
sideshowbarker
bd402b4b60
LibWebView: Drop angle brackets from elements/comments in DOM inspector 
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).
 2024-11-17 16:17:09 +09:00
2 changed files with 21 additions and 7 deletions
Show stats Expand all files Collapse all files

6
Libraries/LibWebView/InspectorClient.cpp
View file

@ -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);
});

22
Libraries/LibWebView/SourceHighlighter.h
View file

@ -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);
}