chrome-devtools-frontend 1.0.1642845 → 1.0.1642899

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -28,8 +28,13 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 /* eslint no-return-assign: "off" */
+import '../../ui/components/buttons/buttons.js';
+
 import * as i18n from '../../core/i18n/i18n.js';
+import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as Geometry from '../../models/geometry/geometry.js';
+// eslint-disable-next-line @devtools/es-modules-import
+import dataGridAiButtonStyles from '../../ui/legacy/components/data_grid/dataGridAiButton.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives as LitDirectives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -37,11 +42,13 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as ApplicationComponents from './components/components.js';
 import {StorageItemsToolbar} from './StorageItemsToolbar.js';
 
+const STORAGE_FLOATING_BUTTON_ACTION_ID = 'ai-assistance.storage-floating-button';
+
 const {ARIAUtils} = UI;
 const {EmptyWidget} = UI.EmptyWidget;
 const {VBox, widget} = UI.Widget;
 const {Size} = Geometry;
-const {repeat} = LitDirectives;
+const {repeat, ifDefined} = LitDirectives;
 
 type Widget = UI.Widget.Widget;
 type VBox = UI.Widget.VBox;
@@ -87,6 +94,9 @@ export interface ViewInput {
   onDeleteAll: () => void;
   jslog?: string;
   classes?: string[];
+  aiButtonTitle?: string;
+  showAiButton?: boolean;
+  onAiButtonClick?: (item: {key: string, value: string}, event: Event) => void;
 }
 
 interface ViewOutput {
@@ -150,6 +160,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                   @deselect=${() => input.onSelect(null)}
                 >
                   <table>
+                    ${input.showAiButton ? html`<style>${dataGridAiButtonStyles}</style>`: nothing}
                     <tr>
                       <th id="key" sortable ?editable=${input.editable}>
                         ${i18nString(UIStrings.key)}
@@ -165,7 +176,15 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                             input.onEdit(item.key, item.value, e.detail.columnId, e.detail.valueBeforeEditing, e.detail.newText)}
                           @delete=${() => input.onDelete(item.key)}
                           selected=${(input.selectedKey === item.key) || nothing}>
-                        <td>${item.key}</td>
+                        <td>${input.showAiButton ? html`
+                            <span class="ai-button-container">
+                              <devtools-floating-button
+                                icon-name=${AIAssistance.AiUtils.getIconName()}
+                                title=${ifDefined(input.aiButtonTitle)}
+                                @click=${(e: Event) => input.onAiButtonClick?.(item, e)}
+                              ></devtools-floating-button>
+                            </span>
+                          ` : nothing}${item.key}</td>
                         <td>${item.value.substr(0, MAX_VALUE_LENGTH)}</td>
                       </tr>`)}
                       <tr placeholder></tr>
@@ -217,15 +236,24 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
       preview: this.#preview,
       jslog: this.#jslog,
       classes: this.#classes,
+      showAiButton: this.isAiButtonEnabled(),
+      aiButtonTitle: this.isAiButtonEnabled() &&
+              UI.ActionRegistry.ActionRegistry.instance().hasAction(STORAGE_FLOATING_BUTTON_ACTION_ID) ?
+          UI.ActionRegistry.ActionRegistry.instance().getAction(STORAGE_FLOATING_BUTTON_ACTION_ID).title() :
+          undefined,
       onSelect: (item: {key: string, value: string}|null) => {
         this.#toolbar?.setCanDeleteSelected(Boolean(item));
-        if (!item) {
-          void this.#previewEntry(null);
-        } else {
-          void this.#previewEntry(item);
-        }
+        void this.#previewEntry(item);
         this.selectedItemChanged(item);
       },
+      onAiButtonClick: (item: {key: string, value: string}, event: Event) => {
+        event.stopPropagation();
+        viewInput.onSelect(item);
+        const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+        if (actionRegistry.hasAction(STORAGE_FLOATING_BUTTON_ACTION_ID)) {
+          void actionRegistry.getAction(STORAGE_FLOATING_BUTTON_ACTION_ID).execute();
+        }
+      },
 
       onSort: (ascending: boolean) => {
         this.#isSortOrderAscending = ascending;
@@ -252,6 +280,10 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     this.#view(viewInput, viewOutput, this.contentElement);
   }
 
+  protected isAiButtonEnabled(): boolean {
+    return false;
+  }
+
   protected get toolbar(): StorageItemsToolbar|undefined {
     return this.#toolbar;
   }

package/front_end/panels/common/ExtensionServer.ts

@@ -27,7 +27,13 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import {ExtensionButton, ExtensionPanel, ExtensionSidebarPane} from './ExtensionPanel.js';
 
 const extensionOrigins = new WeakMap<MessagePort, Platform.DevToolsPath.UrlString>();
-const kPermittedSchemes = ['http:', 'https:', 'file:', 'data:', 'chrome-extension:', 'about:'];
+const kForbiddenSchemes = [
+  'chrome:',
+  'chrome-untrusted:',
+  'chrome-error:',
+  'chrome-search:',
+  'devtools:',
+];
 
 declare global {
   interface Window {
@@ -78,7 +84,6 @@ export class HostsPolicy {
 }
 
 class RegisteredExtension {
-  openResourceScheme: null|string = null;
   constructor(readonly name: string, readonly hostsPolicy: HostsPolicy, readonly allowFileAccess: boolean) {
   }
 
@@ -91,8 +96,11 @@ class RegisteredExtension {
       return false;
     }
 
-    if (this.openResourceScheme && inspectedURL.startsWith(this.openResourceScheme)) {
-      return true;
+    let parsedURL;
+    try {
+      parsedURL = new URL(inspectedURL);
+    } catch {
+      return false;
     }
 
     if (!ExtensionServer.canInspectURL(inspectedURL)) {
@@ -104,12 +112,6 @@ class RegisteredExtension {
     }
 
     if (!this.allowFileAccess) {
-      let parsedURL;
-      try {
-        parsedURL = new URL(inspectedURL);
-      } catch {
-        return false;
-      }
       return parsedURL.protocol !== 'file:';
     }
 
@@ -863,18 +865,27 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!extension) {
       throw new Error('Received a message from an unregistered extension');
     }
-    if (message.urlScheme) {
-      extension.openResourceScheme = message.urlScheme;
+    let validScheme = message.urlScheme;
+    if (validScheme) {
+      try {
+        const urlToParse = validScheme.replace(/:?(\/\/)?$/, '') + '://test';
+        validScheme = new URL(urlToParse).protocol;
+      } catch {
+        return this.status.E_BADARG('urlScheme', 'Invalid scheme');
+      }
+      if (kForbiddenSchemes.includes(validScheme) || validScheme === 'file:') {
+        return this.status.E_BADARG('urlScheme', 'Scheme is forbidden');
+      }
     }
     const extensionOrigin = this.getExtensionOrigin(port);
     const {name} = extension;
     const registration = {
       title: name,
       origin: extensionOrigin,
-      scheme: message.urlScheme,
+      scheme: validScheme,
       handler: this.handleOpenURL.bind(this, port),
       shouldHandleOpenResource: (url: Platform.DevToolsPath.UrlString, schemes: Set<string>) =>
-          Components.Linkifier.Linkifier.shouldHandleOpenResource(extension.openResourceScheme, url, schemes),
+          Components.Linkifier.Linkifier.shouldHandleOpenResource(validScheme || null, url, schemes),
     };
     if (message.handlerPresent) {
       Components.Linkifier.Linkifier.registerLinkHandler(registration);
@@ -1645,7 +1656,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return false;
     }
 
-    if (!kPermittedSchemes.includes(parsedURL.protocol)) {
+    if (kForbiddenSchemes.includes(parsedURL.protocol)) {
       return false;
     }
 

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -276,7 +276,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     return null;
   }
 
-  jumpToFunctionDefinition(_functionName: string): void {
+  jumpToFunctionDefinition(_functionName: string, _treeScopeDistance: number): void {
   }
 
   continueEditingElement(_sectionIndex: number, _propertyIndex: number): void {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -379,6 +379,14 @@ export class StylePropertiesSection {
     return this.sectionIdx;
   }
 
+  treeScopeDistance(): number {
+    const treeScope = this.styleInternal.parentRule?.treeScope;
+    if (!treeScope) {
+      return -1;
+    }
+    return SDK.CSSMatchedStyles.distanceToTreeScope(this.matchedStyles.node(), treeScope);
+  }
+
   static createRuleOriginNode(
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, linkifier: Components.Linkifier.Linkifier,
       rule: SDK.CSSRule.CSSRule|null): LitTemplate {

package/front_end/panels/elements/StylePropertyHighlighter.ts

@@ -51,9 +51,11 @@ export class StylePropertyHighlighter {
     PanelUtils.highlightElement(block.titleElement() as HTMLElement);
   }
 
-  findAndHighlightSection(sectionName: string, blockName: string): void {
+  findAndHighlightSection(sectionName: string, blockName: string, treeScopeDistance = -1): void {
     const block = this.styleSidebarPane.getSectionBlockByName(blockName);
-    const section = block?.sections.find(section => section.headerText() === sectionName);
+    const section = block?.sections.find(
+        section => section.headerText() === sectionName &&
+            (treeScopeDistance === -1 || section.treeScopeDistance() === treeScopeDistance));
     if (!section || !block) {
       return;
     }

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2661,10 +2661,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     return container;
   }
 
-  #getLinkableFunction(functionName: string, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
-      InlineEditor.LinkSwatch.LinkSwatch {
+  #getLinkableFunction(
+      functionName: string, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      property: SDK.CSSProperty.CSSProperty): InlineEditor.LinkSwatch.LinkSwatch {
     const swatch = new InlineEditor.LinkSwatch.LinkSwatch();
-    const registeredFunction = matchedStyles.getRegisteredFunction(functionName);
+    const {registeredFunction, treeScopeDistance} = matchedStyles.getRegisteredFunction(functionName, property);
     const isDefined = Boolean(registeredFunction);
     swatch.data = {
       jslogContext: 'css-function',
@@ -2675,7 +2676,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         if (!registeredFunction) {
           return;
         }
-        this.#stylesContainer.jumpToFunctionDefinition(registeredFunction);
+        this.#stylesContainer.jumpToFunctionDefinition(registeredFunction, treeScopeDistance);
       },
     };
     return swatch;
@@ -2696,7 +2697,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const tooltipId = this.getTooltipId(`${functionName}-trace`);
     // clang-format off
     return html`
-        <span tabIndex=-1 class=tracing-anchor aria-details=${tooltipId}>${functionName.startsWith('--') ? this.#getLinkableFunction(functionName, matchedStyles) : functionName}</span>
+        <span tabIndex=-1 class=tracing-anchor aria-details=${tooltipId}>${functionName.startsWith('--') ? this.#getLinkableFunction(functionName, matchedStyles, context.property) : functionName}</span>
         <devtools-tooltip
             id=${tooltipId}
             use-hotkey

package/front_end/panels/elements/StylesContainer.ts

@@ -37,7 +37,7 @@ export interface StylesContainer {
       computedValue: string|null): ElementsComponents.CSSVariableValueView.CSSVariableValueView;
   getVariableParserError(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, variableName: string):
       ElementsComponents.CSSVariableValueView.CSSVariableParserError|null;
-  jumpToFunctionDefinition(functionName: string): void;
+  jumpToFunctionDefinition(functionName: string, treeScopeDistance: number): void;
   continueEditingElement(sectionIndex: number, propertyIndex: number): void;
   revealProperty(cssProperty: SDK.CSSProperty.CSSProperty): void;
   resetFocus(): void;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -344,16 +344,16 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  jumpToSection(sectionName: string, blockName: string): void {
-    this.decorator.findAndHighlightSection(sectionName, blockName);
+  jumpToSection(sectionName: string, blockName: string, treeScopeDistance?: number): void {
+    this.decorator.findAndHighlightSection(sectionName, blockName, treeScopeDistance);
   }
 
   jumpToSectionBlock(section: string): void {
     this.decorator.findAndHighlightSectionBlock(section);
   }
 
-  jumpToFunctionDefinition(functionName: string): void {
-    this.jumpToSection(functionName, FUNCTION_SECTION_NAME);
+  jumpToFunctionDefinition(functionName: string, treeScopeDistance: number): void {
+    this.jumpToSection(functionName, FUNCTION_SECTION_NAME, treeScopeDistance);
   }
 
   jumpToFontPaletteDefinition(paletteName: string): void {

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -11,9 +11,13 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import paintProfilerStyles from './paintProfiler.css.js';
 
+const {html, render, nothing} = Lit;
+const {repeat} = Lit.Directives;
+
 const UIStrings = {
   /**
    * @description Text to indicate the progress of a profile
@@ -397,161 +401,131 @@ export interface EventTypes {
   [Events.WINDOW_CHANGED]: void;
 }
 
-export class PaintProfilerCommandLogView extends UI.Widget.VBox {
-  private readonly treeOutline: UI.TreeOutline.TreeOutlineInShadow;
-  private log: SDK.PaintProfiler.PaintProfilerLogItem[];
-  private readonly treeItemCache: Map<SDK.PaintProfiler.PaintProfilerLogItem, LogTreeElement>;
-  private selectionWindow?: {left: number, right: number}|null;
-  constructor() {
-    super();
-    this.setMinimumSize(100, 25);
-    this.element.classList.add('overflow-auto');
-
-    this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    UI.ARIAUtils.setLabel(this.treeOutline.contentElement, i18nString(UIStrings.commandLog));
-    this.element.appendChild(this.treeOutline.element);
-    this.setDefaultFocusedElement(this.treeOutline.contentElement);
-
-    this.log = [];
-    this.treeItemCache = new Map();
-  }
-
-  setCommandLog(log: SDK.PaintProfiler.PaintProfilerLogItem[]): void {
-    this.log = log;
+export interface CommandLogViewInput {
+  visibleLogItems: SDK.PaintProfiler.PaintProfilerLogItem[];
+}
 
-    this.updateWindow({left: 0, right: this.log.length});
+function paramToString(param: SDK.PaintProfiler.RawPaintProfilerLogItemParamValue, name: string): string {
+  if (typeof param !== 'object') {
+    return typeof param === 'string' && param.length > 100 ? name : JSON.stringify(param);
   }
-
-  private appendLogItem(logItem: SDK.PaintProfiler.PaintProfilerLogItem): void {
-    let treeElement = this.treeItemCache.get(logItem);
-    if (!treeElement) {
-      treeElement = new LogTreeElement(logItem);
-      this.treeItemCache.set(logItem, treeElement);
-    } else if (treeElement.parent) {
-      return;
+  let str = '';
+  let keyCount = 0;
+  for (const key in param) {
+    const paramKey = param[key];
+    if (++keyCount > 4 || typeof paramKey === 'object' || (typeof paramKey === 'string' && paramKey.length > 100)) {
+      return name;
+    }
+    if (str) {
+      str += ', ';
     }
-    this.treeOutline.appendChild(treeElement);
+    str += paramKey;
   }
+  return str;
+}
 
-  updateWindow(selectionWindow: {left: number, right: number}|null): void {
-    this.selectionWindow = selectionWindow;
-    this.requestUpdate();
+function paramsToString(params: SDK.PaintProfiler.RawPaintProfilerLogItemParams|null): string {
+  let str = '';
+  for (const key in params) {
+    if (str) {
+      str += ', ';
+    }
+    str += paramToString(params[key], key);
   }
+  return str;
+}
 
-  override performUpdate(): Promise<void> {
-    if (!this.selectionWindow || !this.log.length) {
-      this.treeOutline.removeChildren();
-      return Promise.resolve();
-    }
-    const root = this.treeOutline.rootElement();
-    for (;;) {
-      const child = root.firstChild() as LogTreeElement;
-      if (!child || child.logItem.commandIndex >= this.selectionWindow.left) {
-        break;
+function renderProperty(name: string, value: SDK.PaintProfiler.RawPaintProfilerLogItemParamValue): Lit.LitTemplate {
+  const isObject = value !== null && typeof value === 'object';
+
+  // clang-format off
+  return html`
+    <li role="treeitem">
+      <span>${name}: </span>${
+        isObject ? html`
+          <ul role="group">
+            ${Object.entries(value).map(([key, val]) => renderProperty(key, val))}
+          </ul>` : html`
+          <span>${JSON.stringify(value)}</span>`
       }
-      root.removeChildAtIndex(0);
-    }
-    for (;;) {
-      const child = root.lastChild() as LogTreeElement;
-      if (!child || child.logItem.commandIndex < this.selectionWindow.right) {
-        break;
-      }
-      root.removeChildAtIndex(root.children().length - 1);
-    }
-    for (let i = this.selectionWindow.left, right = this.selectionWindow.right; i < right; ++i) {
-      this.appendLogItem(this.log[i]);
-    }
-    return Promise.resolve();
-  }
+    </li>
+  `;
+  // clang-format on
 }
 
-export class LogTreeElement extends UI.TreeOutline.TreeElement {
-  readonly logItem: SDK.PaintProfiler.PaintProfilerLogItem;
+function renderLogItem(logItem: SDK.PaintProfiler.PaintProfilerLogItem): Lit.LitTemplate {
+  const hasParams = Boolean(logItem.params && Object.keys(logItem.params).length > 0);
+  const titleText = logItem.method + '(' + paramsToString(logItem.params) + ')';
+
+  // clang-format off
+  return html`
+    <li role="treeitem">
+      ${titleText}
+      ${hasParams ? html`
+        <ul role="group">
+          ${Object.entries(logItem.params || {}).map(([key, val]) => renderProperty(key, val))}
+        </ul>` : nothing}
+    </li>
+  `;
+  // clang-format on
+}
 
-  constructor(logItem: SDK.PaintProfiler.PaintProfilerLogItem) {
-    super('', Boolean(logItem.params));
-    this.logItem = logItem;
-  }
+// clang-format off
+export const COMMAND_LOG_DEFAULT_VIEW = (input: CommandLogViewInput, _output: undefined, target: HTMLElement): void => {
+  render(html`
+    <div class="overflow-auto flex-auto vbox">
+      <devtools-tree
+          autofocus
+          aria-label=${i18nString(UIStrings.commandLog)}
+          .template=${html`
+        <ul role="tree">
+          ${repeat(input.visibleLogItems,
+               item => item.commandIndex,
+               item => renderLogItem(item))}
+        </ul>`}>
+      </devtools-tree>
+    </div>`,
+    target);
+};
+// clang-format on
+
+type CommandLogView = typeof COMMAND_LOG_DEFAULT_VIEW;
 
-  override onattach(): void {
-    this.update();
-  }
+export class PaintProfilerCommandLogView extends UI.Widget.VBox {
+  private log: SDK.PaintProfiler.PaintProfilerLogItem[];
+  private selectionWindow?: {left: number, right: number}|null;
+  readonly #view: CommandLogView;
 
-  override async onpopulate(): Promise<void> {
-    for (const param in this.logItem.params) {
-      LogPropertyTreeElement.appendLogPropertyItem(this, param, this.logItem.params[param]);
-    }
-  }
+  constructor(element?: HTMLElement, view: CommandLogView = COMMAND_LOG_DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+    this.setMinimumSize(100, 25);
 
-  private paramToString(param: SDK.PaintProfiler.RawPaintProfilerLogItemParamValue, name: string): string {
-    if (typeof param !== 'object') {
-      return typeof param === 'string' && param.length > 100 ? name : JSON.stringify(param);
-    }
-    let str = '';
-    let keyCount = 0;
-    for (const key in param) {
-      const paramKey = param[key];
-      if (++keyCount > 4 || paramKey === 'object' || (paramKey === 'string' && paramKey.length > 100)) {
-        return name;
-      }
-      if (str) {
-        str += ', ';
-      }
-      str += paramKey;
-    }
-    return str;
+    this.log = [];
   }
 
-  private paramsToString(params: SDK.PaintProfiler.RawPaintProfilerLogItemParams|null): string {
-    let str = '';
-    for (const key in params) {
-      if (str) {
-        str += ', ';
-      }
-      str += this.paramToString(params[key], key);
-    }
-    return str;
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
   }
 
-  private update(): void {
-    const title = document.createDocumentFragment();
-    UI.UIUtils.createTextChild(title, this.logItem.method + '(' + this.paramsToString(this.logItem.params) + ')');
-    this.title = title;
+  setCommandLog(log: SDK.PaintProfiler.PaintProfilerLogItem[]): void {
+    this.log = log;
+    this.updateWindow({left: 0, right: this.log.length});
   }
-}
-
-export class LogPropertyTreeElement extends UI.TreeOutline.TreeElement {
-  private property: {name: string, value: SDK.PaintProfiler.RawPaintProfilerLogItemParamValue};
 
-  constructor(property: {name: string, value: SDK.PaintProfiler.RawPaintProfilerLogItemParamValue}) {
-    super();
-    this.property = property;
+  updateWindow(selectionWindow: {left: number, right: number}|null): void {
+    this.selectionWindow = selectionWindow;
+    this.requestUpdate();
   }
 
-  static appendLogPropertyItem(
-      element: UI.TreeOutline.TreeElement, name: string,
-      value: SDK.PaintProfiler.RawPaintProfilerLogItemParamValue): void {
-    const treeElement = new LogPropertyTreeElement({name, value});
-    element.appendChild(treeElement);
-    if (value && typeof value === 'object') {
-      for (const property in value) {
-        LogPropertyTreeElement.appendLogPropertyItem(treeElement, property, value[property]);
-      }
-    }
-  }
+  override performUpdate(): Promise<void> {
+    const visibleLogItems = this.selectionWindow && this.log.length ?
+        this.log.slice(this.selectionWindow.left, this.selectionWindow.right) :
+        [];
 
-  override onattach(): void {
-    const title = document.createDocumentFragment();
-    const nameElement = title.createChild('span', 'name');
-    nameElement.textContent = this.property.name;
-    const separatorElement = title.createChild('span', 'separator');
-    separatorElement.textContent = ': ';
-    if (this.property.value === null || typeof this.property.value !== 'object') {
-      const valueElement = title.createChild('span', 'value');
-      valueElement.textContent = JSON.stringify(this.property.value);
-      valueElement.classList.add('cm-js-' + (this.property.value === null ? 'null' : typeof this.property.value));
-    }
-    this.title = title;
+    this.#view({visibleLogItems}, undefined, this.contentElement);
+    return Promise.resolve();
   }
 }
 

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -374,11 +374,12 @@ export class LighthousePanel extends UI.Panel.Panel {
   }
 
   private loadedFromFile(report: string): void {
-    const data = JSON.parse(report);
-    if (!data['lighthouseVersion']) {
+    const data = JSON.parse(report) as LighthouseModel.ReporterTypes.ReportJSON;
+    if (!data.lighthouseVersion) {
       return;
     }
-    this.buildReportUI(data as LighthouseModel.ReporterTypes.ReportJSON);
+    data.isImported = true;
+    this.buildReportUI(data);
   }
 
   override elementsToRestoreScrollPositionsFor(): Element[] {

package/front_end/panels/network/NetworkLogView.ts

@@ -54,6 +54,8 @@ import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
+// eslint-disable-next-line @devtools/es-modules-import
+import dataGridAiButtonStyles from '../../ui/legacy/components/data_grid/dataGridAiButton.css.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -560,6 +562,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       networkLogLargeRowsSetting: Common.Settings.Setting<boolean>) {
     super();
     this.registerRequiredCSS(networkLogViewStyles);
+    this.registerRequiredCSS(dataGridAiButtonStyles);
     this.setMinimumSize(50, 64);
 
     this.element.id = 'network-container';

package/front_end/panels/network/networkLogView.css

@@ -268,21 +268,6 @@ td.time-column {
   vertical-align: sub;
 }
 
-.data-grid-data-grid-node .ai-button-container {
-  display: none;
-  float: right;
-
-  devtools-floating-button {
-    position: absolute;
-    z-index: 999;
-    margin-left: -17px;
-  }
-}
-
-.data-grid-data-grid-node:hover .ai-button-container {
-  display: inline-flex;
-}
-
 .image-network-icon-preview {
   inset: 0;
   margin: auto;