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

LibWebView: Restyle element nodes as container in the DOM inspector

Browse source 
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.
This commit is contained in:
sideshowbarker 2024-11-17 16:11:39 +09:00
parent bd402b4b60
commit 51fe39eca6
No known key found for this signature in database
1 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
Libraries/LibWebView/SourceHighlighter.h
View file

@ -87,7 +87,9 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
} }
:root { :root {
--comment-color: lightgreen; --comment-color: dimgrey;
--comment-hover-color: lightgreen;
--details-background-color: #333;
--keyword-color: orangered; --keyword-color: orangered;
--name-color: orange; --name-color: orange;
--value-color: deepskyblue; --value-color: deepskyblue;
@ -100,7 +102,9 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--comment-color: green; --comment-color: silver;
--comment-hover-color: green;
--details-background-color: whitesmoke;
--keyword-color: red; --keyword-color: red;
--name-color: darkorange; --name-color: darkorange;
--value-color: blue; --value-color: blue;
@ -133,6 +137,16 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
color: var(--line-number-color); 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 { .tag {
font-weight: 600; font-weight: 600;
color: var(--keyword-color); color: var(--keyword-color);
@ -140,6 +154,10 @@ constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
.comment { .comment {
color: var(--comment-color); color: var(--comment-color);
} }
.comment:hover {
color: var(--comment-hover-color);
background-color: inherit !important;
}
.attribute-name { .attribute-name {
color: var(--name-color); color: var(--name-color);
} }