glass-easel-devtools-panel 0.9.0

package/src/pages/detail/value.wxss

@@ -0,0 +1,44 @@
+@import url('../common.wxss');
+
+@keyframes value-update-ani {
+  from {
+    background: @update-bg;
+  }
+  to {
+    background: transparent;
+  }
+}
+.updated {
+  background: @update-bg;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: value-update-ani;
+  animation-timing-function: ease;
+}
+
+.wrapper {
+  display: inline-block;
+}
+
+.slice {
+  display: inline;
+  color: @common-text;
+}
+.slice_dynamic {
+  color: @attribute-value;
+}
+
+.var-name {
+  display: inline-block;
+  margin-left: 0.25em;
+  height: 1em;
+  line-height: 1em;
+  min-width: 1em;
+  text-align: center;
+  font-size: 0.8em;
+  font-style: italic;
+  color: @important-text;
+}
+.var-name_hover {
+  background: @hover-bg;
+}

package/src/pages/index/index.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "element": "/pages/tree/element",
+    "detail": "/pages/detail/detail"
+  }
+}

package/src/pages/index/index.ts

@@ -0,0 +1,121 @@
+import { DeepCopyKind } from 'glass-easel'
+import { initStoreBindings } from 'mobx-miniprogram-bindings'
+import { type protocol, sendRequest, setEventHandler } from '../../message_channel'
+import { compDef as treeCompDef } from '../tree/element'
+import { store } from '../store'
+import { childNodeInserted } from '../../events'
+import { error } from '../../utils'
+
+export const componentDefinition = Component()
+  .options({
+    dataDeepCopy: DeepCopyKind.None,
+    propertyPassingDeepCopy: DeepCopyKind.None,
+  })
+  .data(() => ({
+    mountPoints: [] as protocol.dom.Node[],
+    inSelectMode: false,
+    detailWidth: 300,
+  }))
+  .init((ctx) => {
+    const { self, data, setData, method, listener } = ctx
+
+    // collect document
+    const initDocument = async () => {
+      await sendRequest('DOM.enable', {})
+      const res = await sendRequest('DOM.getDocument', { depth: 3 })
+      setData({ mountPoints: res.root.children ?? [] })
+    }
+    childNodeInserted.bindComponentLifetimes(
+      ctx,
+      () => 1,
+      ({ previousNodeId, node }) => {
+        const after = data.mountPoints.map((x) => x.nodeId).indexOf(previousNodeId)
+        const before = after + 1
+        self.groupUpdates(() => {
+          self.spliceArrayDataOnPath(['mountPoints'], before, 0, [node])
+        })
+      },
+    )
+
+    initStoreBindings(ctx, { store, fields: ['selectedNodeId', 'sideBarShown'] })
+
+    const closeSideBar = listener(() => {
+      store.hideSideBar()
+    })
+
+    // node select
+    const toggleSelectMode = listener(() => {
+      if (!data.inSelectMode) {
+        setData({ inSelectMode: true })
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        sendRequest('Overlay.setInspectMode', { mode: 'searchForNode' })
+      } else {
+        setData({ inSelectMode: false })
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        sendRequest('Overlay.setInspectMode', { mode: 'none' })
+      }
+    })
+    setEventHandler('Overlay.inspectModeCanceled', () => {
+      setData({ inSelectMode: false })
+      store.setHighlightNode(0)
+    })
+    setEventHandler('Overlay.nodeHighlightRequested', ({ nodeId }) => {
+      store.setHighlightNode(nodeId)
+    })
+    setEventHandler('Overlay.inspectNodeRequested', ({ backendNodeId }) => {
+      const nodePath: protocol.dom.Node[] = []
+      const rec = async (backendNodeId: protocol.NodeId) => {
+        const { node } = await sendRequest('DOM.describeNode', { backendNodeId, depth: 2 })
+        if (node.parentId) await rec(node.parentId)
+        nodePath.push(node)
+      }
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises, promise/catch-or-return
+      Promise.resolve().then(async () => {
+        await rec(backendNodeId)
+        const tree = self.selectComponent(`#mount-point-${nodePath[0].nodeId}`, treeCompDef)
+        if (tree) {
+          await tree.visitChildNodePath(nodePath)
+        } else {
+          error(`cannot find child node id ${nodePath[0].nodeId}`)
+        }
+        return undefined
+      })
+    })
+
+    // split drag & resize
+    let startPosX: null | number = null
+    const splitDragStart = listener<{ clientX: number; clientY: number; button: number }>((ev) => {
+      const { button, clientX } = ev.detail
+      if (button && button !== 0) return
+      startPosX = clientX
+    })
+    const splitDragMove = listener<{ clientX: number; clientY: number; button: number }>((ev) => {
+      if (startPosX === null) return
+      const newPosX = ev.detail.clientX
+      setData({ detailWidth: data.detailWidth + startPosX - newPosX })
+      startPosX = newPosX
+    })
+    const splitDragEnd = listener<{ clientX: number; clientY: number; button: number }>((ev) => {
+      const { button } = ev.detail
+      if (button && button !== 0) return
+      startPosX = null
+    })
+
+    // reconnect, clear elements, and fetch all elements
+    const restart = method(() => {
+      store.selectNode(0)
+      setData({ mountPoints: [] })
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      initDocument()
+    })
+
+    return {
+      toggleSelectMode,
+      closeSideBar,
+      splitDragStart,
+      splitDragMove,
+      splitDragEnd,
+      restart,
+    }
+  })
+  .register()

package/src/pages/index/index.wxml

@@ -0,0 +1,29 @@
+<view class="wrapper">
+  <view wx:if="{{ mountPoints.length === 0 }}" class="empty">
+    <view>No glass-easel mount points found. (Is glass-easel built in development mode?)</view>
+  </view>
+
+  <view wx:else class="main">
+    <view class="tree-detail" bind:mousemove="splitDragMove" bind:mouseup="splitDragEnd">
+      <view class="left">
+        <view class="toolbar">
+          <view class="tool {{ inSelectMode ? 'tool_active' : '' }}" hover-class="tool_hover" catch:tap="toggleSelectMode">Tap Select</view>
+          <view class="tool-space" />
+          <view hidden="{{ !selectedNodeId || !sideBarShown }}" class="tool" hover-class="tool_hover" catch:tap="closeSideBar">▶</view>
+        </view>
+        <view class="tree">
+          <block wx:for="{{ mountPoints }}">
+            <element id="mount-point-{{ item.nodeId }}" node-info="{{ item }}" />
+          </block>
+        </view>
+      </view>
+      <view
+        class="tree-detail-split"
+        bind:mousedown="splitDragStart"
+      />
+      <view class="detail" hidden="{{ !selectedNodeId || !sideBarShown }}" style="width: {{ detailWidth }}px">
+        <detail />
+      </view>
+    </view>
+  </view>
+</view>

package/src/pages/index/index.wxss

@@ -0,0 +1,75 @@
+@import url('../common.wxss');
+
+body {
+  margin: 0;
+  height: 100vh;
+}
+
+.wrapper {
+  font-family: monospace;
+  font-size: 12px;
+  background: @primary-bg;
+  height: 100%;
+  cursor: default;
+  user-select: none;
+}
+.empty {
+  color: @common-text;
+  font-style: italic;
+  padding: 5px;
+}
+
+.main {
+  height: 100%;
+}
+.tree-detail {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+.tree-detail-split {
+  width: 2px;
+  background-color: #888;
+  cursor: w-resize;
+}
+.left {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+.toolbar {
+  flex: none;
+  background: @secondary-bg;
+  color: @important-text;
+  border-bottom: 2px solid #888;
+  display: flex;
+}
+.tool-space {
+  flex: auto;
+}
+.tool {
+  flex: none;
+  display: inline-block;
+  padding: 5px 10px;
+}
+.tool_hover {
+  background: @hover-bg;
+}
+.tool_active {
+  background: @selected-bg;
+}
+
+.tree {
+  flex: auto;
+  margin: 5px;
+  overflow: auto;
+  user-select: text;
+}
+
+.detail {
+  flex: none;
+  box-sizing: border-box;
+  overflow: auto;
+}

package/src/pages/store.ts

@@ -0,0 +1,33 @@
+import { makeAutoObservable } from 'mobx-miniprogram'
+import { type protocol } from 'glass-easel-devtools-agent'
+import { sendRequest } from '../message_channel'
+
+export const store = makeAutoObservable({
+  selectedNodeId: 0 as protocol.NodeId,
+  highlightNodeId: 0 as protocol.NodeId,
+  sideBarShown: false,
+
+  selectNode(n: protocol.NodeId) {
+    this.selectedNodeId = n
+    this.sideBarShown = n > 0
+    // if (n > 0) {
+    //   // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    //   sendRequest('DOM.setInspectedNode', { nodeId: n })
+    // }
+  },
+
+  hideSideBar() {
+    this.sideBarShown = false
+  },
+
+  setHighlightNode(n: protocol.NodeId) {
+    this.highlightNodeId = n
+    if (n > 0) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      sendRequest('Overlay.highlightNode', { nodeId: n })
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      sendRequest('Overlay.hideHighlight', {})
+    }
+  },
+})

package/src/pages/tree/element.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "element": "./element"
+  }
+}

package/src/pages/tree/element.ts

@@ -0,0 +1,295 @@
+import { DeepCopyKind } from 'glass-easel'
+import { initStoreBindings } from 'mobx-miniprogram-bindings'
+import { protocol } from 'glass-easel-devtools-agent'
+import {
+  childNodeCountUpdated,
+  childNodeInserted,
+  childNodeRemoved,
+  setChildNodes,
+  characterDataModified,
+  attributeModified,
+} from '../../events'
+import { sendRequest } from '../../message_channel'
+import { error, warn } from '../../utils'
+import { store } from '../store'
+
+type AttributeMeta = { name: string; value: string; isProperty: boolean; updateAniTs: number }
+
+const enum DisplayKind {
+  Text = 0,
+  Tag = 1,
+  VirtualTag = 2,
+}
+
+export const compDef = Component()
+  .options({
+    dataDeepCopy: DeepCopyKind.None,
+    propertyPassingDeepCopy: DeepCopyKind.None,
+    propertyEarlyInit: true,
+  })
+  .property('nodeInfo', {
+    type: Object,
+    value: null as protocol.dom.Node | null,
+  })
+  .data(() => ({
+    kind: DisplayKind.Text,
+    textContent: '',
+    tagName: '',
+    attributes: [] as AttributeMeta[],
+    hasShadowRoot: false,
+    shadowRoots: [] as protocol.dom.Node[],
+    hasChildNodes: true,
+    hasSlotContent: false,
+    showChildNodes: false,
+    children: [] as protocol.dom.Node[],
+    tagVarName: '',
+    tagUpdateHighlight: false,
+  }))
+  .init((ctx) => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { self, data, setData, observer, listener, method } = ctx
+    let nodeId = 0
+    const initNodeId = (n: protocol.NodeId) => {
+      if (n === 0) {
+        warn('illegal node id received')
+        return
+      }
+      nodeId = n
+    }
+
+    // store bindings
+    initStoreBindings(ctx, {
+      store,
+      fields: ['selectedNodeId', 'highlightNodeId'],
+    })
+
+    // child nodes listeners
+    childNodeCountUpdated.bindComponentLifetimes(
+      ctx,
+      () => nodeId,
+      (args) => {
+        setData({ hasChildNodes: args.childNodeCount > 0 })
+      },
+    )
+    setChildNodes.bindComponentLifetimes(
+      ctx,
+      () => nodeId,
+      ({ nodes }) => {
+        setData({
+          hasChildNodes: nodes.length > 0,
+          children: nodes,
+        })
+      },
+    )
+    childNodeInserted.bindComponentLifetimes(
+      ctx,
+      () => nodeId,
+      ({ previousNodeId, node }) => {
+        const after = data.children.map((x) => x.nodeId).indexOf(previousNodeId)
+        const before = after + 1
+        self.groupUpdates(() => {
+          self.spliceArrayDataOnPath(['children'], before, 0, [node])
+        })
+        const childComp = self.selectComponent(`#child-${node.nodeId}`, compDef)
+        childComp?.tagUpdatedAni()
+      },
+    )
+    childNodeRemoved.bindComponentLifetimes(
+      ctx,
+      () => nodeId,
+      ({ nodeId: childNodeId }) => {
+        const index = data.children.map((x) => x.nodeId).indexOf(childNodeId)
+        if (index < 0) return
+        self.groupUpdates(() => {
+          self.spliceArrayDataOnPath(['children'], index, 1, [])
+        })
+        tagUpdatedAni()
+      },
+    )
+    characterDataModified.bindComponentLifetimes(
+      ctx,
+      () => nodeId,
+      ({ characterData }) => {
+        setData({ textContent: characterData })
+        tagUpdatedAni()
+      },
+    )
+    let updateAniEndTimeout = 0
+    const tagUpdatedAni = method(() => {
+      setTimeout(() => {
+        if (data.tagUpdateHighlight) {
+          setData({ tagUpdateHighlight: false })
+          tagUpdatedAni()
+          return
+        }
+        if (updateAniEndTimeout) {
+          clearTimeout(updateAniEndTimeout)
+          updateAniEndTimeout = 0
+        }
+        self.setData({ tagUpdateHighlight: true })
+        updateAniEndTimeout = setTimeout(() => {
+          updateAniEndTimeout = 0
+          setData({ tagUpdateHighlight: false })
+        }, 1000)
+      }, 200)
+    })
+
+    // attribute listeners
+    attributeModified.bindComponentLifetimes(
+      ctx,
+      () => nodeId,
+      ({ name, value }) => {
+        data.attributes.forEach((attr, index) => {
+          if (attr.name === name) {
+            self.groupUpdates(() => {
+              self.replaceDataOnPath(['attributes', index, 'value'], value)
+            })
+            attrUpdatedAni(index)
+          }
+        })
+      },
+    )
+    const attrUpdatedAni = (index: number) => {
+      setTimeout(() => {
+        if (data.attributes[index].updateAniTs) {
+          self.groupUpdates(() => {
+            self.replaceDataOnPath(['attributes', index, 'updateAniTs'], 0)
+          })
+          attrUpdatedAni(index)
+          return
+        }
+        const now = Date.now()
+        self.groupUpdates(() => {
+          self.replaceDataOnPath(['attributes', index, 'updateAniTs'], now)
+        })
+        updateAniEndTimeout = setTimeout(() => {
+          if (data.attributes[index].updateAniTs !== now) return
+          self.groupUpdates(() => {
+            self.replaceDataOnPath(['attributes', index, 'updateAniTs'], 0)
+          })
+        }, 1000)
+      }, 200)
+    }
+
+    // init node info
+    observer('nodeInfo', (nodeInfo) => {
+      initNodeId(nodeInfo?.nodeId ?? 0)
+      const nodeType = nodeInfo?.glassEaselNodeType
+      if (
+        nodeType === protocol.dom.GlassEaselNodeType.NativeNode ||
+        nodeType === protocol.dom.GlassEaselNodeType.Component
+      ) {
+        const tagName = nodeInfo?.nodeName ?? ''
+        const nv = nodeInfo?.attributes ?? []
+        const attributes = [] as AttributeMeta[]
+        const coreAttrCount = nodeInfo?.glassEaselAttributeCount ?? 0
+        for (let i = 0; i < nv.length; i += 2) {
+          const name = nv[i]
+          const value = nv[i + 1] ?? ''
+          const isProperty = i / 2 >= coreAttrCount
+          attributes.push({ name, value, isProperty, updateAniTs: 0 })
+        }
+        const hasShadowRoot = nodeInfo?.shadowRootType === 'open'
+        const shadowRoots = nodeInfo?.shadowRoots ?? []
+        setData({
+          kind: DisplayKind.Tag,
+          tagName,
+          attributes,
+          hasShadowRoot,
+          shadowRoots,
+        })
+      } else if (nodeType === protocol.dom.GlassEaselNodeType.TextNode) {
+        setData({
+          kind: DisplayKind.Text,
+          textContent: nodeInfo?.nodeValue ?? '',
+        })
+      } else {
+        let tagName = nodeInfo?.nodeName ?? ''
+        if (nodeType === protocol.dom.GlassEaselNodeType.Unknown) tagName = 'unknown'
+        setData({
+          kind: DisplayKind.VirtualTag,
+          tagName,
+        })
+      }
+      const children = nodeInfo?.children
+      if (children !== undefined) {
+        setData({
+          hasChildNodes: children.length > 0,
+          showChildNodes: true,
+          children,
+        })
+      }
+      const distributedNodes = nodeInfo?.distributedNodes
+      if (distributedNodes !== undefined) {
+        setData({
+          hasSlotContent: distributedNodes.length > 0,
+          showChildNodes: false,
+        })
+      }
+    })
+
+    // toggle children events
+    const updateChildren = async () => {
+      const distributedNodes = data.nodeInfo?.distributedNodes
+      if (distributedNodes) {
+        const { nodes } = await sendRequest('DOM.getGlassEaselComposedChildren', { nodeId })
+        setData({ children: nodes })
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        sendRequest('DOM.requestChildNodes', { nodeId })
+      }
+    }
+    const toggleChildren = listener(() => {
+      setData({
+        showChildNodes: !data.showChildNodes,
+      })
+      if (data.showChildNodes) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises, promise/catch-or-return
+        Promise.resolve().then(updateChildren)
+      }
+    })
+    const visitChildNodePath = method(async (nodePath: protocol.dom.Node[]) => {
+      const [node, ...childPath] = nodePath
+      if (childPath.length === 0) {
+        setData({ children: node.children })
+        store.selectNode(nodeId)
+        return
+      }
+      setData({
+        showChildNodes: true,
+        children: node.children,
+      })
+      const childComp = self.selectComponent(`#child-${childPath[0].nodeId}`, compDef)
+      if (childComp) {
+        await childComp.visitChildNodePath(childPath)
+      } else {
+        error(`cannot find child node id ${childPath[0].nodeId}`)
+      }
+    })
+
+    // tag events
+    const selectTag = listener(() => {
+      store.selectNode(nodeId)
+    })
+    const startHoverTag = listener(() => {
+      store.setHighlightNode(nodeId)
+    })
+    const endHoverTag = listener(() => {
+      if (store.highlightNodeId === nodeId) store.setHighlightNode(0)
+    })
+    const useElementInConsole = method(async () => {
+      const { varName } = await sendRequest('DOM.useGlassEaselElementInConsole', { nodeId })
+      setData({ tagVarName: varName })
+    })
+
+    return {
+      toggleChildren,
+      visitChildNodePath,
+      selectTag,
+      startHoverTag,
+      endHoverTag,
+      useElementInConsole,
+      tagUpdatedAni,
+    }
+  })
+  .register()

package/src/pages/tree/element.wxml

@@ -0,0 +1,47 @@
+<view wx:if="{{ kind === 1 || kind === 2 }}" class="tag {{ tagUpdateHighlight ? 'updated' : '' }}">
+  <view class="fold-arrow">
+    <view wx:if="{{ hasChildNodes || hasSlotContent || hasShadowRoot }}" class="fold-arrow-icon {{ showChildNodes ? 'fold-arrow-icon_open' : '' }}" catch:tap="toggleChildren">▶</view>
+  </view>
+
+  <view
+    class="tag-body {{ selectedNodeId === nodeInfo.nodeId ? 'tag-body_selected' : '' }} {{ highlightNodeId === nodeInfo.nodeId ? 'tag-body_highlight' : '' }}"
+    hover-class="tag-body_hover"
+    catch:tap="selectTag"
+    bind:mouseenter="startHoverTag"
+    bind:mouseleave="endHoverTag"
+  >
+    <block wx:if="{{ kind === 1 }}">
+      <view class="tag-text">&lt;</view>
+      <view class="tag-name">{{ tagName }}</view>
+      <block wx:for="{{ attributes }}">
+        <view class="attribute">
+          <block>{{ ' ' }}</block>
+          <view class="attribute-name {{ item.isProperty ? 'attribute-name_property' : '' }}">{{ item.name }}</view>
+          <block>{{ '="' }}</block>
+          <view class="attribute-value {{ item.updateAniTs ? 'updated' : '' }}">{{ item.value }}</view>
+          <block>{{ '"' }}</block>
+        </view>
+      </block>
+      <view class="tag-text">&gt;</view>
+    </block>
+    <block wx:else>
+      <view class="virtual-tag-name">{{ tagName }}</view>
+    </block>
+  </view>
+
+  <view class="tag-var-name-wrapper" hidden="{{ selectedNodeId !== nodeInfo.nodeId }}">
+    <view wx:if="{{ tagVarName }}" class="tag-var-name">={{ tagVarName }}</view>
+    <view wx:else class="tag-var-name" hover-class="tag-var-name_hover" catch:tap="useElementInConsole">↖</view>
+  </view>
+
+  <view hidden="{{ !showChildNodes }}" class="children">
+    <view wx:if="{{ hasShadowRoot }}" class="shadow-roots">
+      <element wx:for="{{ shadowRoots }}" wx:key="nodeId" id="child-{{ item.nodeId }}" node-info="{{ item }}" />
+    </view>
+    <element wx:for="{{ children }}" wx:key="nodeId" id="child-{{ item.nodeId }}" node-info="{{ item }}" />
+  </view>
+</view>
+
+<view wx:elif="{{ kind === 0 }}" class="text-content {{ tagUpdateHighlight ? 'updated' : '' }}">
+  <view>{{ textContent }}</view>
+</view>