fix: elements and network scale

package.json

@@ -62,10 +62,10 @@
     "karma-jquery": "^0.2.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^5.0.0",
-    "licia": "^1.37.1",
+    "licia": "^1.38.0",
     "luna-box-model": "^0.1.0",
     "luna-console": "^1.3.0",
-    "luna-data-grid": "^0.4.0",
+    "luna-data-grid": "^0.4.3",
     "luna-dom-viewer": "^1.2.3",
     "luna-modal": "^1.0.0",
     "luna-notification": "^0.1.4",

src/Elements/Elements.js

@@ -14,6 +14,7 @@ import { isErudaEl, classPrefix as c, isChobitsuEl } from '../lib/util'
 import evalCss from '../lib/evalCss'
 import Detail from './Detail'
 import chobitsu from '../lib/chobitsu'
+import emitter from '../lib/emitter'
 import { formatNodeName } from './util'
 
 export default class Elements extends Tool {
@@ -79,6 +80,7 @@ export default class Elements extends Tool {
   destroy() {
     super.destroy()
 
+    emitter.off(emitter.SCALE, this._updateScale)
     evalCss.remove(this._style)
     this._detail.destroy()
     chobitsu
@@ -205,6 +207,11 @@ export default class Elements extends Tool {
       this._splitMode = false
       this._detail.hide()
     })
+
+    emitter.on(emitter.SCALE, this._updateScale)
+  }
+  _updateScale = (scale) => {
+    this._splitMediaQuery.setQuery(`screen and (min-width: ${680 * scale}px)`)
   }
   _deleteNode = () => {
     const node = this._curNode

src/Network/Network.js

@@ -8,6 +8,7 @@ import throttle from 'licia/throttle'
 import { getFileName, classPrefix as c } from '../lib/util'
 import evalCss from '../lib/evalCss'
 import chobitsu from '../lib/chobitsu'
+import emitter from '../lib/emitter'
 import LunaDataGrid from 'luna-data-grid'
 import ResizeSensor from 'licia/ResizeSensor'
 import MediaQuery from 'licia/MediaQuery'
@@ -97,9 +98,11 @@ export default class Network extends Tool {
     return ret
   }
   _updateDataGridHeight() {
-    const height = this._$el.offset().height - 41
-    this._requestDataGrid.setOption('minHeight', height)
-    this._requestDataGrid.setOption('maxHeight', height)
+    const height = this._$el.offset().height - this._$control.offset().height
+    this._requestDataGrid.setOption({
+      minHeight: height,
+      maxHeight: height,
+    })
   }
   _reqWillBeSent = (params) => {
     if (!this._isRecording) {
@@ -319,6 +322,11 @@ export default class Network extends Tool {
     network.on('responseReceivedExtraInfo', this._resReceivedExtraInfo)
     network.on('responseReceived', this._resReceived)
     network.on('loadingFinished', this._loadingFinished)
+
+    emitter.on(emitter.SCALE, this._updateScale)
+  }
+  _updateScale = (scale) => {
+    this._splitMediaQuery.setQuery(`screen and (min-width: ${680 * scale}px)`)
   }
   destroy() {
     super.destroy()
@@ -332,6 +340,8 @@ export default class Network extends Tool {
     network.off('responseReceivedExtraInfo', this._resReceivedExtraInfo)
     network.off('responseReceived', this._resReceived)
     network.off('loadingFinished', this._loadingFinished)
+
+    emitter.off(emitter.SCALE, this._updateScale)
   }
   _initTpl() {
     const $el = this._$el