|
@@ -54,7 +54,7 @@ ConsoleWidget::ConsoleWidget()
|
|
|
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, "div { font-family: Csilla; font-weight: lighter; }")));
|
|
|
+ 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);
|
|
@@ -72,6 +72,11 @@ ConsoleWidget::ConsoleWidget()
|
|
|
|
|
|
m_console_input->on_return_pressed = [this] {
|
|
|
auto js_source = m_console_input->text();
|
|
|
+
|
|
|
+ // FIXME: An is_blank check to check if there is only whitespace would probably be preferable.
|
|
|
+ if (js_source.is_empty())
|
|
|
+ return;
|
|
|
+
|
|
|
m_console_input->clear();
|
|
|
print_source_line(js_source);
|
|
|
|
|
@@ -117,11 +122,53 @@ 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;
|
|
|
+ html.append("<span class=\"repl-indicator\">");
|
|
|
html.append("> ");
|
|
|
- // FIXME: Support output highlighting
|
|
|
+ html.append("</span>");
|
|
|
+
|
|
|
+ // FIXME: Support output source highlighting
|
|
|
html.append(source);
|
|
|
|
|
|
print_html(html.string_view());
|
|
@@ -132,7 +179,9 @@ void ConsoleWidget::print_value(JS::Value value, StringBuilder& output_html, Has
|
|
|
// FIXME: Support output highlighting
|
|
|
|
|
|
if (value.is_empty()) {
|
|
|
+ output_html.append("<span class=\"empty-object\">");
|
|
|
output_html.append("<empty>");
|
|
|
+ output_html.append("</span>");
|
|
|
return;
|
|
|
}
|
|
|
|
|
@@ -140,7 +189,9 @@ void ConsoleWidget::print_value(JS::Value value, StringBuilder& output_html, Has
|
|
|
if (seen_objects.contains(&value.as_object())) {
|
|
|
// FIXME: Maybe we should only do this for circular references,
|
|
|
// not for all reoccurring objects.
|
|
|
+ output_html.append("<span class=\"already-printed\">");
|
|
|
output_html.appendf("<already printed Object %p>", &value.as_object());
|
|
|
+ output_html.append("</span>");
|
|
|
return;
|
|
|
}
|
|
|
seen_objects.set(&value.as_object());
|
|
@@ -160,68 +211,116 @@ void ConsoleWidget::print_value(JS::Value value, StringBuilder& output_html, Has
|
|
|
return print_object(object, output_html, seen_objects);
|
|
|
}
|
|
|
|
|
|
+ if (value.is_string())
|
|
|
+ output_html.append("<span class=\"js-string\">");
|
|
|
+ else if (value.is_number())
|
|
|
+ output_html.append("<span class=\"js-number\">");
|
|
|
+ else if (value.is_boolean())
|
|
|
+ output_html.append("<span class=\"js-boolean\">");
|
|
|
+ else if (value.is_null())
|
|
|
+ output_html.append("<span class=\"js-null\">");
|
|
|
+ else if (value.is_undefined())
|
|
|
+ output_html.append("<span class=\"js-undefined\">");
|
|
|
+
|
|
|
if (value.is_string())
|
|
|
output_html.append('"');
|
|
|
output_html.append(value.to_string_without_side_effects());
|
|
|
if (value.is_string())
|
|
|
output_html.append('"');
|
|
|
+
|
|
|
+ output_html.append("</span>");
|
|
|
}
|
|
|
|
|
|
void ConsoleWidget::print_array(const JS::Array& array, StringBuilder& html_output, HashTable<JS::Object*>& seen_objects)
|
|
|
{
|
|
|
+ html_output.append("<span class=\"js-array-open\">");
|
|
|
html_output.append("[ ");
|
|
|
+ html_output.append("</span>");
|
|
|
for (size_t i = 0; i < array.elements().size(); ++i) {
|
|
|
print_value(array.elements()[i], html_output, seen_objects);
|
|
|
- if (i != array.elements().size() - 1)
|
|
|
+ if (i != array.elements().size() - 1) {
|
|
|
+ html_output.append("<span class=\"js-array-element-separator\">");
|
|
|
html_output.append(", ");
|
|
|
+ html_output.append("</span>");
|
|
|
+ }
|
|
|
}
|
|
|
+ html_output.append("<span class=\"js-array-close\">");
|
|
|
html_output.append(" ]");
|
|
|
+ html_output.append("</span>");
|
|
|
}
|
|
|
|
|
|
void ConsoleWidget::print_object(const JS::Object& object, StringBuilder& html_output, HashTable<JS::Object*>& seen_objects)
|
|
|
{
|
|
|
+ html_output.append("<span class=\"js-object-open\">");
|
|
|
html_output.append("{ ");
|
|
|
+ html_output.append("</span>");
|
|
|
|
|
|
for (size_t i = 0; i < object.elements().size(); ++i) {
|
|
|
if (object.elements()[i].is_empty())
|
|
|
continue;
|
|
|
- html_output.appendf("\"m%zu\": ", i);
|
|
|
+ html_output.append("<span class=\"js-object-element-index\">");
|
|
|
+ html_output.appendf("%zu", i);
|
|
|
+ html_output.append("</span>");
|
|
|
+ html_output.append(": ");
|
|
|
print_value(object.elements()[i], html_output, seen_objects);
|
|
|
- if (i != object.elements().size() - 1)
|
|
|
+ if (i != object.elements().size() - 1) {
|
|
|
+ html_output.append("<span class=\"js-object-element-separator\">");
|
|
|
html_output.append(", ");
|
|
|
+ html_output.append("</span>");
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- if (!object.elements().is_empty() && object.shape().property_count())
|
|
|
+ if (!object.elements().is_empty() && object.shape().property_count()) {
|
|
|
+ html_output.append("<span class=\"js-object-element-separator\">");
|
|
|
html_output.append(", ");
|
|
|
+ html_output.append("</span>");
|
|
|
+ }
|
|
|
|
|
|
size_t index = 0;
|
|
|
for (auto& it : object.shape().property_table_ordered()) {
|
|
|
- html_output.appendf("\"%s\": ", it.key.characters());
|
|
|
+ html_output.append("<span class=\"js-object-element-key\">");
|
|
|
+ html_output.appendf("\"%s\"", it.key.characters());
|
|
|
+ html_output.append("</span>");
|
|
|
+ html_output.append(": ");
|
|
|
print_value(object.get_direct(it.value.offset), html_output, seen_objects);
|
|
|
- if (index != object.shape().property_count() - 1)
|
|
|
+ if (index != object.shape().property_count() - 1) {
|
|
|
+ html_output.append("<span class=\"js-object-element-separator\">");
|
|
|
html_output.append(", ");
|
|
|
+ html_output.append("</span>");
|
|
|
+ }
|
|
|
++index;
|
|
|
}
|
|
|
|
|
|
+ html_output.append("<span class=\"js-object-close\">");
|
|
|
html_output.append(" }");
|
|
|
+ html_output.append("</span>");
|
|
|
}
|
|
|
|
|
|
void ConsoleWidget::print_function(const JS::Object& function, StringBuilder& html_output, HashTable<JS::Object*>&)
|
|
|
{
|
|
|
+ html_output.append("<span class=\"js-function\">");
|
|
|
html_output.appendf("[%s]", function.class_name());
|
|
|
+ html_output.append("</span>");
|
|
|
}
|
|
|
|
|
|
void ConsoleWidget::print_date(const JS::Object& date, StringBuilder& html_output, HashTable<JS::Object*>&)
|
|
|
{
|
|
|
+ html_output.append("<span class=\"js-date\">");
|
|
|
html_output.appendf("Date %s", static_cast<const JS::Date&>(date).string().characters());
|
|
|
+ html_output.append("</span>");
|
|
|
}
|
|
|
|
|
|
void ConsoleWidget::print_error(const JS::Object& object, StringBuilder& html_output, HashTable<JS::Object*>&)
|
|
|
{
|
|
|
auto& error = static_cast<const JS::Error&>(object);
|
|
|
+ html_output.append("<span class=\"js-error-name\">");
|
|
|
html_output.appendf("[%s]", error.name().characters());
|
|
|
- if (!error.message().is_empty())
|
|
|
+ html_output.append("</span>");
|
|
|
+ if (!error.message().is_empty()) {
|
|
|
+ html_output.append("<span class=\"js-error-message\">");
|
|
|
html_output.appendf(": %s", error.message().characters());
|
|
|
+ html_output.append("</span>");
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
void ConsoleWidget::print_html(const StringView& line)
|
|
@@ -230,9 +329,10 @@ void ConsoleWidget::print_html(const StringView& line)
|
|
|
paragraph->set_inner_html(line);
|
|
|
|
|
|
m_console_output_container->append_child(paragraph);
|
|
|
- m_console_output_container->set_needs_style_update(true);
|
|
|
- m_console_output_container->document().schedule_style_update();
|
|
|
m_console_output_container->document().invalidate_layout();
|
|
|
+ m_console_output_container->document().update_layout();
|
|
|
+
|
|
|
+ m_console_output_view->scroll_to_bottom();
|
|
|
}
|
|
|
|
|
|
void ConsoleWidget::clear_output()
|