From a91fbd919fec88022ccb2d49fcfa5630adb8c037 Mon Sep 17 00:00:00 2001 From: Ryan Bas Date: Wed, 13 May 2026 11:02:17 -0600 Subject: [PATCH 1/3] feat(devtools-ui): add Payload tab to inspector panel Extract request/response bodies from the Headers tab into a dedicated "Payload" tab (matching Chrome DevTools naming). The tab only appears when a network event has body data, and each section includes a copy button for easy clipboard export. The Headers tab now shows only URL, method, and header data. Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/devtools-ui/src/panel.css | 11 ++++ packages/devtools-ui/src/src/Inspector.elm | 65 +++++++++++++++++++--- packages/devtools-ui/src/src/Types.elm | 1 + packages/devtools-ui/src/src/Update.elm | 11 ++++ 4 files changed, 79 insertions(+), 9 deletions(-) diff --git a/packages/devtools-ui/src/panel.css b/packages/devtools-ui/src/panel.css index 23d1c9a..1640d2c 100644 --- a/packages/devtools-ui/src/panel.css +++ b/packages/devtools-ui/src/panel.css @@ -566,6 +566,17 @@ body { padding: 2px 8px; } +/* ── Payload Tab ─────────────────────────────────────────── */ +.payload-section { + margin-bottom: 8px; +} +.payload-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 4px; +} + /* ── JsonTree ────────────────────────────────────────────── */ .jt-sec { margin-bottom: 14px; diff --git a/packages/devtools-ui/src/src/Inspector.elm b/packages/devtools-ui/src/src/Inspector.elm index 1925469..e4ce76a 100644 --- a/packages/devtools-ui/src/src/Inspector.elm +++ b/packages/devtools-ui/src/src/Inspector.elm @@ -87,8 +87,24 @@ viewTabs maybeEvent activeTab maybeDiagnosis = else [] ) - ++ [ tabButton "Headers" HeadersTab activeTab - , tabButton "Cookies" CookiesTab activeTab + ++ [ tabButton "Headers" HeadersTab activeTab ] + ++ (case maybeEvent of + Just event -> + case event.data of + Network net -> + if net.requestBody /= Nothing || net.responseBody /= Nothing then + [ tabButton "Payload" PayloadTab activeTab ] + + else + [] + + _ -> + [] + + Nothing -> + [] + ) + ++ [ tabButton "Cookies" CookiesTab activeTab , tabButton "CORS" CorsTab activeTab , tabButton "SDK State" SdkStateTab activeTab ] @@ -166,19 +182,35 @@ viewContent maybeEvent activeTab maybeDiagnosis = Just h -> JsonTree.view "Response Headers" h Nothing -> viewEmptySection "Response Headers" ] - ++ (case net.requestBody of - Just b -> [ JsonTree.view "Request Body" b ] - Nothing -> [] - ) + ) + + _ -> + div [ class "insp-empty" ] + [ text "Select a network request to see headers." ] + + ( Just event, PayloadTab ) -> + case event.data of + Network net -> + div [] + ((case net.requestBody of + Just b -> + [ viewPayloadSection "Request Body" b ] + + Nothing -> + [] + ) ++ (case net.responseBody of - Just b -> [ JsonTree.view "Response Body" b ] - Nothing -> [] + Just b -> + [ viewPayloadSection "Response Body" b ] + + Nothing -> + [] ) ) _ -> div [ class "insp-empty" ] - [ text "Select a network request to see headers." ] + [ text "No payload data for this event." ] ( Just event, CookiesTab ) -> case event.data of @@ -407,6 +439,21 @@ viewEmptySection label = ] +viewPayloadSection : String -> Decode.Value -> Html Msg +viewPayloadSection label body = + div [ class "payload-section" ] + [ div [ class "payload-header" ] + [ div [ class "sect-hdr", style "margin" "0", style "border" "none", style "padding" "0" ] [ text label ] + , button + [ class "fv-copy-btn" + , onClick (CopyToClipboard (Encode.encode 4 body)) + ] + [ text "\u{2398}" ] + ] + , JsonTree.view label body + ] + + viewCookies : NetworkData -> List (Html Msg) viewCookies net = let diff --git a/packages/devtools-ui/src/src/Types.elm b/packages/devtools-ui/src/src/Types.elm index 1265623..83e007f 100644 --- a/packages/devtools-ui/src/src/Types.elm +++ b/packages/devtools-ui/src/src/Types.elm @@ -179,6 +179,7 @@ type alias OidcSemanticData = type InspectorTab = DiagnosisTab | HeadersTab + | PayloadTab | CookiesTab | CorsTab | SdkStateTab diff --git a/packages/devtools-ui/src/src/Update.elm b/packages/devtools-ui/src/src/Update.elm index 86f77c4..4136cb6 100644 --- a/packages/devtools-ui/src/src/Update.elm +++ b/packages/devtools-ui/src/src/Update.elm @@ -105,6 +105,17 @@ update msg model = else OidcTab + ( PayloadTab, Just e ) -> + case e.data of + Network net -> + if net.requestBody == Nothing && net.responseBody == Nothing then + HeadersTab + else + PayloadTab + + _ -> + HeadersTab + _ -> model.activeTab in From a8e6d5220fcd6a7c932f6abe8949f42d3d2f2f67 Mon Sep 17 00:00:00 2001 From: "pullfrog[bot]" <226033991+pullfrog[bot]@users.noreply.github.com> Date: Wed, 13 May 2026 17:19:56 +0000 Subject: [PATCH 2/3] address review feedback: move Payload tab to right edge, deduplicate label --- packages/devtools-ui/src/src/Inspector.elm | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/devtools-ui/src/src/Inspector.elm b/packages/devtools-ui/src/src/Inspector.elm index e4ce76a..1c342a9 100644 --- a/packages/devtools-ui/src/src/Inspector.elm +++ b/packages/devtools-ui/src/src/Inspector.elm @@ -87,7 +87,11 @@ viewTabs maybeEvent activeTab maybeDiagnosis = else [] ) - ++ [ tabButton "Headers" HeadersTab activeTab ] + ++ [ tabButton "Headers" HeadersTab activeTab + , tabButton "Cookies" CookiesTab activeTab + , tabButton "CORS" CorsTab activeTab + , tabButton "SDK State" SdkStateTab activeTab + ] ++ (case maybeEvent of Just event -> case event.data of @@ -104,10 +108,6 @@ viewTabs maybeEvent activeTab maybeDiagnosis = Nothing -> [] ) - ++ [ tabButton "Cookies" CookiesTab activeTab - , tabButton "CORS" CorsTab activeTab - , tabButton "SDK State" SdkStateTab activeTab - ] ++ (if isSdkEvent then [ tabButton "Collectors" CollectorsTab activeTab ] @@ -450,7 +450,7 @@ viewPayloadSection label body = ] [ text "\u{2398}" ] ] - , JsonTree.view label body + , JsonTree.view "" body ] From f3e7c29f83e4eca83b702dad34e4ca23cb6ed09b Mon Sep 17 00:00:00 2001 From: Ryan Bas Date: Wed, 13 May 2026 12:20:36 -0600 Subject: [PATCH 3/3] chore: add changeset for Payload tab feature Co-Authored-By: Claude Opus 4.6 (1M context) --- .changeset/add-payload-tab.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/add-payload-tab.md diff --git a/.changeset/add-payload-tab.md b/.changeset/add-payload-tab.md new file mode 100644 index 0000000..24b3e64 --- /dev/null +++ b/.changeset/add-payload-tab.md @@ -0,0 +1,5 @@ +--- +'@wolfcola/devtools-extension': minor +--- + +Add Payload tab to inspector panel, separating request/response bodies from the Headers tab into a dedicated tab matching Chrome DevTools naming conventions