add modifiers to render tree (#2548)

app/components/component-tree-arg.js

@@ -12,6 +12,15 @@ export default class ComponentTreeArg extends Component {
 
   get displayValue() {
     if (this.isObject) {
+      if (this.args.value.inspect) {
+        if (this.args.value.type === 'function') {
+          return this.args.value.inspect
+            .replace(/"/g, '\\"')
+            .replace('bound ', '')
+            .replace('{ ... }', '');
+        }
+        return truncate(this.args.value.inspect.replace(/"/g, '\\"'));
+      }
       return '...';
     } else if (typeof this.args.value === 'string') {
       // Escape any interior quotes – we will add the surrounding quotes in the template

app/components/component-tree-item.hbs

@@ -23,8 +23,10 @@
 
     <code
       class="component-tree-item__tag flex whitespace-no-wrap
+        {{if @item.isClosingTag 'component-tree-item__closing'}}
+        {{if @item.hasModifiers 'component-tree-item__has_modifier'}}
         {{if
-          @item.isComponent
+        (or @item.isComponent @item.isModifier @item.isHtmlTag)
           (if
             @item.isCurlyInvocation
             "component-tree-item-classic__bracket"
@@ -37,7 +39,7 @@
         }}"
     >
       {{!-- template-lint-disable no-unbalanced-curlies --}}
-      {{#if @item.isComponent}}
+      {{#if (or @item.isComponent @item.isModifier)}}
         {{#if @item.isCurlyInvocation}}
           <span class="component-name">
             {{@item.name}}
@@ -83,6 +85,20 @@
         \{{mount "{{@item.name}}"}}
       {{else if @item.isRouteTemplate}}
         {{@item.name}} route
+      {{else if @item.isHtmlTag}}
+        <span class="component-name">
+          {{@item.name}}
+        </span>
+        {{#each-in @item.args.named as |name value|}}
+          <div class="arg-token flex ml-2">
+              <span class="key-token">
+                {{name}}
+              </span>
+            ={{if (is-string value) "\""}}
+            <ComponentTreeArg @value={{value}} />
+            {{if (is-string value) "\""}}
+          </div>
+        {{/each-in}}
       {{/if}}
     </code>
   </div>

app/components/object-inspector/property.ts

@@ -121,8 +121,8 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
   }
 
   get cannotEdit() {
-    if (this.args.model.name === '...' || !this.isCalculated) return true;
-    return this.isFunction || this.isOverridden || this.readOnly;
+    if (this.args.model.name === '...' || !this.isCalculated || this.readOnly) return true;
+    return this.args.model?.value?.type !== 'type-string' && this.args.model?.value?.type !== 'type-number';
   }
 
   @action

app/controllers/component-tree.js

@@ -48,6 +48,21 @@ export default class ComponentTreeController extends Controller {
 
         renderItems.push(item);
 
+        if (
+          item.isHtmlTag &&
+          renderNode.children.some((c) => c.type === 'modifier')
+        ) {
+          const idx = renderNode.children.findLastIndex(
+            (c) => c.type === 'modifier'
+          );
+          renderNode.children.splice(idx + 1, 0, {
+            type: 'placeholder-closing-tag',
+            id: renderNode.id + '-closing-tag',
+            name: '',
+            children: [],
+          });
+        }
+
         renderNode.children.forEach((node) => flatten(item, node));
       }
     };
@@ -301,7 +316,32 @@ class RenderItem {
   }
 
   get isComponent() {
-    return this.renderNode.type === 'component';
+    return (
+      this.renderNode.type === 'component' ||
+      this.renderNode.type === 'remote-element'
+    );
+  }
+
+  get isModifier() {
+    return this.renderNode.type === 'modifier';
+  }
+
+  get hasModifiers() {
+    return this.childItems.some((item) => item.isModifier);
+  }
+
+  get isLastModifier() {
+    return (
+      this.parentItem.childItems.findLast((item) => item.isModifier) === this
+    );
+  }
+
+  get isHtmlTag() {
+    return this.renderNode.type === 'html-element';
+  }
+
+  get isClosingTag() {
+    return this.renderNode.type === 'placeholder-closing-tag';
   }
 
   get name() {
@@ -313,12 +353,15 @@ class RenderItem {
   }
 
   get isCurlyInvocation() {
+    if (this.isModifier) {
+      return true;
+    }
     return this.renderNode.args && this.renderNode.args.positional;
   }
 
   get hasInstance() {
     let { instance } = this.renderNode;
-    return typeof instance === 'object' && instance !== null;
+    return typeof instance === 'object' && instance;
   }
 
   get instance() {
@@ -330,7 +373,7 @@ class RenderItem {
   }
 
   get hasBounds() {
-    return this.renderNode.bounds !== null;
+    return this.renderNode.bounds;
   }
 
   get isRoot() {
@@ -400,6 +443,7 @@ class RenderItem {
   }
 
   @action showPreview() {
+    if (this.isClosingTag) return;
     this.controller.previewing = this.id;
   }
 
@@ -410,6 +454,7 @@ class RenderItem {
   }
 
   @action toggleInspection() {
+    if (this.isClosingTag) return;
     if (this.isPinned) {
       this.controller.pinned = undefined;
     } else {

app/styles/component_tree.scss

@@ -141,6 +141,19 @@
   color: var(--base09);
 }
 
+.component-tree-item__has_modifier:after {
+  content: '' !important;
+}
+
+.component-tree-item__closing:before {
+  content: '>';
+  margin-left: -13px;
+}
+
+.component-tree-item__self-closing:before {
+  content: '/>';
+}
+
 .component-tree-item__bracket:before {
   content: '<';
 }

ember-cli-build.js

@@ -381,19 +381,18 @@ module.exports = function (defaults) {
   if (env === 'test') {
     // `ember test` expects the index.html file to be in the
     // output directory.
-    output = mergeTrees([dists.basic, dists.chrome]);
-  } else {
     // Change base tag for running tests in development env.
     dists.basic = replace(dists.basic, {
       files: ['tests/index.html'],
       patterns: [
         {
           match: /<base.*\/>/,
-          replacement: '<base href="../" />',
+          replacement: '',
         },
       ],
     });
-
+    output = mergeTrees([dists.basic, dists.chrome]);
+  } else {
     dists.testing = mergeTrees([dists.basic, dists.chrome]);
 
     output = mergeTrees([

ember_debug/adapters/web-extension.js

@@ -28,7 +28,11 @@ export default class extends BasicAdapter {
     // "clone" them through postMessage unless they are converted to a
     // native array.
     options = deepClone(options);
-    this._chromePort.postMessage(options);
+    try {
+      this._chromePort.postMessage(options);
+    } catch (e) {
+      console.log('failed to send message', e);
+    }
   }
 
   /**