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

Browser: Add output styles to JS source printed in the console

Browse source 
This patch uses the new JS::MarkupGenerator to stylize all of the
source code and runtime values printed in the console's output panel.
This also does away with the Console's global style sheet, as all
styling is handled by the MarkupGenerator and the System Palette.
This commit is contained in:
FalseHonesty 2020-05-25 11:46:10 -04:00 • committed by Andreas Kling
parent 941b028ca3
commit d2b493b74e
4 changed files with 54 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

47
Applications/Browser/ConsoleWidget.cpp
View file

@ -32,8 +32,6 @@
#include <LibJS/Interpreter.h>
#include <LibJS/MarkupGenerator.h>
#include <LibJS/Parser.h>
#include <LibJS/Runtime/Array.h>
#include <LibJS/Runtime/Date.h>
#include <LibJS/Runtime/Error.h>
#include <LibWeb/DOM/DocumentType.h>
#include <LibWeb/DOM/ElementFactory.h>
@ -54,9 +52,6 @@ ConsoleWidget::ConsoleWidget()
base_document->append_child(html_element);
auto head_element = create_element(base_document, "head");
html_element->append_child(head_element);
auto style_element = create_element(base_document, "style");
style_element->append_child(adopt(*new Web::Text(base_document, create_document_style())));
head_element->append_child(style_element);
auto body_element = create_element(base_document, "body");
html_element->append_child(body_element);
m_console_output_container = body_element;
@ -121,45 +116,6 @@ void ConsoleWidget::set_interpreter(WeakPtr<JS::Interpreter> interpreter)
clear_output();
}
String ConsoleWidget::create_document_style()
{
StringBuilder style;
auto palette = this->palette();
auto add_class_and_color = [&](const StringView& class_name, Color color, bool bold = false) {
style.append(".");
style.append(class_name);
style.append(" { color: ");
style.append(color.to_string_without_alpha());
style.append(";");
if (bold) {
style.append("font-weight: bold;");
}
style.append(" } ");
};
add_class_and_color("js-string", palette.syntax_string());
add_class_and_color("js-number", palette.syntax_number());
add_class_and_color("js-boolean", palette.syntax_keyword(), true);
add_class_and_color("js-null", palette.syntax_keyword(), true);
add_class_and_color("js-undefined", palette.syntax_keyword(), true);
add_class_and_color("js-array-open", palette.syntax_punctuation());
add_class_and_color("js-array-close", palette.syntax_punctuation());
add_class_and_color("js-array-element-separator", palette.syntax_punctuation());
add_class_and_color("js-object-open", palette.syntax_punctuation());
add_class_and_color("js-object-close", palette.syntax_punctuation());
add_class_and_color("js-object-element-separator", palette.syntax_punctuation());
add_class_and_color("js-object-element-index", palette.syntax_number());
add_class_and_color("js-object-element-key", palette.syntax_string());
// FIXME: Add to palette?
add_class_and_color("js-error-name", Color::Red, true);
return style.to_string();
}
void ConsoleWidget::print_source_line(const StringView& source)
{
StringBuilder html;
@ -167,8 +123,7 @@ void ConsoleWidget::print_source_line(const StringView& source)
html.append("&gt; ");
html.append("</span>");
// FIXME: Support output source highlighting
html.append(source);
html.append(JS::MarkupGenerator::html_from_source(source));
print_html(html.string_view());
}

2
Applications/Browser/ConsoleWidget.h
View file

@ -45,8 +45,6 @@ public:
private:
ConsoleWidget();
String create_document_style();
RefPtr<GUI::TextBox> m_console_input;
RefPtr<Web::HtmlView> m_console_output_view;
RefPtr<Web::Element> m_console_output_container;

7
Libraries/LibJS/MarkupGenerator.cpp
View file

@ -35,12 +35,12 @@
namespace JS {
String MarkupGenerator::html_from_source(String source)
String MarkupGenerator::html_from_source(const StringView& source)
{
auto lexer = Lexer(source);
StringBuilder builder;
size_t source_cursor = 0;
auto lexer = Lexer(source);
for (auto token = lexer.next(); token.type() != TokenType::Eof; token = lexer.next()) {
auto length = token.value().length();
auto start = token.line_column();
@ -52,7 +52,7 @@ String MarkupGenerator::html_from_source(String source)
}
builder.append(wrap_string_in_style(token.value(), style_type_for_token(token)));
source_cursor = length;
source_cursor = start + length;
}
if (source_cursor < source.length())
@ -224,6 +224,7 @@ MarkupGenerator::StyleType MarkupGenerator::style_type_for_token(Token token)
case TokenType::ParenClose:
case TokenType::ParenOpen:
case TokenType::Semicolon:
case TokenType::Colon:
case TokenType::Period:
return StyleType::Punctuation;
case TokenType::Ampersand:

2
Libraries/LibJS/MarkupGenerator.h
View file

@ -32,7 +32,7 @@ namespace JS {
class MarkupGenerator {
public:
static String html_from_source(String);
static String html_from_source(const StringView&);
static String html_from_value(Value);
private: