web addon: add response hex view

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

@@ -16,7 +16,7 @@ interface Iprops {
 }
 
 interface IState {
-  flowTab: 'Headers' | 'Preview' | 'Response'
+  flowTab: 'Headers' | 'Preview' | 'Response' | 'Hexview'
   copied: boolean
 }
 
@@ -53,6 +53,19 @@ class ViewFlow extends React.Component<Iprops, IState> {
     return <div style={{ color: 'gray' }}>Not support preview</div>
   }
 
+  hexview() {
+    const { flow } = this.props
+    if (!flow) return null
+    const response = flow.response
+    if (!response) return null
+
+    if (!(response.body && response.body.byteLength)) {
+      return <div style={{ color: 'gray' }}>No response</div>
+    }
+
+    return <pre>{flow.hexviewResponseBody()}</pre>
+  }
+
   render() {
     if (!this.props.flow) return null
 
@@ -77,6 +90,7 @@ class ViewFlow extends React.Component<Iprops, IState> {
           <span className={flowTab === 'Headers' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Headers' }) }}>Headers</span>
           <span className={flowTab === 'Preview' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Preview' }) }}>Preview</span>
           <span className={flowTab === 'Response' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Response' }) }}>Response</span>
+          <span className={flowTab === 'Hexview' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Hexview' }) }}>Hexview</span>
 
           <EditFlow
             flow={flow}
@@ -214,6 +228,11 @@ class ViewFlow extends React.Component<Iprops, IState> {
             !(flowTab === 'Preview') ? null :
               <div>{this.preview()}</div>
           }
+
+          {
+            !(flowTab === 'Hexview') ? null :
+              <div>{this.hexview()}</div>
+          }
         </div>
 
       </div>

addon/web/client/src/message.ts

@@ -1,4 +1,4 @@
-import { arrayBufferToBase64, getSize, isTextBody } from './utils'
+import { arrayBufferToBase64, bufHexView, getSize, isTextBody } from './utils'
 
 export enum MessageType {
   REQUEST = 1,
@@ -76,6 +76,7 @@ export class Flow {
   private _responseBody: string | null
 
   private _previewResponseBody: IPreviewResponseBody | null = null
+  private _hexviewResponseBody: string | null = null
 
   constructor(msg: IMessage) {
     this.no = ++Flow.curNo
@@ -209,6 +210,17 @@ export class Flow {
 
     return this._previewResponseBody
   }
+
+  public hexviewResponseBody(): string | null {
+    if (this._hexviewResponseBody) return this._hexviewResponseBody
+
+    if (this.status < MessageType.RESPONSE_BODY) return null
+    if (!(this.response?.body?.byteLength)) return null
+
+    this._hexviewResponseBody = bufHexView(this.response.body)
+
+    return this._hexviewResponseBody
+  }
 }
 
 const allMessageBytes = [

addon/web/client/src/utils.ts

@@ -41,3 +41,20 @@ export const arrayBufferToBase64 = (buf: ArrayBuffer) => {
   }
   return btoa(binary)
 }
+
+export const bufHexView = (buf: ArrayBuffer) => {
+  let str = ''
+  const bytes = new Uint8Array(buf)
+  const len = bytes.byteLength
+
+  str += '00000000:  '
+  for (let i = 0; i < len; i++) {
+    str += bytes[i].toString(16).padStart(2, '0') + ' '
+    if ((i + 1) % 16 === 0) {
+      str += `\n${(i + 1).toString(16).padStart(8, '0')}:  `
+    } else if ((i + 1) % 8 === 0) {
+      str += '  '
+    }
+  }
+  return str
+}