[docs] Clean up component docs

Fix various things:
* wrong tooltip import
* BUILD.gn deps
* do not rely on #container for styles, but focus on the container
  element
* make render function sync

Bug: 414332459
Change-Id: I4098b51d9807694ee51a18df1081bcb005d98eec
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7146226
Auto-Submit: Kim-Anh Tran <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/ui/components/buttons/Button.docs.ts

@@ -4,10 +4,11 @@
 
 import {Button, FloatingButton} from './buttons.js';
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
+  const buttonDocs = container.createChild('div', 'button-docs');
   const style = document.createElement('style');
   style.textContent = `
-      #container > div {
+      .button-docs > div {
         width: 80%;
         padding: var(--sys-size-11);
         display: flex;
@@ -16,13 +17,13 @@ export async function render(container: HTMLElement) {
         gap: var(--sys-size-5);
       }
     `;
-  container.appendChild(style);
+  buttonDocs.appendChild(style);
 
   const appendSection = (headerText: string, sectionElement: HTMLElement) => {
     const header = document.createElement('header');
     header.textContent = headerText;
-    container.appendChild(header);
-    container.appendChild(sectionElement);
+    buttonDocs.appendChild(header);
+    buttonDocs.appendChild(sectionElement);
   };
 
   const buttonsSection = document.createElement('div');

front_end/ui/components/expandable_list/BUILD.gn

@@ -2,7 +2,6 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
-import("../../../../scripts/build/ninja/component_doc.gni")
 import("../../../../scripts/build/ninja/devtools_entrypoint.gni")
 import("../../../../scripts/build/ninja/devtools_module.gni")
 import("../../../../scripts/build/ninja/generate_css.gni")

front_end/ui/components/icon_button/BUILD.gn

@@ -70,5 +70,8 @@ devtools_ui_module("unittests") {
 
 component_doc("docs") {
   sources = [ "Icon.docs.ts" ]
-  deps = [ ":bundle" ]
+  deps = [
+    ":bundle",
+    "../../lit:bundle",
+  ]
 }

front_end/ui/components/snackbars/Snackbars.docs.ts

@@ -4,7 +4,7 @@
 
 import {Snackbar} from './snackbars.js';
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   const onActionClick = (): void => {
     // eslint-disable-next-line no-console
     console.log('Action button clicked!');

front_end/ui/components/spinners/BUILD.gn

@@ -31,5 +31,8 @@ devtools_entrypoint("bundle") {
 
 component_doc("docs") {
   sources = [ "Spinners.docs.ts" ]
-  deps = [ ":bundle" ]
+  deps = [
+    ":bundle",
+    "../../../ui/lit:bundle",
+  ]
 }

front_end/ui/components/spinners/Spinners.docs.ts

@@ -8,6 +8,6 @@ import * as Lit from '../../lit/lit.js';
 
 const {html} = Lit;
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   Lit.render(html`<devtools-spinner></devtools-spinner>`, container);
 }

front_end/ui/components/survey_link/SurveyLink.docs.ts

@@ -3,7 +3,8 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
-import {SurveyLink} from '../survey_link/survey_link.js';
+
+import {SurveyLink} from './survey_link.js';
 
 export function render(container: HTMLElement): void {
   const link = new SurveyLink.SurveyLink();

front_end/ui/components/switch/Switch.docs.ts

@@ -4,7 +4,7 @@
 
 import {Switch} from './switch.js';
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   function switchExample({checked, disabled}: {checked: boolean, disabled: boolean}): HTMLElement {
     const example = document.createElement('div');
     example.style.marginTop = '20px';

front_end/ui/components/tooltips/BUILD.gn

@@ -47,5 +47,8 @@ devtools_ui_module("unittests") {
 
 component_doc("docs") {
   sources = [ "Tooltip.docs.ts" ]
-  deps = [ ":bundle" ]
+  deps = [
+    ":bundle",
+    "../../lit:bundle",
+  ]
 }

front_end/ui/components/tooltips/Tooltip.docs.ts

@@ -4,11 +4,11 @@
 
 import * as Lit from '../../lit/lit.js';
 
-import {Tooltip} from './Tooltip.js';
+import {Tooltip} from './tooltips.js';
 
 const {html} = Lit;
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   Lit.render(
       html`
     <div style="position: relative; z-index: 0;">
@@ -44,7 +44,7 @@ export async function render(container: HTMLElement) {
       container);
 
   const anchor = container.querySelector('.anchor') as HTMLElement;
-  const programmaticTooltip = new Tooltip({id: 'programatic', variant: 'rich', anchor});
+  const programmaticTooltip = new Tooltip.Tooltip({id: 'programatic', variant: 'rich', anchor});
   programmaticTooltip.append('Text content');
   anchor.insertAdjacentElement('afterend', programmaticTooltip);