diff --git a/Userland/Applications/Browser/InspectorWidget.cpp b/Userland/Applications/Browser/InspectorWidget.cpp index a8f5461ceb..b86ca4e4fd 100644 --- a/Userland/Applications/Browser/InspectorWidget.cpp +++ b/Userland/Applications/Browser/InspectorWidget.cpp @@ -7,94 +7,42 @@ */ #include "InspectorWidget.h" -#include "ElementSizePreviewWidget.h" #include "ModelAdapter.h" #include #include #include #include -#include -#include -#include +#include #include namespace Browser { -void InspectorWidget::set_selection(Selection selection) +NonnullRefPtr InspectorWidget::create(WebView::OutOfProcessWebView& content_view) { - if (!m_dom_loaded) { - // DOM Tree hasn't been loaded yet, so make a note to inspect it later. - m_pending_selection = move(selection); - return; - } - - auto* model = verify_cast(m_dom_tree_view->model()); - auto index = model->index_for_node(selection.dom_node_id, selection.pseudo_element); - if (!index.is_valid()) { - dbgln("InspectorWidget told to inspect non-existent node: {}", selection.to_string()); - return; - } - - m_dom_tree_view->expand_all_parents_of(index); - m_dom_tree_view->set_cursor(index, GUI::AbstractView::SelectionUpdate::Set); - set_selection(index); + return adopt_ref(*new (nothrow) InspectorWidget(content_view)); } -void InspectorWidget::set_selection(GUI::ModelIndex const index) -{ - if (!index.is_valid()) - return; - - auto* json = static_cast(index.internal_data()); - VERIFY(json); - - Selection selection {}; - if (json->has_u32("pseudo-element"sv)) { - selection.dom_node_id = json->get_i32("parent-id"sv).value_or(0); - selection.pseudo_element = static_cast(json->get_u32("pseudo-element"sv).value_or(0)); - } else { - selection.dom_node_id = json->get_i32("id"sv).value_or(0); - } - - if (selection == m_selection) - return; - m_selection = move(selection); - - auto maybe_inspected_node_properties = m_web_view->inspect_dom_node(m_selection.dom_node_id, m_selection.pseudo_element); - if (!maybe_inspected_node_properties.is_error()) { - 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(); - } -} - -InspectorWidget::InspectorWidget() +InspectorWidget::InspectorWidget(WebView::OutOfProcessWebView& content_view) { + set_layout(4); set_fill_with_background_color(true); - set_layout(4); auto& splitter = add(); - auto& top_tab_widget = splitter.add(); + m_inspector_view = splitter.add(); + m_inspector_client = make(content_view, *m_inspector_view); - auto& dom_tree_container = top_tab_widget.add_tab("DOM"_string); - dom_tree_container.set_layout(4); - m_dom_tree_view = dom_tree_container.add(); - m_dom_tree_view->on_selection_change = [this] { - const auto& index = m_dom_tree_view->selection().first(); - set_selection(index); - }; + m_inspector_client->on_dom_node_properties_received = [this](auto properties_or_error) { + if (properties_or_error.is_error()) { + clear_style_json(); + clear_node_box_model(); + } else { + auto properties = properties_or_error.release_value(); - auto& accessibility_tree_container = top_tab_widget.add_tab("Accessibility"_string); - accessibility_tree_container.set_layout(4); - m_accessibility_tree_view = accessibility_tree_container.add(); - m_accessibility_tree_view->on_selection_change = [this] { - const auto& index = m_accessibility_tree_view->selection().first(); - set_selection(index); + load_style_json(properties.computed_style_json, properties.resolved_style_json, properties.custom_properties_json); + update_node_box_model(properties.node_box_sizing_json); + update_aria_properties_state_model(properties.aria_properties_state_json); + } }; auto& bottom_tab_widget = splitter.add(); @@ -120,46 +68,31 @@ InspectorWidget::InspectorWidget() aria_properties_state_widget.set_layout(4); m_aria_properties_state_view = aria_properties_state_widget.add(); - m_dom_tree_view->set_focus(true); + m_inspector_view->set_focus(true); +} + +InspectorWidget::~InspectorWidget() = default; + +void InspectorWidget::inspect() +{ + m_inspector_client->inspect(); +} + +void InspectorWidget::reset() +{ + m_inspector_client->reset(); + clear_style_json(); + clear_node_box_model(); } void InspectorWidget::select_default_node() { - clear_style_json(); - - // FIXME: Select the element, or else the root node. - m_dom_tree_view->collapse_tree(); - m_dom_tree_view->set_cursor({}, GUI::AbstractView::SelectionUpdate::ClearIfNotSelected); + m_inspector_client->select_default_node(); } -void InspectorWidget::set_dom_json(StringView json) +void InspectorWidget::select_hovered_node() { - m_dom_tree_view->set_model(DOMTreeModel::create(*m_dom_tree_view, json).release_value_but_fixme_should_propagate_errors()); - m_dom_loaded = true; - - if (m_pending_selection.has_value()) - set_selection(m_pending_selection.release_value()); - else - select_default_node(); -} - -void InspectorWidget::clear_dom_json() -{ - m_dom_tree_view->set_model(nullptr); - clear_style_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, 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()); - return; - } - - 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); + m_inspector_client->select_hovered_node(); } void InspectorWidget::load_style_json(StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json) @@ -174,6 +107,18 @@ void InspectorWidget::load_style_json(StringView computed_values_json, StringVie m_custom_properties_table_view->set_searchable(true); } +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); + m_element_size_view->set_node_content_height(0); +} + void InspectorWidget::update_node_box_model(StringView node_box_sizing_json) { auto json_or_error = JsonValue::from_string(node_box_sizing_json); @@ -201,12 +146,6 @@ 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(PropertyTableModel::create(PropertyTableModel::Type::ARIAProperties, 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 {}; @@ -215,21 +154,10 @@ void InspectorWidget::clear_node_box_model() m_element_size_view->set_box_model(m_node_box_sizing); } -void InspectorWidget::clear_style_json() +void InspectorWidget::update_aria_properties_state_model(StringView aria_properties_state_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); - m_element_size_view->set_node_content_height(0); -} - -void InspectorWidget::set_accessibility_json(StringView json) -{ - m_accessibility_tree_view->set_model(TreeModel::create(TreeModel::Type::AccessibilityTree, json).release_value_but_fixme_should_propagate_errors()); + m_aria_properties_state_view->set_model(PropertyTableModel::create(PropertyTableModel::Type::ARIAProperties, aria_properties_state_json).release_value_but_fixme_should_propagate_errors()); + m_aria_properties_state_view->set_searchable(true); } } diff --git a/Userland/Applications/Browser/InspectorWidget.h b/Userland/Applications/Browser/InspectorWidget.h index 7a4efc8da2..517817d240 100644 --- a/Userland/Applications/Browser/InspectorWidget.h +++ b/Userland/Applications/Browser/InspectorWidget.h @@ -9,61 +9,41 @@ #pragma once #include "ElementSizePreviewWidget.h" -#include +#include #include -#include #include #include #include -#include namespace Browser { class InspectorWidget final : public GUI::Widget { C_OBJECT(InspectorWidget) + public: - struct Selection { - i32 dom_node_id { 0 }; - Optional pseudo_element {}; + static NonnullRefPtr create(WebView::OutOfProcessWebView& content_view); + virtual ~InspectorWidget(); - bool operator==(Selection const& other) const - { - return dom_node_id == other.dom_node_id && pseudo_element == other.pseudo_element; - } + void inspect(); + void reset(); - ErrorOr to_string() const - { - if (pseudo_element.has_value()) - return String::formatted("id: {}, pseudo: {}", dom_node_id, Web::CSS::pseudo_element_name(pseudo_element.value())); - return String::formatted("id: {}", dom_node_id); - } - }; - - virtual ~InspectorWidget() = default; - - void set_web_view(NonnullRefPtr 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, StringView aria_properties_state_json); - void set_accessibility_json(StringView); - - void set_selection(Selection); void select_default_node(); + void select_hovered_node(); private: - InspectorWidget(); + explicit InspectorWidget(WebView::OutOfProcessWebView& content_view); - 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 update_node_box_model(StringView node_box_sizing_json); void clear_node_box_model(); - RefPtr m_web_view; + void update_aria_properties_state_model(StringView aria_properties_state_json); + + RefPtr m_inspector_view; + OwnPtr m_inspector_client; - RefPtr m_dom_tree_view; - RefPtr m_accessibility_tree_view; RefPtr m_computed_style_table_view; RefPtr m_resolved_style_table_view; RefPtr m_custom_properties_table_view; @@ -71,10 +51,6 @@ private: RefPtr m_element_size_view; Web::Layout::BoxModelMetrics m_node_box_sizing; - - Optional m_pending_selection; - Selection m_selection; - bool m_dom_loaded { false }; }; } diff --git a/Userland/Applications/Browser/Tab.cpp b/Userland/Applications/Browser/Tab.cpp index b74551f40e..ca179a20f1 100644 --- a/Userland/Applications/Browser/Tab.cpp +++ b/Userland/Applications/Browser/Tab.cpp @@ -232,7 +232,7 @@ Tab::Tab(BrowserWindow& window) update_bookmark_button(url.to_deprecated_string()); if (m_dom_inspector_widget) - m_dom_inspector_widget->clear_dom_json(); + m_dom_inspector_widget->reset(); if (m_console_widget) m_console_widget->reset(); @@ -244,10 +244,8 @@ Tab::Tab(BrowserWindow& window) update_status(); - if (m_dom_inspector_widget) { - m_web_content_view->inspect_dom_tree(); - m_web_content_view->inspect_accessibility_tree(); - } + if (m_dom_inspector_widget) + m_dom_inspector_widget->inspect(); }; view().on_navigate_back = [this]() { @@ -575,16 +573,6 @@ Tab::Tab(BrowserWindow& window) view_source(url, source); }; - view().on_received_dom_tree = [this](auto& dom_tree) { - if (m_dom_inspector_widget) - m_dom_inspector_widget->set_dom_json(dom_tree); - }; - - view().on_received_accessibility_tree = [this](auto& accessibility_tree) { - if (m_dom_inspector_widget) - m_dom_inspector_widget->set_accessibility_json(accessibility_tree); - }; - auto focus_location_box_action = GUI::Action::create( "Focus location box", { Mod_Ctrl, Key_L }, Key_F6, [this](auto&) { m_location_box->set_focus(true); @@ -882,16 +870,12 @@ void Tab::show_inspector_window(Browser::Tab::InspectorTarget inspector_target) window->on_close = [&]() { m_web_content_view->clear_inspected_dom_node(); }; - m_dom_inspector_widget = window->set_main_widget(); - m_dom_inspector_widget->set_web_view(*m_web_content_view); - m_web_content_view->inspect_dom_tree(); - m_web_content_view->inspect_accessibility_tree(); + + m_dom_inspector_widget = window->set_main_widget(*m_web_content_view); } if (inspector_target == InspectorTarget::HoveredElement) { - // FIXME: Handle pseudo-elements - auto hovered_node = m_web_content_view->get_hovered_node_id(); - m_dom_inspector_widget->set_selection({ hovered_node }); + m_dom_inspector_widget->select_hovered_node(); } else { VERIFY(inspector_target == InspectorTarget::Document); m_dom_inspector_widget->select_default_node();