ZacharyZhang-NY/Ely-GPUI-Components
2
2 Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Tooling · Inspection: inspector, FPS meter, render counter and event logger

Browse Source 
install_inspector draws gpui's debug inspector in Ely's look: a panel
with the picked box's source, ids and box model, and its margin,
border, padding and size drawn over the page through raise, since the
panel scrolls. FpsMeter counts frames on the executor's clock and
colors each by the frames it missed. RenderCounter counts the renders
of the view that draws it. EventLogger lists the input that reaches
what it holds, its canvas laid first so a child's stop hides nothing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ZacharyZhang-NYandClaude Opus 5.5 committed 2026-09-28 07:13:12 -04:00
1 parent a0d93eb35f
commit 5f951ea581
14 files changed
+1378 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/gallery/pages/tooling/mod.rs
+35 -2
View File
@@ -6,6 +6,8 @@ use ely_gpui_component::{
};
use gpui::{AnyElement, App, IntoElement, ParentElement, Styled, Window, div, px};
mod inspection;
use super::Page;
use crate::probe::probe;
use crate::script::Step;
@@ -15,16 +17,46 @@ pub const PAGE: Page = Page {
number: 43,
slug: "tooling",
title: "Library Tooling",
summary: "Tools for building with the library: this gallery, and a playground that edits a component live.",
summary: "Tools for building with the library: this gallery, a playground that edits a component live, and tools that inspect a running window: its boxes, frames, renders and input.",
render,
script: &[
Step::DownAt("button-playground", 472.0, 207.0),
Step::UpAt("button-playground", 472.0, 207.0),
Step::Shot("playground-loading"),
Step::DownAt("inspect-button", 12.0, 12.0),
Step::UpAt("inspect-button", 12.0, 12.0),
Step::HoverAt("inspect-sample", 60.0, 30.0),
Step::Shot("inspector-picking"),
Step::DownAt("inspect-sample", 60.0, 30.0),
Step::UpAt("inspect-sample", 60.0, 30.0),
Step::HoverAt("inspect-button", 12.0, 12.0),
Step::Shot("inspector-held"),
Step::DownAt("inspect-button", 12.0, 12.0),
Step::UpAt("inspect-button", 12.0, 12.0),
Step::DownAt("fps-switch", 14.0, 10.0),
Step::UpAt("fps-switch", 14.0, 10.0),
Step::Wait(1200),
Step::Shot("fps-measuring"),
Step::DownAt("fps-switch", 14.0, 10.0),
Step::UpAt("fps-switch", 14.0, 10.0),
Step::DownAt("renders-apart", 200.0, 18.0),
Step::UpAt("renders-apart", 200.0, 18.0),
Step::DownAt("renders-apart", 200.0, 18.0),
Step::UpAt("renders-apart", 200.0, 18.0),
Step::Shot("renders"),
Step::HoverAt("events", 40.0, 20.0),
Step::HoverAt("events", 120.0, 30.0),
Step::DownAt("events", 120.0, 30.0),
Step::UpAt("events", 120.0, 30.0),
Step::DownAt("events", 60.0, 60.0),
Step::UpAt("events", 60.0, 60.0),
Step::Type("Hi"),
Step::Shot("events"),
],
};
fn render(_: &mut Window, cx: &mut App) -> AnyElement {
fn render(window: &mut Window, cx: &mut App) -> AnyElement {
let inspection = inspection::sections(window, cx);
div()
.child(section(
"ComponentGallery / Storybook",
@@ -98,5 +130,6 @@ fn render(_: &mut Window, cx: &mut App) -> AnyElement {
))),
),
)
.children(inspection)
.into_any_element()
}