chrome-devtools-frontend 1.0.1543472 → 1.0.1544076

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -37,9 +37,8 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
-import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as TextEditor from '../../../components/text_editor/text_editor.js';
-import {Directives, html, render} from '../../../lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 import type * as Components from '../utils/utils.js';
@@ -504,86 +503,82 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     return UI.Fragment.html`<span class="name">${name}</span>`;
   }
 
-  static valueElementForFunctionDescription(description?: string, includePreview?: boolean, defaultName?: string):
-      HTMLElement {
-    const valueElement = document.createElement('span');
-    valueElement.classList.add('object-value-function');
-    description = description || '';
-    const text = description.replace(/^function [gs]et /, 'function ')
-                     .replace(/^function [gs]et\(/, 'function\(')
-                     .replace(/^[gs]et /, '');
-    defaultName = defaultName || '';
-
-    // This set of best-effort regular expressions captures common function descriptions.
-    // Ideally, some parser would provide prefix, arguments, function body text separately.
-    const asyncMatch = text.match(/^(async\s+function)/);
-    const isGenerator = text.startsWith('function*');
-    const isGeneratorShorthand = text.startsWith('*');
-    const isBasic = !isGenerator && text.startsWith('function');
-    const isClass = text.startsWith('class ') || text.startsWith('class{');
-    const firstArrowIndex = text.indexOf('=>');
-    const isArrow = !asyncMatch && !isGenerator && !isBasic && !isClass && firstArrowIndex > 0;
-
-    let textAfterPrefix;
-    if (isClass) {
-      textAfterPrefix = text.substring('class'.length);
-      const classNameMatch = /^[^{\s]+/.exec(textAfterPrefix.trim());
-      let className: string = defaultName;
-      if (classNameMatch) {
-        className = classNameMatch[0].trim() || defaultName;
-      }
-      addElements('class', textAfterPrefix, className);
-    } else if (asyncMatch) {
-      textAfterPrefix = text.substring(asyncMatch[1].length);
-      addElements('async \u0192', textAfterPrefix, nameAndArguments(textAfterPrefix));
-    } else if (isGenerator) {
-      textAfterPrefix = text.substring('function*'.length);
-      addElements('\u0192*', textAfterPrefix, nameAndArguments(textAfterPrefix));
-    } else if (isGeneratorShorthand) {
-      textAfterPrefix = text.substring('*'.length);
-      addElements('\u0192*', textAfterPrefix, nameAndArguments(textAfterPrefix));
-    } else if (isBasic) {
-      textAfterPrefix = text.substring('function'.length);
-      addElements('\u0192', textAfterPrefix, nameAndArguments(textAfterPrefix));
-    } else if (isArrow) {
-      const maxArrowFunctionCharacterLength = 60;
-      let abbreviation: string = text;
-      if (defaultName) {
-        abbreviation = defaultName + '()';
-      } else if (text.length > maxArrowFunctionCharacterLength) {
-        abbreviation = text.substring(0, firstArrowIndex + 2) + ' {…}';
-      }
-      addElements('', text, abbreviation);
-    } else {
-      addElements('\u0192', text, nameAndArguments(text));
-    }
-    UI.Tooltip.Tooltip.install(valueElement, Platform.StringUtilities.trimEndWithMaxLength(description, 500));
-    return valueElement;
+  static valueElementForFunctionDescription(
+      description?: string, includePreview?: boolean, defaultName?: string, className?: string): LitTemplate {
+    const contents =
+        (description: string, defaultName: string): {prefix: string, abbreviation: string, body: string} => {
+          const text = description.replace(/^function [gs]et /, 'function ')
+                           .replace(/^function [gs]et\(/, 'function\(')
+                           .replace(/^[gs]et /, '');
+
+          // This set of best-effort regular expressions captures common function descriptions.
+          // Ideally, some parser would provide prefix, arguments, function body text separately.
+          const asyncMatch = text.match(/^(async\s+function)/);
+          const isGenerator = text.startsWith('function*');
+          const isGeneratorShorthand = text.startsWith('*');
+          const isBasic = !isGenerator && text.startsWith('function');
+          const isClass = text.startsWith('class ') || text.startsWith('class{');
+          const firstArrowIndex = text.indexOf('=>');
+          const isArrow = !asyncMatch && !isGenerator && !isBasic && !isClass && firstArrowIndex > 0;
+
+          if (isClass) {
+            const body = text.substring('class'.length);
+            const classNameMatch = /^[^{\s]+/.exec(body.trim());
+            let className: string = defaultName;
+            if (classNameMatch) {
+              className = classNameMatch[0].trim() || defaultName;
+            }
+            return {prefix: 'class', body, abbreviation: className};
+          }
+          if (asyncMatch) {
+            const body = text.substring(asyncMatch[1].length);
+            return {prefix: 'async \u0192', body, abbreviation: nameAndArguments(body)};
+          }
+          if (isGenerator) {
+            const body = text.substring('function*'.length);
+            return {prefix: '\u0192*', body, abbreviation: nameAndArguments(body)};
+          }
+          if (isGeneratorShorthand) {
+            const body = text.substring('*'.length);
+            return {prefix: '\u0192*', body, abbreviation: nameAndArguments(body)};
+          }
+          if (isBasic) {
+            const body = text.substring('function'.length);
+            return {prefix: '\u0192', body, abbreviation: nameAndArguments(body)};
+          }
+          if (isArrow) {
+            const maxArrowFunctionCharacterLength = 60;
+            let abbreviation: string = text;
+            if (defaultName) {
+              abbreviation = defaultName + '()';
+            } else if (text.length > maxArrowFunctionCharacterLength) {
+              abbreviation = text.substring(0, firstArrowIndex + 2) + ' {…}';
+            }
+            return {prefix: '', body: text, abbreviation};
+          }
+          return {prefix: '\u0192', body: text, abbreviation: nameAndArguments(text)};
+        };
+
+    const {prefix, body, abbreviation} = contents(description ?? '', defaultName ?? '');
+    const maxFunctionBodyLength = 200;
+    return html`<span
+      class="object-value-function ${className ?? ''}"
+      title=${Platform.StringUtilities.trimEndWithMaxLength(description ?? '', 500)}>${
+        prefix && html`<span class=object-value-function-prefix>${prefix} </span>`}${
+        includePreview ? Platform.StringUtilities.trimEndWithMaxLength(body.trim(), maxFunctionBodyLength) :
+                         abbreviation.replace(/\n/g, ' ')}</span>`;
 
     function nameAndArguments(contents: string): string {
       const startOfArgumentsIndex = contents.indexOf('(');
       const endOfArgumentsMatch = contents.match(/\)\s*{/);
       if (startOfArgumentsIndex !== -1 && endOfArgumentsMatch?.index !== undefined &&
           endOfArgumentsMatch.index > startOfArgumentsIndex) {
-        const name = contents.substring(0, startOfArgumentsIndex).trim() || defaultName;
+        const name = contents.substring(0, startOfArgumentsIndex).trim() || (defaultName ?? '');
         const args = contents.substring(startOfArgumentsIndex, endOfArgumentsMatch.index + 1);
         return name + args;
       }
       return defaultName + '()';
     }
-
-    function addElements(prefix: string, body: string, abbreviation: string): void {
-      const maxFunctionBodyLength = 200;
-      if (prefix.length) {
-        valueElement.createChild('span', 'object-value-function-prefix').textContent = prefix + ' ';
-      }
-      if (includePreview) {
-        UI.UIUtils.createTextChild(
-            valueElement, Platform.StringUtilities.trimEndWithMaxLength(body.trim(), maxFunctionBodyLength));
-      } else {
-        UI.UIUtils.createTextChild(valueElement, abbreviation.replace(/\n/g, ' '));
-      }
-    }
   }
 
   static createPropertyValueWithCustomSupport(
@@ -598,141 +593,100 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
         value, wasThrown, showPreview, linkifier, isSyntheticProperty, variableName);
   }
 
-  static appendMemoryIcon(element: Element, object: SDK.RemoteObject.RemoteObject, expression?: string): void {
-    if (!object.isLinearMemoryInspectable()) {
-      return;
-    }
-
-    const memoryIcon = new IconButton.Icon.Icon();
-    memoryIcon.name = 'memory';
-    memoryIcon.style.width = 'var(--sys-size-8)';
-    memoryIcon.style.height = '13px';
-    memoryIcon.addEventListener('click', event => {
-      event.consume();
-      void Common.Revealer.reveal(new SDK.RemoteObject.LinearMemoryInspectable(object, expression));
-    });
-    memoryIcon.setAttribute('jslog', `${VisualLogging.action('open-memory-inspector').track({click: true})}`);
-
-    const revealText = i18nString(UIStrings.openInMemoryInpector);
-    UI.Tooltip.Tooltip.install(memoryIcon, revealText);
-    UI.ARIAUtils.setLabel(memoryIcon, revealText);
-
-    // Directly set property on memory icon, so that the memory icon is also
+  static getMemoryIcon(object: SDK.RemoteObject.RemoteObject, expression?: string): LitTemplate {
+    // Directly set styles on memory icon, so that the memory icon is also
     // styled within the context of code mirror.
-    memoryIcon.style.setProperty('vertical-align', 'sub');
-    memoryIcon.style.setProperty('cursor', 'pointer');
+    // clang-format off
+    return !object.isLinearMemoryInspectable() ? nothing : html`<devtools-icon
+      name=memory
+      style="width: var(--sys-size-8); height: 13px; vertical-align: sub; cursor: pointer;"
+      @click=${(event: Event) => {
+        event.consume();
+        void Common.Revealer.reveal(new SDK.RemoteObject.LinearMemoryInspectable(object, expression));
+      }}
+      jslog=${VisualLogging.action('open-memory-inspector').track({click: true})}
+      title=${i18nString(UIStrings.openInMemoryInpector)}
+      aria-label=${i18nString(UIStrings.openInMemoryInpector)}></devtools-icon>`;
+    // clang-format on
+  }
 
-    element.appendChild(memoryIcon);
+  static appendMemoryIcon(element: Element, object: SDK.RemoteObject.RemoteObject, expression?: string): void {
+    const fragment = document.createDocumentFragment();
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(ObjectPropertiesSection.getMemoryIcon(object, expression), fragment);
+    element.appendChild(fragment);
   }
 
   static createPropertyValue(
       value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean,
       linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty = false, variableName?: string): HTMLElement {
-    let propertyValue: HTMLElement;
+    const propertyValue = document.createDocumentFragment();
     const type = value.type;
     const subtype = value.subtype;
     const description = value.description || '';
     const className = value.className;
-    if (type === 'object' && subtype === 'internal#location') {
-      const rawLocation = value.debuggerModel().createRawLocationByScriptId(
-          value.value.scriptId, value.value.lineNumber, value.value.columnNumber);
-      if (rawLocation && linkifier) {
-        return linkifier.linkifyRawLocation(rawLocation, Platform.DevToolsPath.EmptyUrlString);
+
+    const contents = (): LitTemplate => {
+      if (type === 'object' && subtype === 'internal#location') {
+        const rawLocation = value.debuggerModel().createRawLocationByScriptId(
+            value.value.scriptId, value.value.lineNumber, value.value.columnNumber);
+        if (rawLocation && linkifier) {
+          return html`${linkifier.linkifyRawLocation(rawLocation, Platform.DevToolsPath.EmptyUrlString, 'value')}`;
+        }
+        return html`<span class=value title=${description}>${'<' + i18nString(UIStrings.unknown) + '>'}</span>`;
       }
-      propertyValue = createUnknownInternalLocationElement();
-    } else if (type === 'string' && typeof description === 'string') {
-      propertyValue = createStringElement();
-    } else if (type === 'object' && subtype === 'trustedtype') {
-      propertyValue = createTrustedTypeElement();
-    } else if (type === 'function') {
-      propertyValue = ObjectPropertiesSection.valueElementForFunctionDescription(description);
-    } else if (type === 'object' && subtype === 'node' && description) {
-      propertyValue = createNodeElement();
-    } else {
-      const valueElement = document.createElement('span');
-      valueElement.classList.add('object-value-' + (subtype || type));
-      if (value.preview && showPreview) {
-        const previewFormatter = new RemoteObjectPreviewFormatter();
-        /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
-        render(previewFormatter.renderObjectPreview(value.preview), valueElement);
-        propertyValue = valueElement;
-        UI.Tooltip.Tooltip.install(propertyValue as HTMLElement, description || '');
-      } else if (description.length > maxRenderableStringLength) {
-        propertyValue = new ExpandableTextPropertyValue(valueElement, description, EXPANDABLE_MAX_LENGTH).element;
-      } else {
-        propertyValue = valueElement;
-        propertyValue.textContent = description;
-        UI.Tooltip.Tooltip.install(propertyValue as HTMLElement, description);
+      if (type === 'string' && typeof description === 'string') {
+        const text = JSON.stringify(description);
+        const tooLong = description.length > maxRenderableStringLength;
+        return html`<span class="value object-value-string" title=${ifDefined(tooLong ? undefined : description)}>${
+            tooLong ? new ExpandableTextPropertyValue(text, EXPANDABLE_MAX_LENGTH).element : text}</span>`;
       }
-      if (!isSyntheticProperty) {
-        this.appendMemoryIcon(valueElement, value, variableName);
+      if (type === 'object' && subtype === 'trustedtype') {
+        const text = `${className} '${description}'`;
+        const tooLong = text.length > maxRenderableStringLength;
+        return html`<span class="value object-value-trustedtype" title=${ifDefined(tooLong ? undefined : text)}>${
+            tooLong ? new ExpandableTextPropertyValue(text, EXPANDABLE_MAX_LENGTH).element :
+                      html`${className} <span class=object-value-string title=${description}>${
+                          JSON.stringify(description)}</span>`}</span>`;
       }
-    }
-
-    if (wasThrown) {
-      const wrapperElement = document.createElement('span');
-      wrapperElement.classList.add('error');
-      wrapperElement.classList.add('value');
-      wrapperElement.appendChild(uiI18n.getFormatLocalizedString(str_, UIStrings.exceptionS, {PH1: propertyValue}));
-      propertyValue = wrapperElement;
-    }
-    propertyValue.classList.add('value');
-    return propertyValue;
-
-    function createUnknownInternalLocationElement(): HTMLElement {
-      const valueElement = document.createElement('span');
-      valueElement.textContent = '<' + i18nString(UIStrings.unknown) + '>';
-      UI.Tooltip.Tooltip.install(valueElement, description || '');
-      return valueElement;
-    }
-
-    function createStringElement(): HTMLElement {
-      const valueElement = document.createElement('span');
-      valueElement.classList.add('object-value-string');
-      const text = JSON.stringify(description);
-      let propertyValue: HTMLElement;
-      if (description.length > maxRenderableStringLength) {
-        propertyValue = new ExpandableTextPropertyValue(valueElement, text, EXPANDABLE_MAX_LENGTH).element;
-      } else {
-        UI.UIUtils.createTextChild(valueElement, text);
-        propertyValue = valueElement;
-        UI.Tooltip.Tooltip.install(valueElement, description);
+      if (type === 'function') {
+        return ObjectPropertiesSection.valueElementForFunctionDescription(description, undefined, undefined, 'value');
       }
-      return propertyValue;
-    }
-
-    function createTrustedTypeElement(): HTMLElement {
-      const valueElement = document.createElement('span');
-      valueElement.classList.add('object-value-trustedtype');
-      const text = `${className} "${description}"`;
-      let propertyValue;
-      if (text.length > maxRenderableStringLength) {
-        propertyValue = new ExpandableTextPropertyValue(valueElement, text, EXPANDABLE_MAX_LENGTH).element;
-      } else {
-        const contentString = createStringElement();
-        UI.UIUtils.createTextChild(valueElement, `${className} `);
-        valueElement.appendChild(contentString);
-        propertyValue = valueElement;
-        UI.Tooltip.Tooltip.install(valueElement, text);
+      if (type === 'object' && subtype === 'node' && description) {
+        return html`<span class="value object-value-node"
+            @click=${(event: Event) => {
+          void Common.Revealer.reveal(value);
+          event.consume(true);
+        }}
+            @mousemove=${() => SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(value)}
+            @mouseleave=${() => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}
+          >${renderNodeTitle(description)}</span>`;
+      }
+      if (description.length > maxRenderableStringLength) {
+        return html`<span class="value object-value-${subtype || type}" title=${description}>${
+            new ExpandableTextPropertyValue(description, EXPANDABLE_MAX_LENGTH).element}</span>`;
       }
+      const hasPreview = value.preview && showPreview;
+      return html`<span class="value object-value-${subtype || type}" title=${description}>${
+          hasPreview ? new RemoteObjectPreviewFormatter().renderObjectPreview(value.preview) :
+                       description}${isSyntheticProperty ? nothing : this.getMemoryIcon(value, variableName)}</span>`;
+    };
 
-      return propertyValue;
+    if (wasThrown) {
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(
+          html`<span class="error value">${
+              uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.exceptionS, {PH1: contents()})}</span>`,
+          propertyValue);
+    } else {
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(contents(), propertyValue);
     }
-
-    function createNodeElement(): HTMLElement {
-      const valueElement = document.createElement('span');
-      valueElement.classList.add('object-value-node');
-      /* eslint-disable-next-line @devtools/no-lit-render-outside-of-view */
-      render(renderNodeTitle(description), valueElement);
-      valueElement.addEventListener('click', event => {
-        void Common.Revealer.reveal(value);
-        event.consume(true);
-      }, false);
-      valueElement.addEventListener(
-          'mousemove', () => SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(value), false);
-      valueElement.addEventListener('mouseleave', () => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(), false);
-      return valueElement;
+    const child = propertyValue.firstElementChild;
+    if (!(child instanceof HTMLElement)) {
+      throw new Error('Expected an HTML element');
     }
+    return child;
   }
 
   static formatObjectAsFunction(
@@ -754,8 +708,11 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       if (response?.functionName) {
         defaultName = response.functionName;
       }
-      const valueElement =
-          ObjectPropertiesSection.valueElementForFunctionDescription(func.description, includePreview, defaultName);
+      const valueElement = document.createDocumentFragment();
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(
+          ObjectPropertiesSection.valueElementForFunctionDescription(func.description, includePreview, defaultName),
+          valueElement);
       element.appendChild(valueElement);
     }
   }
@@ -942,7 +899,8 @@ export const TREE_ELEMENT_DEFAULT_VIEW: TreeElementView = (input, output, target
       input.onAutoComplete(e.detail.expression, e.detail.filter, e.detail.force);
     };
     // clang-format off
-      render(html`<span class=name-and-value>${input.nameElement}<span class='separator'>: </span><devtools-prompt
+    render(
+        html`<span class=name-and-value>${input.nameElement}<span class='separator'>: </span><devtools-prompt
              @commit=${(e: UI.TextPrompt.TextPromptElement.CommitEvent) => input.editingCommitted(e.detail)}
              @cancel=${() => input.editingEnded()}
              @beforeautocomplete=${onAutoComplete}
@@ -951,7 +909,8 @@ export const TREE_ELEMENT_DEFAULT_VIEW: TreeElementView = (input, output, target
              ?editing=${input.editing}>
                ${input.expanded && input.expandedValueElement || input.valueElement}
                <datalist id=${completionsId}>${repeat(input.completions, c => html`<option>${c}</option>`)}</datalist>
-             </devtools-prompt></span><span>`, target);
+             </devtools-prompt></span><span>`,
+        target);
     // clang-format on
   }
 };
@@ -966,7 +925,6 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   readOnly!: boolean;
   private prompt!: ObjectPropertyPrompt|undefined;
   private editableDiv!: HTMLElement;
-  propertyValue?: HTMLElement;
   expandedValueElement?: HTMLElement;
   #editing = false;
   readonly #view: TreeElementView;
@@ -1262,10 +1220,9 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.valueElement.classList.add('value');
     } else if (this.property.object) {
       const showPreview = this.property.name !== '[[Prototype]]';
-      this.propertyValue = ObjectPropertiesSection.createPropertyValueWithCustomSupport(
+      this.valueElement = ObjectPropertiesSection.createPropertyValueWithCustomSupport(
           this.property.object, this.property.property.wasThrown, showPreview, this.linkifier,
           this.property.property.synthetic, this.property.path /* variableName */);
-      this.valueElement = this.propertyValue;
     } else if (this.property.property.getter) {
       this.valueElement = document.createElement('span');
       const element = this.valueElement.createChild('span');
@@ -1788,10 +1745,10 @@ export class ExpandableTextPropertyValue {
   private readonly maxDisplayableTextLength: number;
   readonly #byteCount: number;
   #expanded = false;
-  #element: HTMLElement;
+  #element: DocumentFragment;
 
-  constructor(element: HTMLElement, text: string, maxLength: number) {
-    this.#element = element;
+  constructor(text: string, maxLength: number) {
+    this.#element = document.createDocumentFragment();
     this.text = text;
     this.maxLength = maxLength;
     this.maxDisplayableTextLength = 10000000;
@@ -1799,7 +1756,7 @@ export class ExpandableTextPropertyValue {
     this.#render();
   }
 
-  get element(): HTMLElement {
+  get element(): DocumentFragment {
     return this.#element;
   }
 

package/front_end/ui/legacy/inspectorCommon.css

@@ -57,10 +57,6 @@ code, kbd, samp, pre {
   ) !important; /* stylelint-disable-line declaration-no-important */
 
   white-space: pre-wrap;
-
-  &:not(input)::selection {
-    color: var(--sys-color-on-surface);
-  }
 }
 
 .source-code.breakpoint {

package/mcp/mcp.ts

@@ -9,6 +9,7 @@
  */
 export * as Common from '../front_end/core/common/common.js';
 export * as I18n from '../front_end/core/i18n/i18n.js';
+export type * as CDPConnection from '../front_end/core/protocol_client/CDPConnection.js';
 export {ConnectionTransport} from '../front_end/core/protocol_client/ConnectionTransport.js';
 export * as Foundation from '../front_end/foundation/foundation.js';
 export {

package/package.json

@@ -103,5 +103,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1543472"
+  "version": "1.0.1544076"
 }

package/front_end/ui/components/expandable_list/ExpandableList.docs.ts

@@ -1,30 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Lit from '../../lit/lit.js';
-
-import {ExpandableList} from './expandable_list.js';
-
-const {html} = Lit;
-
-export function render(container: HTMLElement): void {
-  const component = new ExpandableList.ExpandableList();
-
-  const rows = [];
-  rows.push(html`
-    <div>This is row 1. Click on the triangle icon to expand.</div>
-  `);
-
-  for (let rowNumber = 2; rowNumber < 11; rowNumber++) {
-    rows.push(html`
-      <div>This is row ${rowNumber}.</div>
-    `);
-  }
-
-  component.data = {
-    rows,
-  };
-
-  container.appendChild(component);
-}