DevTools: Show HTML tree (#32655)

* feat: watch root node Signed-off-by: eri <eri@inventati.org> * reafactor: divide inspector in components Signed-off-by: eri <eri@inventati.org> * feat: add css properties actor Signed-off-by: eri <eri@inventati.org> * feat: accesibility actor Signed-off-by: eri <eri@inventati.org> * feat: layout actor Signed-off-by: eri <eri@inventati.org> * feat: network parent and refactor Signed-off-by: eri <eri@inventati.org> * feat: progress on the inspector messages Signed-off-by: eri <eri@inventati.org> * feat: more progress on inspector Signed-off-by: eri <eri@inventati.org> * feat: try to fix nodes showing Signed-off-by: eri <eri@inventati.org> * feat: initial dom tree Signed-off-by: eri <eri@inventati.org> * feat: some more messages Signed-off-by: eri <eri@inventati.org> * feat: clean and add documentation Signed-off-by: eri <eri@inventati.org> * refactor: add more docs and clean Signed-off-by: eri <eri@inventati.org> * fix: restore deleted node attributes field Signed-off-by: eri <eri@inventati.org> * Apply suggestions from code review Fix a few nits in comments Signed-off-by: Martin Robinson <mrobinson@igalia.com> --------- Signed-off-by: eri <eri@inventati.org> Signed-off-by: Martin Robinson <mrobinson@igalia.com> Co-authored-by: Martin Robinson <mrobinson@igalia.com>
2025-08-13 01:15:34 +01:00 · 2024-07-26 17:17:54 +02:00 · 2024-07-26 17:17:54 +02:00 · 902bf57331
commit 902bf57331
parent f7448b5d61
23 changed files with 1487 additions and 833 deletions
--- a/components/devtools/actors/inspector/css_properties.rs
+++ b/components/devtools/actors/inspector/css_properties.rs
@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+//! This actor holds a database of available css properties, their supported values and
+//! alternative names
+
+use std::collections::HashMap;
+use std::net::TcpStream;
+
+use serde::Serialize;
+use serde_json::{Map, Value};
+
+use crate::actor::{Actor, ActorMessageStatus, ActorRegistry};
+use crate::protocol::JsonPacketStream;
+use crate::StreamId;
+
+pub struct CssPropertiesActor {
+    name: String,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct CssDatabaseProperty {
+    is_inherited: bool,
+    values: Vec<&'static str>,
+    supports: Vec<&'static str>,
+    subproperties: Vec<&'static str>,
+}
+
+#[derive(Serialize)]
+struct GetCssDatabaseReply {
+    properties: HashMap<&'static str, CssDatabaseProperty>,
+    from: String,
+}
+
+impl Actor for CssPropertiesActor {
+    fn name(&self) -> String {
+        self.name.clone()
+    }
+
+    /// The css properties actor can handle the following messages:
+    ///
+    /// - `getCSSDatabase`: Returns a big list of every supported css property so that the
+    /// inspector can show the available options
+    fn handle_message(
+        &self,
+        _registry: &ActorRegistry,
+        msg_type: &str,
+        _msg: &Map<String, Value>,
+        stream: &mut TcpStream,
+        _id: StreamId,
+    ) -> Result<ActorMessageStatus, ()> {
+        Ok(match msg_type {
+            "getCSSDatabase" => {
+                let _ = stream.write_json_packet(&GetCssDatabaseReply {
+                    from: self.name(),
+                    // TODO: Fill this programatically with other properties
+                    properties: HashMap::from([(
+                        "color",
+                        CssDatabaseProperty {
+                            is_inherited: true,
+                            values: vec!["color"],
+                            supports: vec!["color"],
+                            subproperties: vec!["color"],
+                        },
+                    )]),
+                });
+
+                ActorMessageStatus::Processed
+            },
+            _ => ActorMessageStatus::Ignored,
+        })
+    }
+}
+
+impl CssPropertiesActor {
+    pub fn new(name: String) -> Self {
+        Self { name }
+    }
+}