glass-easel-devtools-panel 0.10.2 → 0.12.1

package/src/pages/tree/element.wxml

@@ -1,44 +1,52 @@
-<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 wx:if="{{ kind === 1 || kind === 2 || kind === 3 || kind === 4 }}" class="tag {{ tagUpdateHighlight ? 'updated' : '' }}">
+  <block wx:if="{{ hideSelf }}"></block>
+  <block wx:else>
+    <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>
+    <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>
-      <view class="tag-text">&gt;</view>
-    </block>
-    <block wx:else>
-      <view class="virtual-tag-name">{{ tagName }}</view>
-    </block>
-  </view>
+      <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 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>
+  </block>
 
-  <view hidden="{{ !showChildNodes }}" class="children">
+  <view
+    hidden="{{ !showChildNodes && !hideSelf }}"
+    class="children {{ hideSelf ? '' : 'children_indent' }}"
+  >
     <view wx:if="{{ hasShadowRoot }}" class="shadow-roots">
-      <element wx:for="{{ shadowRoots }}" wx:key="nodeId" id="child-{{ item.nodeId }}" node-info="{{ item }}" />
+      <element is-shadow-root 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 }}" />
+    <block wx:if="{{ !userConfig.showComposed || isShadowRoot || !hasShadowRoot || nodeInfo.distributedNodes != undefined }}">
+      <element wx:for="{{ children }}" wx:key="nodeId" id="child-{{ item.nodeId }}" node-info="{{ item }}" />
+    </block>
   </view>
 </view>
 

package/src/pages/tree/element.wxss

@@ -31,6 +31,7 @@
   line-height: 1em;
   color: #444;
   text-align: center;
+  user-select: none;
 }
 .fold-arrow-icon {
   width: 1em;
@@ -94,7 +95,7 @@
   .color-mode(color, @attribute-value);
 }
 
-.children {
+.children_indent {
   margin-left: 1em;
 }
 

package/typings/miniprogram.d.ts

@@ -1,6 +1,11 @@
-import type { PageConstructor, ComponentConstructor } from 'glass-easel-miniprogram-adapter'
+import type {
+  PageConstructor,
+  ComponentConstructor,
+  BehaviorConstructor,
+} from 'glass-easel-miniprogram-adapter'
 
 declare global {
   const Page: PageConstructor
   const Component: ComponentConstructor
+  const Behavior: BehaviorConstructor
 }