chrome-devtools-frontend 1.0.1514545 → 1.0.1515446

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt

@@ -830,11 +830,13 @@ URL: https://web.dev/cls/
 Bounds: {min: 1020034823047, max: 1020036087961}
 CPU throttling: none
 Network throttling: none
-Metrics:
+Metrics (lab / observed):
   - LCP: 118 ms, event: (eventKey: r-1802, ts: 1020034953358)
+  - LCP breakdown:
     - TTFB: 31.3 ms, bounds: {min: 1020034834921, max: 1020034866264}
     - Render delay: 87.1 ms, bounds: {min: 1020034866264, max: 1020034953358}
   - CLS: 0.00
+Metrics (field / real users): n/a – no data for this page in CrUX
 Available insights:
   - insight name: LCPBreakdown
     description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
@@ -861,13 +863,15 @@ URL: https://news.yahoo.com/
 Bounds: {min: 157423484442, max: 157427277166}
 CPU throttling: none
 Network throttling: none
-Metrics:
+Metrics (lab / observed):
   - LCP: 464 ms, event: (eventKey: r-33210, ts: 157423953162)
+  - LCP breakdown:
     - TTFB: 215.7 ms, bounds: {min: 157423488682, max: 157423704371}
     - Load delay: 90.3 ms, bounds: {min: 157423704371, max: 157423794709}
     - Load duration: 64 ms, bounds: {min: 157423794709, max: 157423858674}
     - Render delay: 94.5 ms, bounds: {min: 157423858674, max: 157423953162}
   - CLS: 0.04, event: (eventKey: s--1, ts: 157425604232)
+Metrics (field / real users): n/a – no data for this page in CrUX
 Available insights:
   - insight name: LCPBreakdown
     description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
@@ -914,3 +918,74 @@ Available insights:
     example question: Is my site polyfilling modern JavaScript features?
     example question: How can I reduce the amount of legacy JavaScript on my page?
 === end content
+
+Title: PerformanceTraceFormatter formatTraceSummary image-delivery.json.gz
+Content:
+URL: http://localhost/image-delivery-cases.html
+Bounds: {min: 59728641874, max: 59734400108}
+CPU throttling: 1x
+Network throttling: No throttling
+Metrics (lab / observed):
+  - LCP: 663 ms, event: (eventKey: r-14753, ts: 59729312744)
+  - LCP breakdown:
+    - TTFB: 7 ms, bounds: {min: 59728649746, max: 59728656735}
+    - Load delay: 45.6 ms, bounds: {min: 59728656735, max: 59728702313}
+    - Load duration: 506.3 ms, bounds: {min: 59728702313, max: 59729208600}
+    - Render delay: 104.1 ms, bounds: {min: 59729208600, max: 59729312744}
+  - CLS: 0.31, event: (eventKey: s--1, ts: 59729100192)
+Metrics (field / real users):
+  - LCP: 1740 ms (scope: url)
+  - INP: 185 ms (scope: url)
+  - CLS: 0.08 (scope: url)
+  - The above data is from CrUX–Chrome User Experience Report. It's how the page performs for real users.
+  - The values shown above are the p75 measure of all real Chrome users
+  - The scope indicates if the data came from the entire origin, or a specific url
+  - Lab metrics describe how this specific page load performed, while field metrics are an aggregation of results from real-world users. Best practice is to prioritize metrics that are bad in field data. Lab metrics may be better or worse than fields metrics depending on the developer's machine, network, or the actions performed while tracing.
+Available insights:
+  - insight name: Cache
+    description: A long cache lifetime can speed up repeat visits to your page. [Learn more](https://web.dev/uses-long-cache-ttl/).
+    relevant trace bounds: {min: 59728702014, max: 59728867430}
+    estimated metric savings: FCP 0 ms, LCP 150 ms
+    estimated wasted bytes: 971.5 kB
+    example question: What caching strategies can I apply to improve my page performance?
+  - insight name: ImageDelivery
+    description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
+    relevant trace bounds: {min: 59728701403, max: 59729395208}
+    estimated metric savings: FCP 0 ms, LCP 100 ms
+    estimated wasted bytes: 2 MB
+    example question: What should I do to improve and optimize the time taken to fetch and display images on the page?
+    example question: Are all images on my site optimized?
+  - insight name: LCPBreakdown
+    description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
+    relevant trace bounds: {min: 59728649746, max: 59729312744}
+    example question: Help me optimize my LCP score
+    example question: Which LCP phase was most problematic?
+    example question: What can I do to reduce the LCP time for this page load?
+  - insight name: LCPDiscovery
+    description: Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)
+    relevant trace bounds: {min: 59728656735, max: 59729209036}
+    example question: Suggest fixes to reduce my LCP
+    example question: What can I do to reduce my LCP discovery time?
+    example question: Why is LCP discovery time important?
+  - insight name: CLSCulprits
+    description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.
+    relevant trace bounds: {min: 59729100192, max: 59730317334}
+    example question: Help me optimize my CLS score
+    example question: How can I prevent layout shifts on this page?
+  - insight name: DocumentLatency
+    description: Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
+    relevant trace bounds: {min: 59728651057, max: 59728790724}
+    estimated metric savings: FCP 0 ms, LCP 0 ms
+    estimated wasted bytes: 1.6 kB
+    example question: How do I decrease the initial loading time of my page?
+    example question: Did anything slow down the request for this document?
+  - insight name: Viewport
+    description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.
+    relevant trace bounds: {min: 59728649746, max: 59734400108}
+    estimated metric savings: INP 0 ms
+    example question: How do I make sure my page is optimized for mobile viewing?
+  - insight name: ThirdParties
+    description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
+    relevant trace bounds: {min: 59728701403, max: 59729465969}
+    example question: Which third parties are having the largest impact on my page performance?
+=== end content

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -2,8 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
+import * as CrUXManager from '../../crux-manager/crux-manager.js';
 import * as Trace from '../../trace/trace.js';
+import type {AICallTree} from '../performance/AICallTree.js';
+import type {AgentFocus} from '../performance/AIContext.js';
+import {AIQueries} from '../performance/AIQueries.js';
 
 import {PerformanceInsightFormatter, TraceEventFormatter} from './PerformanceInsightFormatter.js';
 import {bytes, micros, millis} from './UnitFormatters.js';
@@ -13,7 +16,7 @@ export class PerformanceTraceFormatter {
   #insightSet: Trace.Insights.Types.InsightSet|null;
   #eventsSerializer: Trace.EventsSerializer.EventsSerializer;
 
-  constructor(focus: TimelineUtils.AIContext.AgentFocus, eventsSerializer: Trace.EventsSerializer.EventsSerializer) {
+  constructor(focus: AgentFocus, eventsSerializer: Trace.EventsSerializer.EventsSerializer) {
     this.#parsedTrace = focus.data.parsedTrace;
     this.#insightSet = focus.data.insightSet;
     this.#eventsSerializer = eventsSerializer;
@@ -45,7 +48,7 @@ export class PerformanceTraceFormatter {
     parts.push('CPU throttling: ' + (traceMetadata.cpuThrottling ? `${traceMetadata.cpuThrottling}x` : 'none'));
     parts.push(`Network throttling: ${traceMetadata.networkThrottling ?? 'none'}`);
     if (lcp || cls || inp) {
-      parts.push('Metrics:');
+      parts.push('Metrics (lab / observed):');
       if (lcp) {
         parts.push(`  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}`);
         const subparts = insightSet?.model.LCPBreakdown.subparts;
@@ -53,6 +56,7 @@ export class PerformanceTraceFormatter {
           const serializeSubpart = (subpart: Trace.Insights.Models.LCPBreakdown.Subpart): string => {
             return `${micros(subpart.range)}, bounds: ${this.serializeBounds(subpart)}`;
           };
+          parts.push('  - LCP breakdown:');
           parts.push(`    - TTFB: ${serializeSubpart(subparts.ttfb)}`);
           if (subparts.loadDelay !== undefined) {
             parts.push(`    - Load delay: ${serializeSubpart(subparts.loadDelay)}`);
@@ -71,7 +75,69 @@ export class PerformanceTraceFormatter {
         parts.push(`  - CLS: ${cls.value.toFixed(2)}${eventText}`);
       }
     } else {
-      parts.push('Metrics: n/a');
+      parts.push('Metrics (lab / observed): n/a');
+    }
+
+    const fieldMetrics = insightSet &&
+        Trace.Insights.Common.getFieldMetricsForInsightSet(
+            insightSet, traceMetadata, CrUXManager.CrUXManager.instance().getSelectedScope());
+    const fieldLcp = fieldMetrics?.lcp;
+    const fieldInp = fieldMetrics?.inp;
+    const fieldCls = fieldMetrics?.cls;
+
+    if (fieldLcp || fieldInp || fieldCls) {
+      parts.push('Metrics (field / real users):');
+
+      const serializeFieldMetricTimingResult =
+          (fieldMetric: Trace.Insights.Common.CrUXFieldMetricTimingResult): string => {
+            return `${Math.round(fieldMetric.value / 1000)} ms (scope: ${fieldMetric.pageScope})`;
+          };
+
+      const serializeFieldMetricNumberResult =
+          (fieldMetric: Trace.Insights.Common.CrUXFieldMetricNumberResult): string => {
+            return `${fieldMetric.value.toFixed(2)} (scope: ${fieldMetric.pageScope})`;
+          };
+
+      if (fieldLcp) {
+        parts.push(`  - LCP: ${serializeFieldMetricTimingResult(fieldLcp)}`);
+
+        const fieldLcpBreakdown = fieldMetrics?.lcpBreakdown;
+        if (fieldLcpBreakdown &&
+            (fieldLcpBreakdown.ttfb || fieldLcpBreakdown.loadDelay || fieldLcpBreakdown.loadDuration ||
+             fieldLcpBreakdown.renderDelay)) {
+          parts.push('  - LCP breakdown:');
+          if (fieldLcpBreakdown.ttfb) {
+            parts.push(`    - TTFB: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.ttfb)}`);
+          }
+          if (fieldLcpBreakdown.loadDelay) {
+            parts.push(`    - Load delay: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.loadDelay)}`);
+          }
+          if (fieldLcpBreakdown.loadDuration) {
+            parts.push(`    - Load duration: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.loadDuration)}`);
+          }
+          if (fieldLcpBreakdown.renderDelay) {
+            parts.push(`    - Render delay: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.renderDelay)}`);
+          }
+        }
+      }
+      if (fieldInp) {
+        parts.push(`  - INP: ${serializeFieldMetricTimingResult(fieldInp)}`);
+      }
+      if (fieldCls) {
+        parts.push(`  - CLS: ${serializeFieldMetricNumberResult(fieldCls)}`);
+      }
+
+      parts.push(
+          '  - The above data is from CrUX–Chrome User Experience Report. It\'s how the page performs for real users.');
+      parts.push('  - The values shown above are the p75 measure of all real Chrome users');
+      parts.push('  - The scope indicates if the data came from the entire origin, or a specific url');
+      parts.push(
+          '  - Lab metrics describe how this specific page load performed, while field metrics are an aggregation ' +
+          'of results from real-world users. Best practice is to prioritize metrics that are bad in field data. ' +
+          'Lab metrics may be better or worse than fields metrics depending on the developer\'s machine, network, or the ' +
+          'actions performed while tracing.');
+    } else {
+      parts.push('Metrics (field / real users): n/a – no data for this page in CrUX');
     }
 
     if (insightSet) {
@@ -176,7 +242,7 @@ export class PerformanceTraceFormatter {
     const insightSet = this.#insightSet;
 
     const bounds = parsedTrace.data.Meta.traceBounds;
-    const rootNode = TimelineUtils.InsightAIContext.AIQueries.mainThreadActivityBottomUp(
+    const rootNode = AIQueries.mainThreadActivityBottomUp(
         insightSet?.navigation?.args.data?.navigationId,
         bounds,
         parsedTrace,
@@ -229,8 +295,8 @@ export class PerformanceTraceFormatter {
     const insightSet = this.#insightSet;
 
     const bounds = parsedTrace.data.Meta.traceBounds;
-    const longestTaskTrees = TimelineUtils.InsightAIContext.AIQueries.longestTasks(
-        insightSet?.navigation?.args.data?.navigationId, bounds, parsedTrace, 3);
+    const longestTaskTrees =
+        AIQueries.longestTasks(insightSet?.navigation?.args.data?.navigationId, bounds, parsedTrace, 3);
     if (!longestTaskTrees || longestTaskTrees.length === 0) {
       return 'Longest tasks: none';
     }
@@ -288,7 +354,7 @@ export class PerformanceTraceFormatter {
   formatMainThreadTrackSummary(bounds: Trace.Types.Timing.TraceWindowMicro): string {
     const results = [];
 
-    const topDownTree = TimelineUtils.InsightAIContext.AIQueries.mainThreadActivityTopDown(
+    const topDownTree = AIQueries.mainThreadActivityTopDown(
         this.#insightSet?.navigation?.args.data?.navigationId,
         bounds,
         this.#parsedTrace,
@@ -298,7 +364,7 @@ export class PerformanceTraceFormatter {
       results.push(this.formatCallTree(topDownTree, 2 /* headerLevel */));
     }
 
-    const bottomUpRootNode = TimelineUtils.InsightAIContext.AIQueries.mainThreadActivityBottomUp(
+    const bottomUpRootNode = AIQueries.mainThreadActivityBottomUp(
         this.#insightSet?.navigation?.args.data?.navigationId,
         bounds,
         this.#parsedTrace,
@@ -349,7 +415,7 @@ export class PerformanceTraceFormatter {
     return results.join('\n\n');
   }
 
-  formatCallTree(tree: TimelineUtils.AICallTree.AICallTree, headerLevel = 1): string {
+  formatCallTree(tree: AICallTree, headerLevel = 1): string {
     const results = [tree.serialize(headerLevel), ''];
 
     // TODO(b/425270067): add eventKey to tree.serialize, but need to wait for other

package/front_end/models/cpu_profile/ProfileTreeModel.ts

@@ -12,7 +12,7 @@ export class ProfileNode {
   total: number;
   id: number;
   parent: ProfileNode|null;
-  children: ProfileNode[];
+  children: this[];
   functionName: string;
   depth!: number;
   deoptReason!: string|null;

package/front_end/models/extensions/ExtensionPanel.ts

@@ -69,6 +69,10 @@ export class ExtensionPanel extends UI.Panel.Panel implements UI.SearchableView.
     return false;
   }
 
+  supportsWholeWordSearch(): boolean {
+    return false;
+  }
+
   supportsRegexSearch(): boolean {
     return false;
   }

package/front_end/models/heap_snapshot_model/HeapSnapshotModel.ts

@@ -239,12 +239,16 @@ export class NodeFilter {
 export class SearchConfig {
   query: string;
   caseSensitive: boolean;
+  wholeWord: boolean;
   isRegex: boolean;
   shouldJump: boolean;
   jumpBackward: boolean;
-  constructor(query: string, caseSensitive: boolean, isRegex: boolean, shouldJump: boolean, jumpBackward: boolean) {
+  constructor(
+      query: string, caseSensitive: boolean, wholeWord: boolean, isRegex: boolean, shouldJump: boolean,
+      jumpBackward: boolean) {
     this.query = query;
     this.caseSensitive = caseSensitive;
+    this.wholeWord = wholeWord;
     this.isRegex = isRegex;
     this.shouldJump = shouldJump;
     this.jumpBackward = jumpBackward;

package/front_end/models/trace/helpers/Trace.ts

@@ -766,7 +766,7 @@ export function extractSampleTraceId(event: Types.Events.Event): number|null {
   return event.args?.sampleTraceId ?? event.args?.data?.sampleTraceId ?? null;
 }
 
-// This exactly matches EntryStyles.visibleTypes. See the runtime verification in maybeInitSylesMap.
+// This exactly matches Trace.Styles.visibleTypes. See the runtime verification in maybeInitStylesMap.
 // TODO(crbug.com/410884528)
 export const VISIBLE_TRACE_EVENT_TYPES = new Set<Types.Events.Name>([
   Types.Events.Name.ABORT_POST_TASK_CALLBACK,

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -22,7 +22,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as NetworkForward from '../network/forward/forward.js';
 import * as NetworkPanel from '../network/network.js';
 import * as TimelinePanel from '../timeline/timeline.js';
-import * as TimelineUtils from '../timeline/utils/utils.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
 import {
@@ -275,7 +274,7 @@ async function getEmptyStateSuggestions(
       ];
     case AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT:
     case AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE: {
-      const focus = context?.getItem() as TimelineUtils.AIContext.AgentFocus | null;
+      const focus = context?.getItem() as AiAssistanceModel.AgentFocus | null;
       if (focus?.data.type === 'call-tree') {
         return [
           {title: 'What\'s the purpose of this work?', jslogContext: 'performance-default'},
@@ -433,7 +432,7 @@ function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|null):
   return new AiAssistanceModel.RequestContext(request, calculator);
 }
 
-function createPerformanceTraceContext(focus: TimelineUtils.AIContext.AgentFocus|null):
+function createPerformanceTraceContext(focus: AiAssistanceModel.AgentFocus|null):
     AiAssistanceModel.PerformanceTraceContext|null {
   if (!focus) {
     return null;
@@ -710,7 +709,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#selectedRequest =
         createRequestContext(UI.Context.Context.instance().flavor(SDK.NetworkRequest.NetworkRequest));
     this.#selectedPerformanceTrace =
-        createPerformanceTraceContext(UI.Context.Context.instance().flavor(TimelineUtils.AIContext.AgentFocus));
+        createPerformanceTraceContext(UI.Context.Context.instance().flavor(AiAssistanceModel.AgentFocus));
     this.#selectedFile = createFileContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UISourceCode));
     this.#updateConversationState({agent: this.#conversationAgent});
 
@@ -723,7 +722,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     UI.Context.Context.instance().addFlavorChangeListener(
         SDK.NetworkRequest.NetworkRequest, this.#handleNetworkRequestFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
-        TimelineUtils.AIContext.AgentFocus, this.#handlePerformanceTraceFlavorChange);
+        AiAssistanceModel.AgentFocus, this.#handlePerformanceTraceFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
 
@@ -760,7 +759,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     UI.Context.Context.instance().removeFlavorChangeListener(
         SDK.NetworkRequest.NetworkRequest, this.#handleNetworkRequestFlavorChange);
     UI.Context.Context.instance().removeFlavorChangeListener(
-        TimelineUtils.AIContext.AgentFocus, this.#handlePerformanceTraceFlavorChange);
+        AiAssistanceModel.AgentFocus, this.#handlePerformanceTraceFlavorChange);
     UI.Context.Context.instance().removeFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
     UI.ViewManager.ViewManager.instance().removeEventListener(
@@ -838,7 +837,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       };
 
   #handlePerformanceTraceFlavorChange =
-      (ev: Common.EventTarget.EventTargetEvent<TimelineUtils.AIContext.AgentFocus>): void => {
+      (ev: Common.EventTarget.EventTargetEvent<AiAssistanceModel.AgentFocus>): void => {
         if (this.#selectedPerformanceTrace?.getItem() === ev.data) {
           return;
         }

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

@@ -14,7 +14,6 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 import * as ElementsPanel from '../../../panels/elements/elements.js';
-import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
 import * as PanelUtils from '../../../panels/utils/utils.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
@@ -1040,7 +1039,7 @@ function renderContextIcon(context: AiAssistanceModel.ConversationContext<unknow
   if (item instanceof Workspace.UISourceCode.UISourceCode) {
     return PanelUtils.PanelUtils.getIconForSourceFile(item);
   }
-  if (item instanceof TimelineUtils.AIContext.AgentFocus) {
+  if (item instanceof AiAssistanceModel.AgentFocus) {
     return html`<devtools-icon name="performance" title="Performance"></devtools-icon>`;
   }
   if (item instanceof SDK.DOMModel.DOMNode) {

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -19,10 +19,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import styles from './gdpSignUpDialog.css.js';
 
 const UIStrings = {
-  /**
-   * @description Heading of the Google Developer Program sign up dialog.
-   */
-  gdpSignUp: 'Google Developer Program',
   /**
    * @description Aria label for the Google Developer Program sign up dialog
    */
@@ -110,7 +106,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
   render(
     html`
       <style>${styles}</style>
-      <h2 class="gdp-sign-up-dialog-header">${i18nString(UIStrings.gdpSignUp)}</h2>
+      <div class="gdp-sign-up-dialog-header"></div>
       <div class="main-content">
         <div class="section">
           <div class="icon-container">
@@ -239,6 +235,6 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
     dialog.setDimmed(true);
 
     new GdpSignUpDialog({dialog}).show(dialog.contentElement);
-    dialog.show();
+    dialog.show(undefined, /* stack */ true);
   }
 }

package/front_end/panels/common/gdpSignUpDialog.css

@@ -12,23 +12,15 @@
     }
 
     .gdp-sign-up-dialog-header {
-        font: var(--sys-typescale-headline5);
-        color: var(--sys-color-on-surface);
-        display: flex;
-        align-items: center;
+        background-image: var(--image-file-gdp-logo-light);
+        height: 20px;
+        background-repeat: no-repeat;
+        background-size: contain;
         margin: 0;
     }
 
-    .gdp-sign-up-dialog-header::before {
-        content: '';
-        background-image: var(--image-file-gdp-logo-standalone);
-        display: inline-block;
-        width: 34px;
-        height: 15px;
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center;
-        margin-right: var(--sys-size-6);
+    :host-context(.theme-with-dark-background) & .gdp-sign-up-dialog-header {
+        background-image: var(--image-file-gdp-logo-dark);
     }
 
     .main-content {

package/front_end/panels/console/ConsoleView.ts

@@ -1592,6 +1592,10 @@ export class ConsoleView extends UI.Widget.VBox implements
     return true;
   }
 
+  supportsWholeWordSearch(): boolean {
+    return true;
+  }
+
   supportsRegexSearch(): boolean {
     return true;
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -713,6 +713,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     return false;
   }
 
+  supportsWholeWordSearch(): boolean {
+    return false;
+  }
+
   supportsRegexSearch(): boolean {
     return false;
   }

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -544,8 +544,8 @@ export class StylePropertiesSection {
     }
   }
 
-  private onKeyDown(event: Event): void {
-    const keyboardEvent = (event as KeyboardEvent);
+  private onKeyDown(event: KeyboardEvent): void {
+    const keyboardEvent = event;
     if (UI.UIUtils.isEditing() || !this.editable || keyboardEvent.altKey || keyboardEvent.ctrlKey ||
         keyboardEvent.metaKey) {
       return;
@@ -1367,12 +1367,12 @@ export class StylePropertiesSection {
   private editingMediaTextCommittedForTest(): void {
   }
 
-  private handleSelectorClick(event: Event): void {
+  private handleSelectorClick(event: MouseEvent): void {
     const target = (event.target as Element | null);
     if (!target) {
       return;
     }
-    if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey((event as MouseEvent)) && this.navigable &&
+    if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event) && this.navigable &&
         target.classList.contains('simple-selector')) {
       const selectorIndex = this.elementToSelectorIndex.get(target);
       if (selectorIndex) {

package/front_end/panels/network/NetworkConfigView.ts

@@ -274,7 +274,7 @@ export class NetworkConfigView extends UI.Widget.VBox {
       userAgentUpdateButtonStatusText.textContent = '';
     });
 
-    clientHints.addEventListener('clienthintssubmit', (event: Event) => {
+    clientHints.addEventListener('clienthintssubmit', event => {
       const metaData: Protocol.Emulation.UserAgentMetadata = (event as CustomEvent).detail.value;
       const customUA = customUserAgentSetting.get();
       userAgentMetadataSetting.set(metaData);

package/front_end/panels/network/NetworkLogView.ts

@@ -1166,8 +1166,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     return this.dataGrid;
   }
 
-  private dataGridMouseMove(event: Event): void {
-    const mouseEvent = (event as MouseEvent);
+  private dataGridMouseMove(event: MouseEvent): void {
+    const mouseEvent = event;
     const node = (this.dataGrid.dataGridNodeFromNode((mouseEvent.target as Node)));
     const highlightInitiatorChain = mouseEvent.shiftKey;
     this.setHoveredNode(node as NetworkNode, highlightInitiatorChain);

package/front_end/panels/network/components/HeaderSectionRow.ts

@@ -400,10 +400,9 @@ export class HeaderSectionRow extends HTMLElement {
     this.dispatchEvent(new HeaderRemovedEvent(this.#header.name, this.#header.value || ''));
   }
 
-  #onKeyDown(event: Event): void {
-    const keyboardEvent = event as KeyboardEvent;
+  #onKeyDown(event: KeyboardEvent): void {
     const target = event.target as EditableSpan;
-    if (keyboardEvent.key === 'Escape') {
+    if (event.key === 'Escape') {
       event.consume();
       if (target.matches('.header-name devtools-editable-span')) {
         target.value = this.#header?.name || '';

package/front_end/panels/profiler/HeapProfileView.ts

@@ -303,9 +303,7 @@ export class SamplingHeapProfileTypeBase extends
     const profile = await this.stopSampling();
     if (recordedProfile) {
       console.assert(profile !== undefined);
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      recordedProfile.setProtocolProfile((profile as any));
+      recordedProfile.setProtocolProfile(profile as unknown as Protocol.Profiler.Profile);
       recordedProfile.updateStatus('');
       this.setProfileBeingRecorded(null);
     }

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -622,6 +622,10 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     return true;
   }
 
+  supportsWholeWordSearch(): boolean {
+    return false;
+  }
+
   supportsRegexSearch(): boolean {
     return false;
   }
@@ -639,7 +643,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
     const nextQuery = new HeapSnapshotModel.HeapSnapshotModel.SearchConfig(
-        searchConfig.query.trim(), searchConfig.caseSensitive, searchConfig.isRegex, shouldJump,
+        searchConfig.query.trim(), searchConfig.caseSensitive, searchConfig.wholeWord, searchConfig.isRegex, shouldJump,
         jumpBackwards || false);
 
     void this.searchThrottler.schedule(this.performSearchInternal.bind(this, nextQuery));

package/front_end/panels/profiler/ProfileDataGrid.ts

@@ -641,6 +641,10 @@ export class ProfileDataGridTree implements UI.SearchableView.Searchable {
     return true;
   }
 
+  supportsWholeWordSearch(): boolean {
+    return false;
+  }
+
   supportsRegexSearch(): boolean {
     return false;
   }

package/front_end/panels/profiler/ProfileFlameChartDataProvider.ts

@@ -1,32 +1,6 @@
-/**
- * Copyright (C) 2014 Google Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
+// Copyright 2014 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
@@ -262,6 +236,10 @@ export class ProfileFlameChart extends
     return true;
   }
 
+  supportsWholeWordSearch(): boolean {
+    return false;
+  }
+
   supportsRegexSearch(): boolean {
     return false;
   }

package/front_end/panels/profiler/ProfileView.ts

@@ -367,6 +367,10 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
     return true;
   }
 
+  supportsWholeWordSearch(): boolean {
+    return false;
+  }
+
   supportsRegexSearch(): boolean {
     return false;
   }