Mark root-less <devtools-widget>s as roots

Bug: none
Change-Id: I8aa32990961146a76861067a2e630f5d24a25bf3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6216263
Reviewed-by: Benedikt Meurer <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: OrKoN

front_end/ui/legacy/Widget.test.ts

@@ -151,4 +151,20 @@ describe('Widget', () => {
       await widget.updateComplete;
     });
   });
+
+  describe('WidgetElement', () => {
+    it('renders WidgetElement into DOM without a root element', async () => {
+      const widget = new UI.Widget.WidgetElement();
+      class WidgetInstance extends UI.Widget.Widget {
+        constructor(element: HTMLElement) {
+          super(false, false, element);
+        }
+        override performUpdate(): void {
+          // no-op
+        }
+      }
+      widget.widgetConfig = UI.Widget.widgetConfig(WidgetInstance, {});
+      renderElementIntoDOM(widget);
+    });
+  });
 });

front_end/ui/legacy/Widget.ts

@@ -104,7 +104,11 @@ export class WidgetElement<WidgetT extends Widget&WidgetParams, WidgetParams = {
   }
 
   connectedCallback(): void {
-    Widget.getOrCreateWidget(this).show(this.parentElement as HTMLElement);
+    // When using <devtools-widget> we suppress
+    // suppressOrphanWidgetError and allow the Widget instance to be
+    // treated as a root instance if no root widget was found.
+    Widget.getOrCreateWidget(this).show(
+        this.parentElement as HTMLElement, undefined, /* suppressOrphanWidgetError= */ true);
   }
 }
 
@@ -349,7 +353,7 @@ export class Widget {
   async ownerViewDisposed(): Promise<void> {
   }
 
-  show(parentElement: Element, insertBefore?: Node|null): void {
+  show(parentElement: Element, insertBefore?: Node|null, suppressOrphanWidgetError = false): void {
     assert(parentElement, 'Attempt to attach widget with no parent element');
 
     if (!this.isRoot) {
@@ -358,6 +362,12 @@ export class Widget {
       let currentWidget = undefined;
       while (!currentWidget) {
         if (!currentParent) {
+          if (suppressOrphanWidgetError) {
+            this.isRoot = true;
+            console.warn('A Widget has silently been marked as a root widget');
+            this.show(parentElement, insertBefore);
+            return;
+          }
           throw new Error('Attempt to attach widget to orphan node');
         }
         currentWidget = widgetMap.get(currentParent);