feat: move http view from sources to network

src/Network/Network.hbs

@@ -4,20 +4,5 @@
         <span {{{class 'icon-clear'}}}></span>
     </div>
 </div>
-<ul {{{class 'requests'}}}>
-    {{#if requests}}
-        {{#each requests}}
-            <li class="eruda-request {{#if hasErr}}eruda-error{{/if}}" data-id="{{@key}}">
-                <span>{{name}}</span>
-                <span>{{status}}</span>
-                <span>{{method}}</span>
-                <span>{{subType}}</span>
-                <span>{{size}}</span>
-                <span>{{displayTime}}</span>
-                <span {{{class 'blue'}}}>{{url}}</span>
-            </li>
-        {{/each}}
-    {{else}}
-        <li><span>Empty</span></li>
-    {{/if}}
-</ul>
+<ul {{{class 'requests'}}}></ul>
+<div {{{class 'detail'}}}></div>

src/Network/Network.js

@@ -10,7 +10,8 @@ import {
   extend,
   isEmpty,
   $,
-  ms
+  ms,
+  trim
 } from '../lib/util'
 
 export default class Network extends Tool {
@@ -22,6 +23,9 @@ export default class Network extends Tool {
     this.name = 'network'
     this._requests = {}
     this._tpl = require('./Network.hbs')
+    this._detailTpl = require('./detail.hbs')
+    this._requestsTpl = require('./requests.hbs')
+    this._datailData = {}
     this._isFetchSupported = false
     if (window.fetch) this._isFetchSupported = isNative(window.fetch)
   }
@@ -32,6 +36,7 @@ export default class Network extends Tool {
     this._bindEvent()
     this._initCfg()
     this.overrideXhr()
+    this._appendTpl()
   }
   show() {
     super.show()
@@ -166,9 +171,29 @@ export default class Network extends Tool {
 
         if (!data.done) return
 
-        showSources('http', data)
+        self._showDetail(data)
       })
       .on('click', '.eruda-clear-request', () => this.clear())
+      .on('click', '.eruda-back', () => this._hideDetail())
+      .on('click', '.eruda-http .eruda-response', () => {
+        const data = this._detailData
+        const resTxt = data.resTxt
+
+        switch (data.subType) {
+          case 'css':
+            return showSources('css', resTxt)
+          case 'html':
+            return showSources('html', resTxt)
+          case 'javascript':
+            return showSources('js', resTxt)
+          case 'json':
+            return showSources('json', resTxt)
+        }
+        switch (data.type) {
+          case 'image':
+            return showSources('img', data.url)
+        }
+      })
 
     function showSources(type, data) {
       const sources = container.get('sources')
@@ -187,6 +212,15 @@ export default class Network extends Tool {
     this.restoreFetch()
     this._rmCfg()
   }
+  _showDetail(data) {
+    if (data.resTxt && trim(data.resTxt) === '') delete data.resTxt
+    if (isEmpty(data.resHeaders)) delete data.resHeaders
+    this._$detail.html(this._detailTpl(data)).show()
+    this._detailData = data
+  }
+  _hideDetail() {
+    this._$detail.hide()
+  }
   _rmCfg() {
     const cfg = this.config
 
@@ -196,6 +230,12 @@ export default class Network extends Tool {
 
     settings.remove(cfg, 'overrideFetch').remove('Network')
   }
+  _appendTpl() {
+    const $el = this._$el
+    $el.html(this._tpl())
+    this._$detail = $el.find('.eruda-detail')
+    this._$requests = $el.find('.eruda-requests')
+  }
   _initCfg() {
     const cfg = (this.config = Settings.createCfg('network', {
       overrideFetch: true
@@ -223,11 +263,11 @@ export default class Network extends Tool {
 
     if (!isEmpty(this._requests)) renderData.requests = this._requests
 
-    this._renderHtml(this._tpl(renderData))
+    this._renderHtml(this._requestsTpl(renderData))
   }
   _renderHtml(html) {
     if (html === this._lastHtml) return
     this._lastHtml = html
-    this._$el.html(html)
+    this._$requests.html(html)
   }
 }

src/Network/Network.scss

@@ -39,6 +39,71 @@
           }
         }
       }
+      .detail {
+        @include absolute();
+        z-index: 10;
+        display: none;
+        padding-bottom: 40px;
+        background: #fff;
+        .http {
+          @include overflow-auto(y);
+          height: 100%;
+          .breadcrumb {
+            @include breadcrumb();
+          }
+          .section {
+            background: #fff;
+            h2 {
+              background: $blue;
+              padding: $padding;
+              color: #fff;
+              font-size: $font-size;
+            }
+            margin-bottom: 10px;
+            table {
+              * {
+                user-select: text;
+              }
+              td {
+                font-size: $font-size-s;
+                padding: 5px 10px;
+                word-break: break-all;
+              }
+              .key {
+                white-space: nowrap;
+              }
+            }
+          }
+          .response,
+          .data {
+            user-select: text;
+            @include overflow-auto(x);
+            background: #fff;
+            padding: $padding;
+            font-size: $font-size-s;
+            margin-bottom: 10px;
+            white-space: pre-wrap;
+          }
+        }
+        .back {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          color: #fff;
+          width: 100%;
+          background: $blue;
+          display: block;
+          height: 40px;
+          line-height: 40px;
+          text-decoration: none;
+          text-align: center;
+          margin-top: 10px;
+          transition: background 0.3s;
+          &:active {
+            background: $blue-dark;
+          }
+        }
+      }
     }
   }
 }

src/Network/detail.hbs

@@ -42,4 +42,5 @@
     {{#if resTxt}}
         <pre {{{class 'response'}}}>{{resTxt}}</pre>
     {{/if}}
-</div>
+</div>
+<div {{{class 'back'}}}>Back to the List</div>

src/Network/requests.hbs

@@ -0,0 +1,15 @@
+{{#if requests}}
+    {{#each requests}}
+        <li class="eruda-request {{#if hasErr}}eruda-error{{/if}}" data-id="{{@key}}">
+            <span>{{name}}</span>
+            <span>{{status}}</span>
+            <span>{{method}}</span>
+            <span>{{subType}}</span>
+            <span>{{size}}</span>
+            <span>{{displayTime}}</span>
+            <span {{{class 'blue'}}}>{{url}}</span>
+        </li>
+    {{/each}}
+{{else}}
+    <li><span>Empty</span></li>
+{{/if}}

src/Sources/Sources.js

@@ -2,15 +2,7 @@ import Tool from '../DevTools/Tool'
 import beautify from 'js-beautify'
 import JsonViewer from '../lib/JsonViewer'
 import Settings from '../Settings/Settings'
-import {
-  evalCss,
-  ajax,
-  isEmpty,
-  escape,
-  trim,
-  isStr,
-  highlight
-} from '../lib/util'
+import { evalCss, ajax, escape, trim, isStr, highlight } from '../lib/util'
 
 export default class Sources extends Tool {
   constructor() {
@@ -112,31 +104,10 @@ export default class Sources extends Tool {
         delete this._data
       }
     })
-
-    this._$el.on('click', '.eruda-http .eruda-response', () => {
-      const data = this._data.val
-      const resTxt = data.resTxt
-
-      switch (data.subType) {
-        case 'css':
-          return this.set('css', resTxt)
-        case 'html':
-          return this.set('html', resTxt)
-        case 'javascript':
-          return this.set('js', resTxt)
-        case 'json':
-          return this.set('json', resTxt)
-      }
-      switch (data.type) {
-        case 'image':
-          return this.set('img', data.url)
-      }
-    })
   }
   _loadTpl() {
     this._codeTpl = require('./code.hbs')
     this._imgTpl = require('./image.hbs')
-    this._httpTpl = require('./http.hbs')
     this._jsonTpl = require('./json.hbs')
     this._rawTpl = require('./raw.hbs')
     this._iframeTpl = require('./iframe.hbs')
@@ -192,8 +163,6 @@ export default class Sources extends Tool {
         return this._renderCode()
       case 'img':
         return this._renderImg()
-      case 'http':
-        return this._renderHttp()
       case 'json':
         return this._renderJson()
       case 'raw':
@@ -205,14 +174,6 @@ export default class Sources extends Tool {
   _renderImg() {
     this._renderHtml(this._imgTpl(this._data.val))
   }
-  _renderHttp() {
-    const val = this._data.val
-
-    if (val.resTxt.trim() === '') delete val.resTxt
-    if (isEmpty(val.resHeaders)) delete val.resHeaders
-
-    this._renderHtml(this._httpTpl(this._data.val))
-  }
   _renderCode() {
     const data = this._data
 

src/Sources/Sources.scss

@@ -66,44 +66,6 @@
           user-select: text;
         }
       }
-      .http {
-        .breadcrumb {
-          @include breadcrumb();
-        }
-        .section {
-          background: #fff;
-          h2 {
-            background: $blue;
-            padding: $padding;
-            color: #fff;
-            font-size: $font-size;
-          }
-          margin-bottom: 10px;
-          table {
-            * {
-              user-select: text;
-            }
-            td {
-              font-size: $font-size-s;
-              padding: 5px 10px;
-              word-break: break-all;
-            }
-            .key {
-              white-space: nowrap;
-            }
-          }
-        }
-        .response,
-        .data {
-          user-select: text;
-          @include overflow-auto(x);
-          background: #fff;
-          padding: $padding;
-          font-size: $font-size-s;
-          margin-bottom: 10px;
-          white-space: pre-wrap;
-        }
-      }
       iframe {
         width: 100%;
         height: 100%;