LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-01-04 01:05:58 +03:00
Code Issues Packages Projects Releases Wiki Activity
6be75bd5e4
ladybird/Userland/Applications/Browser/InspectorWidget.cpp

170 lines
6.1 KiB
C++
Raw Normal View History

Meta: Add license header to source files As suggested by Joshua, this commit adds the 2-clause BSD license as a comment block to the top of every source file. For the first pass, I've just added myself for simplicity. I encourage everyone to add themselves as copyright holders of any file they've added or modified in some significant way. If I've added myself in error somewhere, feel free to replace it with the appropriate copyright holder instead. Going forward, all new source files should include a license header.
2020-01-18 11:38:21 +03:00
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
Everywhere: Use my shiny new serenityos.org email :^)
2021-09-03 13:14:37 +03:00
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
Meta: Add license header to source files As suggested by Joshua, this commit adds the 2-clause BSD license as a comment block to the top of every source file. For the first pass, I've just added myself for simplicity. I encourage everyone to add themselves as copyright holders of any file they've added or modified in some significant way. If I've added myself in error somewhere, feel free to replace it with the appropriate copyright holder instead. Going forward, all new source files should include a license header.
2020-01-18 11:38:21 +03: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 11:24:48 +03:00
* SPDX-License-Identifier: BSD-2-Clause
Meta: Add license header to source files As suggested by Joshua, this commit adds the 2-clause BSD license as a comment block to the top of every source file. For the first pass, I've just added myself for simplicity. I encourage everyone to add themselves as copyright holders of any file they've added or modified in some significant way. If I've added myself in error somewhere, feel free to replace it with the appropriate copyright holder instead. Going forward, all new source files should include a license header.
2020-01-18 11:38:21 +03:00
*/
Browser+LibHTML: Add resolved element style to the DOM inspector When selecting an element in the browser's DOM inspector, we now also show the resolved CSS properties (and their values) for that element. Since the inspector was growing a bit more complex, I moved it out of the "show inspector" action callback and into its own class. In the future, we will probably want to migrate the inspector down to LibHTML to make it accessible to other clients of the library, but for now we can keep working on it inside Browser. :^)
2020-01-02 16:55:19 +03:00
#include "InspectorWidget.h"
LibGUI: Remove leading G from filenames
2020-02-06 22:33:02 +03:00
#include <LibGUI/BoxLayout.h>
#include <LibGUI/Splitter.h>
Browser: Move InspectorWidget into the Browser namespace
2020-05-08 22:38:30 +03:00
#include <LibGUI/TabWidget.h>
LibGUI: Remove leading G from filenames
2020-02-06 22:33:02 +03:00
#include <LibGUI/TableView.h>
#include <LibGUI/TreeView.h>
LibWeb: Rename directory LibHTML => LibWeb Let's rename this to LibWeb since it aims to provide more parts of the web platform than just HTML. :^)
2020-03-07 12:32:51 +03:00
#include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/Element.h>
#include <LibWeb/DOMTreeModel.h>
Browser: Display style properties in DOM Inspector This makes use of the new `inspect_dom_node()` IPC call.
2021-09-02 14:05:32 +03:00
#include <LibWeb/OutOfProcessWebView.h>
LibWeb: Rename directory LibHTML => LibWeb Let's rename this to LibWeb since it aims to provide more parts of the web platform than just HTML. :^)
2020-03-07 12:32:51 +03:00
#include <LibWeb/StylePropertiesModel.h>
Browser+LibHTML: Add resolved element style to the DOM inspector When selecting an element in the browser's DOM inspector, we now also show the resolved CSS properties (and their values) for that element. Since the inspector was growing a bit more complex, I moved it out of the "show inspector" action callback and into its own class. In the future, we will probably want to migrate the inspector down to LibHTML to make it accessible to other clients of the library, but for now we can keep working on it inside Browser. :^)
2020-01-02 16:55:19 +03:00
Browser: Move InspectorWidget into the Browser namespace
2020-05-08 22:38:30 +03:00
namespace Browser {
Browser: Implement "Inspect Element" context menu action This is finally working for OOPWV! :^)
2021-08-27 19:40:25 +03:00
void InspectorWidget::set_inspected_node(i32 node_id)
{
if (!m_dom_json.has_value()) {
// DOM Tree hasn't been loaded yet, so make a note to inspect it later.
m_pending_inspect_node_id = node_id;
return;
}
auto* model = verify_cast<Web::DOMTreeModel>(m_dom_tree_view->model());
auto index = model->index_for_node(node_id);
if (!index.is_valid()) {
dbgln("InspectorWidget told to inspect non-existent node, id={}", node_id);
return;
}
m_dom_tree_view->expand_all_parents_of(index);
m_dom_tree_view->set_cursor(index, GUI::AbstractView::SelectionUpdate::Set);
set_inspected_node(index);
}
Browser: Display style properties in DOM Inspector This makes use of the new `inspect_dom_node()` IPC call.
2021-09-02 14:05:32 +03:00
void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
LibWeb+Browser: Add a barebones LayoutTreeModel to the inspector window This allows you to inspect the layout tree, along side the DOM tree. It will need more functionality to be truly useful, but it's a start.
2020-06-12 23:30:11 +03:00
{
Browser: Display style properties in DOM Inspector This makes use of the new `inspect_dom_node()` IPC call.
2021-09-02 14:05:32 +03:00
auto* json = static_cast<JsonObject const*>(index.internal_data());
i32 inspected_node = json ? json->get("id").to_i32() : 0;
if (inspected_node == m_inspected_node_id)
return;
m_inspected_node_id = inspected_node;
auto maybe_inspected_node_properties = m_web_view->inspect_dom_node(m_inspected_node_id);
if (maybe_inspected_node_properties.has_value()) {
auto inspected_node_properties = maybe_inspected_node_properties.value();
Browser+LibWeb+WebContent: Add variables display to Inspector This allows us to see which custom properties apply to a given element, which previously wasn't shown.
2021-12-08 14:51:26 +03:00
load_style_json(inspected_node_properties.specified_values_json, inspected_node_properties.computed_values_json, inspected_node_properties.custom_properties_json);
Browser: Display style properties in DOM Inspector This makes use of the new `inspect_dom_node()` IPC call.
2021-09-02 14:05:32 +03:00
} else {
Browser: Reset the DOM Inspector's state when re-opening it This resets the DOM Inspector to a default state when re-opening it, instead of it displaying the previous selection and properties, which may be outdated. This is closer to how Chrome and Firefox behave. Eventually, it probably makes sense to copy their behavior of selecting the `<body>` element by default.
2021-08-27 22:21:30 +03:00
clear_style_json();
Browser: Display style properties in DOM Inspector This makes use of the new `inspect_dom_node()` IPC call.
2021-09-02 14:05:32 +03:00
}
Browser: Add "Inspect Element" to context menu :^) This opens the DOM Inspector window, with the target element already selected. (If the window is already open, it just selects the element.) Note that this only applies to single-process mode for now. In OOP mode, the "inspect element" action is disabled.
2021-08-17 19:00:27 +03:00
}
LibGUI: Remove parent parameter to GUI::Widget constructor
2020-02-23 14:07:13 +03:00
InspectorWidget::InspectorWidget()
Browser+LibHTML: Add resolved element style to the DOM inspector When selecting an element in the browser's DOM inspector, we now also show the resolved CSS properties (and their values) for that element. Since the inspector was growing a bit more complex, I moved it out of the "show inspector" action callback and into its own class. In the future, we will probably want to migrate the inspector down to LibHTML to make it accessible to other clients of the library, but for now we can keep working on it inside Browser. :^)
2020-01-02 16:55:19 +03:00
{
Browser: Add some UI padding in the Inspector widget
2021-09-13 18:17:43 +03:00
set_fill_with_background_color(true);
auto& layout = set_layout<GUI::VerticalBoxLayout>();
layout.set_margins({ 4, 4, 4, 4 });
LibCore: Make Core::Object::add<ChildType> return a ChildType& Since the returned object is now owned by the callee object, we can simply vend a ChildType&. This allows us to use "." instead of "->" at the call site, which is quite nice. :^)
2020-03-04 21:07:55 +03:00
auto& splitter = add<GUI::VerticalSplitter>();
LibWeb+Browser: Add a barebones LayoutTreeModel to the inspector window This allows you to inspect the layout tree, along side the DOM tree. It will need more functionality to be truly useful, but it's a start.
2020-06-12 23:30:11 +03:00
auto& top_tab_widget = splitter.add<GUI::TabWidget>();
Browser: Add some UI padding in the Inspector widget
2021-09-13 18:17:43 +03:00
auto& dom_tree_container = top_tab_widget.add_tab<GUI::Widget>("DOM");
dom_tree_container.set_layout<GUI::VerticalBoxLayout>();
dom_tree_container.layout()->set_margins({ 4, 4, 4, 4 });
m_dom_tree_view = dom_tree_container.add<GUI::TreeView>();
LibGUI/AbstractView: Remove `on_selection` Since the introduction of multi-select, we have had both `on_selection` and `on_selection_change`, the latter of which was only invoked when a change in selection came in through the model. This removes `AbstractView::on_selection` and replaces it usage with the more explicit `on_selection_change` everywhere.
2021-05-25 23:48:43 +03:00
m_dom_tree_view->on_selection_change = [this] {
const auto& index = m_dom_tree_view->selection().first();
LibWeb+Browser: Support DOM Inspector for OutOfProcessWebView This introduces a new DOMTreeJSONModel, which provides the Model for the InspectorWidget when the Browser is running using the OutOfProcessWebView. This Model is constructed with a JSON object received via IPC from the WebContentServer.
2021-06-08 00:21:16 +03:00
set_inspected_node(index);
LibWeb+Browser: Add a barebones LayoutTreeModel to the inspector window This allows you to inspect the layout tree, along side the DOM tree. It will need more functionality to be truly useful, but it's a start.
2020-06-12 23:30:11 +03:00
};
auto& bottom_tab_widget = splitter.add<GUI::TabWidget>();
LibGUI: Add helper for constructing new TabWidget tabs This patch adds the following convenience helper: auto tab_widget = GUI::TabWidget::construct(); auto my_widget = tab_widget->add_tab<GUI::Widget>("My tab", ...); The above is equivalent to: auto tab_widget = GUI::TabWidget::construct(); auto my_widget = GUI::Widget::construct(...); tab_widget->add_widget("My tab", my_widget);
2020-02-23 14:23:48 +03:00
Browser: Add some UI padding in the Inspector widget
2021-09-13 18:17:43 +03:00
auto& style_table_container = bottom_tab_widget.add_tab<GUI::Widget>("Styles");
style_table_container.set_layout<GUI::VerticalBoxLayout>();
style_table_container.layout()->set_margins({ 4, 4, 4, 4 });
m_style_table_view = style_table_container.add<GUI::TableView>();
auto& computed_style_table_container = bottom_tab_widget.add_tab<GUI::Widget>("Computed");
computed_style_table_container.set_layout<GUI::VerticalBoxLayout>();
computed_style_table_container.layout()->set_margins({ 4, 4, 4, 4 });
m_computed_style_table_view = computed_style_table_container.add<GUI::TableView>();
Browser+LibWeb+WebContent: Add variables display to Inspector This allows us to see which custom properties apply to a given element, which previously wasn't shown.
2021-12-08 14:51:26 +03:00
auto& custom_properties_table_container = bottom_tab_widget.add_tab<GUI::Widget>("Variables");
custom_properties_table_container.set_layout<GUI::VerticalBoxLayout>();
custom_properties_table_container.layout()->set_margins({ 4, 4, 4, 4 });
m_custom_properties_table_view = custom_properties_table_container.add<GUI::TableView>();
Browser: Add some UI padding in the Inspector widget
2021-09-13 18:17:43 +03:00
m_dom_tree_view->set_focus(true);
Browser+LibHTML: Add resolved element style to the DOM inspector When selecting an element in the browser's DOM inspector, we now also show the resolved CSS properties (and their values) for that element. Since the inspector was growing a bit more complex, I moved it out of the "show inspector" action callback and into its own class. In the future, we will probably want to migrate the inspector down to LibHTML to make it accessible to other clients of the library, but for now we can keep working on it inside Browser. :^)
2020-01-02 16:55:19 +03:00
}
InspectorWidget::~InspectorWidget()
{
}
Browser: Reset the DOM Inspector's state when re-opening it This resets the DOM Inspector to a default state when re-opening it, instead of it displaying the previous selection and properties, which may be outdated. This is closer to how Chrome and Firefox behave. Eventually, it probably makes sense to copy their behavior of selecting the `<body>` element by default.
2021-08-27 22:21:30 +03:00
void InspectorWidget::select_default_node()
{
clear_style_json();
// FIXME: Select the <body> element, or else the root node.
m_dom_tree_view->collapse_tree();
m_dom_tree_view->set_cursor({}, GUI::AbstractView::SelectionUpdate::ClearIfNotSelected);
}
LibWeb+Browser: Support DOM Inspector for OutOfProcessWebView This introduces a new DOMTreeJSONModel, which provides the Model for the InspectorWidget when the Browser is running using the OutOfProcessWebView. This Model is constructed with a JSON object received via IPC from the WebContentServer.
2021-06-08 00:21:16 +03:00
void InspectorWidget::set_dom_json(String json)
{
if (m_dom_json.has_value() && m_dom_json.value() == json)
return;
m_dom_json = json;
LibWeb+Browser: Show DOM comments with syntax_comment color in inspector This required a hack since models can't return a color role directly from data(). I've added a FIXME about it.
2021-11-02 21:32:26 +03:00
m_dom_tree_view->set_model(Web::DOMTreeModel::create(m_dom_json->view(), *m_dom_tree_view));
LibWeb+Browser: Support DOM Inspector for OutOfProcessWebView This introduces a new DOMTreeJSONModel, which provides the Model for the InspectorWidget when the Browser is running using the OutOfProcessWebView. This Model is constructed with a JSON object received via IPC from the WebContentServer.
2021-06-08 00:21:16 +03:00
Browser: Implement "Inspect Element" context menu action This is finally working for OOPWV! :^)
2021-08-27 19:40:25 +03:00
if (m_pending_inspect_node_id.has_value()) {
i32 node_id = m_pending_inspect_node_id.value();
m_pending_inspect_node_id.clear();
set_inspected_node(node_id);
Browser: Reset the DOM Inspector's state when re-opening it This resets the DOM Inspector to a default state when re-opening it, instead of it displaying the previous selection and properties, which may be outdated. This is closer to how Chrome and Firefox behave. Eventually, it probably makes sense to copy their behavior of selecting the `<body>` element by default.
2021-08-27 22:21:30 +03:00
} else {
select_default_node();
Browser: Implement "Inspect Element" context menu action This is finally working for OOPWV! :^)
2021-08-27 19:40:25 +03:00
}
LibWeb+Browser: Support DOM Inspector for OutOfProcessWebView This introduces a new DOMTreeJSONModel, which provides the Model for the InspectorWidget when the Browser is running using the OutOfProcessWebView. This Model is constructed with a JSON object received via IPC from the WebContentServer.
2021-06-08 00:21:16 +03:00
}
Browser: Reload the DOM Inspector's JSON data when loading a new page Of course, there are other reasons the DOM might change, but one thing at a time. :^)
2021-09-01 14:50:47 +03:00
void InspectorWidget::clear_dom_json()
{
m_dom_json.clear();
m_dom_tree_view->set_model(nullptr);
clear_style_json();
}
Browser+LibWeb+WebContent: Add variables display to Inspector This allows us to see which custom properties apply to a given element, which previously wasn't shown.
2021-12-08 14:51:26 +03:00
void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json)
Browser: Display style properties in DOM Inspector This makes use of the new `inspect_dom_node()` IPC call.
2021-09-02 14:05:32 +03:00
{
if (node_id != m_inspected_node_id) {
dbgln("Got data for the wrong node id! Wanted {}, got {}", m_inspected_node_id, node_id);
return;
}
Browser+LibWeb+WebContent: Add variables display to Inspector This allows us to see which custom properties apply to a given element, which previously wasn't shown.
2021-12-08 14:51:26 +03:00
load_style_json(specified_values_json, computed_values_json, custom_properties_json);
Browser: Implement "Inspect Element" context menu action This is finally working for OOPWV! :^)
2021-08-27 19:40:25 +03:00
}
Browser+LibWeb+WebContent: Add variables display to Inspector This allows us to see which custom properties apply to a given element, which previously wasn't shown.
2021-12-08 14:51:26 +03:00
void InspectorWidget::load_style_json(String specified_values_json, String computed_values_json, String custom_properties_json)
Browser: Implement "Inspect Element" context menu action This is finally working for OOPWV! :^)
2021-08-27 19:40:25 +03:00
{
Browser: Display style properties in DOM Inspector This makes use of the new `inspect_dom_node()` IPC call.
2021-09-02 14:05:32 +03:00
m_inspected_node_specified_values_json = specified_values_json;
m_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_specified_values_json.value().view()));
Browser+LibWeb+WebContent: Add variables display to Inspector This allows us to see which custom properties apply to a given element, which previously wasn't shown.
2021-12-08 14:51:26 +03:00
m_inspected_node_computed_values_json = computed_values_json;
Browser: Display style properties in DOM Inspector This makes use of the new `inspect_dom_node()` IPC call.
2021-09-02 14:05:32 +03:00
m_computed_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_computed_values_json.value().view()));
Browser+LibWeb+WebContent: Add variables display to Inspector This allows us to see which custom properties apply to a given element, which previously wasn't shown.
2021-12-08 14:51:26 +03:00
m_inspected_node_custom_properties_json = custom_properties_json;
m_custom_properties_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_custom_properties_json.value().view()));
Browser: Display style properties in DOM Inspector This makes use of the new `inspect_dom_node()` IPC call.
2021-09-02 14:05:32 +03:00
}
Browser: Reset the DOM Inspector's state when re-opening it This resets the DOM Inspector to a default state when re-opening it, instead of it displaying the previous selection and properties, which may be outdated. This is closer to how Chrome and Firefox behave. Eventually, it probably makes sense to copy their behavior of selecting the `<body>` element by default.
2021-08-27 22:21:30 +03:00
void InspectorWidget::clear_style_json()
{
m_inspected_node_specified_values_json.clear();
m_style_table_view->set_model(nullptr);
Browser+LibWeb+WebContent: Add variables display to Inspector This allows us to see which custom properties apply to a given element, which previously wasn't shown.
2021-12-08 14:51:26 +03:00
m_inspected_node_computed_values_json.clear();
Browser: Reset the DOM Inspector's state when re-opening it This resets the DOM Inspector to a default state when re-opening it, instead of it displaying the previous selection and properties, which may be outdated. This is closer to how Chrome and Firefox behave. Eventually, it probably makes sense to copy their behavior of selecting the `<body>` element by default.
2021-08-27 22:21:30 +03:00
m_computed_style_table_view->set_model(nullptr);
Browser+LibWeb+WebContent: Add variables display to Inspector This allows us to see which custom properties apply to a given element, which previously wasn't shown.
2021-12-08 14:51:26 +03:00
m_inspected_node_custom_properties_json.clear();
m_custom_properties_table_view->set_model(nullptr);
Browser: Reset the DOM Inspector's state when re-opening it This resets the DOM Inspector to a default state when re-opening it, instead of it displaying the previous selection and properties, which may be outdated. This is closer to how Chrome and Firefox behave. Eventually, it probably makes sense to copy their behavior of selecting the `<body>` element by default.
2021-08-27 22:21:30 +03:00
}
Browser: Move InspectorWidget into the Browser namespace
2020-05-08 22:38:30 +03:00
}
Reference in New Issue Copy Permalink