glass-easel-devtools-panel 0.9.0

package/src/pages/detail/detail.ts

@@ -0,0 +1,190 @@
+import { DeepCopyKind } from 'glass-easel'
+import { autorun } from 'mobx-miniprogram'
+import { protocol, sendRequest } from '../../message_channel'
+import { store } from '../store'
+import { attributeModified } from '../../events'
+
+const DEFAULT_NODE_DATA = {
+  glassEaselNodeType: 0,
+  virtual: true,
+  is: '',
+  id: '',
+  class: '',
+  slot: '',
+  slotName: undefined,
+  slotValues: undefined,
+  eventBindings: [],
+  dataset: [],
+  marks: [],
+}
+
+Component()
+  .options({
+    dataDeepCopy: DeepCopyKind.None,
+    propertyPassingDeepCopy: DeepCopyKind.None,
+  })
+  .data(() => ({
+    nodeId: 0 as protocol.NodeId,
+    nodeTypeName: '',
+    info: DEFAULT_NODE_DATA as protocol.dom.GetGlassEaselAttributes['response'],
+    boxModel: null as null | protocol.dom.GetBoxModel['response'],
+    boxModelCollapsed: false,
+    styles: null as null | protocol.css.GetMatchedStylesForNode['response'],
+    styleCollapsed: false,
+    computedStyles: null as null | { name: string; value: string }[],
+    computedStyleCollapsed: true,
+  }))
+  .init(({ self, data, setData, lifetime, method }) => {
+    lifetime('attached', () => {
+      autorun(async () => {
+        const nodeId = store.selectedNodeId
+        if (!nodeId) {
+          setData({ info: DEFAULT_NODE_DATA })
+          return
+        }
+
+        // register attributes listeners
+        updateListener(nodeId)
+
+        // fetch normal attributes
+        const info = await sendRequest('DOM.getGlassEaselAttributes', { nodeId })
+        if (store.selectedNodeId !== nodeId) return
+        let nodeTypeName = 'Node (unknown)'
+        if (info.glassEaselNodeType === protocol.dom.GlassEaselNodeType.Component) {
+          nodeTypeName = 'Component'
+        } else if (info.glassEaselNodeType === protocol.dom.GlassEaselNodeType.NativeNode) {
+          nodeTypeName = 'Native Node'
+        } else if (info.glassEaselNodeType === protocol.dom.GlassEaselNodeType.VirtualNode) {
+          nodeTypeName = 'Virtual Node'
+        } else if (info.glassEaselNodeType === protocol.dom.GlassEaselNodeType.TextNode) {
+          nodeTypeName = 'Text Node'
+        }
+        setData({ nodeId, nodeTypeName, info })
+
+        // fetch box model
+        if (!data.boxModelCollapsed) {
+          await refreshBoxModel()
+        }
+
+        // fetch style
+        if (!data.styleCollapsed) {
+          await refreshStyles()
+        }
+
+        // fetch computed style
+        if (!data.computedStyleCollapsed) {
+          await refreshComputedStyles()
+        }
+      })
+    })
+
+    let listeningNodeId = 0
+    const updateListenerFunc = (args: protocol.dom.AttributeModified['detail']) => {
+      const { name, value, detail, nameType } = args
+      if (nameType === 'attribute') {
+        const index = data.info.normalAttributes?.map((x) => x.name).indexOf(name) ?? -1
+        if (index >= 0) {
+          self.groupUpdates(() => {
+            self.replaceDataOnPath(
+              ['info', 'normalAttributes', index, 'value'],
+              detail as unknown as never,
+            )
+          })
+        }
+      } else if (nameType === 'component-property') {
+        const index = data.info.properties?.map((x) => x.name).indexOf(name) ?? -1
+        if (index >= 0) {
+          self.groupUpdates(() => {
+            self.replaceDataOnPath(
+              ['info', 'properties', index, 'value'],
+              detail as unknown as never,
+            )
+          })
+        }
+      } else if (nameType === 'slot-value') {
+        const index = data.info.slotValues?.map((x) => x.name).indexOf(name) ?? -1
+        if (index >= 0) {
+          self.groupUpdates(() => {
+            self.replaceDataOnPath(
+              ['info', 'slotValues', index, 'value'],
+              detail as unknown as never,
+            )
+          })
+        }
+      } else if (nameType === 'dataset' && name.startsWith('data:')) {
+        const index = data.info.dataset.map((x) => x.name).indexOf(name.slice(5)) ?? -1
+        if (index >= 0) {
+          self.groupUpdates(() => {
+            self.replaceDataOnPath(['info', 'dataset', index, 'value'], detail)
+          })
+        }
+      } else if (nameType === 'mark' && name.startsWith('mark:')) {
+        const index = data.info.marks.map((x) => x.name).indexOf(name.slice(5)) ?? -1
+        if (index >= 0) {
+          self.groupUpdates(() => {
+            self.replaceDataOnPath(['info', 'marks', index, 'value'], detail)
+          })
+        }
+      } else if (nameType === 'external-class') {
+        const index = data.info.externalClasses?.map((x) => x.name).indexOf(name) ?? -1
+        if (index >= 0) {
+          self.groupUpdates(() => {
+            self.replaceDataOnPath(
+              ['info', 'externalClasses', index, 'value'],
+              value as unknown as never,
+            )
+          })
+        }
+      } else if (name === 'slot') {
+        self.groupUpdates(() => {
+          self.replaceDataOnPath(['info', 'slot'], value)
+        })
+      } else if (name === 'id') {
+        self.groupUpdates(() => {
+          self.replaceDataOnPath(['info', 'id'], value)
+        })
+      } else if (name === 'class') {
+        self.groupUpdates(() => {
+          self.replaceDataOnPath(['info', 'class'], value)
+        })
+      } else if (name === 'name') {
+        self.groupUpdates(() => {
+          self.replaceDataOnPath(['info', 'slotName'], value)
+        })
+      }
+    }
+    const updateListener = (nodeId: protocol.NodeId) => {
+      if (listeningNodeId) {
+        attributeModified.removeListener(listeningNodeId, updateListenerFunc)
+      }
+      if (nodeId) {
+        attributeModified.addListener(nodeId, updateListenerFunc)
+      }
+      listeningNodeId = nodeId
+    }
+
+    const refreshBoxModel = method(async () => {
+      const nodeId = store.selectedNodeId
+      const boxModel = data.info.virtual ? null : await sendRequest('DOM.getBoxModel', { nodeId })
+      setData({ boxModel })
+    })
+
+    const refreshStyles = method(async () => {
+      const nodeId = store.selectedNodeId
+      const styles = data.info.virtual
+        ? null
+        : await sendRequest('CSS.getMatchedStylesForNode', { nodeId })
+      setData({ styles })
+    })
+
+    const refreshComputedStyles = method(async () => {
+      const nodeId = store.selectedNodeId
+      const computedStyles = data.info.virtual
+        ? null
+        : (await sendRequest('CSS.getComputedStyleForNode', { nodeId })).computedStyle
+      setData({ computedStyles })
+    })
+
+    return { refreshBoxModel, refreshStyles, refreshComputedStyles }
+  })
+  .register()

package/src/pages/detail/detail.wxml

@@ -0,0 +1,179 @@
+<detail-section class="section" title="{{ nodeTypeName }}">
+  <block wx:if="{{ info.glassEaselNodeType === 0x102 }}">
+    <view wx:if="{{ info.id }}" class="section-item">
+      <view class="section-key-core">id</view> = <value primitive-value="{{ info.id }}" node-id="{{ nodeId }}" />
+    </view>
+    <view wx:if="{{ info.class }}" class="section-item">
+      <view class="section-key-core">class</view> = <value primitive-value="{{ info.class }}" node-id="{{ nodeId }}" />
+    </view>
+    <view wx:if="{{ info.slot }}" class="section-item">
+      <view class="section-key-core">slot</view> = <value primitive-value="{{ info.slot }}" node-id="{{ nodeId }}" />
+    </view>
+  </block>
+  <block wx:elif="{{ info.glassEaselNodeType === 0x103 }}">
+    <view class="section-item">
+      <view class="section-key-core">is</view> = <value primitive-value="{{ info.is }}" node-id="{{ nodeId }}" />
+    </view>
+    <view wx:if="{{ info.id }}" class="section-item">
+      <view class="section-key-core">id</view> = <value primitive-value="{{ info.id }}" node-id="{{ nodeId }}" />
+    </view>
+    <view wx:if="{{ info.class }}" class="section-item">
+      <view class="section-key-core">class</view> = <value primitive-value="{{ info.class }}" node-id="{{ nodeId }}" />
+    </view>
+    <view wx:if="{{ info.slot }}" class="section-item">
+      <view class="section-key-core">slot</view> = <value primitive-value="{{ info.slot }}" node-id="{{ nodeId }}" />
+    </view>
+  </block>
+  <block wx:elif="{{ info.glassEaselNodeType === 0x104 }}">
+    <view class="section-item">
+      <view class="section-key-core">is</view> = <value primitive-value="{{ info.is }}" node-id="{{ nodeId }}" />
+    </view>
+    <view wx:if="{{ info.id }}" class="section-item">
+      <view class="section-key-core">id</view> = <value primitive-value="{{ info.id }}" node-id="{{ nodeId }}" />
+    </view>
+    <view wx:if="{{ info.slot }}" class="section-item">
+      <view class="section-key-core">slot</view> = <value primitive-value="{{ info.slot }}" node-id="{{ nodeId }}" />
+    </view>
+  </block>
+</detail-section>
+
+<view hidden="{{ info.slotName === undefined }}">
+  <detail-section class="section" title="slot">
+    <view class="section-item">
+      <view class="section-key-core">name</view> = <value primitive-value="{{ info.slotName }}" node-id="{{ nodeId }}" />
+    </view>
+    <view wx:for="{{ info.slotValues ?? [] }}" class="section-item">
+      <view class="section-key">{{ item.name }}</view> = <value value="{{ item.value }}" node-id="{{ nodeId }}" />
+    </view>
+  </detail-section>
+</view>
+
+<view hidden="{{ !info.normalAttributes }}">
+  <detail-section class="section" title="attributes">
+    <block wx:if="{{ info.normalAttributes.length }}">
+      <view wx:for="{{ info.normalAttributes }}" class="section-item">
+        <view class="section-key">{{ item.name }}</view> = <value value="{{ item.value }}" node-id="{{ nodeId }}" attribute="{{ item.name }}" />
+      </view>
+    </block>
+    <view wx:else class="section-empty">empty</view>
+  </detail-section>
+</view>
+
+<view hidden="{{ !info.properties }}">
+  <detail-section class="section" title="properties">
+    <block wx:if="{{ info.properties.length }}">
+      <view wx:for="{{ info.properties }}" class="section-item">
+        <view class="section-key">{{ item.name }}</view> = <value value="{{ item.value }}" node-id="{{ nodeId }}" attribute="{{ item.name }}" />
+      </view>
+    </block>
+    <view wx:else class="section-empty">empty</view>
+  </detail-section>
+</view>
+
+<view hidden="{{ !info.externalClasses }}">
+  <detail-section class="section" title="external classes">
+    <block wx:if="{{ info.externalClasses.length }}">
+      <view wx:for="{{ info.externalClasses }}" class="section-item">
+        <view class="section-key">{{ item.name }}</view> = <value primitive-value="{{ item.value }}" node-id="{{ nodeId }}" attribute="{{ item.name }}" />
+      </view>
+    </block>
+    <view wx:else class="section-empty">empty</view>
+  </detail-section>
+</view>
+
+<detail-section class="section" title="dataset" collapsed>
+  <block wx:if="{{ info.dataset.length }}">
+    <view wx:for="{{ info.dataset }}" class="section-item">
+      <view class="section-key">{{ item.name }}</view> = <value value="{{ item.value }}" node-id="{{ nodeId }}" attribute="data:{{ item.name }}" />
+    </view>
+  </block>
+  <view wx:else class="section-empty">empty</view>
+</detail-section>
+
+<detail-section class="section" title="marks" collapsed>
+  <block wx:if="{{ info.marks.length }}">
+    <view wx:for="{{ info.marks }}" class="section-item">
+      <view class="section-key">{{ item.name }}</view> = <value value="{{ item.value }}" node-id="{{ nodeId }}" attribute="mark:{{ item.name }}" />
+    </view>
+  </block>
+  <view wx:else class="section-empty">empty</view>
+</detail-section>
+
+<detail-section
+  class="section"
+  title="box model"
+  show-refresh
+  model:collapsed="{{ boxModelCollapsed }}"
+  catch:refresh="refreshBoxModel"
+>
+  <block wx:if="{{ !boxModelCollapsed && boxModel }}">
+    <view class="box-model">
+      <view class="box-model-margin">
+        <view class="box-model-text">{{ boxModel.border[1] - boxModel.margin[1] }}</view>
+        <view class="box-model-line">
+          <view class="box-model-text">{{ boxModel.border[0] - boxModel.margin[0] }}</view>
+          <view class="box-model-border">
+            <view class="box-model-text">{{ boxModel.padding[1] - boxModel.border[1] }}</view>
+            <view class="box-model-line">
+              <view class="box-model-text">{{ boxModel.padding[0] - boxModel.border[0] }}</view>
+              <view class="box-model-padding">
+                <view class="box-model-text">{{ boxModel.content[1] - boxModel.padding[1] }}</view>
+                <view class="box-model-line">
+                  <view class="box-model-text">{{ boxModel.content[0] - boxModel.padding[0] }}</view>
+                  <view class="box-model-content">
+                    <view class="box-model-text">{{ boxModel.width }}</view>x<view class="box-model-text">{{ boxModel.height }}</view>
+                  </view>
+                  <view class="box-model-text">{{ boxModel.padding[4] - boxModel.content[4] }}</view>
+                </view>
+                <view class="box-model-text">{{ boxModel.padding[5] - boxModel.content[5] }}</view>
+              </view>
+              <view class="box-model-text">{{ boxModel.border[4] - boxModel.padding[4] }}</view>
+            </view>
+            <view class="box-model-text">{{ boxModel.border[5] - boxModel.padding[5] }}</view>
+          </view>
+          <view class="box-model-text">{{ boxModel.margin[4] - boxModel.border[4] }}</view>
+        </view>
+        <view class="box-model-text">{{ boxModel.margin[5] - boxModel.border[5] }}</view>
+      </view>
+    </view>
+  </block>
+</detail-section>
+
+<detail-section
+  class="section"
+  title="style"
+  show-refresh
+  model:collapsed="{{ styleCollapsed }}"
+  catch:refresh="refreshStyles"
+>
+  <block wx:if="{{ !styleCollapsed && styles }}">
+    <view wx:if="{{ styles.crossOriginFailing }}">Failed to display styles due to inaccessable style sheets. This happens when style sheets are cross-origin served, or the page is visited as a local file.</view>
+    <view wx:if="{{ styles.inlineStyle.cssProperties.length }}" class="style-rule">
+      <view class="style-rule-prefix">Inline Style</view>
+      <view wx:for="{{ styles.inlineStyle.cssProperties }}" class="section-item">
+        <view class="section-key">{{ item.name }}</view>: <view class="section-value">{{ item.value }}</view> <view wx:if="{{ item.important }}" class="section-value-extra">{{ item.important ? '!important' : '' }}</view>
+      </view>
+    </view>
+    <view wx:for="{{ styles.matchedCSSRules }}" class="style-rule {{ item.rule.inactive ? 'style-rule_inactive' : '' }}">
+      <view wx:for="{{ item.rule.media ?? [] }}" class="style-rule-prefix">{{ item.text }}</view>
+      <view class="style-rule-title">{{ item.rule.selectorList.text }}</view>
+      <view wx:for="{{ item.rule.style.cssProperties }}" class="section-item">
+        <view class="section-key">{{ item.name }}</view>: <view class="section-value">{{ item.value }}</view> <view wx:if="{{ item.important }}" class="section-value-extra">{{ item.important ? '!important' : '' }}</view>
+      </view>
+    </view>
+  </block>
+</detail-section>
+
+<detail-section
+  class="section"
+  title="computed style"
+  show-refresh
+  model:collapsed="{{ computedStyleCollapsed }}"
+  catch:refresh="refreshComputedStyles"
+>
+  <block wx:if="{{ !computedStyleCollapsed && computedStyles }}">
+    <view wx:for="{{ computedStyles }}" class="section-item">
+      <view class="section-key">{{ item.name }}</view>: <view class="section-value">{{ item.value }}</view>
+    </view>
+  </block>
+</detail-section>

package/src/pages/detail/detail.wxss

@@ -0,0 +1,84 @@
+@import url('../common.wxss');
+
+:host {
+  display: block;
+}
+
+.section {
+  margin-bottom: 5px;
+  color: @common-text;
+}
+.section-item {
+  white-space: nowrap;
+  user-select: text;
+}
+.section-key {
+  display: inline;
+  color: @property-name;
+}
+.section-key-core {
+  display: inline;
+  color: @core-attribute-name;
+}
+.section-value {
+  display: inline;
+  color: @attribute-value;
+}
+.section-value-extra {
+  color: @important-text;
+}
+
+.section-empty {
+  text-align: center;
+  font-style: italic;
+}
+
+.box-model {
+  margin: 0 auto;
+}
+.box-model-text {
+  flex: none;
+  text-align: center;
+  white-space: nowrap;
+  color: @important-text;
+  margin: 1px;
+}
+.box-model-content {
+  display: flex;
+  border: 1px solid #888;
+  padding: 1px;
+}
+.box-model-padding {
+  border: 1px solid #888;
+  padding: 1px;
+  background: @primary-bg;
+}
+.box-model-border {
+  border: 1px solid #888;
+  padding: 1px;
+  background: @secondary-bg;
+}
+.box-model-margin {
+  padding: 1px;
+}
+.box-model-line {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.style-rule {
+  padding-left: 1em;
+  margin: 5px 0;
+}
+.style-rule_inactive {
+  text-decoration: line-through @important-text;
+}
+.style-rule-prefix {
+  margin-left: -1em;
+  font-style: italic;
+}
+.style-rule-title {
+  margin-left: -1em;
+  color: @important-text;
+}

package/src/pages/detail/section.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/pages/detail/section.ts

@@ -0,0 +1,17 @@
+Component()
+  .property('title', String)
+  .property('collapsed', Boolean)
+  .property('showRefresh', Boolean)
+  .init(({ self, data, setData, listener }) => {
+    const toggleBody = listener(() => {
+      setData({ collapsed: !data.collapsed })
+      if (!data.collapsed) {
+        self.triggerEvent('refresh', null, {})
+      }
+    })
+    const refresh = listener(() => {
+      self.triggerEvent('refresh', null, {})
+    })
+    return { toggleBody, refresh }
+  })
+  .register()

package/src/pages/detail/section.wxml

@@ -0,0 +1,8 @@
+<view class="title" catch:tap="toggleBody">
+  <view class="arrow {{ collapsed ? '' : 'arrow_open' }}">▶</view>
+  <view class="title-text">{{ title }}</view>
+  <view wx:if="{{ !collapsed && showRefresh }}" class="title-refresh" hover-class="title-refresh_hover" catch:tap="refresh">⟳</view>
+</view>
+<view class="body {{ collapsed ? 'body_collapsed' : '' }}">
+  <slot />
+</view>

package/src/pages/detail/section.wxss

@@ -0,0 +1,47 @@
+@import url('../common.wxss');
+
+:host {
+  display: block;
+}
+
+.title {
+  padding: 0 5px;
+  background: @secondary-bg;
+  color: @important-text;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+.title-text {
+  display: inline-block;
+}
+.title-refresh {
+  display: inline-block;
+  font-size: 1.5em;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-align: center;
+  margin-left: 0.5em;
+}
+.title-refresh_hover {
+  background-color: @hover-bg;
+}
+.arrow {
+  display: inline-block;
+  width: 1em;
+  height: 1.5em;
+  text-align: center;
+  transition: transform 200ms ease;
+  margin-right: 0.25em;
+}
+.arrow_open {
+  transform: rotate(90deg);
+}
+
+.body {
+  padding: 0 5px;
+  overflow: hidden;
+}
+.body_collapsed {
+  height: 0;
+}

package/src/pages/detail/value.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/pages/detail/value.ts

@@ -0,0 +1,107 @@
+import * as glassEasel from 'glass-easel'
+import { type protocol } from 'glass-easel-devtools-agent'
+import { sendRequest } from '../../message_channel'
+
+Component()
+  .options({
+    virtualHost: true,
+    dataDeepCopy: glassEasel.DeepCopyKind.None,
+    propertyPassingDeepCopy: glassEasel.DeepCopyKind.None,
+  })
+  .property('primitiveValue', null)
+  .property('value', {
+    type: Object,
+    value: null as null | protocol.GlassEaselVar,
+  })
+  .property('varName', String)
+  .property('nodeId', Number)
+  .property('attribute', String)
+  .data(() => ({
+    slices: [] as { dynamic: boolean; str: string }[],
+    allowInspect: false,
+    updateHighlight: false,
+  }))
+  .init(({ self, data, setData, observer, method }) => {
+    let prevNodeId = 0
+    observer(['value', 'primitiveValue'], () => {
+      const v: protocol.GlassEaselVar = data.value ?? {
+        type: 'primitive',
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        value: data.primitiveValue,
+      }
+      if (!v) {
+        setData({ slices: [], allowInspect: false })
+        return
+      }
+      if (data.nodeId === prevNodeId) {
+        updatedAni()
+      } else {
+        prevNodeId = data.nodeId
+      }
+      if (v.type === 'primitive') {
+        if (v.value === null) {
+          setData({ slices: [{ dynamic: true, str: 'null' }], allowInspect: false })
+        } else if (v.value === undefined) {
+          setData({ slices: [{ dynamic: true, str: 'undefined' }], allowInspect: false })
+        } else if (typeof v.value === 'string') {
+          setData({
+            slices: [
+              { dynamic: false, str: '"' },
+              { dynamic: true, str: v.value },
+              { dynamic: false, str: '"' },
+            ],
+            allowInspect: false,
+          })
+        } else {
+          setData({ slices: [{ dynamic: true, str: String(v.value) }], allowInspect: false })
+        }
+      } else if (v.type === 'symbol') {
+        setData({
+          slices: [
+            { dynamic: false, str: 'Symbol(' },
+            { dynamic: true, str: v.value },
+            { dynamic: false, str: ')' },
+          ],
+          allowInspect: false,
+        })
+      } else if (v.type === 'function') {
+        setData({ slices: [{ dynamic: true, str: 'Function' }], allowInspect: data.nodeId > 0 })
+      } else if (v.type === 'object') {
+        setData({ slices: [{ dynamic: true, str: 'Object' }], allowInspect: data.nodeId > 0 })
+      } else if (v.type === 'array') {
+        setData({ slices: [{ dynamic: true, str: 'Array' }], allowInspect: data.nodeId > 0 })
+      }
+    })
+
+    let updateAniEndTimeout = 0
+    const updatedAni = method(() => {
+      setTimeout(() => {
+        if (data.updateHighlight) {
+          setData({ updateHighlight: false })
+          updatedAni()
+          return
+        }
+        if (updateAniEndTimeout) {
+          clearTimeout(updateAniEndTimeout)
+          updateAniEndTimeout = 0
+        }
+        self.setData({ updateHighlight: true, varName: '' })
+        updateAniEndTimeout = setTimeout(() => {
+          updateAniEndTimeout = 0
+          setData({ updateHighlight: false })
+        }, 1000)
+      }, 200)
+    })
+
+    const useInConsole = method(async () => {
+      const { nodeId, attribute } = data
+      const { varName } = await sendRequest('DOM.useGlassEaselAttributeInConsole', {
+        nodeId,
+        attribute,
+      })
+      self.setData({ varName })
+    })
+
+    return { useInConsole }
+  })
+  .register()

package/src/pages/detail/value.wxml

@@ -0,0 +1,7 @@
+<view class="wrapper {{ updateHighlight ? 'updated' : '' }}">
+  <view wx:for="{{ slices }}" class="slice {{ item.dynamic ? 'slice_dynamic' : '' }}">{{ item.str }}</view>
+</view>
+<block wx:if="{{ allowInspect }}">
+  <view wx:if="{{ varName }}" class="var-name">={{ varName }}</view>
+  <view wx:else class="var-name" hover-class="var-name_hover" catch:tap="useInConsole">↖</view>
+</block>