From e534a8cb1857cce8f4ff40dafa934d55cd04c230 Mon Sep 17 00:00:00 2001 From: gmegidish Date: Fri, 18 Sep 2026 18:18:59 +0200 Subject: [PATCH] feat(inspector): resizable panes, arrow-key row navigation, sticky raw attributes and favicon --- packages/inspector/public/css/app.css | 32 +++++++++--- packages/inspector/public/favicon.ico | Bin 0 -> 3494 bytes packages/inspector/public/index.html | 2 + packages/inspector/public/js/app.js | 70 +++++++++++++++++++++++--- 4 files changed, 90 insertions(+), 14 deletions(-) create mode 100644 packages/inspector/public/favicon.ico diff --git a/packages/inspector/public/css/app.css b/packages/inspector/public/css/app.css index 0d93645..4961f9c 100644 --- a/packages/inspector/public/css/app.css +++ b/packages/inspector/public/css/app.css @@ -256,15 +256,33 @@ main { overflow: hidden; } +/* ---- Splitters ---- */ + +.splitter { + flex: 0 0 7px; + cursor: col-resize; + touch-action: none; + background: linear-gradient(var(--c-border), var(--c-border)) center / 1px 100% no-repeat; +} + +.splitter:hover, +.splitter:focus-visible, +.splitter.dragging { + outline: none; + background: linear-gradient(var(--c-accent), var(--c-accent)) center / 3px 100% no-repeat; +} + +.splitter:has(+ [hidden]) { display: none; } + /* ---- Screenshot pane ---- */ #screenshot-pane { flex: 0 0 auto; + width: var(--screenshot-width, auto); min-width: 300px; max-width: 50%; position: relative; overflow: hidden; - border-right: 1px solid var(--c-border); background: var(--c-pane-bg); display: flex; align-items: flex-start; @@ -468,10 +486,11 @@ main { /* ---- Detail pane ---- */ #detail-pane { - flex: 0 0 320px; + flex: 0 0 var(--detail-width, 320px); + min-width: 240px; + max-width: 60%; overflow-y: auto; background: var(--c-surface); - border-left: 1px solid var(--c-border); display: flex; flex-direction: column; animation: slide-in 0.15s ease-out; @@ -479,7 +498,7 @@ main { @keyframes slide-in { from { flex-basis: 0; opacity: 0; } - to { flex-basis: 320px; opacity: 1; } + to { flex-basis: var(--detail-width, 320px); opacity: 1; } } #detail-header { @@ -674,15 +693,16 @@ main { main { flex-direction: column; } + .splitter { display: none; } #screenshot-pane { + width: auto; max-width: 100%; - border-right: none; border-bottom: 1px solid var(--c-border); } #detail-pane { flex: 1; width: 100%; - border-left: none; + max-width: 100%; border-top: 1px solid var(--c-border); } } diff --git a/packages/inspector/public/favicon.ico b/packages/inspector/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..e5760c4ad34ae35c125b1984c8a5184214c32a49 GIT binary patch literal 3494 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 literal 0 HcmV?d00001 diff --git a/packages/inspector/public/index.html b/packages/inspector/public/index.html index 6fd18d4..7cada5d 100644 --- a/packages/inspector/public/index.html +++ b/packages/inspector/public/index.html @@ -57,9 +57,11 @@

Mobilewright Inspector

+
+