feat: Redesigned devtools inspector

marc2332 · Jan 17, 2025 · 1779171 · 1779171
1 parent 1826ff5
commit 1779171
Show file tree

Hide file tree

Showing 7 changed files with 280 additions and 101 deletions.
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/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,7 +158,10 @@ pub fn DevtoolsBar() -> Element {
                 }
             }
         }
-        Outlet::<Route> {}
+
+        NativeRouter {
+            Outlet::<Route> {}
+        }
     )
 }
 
@@ -206,34 +212,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 +291,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> {}
     )
 }
 

diff --git a/crates/devtools/src/node.rs b/crates/devtools/src/node.rs
@@ -83,6 +83,7 @@ pub fn NodeElement(
             onmouseleave,
             direction: "horizontal",
             cross_align: "center",
+            overflow: "clip",
             rect {
                 onmousedown: onarrowmousedown,
                 width: "16",

diff --git a/crates/devtools/src/property.rs b/crates/devtools/src/property.rs
@@ -15,11 +15,12 @@ pub fn Property(name: String, value: String) -> Element {
             overflow: "clip",
             width: "100%",
             direction: "horizontal",
+            cross_align: "center",
             paragraph {
                 width: "100%",
                 text {
                     font_size: "15",
-                    color: "rgb(71, 180, 240)",
+                    color: "rgb(102, 163, 217)",
                     "{name}"
                 }
                 text {
@@ -45,7 +46,7 @@ pub fn GradientProperty(name: String, fill: Fill) -> Element {
             line_height: "1.9",
             text {
                 font_size: "15",
-                color: "rgb(71, 180, 240)",
+                color: "rgb(102, 163, 217)",
                 "{name}"
             }
             text {
@@ -70,9 +71,10 @@ pub fn ColorProperty(name: String, fill: Fill) -> Element {
             overflow: "clip",
             width: "100%",
             direction: "horizontal",
+            cross_align: "center",
             label {
                 font_size: "15",
-                color: "rgb(71, 180, 240)",
+                color: "rgb(102, 163, 217)",
                 "{name}"
             }
             label {
@@ -116,10 +118,11 @@ pub fn ShadowProperty(name: String, shadow: Shadow) -> Element {
             overflow: "clip",
             width: "100%",
             direction: "horizontal",
+            cross_align: "center",
             paragraph {
                 text {
                     font_size: "15",
-                    color: "rgb(71, 180, 240)",
+                    color: "rgb(102, 163, 217)",
                     "{name}"
                 }
                 text {
@@ -170,10 +173,11 @@ pub fn BorderProperty(name: String, border: Border) -> Element {
             overflow: "clip",
             width: "100%",
             direction: "horizontal",
+            cross_align: "center",
             paragraph {
                 text {
                     font_size: "15",
-                    color: "rgb(71, 180, 240)",
+                    color: "rgb(102, 163, 217)",
                     "{name}"
                 }
                 text {
@@ -224,10 +228,11 @@ pub fn TextShadowProperty(name: String, text_shadow: TextShadow) -> Element {
             overflow: "clip",
             width: "100%",
             direction: "horizontal",
+            cross_align: "center",
             paragraph {
                 text {
                     font_size: "15",
-                    color: "rgb(71, 180, 240)",
+                    color: "rgb(102, 163, 217)",
                     "{name}"
                 }
                 text {