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 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..1c342a9 100644 --- a/packages/devtools-ui/src/src/Inspector.elm +++ b/packages/devtools-ui/src/src/Inspector.elm @@ -92,6 +92,22 @@ viewTabs maybeEvent activeTab maybeDiagnosis = , tabButton "CORS" CorsTab activeTab , tabButton "SDK State" SdkStateTab 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 -> + [] + ) ++ (if isSdkEvent then [ tabButton "Collectors" CollectorsTab 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 "" 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