show Query String Parameters

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

@@ -62,6 +62,14 @@ class ViewFlow extends React.Component<Iprops, IState> {
     const request = flow.request
     const response: IResponse = (flow.response || {}) as any
 
+    // Query String Parameters
+    const searchItems: Array<{ key: string; value: string }> = []
+    if (flow.url && flow.url.search) {
+      flow.url.searchParams.forEach((value, key) => {
+        searchItems.push({ key, value })
+      })
+    }
+
     return (
       <div className="flow-detail">
         <div className="header-tabs">
@@ -159,6 +167,22 @@ class ViewFlow extends React.Component<Iprops, IState> {
                   </div>
                 </div>
 
+                {
+                  !(searchItems.length) ? null :
+                    <div className="header-block">
+                      <p>Query String Parameters</p>
+                      <div className="header-block-content">
+                        {
+                          searchItems.map(({ key, value }) => {
+                            return (
+                              <p key={key}>{key}: {value}</p>
+                            )
+                          })
+                        }
+                      </div>
+                    </div>
+                }
+
                 {
                   !(request.body && request.body.byteLength) ? null :
                     <div className="header-block">

addon/web/client/src/message.ts

@@ -55,7 +55,7 @@ export class Flow {
   public request: IRequest
   public response: IResponse | null = null
 
-  private url: URL
+  public url: URL
   private path: string
   private _size = 0
   private size = '0'