[BezierSwatch] Append text child when setBezierText is called

Prior to crrev.com/c/6113686, the text element was appended
as a child to the created legacy custom component.

However, in the  CL mentioned above, we removed legacy
custom components and migrated them to use `customElements.define`.

One drawback of this is, `document.createElement` cannot create
elements and their children at the same time. So, we were using
`connectedCallback` to append the child.

This subtly caused a bug: bezier swatches in the styles tab
did not have enough horizontal space from the start. The reason
is, PropertyRenderer checks whether to add a space between different
elements or not using `requiresSpace` method. This method decides
on this by checking the `textContent`s of the nodes.

Since the nodes are not connected to the DOM at that point, BezierSwatch
does not have the text element as the child. So, its `textContent` was
returning null.

This CL, updates `setBezierText` method to append the text element
if it is not already appended to the BezierSwatch element.

Fixed: 391149444
Change-Id: I930952c6335af3e3f576acb21782449cb02c5016
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6185437
Auto-Submit: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>

Author: ergunsh

front_end/ui/legacy/components/inline_editor/Swatches.ts

@@ -27,14 +27,6 @@ export class BezierSwatch extends HTMLElement {
     root.createChild('slot');
   }
 
-  connectedCallback(): void {
-    this.append(this.#text);
-  }
-
-  disconnectedCallback(): void {
-    this.#text.remove();
-  }
-
   static create(): BezierSwatch {
     return document.createElement('devtools-bezier-swatch');
   }
@@ -44,6 +36,10 @@ export class BezierSwatch extends HTMLElement {
   }
 
   setBezierText(text: string): void {
+    if (!this.#text.parentElement) {
+      this.append(this.#text);
+    }
+
     this.#text.textContent = text;
   }