diff --git a/src/Network/Network.hbs b/src/Network/Network.hbs index 8718de4..abd1c42 100644 --- a/src/Network/Network.hbs +++ b/src/Network/Network.hbs @@ -4,20 +4,5 @@ - + +
diff --git a/src/Network/Network.js b/src/Network/Network.js index 4ebd1aa..25b9898 100644 --- a/src/Network/Network.js +++ b/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) } } diff --git a/src/Network/Network.scss b/src/Network/Network.scss index 009b157..ea31c7d 100644 --- a/src/Network/Network.scss +++ b/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; + } + } + } } } } diff --git a/src/Sources/http.hbs b/src/Network/detail.hbs similarity index 96% rename from src/Sources/http.hbs rename to src/Network/detail.hbs index cc386da..35044b4 100644 --- a/src/Sources/http.hbs +++ b/src/Network/detail.hbs @@ -42,4 +42,5 @@ {{#if resTxt}} 
{{resTxt}}
{{/if}} - \ No newline at end of file + +
Back to the List
\ No newline at end of file diff --git a/src/Network/requests.hbs b/src/Network/requests.hbs new file mode 100644 index 0000000..a0a54f7 --- /dev/null +++ b/src/Network/requests.hbs @@ -0,0 +1,15 @@ +{{#if requests}} + {{#each requests}} +
  • + {{name}} + {{status}} + {{method}} + {{subType}} + {{size}} + {{displayTime}} + {{url}} +
    • + {{/each}} +{{else}} +
  • Empty
    • +{{/if}} \ No newline at end of file diff --git a/src/Sources/Sources.js b/src/Sources/Sources.js index 8523045..5dcd459 100644 --- a/src/Sources/Sources.js +++ b/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 diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss index efb280a..aca5ee5 100644 --- a/src/Sources/Sources.scss +++ b/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%;