support preview request body

addon/web/client/src/App.css

@@ -90,3 +90,14 @@
   margin-left: 20px;
   line-height: 1.5;
 }
+
+.flow-detail .request-body-detail span {
+  display: inline-block;
+  line-height: 1;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.flow-detail .request-body-detail .selected {
+  border-bottom: 2px rgb(35, 118, 229) solid;
+}

addon/web/client/src/components/ViewFlow.tsx

@@ -18,6 +18,7 @@ interface Iprops {
 interface IState {
   flowTab: 'Headers' | 'Preview' | 'Response' | 'Hexview'
   copied: boolean
+  requestBodyViewTab: 'Raw' | 'Preview'
 }
 
 class ViewFlow extends React.Component<Iprops, IState> {
@@ -27,6 +28,7 @@ class ViewFlow extends React.Component<Iprops, IState> {
     this.state = {
       flowTab: 'Headers',
       copied: false,
+      requestBodyViewTab: 'Raw',
     }
   }
 
@@ -53,6 +55,23 @@ class ViewFlow extends React.Component<Iprops, IState> {
     return <div style={{ color: 'gray' }}>Not support preview</div>
   }
 
+  requestBodyPreview() {
+    const { flow } = this.props
+    if (!flow) return null
+
+    const pv = flow.previewRequestBody()
+    if (!pv) return <div style={{ color: 'gray' }}>Not support preview</div>
+
+    if (pv.type === 'json') {
+      return <div><JSONPretty data={pv.data} keyStyle={'color: rgb(130,40,144);'} stringStyle={'color: rgb(153,68,60);'} valueStyle={'color: rgb(25,1,199);'} booleanStyle={'color: rgb(94,105,192);'} /></div>
+    }
+    else if (pv.type === 'binary') {
+      return <div><pre>{pv.data}</pre></div>
+    }
+
+    return <div style={{ color: 'gray' }}>Not support preview</div>
+  }
+
   hexview() {
     const { flow } = this.props
     if (!flow) return null
@@ -203,12 +222,23 @@ class ViewFlow extends React.Component<Iprops, IState> {
                       <p>Request Body</p>
                       <div className="header-block-content">
                         <div>
+                          <div className="request-body-detail" style={{ marginBottom: '15px' }}>
+                            <span className={this.state.requestBodyViewTab === 'Raw' ? 'selected' : undefined} onClick={() => { this.setState({ requestBodyViewTab: 'Raw' }) }}>Raw</span>
+                            <span className={this.state.requestBodyViewTab === 'Preview' ? 'selected' : undefined} onClick={() => { this.setState({ requestBodyViewTab: 'Preview' }) }}>Preview</span>
+                          </div>
+
+                          {
+                            !(this.state.requestBodyViewTab === 'Raw') ? null :
+                              <div>
+                                {
+                                  !(flow.isTextRequest()) ? <span style={{ color: 'gray' }}>Not text Request</span> : flow.requestBody()
+                                }
+                              </div>
+                          }
+
                           {
-                            !(flow.isTextRequest()) ? <div>
+                            !(this.state.requestBodyViewTab === 'Preview') ? null :
-                              <p><span style={{ color: 'gray' }}>Hex:</span></p>
+                              <div>{this.requestBodyPreview()}</div>
-                              <div><pre>{flow.hexviewRequestBody()}</pre></div>
-                            </div> :
-                              flow.requestBody()
                           }
                         </div>
                       </div>

addon/web/client/src/message.ts

@@ -43,9 +43,9 @@ export interface IFlowPreview {
   contentType: string
 }
 
-interface IPreviewResponseBody {
+interface IPreviewBody {
-  type: 'image' | 'json'
+  type: 'image' | 'json' | 'binary'
-  data: string
+  data: string | null
 }
 
 export class Flow {
@@ -76,7 +76,8 @@ export class Flow {
   private _hexviewRequestBody: string | null = null
   private _responseBody: string | null
 
-  private _previewResponseBody: IPreviewResponseBody | null = null
+  private _previewResponseBody: IPreviewBody | null = null
+  private _previewRequestBody: IPreviewBody | null = null
   private _hexviewResponseBody: string | null = null
 
   constructor(msg: IMessage) {
@@ -195,7 +196,7 @@ export class Flow {
     return this._responseBody
   }
 
-  public previewResponseBody(): IPreviewResponseBody | null {
+  public previewResponseBody(): IPreviewBody | null {
     if (this._previewResponseBody) return this._previewResponseBody
 
     if (this.status < MessageType.RESPONSE_BODY) return null
@@ -221,6 +222,27 @@ export class Flow {
     return this._previewResponseBody
   }
 
+  public previewRequestBody(): IPreviewBody | null {
+    if (this._previewRequestBody) return this._previewRequestBody
+
+    if (this.status < MessageType.REQUEST_BODY) return null
+    if (!(this.request.body?.byteLength)) return null
+
+    if (!this.isTextRequest()) {
+      this._previewRequestBody = {
+        type: 'binary',
+        data: this.hexviewRequestBody(),
+      }
+    } else if (/json/.test(this.request.header['Content-Type'].join(''))) {
+      this._previewRequestBody = {
+        type: 'json',
+        data: this.requestBody(),
+      }
+    }
+
+    return this._previewRequestBody
+  }
+
   public hexviewResponseBody(): string | null {
     if (this._hexviewResponseBody !== null) return this._hexviewResponseBody