RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 15:17:36 +00:00
Code Issues Activity Actions

LibWebView: Create a method to syntax-highlight page source with HTML

Browse source 
This tokenizes a page's source to produce HTML with syntax highlighting.
The first implementation here is rather simple; we do not yet implement
code folding, line numbers, etc.

The goal is for this to be used as the View Source implementation for
all Ladybird chromes.
This commit is contained in:
Timothy Flynn 2023-08-28 14:47:29 -04:00 • committed by Tim Flynn
parent fea440055a
commit 1e1c3e5a34
4 changed files with 157 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Meta/Lagom/CMakeLists.txt
View file

@ -431,10 +431,11 @@ if (BUILD_LAGOM)
# WebView # WebView
list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/AccessibilityTreeModel.cpp") list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/AccessibilityTreeModel.cpp")
list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/DOMTreeModel.cpp") list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/DOMTreeModel.cpp")
list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/RequestServerAdapter.cpp")
list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/SourceHighlighter.cpp")
list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/StylePropertiesModel.cpp") list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/StylePropertiesModel.cpp")
list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/ViewImplementation.cpp") list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/ViewImplementation.cpp")
list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/WebContentClient.cpp") list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/WebContentClient.cpp")
list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/RequestServerAdapter.cpp")
list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/WebSocketClientAdapter.cpp") list(APPEND LIBWEBVIEW_SOURCES "../../Userland/Libraries/LibWebView/WebSocketClientAdapter.cpp")
compile_ipc(${SERENITY_PROJECT_ROOT}/Userland/Services/WebContent/WebContentServer.ipc WebContent/WebContentServerEndpoint.h) compile_ipc(${SERENITY_PROJECT_ROOT}/Userland/Services/WebContent/WebContentServer.ipc WebContent/WebContentServerEndpoint.h)

1
Userland/Libraries/LibWebView/CMakeLists.txt
View file

@ -4,6 +4,7 @@ set(SOURCES
DOMTreeModel.cpp DOMTreeModel.cpp
OutOfProcessWebView.cpp OutOfProcessWebView.cpp
RequestServerAdapter.cpp RequestServerAdapter.cpp
SourceHighlighter.cpp
StylePropertiesModel.cpp StylePropertiesModel.cpp
ViewImplementation.cpp ViewImplementation.cpp
WebContentClient.cpp WebContentClient.cpp

138
Userland/Libraries/LibWebView/SourceHighlighter.cpp Normal file
View file

@ -0,0 +1,138 @@
/*
* Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <AK/StringBuilder.h>
#include <AK/URL.h>
#include <LibWeb/HTML/Parser/HTMLTokenizer.h>
#include <LibWebView/SourceHighlighter.h>
namespace WebView {
String highlight_source(URL const& url, StringView source)
{
Web::HTML::HTMLTokenizer tokenizer { source, "utf-8"sv };
StringBuilder builder;
builder.append(R"~~~(
<!DOCTYPE html>
<html>
<head>
<meta name="color-scheme" content="dark light">)~~~"sv);
builder.appendff("<title>View Source - {}</title>", url);
builder.append(R"~~~(
<style type="text/css">
html {
font-size: 10pt;
}
@media (prefers-color-scheme: dark) {
/* FIXME: We should be able to remove the HTML style when "color-scheme" is supported */
html {
background-color: rgb(30, 30, 30);
color: white;
}
.comment {
color: lightgreen;
}
.tag {
color: orangered;
}
.attribute-name {
color: orange;
}
.attribute-value {
color: deepskyblue;
}
}
@media (prefers-color-scheme: light) {
.comment {
color: green;
}
.tag {
color: red;
}
.attribute-name {
color: darkorange;
}
.attribute-value {
color: blue;
}
}
</style>
</head>
<body>
<pre>
)~~~"sv);
size_t previous_position = 0;
auto append_source = [&](auto end_position, Optional<StringView> const& class_name = {}) {
if (end_position <= previous_position)
return;
auto segment = source.substring_view(previous_position, end_position - previous_position);
if (class_name.has_value())
builder.appendff("<span class=\"{}\">"sv, *class_name);
for (auto code_point : Utf8View { segment }) {
if (code_point == '&')
builder.append("&amp;"sv);
else if (code_point == 0xA0)
builder.append("&nbsp;"sv);
else if (code_point == '<')
builder.append("&lt;"sv);
else if (code_point == '>')
builder.append("&gt;"sv);
else
builder.append_code_point(code_point);
}
if (class_name.has_value())
builder.append("</span>"sv);
previous_position = end_position;
};
for (auto token = tokenizer.next_token(); token.has_value(); token = tokenizer.next_token()) {
if (token->is_comment()) {
append_source(token->start_position().byte_offset);
append_source(token->end_position().byte_offset, "comment"sv);
} else if (token->is_start_tag() || token->is_end_tag()) {
auto tag_name_start = token->start_position().byte_offset;
append_source(tag_name_start);
append_source(tag_name_start + token->tag_name().length(), "tag"sv);
token->for_each_attribute([&](auto const& attribute) {
append_source(attribute.name_start_position.byte_offset);
append_source(attribute.name_end_position.byte_offset, "attribute-name"sv);
append_source(attribute.value_start_position.byte_offset);
append_source(attribute.value_end_position.byte_offset, "attribute-value"sv);
return IterationDecision::Continue;
});
append_source(token->end_position().byte_offset);
} else {
append_source(token->end_position().byte_offset);
}
}
builder.append(R"~~~(
</pre>
</body>
</html>
)~~~"sv);
return MUST(builder.to_string());
}
}

16
Userland/Libraries/LibWebView/SourceHighlighter.h Normal file
View file

@ -0,0 +1,16 @@
/*
* Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <AK/String.h>
#include <AK/StringView.h>
namespace WebView {
String highlight_source(URL const&, StringView);
}