chrome-devtools-frontend 1.0.1519267 → 1.0.1520535

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -771,6 +771,24 @@ export class NetworkRequestNode extends NetworkNode {
     return aScore - bScore || aRequest.identityCompare(bRequest);
   }
 
+  static IsAdRelatedComparator(a: NetworkNode, b: NetworkNode): number {
+    // TODO(allada) Handle this properly for group nodes.
+    const aRequest = a.requestOrFirstKnownChildRequest();
+    const bRequest = b.requestOrFirstKnownChildRequest();
+    if (!aRequest || !bRequest) {
+      return !aRequest ? -1 : 1;
+    }
+    const aIsAdRelated = aRequest.isAdRelated();
+    const bIsAdRelated = bRequest.isAdRelated();
+    if (aIsAdRelated > bIsAdRelated) {
+      return 1;
+    }
+    if (bIsAdRelated > aIsAdRelated) {
+      return -1;
+    }
+    return aRequest.identityCompare(bRequest);
+  }
+
   static RequestPropertyComparator(propertyName: string, a: NetworkNode, b: NetworkNode): number {
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1038,6 +1056,10 @@ export class NetworkRequestNode extends NetworkNode {
         this.renderAddressSpaceCell(cell, this.requestInternal.remoteAddressSpace());
         break;
       }
+      case 'is-ad-related': {
+        this.setTextAndTitle(cell, this.requestInternal.isAdRelated().toLocaleString());
+        break;
+      }
       case 'cookies': {
         this.setTextAndTitle(cell, this.arrayLength(this.requestInternal.includedRequestCookies()));
         break;

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -148,6 +148,10 @@ const UIStrings = {
    * @description Text in Network Log View Columns of the Network panel
    */
   remoteAddressSpace: 'Remote Address Space',
+  /**
+   * @description Text to show whether a request is ad-related
+   */
+  isAdRelated: 'Is Ad-Related',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkLogViewColumns.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -1183,6 +1187,11 @@ const DEFAULT_COLUMNS = [
     title: i18n.i18n.lockedLazyString('User-Agent'),
     sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'user-agent'),
   },
+  {
+    id: 'is-ad-related',
+    title: i18nLazyString(UIStrings.isAdRelated),
+    sortingFunction: NetworkRequestNode.IsAdRelatedComparator,
+  },
   // This header is a placeholder to let datagrid know that it can be sorted by this column, but never shown.
   {
     id: 'waterfall',

package/front_end/panels/recorder/components/CreateRecordingView.ts

@@ -8,6 +8,7 @@ import '../../../ui/components/icon_button/icon_button.js';
 import './ControlButton.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as Badges from '../../../models/badges/badges.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as Lit from '../../../ui/lit/lit.js';
@@ -231,6 +232,7 @@ export class CreateRecordingView extends HTMLElement {
             selectorAttribute,
             ),
     );
+    Badges.UserBadges.instance().recordAction(Badges.BadgeAction.RECORDER_RECORDING_STARTED);
   }
 
   #dispatchRecordingCancelled(): void {

package/front_end/panels/search/SearchResultsPane.ts

@@ -136,16 +136,16 @@ const renderSearchMatches =
     };
 
 export class SearchResultsPane extends UI.Widget.VBox {
-  readonly #searchConfig: Workspace.SearchConfig.SearchConfig;
+  #searchConfig: Workspace.SearchConfig.SearchConfig|null = null;
   #searchResults: SearchResult[] = [];
+  #resultsUpdated = false;
   #expandedResults = new WeakSet<SearchResult>();
   readonly #searchMatches = new WeakMap<SearchResult, SearchMatch[]>();
   #view: View;
 
-  constructor(searchConfig: Workspace.SearchConfig.SearchConfig, view: View = DEFAULT_VIEW) {
-    super({useShadowDom: true});
+  constructor(element: HTMLElement|undefined, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
     this.#view = view;
-    this.#searchConfig = searchConfig;
   }
 
   get searchResults(): SearchResult[] {
@@ -153,20 +153,33 @@ export class SearchResultsPane extends UI.Widget.VBox {
   }
 
   set searchResults(searchResults: SearchResult[]) {
-    this.#searchResults = searchResults;
-    let matchesExpandedCount = 0;
-    for (const searchResult of searchResults) {
-      if (this.#expandedResults.has(searchResult)) {
-        matchesExpandedCount += this.#searchMatches.get(searchResult)?.length ?? 0;
-      }
+    if (this.#searchResults === searchResults) {
+      return;
     }
-    for (const searchResult of searchResults) {
-      if (matchesExpandedCount < matchesExpandedByDefault && !this.#expandedResults.has(searchResult)) {
-        this.#expandedResults.add(searchResult);
-        this.#onExpandSearchResult(searchResult);
-        matchesExpandedCount += this.#searchMatches.get(searchResult)?.length ?? 0;
+    if (this.#searchResults.length !== searchResults.length) {
+      this.#resultsUpdated = true;
+    } else if (this.#searchResults.length === searchResults.length) {
+      for (let i = 0; i < this.#searchResults.length; ++i) {
+        if (this.#searchResults[i] === searchResults[i]) {
+          continue;
+        }
+        this.#resultsUpdated = true;
+        break;
       }
     }
+    if (!this.#resultsUpdated) {
+      return;
+    }
+    this.#searchResults = searchResults;
+    this.requestUpdate();
+  }
+
+  get searchConfig(): Workspace.SearchConfig.SearchConfig|null {
+    return this.#searchConfig;
+  }
+
+  set searchConfig(searchConfig: Workspace.SearchConfig.SearchConfig|null) {
+    this.#searchConfig = searchConfig;
     this.requestUpdate();
   }
 
@@ -174,6 +187,7 @@ export class SearchResultsPane extends UI.Widget.VBox {
     for (const searchResult of this.#searchResults) {
       const startMatchIndex = this.#searchMatches.get(searchResult)?.length ?? 0;
       this.#appendSearchMatches(searchResult, startMatchIndex, searchResult.matchesCount());
+      this.#expandedResults.add(searchResult);
     }
     this.requestUpdate();
   }
@@ -190,6 +204,9 @@ export class SearchResultsPane extends UI.Widget.VBox {
   }
 
   #appendSearchMatches(searchResult: SearchResult, fromIndex: number, toIndex: number): void {
+    if (!this.#searchConfig) {
+      return;
+    }
     const queries = this.#searchConfig.queries();
     const regexes = [];
     for (let i = 0; i < queries.length; ++i) {
@@ -230,6 +247,22 @@ export class SearchResultsPane extends UI.Widget.VBox {
   }
 
   override performUpdate(): void {
+    if (this.#resultsUpdated) {
+      let matchesExpandedCount = 0;
+      for (const searchResult of this.#searchResults) {
+        if (this.#expandedResults.has(searchResult)) {
+          matchesExpandedCount += this.#searchMatches.get(searchResult)?.length ?? 0;
+        }
+      }
+      for (const searchResult of this.#searchResults) {
+        if (matchesExpandedCount < matchesExpandedByDefault && !this.#expandedResults.has(searchResult)) {
+          this.#expandedResults.add(searchResult);
+          this.#onExpandSearchResult(searchResult);
+          matchesExpandedCount += this.#searchMatches.get(searchResult)?.length ?? 0;
+        }
+      }
+      this.#resultsUpdated = false;
+    }
     this.#view(
         {
           results: this.#searchResults,

package/front_end/panels/search/SearchView.ts

@@ -107,15 +107,16 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/search/SearchView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {ref, live} = Directives;
-const {widgetConfig} = UI.Widget;
+const {widgetConfig, widgetRef} = UI.Widget;
 
-interface SearchViewInput {
+export interface SearchViewInput {
   query: string;
   matchCase: boolean;
   isRegex: boolean;
+  searchConfig: Workspace.SearchConfig.SearchConfig|null;
   searchMessage: string;
   searchResultsMessage: string;
-  searchResultsPane: SearchResultsPane|null;
+  searchResults: SearchResult[];
   progress: Common.Progress.Progress|null;
   onQueryChange: (query: string) => void;
   onQueryKeyDown: (evt: KeyboardEvent) => void;
@@ -127,19 +128,22 @@ interface SearchViewInput {
   onClearSearch: () => void;
 }
 
-interface SearchViewOutput {
+export interface SearchViewOutput {
   focusSearchInput: () => void;
+  showAllMatches: () => void;
+  collapseAllResults: () => void;
 }
 
-type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement) => void;
+export type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const {
     query,
     matchCase,
     isRegex,
+    searchConfig,
     searchMessage,
-    searchResultsPane,
+    searchResults,
     searchResultsMessage,
     progress,
     onQueryChange,
@@ -159,12 +163,13 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         {PH1: UI.KeyboardShortcut.KeyboardShortcut.shortcutToString(UI.KeyboardShortcut.Keys.Enter)});
   } else if (progress) {
     header = i18nString(UIStrings.searching);
-  } else if (!searchResultsPane) {
+  } else if (!searchResults.length) {
     header = i18nString(UIStrings.noMatchesFound);
     text = i18nString(UIStrings.nothingMatchedTheQuery);
   }
   // clang-format off
   render(html`
+      <style>${UI.inspectorCommonStyles}</style>
       <style>${searchViewStyles}</style>
       <div class="search-drawer-header" @keydown=${onPanelKeyDown}>
         <div class="search-container">
@@ -240,9 +245,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         </devtools-toolbar>
       </div>
       <div class="search-results" @keydown=${onPanelKeyDown}>
-        ${searchResultsPane
-           ? html`<devtools-widget .widgetConfig=${widgetConfig(UI.Widget.VBox)}>
-              ${searchResultsPane.element}
+        ${searchResults.length
+           ? html`<devtools-widget .widgetConfig=${widgetConfig(SearchResultsPane, {searchResults, searchConfig})}
+            ${widgetRef(SearchResultsPane, w => {
+              output.showAllMatches = () => void w.showAllMatches();
+              output.collapseAllResults = () => void w.collapseAllResults(); })}>
             </devtools-widget>`
            : html`<devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {header, text})}>
                   </devtools-widget>`}
@@ -263,6 +270,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 export class SearchView extends UI.Widget.VBox {
   readonly #view: View;
   #focusSearchInput = (): void => {};
+  #showAllMatches = (): void => {};
+  #collapseAllResults = (): void => {};
   #isIndexing: boolean;
   #searchId: number;
   #searchMatchesCount: number;
@@ -271,7 +280,6 @@ export class SearchView extends UI.Widget.VBox {
   #searchingView: UI.Widget.Widget|null;
   #searchConfig: Workspace.SearchConfig.SearchConfig|null;
   #pendingSearchConfig: Workspace.SearchConfig.SearchConfig|null;
-  #searchResultsPane: SearchResultsPane|null;
   #progress: Common.Progress.Progress|null;
   #query: string;
   #matchCase = false;
@@ -307,7 +315,6 @@ export class SearchView extends UI.Widget.VBox {
     this.#searchingView = null;
     this.#searchConfig = null;
     this.#pendingSearchConfig = null;
-    this.#searchResultsPane = null;
     this.#progress = null;
     this.#throttler = throttler;
 
@@ -325,8 +332,9 @@ export class SearchView extends UI.Widget.VBox {
       query: this.#query,
       matchCase: this.#matchCase,
       isRegex: this.#isRegex,
+      searchConfig: this.#searchConfig,
       searchMessage: this.#searchMessage,
-      searchResultsPane: this.#searchResultsPane,
+      searchResults: this.#searchResults.filter(searchResult => searchResult.matchesCount()),
       searchResultsMessage: this.#searchResultsMessage,
       progress: this.#progress,
       onQueryChange: (query: string) => {
@@ -344,6 +352,12 @@ export class SearchView extends UI.Widget.VBox {
     const output: SearchViewOutput = {
       set focusSearchInput(value: () => void) {
         that.#focusSearchInput = value;
+      },
+      set showAllMatches(value: () => void) {
+        that.#showAllMatches = value;
+      },
+      set collapseAllResults(value: () => void) {
+        that.#collapseAllResults = value;
       }
     };
     this.#view(input, output, this.contentElement);
@@ -436,17 +450,10 @@ export class SearchView extends UI.Widget.VBox {
       this.#onIndexingFinished();
       return;
     }
-    if (!this.#searchResultsPane) {
-      this.#searchResultsPane = this.createSearchResultsPane();
-    }
     this.#searchResults.push(searchResult);
     void this.#throttler.schedule(async () => this.#setSearchResults());
   }
 
-  protected createSearchResultsPane(): SearchResultsPane {
-    return new SearchResultsPane((this.#searchConfig as Workspace.SearchConfig.SearchConfig));
-  }
-
   #setSearchResults(): void {
     this.#searchMatchesCount = 0;
     this.#searchResultsCount = 0;
@@ -454,9 +461,7 @@ export class SearchView extends UI.Widget.VBox {
     for (const searchResult of this.#searchResults) {
       this.#addSearchResult(searchResult);
     }
-    if (this.#searchResultsPane) {
-      this.#searchResultsPane.searchResults = this.#searchResults.filter(searchResult => searchResult.matchesCount());
-    }
+    this.performUpdate();
   }
 
   #onSearchFinished(searchId: number, finished: boolean): void {
@@ -465,7 +470,6 @@ export class SearchView extends UI.Widget.VBox {
     }
     this.#progress = null;
     this.#searchFinished(finished);
-    this.#searchConfig = null;
     UI.ARIAUtils.LiveAnnouncer.alert(this.#searchMessage + ' ' + this.#searchResultsMessage);
   }
 
@@ -486,7 +490,7 @@ export class SearchView extends UI.Widget.VBox {
 
   #resetSearch(): void {
     this.#stopSearch();
-    this.#searchResultsPane = null;
+    this.#searchResults = [];
     this.#searchMessage = '';
     this.#searchResultsMessage = '';
     this.performUpdate();
@@ -499,7 +503,6 @@ export class SearchView extends UI.Widget.VBox {
     if (this.#searchScope) {
       this.#searchScope.stopSearch();
     }
-    this.#searchConfig = null;
   }
 
   #searchStarted(): void {
@@ -544,7 +547,7 @@ export class SearchView extends UI.Widget.VBox {
 
   #searchFinished(finished: boolean): void {
     this.#searchMessage = finished ? i18nString(UIStrings.searchFinished) : i18nString(UIStrings.searchInterrupted);
-    this.performUpdate();
+    this.requestUpdate();
   }
 
   override focus(): void {
@@ -593,15 +596,15 @@ export class SearchView extends UI.Widget.VBox {
     // "Command + Alt + [" for Mac
     const shouldCollapseAllForMac =
         isMac && event.metaKey && !event.ctrlKey && event.altKey && event.code === 'BracketLeft';
-    // "Command + Alt + {" for other platforms
+    // "Ctrl + Alt + {" for other platforms
     const shouldCollapseAllForOtherPlatforms =
         !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.code === 'BracketLeft';
 
     if (shouldShowAllForMac || shouldShowAllForOtherPlatforms) {
-      this.#searchResultsPane?.showAllMatches();
+      this.#showAllMatches();
       void VisualLogging.logKeyDown(event.currentTarget, event, 'show-all-matches');
     } else if (shouldCollapseAllForMac || shouldCollapseAllForOtherPlatforms) {
-      this.#searchResultsPane?.collapseAllResults();
+      this.#collapseAllResults();
       void VisualLogging.logKeyDown(event.currentTarget, event, 'collapse-all-results');
     }
   }

package/front_end/panels/search/searchView.css

@@ -5,7 +5,6 @@
  */
 
 .search-drawer-header {
-  align-items: center;
   flex-shrink: 0;
   overflow: hidden;
   display: inline-flex;
@@ -14,7 +13,6 @@
   .search-container {
     border-bottom: 1px solid var(--sys-color-divider);
     display: flex;
-    height: 100%;
     align-items: center;
     flex-grow: 1;
   }

package/front_end/panels/settings/components/SyncSection.ts

@@ -31,10 +31,10 @@ const UIStrings = {
    */
   syncDisabled: 'To turn this setting on, you must enable Chrome sync.',
   /**
-   * @description Text shown to the user in the Settings UI. 'This setting' refers
-   * to a checkbox that is disabled.
+   * @description Text shown to the user in the Settings UI. Explains why the checkbox
+   * for saving DevTools settings to the user's Google account is inactive.
    */
-  preferencesSyncDisabled: 'To turn this setting on, you must first enable settings sync in Chrome.',
+  preferencesSyncDisabled: 'You need to first enable saving `Chrome` settings in your `Google` account.',
   /**
    * @description Label for the account email address. Shown in the DevTools Settings UI in
    * front of the email address currently used for Chrome Sync.
@@ -270,7 +270,7 @@ function renderWarningIfNeeded(syncInfo: Host.InspectorFrontendHostAPI.SyncInfor
   return html`
     <devtools-button
       aria-describedby=settings-sync-info
-      aria-label=${warningText}
+      .title=${warningText}
       .iconName=${'info'}
       .variant=${Buttons.Button.Variant.ICON}
       .size=${Buttons.Button.Size.SMALL}

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -103,6 +103,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (this.#teaser) {
       if (update.docChanged) {
         update.view.dispatch({effects: this.#teaserCompartment.reconfigure([])});
+        window.clearTimeout(this.#teaserDisplayTimeout);
         this.#addTeaserPluginToCompartment(update.view);
       } else if (update.selectionSet && update.state.doc.length > 0) {
         update.view.dispatch({effects: this.#teaserCompartment.reconfigure([])});
@@ -187,10 +188,6 @@ export class AiCodeCompletionPlugin extends Plugin {
   }
 
   #addTeaserPluginToCompartment = Common.Debouncer.debounce((view: CodeMirror.EditorView) => {
-    if (this.#teaserDisplayTimeout) {
-      window.clearTimeout(this.#teaserDisplayTimeout);
-      this.#teaserDisplayTimeout = undefined;
-    }
     this.#teaserDisplayTimeout = window.setTimeout(() => {
       this.#addTeaserPluginToCompartmentImmediate(view);
     }, AiCodeCompletion.AiCodeCompletion.DELAY_BEFORE_SHOWING_RESPONSE_MS);

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -10,6 +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 * as Protocol from '../../generated/protocol.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
 import * as Formatter from '../../models/formatter/formatter.js';
@@ -1628,6 +1629,9 @@ export class DebuggerPlugin extends Plugin {
         this.uiSourceCode, lineNumber, columnNumber, condition, enabled, isLogpoint,
         Breakpoints.BreakpointManager.BreakpointOrigin.USER_ACTION);
     this.breakpointWasSetForTest(lineNumber, columnNumber, condition, enabled);
+    if (bp) {
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.BREAKPOINT_ADDED);
+    }
     return bp;
   }
 

package/front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -226,7 +226,7 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     const unattributed = i18nString(UIStrings.unattributed);
     const id = typeof node.id === 'symbol' ? undefined : node.id;
     // This `undefined` is [unattributed]
-    // TODO(paulirish,aixba): Improve attribution to reduce amount of items in [unattributed].
+    // TODO(paulirish): Improve attribution to reduce amount of items in [unattributed].
     const domainName = id ? this.entityMapper()?.entityForEvent(node.event)?.name || id : undefined;
     return {name: domainName || unattributed, color, icon: undefined};
   }

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -254,14 +254,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     if (perfAIEntryPointEnabled && this.parsedTrace) {
       const callTree = AIAssistance.AICallTree.fromEvent(entry, this.parsedTrace);
       if (callTree) {
-        let focus = UI.Context.Context.instance().flavor(AIAssistance.AgentFocus);
-        if (focus) {
-          focus = focus.withCallTree(callTree);
-        } else {
-          focus = AIAssistance.AgentFocus.fromCallTree(callTree);
-        }
-        UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, focus);
-
         const action = UI.ActionRegistry.ActionRegistry.instance().getAction(PERF_AI_ACTION_ID);
 
         if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -1516,13 +1516,13 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
         return;
       }
 
-      const callTree =
-          selectionIsEvent(selection) ? AIAssistance.AICallTree.fromEvent(selection.event, this.#parsedTrace) : null;
+      const event = selectionIsEvent(selection) ? selection.event : null;
+
       let focus = UI.Context.Context.instance().flavor(AIAssistance.AgentFocus);
       if (focus) {
-        focus = focus.withCallTree(callTree);
-      } else if (callTree) {
-        focus = AIAssistance.AgentFocus.fromCallTree(callTree);
+        focus = focus.withEvent(event);
+      } else if (event) {
+        focus = AIAssistance.AgentFocus.fromEvent(this.#parsedTrace, event);
       } else {
         focus = null;
       }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -44,6 +44,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -1924,6 +1925,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     } else {
       await this.#startTraceRecording();
     }
+    Badges.UserBadges.instance().recordAction(Badges.BadgeAction.PERFORMANCE_RECORDING_STARTED);
   }
 
   private async stopRecording(): Promise<void> {

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -1005,7 +1005,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
       case AggregatedTimelineTreeView.GroupBy.Subdomain:
       case AggregatedTimelineTreeView.GroupBy.ThirdParties: {
         // This `undefined` is [unattributed]
-        // TODO(paulirish,aixba): Improve attribution to reduce amount of items in [unattributed].
+        // TODO(paulirish): Improve attribution to reduce amount of items in [unattributed].
         const domainName = id ? this.beautifyDomainName(id, node) : undefined;
         return {name: domainName || unattributed, color, icon: undefined};
       }

package/front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
+import '../../../ui/components/tooltips/tooltips.js';
+import '../../../ui/components/buttons/buttons.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -46,6 +49,18 @@ const UIStrings = {
    * @description Text for the save trace button
    */
   saveButtonTitle: 'Save',
+  /**
+   * @description Title for the information icon showing more information about an option
+   */
+  moreInfoTitle: 'More information',
+  /**
+   * @description Text shown in the information pop-up next to the "Include script content" option.
+   */
+  scriptContentPrivacyInfo: 'Includes the full content of all loaded scripts (except extensions).',
+  /**
+   * @description Text shown in the information pop-up next to the "Include script sourcemaps" option.
+   */
+  sourceMapsContentPrivacyInfo: 'Includes available source maps, which may expose authored code.'
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/ExportTraceOptions.ts', UIStrings);
@@ -74,6 +89,9 @@ export interface ExportTraceOptionsState {
   displaySourceMapsCheckbox?: boolean;
 }
 
+type CheckboxId = 'annotations'|'script-content'|'script-source-maps'|'compress-with-gzip';
+const checkboxesWithInfoDialog = new Set<CheckboxId>(['script-content', 'script-source-maps']);
+
 export class ExportTraceOptions extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: ExportTraceOptionsData|null = null;
@@ -187,7 +205,7 @@ export class ExportTraceOptions extends HTMLElement {
   }
 
   #renderCheckbox(
-      checkboxWithLabel: UI.UIUtils.CheckboxLabel, title: Common.UIString.LocalizedString,
+      checkboxId: CheckboxId, checkboxWithLabel: UI.UIUtils.CheckboxLabel, title: Common.UIString.LocalizedString,
       checked: boolean): Lit.TemplateResult {
     UI.Tooltip.Tooltip.install(checkboxWithLabel, title);
     checkboxWithLabel.ariaLabel = title;
@@ -202,11 +220,40 @@ export class ExportTraceOptions extends HTMLElement {
       return html`
         <div class='export-trace-options-row'>
           ${checkboxWithLabel}
+
+          ${checkboxesWithInfoDialog.has(checkboxId) ? html`
+            <devtools-button
+              aria-details=${`export-trace-tooltip-${checkboxId}`}
+              class="pen-icon"
+              .title=${UIStrings.moreInfoTitle}
+              .iconName=${'info'}
+              .variant=${Buttons.Button.Variant.ICON}
+              ></devtools-button>
+            ` : Lit.nothing}
         </div>
       `;
     // clang-format on
   }
 
+  #renderInfoTooltip(checkboxId: CheckboxId): Lit.LitTemplate {
+    if (!checkboxesWithInfoDialog.has(checkboxId)) {
+      return Lit.nothing;
+    }
+
+    return html`
+    <devtools-tooltip
+      variant="rich"
+      id=${`export-trace-tooltip-${checkboxId}`}
+    >
+      <div class="info-tooltip-container">
+      <p>
+        ${checkboxId === 'script-content' ? i18nString(UIStrings.scriptContentPrivacyInfo) : Lit.nothing}
+        ${checkboxId === 'script-source-maps' ? i18nString(UIStrings.sourceMapsContentPrivacyInfo) : Lit.nothing}
+      </p>
+      </div>
+    </devtools-tooltip>`;
+  }
+
   #render(): void {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('Export trace options dialog render was not scheduled');
@@ -230,16 +277,18 @@ export class ExportTraceOptions extends HTMLElement {
           state: this.#state.dialogState,
         } as Dialogs.ButtonDialog.ButtonDialogData}>
         <div class='export-trace-options-content'>
-          ${this.#state.displayAnnotationsCheckbox ? this.#renderCheckbox(this.#includeAnnotationsCheckbox,
+          ${this.#state.displayAnnotationsCheckbox ? this.#renderCheckbox('annotations', this.#includeAnnotationsCheckbox,
             i18nString(UIStrings.includeAnnotations),
             this.#state.includeAnnotations): ''}
-          ${this.#state.displayScriptContentCheckbox ? this.#renderCheckbox(this.#includeScriptContentCheckbox,
+          ${this.#state.displayScriptContentCheckbox ? this.#renderCheckbox('script-content', this.#includeScriptContentCheckbox,
             i18nString(UIStrings.includeScriptContent), this.#state.includeScriptContent): ''}
           ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderCheckbox(
+            'script-source-maps',
             this.#includeSourceMapsCheckbox, i18nString(UIStrings.includeSourcemap), this.#state.includeSourceMaps): ''}
-          ${this.#renderCheckbox(this.#shouldCompressCheckbox, i18nString(UIStrings.shouldCompress), this.#state.shouldCompress)}
+          ${this.#renderCheckbox('compress-with-gzip', this.#shouldCompressCheckbox, i18nString(UIStrings.shouldCompress), this.#state.shouldCompress)}
           <div class='export-trace-options-row'><div class='export-trace-blank'></div><devtools-button
                   class="setup-button"
+                  data-export-button
                   @click=${this.#onExportClick.bind(this)}
                   .data=${{
                     variant: Buttons.Button.Variant.PRIMARY,
@@ -249,6 +298,9 @@ export class ExportTraceOptions extends HTMLElement {
                 </div>
         </div>
       </devtools-button-dialog>
+
+      ${this.#state.displayScriptContentCheckbox ? this.#renderInfoTooltip('script-content') : Lit.nothing}
+      ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderInfoTooltip('script-source-maps') : Lit.nothing}
     `;
     // clang-format on
     Lit.render(output, this.#shadow, {host: this});

package/front_end/panels/timeline/components/exportTraceOptions.css

@@ -24,3 +24,8 @@
     min-width: var(--sys-size-25)
   }
 }
+
+.info-tooltip-container {
+  max-width: var(--sys-size-28);
+  white-space: normal;
+}