const key = `${item.nodeId}-label-${i}`;

      // `i` is the index of the label piece we are rendering, `label[i*2]` is
      // where the rendered label piece belngs, and `label[i*2+1]` (if it isn't
      // out of bounds) is where the separator belongs.

      if (isSavedFrame(piece)) {
        label[i * 2] = Frame({
          key,
          onClick: onViewSourceInDebugger,
          frame: piece,
          showFunctionName: true,
        });
      } else if (piece === "noStack") {
        label[i * 2] = dom.span(
          { key, className: "not-available" },
          L10N.getStr("tree-item.nostack")
        );
      } else if (piece === "noFilename") {
        label[i * 2] = dom.span(
          { key, className: "not-available" },
          L10N.getStr("tree-item.nofilename")
        );
      } else if (piece === "JS::ubi::RootList") {
        // Don't use the usual labeling machinery for root lists: replace it
        // with the "GC Roots" string.
        label.splice(0, label.length);
        label.push(L10N.getStr("tree-item.rootlist"));
        break;
      } else {
        label[i * 2] = piece;
      }

      // If this is not the last piece of the label, add a separator.
      if (i < length - 1) {
        label[i * 2 + 1] = Separator({ key: `${item.nodeId}-separator-${i}` });
      }
    }

    return dom.div(
      {
        className: `heap-tree-item ${focused ? "focused" : ""} node-${
          item.nodeId
        }`,
      },

      dom.span(
        {
          className: "heap-tree-item-field heap-tree-item-bytes",
        },
        dom.span(
          {
            className: "heap-tree-number",
          },
          retainedSize
        ),
        dom.span({ className: "heap-tree-percent" }, percentRetainedSize)
      ),

      dom.span(
        {
          className: "heap-tree-item-field heap-tree-item-bytes",
        },
        dom.span(
          {
            className: "heap-tree-number",
          },
          shallowSize
        ),
        dom.span({ className: "heap-tree-percent" }, percentShallowSize)
      ),

      dom.span(
        {
          className: "heap-tree-item-field heap-tree-item-name",
          style: { marginInlineStart: depth * TREE_ROW_HEIGHT },
        },
        arrow,
        label,
        dom.span(
          { className: "heap-tree-item-address" },
          `@ 0x${item.nodeId.toString(16)}`
        )
      )
    );
  }
}

module.exports = DominatorTreeItem;
PK