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

111 lines
2.9 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: 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>
#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: 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);
LibGfx: Use "try_" prefix for static factory functions Also mark them as [[nodiscard]].
2021-07-21 18:02:15 +02:00
clear_button.set_icon(Gfx::Bitmap::try_load_from_file("/res/icons/16x16/delete.png"));
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
}
ConsoleWidget::~ConsoleWidget()
{
}
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
void ConsoleWidget::handle_js_console_output(const String& method, const String& line)
{
if (method == "html") {
print_html(line);
} else if (method == "clear") {
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
void ConsoleWidget::print_source_line(const StringView& source)
{
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());
}
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
void ConsoleWidget::print_html(StringView const& 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;
builder.append(R"~~~(
var p = document.createElement("p");
p.innerHTML = ")~~~");
builder.append_escaped_for_json(line);
builder.append(R"~~~("
document.body.appendChild(p);
)~~~");
m_output_view->run_javascript(builder.string_view());
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_output_view->scroll_to_bottom();
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()
{
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
}
}
Reference in a new issue Copy permalink