Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add initial element inspector for Zed development (#31315)

Browse source 
Open inspector with `dev: toggle inspector` from command palette or
`cmd-alt-i` on mac or `ctrl-alt-i` on linux.

https://github.com/user-attachments/assets/54c43034-d40b-414e-ba9b-190bed2e6d2f

* Picking of elements via the mouse, with scroll wheel to inspect
occluded elements.

* Temporary manipulation of the selected element.

* Layout info and JSON-based style manipulation for `Div`.

* Navigation to code that constructed the element.

Big thanks to @as-cii and @maxdeviant for sorting out how to implement
the core of an inspector.

Release Notes:

- N/A

---------

Co-authored-by: Antonio Scandurra <me@as-cii.com>
Co-authored-by: Marshall Bowers <git@maxdeviant.com>
Co-authored-by: Federico Dionisi <code@fdionisi.me>
This commit is contained in:
Michael Sloan 2025-05-23 17:08:59 -06:00 • committed by GitHub
parent 685933b5c8
commit ab59982bf7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
74 changed files with 2631 additions and 406 deletions
Download patch file Download diff file Expand all files Collapse all files

1
crates/gpui_macros/src/derive_into_element.rs
View file

@ -13,6 +13,7 @@ pub fn derive_into_element(input: TokenStream) -> TokenStream {
{
type Element = gpui::Component<Self>;
#[track_caller]
fn into_element(self) -> Self::Element {
gpui::Component::new(self)
}

22
crates/gpui_macros/src/styles.rs
View file

@ -393,7 +393,7 @@ pub fn box_shadow_style_methods(input: TokenStream) -> TokenStream {
let output = quote! {
/// Sets the box shadow of the element.
/// [Docs](https://tailwindcss.com/docs/box-shadow)
#visibility fn shadow(mut self, shadows: smallvec::SmallVec<[gpui::BoxShadow; 2]>) -> Self {
#visibility fn shadow(mut self, shadows: std::vec::Vec<gpui::BoxShadow>) -> Self {
self.style().box_shadow = Some(shadows);
self
}
@ -409,9 +409,9 @@ pub fn box_shadow_style_methods(input: TokenStream) -> TokenStream {
/// [Docs](https://tailwindcss.com/docs/box-shadow)
#visibility fn shadow_sm(mut self) -> Self {
use gpui::{BoxShadow, hsla, point, px};
use smallvec::smallvec;
use std::vec;
self.style().box_shadow = Some(smallvec![BoxShadow {
self.style().box_shadow = Some(vec![BoxShadow {
color: hsla(0., 0., 0., 0.05),
offset: point(px(0.), px(1.)),
blur_radius: px(2.),
@ -424,9 +424,9 @@ pub fn box_shadow_style_methods(input: TokenStream) -> TokenStream {
/// [Docs](https://tailwindcss.com/docs/box-shadow)
#visibility fn shadow_md(mut self) -> Self {
use gpui::{BoxShadow, hsla, point, px};
use smallvec::smallvec;
use std::vec;
self.style().box_shadow = Some(smallvec![
self.style().box_shadow = Some(vec![
BoxShadow {
color: hsla(0.5, 0., 0., 0.1),
offset: point(px(0.), px(4.)),
@ -447,9 +447,9 @@ pub fn box_shadow_style_methods(input: TokenStream) -> TokenStream {
/// [Docs](https://tailwindcss.com/docs/box-shadow)
#visibility fn shadow_lg(mut self) -> Self {
use gpui::{BoxShadow, hsla, point, px};
use smallvec::smallvec;
use std::vec;
self.style().box_shadow = Some(smallvec![
self.style().box_shadow = Some(vec![
BoxShadow {
color: hsla(0., 0., 0., 0.1),
offset: point(px(0.), px(10.)),
@ -470,9 +470,9 @@ pub fn box_shadow_style_methods(input: TokenStream) -> TokenStream {
/// [Docs](https://tailwindcss.com/docs/box-shadow)
#visibility fn shadow_xl(mut self) -> Self {
use gpui::{BoxShadow, hsla, point, px};
use smallvec::smallvec;
use std::vec;
self.style().box_shadow = Some(smallvec![
self.style().box_shadow = Some(vec![
BoxShadow {
color: hsla(0., 0., 0., 0.1),
offset: point(px(0.), px(20.)),
@ -493,9 +493,9 @@ pub fn box_shadow_style_methods(input: TokenStream) -> TokenStream {
/// [Docs](https://tailwindcss.com/docs/box-shadow)
#visibility fn shadow_2xl(mut self) -> Self {
use gpui::{BoxShadow, hsla, point, px};
use smallvec::smallvec;
use std::vec;
self.style().box_shadow = Some(smallvec![BoxShadow {
self.style().box_shadow = Some(vec![BoxShadow {
color: hsla(0., 0., 0., 0.25),
offset: point(px(0.), px(25.)),
blur_radius: px(50.),