devtools: Allow highlighting elements from the inspector (#35822)

This change connects the `HighlighterActor` from the devtools with the
document, which will draw a blue rectangle over any highlighted dom
node.



https://github.com/user-attachments/assets/571b2dab-497f-4102-9e55-517cdcc040ba




---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by
`[X]` when the step is complete, and replace `___` with appropriate
data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes do not require tests because we don't have devtools
tests

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

components/devtools/actors/inspector/highlighter.rs

@@ -7,6 +7,9 @@
 
 use std::net::TcpStream;
 
+use base::id::PipelineId;
+use devtools_traits::DevtoolScriptControlMsg;
+use ipc_channel::ipc::IpcSender;
 use serde::Serialize;
 use serde_json::{self, Map, Value};
 
@@ -21,6 +24,8 @@ pub struct HighlighterMsg {
 
 pub struct HighlighterActor {
     pub name: String,
+    pub script_sender: IpcSender<DevtoolScriptControlMsg>,
+    pub pipeline: PipelineId,
 }
 
 #[derive(Serialize)]
@@ -41,14 +46,39 @@ impl Actor for HighlighterActor {
     /// - `hide`: Disables highlighting for the selected node
     fn handle_message(
         &self,
-        _registry: &ActorRegistry,
+        registry: &ActorRegistry,
         msg_type: &str,
-        _msg: &Map<String, Value>,
+        msg: &Map<String, Value>,
         stream: &mut TcpStream,
         _id: StreamId,
     ) -> Result<ActorMessageStatus, ()> {
         Ok(match msg_type {
             "show" => {
+                let Some(node_actor) = msg.get("node") else {
+                    // TODO: send missing parameter error
+                    return Ok(ActorMessageStatus::Ignored);
+                };
+
+                let Some(node_actor_name) = node_actor.as_str() else {
+                    // TODO: send invalid parameter error
+                    return Ok(ActorMessageStatus::Ignored);
+                };
+
+                if node_actor_name.starts_with("inspector") {
+                    // TODO: For some reason, the client initially asks us to highlight
+                    // the inspector? Investigate what this is supposed to mean.
+                    let msg = ShowReply {
+                        from: self.name(),
+                        value: false,
+                    };
+                    let _ = stream.write_json_packet(&msg);
+                    return Ok(ActorMessageStatus::Processed);
+                }
+
+                self.instruct_script_thread_to_highlight_node(
+                    Some(node_actor_name.to_owned()),
+                    registry,
+                );
                 let msg = ShowReply {
                     from: self.name(),
                     value: true,
@@ -58,6 +88,8 @@ impl Actor for HighlighterActor {
             },
 
             "hide" => {
+                self.instruct_script_thread_to_highlight_node(None, registry);
+
                 let msg = EmptyReplyMsg { from: self.name() };
                 let _ = stream.write_json_packet(&msg);
                 ActorMessageStatus::Processed
@@ -67,3 +99,19 @@ impl Actor for HighlighterActor {
         })
     }
 }
+
+impl HighlighterActor {
+    fn instruct_script_thread_to_highlight_node(
+        &self,
+        node_actor: Option<String>,
+        registry: &ActorRegistry,
+    ) {
+        let node_id = node_actor.map(|node_actor| registry.actor_to_script(node_actor));
+        self.script_sender
+            .send(DevtoolScriptControlMsg::HighlightDomNode(
+                self.pipeline,
+                node_id,
+            ))
+            .unwrap();
+    }
+}