diff --git a/src/Elements/Elements.js b/src/Elements/Elements.js index 4c1fe15..12271c2 100644 --- a/src/Elements/Elements.js +++ b/src/Elements/Elements.js @@ -52,13 +52,17 @@ export default class Elements extends Tool { } show() { super.show() + this._isShow = true if (!this._curNode) { this.select(document.body) + } else if (this._splitMode) { + this._showDetail() } } hide() { super.hide() + this._isShow = false chobitsu.domain('Overlay').hideHighlight() } @@ -110,6 +114,9 @@ export default class Elements extends Tool { } } _showDetail = () => { + if (!this._isShow || !this._curNode) { + return + } if (this._curNode.nodeType === Node.ELEMENT_NODE) { this._detail.show(this._curNode) } else { diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss index 21921fe..f933aa8 100644 --- a/src/Elements/Elements.scss +++ b/src/Elements/Elements.scss @@ -5,7 +5,6 @@ .elements { @include absolute(); padding-top: 40px; - padding-top: 40px; padding-bottom: 24px; font-size: 14px; } diff --git a/src/Network/Detail.js b/src/Network/Detail.js index 6b89da8..fbdd86f 100644 --- a/src/Network/Detail.js +++ b/src/Network/Detail.js @@ -5,10 +5,12 @@ import each from 'licia/each' import escape from 'licia/escape' import copy from 'licia/copy' import isJson from 'licia/isJson' +import Emitter from 'licia/Emitter' import { classPrefix as c } from '../lib/util' -export default class Detail { +export default class Detail extends Emitter { constructor($container, devtools) { + super() this._$container = $container this._devtools = devtools @@ -58,6 +60,7 @@ export default class Detail { const html = `
+ ${escape(data.url)}
@@ -87,6 +90,7 @@ export default class Detail { } hide() { this._$container.hide() + this.emit('hide') } _copyRes = () => { const detailData = this._detailData diff --git a/src/Network/Network.js b/src/Network/Network.js index 3ca118a..8c87881 100644 --- a/src/Network/Network.js +++ b/src/Network/Network.js @@ -10,6 +10,7 @@ import evalCss from '../lib/evalCss' import chobitsu from '../lib/chobitsu' import LunaDataGrid from 'luna-data-grid' import ResizeSensor from 'licia/ResizeSensor' +import MediaQuery from 'licia/MediaQuery' import { getType } from './util' import copy from 'licia/copy' import extend from 'licia/extend' @@ -32,6 +33,8 @@ export default class Network extends Tool { this._container = container this._initTpl() this._detail = new Detail(this._$detail, container) + this._splitMeidaQuery = new MediaQuery('screen and (min-width: 680px)') + this._splitMode = this._splitMeidaQuery.isMatch() this._requestDataGrid = new LunaDataGrid(this._$requests.get(0), { columns: [ { @@ -243,6 +246,14 @@ export default class Network extends Tool { this._$control.find(c('.record')).toggleClass(c('recording')) this._isRecording = !this._isRecording } + _showDetail = () => { + if (this._selectedRequest) { + if (this._splitMode) { + this._$network.css('width', '50%') + } + this._detail.show(this._selectedRequest) + } + } _bindEvent() { const $control = this._$control const requestDataGrid = this._requestDataGrid @@ -251,9 +262,7 @@ export default class Network extends Tool { $control .on('click', c('.clear-request'), () => this.clear()) - .on('click', c('.show-detail'), () => - this._detail.show(this._selectedRequest) - ) + .on('click', c('.show-detail'), this._showDetail) .on('click', c('.copy-curl'), this._copyCurl) .on('click', c('.record'), this._toggleRecording) @@ -262,17 +271,35 @@ export default class Network extends Tool { const request = self._requests[id] this._selectedRequest = request this._updateButtons() + if (this._splitMode) { + this._showDetail() + } }) requestDataGrid.on('deselect', () => { this._selectedRequest = null this._updateButtons() + this._detail.hide() }) this._resizeSensor.addListener( throttle(() => this._updateDataGridHeight(), 15) ) + this._splitMeidaQuery.on('match', () => { + this._detail.hide() + this._splitMode = true + }) + this._splitMeidaQuery.on('unmatch', () => { + this._detail.hide() + this._splitMode = false + }) + this._detail.on('hide', () => { + if (this._splitMode) { + this._$network.css('width', '100%') + } + }) + chobitsu.domain('Network').enable() const network = chobitsu.domain('Network') @@ -286,6 +313,7 @@ export default class Network extends Tool { this._resizeSensor.destroy() evalCss.remove(this._style) + this._splitMeidaQuery.removeAllListeners() const network = chobitsu.domain('Network') network.off('requestWillBeSent', this._reqWillBeSent) @@ -296,15 +324,18 @@ export default class Network extends Tool { _initTpl() { const $el = this._$el $el.html( - c(`
- - - - -
-
-
`) + c(`
+
+ + + + +
+
+
+
`) ) + this._$network = $el.find(c('.network')) this._$detail = $el.find(c('.detail')) this._$requests = $el.find(c('.requests')) this._$control = $el.find(c('.control')) diff --git a/src/Network/Network.scss b/src/Network/Network.scss index 0650086..c7ba51e 100644 --- a/src/Network/Network.scss +++ b/src/Network/Network.scss @@ -2,7 +2,10 @@ @import '../style/mixin'; #network { - padding-top: 40px; + .network { + @include absolute(); + padding-top: 39px; + } .control { @include control(); padding: 10px; @@ -61,6 +64,10 @@ .icon-arrow-left { left: 0; } + .icon-delete { + left: 0; + display: none; + } .icon-copy { right: 0; } @@ -111,3 +118,32 @@ } } } + +@media screen and (min-width: 680px) { + #network { + .network { + .control { + .icon-eye { + display: none; + } + .icon-copy { + right: 0; + } + } + } + .detail { + width: 50%; + left: initial; + right: 0; + border-left: 1px solid var(--border); + .control { + .icon-arrow-left { + display: none; + } + .icon-delete { + display: block; + } + } + } + } +}