design fix

Author: patricklx

app/components/component-tree-item.hbs

@@ -23,6 +23,8 @@
 
     <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
         (or @item.isComponent @item.isModifier @item.isHtmlTag)
           (if

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,25 +316,34 @@ class RenderItem {
   }
 
   get isComponent() {
-    return this.renderNode.type === 'component' || this.renderNode.type === 'remote-element';
+    return (
+      this.renderNode.type === 'component' ||
+      this.renderNode.type === 'remote-element'
+    );
   }
 
   get isModifier() {
     return this.renderNode.type === 'modifier';
   }
 
-  get isHtmlTag() {
-    return this.renderNode.type === 'htmlTag';
+  get hasModifiers() {
+    return this.childItems.some((item) => item.isModifier);
   }
 
-  get isModifier() {
-    return this.renderNode.type === 'modifier';
+  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() {
     return this.renderNode.name;
   }
@@ -337,7 +361,7 @@ class RenderItem {
 
   get hasInstance() {
     let { instance } = this.renderNode;
-    return typeof instance === 'object' && instance !== null;
+    return typeof instance === 'object' && instance;
   }
 
   get instance() {
@@ -349,7 +373,7 @@ class RenderItem {
   }
 
   get hasBounds() {
-    return this.renderNode.bounds !== null;
+    return this.renderNode.bounds;
   }
 
   get isRoot() {
@@ -419,6 +443,7 @@ class RenderItem {
   }
 
   @action showPreview() {
+    if (this.isClosingTag) return;
     this.controller.previewing = this.id;
   }
 
@@ -429,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_debug/libs/render-tree.js

@@ -176,12 +176,18 @@ class InElementSupportProvider {
           const modifierState =
             modifier.state?.instance || modifier.state || modifier[1];
           const instance = modifierState?.instance || modifierState?.delegate;
-          const name =
+          let name =
             modifier.definition?.resolvedName ||
-            modifier.manager?.getDebugName?.() ||
             modifierState?.debugName ||
-            instance?.name ||
-            'unknown-modifier';
+            instance?.name;
+          if (!name) {
+            try {
+              name = modifier.manager?.getDebugName?.();
+            } catch (e) {
+              // failed
+            }
+            name = name || 'unknown-modifier';
+          }
           const args = {
             positional: [],
             named: {},