Use default slot for the adorner content

This makes it easier to specify the content in the template

Bug: 301364727
Change-Id: I8b16c253eb222d28062b734cab196b24ae5ed0fa
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6388135
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/application/components/OriginTrialTreeView.test.ts

@@ -135,7 +135,7 @@ function extractBadgeTextFromTreeNode(node: HTMLLIElement): string[] {
     if (adornerElement === null) {
       return '';
     }
-    const contentElement = adornerElement.querySelector('[slot="content"]');
+    const contentElement = adornerElement.firstElementChild;
     assert.isNotNull(contentElement);
     if (contentElement === null) {
       return '';

front_end/panels/autofill/AutofillView.ts

@@ -367,11 +367,11 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
                       ${field.autofillType}
                       ${field.fillingStrategy === FillingStrategy.AutocompleteAttribute ?
                             html`<devtools-adorner title=${i18nString(UIStrings.autocompleteAttribute)} .data=${{name: field.fillingStrategy}}>
-                              <span slot="content">${i18nString(UIStrings.attr)}</span>
+                              <span>${i18nString(UIStrings.attr)}</span>
                             </devtools-adorner>` :
                         field.fillingStrategy === FillingStrategy.AutofillInferred ?
                             html`<devtools-adorner title=${i18nString(UIStrings.inferredByHeuristics)} .data=${{name: field.fillingStrategy}}>
-                              <span slot="content">${i18nString(UIStrings.heur)}</span>
+                              <span>${i18nString(UIStrings.heur)}</span>
                             </devtools-adorner>` :
                             Lit.nothing}
                   </td>

front_end/panels/network/NetworkLogView.test.ts

@@ -1011,7 +1011,7 @@ function getCountAdorner(filterBar: UI.FilterBar.FilterBar): HTMLElement|null {
 
 function getMoreFiltersActiveCount(filterBar: UI.FilterBar.FilterBar): string {
   const countAdorner = getCountAdorner(filterBar);
-  const count = countAdorner?.querySelector('[slot="content"]')?.textContent ?? '';
+  const count = countAdorner?.firstChild?.textContent ?? '';
   return count;
 }
 

front_end/ui/components/adorners/Adorner.test.ts

@@ -126,7 +126,7 @@ describe('Adorner', () => {
       name: 'foo',
     };
 
-    const slottedChildren = adorner.querySelectorAll('[slot="content"]');
+    const slottedChildren = adorner.children;
     assert.lengthOf(slottedChildren, 1, 'adorner light dom should only have one child with [slot="content"]');
     assert.strictEqual(
         slottedChildren[0].textContent, 'content 3', 'adorner content slot should have the most recent content');

front_end/ui/components/adorners/Adorner.ts

@@ -28,7 +28,6 @@ export class Adorner extends HTMLElement {
     this.name = data.name;
     this.#jslogContext = data.jslogContext;
     if (data.content) {
-      data.content.slot = 'content';
       this.#content?.remove();
       this.append(data.content);
       this.#content = data.content;
@@ -120,7 +119,7 @@ export class Adorner extends HTMLElement {
   }
 
   #render(): void {
-    render(html`<style>${adornerStyles.cssText}</style><slot name="content"></slot>`, this.#shadow, {host: this});
+    render(html`<style>${adornerStyles.cssText}</style><slot></slot>`, this.#shadow, {host: this});
   }
 }