feat: Redesign devtools inspector (#1056)

* feat: Show role alongside tag in devtools inspector * feat: Redesigned devtools inspector * feat: Use Button for nodes in the tree * chore: clean up * clean up
marc2332 · Jan 22, 2025 · 2bca0ad · 2bca0ad
1 parent d10f700
commit 2bca0ad
Show file tree

Hide file tree

Showing 10 changed files with 363 additions and 174 deletions.
diff --git a/crates/components/src/link.rs b/crates/components/src/link.rs
@@ -144,9 +144,7 @@ pub fn Link(
 
                 // TODO(marc2332): Log unhandled errors
             } else {
-                println!("111");
                 let router = navigator();
-                println!("222");
                 router.push(to.clone());
             }
         }

diff --git a/crates/components/src/tabs.rs b/crates/components/src/tabs.rs
@@ -207,7 +207,12 @@ pub fn Tab(
 /// ```
 #[allow(non_snake_case)]
 #[component]
-pub fn BottomTab(children: Element, theme: Option<BottomTabThemeWith>) -> Element {
+pub fn BottomTab(
+    children: Element,
+    theme: Option<BottomTabThemeWith>,
+    /// Optionally handle the `onclick` event in the SidebarItem.
+    onpress: Option<EventHandler<()>>,
+) -> Element {
     let focus = use_focus();
     let mut status = use_signal(TabStatus::default);
     let platform = use_platform();
@@ -230,6 +235,12 @@ pub fn BottomTab(children: Element, theme: Option<BottomTabThemeWith>) -> Elemen
         }
     });
 
+    let onclick = move |_| {
+        if let Some(onpress) = &onpress {
+            onpress.call(());
+        }
+    };
+
     let onmouseenter = move |_| {
         platform.set_cursor(CursorIcon::Pointer);
         status.set(TabStatus::Hovering);
@@ -245,8 +256,10 @@ pub fn BottomTab(children: Element, theme: Option<BottomTabThemeWith>) -> Elemen
         TabStatus::Hovering => hover_background,
         TabStatus::Idle => background,
     };
+
     rsx!(
         rect {
+            onclick,
             onmouseenter,
             onmouseleave,
             a11y_id,

diff --git a/crates/devtools/Cargo.toml b/crates/devtools/Cargo.toml
@@ -26,7 +26,7 @@ freya-core = { workspace = true }
 freya-components = { workspace = true }
 freya-engine = { workspace = true }
 torin = { workspace = true }
-dioxus-radio = "0.2"
+dioxus-radio = "0.3"
 serde_json = "1.0.107"
 accesskit = { workspace = true }
 

diff --git a/crates/devtools/src/lib.rs b/crates/devtools/src/lib.rs
@@ -2,11 +2,14 @@ use std::collections::HashSet;
 
 use dioxus::prelude::*;
 use dioxus_radio::prelude::*;
-use dioxus_router::prelude::{
-    use_route,
-    Outlet,
-    Routable,
-    Router,
+use dioxus_router::{
+    hooks::use_navigator,
+    prelude::{
+        use_route,
+        Outlet,
+        Routable,
+        Router,
+    },
 };
 use freya_components::*;
 use freya_core::prelude::EventMessage;
@@ -155,28 +158,29 @@ pub fn DevtoolsBar() -> Element {
                 }
             }
         }
-        Outlet::<Route> {}
+
+        NativeRouter {
+            Outlet::<Route> {}
+        }
     )
 }
 
-#[derive(Routable, Clone, PartialEq)]
+#[derive(Routable, Clone, PartialEq, Debug)]
 #[rustfmt::skip]
 pub enum Route {
     #[layout(DevtoolsBar)]
-        #[nest("/")]
-            #[layout(LayoutForDOMInspector)]
-                #[route("/")]
-                DOMInspector  {},
-                #[nest("/node/:node_id")]
-                    #[layout(LayoutForNodeInspector)]
-                        #[route("/style")]
-                        NodeInspectorStyle { node_id: String },
-                        #[route("/layout")]
-                        NodeInspectorLayout { node_id: String },
-                    #[end_layout]
-                #[end_nest]
-            #[end_layout]
-        #[end_nest]
+        #[layout(LayoutForDOMInspector)]
+            #[route("/")]
+            DOMInspector  {},
+            #[nest("/node/:node_id")]
+                #[layout(LayoutForNodeInspector)]
+                    #[route("/style")]
+                    NodeInspectorStyle { node_id: String },
+                    #[route("/layout")]
+                    NodeInspectorLayout { node_id: String },
+                #[end_layout]
+            #[end_nest]
+        #[end_layout]
     #[end_layout]
     #[route("/..route")]
     PageNotFound { },
@@ -206,34 +210,55 @@ fn PageNotFound() -> Element {
 #[allow(non_snake_case)]
 #[component]
 fn LayoutForNodeInspector(node_id: String) -> Element {
+    let navigator = use_navigator();
+
     rsx!(
         rect {
             overflow: "clip",
-            width: "100%",
-            height: "50%",
-            Tabsbar {
-                Link {
-                    to: Route::NodeInspectorStyle { node_id: node_id.clone() },
-                    ActivableRoute {
-                        route: Route::NodeInspectorStyle { node_id: node_id.clone() },
-                        Tab {
-                            label {
-                                "Style"
+            width: "fill",
+            height: "fill",
+            background: "rgb(30, 30, 30)",
+            margin: "10",
+            corner_radius: "16",
+            cross_align: "center",
+            padding: "6 0 0 0",
+            spacing: "6",
+            rect {
+                direction: "horizontal",
+                width: "fill",
+                main_align: "space-between",
+                padding: "0 2",
+                rect {
+                    direction: "horizontal",
+                    Link {
+                        to: Route::NodeInspectorStyle { node_id: node_id.clone() },
+                        ActivableRoute {
+                            route: Route::NodeInspectorStyle { node_id: node_id.clone() },
+                            BottomTab {
+                                label {
+                                    "Style"
+                                }
                             }
                         }
                     }
-                }
-                Link {
-                    to: Route::NodeInspectorLayout { node_id: node_id.clone() },
-                    ActivableRoute {
-                        route: Route::NodeInspectorLayout { node_id },
-                        Tab {
-                            label {
-                                "Layout"
+                    Link {
+                        to: Route::NodeInspectorLayout { node_id: node_id.clone() },
+                        ActivableRoute {
+                            route: Route::NodeInspectorLayout { node_id },
+                            BottomTab {
+                                label {
+                                    "Layout"
+                                }
                             }
                         }
                     }
                 }
+                BottomTab {
+                    onpress: move |_| {navigator.replace(Route::DOMInspector {});},
+                    label {
+                        "Close"
+                    }
+                }
             }
             Outlet::<Route> {}
         }
@@ -264,24 +289,44 @@ fn LayoutForDOMInspector() -> Element {
 
     let is_expanded_vertical = selected_node_id.is_some();
 
-    let height = if is_expanded_vertical {
-        "calc(50% - 35)"
-    } else {
-        "fill"
-    };
-
     rsx!(
-        NodesTree {
-            height,
-            selected_node_id,
-            onselected: move |node_id: NodeId| {
-                if let Some(hovered_node) = &radio.read().hovered_node.as_ref() {
-                    hovered_node.lock().unwrap().replace(node_id);
-                    platform.send(EventMessage::RequestFullRerender).ok();
+        rect {
+            height: "fill",
+            ResizableContainer {
+                direction: "vertical",
+                ResizablePanel {
+                    initial_size: 50.,
+                    NodesTree {
+                        height: "fill",
+                        selected_node_id,
+                        onselected: move |node_id: NodeId| {
+                            if let Some(hovered_node) = &radio.read().hovered_node.as_ref() {
+                                hovered_node.lock().unwrap().replace(node_id);
+                                platform.send(EventMessage::RequestFullRerender).ok();
+                            }
+                        }
+                    }
+                }
+                ResizableHandle { }
+                ResizablePanel {
+                    initial_size: 50.,
+                    if is_expanded_vertical {
+
+                        Outlet::<Route> {}
+                    } else {
+                        rect {
+                            main_align: "center",
+                            cross_align: "center",
+                            width: "fill",
+                            height: "fill",
+                            label {
+                                "Select an element to inspect."
+                            }
+                        }
+                    }
                 }
             }
         }
-        Outlet::<Route> {}
     )
 }