LibDevTools: Support highlighting DOM nodes hovered in the inspector

Author: https://github.com/trflynn89
Commit: 6e8d77ff7f
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3666
Reviewed-by: https://github.com/AtkinsSJ

Libraries/LibDevTools/Actors/FrameActor.cpp

@@ -35,6 +35,14 @@ void FrameActor::handle_message(StringView type, JsonObject const&)
     JsonObject response;
     response.set("from"sv, name());
 
+    if (type == "detach"sv) {
+        if (auto tab = m_tab.strong_ref())
+            tab->reset_selected_node();
+
+        send_message(move(response));
+        return;
+    }
+
     if (type == "listFrames"sv) {
         send_message(move(response));
         return;

Libraries/LibDevTools/Actors/HighlighterActor.cpp

@@ -6,33 +6,58 @@
 
 #include <AK/JsonObject.h>
 #include <LibDevTools/Actors/HighlighterActor.h>
+#include <LibDevTools/Actors/InspectorActor.h>
+#include <LibDevTools/Actors/TabActor.h>
+#include <LibDevTools/Actors/WalkerActor.h>
+#include <LibDevTools/DevToolsDelegate.h>
+#include <LibDevTools/DevToolsServer.h>
 
 namespace DevTools {
 
-NonnullRefPtr<HighlighterActor> HighlighterActor::create(DevToolsServer& devtools, String name)
+NonnullRefPtr<HighlighterActor> HighlighterActor::create(DevToolsServer& devtools, String name, WeakPtr<InspectorActor> inspector)
 {
-    return adopt_ref(*new HighlighterActor(devtools, move(name)));
+    return adopt_ref(*new HighlighterActor(devtools, move(name), move(inspector)));
 }
 
-HighlighterActor::HighlighterActor(DevToolsServer& devtools, String name)
+HighlighterActor::HighlighterActor(DevToolsServer& devtools, String name, WeakPtr<InspectorActor> inspector)
     : Actor(devtools, move(name))
+    , m_inspector(move(inspector))
 {
 }
 
 HighlighterActor::~HighlighterActor() = default;
 
-void HighlighterActor::handle_message(StringView type, JsonObject const&)
+void HighlighterActor::handle_message(StringView type, JsonObject const& message)
 {
     JsonObject response;
     response.set("from"sv, name());
 
     if (type == "show"sv) {
+        auto node = message.get_string("node"sv);
+        if (!node.has_value()) {
+            send_missing_parameter_error("node"sv);
+            return;
+        }
+
+        auto tab = InspectorActor::tab_for(m_inspector);
+        auto walker = InspectorActor::walker_for(m_inspector);
+        response.set("value"sv, false);
+
+        if (tab && walker) {
+            if (auto const& dom_node = walker->dom_node(*node); dom_node.has_value()) {
+                devtools().delegate().highlight_dom_node(tab->description(), dom_node->id, dom_node->pseudo_element);
                 response.set("value"sv, true);
+            }
+        }
+
         send_message(move(response));
         return;
     }
 
     if (type == "hide"sv) {
+        if (auto tab = InspectorActor::tab_for(m_inspector))
+            devtools().delegate().clear_highlighted_dom_node(tab->description());
+
         send_message(move(response));
         return;
     }

Libraries/LibDevTools/Actors/HighlighterActor.h

@@ -15,14 +15,16 @@ class HighlighterActor final : public Actor {
 public:
     static constexpr auto base_name = "highlighter"sv;
 
-    static NonnullRefPtr<HighlighterActor> create(DevToolsServer&, String name);
+    static NonnullRefPtr<HighlighterActor> create(DevToolsServer&, String name, WeakPtr<InspectorActor>);
     virtual ~HighlighterActor() override;
 
     virtual void handle_message(StringView type, JsonObject const&) override;
     JsonValue serialize_highlighter() const;
 
 private:
-    HighlighterActor(DevToolsServer&, String name);
+    HighlighterActor(DevToolsServer&, String name, WeakPtr<InspectorActor>);
+
+    WeakPtr<InspectorActor> m_inspector;
 };
 
 }

Libraries/LibDevTools/Actors/InspectorActor.cpp

@@ -51,7 +51,7 @@ void InspectorActor::handle_message(StringView type, JsonObject const& message)
         }
 
         auto highlighter = m_highlighters.ensure(*type_name, [&]() -> NonnullRefPtr<HighlighterActor> {
-            return devtools().register_actor<HighlighterActor>();
+            return devtools().register_actor<HighlighterActor>(*this);
         });
 
         response.set("highlighter"sv, highlighter->serialize_highlighter());
@@ -82,12 +82,19 @@ void InspectorActor::handle_message(StringView type, JsonObject const& message)
         return;
     }
 
+    if (type == "supportsHighlighters"sv) {
+        response.set("value"sv, true);
+        send_message(move(response));
+        return;
+    }
+
     send_unrecognized_packet_type_error(type);
 }
 
 void InspectorActor::received_dom_tree(JsonObject dom_tree, BlockToken block_token)
 {
     auto& walker_actor = devtools().register_actor<WalkerActor>(m_tab, move(dom_tree));
+    m_walker = walker_actor;
 
     JsonObject walker;
     walker.set("actor"sv, walker_actor.name());
@@ -99,4 +106,18 @@ void InspectorActor::received_dom_tree(JsonObject dom_tree, BlockToken block_tok
     send_message(move(message), move(block_token));
 }
 
+RefPtr<TabActor> InspectorActor::tab_for(WeakPtr<InspectorActor> const& weak_inspector)
+{
+    if (auto inspector = weak_inspector.strong_ref())
+        return inspector->m_tab.strong_ref();
+    return {};
+}
+
+RefPtr<WalkerActor> InspectorActor::walker_for(WeakPtr<InspectorActor> const& weak_inspector)
+{
+    if (auto inspector = weak_inspector.strong_ref())
+        return inspector->m_walker.strong_ref();
+    return {};
+}
+
 }

Libraries/LibDevTools/Actors/InspectorActor.h

@@ -21,12 +21,16 @@ public:
 
     virtual void handle_message(StringView type, JsonObject const&) override;
 
+    static RefPtr<TabActor> tab_for(WeakPtr<InspectorActor> const&);
+    static RefPtr<WalkerActor> walker_for(WeakPtr<InspectorActor> const&);
+
 private:
     InspectorActor(DevToolsServer&, String name, WeakPtr<TabActor>);
 
     void received_dom_tree(JsonObject, BlockToken);
 
     WeakPtr<TabActor> m_tab;
+    WeakPtr<WalkerActor> m_walker;
     WeakPtr<PageStyleActor> m_page_style;
     HashMap<String, WeakPtr<HighlighterActor>> m_highlighters;
 };

Libraries/LibDevTools/Actors/TabActor.cpp

@@ -7,6 +7,7 @@
 #include <AK/JsonObject.h>
 #include <LibDevTools/Actors/TabActor.h>
 #include <LibDevTools/Actors/WatcherActor.h>
+#include <LibDevTools/DevToolsDelegate.h>
 #include <LibDevTools/DevToolsServer.h>
 
 namespace DevTools {
@@ -22,7 +23,10 @@ TabActor::TabActor(DevToolsServer& devtools, String name, TabDescription descrip
 {
 }
 
-TabActor::~TabActor() = default;
+TabActor::~TabActor()
+{
+    reset_selected_node();
+}
 
 void TabActor::handle_message(StringView type, JsonObject const&)
 {
@@ -69,4 +73,9 @@ JsonObject TabActor::serialize_description() const
     return description;
 }
 
+void TabActor::reset_selected_node()
+{
+    devtools().delegate().clear_highlighted_dom_node(description());
+}
+
 }

Libraries/LibDevTools/Actors/TabActor.h

@@ -30,6 +30,8 @@ public:
     TabDescription const& description() const { return m_description; }
     JsonObject serialize_description() const;
 
+    void reset_selected_node();
+
 private:
     TabActor(DevToolsServer&, String name, TabDescription);
 

Libraries/LibDevTools/Actors/WalkerActor.cpp

@@ -228,6 +228,28 @@ JsonValue WalkerActor::serialize_node(JsonObject const& node) const
     return serialized;
 }
 
+Optional<WalkerActor::DOMNode> WalkerActor::dom_node(StringView actor)
+{
+    auto maybe_dom_node = m_actor_to_dom_node_map.get(actor);
+    if (!maybe_dom_node.has_value() || !maybe_dom_node.value())
+        return {};
+
+    auto const& dom_node = *maybe_dom_node.value();
+
+    auto pseudo_element = dom_node.get_integer<UnderlyingType<Web::CSS::Selector::PseudoElement::Type>>("pseudo-element"sv).map([](auto value) {
+        VERIFY(value < to_underlying(Web::CSS::Selector::PseudoElement::Type::KnownPseudoElementCount));
+        return static_cast<Web::CSS::Selector::PseudoElement::Type>(value);
+    });
+
+    Web::UniqueNodeID node_id { 0 };
+    if (pseudo_element.has_value())
+        node_id = dom_node.get_integer<Web::UniqueNodeID::Type>("parent-id"sv).value();
+    else
+        node_id = dom_node.get_integer<Web::UniqueNodeID::Type>("id"sv).value();
+
+    return DOMNode { .node = dom_node, .id = node_id, .pseudo_element = pseudo_element };
+}
+
 Optional<JsonObject const&> WalkerActor::find_node_by_selector(JsonObject const& node, StringView selector)
 {
     auto matches = [&](auto const& candidate) {

Libraries/LibDevTools/Actors/WalkerActor.h

@@ -11,6 +11,8 @@
 #include <AK/NonnullRefPtr.h>
 #include <AK/Optional.h>
 #include <LibDevTools/Actor.h>
+#include <LibWeb/CSS/Selector.h>
+#include <LibWeb/Forward.h>
 
 namespace DevTools {
 
@@ -26,6 +28,13 @@ public:
     static bool is_suitable_for_dom_inspection(JsonValue const&);
     JsonValue serialize_root() const;
 
+    struct DOMNode {
+        JsonObject const& node;
+        Web::UniqueNodeID id { 0 };
+        Optional<Web::CSS::Selector::PseudoElement::Type> pseudo_element;
+    };
+    Optional<DOMNode> dom_node(StringView actor);
+
 private:
     WalkerActor(DevToolsServer&, String name, WeakPtr<TabActor>, JsonObject dom_tree);
 

Libraries/LibDevTools/DevToolsDelegate.h

@@ -13,6 +13,8 @@
 #include <LibDevTools/Actors/CSSPropertiesActor.h>
 #include <LibDevTools/Actors/TabActor.h>
 #include <LibDevTools/Forward.h>
+#include <LibWeb/CSS/Selector.h>
+#include <LibWeb/Forward.h>
 
 namespace DevTools {
 
@@ -25,6 +27,9 @@ public:
 
     using OnTabInspectionComplete = Function<void(ErrorOr<JsonValue>)>;
     virtual void inspect_tab(TabDescription const&, OnTabInspectionComplete) const { }
+
+    virtual void highlight_dom_node(TabDescription const&, Web::UniqueNodeID, Optional<Web::CSS::Selector::PseudoElement::Type>) const { }
+    virtual void clear_highlighted_dom_node(TabDescription const&) const { }
 };
 
 }