feat(network): split mode

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 {

src/Elements/Elements.scss

@@ -5,7 +5,6 @@
   .elements {
     @include absolute();
     padding-top: 40px;
-    padding-top: 40px;
     padding-bottom: 24px;
     font-size: 14px;
   }

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 = `<div class="${c('control')}">
       <span class="${c('icon-arrow-left back')}"></span>
+      <span class="${c('icon-delete back')}"></span>
       <span class="${c('url')}">${escape(data.url)}</span>
       <span class="${c('icon-copy copy-res')}"></span>
     </div>
@@ -87,6 +90,7 @@ export default class Detail {
   }
   hide() {
     this._$container.hide()
+    this.emit('hide')
   }
   _copyRes = () => {
     const detailData = this._detailData

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(`<div class="control">
-      <span class="icon-record record recording"></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>`)
+      c(`<div class="network">
+        <div class="control">
+          <span class="icon-record record recording"></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>
+      <div class="detail"></div>`)
     )
+    this._$network = $el.find(c('.network'))
     this._$detail = $el.find(c('.detail'))
     this._$requests = $el.find(c('.requests'))
     this._$control = $el.find(c('.control'))

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;
+        }
+      }
+    }
+  }
+}