jcs.org
Serenity Operating System
1/*
2 * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
3 * Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
4 * Copyright (c) 2022, the SerenityOS developers.
5 *
6 * SPDX-License-Identifier: BSD-2-Clause
7 */
8
9#include "InspectorWidget.h"
10#include "ElementSizePreviewWidget.h"
11#include <LibGUI/BoxLayout.h>
12#include <LibGUI/Splitter.h>
13#include <LibGUI/TabWidget.h>
14#include <LibGUI/TableView.h>
15#include <LibGUI/TreeView.h>
16#include <LibWeb/DOM/Document.h>
17#include <LibWeb/DOM/Element.h>
18#include <LibWebView/AccessibilityTreeModel.h>
19#include <LibWebView/DOMTreeModel.h>
20#include <LibWebView/OutOfProcessWebView.h>
21#include <LibWebView/StylePropertiesModel.h>
22
23namespace Browser {
24
25void InspectorWidget::set_selection(Selection selection)
26{
27 if (!m_dom_loaded) {
28 // DOM Tree hasn't been loaded yet, so make a note to inspect it later.
29 m_pending_selection = move(selection);
30 return;
31 }
32
33 auto* model = verify_cast<WebView::DOMTreeModel>(m_dom_tree_view->model());
34 auto index = model->index_for_node(selection.dom_node_id, selection.pseudo_element);
35 if (!index.is_valid()) {
36 dbgln("InspectorWidget told to inspect non-existent node: {}", selection.to_string());
37 return;
38 }
39
40 m_dom_tree_view->expand_all_parents_of(index);
41 m_dom_tree_view->set_cursor(index, GUI::AbstractView::SelectionUpdate::Set);
42 set_selection(index);
43}
44
45void InspectorWidget::set_selection(GUI::ModelIndex const index)
46{
47 if (!index.is_valid())
48 return;
49
50 auto* json = static_cast<JsonObject const*>(index.internal_data());
51 VERIFY(json);
52
53 Selection selection {};
54 if (json->has_u32("pseudo-element"sv)) {
55 selection.dom_node_id = json->get_i32("parent-id"sv).value_or(0);
56 selection.pseudo_element = static_cast<Web::CSS::Selector::PseudoElement>(json->get_u32("pseudo-element"sv).value_or(0));
57 } else {
58 selection.dom_node_id = json->get_i32("id"sv).value_or(0);
59 }
60
61 if (selection == m_selection)
62 return;
63 m_selection = move(selection);
64
65 auto maybe_inspected_node_properties = m_web_view->inspect_dom_node(m_selection.dom_node_id, m_selection.pseudo_element);
66 if (!maybe_inspected_node_properties.is_error()) {
67 auto inspected_node_properties = maybe_inspected_node_properties.release_value();
68 load_style_json(inspected_node_properties.computed_style_json, inspected_node_properties.resolved_style_json, inspected_node_properties.custom_properties_json);
69 update_node_box_model(inspected_node_properties.node_box_sizing_json);
70 } else {
71 clear_style_json();
72 clear_node_box_model();
73 }
74}
75
76InspectorWidget::InspectorWidget()
77{
78 set_fill_with_background_color(true);
79
80 set_layout<GUI::VerticalBoxLayout>(4);
81 auto& splitter = add<GUI::VerticalSplitter>();
82
83 auto& top_tab_widget = splitter.add<GUI::TabWidget>();
84
85 auto& dom_tree_container = top_tab_widget.add_tab<GUI::Widget>("DOM");
86 dom_tree_container.set_layout<GUI::VerticalBoxLayout>(4);
87 m_dom_tree_view = dom_tree_container.add<GUI::TreeView>();
88 m_dom_tree_view->on_selection_change = [this] {
89 const auto& index = m_dom_tree_view->selection().first();
90 set_selection(index);
91 };
92
93 auto& accessibility_tree_container = top_tab_widget.add_tab<GUI::Widget>("Accessibility");
94 accessibility_tree_container.set_layout<GUI::VerticalBoxLayout>(4);
95 m_accessibility_tree_view = accessibility_tree_container.add<GUI::TreeView>();
96
97 auto& bottom_tab_widget = splitter.add<GUI::TabWidget>();
98
99 auto& computed_style_table_container = bottom_tab_widget.add_tab<GUI::Widget>("Computed");
100 computed_style_table_container.set_layout<GUI::VerticalBoxLayout>(4);
101 m_computed_style_table_view = computed_style_table_container.add<GUI::TableView>();
102
103 auto& resolved_style_table_container = bottom_tab_widget.add_tab<GUI::Widget>("Resolved");
104 resolved_style_table_container.set_layout<GUI::VerticalBoxLayout>(4);
105 m_resolved_style_table_view = resolved_style_table_container.add<GUI::TableView>();
106
107 auto& custom_properties_table_container = bottom_tab_widget.add_tab<GUI::Widget>("Variables");
108 custom_properties_table_container.set_layout<GUI::VerticalBoxLayout>(4);
109 m_custom_properties_table_view = custom_properties_table_container.add<GUI::TableView>();
110
111 auto& box_model_widget = bottom_tab_widget.add_tab<GUI::Widget>("Box Model");
112 box_model_widget.set_layout<GUI::VerticalBoxLayout>(4);
113 m_element_size_view = box_model_widget.add<ElementSizePreviewWidget>();
114 m_element_size_view->set_should_hide_unnecessary_scrollbars(true);
115
116 m_dom_tree_view->set_focus(true);
117}
118
119void InspectorWidget::select_default_node()
120{
121 clear_style_json();
122
123 // FIXME: Select the <body> element, or else the root node.
124 m_dom_tree_view->collapse_tree();
125 m_dom_tree_view->set_cursor({}, GUI::AbstractView::SelectionUpdate::ClearIfNotSelected);
126}
127
128void InspectorWidget::set_dom_json(StringView json)
129{
130 m_dom_tree_view->set_model(WebView::DOMTreeModel::create(json, *m_dom_tree_view));
131 if (m_pending_selection.has_value())
132 set_selection(m_pending_selection.release_value());
133 else
134 select_default_node();
135 m_dom_loaded = true;
136}
137
138void InspectorWidget::clear_dom_json()
139{
140 m_dom_tree_view->set_model(nullptr);
141 clear_style_json();
142 m_dom_loaded = false;
143}
144
145void InspectorWidget::set_dom_node_properties_json(Selection selection, StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json, StringView node_box_sizing_json)
146{
147 if (selection != m_selection) {
148 dbgln("Got data for the wrong node id! Wanted ({}), got ({})", m_selection.to_string(), selection.to_string());
149 return;
150 }
151
152 load_style_json(computed_values_json, resolved_values_json, custom_properties_json);
153 update_node_box_model(node_box_sizing_json);
154}
155
156void InspectorWidget::load_style_json(StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json)
157{
158 m_computed_style_table_view->set_model(WebView::StylePropertiesModel::create(computed_values_json));
159 m_computed_style_table_view->set_searchable(true);
160
161 m_resolved_style_table_view->set_model(WebView::StylePropertiesModel::create(resolved_values_json));
162 m_resolved_style_table_view->set_searchable(true);
163
164 m_custom_properties_table_view->set_model(WebView::StylePropertiesModel::create(custom_properties_json));
165 m_custom_properties_table_view->set_searchable(true);
166}
167
168void InspectorWidget::update_node_box_model(StringView node_box_sizing_json)
169{
170 auto json_or_error = JsonValue::from_string(node_box_sizing_json);
171 if (json_or_error.is_error() || !json_or_error.value().is_object()) {
172 return;
173 }
174 auto json_value = json_or_error.release_value();
175 auto const& json_object = json_value.as_object();
176
177 m_node_box_sizing.margin.top = json_object.get_float("margin_top"sv).value_or(0);
178 m_node_box_sizing.margin.right = json_object.get_float("margin_right"sv).value_or(0);
179 m_node_box_sizing.margin.bottom = json_object.get_float("margin_bottom"sv).value_or(0);
180 m_node_box_sizing.margin.left = json_object.get_float("margin_left"sv).value_or(0);
181 m_node_box_sizing.padding.top = json_object.get_float("padding_top"sv).value_or(0);
182 m_node_box_sizing.padding.right = json_object.get_float("padding_right"sv).value_or(0);
183 m_node_box_sizing.padding.bottom = json_object.get_float("padding_bottom"sv).value_or(0);
184 m_node_box_sizing.padding.left = json_object.get_float("padding_left"sv).value_or(0);
185 m_node_box_sizing.border.top = json_object.get_float("border_top"sv).value_or(0);
186 m_node_box_sizing.border.right = json_object.get_float("border_right"sv).value_or(0);
187 m_node_box_sizing.border.bottom = json_object.get_float("border_bottom"sv).value_or(0);
188 m_node_box_sizing.border.left = json_object.get_float("border_left"sv).value_or(0);
189
190 m_element_size_view->set_node_content_width(json_object.get_float("content_width"sv).value_or(0));
191 m_element_size_view->set_node_content_height(json_object.get_float("content_height"sv).value_or(0));
192 m_element_size_view->set_box_model(m_node_box_sizing);
193}
194
195void InspectorWidget::clear_node_box_model()
196{
197 m_node_box_sizing = Web::Layout::BoxModelMetrics {};
198 m_element_size_view->set_node_content_width(0);
199 m_element_size_view->set_node_content_height(0);
200 m_element_size_view->set_box_model(m_node_box_sizing);
201}
202
203void InspectorWidget::clear_style_json()
204{
205 m_computed_style_table_view->set_model(nullptr);
206 m_resolved_style_table_view->set_model(nullptr);
207 m_custom_properties_table_view->set_model(nullptr);
208
209 m_element_size_view->set_box_model({});
210 m_element_size_view->set_node_content_width(0);
211 m_element_size_view->set_node_content_height(0);
212}
213
214void InspectorWidget::set_accessibility_json(StringView json)
215{
216 m_accessibility_tree_view->set_model(WebView::AccessibilityTreeModel::create(json, *m_accessibility_tree_view));
217
218 // TODO: Support selections from accessibility tab
219}
220
221}