mirror of
https://github.com/RGBCube/serenity
synced 2025-07-28 09:57:36 +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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 = [&]() {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue