inspector: detachable collapsing headers

This commit is contained in:
Mitchell Hashimoto
2026-01-27 13:18:17 -08:00
parent d58703a245
commit ff14938389
2 changed files with 426 additions and 343 deletions

View File

@@ -5,6 +5,12 @@ const terminal = @import("../terminal/main.zig");
const Terminal = terminal.Terminal;
const widgets = @import("widgets.zig");
/// Context for our detachable collapsing headers.
const RenderContext = struct {
window: *Window,
terminal: *Terminal,
};
/// Window to show terminal state information.
pub const Window = struct {
/// Window name/id.
@@ -13,6 +19,12 @@ pub const Window = struct {
/// Whether the palette window is open.
show_palette: bool = false,
/// Whether sections are shown in their own windows.
show_misc_window: bool = false,
show_layout_window: bool = false,
show_mouse_window: bool = false,
show_color_window: bool = false,
// Render
pub fn render(self: *Window, t: *Terminal) void {
@@ -38,353 +50,31 @@ pub const Window = struct {
);
}
if (cimgui.c.ImGui_CollapsingHeader(
const ctx: RenderContext = .{ .window = self, .terminal = t };
widgets.collapsingHeaderDetachable(
"Misc",
cimgui.c.ImGuiTreeNodeFlags_DefaultOpen,
)) {
_ = cimgui.c.ImGui_BeginTable(
"table_misc",
2,
cimgui.c.ImGuiTableFlags_None,
);
defer cimgui.c.ImGui_EndTable();
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Working Directory");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The current working directory reported by the shell.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
if (t.pwd.items.len > 0) {
cimgui.c.ImGui_Text(
"%.*s",
t.pwd.items.len,
t.pwd.items.ptr,
);
} else {
cimgui.c.ImGui_TextDisabled("(none)");
}
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Focused");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("Whether the terminal itself is currently focused.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
var value: bool = t.flags.focused;
_ = cimgui.c.ImGui_Checkbox("##focused", &value);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Previous Char");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The previously printed character, used only for the REP sequence.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
if (t.previous_char) |c| {
cimgui.c.ImGui_Text("U+%04X", @as(u32, c));
} else {
cimgui.c.ImGui_TextDisabled("(none)");
}
}
}
}
if (cimgui.c.ImGui_CollapsingHeader(
&self.show_misc_window,
ctx,
renderMiscContent,
);
widgets.collapsingHeaderDetachable(
"Layout",
cimgui.c.ImGuiTreeNodeFlags_DefaultOpen,
)) {
_ = cimgui.c.ImGui_BeginTable(
"table_layout",
2,
cimgui.c.ImGuiTableFlags_None,
);
defer cimgui.c.ImGui_EndTable();
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Grid");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The size of the terminal grid in columns and rows.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_Text(
"%dc x %dr",
t.cols,
t.rows,
);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Pixels");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The size of the terminal grid in pixels.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_Text(
"%dw x %dh",
t.width_px,
t.height_px,
);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Scroll Region");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The scrolling region boundaries (top, bottom, left, right).");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_PushItemWidth(cimgui.c.ImGui_CalcTextSize("00000").x);
defer cimgui.c.ImGui_PopItemWidth();
var override = t.scrolling_region;
var changed = false;
cimgui.c.ImGui_AlignTextToFramePadding();
cimgui.c.ImGui_Text("T:");
cimgui.c.ImGui_SameLine();
if (cimgui.c.ImGui_InputScalar(
"##scroll_top",
cimgui.c.ImGuiDataType_U16,
&override.top,
)) {
override.top = @min(override.top, t.rows -| 1);
changed = true;
}
cimgui.c.ImGui_SameLine();
cimgui.c.ImGui_Text("B:");
cimgui.c.ImGui_SameLine();
if (cimgui.c.ImGui_InputScalar(
"##scroll_bottom",
cimgui.c.ImGuiDataType_U16,
&override.bottom,
)) {
override.bottom = @min(override.bottom, t.rows -| 1);
changed = true;
}
cimgui.c.ImGui_SameLine();
cimgui.c.ImGui_Text("L:");
cimgui.c.ImGui_SameLine();
if (cimgui.c.ImGui_InputScalar(
"##scroll_left",
cimgui.c.ImGuiDataType_U16,
&override.left,
)) {
override.left = @min(override.left, t.cols -| 1);
changed = true;
}
cimgui.c.ImGui_SameLine();
cimgui.c.ImGui_Text("R:");
cimgui.c.ImGui_SameLine();
if (cimgui.c.ImGui_InputScalar(
"##scroll_right",
cimgui.c.ImGuiDataType_U16,
&override.right,
)) {
override.right = @min(override.right, t.cols -| 1);
changed = true;
}
// If we modified it then update our scrolling region
// directly.
if (changed and
override.top < override.bottom and
override.left < override.right)
{
t.scrolling_region = override;
}
}
}
} // layout
if (cimgui.c.ImGui_CollapsingHeader(
&self.show_layout_window,
ctx,
renderLayoutContent,
);
widgets.collapsingHeaderDetachable(
"Mouse",
cimgui.c.ImGuiTreeNodeFlags_DefaultOpen,
)) {
_ = cimgui.c.ImGui_BeginTable(
"table_mouse",
2,
cimgui.c.ImGuiTableFlags_None,
);
defer cimgui.c.ImGui_EndTable();
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Event Mode");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The mouse event reporting mode set by the application.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_Text("%s", @tagName(t.flags.mouse_event).ptr);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Format");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The mouse event encoding format.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_Text("%s", @tagName(t.flags.mouse_format).ptr);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Shape");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The current mouse cursor shape set by the application.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_Text("%s", @tagName(t.mouse_shape).ptr);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Shift Capture");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("XTSHIFTESCAPE state for capturing shift in mouse protocol.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
if (t.flags.mouse_shift_capture == .null) {
cimgui.c.ImGui_TextDisabled("(unset)");
} else {
cimgui.c.ImGui_Text("%s", @tagName(t.flags.mouse_shift_capture).ptr);
}
}
}
} // mouse
if (cimgui.c.ImGui_CollapsingHeader(
&self.show_mouse_window,
ctx,
renderMouseContent,
);
widgets.collapsingHeaderDetachable(
"Color",
cimgui.c.ImGuiTreeNodeFlags_DefaultOpen,
)) {
cimgui.c.ImGui_TextWrapped(
"Color state for the terminal. Note these colors only apply " ++
"to the palette and unstyled colors. Many modern terminal " ++
"applications use direct RGB colors which are not reflected here.",
);
cimgui.c.ImGui_Separator();
_ = cimgui.c.ImGui_BeginTable(
"table_color",
2,
cimgui.c.ImGuiTableFlags_None,
);
defer cimgui.c.ImGui_EndTable();
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Background");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("Unstyled cell background color.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
_ = dynamicRGB(
"bg_color",
&t.colors.background,
);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Foreground");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("Unstyled cell foreground color.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
_ = dynamicRGB(
"fg_color",
&t.colors.foreground,
);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Cursor");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("Cursor coloring set by escape sequences.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
_ = dynamicRGB(
"cursor_color",
&t.colors.cursor,
);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Palette");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The 256-color palette.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
if (cimgui.c.ImGui_Button("View")) {
self.show_palette = true;
}
}
}
} // color
&self.show_color_window,
ctx,
renderColorContent,
);
if (self.show_palette) {
defer cimgui.c.ImGui_End();
@@ -399,6 +89,344 @@ pub const Window = struct {
}
};
fn renderMiscContent(ctx: RenderContext) void {
const t = ctx.terminal;
_ = cimgui.c.ImGui_BeginTable(
"table_misc",
2,
cimgui.c.ImGuiTableFlags_None,
);
defer cimgui.c.ImGui_EndTable();
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Working Directory");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The current working directory reported by the shell.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
if (t.pwd.items.len > 0) {
cimgui.c.ImGui_Text(
"%.*s",
t.pwd.items.len,
t.pwd.items.ptr,
);
} else {
cimgui.c.ImGui_TextDisabled("(none)");
}
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Focused");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("Whether the terminal itself is currently focused.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
var value: bool = t.flags.focused;
_ = cimgui.c.ImGui_Checkbox("##focused", &value);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Previous Char");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The previously printed character, used only for the REP sequence.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
if (t.previous_char) |c| {
cimgui.c.ImGui_Text("U+%04X", @as(u32, c));
} else {
cimgui.c.ImGui_TextDisabled("(none)");
}
}
}
}
fn renderLayoutContent(ctx: RenderContext) void {
const t = ctx.terminal;
_ = cimgui.c.ImGui_BeginTable(
"table_layout",
2,
cimgui.c.ImGuiTableFlags_None,
);
defer cimgui.c.ImGui_EndTable();
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Grid");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The size of the terminal grid in columns and rows.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_Text(
"%dc x %dr",
t.cols,
t.rows,
);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Pixels");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The size of the terminal grid in pixels.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_Text(
"%dw x %dh",
t.width_px,
t.height_px,
);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Scroll Region");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The scrolling region boundaries (top, bottom, left, right).");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_PushItemWidth(cimgui.c.ImGui_CalcTextSize("00000").x);
defer cimgui.c.ImGui_PopItemWidth();
var override = t.scrolling_region;
var changed = false;
cimgui.c.ImGui_AlignTextToFramePadding();
cimgui.c.ImGui_Text("T:");
cimgui.c.ImGui_SameLine();
if (cimgui.c.ImGui_InputScalar(
"##scroll_top",
cimgui.c.ImGuiDataType_U16,
&override.top,
)) {
override.top = @min(override.top, t.rows -| 1);
changed = true;
}
cimgui.c.ImGui_SameLine();
cimgui.c.ImGui_Text("B:");
cimgui.c.ImGui_SameLine();
if (cimgui.c.ImGui_InputScalar(
"##scroll_bottom",
cimgui.c.ImGuiDataType_U16,
&override.bottom,
)) {
override.bottom = @min(override.bottom, t.rows -| 1);
changed = true;
}
cimgui.c.ImGui_SameLine();
cimgui.c.ImGui_Text("L:");
cimgui.c.ImGui_SameLine();
if (cimgui.c.ImGui_InputScalar(
"##scroll_left",
cimgui.c.ImGuiDataType_U16,
&override.left,
)) {
override.left = @min(override.left, t.cols -| 1);
changed = true;
}
cimgui.c.ImGui_SameLine();
cimgui.c.ImGui_Text("R:");
cimgui.c.ImGui_SameLine();
if (cimgui.c.ImGui_InputScalar(
"##scroll_right",
cimgui.c.ImGuiDataType_U16,
&override.right,
)) {
override.right = @min(override.right, t.cols -| 1);
changed = true;
}
if (changed and
override.top < override.bottom and
override.left < override.right)
{
t.scrolling_region = override;
}
}
}
}
fn renderMouseContent(ctx: RenderContext) void {
const t = ctx.terminal;
_ = cimgui.c.ImGui_BeginTable(
"table_mouse",
2,
cimgui.c.ImGuiTableFlags_None,
);
defer cimgui.c.ImGui_EndTable();
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Event Mode");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The mouse event reporting mode set by the application.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_Text("%s", @tagName(t.flags.mouse_event).ptr);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Format");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The mouse event encoding format.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_Text("%s", @tagName(t.flags.mouse_format).ptr);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Shape");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The current mouse cursor shape set by the application.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
cimgui.c.ImGui_Text("%s", @tagName(t.mouse_shape).ptr);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Shift Capture");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("XTSHIFTESCAPE state for capturing shift in mouse protocol.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
if (t.flags.mouse_shift_capture == .null) {
cimgui.c.ImGui_TextDisabled("(unset)");
} else {
cimgui.c.ImGui_Text("%s", @tagName(t.flags.mouse_shift_capture).ptr);
}
}
}
}
fn renderColorContent(ctx: RenderContext) void {
const t = ctx.terminal;
cimgui.c.ImGui_TextWrapped(
"Color state for the terminal. Note these colors only apply " ++
"to the palette and unstyled colors. Many modern terminal " ++
"applications use direct RGB colors which are not reflected here.",
);
cimgui.c.ImGui_Separator();
_ = cimgui.c.ImGui_BeginTable(
"table_color",
2,
cimgui.c.ImGuiTableFlags_None,
);
defer cimgui.c.ImGui_EndTable();
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Background");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("Unstyled cell background color.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
_ = dynamicRGB(
"bg_color",
&t.colors.background,
);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Foreground");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("Unstyled cell foreground color.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
_ = dynamicRGB(
"fg_color",
&t.colors.foreground,
);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Cursor");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("Cursor coloring set by escape sequences.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
_ = dynamicRGB(
"cursor_color",
&t.colors.cursor,
);
}
}
{
cimgui.c.ImGui_TableNextRow();
{
_ = cimgui.c.ImGui_TableSetColumnIndex(0);
cimgui.c.ImGui_Text("Palette");
cimgui.c.ImGui_SameLine();
widgets.helpMarker("The 256-color palette.");
}
{
_ = cimgui.c.ImGui_TableSetColumnIndex(1);
if (cimgui.c.ImGui_Button("View")) {
ctx.window.show_palette = true;
}
}
}
}
/// Render a DynamicRGB color.
///
/// Note: this currently can't be modified but we plan to allow that

View File

@@ -12,3 +12,58 @@ pub fn helpMarker(text: [:0]const u8) void {
cimgui.c.ImGui_TextUnformatted(text.ptr);
}
/// Render a collapsing header that can be detached into its own window.
/// When detached, renders as a separate window with a close button.
/// When attached, renders as a collapsing header with a pop-out button.
pub fn collapsingHeaderDetachable(
label: [:0]const u8,
show: *bool,
ctx: anytype,
comptime contentFn: fn (@TypeOf(ctx)) void,
) void {
if (show.*) {
defer cimgui.c.ImGui_End();
if (cimgui.c.ImGui_Begin(
label,
show,
cimgui.c.ImGuiWindowFlags_NoFocusOnAppearing,
)) contentFn(ctx);
return;
}
cimgui.c.ImGui_SetNextItemAllowOverlap();
const is_open = cimgui.c.ImGui_CollapsingHeader(
label,
cimgui.c.ImGuiTreeNodeFlags_DefaultOpen,
);
// Place pop-out button inside the header bar
const header_max = cimgui.c.ImGui_GetItemRectMax();
const header_min = cimgui.c.ImGui_GetItemRectMin();
const frame_height = cimgui.c.ImGui_GetFrameHeight();
const button_size = frame_height - 4;
const padding = 4;
cimgui.c.ImGui_SameLine();
cimgui.c.ImGui_SetCursorScreenPos(.{
.x = header_max.x - button_size - padding,
.y = header_min.y + 2,
});
cimgui.c.ImGui_PushStyleVarImVec2(
cimgui.c.ImGuiStyleVar_FramePadding,
.{ .x = 0, .y = 0 },
);
if (cimgui.c.ImGui_ButtonEx(
">>##detach",
.{ .x = button_size, .y = button_size },
)) {
show.* = true;
}
cimgui.c.ImGui_PopStyleVar();
if (cimgui.c.ImGui_IsItemHovered(cimgui.c.ImGuiHoveredFlags_DelayShort)) {
cimgui.c.ImGui_SetTooltip("Pop out into separate window");
}
if (is_open) contentFn(ctx);
}