Copy element debug JSON to the clipboard on cmd-alt-i

README.md

@@ -4,7 +4,11 @@
 
 Welcome to Zed, a lightning-fast, collaborative code editor that makes your dreams come true.
 
-Everything is under construction, including this README, but in the meantime, here is a high-level roadmap:
+## Development tips
+
+### Dump element JSON
+
+If you trigger `cmd-shift-i`, Zed will copy a JSON representation of the current window contents to the clipboard. You can paste this in a tool like [DJSON](https://chrome.google.com/webstore/detail/djson-json-viewer-formatt/chaeijjekipecdajnijdldjjipaegdjc?hl=en) to navigate the state of on-screen elements in a structured way.
 
 ## Roadmap
 

gpui/Cargo.toml

@@ -18,6 +18,8 @@ pathfinder_geometry = "0.5"
 rand = "0.8.3"
 replace_with = "0.1.7"
 resvg = "0.14"
+serde = "1.0.125"
+serde_json = "1.0.64"
 smallvec = "1.6.1"
 smol = "1.2"
 tiny-skia = "0.5"

gpui/examples/text.rs

@@ -2,9 +2,10 @@ use gpui::{
     color::ColorU,
     fonts::{Properties, Weight},
     platform::{current as platform, Runner},
-    Element as _, Quad,
+    DebugContext, Element as _, Quad,
 };
 use log::LevelFilter;
+use pathfinder_geometry::rect::RectF;
 use simplelog::SimpleLogger;
 
 fn main() {
@@ -59,7 +60,7 @@ impl gpui::Element for TextElement {
 
     fn paint(
         &mut self,
-        bounds: pathfinder_geometry::rect::RectF,
+        bounds: RectF,
         _: &mut Self::LayoutState,
         ctx: &mut gpui::PaintContext,
     ) -> Self::PaintState {
@@ -109,11 +110,21 @@ impl gpui::Element for TextElement {
     fn dispatch_event(
         &mut self,
         _: &gpui::Event,
-        _: pathfinder_geometry::rect::RectF,
+        _: RectF,
         _: &mut Self::LayoutState,
         _: &mut Self::PaintState,
         _: &mut gpui::EventContext,
     ) -> bool {
         false
     }
+
+    fn debug(
+        &self,
+        _: RectF,
+        _: &Self::LayoutState,
+        _: &Self::PaintState,
+        _: &DebugContext,
+    ) -> gpui::json::Value {
+        todo!()
+    }
 }

gpui/src/app.rs

@@ -310,6 +310,7 @@ pub struct MutableAppContext {
     window_invalidations: HashMap<usize, WindowInvalidation>,
     invalidation_callbacks:
         HashMap<usize, Box<dyn FnMut(WindowInvalidation, &mut MutableAppContext)>>,
+    debug_elements_callbacks: HashMap<usize, Box<dyn Fn(&AppContext) -> crate::json::Value>>,
     foreground: Rc<executor::Foreground>,
     future_handlers: Rc<RefCell<HashMap<usize, FutureHandler>>>,
     stream_handlers: Rc<RefCell<HashMap<usize, StreamHandler>>>,
@@ -347,6 +348,7 @@ impl MutableAppContext {
             observations: HashMap::new(),
             window_invalidations: HashMap::new(),
             invalidation_callbacks: HashMap::new(),
+            debug_elements_callbacks: HashMap::new(),
             foreground,
             future_handlers: Default::default(),
             stream_handlers: Default::default(),
@@ -373,16 +375,29 @@ impl MutableAppContext {
         &self.ctx.background
     }
 
-    pub fn on_window_invalidated<F: 'static + FnMut(WindowInvalidation, &mut MutableAppContext)>(
-        &mut self,
-        window_id: usize,
-        callback: F,
-    ) {
+    pub fn on_window_invalidated<F>(&mut self, window_id: usize, callback: F)
+    where
+        F: 'static + FnMut(WindowInvalidation, &mut MutableAppContext),
+    {
         self.invalidation_callbacks
             .insert(window_id, Box::new(callback));
         self.update_windows();
     }
 
+    pub fn on_debug_elements<F>(&mut self, window_id: usize, callback: F)
+    where
+        F: 'static + Fn(&AppContext) -> crate::json::Value,
+    {
+        self.debug_elements_callbacks
+            .insert(window_id, Box::new(callback));
+    }
+
+    pub fn debug_elements(&self, window_id: usize) -> Option<crate::json::Value> {
+        self.debug_elements_callbacks
+            .get(&window_id)
+            .map(|debug_elements| debug_elements(&self.ctx))
+    }
+
     pub fn add_action<S, V, T, F>(&mut self, name: S, mut handler: F)
     where
         S: Into<String>,
@@ -692,11 +707,19 @@ impl MutableAppContext {
                     }));
                 }
 
-                self.on_window_invalidated(window_id, move |invalidation, ctx| {
-                    let mut presenter = presenter.borrow_mut();
-                    presenter.invalidate(invalidation, ctx.downgrade());
-                    let scene = presenter.build_scene(window.size(), window.scale_factor(), ctx);
-                    window.present_scene(scene);
+                {
+                    let presenter = presenter.clone();
+                    self.on_window_invalidated(window_id, move |invalidation, ctx| {
+                        let mut presenter = presenter.borrow_mut();
+                        presenter.invalidate(invalidation, ctx.downgrade());
+                        let scene =
+                            presenter.build_scene(window.size(), window.scale_factor(), ctx);
+                        window.present_scene(scene);
+                    });
+                }
+
+                self.on_debug_elements(window_id, move |ctx| {
+                    presenter.borrow().debug_elements(ctx).unwrap()
                 });
             }
         }
@@ -1097,6 +1120,10 @@ impl MutableAppContext {
             }
         }
     }
+
+    pub fn copy(&self, text: &str) {
+        self.platform.copy(text);
+    }
 }
 
 impl ModelAsRef for MutableAppContext {
@@ -1573,6 +1600,10 @@ impl<'a, T: View> ViewContext<'a, T> {
         &self.app.ctx.background
     }
 
+    pub fn debug_elements(&self) -> crate::json::Value {
+        self.app.debug_elements(self.window_id).unwrap()
+    }
+
     pub fn focus<S>(&mut self, handle: S)
     where
         S: Into<AnyViewHandle>,

gpui/src/color.rs

@@ -0,0 +1,9 @@
+use crate::json::ToJson;
+pub use pathfinder_color::*;
+use serde_json::json;
+
+impl ToJson for ColorU {
+    fn to_json(&self) -> serde_json::Value {
+        json!(format!("0x{:x}{:x}{:x}", self.r, self.g, self.b))
+    }
+}

gpui/src/elements/align.rs

@@ -1,8 +1,10 @@
 use crate::{
-    AfterLayoutContext, Element, ElementBox, Event, EventContext, LayoutContext, PaintContext,
-    SizeConstraint,
+    json, AfterLayoutContext, DebugContext, Element, ElementBox, Event, EventContext,
+    LayoutContext, PaintContext, SizeConstraint,
 };
+use json::ToJson;
 use pathfinder_geometry::vector::{vec2f, Vector2F};
+use serde_json::json;
 
 pub struct Align {
     child: ElementBox,
@@ -79,4 +81,19 @@ impl Element for Align {
     ) -> bool {
         self.child.dispatch_event(event, ctx)
     }
+
+    fn debug(
+        &self,
+        bounds: pathfinder_geometry::rect::RectF,
+        _: &Self::LayoutState,
+        _: &Self::PaintState,
+        ctx: &DebugContext,
+    ) -> json::Value {
+        json!({
+            "type": "Align",
+            "bounds": bounds.to_json(),
+            "alignment": self.alignment.to_json(),
+            "child": self.child.debug(ctx),
+        })
+    }
 }

gpui/src/elements/canvas.rs

@@ -1,5 +1,9 @@
 use super::Element;
-use crate::PaintContext;
+use crate::{
+    json::{self, json},
+    DebugContext, PaintContext,
+};
+use json::ToJson;
 use pathfinder_geometry::{
     rect::RectF,
     vector::{vec2f, Vector2F},
@@ -70,4 +74,14 @@ where
     ) -> bool {
         false
     }
+
+    fn debug(
+        &self,
+        bounds: RectF,
+        _: &Self::LayoutState,
+        _: &Self::PaintState,
+        _: &DebugContext,
+    ) -> json::Value {
+        json!({"type": "Canvas", "bounds": bounds.to_json()})
+    }
 }

gpui/src/elements/constrained_box.rs

@@ -1,8 +1,11 @@
+use json::ToJson;
+use serde_json::json;
+
 use crate::{
-    AfterLayoutContext, Element, ElementBox, Event, EventContext, LayoutContext, PaintContext,
-    SizeConstraint,
+    geometry::{rect::RectF, vector::Vector2F},
+    json, AfterLayoutContext, DebugContext, Element, ElementBox, Event, EventContext,
+    LayoutContext, PaintContext, SizeConstraint,
 };
-use pathfinder_geometry::vector::Vector2F;
 
 pub struct ConstrainedBox {
     child: ElementBox,
@@ -63,7 +66,7 @@ impl Element for ConstrainedBox {
 
     fn paint(
         &mut self,
-        bounds: pathfinder_geometry::rect::RectF,
+        bounds: RectF,
         _: &mut Self::LayoutState,
         ctx: &mut PaintContext,
     ) -> Self::PaintState {
@@ -73,11 +76,21 @@ impl Element for ConstrainedBox {
     fn dispatch_event(
         &mut self,
         event: &Event,
-        _: pathfinder_geometry::rect::RectF,
+        _: RectF,
         _: &mut Self::LayoutState,
         _: &mut Self::PaintState,
         ctx: &mut EventContext,
     ) -> bool {
         self.child.dispatch_event(event, ctx)
     }
+
+    fn debug(
+        &self,
+        _: RectF,
+        _: &Self::LayoutState,
+        _: &Self::PaintState,
+        ctx: &DebugContext,
+    ) -> json::Value {
+        json!({"type": "ConstrainedBox", "constraint": self.constraint.to_json(), "child": self.child.debug(ctx)})
+    }
 }