Browser: Port the Inspector to the WebView InspectorClient

Userland/Applications/Browser/InspectorWidget.cpp

@@ -7,94 +7,42 @@
  */
 
 #include "InspectorWidget.h"
-#include "ElementSizePreviewWidget.h"
 #include "ModelAdapter.h"
 #include <LibGUI/BoxLayout.h>
 #include <LibGUI/Splitter.h>
 #include <LibGUI/TabWidget.h>
 #include <LibGUI/TableView.h>
-#include <LibGUI/TreeView.h>
+#include <LibWebView/InspectorClient.h>
-#include <LibWeb/DOM/Document.h>
-#include <LibWeb/DOM/Element.h>
 #include <LibWebView/OutOfProcessWebView.h>
 
 namespace Browser {
 
-void InspectorWidget::set_selection(Selection selection)
+NonnullRefPtr<InspectorWidget> InspectorWidget::create(WebView::OutOfProcessWebView& content_view)
 {
-    if (!m_dom_loaded) {
+    return adopt_ref(*new (nothrow) InspectorWidget(content_view));
-        // 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<DOMTreeModel>(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);
 }
 
-void InspectorWidget::set_selection(GUI::ModelIndex const index)
+InspectorWidget::InspectorWidget(WebView::OutOfProcessWebView& content_view)
-{
-    if (!index.is_valid())
-        return;
-
-    auto* json = static_cast<JsonObject const*>(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<Web::CSS::Selector::PseudoElement>(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()
 {
+    set_layout<GUI::VerticalBoxLayout>(4);
     set_fill_with_background_color(true);
 
-    set_layout<GUI::VerticalBoxLayout>(4);
     auto& splitter = add<GUI::VerticalSplitter>();
 
-    auto& top_tab_widget = splitter.add<GUI::TabWidget>();
+    m_inspector_view = splitter.add<WebView::OutOfProcessWebView>();
+    m_inspector_client = make<WebView::InspectorClient>(content_view, *m_inspector_view);
 
-    auto& dom_tree_container = top_tab_widget.add_tab<GUI::Widget>("DOM"_string);
+    m_inspector_client->on_dom_node_properties_received = [this](auto properties_or_error) {
-    dom_tree_container.set_layout<GUI::VerticalBoxLayout>(4);
+        if (properties_or_error.is_error()) {
-    m_dom_tree_view = dom_tree_container.add<GUI::TreeView>();
+            clear_style_json();
-    m_dom_tree_view->on_selection_change = [this] {
+            clear_node_box_model();
-        const auto& index = m_dom_tree_view->selection().first();
+        } else {
-        set_selection(index);
+            auto properties = properties_or_error.release_value();
-    };
 
-    auto& accessibility_tree_container = top_tab_widget.add_tab<GUI::Widget>("Accessibility"_string);
+            load_style_json(properties.computed_style_json, properties.resolved_style_json, properties.custom_properties_json);
-    accessibility_tree_container.set_layout<GUI::VerticalBoxLayout>(4);
+            update_node_box_model(properties.node_box_sizing_json);
-    m_accessibility_tree_view = accessibility_tree_container.add<GUI::TreeView>();
+            update_aria_properties_state_model(properties.aria_properties_state_json);
-    m_accessibility_tree_view->on_selection_change = [this] {
+        }
-        const auto& index = m_accessibility_tree_view->selection().first();
-        set_selection(index);
     };
 
     auto& bottom_tab_widget = splitter.add<GUI::TabWidget>();
@@ -120,46 +68,31 @@ InspectorWidget::InspectorWidget()
     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);
+    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();
+    m_inspector_client->select_default_node();
-
-    // FIXME: Select the <body> element, or else the root node.
-    m_dom_tree_view->collapse_tree();
-    m_dom_tree_view->set_cursor({}, GUI::AbstractView::SelectionUpdate::ClearIfNotSelected);
 }
 
-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_inspector_client->select_hovered_node();
-    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);
 }
 
 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_aria_properties_state_view->set_model(PropertyTableModel::create(PropertyTableModel::Type::ARIAProperties, aria_properties_state_json).release_value_but_fixme_should_propagate_errors());
-    m_resolved_style_table_view->set_model(nullptr);
+    m_aria_properties_state_view->set_searchable(true);
-    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());
 }
 
 }

Userland/Applications/Browser/InspectorWidget.h

@@ -9,61 +9,41 @@
 #pragma once
 
 #include "ElementSizePreviewWidget.h"
-#include <AK/String.h>
+#include <AK/StringView.h>
 #include <LibGUI/Widget.h>
-#include <LibWeb/CSS/Selector.h>
 #include <LibWeb/Forward.h>
 #include <LibWeb/Layout/BoxModelMetrics.h>
 #include <LibWebView/Forward.h>
-#include <LibWebView/OutOfProcessWebView.h>
 
 namespace Browser {
 
 class InspectorWidget final : public GUI::Widget {
     C_OBJECT(InspectorWidget)
+
 public:
-    struct Selection {
+    static NonnullRefPtr<InspectorWidget> create(WebView::OutOfProcessWebView& content_view);
-        i32 dom_node_id { 0 };
+    virtual ~InspectorWidget();
-        Optional<Web::CSS::Selector::PseudoElement> pseudo_element {};
 
-        bool operator==(Selection const& other) const
+    void inspect();
-        {
+    void reset();
-            return dom_node_id == other.dom_node_id && pseudo_element == other.pseudo_element;
-        }
 
-        ErrorOr<String> 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<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, 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<WebView::OutOfProcessWebView> m_web_view;
+    void update_aria_properties_state_model(StringView aria_properties_state_json);
+
+    RefPtr<WebView::OutOfProcessWebView> m_inspector_view;
+    OwnPtr<WebView::InspectorClient> m_inspector_client;
 
-    RefPtr<GUI::TreeView> m_dom_tree_view;
-    RefPtr<GUI::TreeView> m_accessibility_tree_view;
     RefPtr<GUI::TableView> m_computed_style_table_view;
     RefPtr<GUI::TableView> m_resolved_style_table_view;
     RefPtr<GUI::TableView> m_custom_properties_table_view;
@@ -71,10 +51,6 @@ private:
     RefPtr<ElementSizePreviewWidget> m_element_size_view;
 
     Web::Layout::BoxModelMetrics m_node_box_sizing;
-
-    Optional<Selection> m_pending_selection;
-    Selection m_selection;
-    bool m_dom_loaded { false };
 };
 
 }

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) {
+        if (m_dom_inspector_widget)
-            m_web_content_view->inspect_dom_tree();
+            m_dom_inspector_widget->inspect();
-            m_web_content_view->inspect_accessibility_tree();
-        }
     };
 
     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<InspectorWidget>();
+
-        m_dom_inspector_widget->set_web_view(*m_web_content_view);
+        m_dom_inspector_widget = window->set_main_widget<InspectorWidget>(*m_web_content_view);
-        m_web_content_view->inspect_dom_tree();
-        m_web_content_view->inspect_accessibility_tree();
     }
 
     if (inspector_target == InspectorTarget::HoveredElement) {
-        // FIXME: Handle pseudo-elements
+        m_dom_inspector_widget->select_hovered_node();
-        auto hovered_node = m_web_content_view->get_hovered_node_id();
-        m_dom_inspector_widget->set_selection({ hovered_node });
     } else {
         VERIFY(inspector_target == InspectorTarget::Document);
         m_dom_inspector_widget->select_default_node();