1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 00:47:45 +00:00

Browser+LibWebView: Load and Display ARIA Properites and State

The inspector widget now has a new ARIA tab which displays an
individual element's ARIA properties and state. The view itself
is pretty basic for now, just being a table- there is definitely room
for some better UX here but it's enough for a first cut.
This commit is contained in:
Jonah 2023-05-21 08:52:03 -05:00 committed by Sam Atkins
parent e9840bfd4e
commit afb07281ad
13 changed files with 179 additions and 17 deletions

View file

@ -16,6 +16,7 @@
#include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/Element.h>
#include <LibWebView/AccessibilityTreeModel.h>
#include <LibWebView/AriaPropertiesStateModel.h>
#include <LibWebView/DOMTreeModel.h>
#include <LibWebView/OutOfProcessWebView.h>
#include <LibWebView/StylePropertiesModel.h>
@ -67,6 +68,7 @@ void InspectorWidget::set_selection(GUI::ModelIndex const index)
auto inspected_node_properties = maybe_inspected_node_properties.release_value();
load_style_json(inspected_node_properties.computed_style_json, inspected_node_properties.resolved_style_json, inspected_node_properties.custom_properties_json);
update_node_box_model(inspected_node_properties.node_box_sizing_json);
update_aria_properties_state_model(inspected_node_properties.aria_properties_state_json);
} else {
clear_style_json();
clear_node_box_model();
@ -117,6 +119,10 @@ InspectorWidget::InspectorWidget()
m_element_size_view = box_model_widget.add<ElementSizePreviewWidget>();
m_element_size_view->set_should_hide_unnecessary_scrollbars(true);
auto& aria_properties_state_widget = bottom_tab_widget.add_tab<GUI::Widget>("ARIA"_string.release_value_but_fixme_should_propagate_errors());
aria_properties_state_widget.set_layout<GUI::VerticalBoxLayout>(4);
m_aria_properties_state_view = aria_properties_state_widget.add<GUI::TableView>();
m_dom_tree_view->set_focus(true);
}
@ -146,7 +152,7 @@ void InspectorWidget::clear_dom_json()
m_dom_loaded = false;
}
void 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)
void 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, StringView aria_properties_state_json)
{
if (selection != m_selection) {
dbgln("Got data for the wrong node id! Wanted ({}), got ({})", m_selection.to_string(), selection.to_string());
@ -155,6 +161,7 @@ void InspectorWidget::set_dom_node_properties_json(Selection selection, StringVi
load_style_json(computed_values_json, resolved_values_json, custom_properties_json);
update_node_box_model(node_box_sizing_json);
update_aria_properties_state_model(aria_properties_state_json);
}
void InspectorWidget::load_style_json(StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json)
@ -196,6 +203,12 @@ void InspectorWidget::update_node_box_model(StringView node_box_sizing_json)
m_element_size_view->set_box_model(m_node_box_sizing);
}
void InspectorWidget::update_aria_properties_state_model(StringView aria_properties_state_json)
{
m_aria_properties_state_view->set_model(WebView::AriaPropertiesStateModel::create(aria_properties_state_json).release_value_but_fixme_should_propagate_errors());
m_aria_properties_state_view->set_searchable(true);
}
void InspectorWidget::clear_node_box_model()
{
m_node_box_sizing = Web::Layout::BoxModelMetrics {};
@ -209,6 +222,7 @@ void InspectorWidget::clear_style_json()
m_computed_style_table_view->set_model(nullptr);
m_resolved_style_table_view->set_model(nullptr);
m_custom_properties_table_view->set_model(nullptr);
m_aria_properties_state_view->set_model(nullptr);
m_element_size_view->set_box_model({});
m_element_size_view->set_node_content_width(0);

View file

@ -44,7 +44,7 @@ public:
void set_web_view(NonnullRefPtr<WebView::OutOfProcessWebView> web_view) { m_web_view = web_view; }
void set_dom_json(StringView);
void clear_dom_json();
void set_dom_node_properties_json(Selection, StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json, StringView node_box_sizing_json);
void set_dom_node_properties_json(Selection, StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json, StringView node_box_sizing_json, StringView aria_properties_state_json);
void set_accessibility_json(StringView);
void set_selection(Selection);
@ -56,6 +56,7 @@ private:
void set_selection(GUI::ModelIndex);
void load_style_json(StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json);
void update_node_box_model(StringView node_box_sizing_json);
void update_aria_properties_state_model(StringView aria_properties_state_json);
void clear_style_json();
void clear_node_box_model();
@ -66,6 +67,7 @@ private:
RefPtr<GUI::TableView> m_computed_style_table_view;
RefPtr<GUI::TableView> m_resolved_style_table_view;
RefPtr<GUI::TableView> m_custom_properties_table_view;
RefPtr<GUI::TableView> m_aria_properties_state_view;
RefPtr<ElementSizePreviewWidget> m_element_size_view;
Web::Layout::BoxModelMetrics m_node_box_sizing;

View file

@ -519,8 +519,8 @@ Tab::Tab(BrowserWindow& window)
m_dom_inspector_widget->set_dom_json(dom_tree);
};
view().on_get_dom_node_properties = [this](auto node_id, auto& specified, auto& computed, auto& custom_properties, auto& node_box_sizing) {
m_dom_inspector_widget->set_dom_node_properties_json({ node_id }, specified, computed, custom_properties, node_box_sizing);
view().on_get_dom_node_properties = [this](auto node_id, auto& specified, auto& computed, auto& custom_properties, auto& node_box_sizing, auto& aria_properties_state) {
m_dom_inspector_widget->set_dom_node_properties_json({ node_id }, specified, computed, custom_properties, node_box_sizing, aria_properties_state);
};
view().on_get_accessibility_tree = [this](auto& accessibility_tree) {
@ -821,7 +821,7 @@ void Tab::show_inspector_window(Browser::Tab::InspectorTarget inspector_target)
if (!m_dom_inspector_widget) {
auto window = GUI::Window::construct(&this->window());
window->set_window_mode(GUI::WindowMode::Modeless);
window->resize(300, 500);
window->resize(325, 500);
window->set_title("Inspector");
window->set_icon(g_icon_bag.inspector_object);
window->on_close = [&]() {