glass-easel-devtools-panel 0.9.0 → 0.10.1

package/src/pages/detail/detail.wxss

@@ -5,8 +5,8 @@
 }
 
 .section {
-  margin-bottom: 5px;
-  color: @common-text;
+  margin-bottom: 2px;
+  .color-mode(color, @common-text);
 }
 .section-item {
   white-space: nowrap;
@@ -14,18 +14,18 @@
 }
 .section-key {
   display: inline;
-  color: @property-name;
+  .color-mode(color, @property-name);
 }
 .section-key-core {
   display: inline;
-  color: @core-attribute-name;
+  .color-mode(color, @core-attribute-name);
 }
 .section-value {
   display: inline;
-  color: @attribute-value;
+  .color-mode(color, @attribute-value);
 }
 .section-value-extra {
-  color: @important-text;
+  .color-mode(color, @important-text);
 }
 
 .section-empty {
@@ -40,7 +40,7 @@
   flex: none;
   text-align: center;
   white-space: nowrap;
-  color: @important-text;
+  .color-mode(color, @important-text);
   margin: 1px;
 }
 .box-model-content {
@@ -51,12 +51,12 @@
 .box-model-padding {
   border: 1px solid #888;
   padding: 1px;
-  background: @primary-bg;
+  .color-mode(background-color, @primary-bg);
 }
 .box-model-border {
   border: 1px solid #888;
   padding: 1px;
-  background: @secondary-bg;
+  .color-mode(background-color, @secondary-bg);
 }
 .box-model-margin {
   padding: 1px;
@@ -67,18 +67,66 @@
   align-items: center;
 }
 
+.class-external-hint {
+  display: inline;
+  font-style: italic;
+}
+.class-value-item {
+  .color-mode(color, @attribute-value);
+}
+
 .style-rule {
-  padding-left: 1em;
   margin: 5px 0;
+  user-select: text;
 }
 .style-rule_inactive {
-  text-decoration: line-through @important-text;
+  opacity: 0.5;
 }
 .style-rule-prefix {
-  margin-left: -1em;
   font-style: italic;
+  user-select: none;
+}
+.style-rule-disabled {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1em;
+  text-align: center;
+  cursor: pointer;
+  .color-mode(color, @warn-text);
+}
+.style-rule-enabled {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1em;
+  text-align: center;
+  cursor: pointer;
+  color: transparent;
+}
+.style-rule-enabled_hover {
+  .color-mode(color, @warn-text);
+}
+.style-rule-scope {
+  display: inline;
+  font-style: italic;
+  user-select: none;
 }
 .style-rule-title {
-  margin-left: -1em;
-  color: @important-text;
+  display: inline;
+  .color-mode(color, @important-text);
+}
+.style-rule-property_disabled {
+  opacity: 0.5;
+}
+.style-rule-item-add {
+  display: inline-block;
+  cursor: text;
+}
+.style-rule-inline-add {
+  font-style: normal;
+  display: inline-block;
+}
+.style-rule-inline-add_hover {
+  .color-mode(background-color, @hover-bg);
 }

package/src/pages/detail/editable.json

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

package/src/pages/detail/editable.ts

@@ -0,0 +1,72 @@
+const PRESERVED_RIGHT_WIDTH = 16
+
+Component()
+  .property('edit', Boolean)
+  .property('value', String)
+  .data(() => ({
+    width: 0,
+    previewValue: '',
+  }))
+  .init(({ self, data, observer, listener, method }) => {
+    observer('edit', (v) => {
+      if (v) {
+        self.setData({}, () => {
+          const editInput = self._$?.getShadowRoot()?.getElementById('edit')?.getBackendElement()
+          if (editInput) {
+            self._$?.getBackendContext()?.setFocusedNode?.(editInput as any)
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            ;(editInput as any).select?.()
+          }
+        })
+      }
+    })
+
+    observer(['edit', 'value'], () => {
+      updateWidth()
+    })
+
+    const getInputValue = () => {
+      const editInput = self._$?.getShadowRoot()?.getElementById('edit')?.getBackendElement()
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      return (editInput as any)?.value as string | undefined
+    }
+
+    const startEdit = listener(() => {
+      self.setData({ edit: true, width: PRESERVED_RIGHT_WIDTH, previewValue: data.value })
+    })
+
+    const inputBlur = listener(() => {
+      commit()
+    })
+
+    const updateWidth = method(() => {
+      if (!data.edit) return
+      const previewValue = getInputValue() ?? data.value
+      self.setData({ previewValue }, () => {
+        self
+          .createSelectorQuery()
+          .select('#measure')
+          .boundingClientRect((rect) => {
+            if (!rect) return
+            const width =
+              rect.width > PRESERVED_RIGHT_WIDTH
+                ? rect.width + PRESERVED_RIGHT_WIDTH
+                : PRESERVED_RIGHT_WIDTH
+            self.setData({ width })
+          })
+          .exec()
+      })
+    })
+
+    const commit = method(() => {
+      setTimeout(() => {
+        const value = getInputValue()
+        if (value === undefined) return
+        self.setData({ edit: false, value })
+        self.triggerEvent('change', { value }, {})
+      }, 0)
+    })
+
+    return { startEdit, inputBlur, updateWidth, commit }
+  })
+  .register()

package/src/pages/detail/editable.wxml

@@ -0,0 +1,7 @@
+<view catch:tap="startEdit">
+  <slot />
+</view>
+<block wx:if="{{ edit }}">
+  <div id="measure" class="measure">{{ previewValue }}</div>
+  <input id="edit" class="edit" style="width: {{ width }}px" value="{{ value }}" bind:blur="inputBlur" bind:keyup="updateWidth" bind:change="commit" />
+</block>

package/src/pages/detail/editable.wxss

@@ -0,0 +1,32 @@
+@import url('../common.wxss');
+
+:host {
+  display: inline-block;
+  cursor: text;
+  position: relative;
+}
+
+.measure {
+  color: transparent;
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-family: monospace;
+  white-space: nowrap;
+}
+
+.edit {
+  box-sizing: content-box;
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  right: -2px;
+  border: 1px solid #808080;
+  padding: 1px;
+  .color-mode(background-color, @secondary-bg);
+  .color-mode(color, @important-text);
+  font-size: 1em;
+  font-family: monospace;
+  border-radius: none;
+  outline: none;
+}

package/src/pages/detail/section.wxss

@@ -6,8 +6,8 @@
 
 .title {
   padding: 0 5px;
-  background: @secondary-bg;
-  color: @important-text;
+  .color-mode(background-color, @secondary-bg);
+  .color-mode(color, @important-text);
   line-height: 1.5;
   white-space: nowrap;
 }
@@ -24,7 +24,7 @@
   margin-left: 0.5em;
 }
 .title-refresh_hover {
-  background-color: @hover-bg;
+  .color-mode(background-color, @hover-bg);
 }
 .arrow {
   display: inline-block;

package/src/pages/detail/value.wxss

@@ -2,14 +2,13 @@
 
 @keyframes value-update-ani {
   from {
-    background: @update-bg;
   }
   to {
-    background: transparent;
+    background-color: transparent;
   }
 }
 .updated {
-  background: @update-bg;
+  .color-mode(background-color, @update-bg);
   animation-duration: 1s;
   animation-fill-mode: both;
   animation-name: value-update-ani;
@@ -22,10 +21,10 @@
 
 .slice {
   display: inline;
-  color: @common-text;
+  .color-mode(color, @common-text);
 }
 .slice_dynamic {
-  color: @attribute-value;
+  .color-mode(color, @attribute-value);
 }
 
 .var-name {
@@ -37,8 +36,8 @@
   text-align: center;
   font-size: 0.8em;
   font-style: italic;
-  color: @important-text;
+  .color-mode(color, @important-text);
 }
 .var-name_hover {
-  background: @hover-bg;
+  .color-mode(background-color, @hover-bg);
 }

package/src/pages/index/index.wxss

@@ -8,13 +8,13 @@ body {
 .wrapper {
   font-family: monospace;
   font-size: 12px;
-  background: @primary-bg;
+  .color-mode(background-color, @primary-bg);
   height: 100%;
   cursor: default;
   user-select: none;
 }
 .empty {
-  color: @common-text;
+  .color-mode(color, @common-text);
   font-style: italic;
   padding: 5px;
 }
@@ -41,8 +41,8 @@ body {
 
 .toolbar {
   flex: none;
-  background: @secondary-bg;
-  color: @important-text;
+  .color-mode(background-color, @secondary-bg);
+  .color-mode(color, @important-text);
   border-bottom: 2px solid #888;
   display: flex;
 }
@@ -55,10 +55,10 @@ body {
   padding: 5px 10px;
 }
 .tool_hover {
-  background: @hover-bg;
+  .color-mode(background-color, @hover-bg);
 }
 .tool_active {
-  background: @selected-bg;
+  .color-mode(background-color, @selected-bg);
 }
 
 .tree {

package/src/pages/tree/element.wxss

@@ -2,14 +2,13 @@
 
 @keyframes update-ani {
   from {
-    background: @update-bg;
   }
   to {
     background: transparent;
   }
 }
 .updated {
-  background: @update-bg;
+  .color-mode(background-color, @update-bg);
   animation-duration: 1s;
   animation-fill-mode: both;
   animation-name: update-ani;
@@ -21,7 +20,7 @@
 }
 
 .tag {
-  color: @common-text;
+  .color-mode(color,  @common-text);
   white-space: nowrap;
 }
 
@@ -45,20 +44,20 @@
   display: inline-block;
 }
 .tag-body_hover {
-  background: @hover-bg;
+  .color-mode(background-color, @hover-bg);
 }
 .tag-body_selected {
-  background: @selected-bg;
+  .color-mode(background-color, @selected-bg);
 }
 .tag-body_highlight {
-  background-color: rgba(0, 128, 192, 0.25);
+  .color-mode(background-color, @highlight-bg);
 }
 .tag-text {
   display: inline;
 }
 .tag-name {
   display: inline-block;
-  color: @tag-name;
+  .color-mode(color, @tag-name);
 }
 
 .tag-var-name-wrapper {
@@ -73,10 +72,10 @@
   text-align: center;
   font-size: 0.8em;
   font-style: italic;
-  color: @important-text;
+  .color-mode(color, @important-text);
 }
 .tag-var-name_hover {
-  background: @hover-bg;
+  .color-mode(background-color, @hover-bg);
 }
 
 .attribute {
@@ -85,14 +84,14 @@
 }
 .attribute-name {
   display: inline-block;
-  color: @core-attribute-name;
+  .color-mode(color, @core-attribute-name);
 }
 .attribute-name_property {
-  color: @property-name;
+  .color-mode(color, @property-name);
 }
 .attribute-value {
   display: inline-block;
-  color: @attribute-value;
+  .color-mode(color, @attribute-value);
 }
 
 .children {
@@ -104,10 +103,10 @@
   font-style: italic;
 }
 .virtual-tag-name_hover {
-  background: @selected-bg;
+  .color-mode(background-color, @selected-bg);
 }
 
 .text-content {
-  color: @important-text;
+  .color-mode(color, @important-text);
   padding: 1px 0;
 }