0ct0pu5/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-12-04 05:20:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

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
Notes: sideshowbarker 2024-07-16 23:05:02 +09:00 
Author: https://github.com/Epigenetic
Commit: https://github.com/SerenityOS/serenity/commit/afb07281ad
Pull-request: https://github.com/SerenityOS/serenity/pull/18960
Reviewed-by: https://github.com/AtkinsSJ ✅
Reviewed-by: https://github.com/kemzeb
13 changed files with 179 additions and 17 deletions
Show stats 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 = [&]() {

77
Userland/Libraries/LibWebView/AriaPropertiesStateModel.cpp Normal file
View file

@ -0,0 +1,77 @@
/*
* Copyright (c) 2023, Jonah Shafran <jonahshafran@gmail.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "AriaPropertiesStateModel.h"
namespace WebView {
AriaPropertiesStateModel::AriaPropertiesStateModel(JsonObject properties_state)
: m_properties_state(move(properties_state))
{
m_properties_state.for_each_member([&](auto property_name, JsonValue const& values) {
Value value;
value.name = property_name;
value.value = "";
m_values.append(value);
values.as_object().for_each_member([&](auto property_name, auto& property_value) {
Value value;
value.name = property_name;
value.value = property_value.to_deprecated_string();
m_values.append(value);
});
});
}
AriaPropertiesStateModel::~AriaPropertiesStateModel() = default;
int AriaPropertiesStateModel::row_count(GUI::ModelIndex const&) const
{
return m_values.size();
}
ErrorOr<String> AriaPropertiesStateModel::column_name(int column_index) const
{
switch (column_index) {
case Column::PropertyName:
return "Name"_short_string;
case Column::PropertyValue:
return "Value"_short_string;
default:
return Error::from_string_view("Unexpected column index"sv);
}
}
GUI::Variant AriaPropertiesStateModel::data(GUI::ModelIndex const& index, GUI::ModelRole role) const
{
auto& value = m_values[index.row()];
if (role == GUI::ModelRole::Display) {
if (index.column() == Column::PropertyName)
return value.name;
if (index.column() == Column::PropertyValue)
return value.value;
}
return {};
}
Vector<GUI::ModelIndex> AriaPropertiesStateModel::matches(AK::StringView searching, unsigned int flags, GUI::ModelIndex const& parent)
{
if (m_values.is_empty())
return {};
Vector<GUI::ModelIndex> found_indices;
for (auto it = m_values.begin(); !it.is_end(); ++it) {
GUI::ModelIndex index = this->index(it.index(), Column::PropertyName, parent);
if (!string_matches(data(index, GUI::ModelRole::Display).as_string(), searching, flags))
continue;
found_indices.append(index);
if (flags & FirstMatchOnly)
break;
}
return found_indices;
}
}

49
Userland/Libraries/LibWebView/AriaPropertiesStateModel.h Normal file
View file

@ -0,0 +1,49 @@
/*
* Copyright (c) 2023, Jonah Shafran <jonahshafran@gmail.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <AK/JsonObject.h>
#include <LibGUI/Model.h>
namespace WebView {
class AriaPropertiesStateModel final : public GUI::Model {
public:
enum Column {
PropertyName,
PropertyValue,
__Count
};
static ErrorOr<NonnullRefPtr<AriaPropertiesStateModel>> create(StringView properties_state)
{
auto json_or_error = TRY(JsonValue::from_string(properties_state));
return adopt_nonnull_ref_or_enomem(new AriaPropertiesStateModel(json_or_error.as_object()));
}
virtual ~AriaPropertiesStateModel() override;
virtual int row_count(GUI::ModelIndex const& = GUI::ModelIndex()) const override;
virtual int column_count(GUI::ModelIndex const& = GUI::ModelIndex()) const override { return Column::__Count; }
virtual ErrorOr<String> column_name(int) const override;
virtual GUI::Variant data(GUI::ModelIndex const&, GUI::ModelRole) const override;
virtual bool is_searchable() const override { return true; }
virtual Vector<GUI::ModelIndex> matches(StringView, unsigned flags, GUI::ModelIndex const&) override;
private:
explicit AriaPropertiesStateModel(JsonObject);
JsonObject m_properties_state;
struct Value {
DeprecatedString name;
DeprecatedString value;
};
Vector<Value> m_values;
};
}

1
Userland/Libraries/LibWebView/CMakeLists.txt
View file

@ -1,5 +1,6 @@
set(SOURCES
AccessibilityTreeModel.cpp
AriaPropertiesStateModel.cpp
DOMTreeModel.cpp
OutOfProcessWebView.cpp
RequestServerAdapter.cpp

1
Userland/Libraries/LibWebView/ViewImplementation.cpp
View file

@ -118,6 +118,7 @@ ErrorOr<ViewImplementation::DOMNodeProperties> ViewImplementation::inspect_dom_n
.resolved_style_json = TRY(String::from_deprecated_string(response.take_resolved_style())),
.custom_properties_json = TRY(String::from_deprecated_string(response.take_custom_properties())),
.node_box_sizing_json = TRY(String::from_deprecated_string(response.take_node_box_sizing())),
.aria_properties_state_json = TRY(String::from_deprecated_string(response.take_aria_properties_state())),
};
}

3
Userland/Libraries/LibWebView/ViewImplementation.h
View file

@ -44,6 +44,7 @@ public:
String resolved_style_json;
String custom_properties_json;
String node_box_sizing_json;
String aria_properties_state_json;
};
void set_url(Badge<WebContentClient>, AK::URL url) { m_url = move(url); }
@ -110,7 +111,7 @@ public:
Function<void(Gfx::Bitmap const&)> on_favicon_change;
Function<void(const AK::URL&, DeprecatedString const&)> on_get_source;
Function<void(DeprecatedString const&)> on_get_dom_tree;
Function<void(i32 node_id, DeprecatedString const& computed_style, DeprecatedString const& resolved_style, DeprecatedString const& custom_properties, DeprecatedString const& node_box_sizing)> on_get_dom_node_properties;
Function<void(i32 node_id, DeprecatedString const& computed_style, DeprecatedString const& resolved_style, DeprecatedString const& custom_properties, DeprecatedString const& node_box_sizing, DeprecatedString const& aria_properties_state)> on_get_dom_node_properties;
Function<void(DeprecatedString const&)> on_get_accessibility_tree;
Function<void(i32 message_id)> on_js_console_new_message;
Function<void(i32 start_index, Vector<DeprecatedString> const& message_types, Vector<DeprecatedString> const& messages)> on_get_js_console_messages;

4
Userland/Libraries/LibWebView/WebContentClient.cpp
View file

@ -194,10 +194,10 @@ void WebContentClient::did_get_dom_tree(DeprecatedString const& dom_tree)
m_view.on_get_dom_tree(dom_tree);
}
void WebContentClient::did_get_dom_node_properties(i32 node_id, DeprecatedString const& computed_style, DeprecatedString const& resolved_style, DeprecatedString const& custom_properties, DeprecatedString const& node_box_sizing)
void WebContentClient::did_get_dom_node_properties(i32 node_id, DeprecatedString const& computed_style, DeprecatedString const& resolved_style, DeprecatedString const& custom_properties, DeprecatedString const& node_box_sizing, DeprecatedString const& aria_properties_state)
{
if (m_view.on_get_dom_node_properties)
m_view.on_get_dom_node_properties(node_id, computed_style, resolved_style, custom_properties, node_box_sizing);
m_view.on_get_dom_node_properties(node_id, computed_style, resolved_style, custom_properties, node_box_sizing, aria_properties_state);
}
void WebContentClient::did_get_accessibility_tree(DeprecatedString const& accessibility_tree)

2
Userland/Libraries/LibWebView/WebContentClient.h
View file

@ -55,7 +55,7 @@ private:
virtual void did_request_media_context_menu(Gfx::IntPoint, DeprecatedString const&, unsigned, Web::Page::MediaContextMenu const&) override;
virtual void did_get_source(AK::URL const&, DeprecatedString const&) override;
virtual void did_get_dom_tree(DeprecatedString const&) override;
virtual void did_get_dom_node_properties(i32 node_id, DeprecatedString const& computed_style, DeprecatedString const& resolved_style, DeprecatedString const& custom_properties, DeprecatedString const& node_box_sizing) override;
virtual void did_get_dom_node_properties(i32 node_id, DeprecatedString const& computed_style, DeprecatedString const& resolved_style, DeprecatedString const& custom_properties, DeprecatedString const& node_box_sizing, DeprecatedString const& aria_properties_stae) override;
virtual void did_get_accessibility_tree(DeprecatedString const&) override;
virtual void did_output_js_console_message(i32 message_index) override;
virtual void did_get_js_console_messages(i32 start_index, Vector<DeprecatedString> const& message_types, Vector<DeprecatedString> const& messages) override;

29
Userland/Services/WebContent/ConnectionFromClient.cpp
View file

@ -17,6 +17,7 @@
#include <LibJS/Console.h>
#include <LibJS/Heap/Heap.h>
#include <LibJS/Runtime/ConsoleObject.h>
#include <LibWeb/ARIA/RoleType.h>
#include <LibWeb/Bindings/MainThreadVM.h>
#include <LibWeb/CSS/StyleComputer.h>
#include <LibWeb/DOM/Document.h>
@ -452,7 +453,7 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
Web::DOM::Node* node = Web::DOM::Node::from_id(node_id);
// Note: Nodes without layout (aka non-visible nodes, don't have style computed)
if (!node || !node->layout_node()) {
return { false, "", "", "", "" };
return { false, "", "", "", "", "" };
}
node->document().set_inspected_node(node, pseudo_element);
@ -460,7 +461,7 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
if (node->is_element()) {
auto& element = verify_cast<Web::DOM::Element>(*node);
if (!element.computed_css_values())
return { false, "", "", "", "" };
return { false, "", "", "", "", "" };
auto serialize_json = [](Web::CSS::StyleProperties const& properties) -> DeprecatedString {
StringBuilder builder;
@ -527,10 +528,25 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
return builder.to_deprecated_string();
};
auto serialize_aria_properties_state_json = [](Web::DOM::Element const& element) -> DeprecatedString {
auto role_name = element.role_or_default();
if (!role_name.has_value()) {
return "";
}
auto aria_data = MUST(Web::ARIA::AriaData::build_data(element));
auto role = MUST(Web::ARIA::RoleType::build_role_object(role_name.value(), element.is_focusable(), *aria_data));
StringBuilder builder;
auto serializer = MUST(JsonObjectSerializer<>::try_create(builder));
MUST(role->serialize_as_json(serializer));
MUST(serializer.finish());
return builder.to_deprecated_string();
};
if (pseudo_element.has_value()) {
auto pseudo_element_node = element.get_pseudo_element_node(pseudo_element.value());
if (!pseudo_element_node)
return { false, "", "", "", "" };
return { false, "", "", "", "", "" };
// FIXME: Pseudo-elements only exist as Layout::Nodes, which don't have style information
// in a format we can use. So, we run the StyleComputer again to get the specified
@ -540,17 +556,18 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
DeprecatedString resolved_values = "{}";
DeprecatedString custom_properties_json = serialize_custom_properties_json(element, pseudo_element);
DeprecatedString node_box_sizing_json = serialize_node_box_sizing_json(pseudo_element_node.ptr());
return { true, computed_values, resolved_values, custom_properties_json, node_box_sizing_json };
return { true, computed_values, resolved_values, custom_properties_json, node_box_sizing_json, "" };
}
DeprecatedString computed_values = serialize_json(*element.computed_css_values());
DeprecatedString resolved_values_json = serialize_json(element.resolved_css_values());
DeprecatedString custom_properties_json = serialize_custom_properties_json(element, {});
DeprecatedString node_box_sizing_json = serialize_node_box_sizing_json(element.layout_node());
return { true, computed_values, resolved_values_json, custom_properties_json, node_box_sizing_json };
DeprecatedString aria_properties_state_json = serialize_aria_properties_state_json(element);
return { true, computed_values, resolved_values_json, custom_properties_json, node_box_sizing_json, aria_properties_state_json };
}
return { false, "", "", "", "" };
return { false, "", "", "", "", "" };
}
Messages::WebContentServer::GetHoveredNodeIdResponse ConnectionFromClient::get_hovered_node_id()

2
Userland/Services/WebContent/WebContentClient.ipc
View file

@ -40,7 +40,7 @@ endpoint WebContentClient
did_request_dismiss_dialog() =|
did_get_source(URL url, DeprecatedString source) =|
did_get_dom_tree(DeprecatedString dom_tree) =|
did_get_dom_node_properties(i32 node_id, DeprecatedString computed_style, DeprecatedString resolved_style, DeprecatedString custom_properties, DeprecatedString node_box_sizing_json) =|
did_get_dom_node_properties(i32 node_id, DeprecatedString computed_style, DeprecatedString resolved_style, DeprecatedString custom_properties, DeprecatedString node_box_sizing_json, DeprecatedString aria_properties_state) =|
did_get_accessibility_tree(DeprecatedString accessibility_tree) =|
did_change_favicon(Gfx::ShareableBitmap favicon) =|
did_request_all_cookies(URL url) => (Vector<Web::Cookie::Cookie> cookies)

2
Userland/Services/WebContent/WebContentServer.ipc
View file

@ -39,7 +39,7 @@ endpoint WebContentServer
debug_request(DeprecatedString request, DeprecatedString argument) =|
get_source() =|
inspect_dom_tree() =|
inspect_dom_node(i32 node_id, Optional<Web::CSS::Selector::PseudoElement> pseudo_element) => (bool has_style, DeprecatedString computed_style, DeprecatedString resolved_style, DeprecatedString custom_properties, DeprecatedString node_box_sizing)
inspect_dom_node(i32 node_id, Optional<Web::CSS::Selector::PseudoElement> pseudo_element) => (bool has_style, DeprecatedString computed_style, DeprecatedString resolved_style, DeprecatedString custom_properties, DeprecatedString node_box_sizing, DeprecatedString aria_properties_state)
inspect_accessibility_tree() =|
get_hovered_node_id() => (i32 node_id)
js_console_input(DeprecatedString js_source) =|