Merge pull request #47 from ryanbas21/feat/inspector-payload-tab

feat(devtools-ui): add Payload tab to inspector panel

Author: ryanbas21

.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

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;

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

packages/devtools-ui/src/src/Types.elm

@@ -179,6 +179,7 @@ type alias OidcSemanticData =
 type InspectorTab
     = DiagnosisTab
     | HeadersTab
+    | PayloadTab
     | CookiesTab
     | CorsTab
     | SdkStateTab

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