mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 07:47:37 +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:
parent
e9840bfd4e
commit
afb07281ad
13 changed files with 179 additions and 17 deletions
|
@ -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);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue