improve

Author: patricklx

packages/@glimmer/runtime/lib/vm/element-builder.ts

@@ -104,6 +104,7 @@ export class NewElementBuilder implements ElementBuilder {
     this.env = env;
     this.dom = env.getAppendOperations();
     this.updateOperations = env.getDOM();
+    this.htmlElementsState = [];
   }
 
   protected initialize(): this {
@@ -205,6 +206,14 @@ export class NewElementBuilder implements ElementBuilder {
   }
 
   closeElement(): Nullable<ModifierInstance[]> {
+    const htmlState = this.htmlElementsState.pop();
+    if (htmlState.shouldAddHtmlElement) {
+      this.env.debugRenderTree?.didRender(htmlState, {
+          parentElement: () => element.parentElement,
+          firstNode: () => element,
+          lastNode: () => element,
+        });
+    }
     this.willCloseElement();
     this.popElement();
     return this.popModifiers();
@@ -247,17 +256,22 @@ export class NewElementBuilder implements ElementBuilder {
 
   private pushModifiers(modifiers: Nullable<ModifierInstance[]>): void {
     this.modifierStack.push(modifiers);
-    if (!modifiers && this.env.debugRenderTree) {
+    if (modifiers && this.env.debugRenderTree) {
       const htmlState = {};
-      this.env.debugRenderTree?.create(htmlState, {
-        type: 'htmlTag',
-        name: this.element.localName,
-        args: {
-          named: this.element.attrs,
-          positional: []
-        },
-        instance: delegate                                  
-      });
+      this.htmlElementsState.push(htmlState);
+      const shouldAddHtmlElement = modifiers.length || globalThis.ENV_DEBUG_RENDER_TREE_ALL_ELEMENTS
+      htmlState.shouldAddHtmlElement = shouldAddHtmlElement;
+      if (shouldAddHtmlElement) {
+        this.env.debugRenderTree?.create(htmlState, {
+          type: 'html-element',
+          name: this.element.localName,
+          args: {
+            named: this.element.attrs,
+            positional: []
+          },
+          instance: delegate                                  
+        });
+      }
       for (const modifier of modifiers) {
         const state = {};
         const name = modifier.definition.resolvedName;
@@ -275,11 +289,6 @@ export class NewElementBuilder implements ElementBuilder {
           lastNode: () => element,
         });
       }
-      this.env.debugRenderTree?.didRender(htmlState, {
-          parentElement: () => element.parentElement,
-          firstNode: () => element,
-          lastNode: () => element,
-        });
     }
   }