LibWebView+UI: Highlight CSS in the style sheet inspector

(cherry picked from commit f0dd0c51073823ad2e30041896030a2831419786)
SerenityOS · Nov 16, 2024 · 6d55c5c · 6d55c5c
1 parent b11106f
commit 6d55c5c
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 15 deletions.
diff --git a/Ladybird/AppKit/UI/LadybirdWebView.mm b/Ladybird/AppKit/UI/LadybirdWebView.mm
@@ -1068,7 +1068,7 @@ - (void)setWebViewCallbacks
         if (self == nil) {
             return;
         }
-        auto html = WebView::highlight_source(url, source);
+        auto html = WebView::highlight_source(MUST(url.to_string()), source, Syntax::Language::HTML, WebView::HighlightOutputMode::FullDocument);
 
         [self.observer onCreateNewTab:html
                                   url:url

diff --git a/Ladybird/Qt/Tab.cpp b/Ladybird/Qt/Tab.cpp
@@ -322,7 +322,7 @@ Tab::Tab(BrowserWindow* window, WebContentOptions const& web_content_options, St
     QObject::connect(focus_location_editor_action, &QAction::triggered, this, &Tab::focus_location_editor);
 
     view().on_received_source = [this](auto const& url, auto const& source) {
-        auto html = WebView::highlight_source(url, source);
+        auto html = WebView::highlight_source(MUST(url.to_string()), source, Syntax::Language::HTML, WebView::HighlightOutputMode::FullDocument);
         m_window->new_tab_from_content(html, Web::HTML::ActivateTab::Yes);
     };
 

diff --git a/Userland/Libraries/LibWebView/InspectorClient.cpp b/Userland/Libraries/LibWebView/InspectorClient.cpp
@@ -125,11 +125,10 @@ InspectorClient::InspectorClient(ViewImplementation& content_web_view, ViewImple
     };
 
     m_content_web_view.on_received_style_sheet_source = [this](Web::CSS::StyleSheetIdentifier const& identifier, String const& source) {
-        // TODO: Highlight it
-        auto escaped_source = escape_html_entities(source.bytes()).replace("\t"sv, "    "sv, ReplaceMode::All);
+        auto html = highlight_source(identifier.url.value_or({}), source, Syntax::Language::CSS, HighlightOutputMode::SourceOnly);
         auto script = MUST(String::formatted("inspector.setStyleSheetSource({}, \"{}\");",
             style_sheet_identifier_to_json(identifier),
-            MUST(encode_base64(escaped_source.bytes()))));
+            MUST(encode_base64(html.bytes()))));
         m_inspector_web_view.run_javascript(script);
     };
 

diff --git a/Userland/Libraries/LibWebView/SourceHighlighter.cpp b/Userland/Libraries/LibWebView/SourceHighlighter.cpp
@@ -113,10 +113,10 @@ void SourceHighlighterClient::highlighter_did_set_folding_regions(Vector<Syntax:
     document().set_folding_regions(move(folding_regions));
 }
 
-String highlight_source(URL::URL const& url, StringView source)
+String highlight_source(String const& url, StringView source, Syntax::Language language, HighlightOutputMode mode)
 {
-    SourceHighlighterClient highlighter_client { source, Syntax::Language::HTML };
-    return highlighter_client.to_html_string(url);
+    SourceHighlighterClient highlighter_client { source, language };
+    return highlighter_client.to_html_string(url, mode);
 }
 
 StringView SourceHighlighterClient::class_for_token(u64 token_type) const
@@ -259,7 +259,8 @@ String SourceHighlighterClient::to_html_string(String const& url, HighlightOutpu
         builder.append("</span>"sv);
     };
 
-    builder.append(R"~~~(
+    if (mode == HighlightOutputMode::FullDocument) {
+        builder.append(R"~~~(
 <!DOCTYPE html>
 <html>
 <head>
@@ -269,8 +270,9 @@ String SourceHighlighterClient::to_html_string(String const& url, HighlightOutpu
         builder.appendff("<style type=\"text/css\">{}</style>", HTML_HIGHLIGHTER_STYLE);
         builder.append(R"~~~(
 </head>
-<body>
-<pre class="html">)~~~"sv);
+<body>)~~~"sv);
+    }
+    builder.append("<pre class=\"html\">"sv);
 
     size_t span_index = 0;
     for (size_t line_index = 0; line_index < document().line_count(); ++line_index) {
@@ -337,11 +339,13 @@ String SourceHighlighterClient::to_html_string(String const& url, HighlightOutpu
         builder.append("</div>"sv);
     }
 
-    builder.append(R"~~~(
-</pre>
+    builder.append("</pre>"sv);
+    if (mode == HighlightOutputMode::FullDocument) {
+        builder.append(R"~~~(
 </body>
 </html>
 )~~~"sv);
+    }
 
     return builder.to_string_without_validation();
 }

diff --git a/Userland/Libraries/LibWebView/SourceHighlighter.h b/Userland/Libraries/LibWebView/SourceHighlighter.h
@@ -15,6 +15,11 @@
 
 namespace WebView {
 
+enum class HighlightOutputMode {
+    FullDocument, // Include HTML header, title, style sheet, etc
+    SourceOnly,   // Just the highlighted source
+};
+
 class SourceDocument final : public Syntax::Document {
 public:
     static NonnullRefPtr<SourceDocument> create(StringView source)
@@ -45,7 +50,7 @@ class SourceHighlighterClient final : public Syntax::HighlighterClient {
     SourceHighlighterClient(StringView source, Syntax::Language);
     virtual ~SourceHighlighterClient() = default;
 
-    String to_html_string(URL::URL const&) const;
+    String to_html_string(String const&, HighlightOutputMode) const;
 
 private:
     // ^ Syntax::HighlighterClient
@@ -68,7 +73,7 @@ class SourceHighlighterClient final : public Syntax::HighlighterClient {
     OwnPtr<Syntax::Highlighter> m_highlighter;
 };
 
-String highlight_source(URL::URL const&, StringView);
+String highlight_source(String const&, StringView, Syntax::Language, HighlightOutputMode);
 
 constexpr inline StringView HTML_HIGHLIGHTER_STYLE = R"~~~(
     @media (prefers-color-scheme: dark) {