refactor(elements): use chobitsu to click select

package.json

@@ -44,7 +44,7 @@
     "autoprefixer": "^9.7.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",
-    "chobitsu": "^1.4.2",
+    "chobitsu": "^1.4.3",
     "core-js": "^3.26.1",
     "css-loader": "^3.4.2",
     "draggabilly": "^2.2.0",

src/Elements/Detail.js

@@ -23,6 +23,7 @@ import MutationObserver from 'licia/MutationObserver'
 import CssStore from './CssStore'
 import Settings from '../Settings/Settings'
 import LunaModal from 'luna-modal'
+import chobitsu from '../lib/chobitsu'
 import { formatNodeName } from './util'
 import { pxToNum, isErudaEl, classPrefix as c } from '../lib/util'
 
@@ -41,10 +42,23 @@ export default class Detail {
     this._computedStyleSearchKeyword = ''
     this._enableObserver()
     this._render()
+
+    const { nodeId } = chobitsu.domain('DOM').getNodeId({ node: el })
+    chobitsu.domain('Overlay').highlightNode({
+      nodeId,
+      highlightConfig: {
+        showInfo: true,
+        contentColor: 'rgba(111, 168, 220, .66)',
+        paddingColor: 'rgba(147, 196, 125, .55)',
+        borderColor: 'rgba(255, 229, 153, .66)',
+        marginColor: 'rgba(246, 178, 107, .66)',
+      },
+    })
   }
   hide = () => {
     this._$container.hide()
     this._disableObserver()
+    chobitsu.domain('Overlay').hideHighlight()
   }
   destroy() {
     this._disableObserver()

src/Elements/Elements.js

@@ -1,6 +1,4 @@
 import Tool from '../DevTools/Tool'
-import Highlight from './Highlight'
-import Select from './Select'
 import $ from 'licia/$'
 import isEl from 'licia/isEl'
 import nextTick from 'licia/nextTick'
@@ -8,10 +6,12 @@ import Emitter from 'licia/Emitter'
 import map from 'licia/map'
 import isEmpty from 'licia/isEmpty'
 import toNum from 'licia/toNum'
+import isMobile from 'licia/isMobile'
 import LunaDomViewer from 'luna-dom-viewer'
 import { isErudaEl, classPrefix as c } from '../lib/util'
 import evalCss from '../lib/evalCss'
 import Detail from './Detail'
+import chobitsu from '../lib/chobitsu'
 import { formatNodeName } from './util'
 
 export default class Elements extends Tool {
@@ -21,7 +21,6 @@ export default class Elements extends Tool {
     this._style = evalCss(require('./Elements.scss'))
 
     this.name = 'elements'
-    this._highlightElement = false
     this._selectElement = false
     this._observeElement = true
     this._history = []
@@ -42,9 +41,8 @@ export default class Elements extends Tool {
       ignore: (node) => isErudaEl(node),
     })
     this._domViewer.expand()
-    this._highlight = new Highlight(this._container.$container)
-    this._select = new Select()
     this._bindEvent()
+    chobitsu.domain('Overlay').enable()
 
     nextTick(() => this._updateHistory())
   }
@@ -69,8 +67,10 @@ export default class Elements extends Tool {
 
     evalCss.remove(this._style)
     this._detail.destroy()
-    this._select.disable()
-    this._highlight.destroy()
+    chobitsu
+      .domain('Overlay')
+      .off('inspectNodeRequested', this._inspectNodeRequested)
+    chobitsu.domain('Overlay').disable()
   }
   _initTpl() {
     const $el = this._$el
@@ -114,18 +114,17 @@ export default class Elements extends Tool {
   }
   _bindEvent() {
     const self = this
-    const select = this._select
 
     this._$el.on('click', c('.crumb'), function () {
       let idx = toNum($(this).data('idx'))
-      let el = self._curNode
+      let node = self._curNode
 
-      while (idx-- && el.parentElement) {
-        el = el.parentElement
+      while (idx-- && node.parentElement) {
+        node = node.parentElement
       }
 
-      if (isElExist(el)) {
-        self.set(el)
+      if (isElExist(node)) {
+        self._setNode(node)
       }
     })
 
@@ -133,33 +132,44 @@ export default class Elements extends Tool {
       .on('click', c('.select'), () => this._toggleSelect())
       .on('click', c('.show'), () => this._detail.show(this._curNode))
 
-    select.on('select', (target) => this.set(target))
-
     this._domViewer.on('select', this._setNode)
-  }
-  _toggleHighlight() {
-    if (this._selectElement) return
 
-    this._$el.find('.eruda-highlight').toggleClass('eruda-active')
-    this._highlightElement = !this._highlightElement
-
-    this._render()
+    chobitsu
+      .domain('Overlay')
+      .on('inspectNodeRequested', this._inspectNodeRequested)
   }
   _toggleSelect() {
-    const select = this._select
-
     this._$el.find(c('.select')).toggleClass(c('active'))
-    if (!this._selectElement && !this._highlightElement) {
-      this._toggleHighlight()
-    }
     this._selectElement = !this._selectElement
 
     if (this._selectElement) {
-      select.enable()
+      chobitsu.domain('Overlay').setInspectMode({
+        mode: 'searchForNode',
+        highlightConfig: {
+          showInfo: !isMobile(),
+          showRulers: false,
+          showAccessibilityInfo: !isMobile(),
+          showExtensionLines: false,
+          contrastAlgorithm: 'aa',
+          contentColor: 'rgba(111, 168, 220, .66)',
+          paddingColor: 'rgba(147, 196, 125, .55)',
+          borderColor: 'rgba(255, 229, 153, .66)',
+          marginColor: 'rgba(246, 178, 107, .66)',
+        },
+      })
+      this._container.hide()
     } else {
-      select.disable()
+      chobitsu.domain('Overlay').setInspectMode({
+        mode: 'none',
+      })
     }
   }
+  _inspectNodeRequested = ({ backendNodeId }) => {
+    this._container.show()
+    this._toggleSelect()
+    const { node } = chobitsu.domain('DOM').getNode({ nodeId: backendNodeId })
+    this.select(node)
+  }
   _setNode = (node) => {
     if (node === this._curNode) return
 
@@ -167,8 +177,6 @@ export default class Elements extends Tool {
     this._domViewer.select(node)
     this._renderCrumbs()
 
-    this._highlight.setEl(node)
-
     const parentQueue = []
 
     let parent = node.parentNode

src/Elements/Highlight.js

@@ -1,33 +0,0 @@
-import chobitsu from '../lib/chobitsu'
-
-export default class Highlight {
-  constructor() {
-    this._isShow = false
-
-    chobitsu.domain('Overlay').enable()
-  }
-  setEl(el) {
-    this._target = el
-  }
-  show() {
-    this._isShow = true
-    const { nodeId } = chobitsu.domain('DOM').getNodeId({ node: this._target })
-    chobitsu.domain('Overlay').highlightNode({
-      nodeId,
-      highlightConfig: {
-        showInfo: true,
-        contentColor: 'rgba(111, 168, 220, .66)',
-        paddingColor: 'rgba(147, 196, 125, .55)',
-        borderColor: 'rgba(255, 229, 153, .66)',
-        marginColor: 'rgba(246, 178, 107, .66)',
-      },
-    })
-  }
-  destroy() {
-    chobitsu.domain('Overlay').disable()
-  }
-  hide() {
-    this._isShow = false
-    chobitsu.domain('Overlay').hideHighlight()
-  }
-}

src/Elements/Select.js

@@ -1,63 +0,0 @@
-import Emitter from 'licia/Emitter'
-import isMobile from 'licia/isMobile'
-import { isErudaEl } from '../lib/util'
-
-export default class Select extends Emitter {
-  constructor() {
-    super()
-
-    const self = this
-
-    this._startListener = function (e) {
-      if (isErudaEl(e.target)) return
-
-      self._timer = setTimeout(function () {
-        self.emit('select', e.target)
-      }, 200)
-
-      return false
-    }
-
-    this._moveListener = function () {
-      clearTimeout(self._timer)
-    }
-
-    this._clickListener = function (e) {
-      if (isErudaEl(e.target)) return
-
-      e.preventDefault()
-      e.stopImmediatePropagation()
-    }
-  }
-  enable() {
-    this.disable()
-    function addEvent(type, listener) {
-      document.body.addEventListener(type, listener, true)
-    }
-    if (isMobile()) {
-      addEvent('touchstart', this._startListener)
-      addEvent('touchmove', this._moveListener)
-    } else {
-      addEvent('mousedown', this._startListener)
-      addEvent('mousemove', this._moveListener)
-    }
-    addEvent('click', this._clickListener)
-
-    return this
-  }
-  disable() {
-    function rmEvent(type, listener) {
-      document.body.removeEventListener(type, listener, true)
-    }
-    if (isMobile()) {
-      rmEvent('touchstart', this._startListener)
-      rmEvent('touchmove', this._moveListener)
-    } else {
-      rmEvent('mousedown', this._startListener)
-      rmEvent('mousemove', this._moveListener)
-    }
-    rmEvent('click', this._clickListener)
-
-    return this
-  }
-}

src/eruda.js

@@ -186,7 +186,7 @@ export default {
     }
 
     extend(el, {
-      className: 'eruda-container',
+      className: 'eruda-container __chobitsu-hide__',
       contentEditable: false
     })
 

src/lib/chobitsu.js

@@ -10,6 +10,7 @@ chobitsu.register('Overlay', Overlay)
 chobitsu.register('DOM', {
   ...DOM,
   getNodeId: DOM.getDOMNodeId,
+  getNode: DOM.getDOMNode,
 })
 chobitsu.register('Storage', Storage)