chrome-devtools-frontend 1.0.1608868 → 1.0.1609381

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -482,7 +482,6 @@ function renderStepCode(step: Step): Lit.LitTemplate {
       <devtools-code-block
         .code=${step.code.trim()}
         .codeLang=${'js'}
-        .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
         .displayNotice=${!Boolean(step.output)}
         .header=${codeHeadingText}
         .showCopyButton=${true}
@@ -493,7 +492,6 @@ function renderStepCode(step: Step): Lit.LitTemplate {
     <devtools-code-block
       .code=${step.output}
       .codeLang=${'js'}
-      .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
       .displayNotice=${true}
       .header=${lockedString(UIStringsNotTranslate.dataReturned)}
       .showCopyButton=${false}
@@ -526,7 +524,6 @@ function renderStepDetails({
       <devtools-code-block
         .code=${contextDetail.text}
         .codeLang=${contextDetail.codeLang || ''}
-        .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
         .displayNotice=${false}
         .header=${contextDetail.title}
         .showCopyButton=${true}
@@ -568,9 +565,14 @@ function renderWalkthroughSidebarButton(
   const variant = hasOneStepWithWidget && !input.isLoading ? Buttons.Button.Variant.TONAL : Buttons.Button.Variant.TEXT;
   const icon = AiAssistanceModel.AiUtils.getIconName();
 
+  const toggleContainerClasses = Lit.Directives.classMap({
+    'walkthrough-toggle-container': true,
+    // We only apply the widget styling when loading is complete
+    'has-widgets': hasOneStepWithWidget && !input.isLoading,
+  });
   // clang-format off
   return html`
-    <div class="walkthrough-toggle-container ${hasOneStepWithWidget ? 'has-widgets' : ''}">
+    <div class=${toggleContainerClasses}>
       ${input.isLoading ?
         html`<devtools-spinner></devtools-spinner>` :
         html`<devtools-icon name=${icon}></devtools-icon>`}
@@ -589,9 +591,7 @@ function renderWalkthroughSidebarButton(
             // the walkthrough open with an alternative message.
             walkthrough.onOpen(message as ModelChatMessage);
           }
-        }}
->
-        ${title}<devtools-icon class="chevron" .name=${isExpanded ? 'cross' : 'chevron-right'}></devtools-icon>
+        }}>${title}<devtools-icon class="chevron" .name=${isExpanded ? 'cross' : 'chevron-right'}></devtools-icon>
       </devtools-button>
     </div>
   `;
@@ -761,6 +761,15 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
   }
   const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(domNodeForId, widgetData.data.computedStyles);
 
+  let filterText: RegExp|null = null;
+  try {
+    filterText = new RegExp(widgetData.data.properties.join('|'), 'i');
+  } catch {
+    // If the AI provides an invalid regex (e.g. "*"), we don't want to crash.
+    // We can just skip the widget in this case.
+    return null;
+  }
+
   // clang-format off
   const renderedWidget = html`<devtools-widget
       class="computed-styles-widget" ${widget(Elements.ComputedStyleWidget.ComputedStyleWidget, {
@@ -769,7 +778,7 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
         // This disables showing the nested traces and detailed information in the widget.
         propertyTraces: null,
         allowUserControl: false,
-        filterText: new RegExp(widgetData.data.properties.join('|'), 'i'),
+        filterText,
         enableNarrowViewResizing: false,
       })}></devtools-widget>`;
   // clang-format on
@@ -777,11 +786,19 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
   return {
     renderedWidget,
     revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId),
-    title: html`<devtools-widget
-      ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {
-      node: domNodeForId,
-    })}
-    ></devtools-widget>`,
+    // clang-format off
+    title: html`
+      <span class="computed-style-title-wrapper">
+        <span class="computed-style-title-prefix">Computed styles</span>
+        <span class="style-class-wrapper">
+          (<devtools-widget
+            ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {
+            node: domNodeForId,
+          })}
+          ></devtools-widget>)
+        </span>
+      </span>`,
+    // clang-format on
   };
 }
 
@@ -804,12 +821,21 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
     return null;
   }
 
+  let filter: RegExp|null = null;
+  try {
+    filter = widgetData.data.selector ? new RegExp(widgetData.data.selector) : null;
+  } catch {
+    // If the AI provides an invalid regex (e.g. "*"), we don't want to crash.
+    // We can just skip the widget in this case.
+    return null;
+  }
+
   // clang-format off
   const renderedWidget = html`<devtools-widget
       class="styling-preview-widget"
       ${widget(Elements.StandaloneStylesContainer.StandaloneStylesContainer, {
       domNode: domNodeForId,
-      filter: widgetData.data.selector ? new RegExp(widgetData.data.selector) : null,
+      filter,
     })}>
   </devtools-widget>`;
   // clang-format on
@@ -1519,7 +1545,7 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
   eventsArray.sort((a, b) => a.ts - b.ts);
 
   const thirdPartyTree = new Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget();
-  const mapper = new Trace.EntityMapper.EntityMapper(parsedTrace);
+  const mapper = Trace.EntityMapper.EntityMapper.getOrCreate(parsedTrace);
   thirdPartyTree.model = {selectedEvents: eventsArray, parsedTrace, entityMapper: mapper};
   thirdPartyTree.activeSelection = Timeline.TimelineSelection.selectionFromRangeMicroSeconds(bounds.min, bounds.max);
   thirdPartyTree.refreshTree(true);
@@ -1542,6 +1568,9 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
                 entityMapper: thirdPartyTree.entityMapper(),
               },
               activeSelection: { bounds },
+              onBottomUpButtonClicked: (node: Trace.Extras.TraceTree.Node|null) => {
+                void Common.Revealer.reveal(new TimelineUtils.Helpers.RevealableBottomUpProfile(bounds, node ?? undefined));
+              },
             })}`,
         } as TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryViewData,
       })}

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -456,6 +456,19 @@
       white-space: nowrap; /* stop the titles going onto multiple lines */
     }
 
+    /* This widget's title is some text + then a DOM node link, so it
+     * needs some extra styling */
+    .computed-style-title-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--sys-size-3);
+    }
+
+    .computed-style-title-prefix {
+      flex-shrink: 0;
+    }
+
     .widget-reveal-container {
       padding: 0;
       background: none;

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1031,6 +1031,14 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     }
   }
 
+  showStorageBucket(bucketInfo: Protocol.Storage.StorageBucketInfo): void {
+    const bucketsModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(
+        SDK.StorageBucketsModel.StorageBucketsModel);
+    if (bucketsModel) {
+      this.storageBucketsTreeElement?.getBucketTreeElement(bucketsModel, bucketInfo)?.revealAndSelect(true);
+    }
+  }
+
   private onmousemove(event: MouseEvent): void {
     const nodeUnderMouse = (event.target as Node);
     if (!nodeUnderMouse) {

package/front_end/panels/application/IndexedDBViews.ts

@@ -147,7 +147,7 @@ export class IDBDatabaseView extends ApplicationComponents.StorageMetadataView.S
     super();
 
     this.model = model;
-    this.setShowOnlyBucket(false);
+    this.setShowOnlyBucket(true);
     if (database) {
       this.update(database);
     }

package/front_end/panels/application/ResourcesPanel.ts

@@ -12,6 +12,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ApplicationPanelSidebar, StorageCategoryView} from './ApplicationPanelSidebar.js';
+import type {StorageMetadataView} from './components/components.js';
 import {CookieItemsView} from './CookieItemsView.js';
 import type {DeviceBoundSessionsModel} from './DeviceBoundSessionsModel.js';
 import {DeviceBoundSessionsView} from './DeviceBoundSessionsView.js';
@@ -260,3 +261,10 @@ export class AttemptViewWithFilterRevealer implements
     sidebar.showPreloadingAttemptViewWithFilter(filter);
   }
 }
+
+export class StorageBucketRevealer implements Common.Revealer.Revealer<StorageMetadataView.StorageBucketRevealInfo> {
+  async reveal(revealInfo: StorageMetadataView.StorageBucketRevealInfo): Promise<void> {
+    const sidebar = await ResourcesPanel.showAndGetSidebar();
+    sidebar.showStorageBucket(revealInfo.bucketInfo);
+  }
+}

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -133,7 +133,7 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
                            .model(SDK.StorageBucketsModel.StorageBucketsModel)
                            ?.getBucketByName(cache.storageBucket.storageKey, cache.storageBucket.name);
 
-    this.metadataView.setShowOnlyBucket(false);
+    this.metadataView.setShowOnlyBucket(true);
 
     if (bucketInfo) {
       this.metadataView.setStorageBucket(bucketInfo);

package/front_end/panels/application/application-meta.ts

@@ -174,3 +174,14 @@ Common.Revealer.registerRevealer({
     return new Resources.ResourcesPanel.AttemptViewWithFilterRevealer();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return maybeRetrieveContextTypes(Resources => [Resources.Components.StorageMetadataView.StorageBucketRevealInfo]);
+  },
+  destination: Common.Revealer.RevealerDestination.APPLICATION_PANEL,
+  async loadRevealer() {
+    const Resources = await loadResourcesModule();
+    return new Resources.ResourcesPanel.StorageBucketRevealer();
+  },
+});

package/front_end/panels/application/application.ts

@@ -45,6 +45,7 @@ import * as TrustTokensTreeElement from './TrustTokensTreeElement.js';
 import * as WebMCPTreeElement from './WebMCPTreeElement.js';
 import * as WebMCPView from './WebMCPView.js';
 
+export * as Components from './components/components.js';
 export {
   ApplicationPanelSidebar,
   AppManifestView,

package/front_end/panels/application/components/StorageMetadataView.ts

@@ -4,7 +4,9 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/report_view/report_view.js';
+import '../../../ui/kit/kit.js';
 
+import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
@@ -13,6 +15,7 @@ import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wra
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import storageMetadataViewStyle from './storageMetadataView.css.js';
 
@@ -113,12 +116,17 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/StorageMetadataView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export class StorageBucketRevealInfo {
+  constructor(public bucketInfo: Protocol.Storage.StorageBucketInfo) {
+  }
+}
+
 export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #storageBucketsModel?: SDK.StorageBucketsModel.StorageBucketsModel;
   #storageKey: SDK.StorageKeyManager.StorageKey|null = null;
   #storageBucket: Protocol.Storage.StorageBucketInfo|null = null;
-  #showOnlyBucket = true;
+  #showOnlyBucket = false;
 
   setStorageKey(storageKey: string): void {
     this.#storageKey = SDK.StorageKeyManager.parseStorageKey(storageKey);
@@ -220,20 +228,36 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     const {bucket: {name}, persistent, durability, quota} = this.#storageBucket;
     const isDefault = !name;
 
-    if (!this.#showOnlyBucket) {
+    const renderBucketName = (): TemplateResult => {
       if (isDefault) {
-        return html`
-          ${this.key(i18nString(UIStrings.bucketName))}
-          ${this.value(html`<span class="default-bucket">default</span>`)}`;
+        return html`<span class="default-bucket">${i18nString(UIStrings.defaultBucket)}</span>`;
       }
+      if (!this.#showOnlyBucket) {
+        return html`${name}`;
+      }
+      const revealBucket = (e: Event): void => {
+        e.preventDefault();
+        void Common.Revealer.reveal(
+            new StorageBucketRevealInfo(this.#storageBucket as Protocol.Storage.StorageBucketInfo));
+      };
+      return html`<devtools-link
+        @click=${revealBucket}
+        title=${name}
+        jslog=${VisualLogging.action('storage-bucket').track({
+        click: true
+      })}
+      >${name}</devtools-link>`;
+    };
+
+    if (this.#showOnlyBucket) {
       return html`
         ${this.key(i18nString(UIStrings.bucketName))}
-        ${this.value(name)}`;
+        ${this.value(renderBucketName())}`;
     }
     // clang-format off
     return html`
       ${this.key(i18nString(UIStrings.bucketName))}
-      ${this.value(name || html`<span class="default-bucket">default</span>`)}
+      ${this.value(renderBucketName())}
       ${this.key(i18nString(UIStrings.persistent))}
       ${this.value(persistent ? i18nString(UIStrings.yes) : i18nString(UIStrings.no))}
       ${this.key(i18nString(UIStrings.durability))}

package/front_end/panels/application/components/backForwardCacheView.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+:host {
+  overflow: auto;
+}
+
 devtools-report-value {
   overflow: hidden;
 }

package/front_end/panels/application/preloading/components/PreloadingDetailsReportView.ts

@@ -54,6 +54,10 @@ const UIStrings = {
    * @description Text in details
    */
   detailsTargetHint: 'Target hint',
+  /**
+   * @description Text in details
+   */
+  detailsFormSubmission: 'Form submission',
   /**
    * @description Text in details
    */
@@ -62,6 +66,14 @@ const UIStrings = {
    * @description Header of rule set
    */
   detailsRuleSet: 'Rule set',
+  /**
+   * @description Text indicating that the preloading field is true.
+   */
+  yes: 'Yes',
+  /**
+   * @description Text indicating that the preloading field is false.
+   */
+  no: 'No',
   /**
    * @description Description: status
    */
@@ -202,6 +214,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
           ${this.#action(isFallbackToPrefetch)}
           ${this.#status(isFallbackToPrefetch)}
           ${this.#targetHint()}
+          ${this.#formSubmission()}
           ${this.#maybePrefetchFailureReason()}
           ${this.#maybePrerenderFailureReason()}
 
@@ -381,6 +394,22 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
     `;
   }
 
+  #formSubmission(): Lit.LitTemplate {
+    assertNotNullOrUndefined(this.#data);
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
+    const hasFormSubmission = attempt.key.formSubmission !== undefined;
+    if (!hasFormSubmission || !this.#isPrerenderLike(attempt.action)) {
+      return Lit.nothing;
+    }
+
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsFormSubmission)}</devtools-report-key>
+        <devtools-report-value>
+          ${attempt.key.formSubmission ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
+        </devtools-report-value>
+    `;
+  }
+
   #maybePrerenderFailureReason(): Lit.LitTemplate {
     assertNotNullOrUndefined(this.#data);
     const attempt = this.#data.pipeline.getOriginallyTriggered();

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -2850,6 +2850,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateDecorations(): void {
+    // Important to keep the entire tree node row as a clickable area for that
+    // node.
+    this.listItemElement.style.setProperty('--indent', this.computeLeftIndent() + 'px');
+
     if (this.isClosingTag()) {
       return;
     }

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
-import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
+import * as HeapSnapshotModel from '../../models/heap_snapshot/heap_snapshot.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -10,7 +10,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
+import * as HeapSnapshotModel from '../../models/heap_snapshot/heap_snapshot.js';
 import {createIcon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -11,7 +11,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
+import * as HeapSnapshotModel from '../../models/heap_snapshot/heap_snapshot.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';

package/front_end/panels/timeline/TimelinePanel.ts

@@ -2179,7 +2179,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     PerfUI.LineLevelProfile.Performance.instance().initialize(cpuProfiles, primaryPageTarget);
 
     // Initialize EntityMapper
-    this.#entityMapper = new Trace.EntityMapper.EntityMapper(parsedTrace);
+    this.#entityMapper = Trace.EntityMapper.EntityMapper.getOrCreate(parsedTrace);
 
     // Set up SourceMapsResolver to ensure we resolve any function names in
     // profile calls.
@@ -2189,9 +2189,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         SourceMapsResolver.SourceMappingsUpdated.eventName, this.#onSourceMapsNodeNamesResolvedBound);
     void this.#sourceMapsResolver.install();
 
-    // Initialize EntityMapper
-    this.#entityMapper = new Trace.EntityMapper.EntityMapper(parsedTrace);
-
     this.statusDialog?.updateProgressBar(i18nString(UIStrings.processed), 80);
     this.updateMiniMap();
     this.statusDialog?.updateProgressBar(i18nString(UIStrings.processed), 90);
@@ -3060,7 +3057,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     return trace;
   }
-
 }
 
 export const enum State {
@@ -3143,7 +3139,7 @@ export class BottomUpProfileRevealer implements Common.Revealer.Revealer<Utils.H
     TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
         revealable.bounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
     panel.select(null);
-    panel.getFlameChart().selectDetailsViewTab(Tab.BottomUp, null);
+    panel.getFlameChart().selectDetailsViewTab(Tab.BottomUp, revealable.node ?? null);
   }
 }
 

package/front_end/panels/timeline/utils/Helpers.ts

@@ -138,6 +138,6 @@ export class RevealableTimeRange {
 }
 
 export class RevealableBottomUpProfile {
-  constructor(public bounds: Trace.Types.Timing.TraceWindowMicro) {
+  constructor(public bounds: Trace.Types.Timing.TraceWindowMicro, public node?: Trace.Extras.TraceTree.Node) {
   }
 }

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: f6aa8926592f9b5bd54bf4b6430d3abb4bc480f6
+Revision: 5b539f63dc636f6b69d9c294a65bc5aff0bea3de
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE