Use cloneCustomElement in the Adorner

To make it work, reverse the dependency between the legacy bundle and the adorner bundle

Bug: 407750554
Change-Id: Ib23ab1a0e9a3766e261b2eebec7cfe016b86b767
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7099742
Auto-Submit: Danil Somsikov <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/ui/components/adorners/Adorner.ts

@@ -5,6 +5,7 @@
 
 import type * as Platform from '../../../core/platform/platform.js';
 import {html, render} from '../../../ui/lit/lit.js';
+import * as UI from '../../legacy/legacy.js';
 import * as VisualElements from '../../visual_logging/visual_logging.js';
 
 import adornerStyles from './adorner.css.js';
@@ -37,7 +38,7 @@ export class Adorner extends HTMLElement {
   }
 
   override cloneNode(deep?: boolean): Node {
-    const node = super.cloneNode(deep) as Adorner;
+    const node = UI.UIUtils.cloneCustomElement(this, deep);
     node.data = {name: this.name, content: this.#content, jslogContext: this.#jslogContext};
     return node;
   }

front_end/ui/components/adorners/BUILD.gn

@@ -17,6 +17,7 @@ devtools_ui_module("adorners") {
 
   deps = [
     "../../../core/platform:bundle",
+    "../../../ui/legacy:bundle",
     "../../../ui/lit:bundle",
     "../../../ui/visual_logging:bundle",
     "../helpers:bundle",

front_end/ui/legacy/BUILD.gn

@@ -110,7 +110,6 @@ devtools_ui_module("ui") {
     "../../models/geometry:bundle",
     "../../models/text_utils:bundle",
     "../../ui/legacy/theme_support:bundle",
-    "../components/adorners:bundle",
     "../components/buttons:bundle",
     "../components/helpers:bundle",
     "../components/highlighting:bundle",
@@ -137,6 +136,7 @@ devtools_entrypoint("bundle") {
     "../../legacy_test_runner/*",
     "../../panels/*",
     "../../testing/*",
+    "../components/adorners:*",
     "../components/data_grid:*",
     "../components/dialogs:*",
     "../components/docs/combo_box/*",

front_end/ui/legacy/Toolbar.ts

@@ -10,7 +10,6 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import type * as Adorners from '../components/adorners/adorners.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 
 import {type Action, Events as ActionEvents} from './ActionRegistration.js';
@@ -643,7 +642,7 @@ export class ToolbarButton extends ToolbarItem<ToolbarButton.EventTypes, Buttons
     this.text = text;
   }
 
-  setAdorner(adorner: Adorners.Adorner.Adorner): void {
+  setAdorner(adorner: HTMLElement): void {
     if (this.adorner) {
       this.adorner.replaceWith(adorner);
     } else {
@@ -971,7 +970,7 @@ export class ToolbarMenuButton extends ToolbarItem<ToolbarButton.EventTypes> {
   private textElement?: HTMLElement;
   private text?: string;
   private iconName?: string;
-  private adorner?: Adorners.Adorner.Adorner;
+  private adorner?: HTMLElement;
   private readonly contextMenuHandler: (arg0: ContextMenu) => void;
   private readonly useSoftMenu: boolean;
   private readonly keepOpen: boolean;
@@ -1028,7 +1027,7 @@ export class ToolbarMenuButton extends ToolbarItem<ToolbarButton.EventTypes> {
     this.text = text;
   }
 
-  setAdorner(adorner: Adorners.Adorner.Adorner): void {
+  setAdorner(adorner: HTMLElement): void {
     if (this.iconName) {
       return;
     }