Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-11-04 07:10:57 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Userland/Applications/Browser/ConsoleWidget.cpp

233 lines
6.8 KiB
C++
Raw Normal View History

Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
/*
* Copyright (c) 2020, Hunter Salyer <thefalsehonesty@gmail.com>
Browser: Use OutOfProcessWebView for the Browser JavaScript console Instead of building the web DOM by hand, we now load an empty document into an OutOfProcessWebView, and then append things to it by sending little snippets of JavaScript to the host process. :^)
2021-08-24 16:57:57 +02:00
* Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
Browser: Convert JS ConsoleWidget to new API The console widget now requests messages and receives them in bulk, using the shiny new IPC calls. This lets it display console messages that occurred before the widget was created. :^)
2021-09-04 12:12:12 +01:00
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
Applications: Use default constructors/destructors https://isocpp.github.io/CppCoreGuidelines/CppCoreGuidelines#cother-other-default-operation-rules "The compiler is more likely to get the default semantics right and you cannot implement these functions better than the compiler."
2022-02-10 12:28:48 -07:00
* Copyright (c) 2022, the SerenityOS developers.
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
*
Everything: Move to SPDX license identifiers in all files. SPDX License Identifiers are a more compact / standardized way of representing file license information. See: https://spdx.dev/resources/use/#identifiers This was done with the `ambr` search and replace tool. ambr --no-parent-ignore --key-from-file --rep-from-file key.txt rep.txt *
2021-04-22 01:24:48 -07:00
* SPDX-License-Identifier: BSD-2-Clause
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
*/
#include "ConsoleWidget.h"
#include <AK/StringBuilder.h>
Browser: Load icons at start of program Previously, Browser loaded icons from the disk every time an icon was set. In addition to making more calls to the disk and decoding more images, this makes error propagation impossible. This change moves all icon loading to the start of the program.
2022-01-10 19:06:11 -08:00
#include <Applications/Browser/Browser.h>
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
#include <LibGUI/BoxLayout.h>
Browser: Add clear output button to the console
2020-05-29 16:00:18 -04:00
#include <LibGUI/Button.h>
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
#include <LibGUI/TextBox.h>
LibGFX: Move default_xxx_font() methods from Font to FontDatabase When we have an abstract font class it makes no sense to keep these methods in the Font class.
2020-12-29 18:25:13 +01:00
#include <LibGfx/FontDatabase.h>
LibJS: Create JS to HTML markup generator The new JS::MarkupGenerator class can convert both a JS source string and a JS Runtime Value into properly formatted HTML using the new LibWeb System Palette css color values. It makes more sense for this JS -> HTML process to occur in LibJS so that it can be used elsewhere, namely Markdown code block syntax highlighting. It also means the Browser can worry less about LibJS implementation details.
2020-05-25 15:24:46 -04:00
#include <LibJS/MarkupGenerator.h>
LibSyntax+LibGUI+LibJS: Move JS syntax highlighter to LibJS This is a little bit messy but the basic idea is: Syntax::Highlighter now has a Syntax::HighlighterClient to talk to the outside world. It mostly communicates in LibGUI primitives that are available in headers, so inlineable. GUI::TextEditor inherits from Syntax::HighlighterClient. This let us to move GUI::JSSyntaxHighlighter to JS::SyntaxHighlighter and remove LibGUI's dependency on LibJS.
2021-02-07 16:56:02 +01:00
#include <LibJS/SyntaxHighlighter.h>
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
namespace Browser {
ConsoleWidget::ConsoleWidget()
{
set_layout<GUI::VerticalBoxLayout>();
set_fill_with_background_color(true);
Browser: Use OutOfProcessWebView for the Browser JavaScript console Instead of building the web DOM by hand, we now load an empty document into an OutOfProcessWebView, and then append things to it by sending little snippets of JavaScript to the host process. :^)
2021-08-24 16:57:57 +02:00
m_output_view = add<Web::OutOfProcessWebView>();
m_output_view->load("data:text/html,<html></html>");
Browser: Convert JS ConsoleWidget to new API The console widget now requests messages and receives them in bulk, using the shiny new IPC calls. This lets it display console messages that occurred before the widget was created. :^)
2021-09-04 12:12:12 +01:00
// Wait until our output WebView is loaded, and then request any messages that occurred before we existed
m_output_view->on_load_finish = [this](auto&) {
if (on_request_messages)
on_request_messages(0);
};
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
Browser: Add clear output button to the console
2020-05-29 16:00:18 -04:00
auto& bottom_container = add<GUI::Widget>();
bottom_container.set_layout<GUI::HorizontalBoxLayout>();
LibGUI: Rewrite layout system in terms of min and max sizes This patch removes size policies and preferred sizes, and replaces them with min-size and max-size for each widget. Box layout now works in 3 passes: 1) Set all items (widgets/spacers) to their min-size 2) Distribute remaining space evenly, respecting max-size 3) Place widgets one after the other, adding spacing in between I've also added convenience helpers for setting a fixed size (which is the same as setting min-size and max-size to the same value.) This significantly reduces the verbosity of widget layout and makes GML a bit more pleasant to write, too. :^)
2020-12-30 01:23:32 +01:00
bottom_container.set_fixed_height(22);
Browser: Add clear output button to the console
2020-05-29 16:00:18 -04:00
m_input = bottom_container.add<GUI::TextBox>();
LibSyntax+LibGUI+LibJS: Move JS syntax highlighter to LibJS This is a little bit messy but the basic idea is: Syntax::Highlighter now has a Syntax::HighlighterClient to talk to the outside world. It mostly communicates in LibGUI primitives that are available in headers, so inlineable. GUI::TextEditor inherits from Syntax::HighlighterClient. This let us to move GUI::JSSyntaxHighlighter to JS::SyntaxHighlighter and remove LibGUI's dependency on LibJS.
2021-02-07 16:56:02 +01:00
m_input->set_syntax_highlighter(make<JS::SyntaxHighlighter>());
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
// FIXME: Syntax Highlighting breaks the cursor's position on non fixed-width fonts.
LibGFX: Move default_xxx_font() methods from Font to FontDatabase When we have an abstract font class it makes no sense to keep these methods in the Font class.
2020-12-29 18:25:13 +01:00
m_input->set_font(Gfx::FontDatabase::default_fixed_width_font());
Browser: Add console history to re-send old commands The console has now enabled history in its input text box. Pretty nice to not have to retype things all the time :^)
2020-05-26 22:18:25 -04:00
m_input->set_history_enabled(true);
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
Browser: Add console history to re-send old commands The console has now enabled history in its input text box. Pretty nice to not have to retype things all the time :^)
2020-05-26 22:18:25 -04:00
m_input->on_return_pressed = [this] {
auto js_source = m_input->text();
Browser: Add output styles to values printed in the console This patch adds spans around most of the console's output, allowing for a global document stylesheet to customize the highlighting of the console's output. It also adds some basic styling for values like strings, numbers, and arrays using the system Palette. Note: This patch simply adds support for highlighting output values, the lines of JS code printed to console are still unformatted.
2020-05-24 21:35:46 -04:00
// FIXME: An is_blank check to check if there is only whitespace would probably be preferable.
if (js_source.is_empty())
return;
Browser: Add console history to re-send old commands The console has now enabled history in its input text box. Pretty nice to not have to retype things all the time :^)
2020-05-26 22:18:25 -04:00
m_input->add_current_text_to_history();
m_input->clear();
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
print_source_line(js_source);
Browser: Implemented out of process JS console Added input hook into console widget to allow input to be captured and sent to the external JS console via IPC. Output from the external JS console is fed into the console widget via handle_js_console_output().
2021-02-27 21:53:20 -06:00
if (on_js_input)
on_js_input(js_source);
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
};
Browser: Add clear output button to the console
2020-05-29 16:00:18 -04:00
LibGUI: Add Widget focus policies Every widget now has a GUI::FocusPolicy that determines how it can receive focus: - NoFocus: The widget is not focusable (default) - TabFocus: The widget can be focused using the tab key. - ClickFocus: The widget can be focused by clicking on it. - StrongFocus: Both of the above. For widgets that have a focus proxy, getting/setting the focus policy will affect the proxy instead.
2020-10-30 10:58:27 +01:00
set_focus_proxy(m_input);
Browser: Add clear output button to the console
2020-05-29 16:00:18 -04:00
auto& clear_button = bottom_container.add<GUI::Button>();
LibGUI: Rewrite layout system in terms of min and max sizes This patch removes size policies and preferred sizes, and replaces them with min-size and max-size for each widget. Box layout now works in 3 passes: 1) Set all items (widgets/spacers) to their min-size 2) Distribute remaining space evenly, respecting max-size 3) Place widgets one after the other, adding spacing in between I've also added convenience helpers for setting a fixed size (which is the same as setting min-size and max-size to the same value.) This significantly reduces the verbosity of widget layout and makes GML a bit more pleasant to write, too. :^)
2020-12-30 01:23:32 +01:00
clear_button.set_fixed_size(22, 22);
Browser: Load icons at start of program Previously, Browser loaded icons from the disk every time an icon was set. In addition to making more calls to the disk and decoding more images, this makes error propagation impossible. This change moves all icon loading to the start of the program.
2022-01-10 19:06:11 -08:00
clear_button.set_icon(g_icon_bag.delete_icon);
Browser: Add clear output button to the console
2020-05-29 16:00:18 -04:00
clear_button.set_tooltip("Clear the console output");
clear_button.on_click = [this](auto) {
clear_output();
};
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
}
Browser: Convert JS ConsoleWidget to new API The console widget now requests messages and receives them in bulk, using the shiny new IPC calls. This lets it display console messages that occurred before the widget was created. :^)
2021-09-04 12:12:12 +01:00
void ConsoleWidget::request_console_messages()
Browser: Implemented out of process JS console Added input hook into console widget to allow input to be captured and sent to the external JS console via IPC. Output from the external JS console is fed into the console widget via handle_js_console_output().
2021-02-27 21:53:20 -06:00
{
Browser: Convert JS ConsoleWidget to new API The console widget now requests messages and receives them in bulk, using the shiny new IPC calls. This lets it display console messages that occurred before the widget was created. :^)
2021-09-04 12:12:12 +01:00
VERIFY(!m_waiting_for_messages);
VERIFY(on_request_messages);
on_request_messages(m_highest_received_message_index + 1);
m_waiting_for_messages = true;
}
void ConsoleWidget::notify_about_new_console_message(i32 message_index)
{
if (message_index <= m_highest_received_message_index) {
dbgln("Notified about console message we already have");
return;
}
if (message_index <= m_highest_notified_message_index) {
dbgln("Notified about console message we're already aware of");
return;
}
m_highest_notified_message_index = message_index;
if (!m_waiting_for_messages)
request_console_messages();
}
Everywhere: Run clang-format
2022-04-01 20:58:27 +03:00
void ConsoleWidget::handle_console_messages(i32 start_index, Vector<String> const& message_types, Vector<String> const& messages)
Browser: Convert JS ConsoleWidget to new API The console widget now requests messages and receives them in bulk, using the shiny new IPC calls. This lets it display console messages that occurred before the widget was created. :^)
2021-09-04 12:12:12 +01:00
{
i32 end_index = start_index + message_types.size() - 1;
if (end_index <= m_highest_received_message_index) {
dbgln("Received old console messages");
return;
Browser: Implemented out of process JS console Added input hook into console widget to allow input to be captured and sent to the external JS console via IPC. Output from the external JS console is fed into the console widget via handle_js_console_output().
2021-02-27 21:53:20 -06:00
}
Browser: Convert JS ConsoleWidget to new API The console widget now requests messages and receives them in bulk, using the shiny new IPC calls. This lets it display console messages that occurred before the widget was created. :^)
2021-09-04 12:12:12 +01:00
for (size_t i = 0; i < message_types.size(); i++) {
auto& type = message_types[i];
auto& message = messages[i];
if (type == "html") {
print_html(message);
} else if (type == "clear") {
clear_output();
LibJS+WebContent+Browser+js: Implement console.group() methods This implements: - console.group() - console.groupCollapsed() - console.groupEnd() In the Browser, we use `<details>` for the groups, which is not actually implemented yet, so groups are always open. In the REPL, groups are non-interactive, but still indent any output. This looks weird since the console prompt and return values remain on the far left, but this matches what Node does so it's probably fine. :^) I expect `console.group()` is not used much outside of browsers.
2021-12-22 12:32:15 +00:00
} else if (type == "group") {
begin_group(message, true);
} else if (type == "groupCollapsed") {
begin_group(message, false);
} else if (type == "groupEnd") {
end_group();
Browser: Convert JS ConsoleWidget to new API The console widget now requests messages and receives them in bulk, using the shiny new IPC calls. This lets it display console messages that occurred before the widget was created. :^)
2021-09-04 12:12:12 +01:00
} else {
VERIFY_NOT_REACHED();
}
}
m_highest_received_message_index = end_index;
m_waiting_for_messages = false;
if (m_highest_received_message_index < m_highest_notified_message_index)
request_console_messages();
Browser: Implemented out of process JS console Added input hook into console widget to allow input to be captured and sent to the external JS console via IPC. Output from the external JS console is fed into the console widget via handle_js_console_output().
2021-02-27 21:53:20 -06:00
}
Everywhere: Pass AK::StringView by value
2021-11-11 00:55:02 +01:00
void ConsoleWidget::print_source_line(StringView source)
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
{
StringBuilder html;
Browser: Add output styles to values printed in the console This patch adds spans around most of the console's output, allowing for a global document stylesheet to customize the highlighting of the console's output. It also adds some basic styling for values like strings, numbers, and arrays using the system Palette. Note: This patch simply adds support for highlighting output values, the lines of JS code printed to console are still unformatted.
2020-05-24 21:35:46 -04:00
html.append("<span class=\"repl-indicator\">");
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
html.append("&gt; ");
Browser: Add output styles to values printed in the console This patch adds spans around most of the console's output, allowing for a global document stylesheet to customize the highlighting of the console's output. It also adds some basic styling for values like strings, numbers, and arrays using the system Palette. Note: This patch simply adds support for highlighting output values, the lines of JS code printed to console are still unformatted.
2020-05-24 21:35:46 -04:00
html.append("</span>");
Browser: Add output styles to JS source printed in the console 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.
2020-05-25 11:46:10 -04:00
html.append(JS::MarkupGenerator::html_from_source(source));
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
print_html(html.string_view());
}
Everywhere: Pass AK::StringView by value
2021-11-11 00:55:02 +01:00
void ConsoleWidget::print_html(StringView line)
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
{
Browser: Use OutOfProcessWebView for the Browser JavaScript console Instead of building the web DOM by hand, we now load an empty document into an OutOfProcessWebView, and then append things to it by sending little snippets of JavaScript to the host process. :^)
2021-08-24 16:57:57 +02:00
StringBuilder builder;
LibJS+WebContent+Browser+js: Implement console.group() methods This implements: - console.group() - console.groupCollapsed() - console.groupEnd() In the Browser, we use `<details>` for the groups, which is not actually implemented yet, so groups are always open. In the REPL, groups are non-interactive, but still indent any output. This looks weird since the console prompt and return values remain on the far left, but this matches what Node does so it's probably fine. :^) I expect `console.group()` is not used much outside of browsers.
2021-12-22 12:32:15 +00:00
int parent_id = m_group_stack.is_empty() ? 0 : m_group_stack.last().id;
if (parent_id == 0) {
builder.append(R"~~~(
var parentGroup = document.body;
)~~~");
} else {
builder.appendff(R"~~~(
var parentGroup = document.getElementById("group_{}");
)~~~",
parent_id);
}
Browser: Use OutOfProcessWebView for the Browser JavaScript console Instead of building the web DOM by hand, we now load an empty document into an OutOfProcessWebView, and then append things to it by sending little snippets of JavaScript to the host process. :^)
2021-08-24 16:57:57 +02:00
builder.append(R"~~~(
var p = document.createElement("p");
p.innerHTML = ")~~~");
builder.append_escaped_for_json(line);
builder.append(R"~~~("
LibJS+WebContent+Browser+js: Implement console.group() methods This implements: - console.group() - console.groupCollapsed() - console.groupEnd() In the Browser, we use `<details>` for the groups, which is not actually implemented yet, so groups are always open. In the REPL, groups are non-interactive, but still indent any output. This looks weird since the console prompt and return values remain on the far left, but this matches what Node does so it's probably fine. :^) I expect `console.group()` is not used much outside of browsers.
2021-12-22 12:32:15 +00:00
parentGroup.appendChild(p);
Browser: Use OutOfProcessWebView for the Browser JavaScript console Instead of building the web DOM by hand, we now load an empty document into an OutOfProcessWebView, and then append things to it by sending little snippets of JavaScript to the host process. :^)
2021-08-24 16:57:57 +02:00
)~~~");
m_output_view->run_javascript(builder.string_view());
Browser: Convert JS ConsoleWidget to new API The console widget now requests messages and receives them in bulk, using the shiny new IPC calls. This lets it display console messages that occurred before the widget was created. :^)
2021-09-04 12:12:12 +01:00
// FIXME: Make it scroll to the bottom, using `window.scrollTo()` in the JS above.
// We used to call `m_output_view->scroll_to_bottom();` here, but that does not work because
// it runs synchronously, meaning it happens before the HTML is output via IPC above.
LibJS+WebContent+Browser+js: Implement console.group() methods This implements: - console.group() - console.groupCollapsed() - console.groupEnd() In the Browser, we use `<details>` for the groups, which is not actually implemented yet, so groups are always open. In the REPL, groups are non-interactive, but still indent any output. This looks weird since the console prompt and return values remain on the far left, but this matches what Node does so it's probably fine. :^) I expect `console.group()` is not used much outside of browsers.
2021-12-22 12:32:15 +00:00
// (See also: begin_group())
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
}
void ConsoleWidget::clear_output()
{
LibJS+WebContent+Browser+js: Implement console.group() methods This implements: - console.group() - console.groupCollapsed() - console.groupEnd() In the Browser, we use `<details>` for the groups, which is not actually implemented yet, so groups are always open. In the REPL, groups are non-interactive, but still indent any output. This looks weird since the console prompt and return values remain on the far left, but this matches what Node does so it's probably fine. :^) I expect `console.group()` is not used much outside of browsers.
2021-12-22 12:32:15 +00:00
m_group_stack.clear();
Browser: Use OutOfProcessWebView for the Browser JavaScript console Instead of building the web DOM by hand, we now load an empty document into an OutOfProcessWebView, and then append things to it by sending little snippets of JavaScript to the host process. :^)
2021-08-24 16:57:57 +02:00
m_output_view->run_javascript(R"~~~(
document.body.innerHTML = "";
)~~~");
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
}
LibJS+WebContent+Browser+js: Implement console.group() methods This implements: - console.group() - console.groupCollapsed() - console.groupEnd() In the Browser, we use `<details>` for the groups, which is not actually implemented yet, so groups are always open. In the REPL, groups are non-interactive, but still indent any output. This looks weird since the console prompt and return values remain on the far left, but this matches what Node does so it's probably fine. :^) I expect `console.group()` is not used much outside of browsers.
2021-12-22 12:32:15 +00:00
void ConsoleWidget::begin_group(StringView label, bool start_expanded)
{
StringBuilder builder;
int parent_id = m_group_stack.is_empty() ? 0 : m_group_stack.last().id;
if (parent_id == 0) {
builder.append(R"~~~(
var parentGroup = document.body;
)~~~");
} else {
builder.appendff(R"~~~(
var parentGroup = document.getElementById("group_{}");
)~~~",
parent_id);
}
Group group;
group.id = m_next_group_id++;
group.label = label;
builder.appendff(R"~~~(
var group = document.createElement("details");
group.id = "group_{}";
var label = document.createElement("summary");
label.innerText = ")~~~",
group.id);
builder.append_escaped_for_json(label);
builder.append(R"~~~(";
group.appendChild(label);
parentGroup.appendChild(group);
)~~~");
if (start_expanded)
builder.append("group.open = true;");
m_output_view->run_javascript(builder.string_view());
// FIXME: Scroll console to bottom - see note in print_html()
m_group_stack.append(group);
}
void ConsoleWidget::end_group()
{
m_group_stack.take_last();
}
Browser: Convert JS ConsoleWidget to new API The console widget now requests messages and receives them in bulk, using the shiny new IPC calls. This lets it display console messages that occurred before the widget was created. :^)
2021-09-04 12:12:12 +01:00
void ConsoleWidget::reset()
{
clear_output();
m_highest_notified_message_index = -1;
m_highest_received_message_index = -1;
m_waiting_for_messages = false;
}
Browser: Add JS Console The JavaScript console can be opened with Control+I, or using the menu option. The console is currently a text box with JS syntax highlighting which will send commands to the document's interpreter. All output is printed to an HTML view in the console. The output is an HtmlView to easily allow complex output, such as expandable views for JS Objects in the long run.
2020-05-23 12:53:09 -04:00
}
Reference in a new issue Copy permalink