feat(network): copy response

package.json

@@ -65,7 +65,7 @@
     "karma-webpack": "^5.0.0",
     "licia": "^1.37.0",
     "luna-console": "^1.2.0",
-    "luna-data-grid": "^0.3.1",
+    "luna-data-grid": "^0.3.2",
     "luna-dom-viewer": "^1.1.1",
     "luna-modal": "^1.0.0",
     "luna-notification": "^0.1.4",

src/Console/Console.js

@@ -249,10 +249,8 @@ export default class Console extends Tool {
         })
       })
       .on('click', c('.copy'), () => {
-        if (this._selectedLog) {
-          this._selectedLog.copy()
-          container.notify('Copied')
-        }
+        this._selectedLog.copy()
+        container.notify('Copied')
       })
 
     $inputBtns

src/Elements/Elements.js

@@ -78,7 +78,7 @@ export default class Elements extends Tool {
     $el.html(
       c(`<div class="control">
         <span class="icon icon-select select"></span>
-        <span class="icon icon-eye show"></span>
+        <span class="icon icon-eye show-detail"></span>
       </div>
       <div class="dom-viewer-container">
         <div class="dom-viewer"></div>
@@ -130,7 +130,7 @@ export default class Elements extends Tool {
 
     this._$control
       .on('click', c('.select'), () => this._toggleSelect())
-      .on('click', c('.show'), () => this._detail.show(this._curNode))
+      .on('click', c('.show-detail'), () => this._detail.show(this._curNode))
 
     this._domViewer.on('select', this._setNode)
 

src/Network/Detail.js

@@ -1,12 +1,11 @@
 import trim from 'licia/trim'
 import isEmpty from 'licia/isEmpty'
 import map from 'licia/map'
+import each from 'licia/each'
 import escape from 'licia/escape'
 import copy from 'licia/copy'
-import extend from 'licia/extend'
 import isJson from 'licia/isJson'
 import { classPrefix as c } from '../lib/util'
-import { curlStr } from './util'
 
 export default class Detail {
   constructor($container, devtools) {
@@ -60,7 +59,7 @@ export default class Detail {
     const html = `<div class="${c('control')}">
       <span class="${c('icon-arrow-left back')}"></span>
       <span class="${c('url')}">${escape(data.url)}</span>
-      <span class="${c('icon-copy copy-curl')}"></span>
+      <span class="${c('icon-copy copy-res')}"></span>
     </div>
     <div class="${c('http')}">
       ${postData}
@@ -89,35 +88,23 @@ export default class Detail {
   hide() {
     this._$container.hide()
   }
-  _copyCurl = () => {
+  _copyRes = () => {
     const detailData = this._detailData
 
-    copy(
-      curlStr({
-        requestMethod: detailData.method,
-        url() {
-          return detailData.url
-        },
-        requestFormData() {
-          return detailData.data
-        },
-        requestHeaders() {
-          const reqHeaders = detailData.reqHeaders || {}
-          extend(reqHeaders, {
-            'User-Agent': navigator.userAgent,
-            Referer: location.href,
-          })
-
-          return map(reqHeaders, (value, name) => {
-            return {
-              name,
-              value,
-            }
-          })
-        },
-      })
-    )
+    let data = `${detailData.method} ${detailData.url} ${detailData.status}\n`
+    if (!isEmpty(detailData.reqHeaders)) {
+      data += '\nRequest Headers\n\n'
+      each(detailData.reqHeaders, (val, key) => (data += `${key}: ${val}\n`))
+    }
+    if (!isEmpty(detailData.resHeaders)) {
+      data += '\nResponse Headers\n\n'
+      each(detailData.resHeaders, (val, key) => (data += `${key}: ${val}\n`))
+    }
+    if (detailData.resTxt) {
+      data += `\n${detailData.resTxt}\n`
+    }
 
+    copy(data)
     this._devtools.notify('Copied')
   }
   _bindEvent() {
@@ -125,7 +112,7 @@ export default class Detail {
 
     this._$container
       .on('click', c('.back'), () => this.hide())
-      .on('click', c('.copy-curl'), this._copyCurl)
+      .on('click', c('.copy-res'), this._copyRes)
       .on('click', c('.http .response'), () => {
         const data = this._detailData
         const resTxt = data.resTxt

src/Network/Network.js

@@ -2,6 +2,7 @@ import Tool from '../DevTools/Tool'
 import $ from 'licia/$'
 import ms from 'licia/ms'
 import each from 'licia/each'
+import map from 'licia/map'
 import Detail from './Detail'
 import throttle from 'licia/throttle'
 import { getFileName, classPrefix as c } from '../lib/util'
@@ -10,6 +11,9 @@ import chobitsu from '../lib/chobitsu'
 import LunaDataGrid from 'luna-data-grid'
 import ResizeSensor from 'licia/ResizeSensor'
 import { getType } from './util'
+import copy from 'licia/copy'
+import extend from 'licia/extend'
+import { curlStr } from './util'
 
 export default class Network extends Tool {
   constructor() {
@@ -19,6 +23,7 @@ export default class Network extends Tool {
 
     this.name = 'network'
     this._requests = {}
+    this._selectedRequest = null
   }
   init($el, container) {
     super.init($el)
@@ -184,20 +189,73 @@ export default class Network extends Tool {
 
     request.render()
   }
+  _copyCurl = () => {
+    const request = this._selectedRequest
+
+    copy(
+      curlStr({
+        requestMethod: request.method,
+        url() {
+          return request.url
+        },
+        requestFormData() {
+          return request.data
+        },
+        requestHeaders() {
+          const reqHeaders = request.reqHeaders || {}
+          extend(reqHeaders, {
+            'User-Agent': navigator.userAgent,
+            Referer: location.href,
+          })
+
+          return map(reqHeaders, (value, name) => {
+            return {
+              name,
+              value,
+            }
+          })
+        },
+      })
+    )
+
+    this._container.notify('Copied')
+  }
+  _updateButtons() {
+    const $control = this._$control
+    const $showDetail = $control.find(c('.show-detail'))
+    const $copyCurl = $control.find(c('.copy-curl'))
+
+    $showDetail.addClass(c('icon-disabled'))
+    $copyCurl.addClass(c('icon-disabled'))
+
+    if (this._selectedRequest) {
+      $showDetail.rmClass(c('icon-disabled'))
+      $copyCurl.rmClass(c('icon-disabled'))
+    }
+  }
   _bindEvent() {
-    const $el = this._$el
+    const $control = this._$control
+    const requestDataGrid = this._requestDataGrid
 
     const self = this
 
-    $el.on('click', c('.clear-request'), () => this.clear())
+    $control
+      .on('click', c('.clear-request'), () => this.clear())
+      .on('click', c('.show-detail'), () =>
+        this._detail.show(this._selectedRequest)
+      )
+      .on('click', c('.copy-curl'), this._copyCurl)
 
-    this._requestDataGrid.on('select', (node) => {
+    requestDataGrid.on('select', (node) => {
       const id = $(node.container).data('id')
       const request = self._requests[id]
-      if (!request.done) {
-        return
-      }
-      self._detail.show(request)
+      this._selectedRequest = request
+      this._updateButtons()
+    })
+
+    requestDataGrid.on('deselect', () => {
+      this._selectedRequest = null
+      this._updateButtons()
     })
 
     this._resizeSensor.addListener(
@@ -230,11 +288,14 @@ export default class Network extends Tool {
       c(`<div class="control">
       <span class="title">Request</span>
       <span class="icon-clear clear-request"></span>
+      <span class="icon-eye icon-disabled show-detail"></span>
+      <span class="icon-copy icon-disabled copy-curl"></span>
     </div>
     <div class="requests"></div>
     <div class="detail"></div>`)
     )
     this._$detail = $el.find(c('.detail'))
     this._$requests = $el.find(c('.requests'))
+    this._$control = $el.find(c('.control'))
   }
 }

src/Network/Network.scss

@@ -11,8 +11,14 @@
       font-size: $font-size;
     }
     .icon-clear {
+      right: 46px;
+    }
+    .icon-eye {
       right: 0;
     }
+    .icon-copy {
+      right: 23px;
+    }
   }
   .request-error {
     color: var(--console-error-foreground);