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

Browser+LibWebView: Load and Display ARIA Properites and State

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

16
Userland/Applications/Browser/InspectorWidget.cpp
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);

4
Userland/Applications/Browser/InspectorWidget.h
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;

6
Userland/Applications/Browser/Tab.cpp
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 = [&]() {