chrome-devtools-frontend 1.0.1518653 → 1.0.1520139

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;
@@ -288,7 +296,7 @@ export class SearchView extends UI.Widget.VBox {
   // We throttle adding search results, otherwise we trigger DOM layout for each
   // result added.
   #throttler: Common.Throttler.Throttler;
-  #pendingSearchResults: SearchResult[] = [];
+  #searchResults: SearchResult[] = [];
 
   constructor(settingKey: string, throttler: Common.Throttler.Throttler, view = DEFAULT_VIEW) {
     super({
@@ -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,25 +450,18 @@ export class SearchView extends UI.Widget.VBox {
       this.#onIndexingFinished();
       return;
     }
-    if (!this.#searchResultsPane) {
-      this.#searchResultsPane = this.createSearchResultsPane();
-    }
-    this.#pendingSearchResults.push(searchResult);
-    void this.#throttler.schedule(async () => this.#addPendingSearchResults());
+    this.#searchResults.push(searchResult);
+    void this.#throttler.schedule(async () => this.#setSearchResults());
   }
 
-  protected createSearchResultsPane(): SearchResultsPane {
-    return new SearchResultsPane((this.#searchConfig as Workspace.SearchConfig.SearchConfig));
-  }
-
-  #addPendingSearchResults(): void {
-    for (const searchResult of this.#pendingSearchResults) {
+  #setSearchResults(): void {
+    this.#searchMatchesCount = 0;
+    this.#searchResultsCount = 0;
+    this.#nonEmptySearchResultsCount = 0;
+    for (const searchResult of this.#searchResults) {
       this.#addSearchResult(searchResult);
-      if (searchResult.matchesCount()) {
-        this.#searchResultsPane?.addSearchResult(searchResult);
-      }
     }
-    this.#pendingSearchResults = [];
+    this.performUpdate();
   }
 
   #onSearchFinished(searchId: number, finished: boolean): void {
@@ -463,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);
   }
 
@@ -484,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();
@@ -497,12 +503,12 @@ export class SearchView extends UI.Widget.VBox {
     if (this.#searchScope) {
       this.#searchScope.stopSearch();
     }
-    this.#searchConfig = null;
   }
 
   #searchStarted(): void {
     this.#searchMatchesCount = 0;
     this.#searchResultsCount = 0;
+    this.#searchResults = [];
     this.#nonEmptySearchResultsCount = 0;
     if (!this.#searchingView) {
       this.#searchingView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.searching), '');
@@ -541,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 {
@@ -590,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/searchResultsPane.css

@@ -31,6 +31,11 @@ li.search-result {
   white-space: pre;
 }
 
+li.search-result .tree-element-title {
+  display: flex;
+  width: 100%;
+}
+
 li.search-result:hover {
   background-color: var(--sys-color-state-hover-on-subtle);
 }
@@ -68,6 +73,10 @@ li.search-match {
   white-space: pre;
 }
 
+li.search-match .tree-element-title {
+  display: flex;
+}
+
 li.search-match.selected:focus-visible {
   background: var(--sys-color-tonal-container);
 }

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/security/CookieControlsView.ts

@@ -186,8 +186,9 @@ export class CookieControlsView extends UI.Widget.VBox {
           <devtools-switch
             .checked=${Boolean(toggleEnabledSetting.get())}
             .disabled=${Boolean(enterpriseEnabledSetting.get())}
+            .label=${'Temporarily limit third-party cookies, only when DevTools is open'}
+            data-testid="cookie-control-override"
             @switchchange=${()=>{input.inputChanged(!toggleEnabledSetting.get(), toggleEnabledSetting);}}
-            aria-label="Temporarily limit third-party cookies, only when DevTools is open"
             jslog=${VisualLogging.toggle(toggleEnabledSetting.name).track({click: true})}
           >
           </devtools-switch>

package/front_end/panels/settings/AISettingsTab.ts

@@ -381,8 +381,10 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
           text: noLogging ? i18nString(UIStrings.codeSuggestionsSendDataNoLogging) :
                             i18nString(UIStrings.codeSuggestionsSendData)
         }],
-        // TODO: Add a relevant link
-        learnMoreLink: {url: '', linkJSLogContext: 'learn-more.code-completion'},
+        learnMoreLink: {
+          url: ' https://developers.chrome.com/docs/devtools/ai-assistance/code-completion',
+          linkJSLogContext: 'learn-more.code-completion'
+        },
         settingExpandState: {
           isSettingExpanded: false,
           expandSettingJSLogContext: 'code-completion.accordion',
@@ -590,8 +592,9 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
           .checked=${Boolean(setting.get()) && !isDisabled}
           .jslogContext=${setting.name || ''}
           .disabled=${isDisabled}
+          .label=${disabledReasonsJoined || settingData.enableSettingText}
+          data-testid=${settingData.enableSettingText}
           @switchchange=${this.#toggleSetting.bind(this, setting)}
-          aria-label=${disabledReasonsJoined || settingData.enableSettingText}
         ></devtools-switch>
       </div>
       <div class=${classMap(detailsClasses)}>

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

@@ -12,6 +12,7 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as Badges from '../../../models/badges/badges.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
@@ -30,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.
@@ -252,16 +253,29 @@ function renderWarningIfNeeded(syncInfo: Host.InspectorFrontendHostAPI.SyncInfor
       'chrome://settings/syncSetup/advanced' as Platform.DevToolsPath.UrlString;
   const warningText =
       !syncInfo.isSyncActive ? i18nString(UIStrings.syncDisabled) : i18nString(UIStrings.preferencesSyncDisabled);
+  const handleClick = (event: Event): void => {
+    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
+    if (rootTarget === null) {
+      return;
+    }
+
+    void rootTarget.targetAgent().invoke_createTarget({url: warningLink}).then(result => {
+      if (result.getError()) {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(warningLink);
+      }
+    });
+    event.consume();
+  };
   // clang-format off
   return html`
-    <devtools-chrome-link .href=${warningLink}>
-      <devtools-button
-        aria-describedby=settings-sync-info
-        .iconName=${'info'}
-        .variant=${Buttons.Button.Variant.ICON}
-        .size=${Buttons.Button.Size.SMALL}>
-      </devtools-button>
-    </devtools-chrome-link>
+    <devtools-button
+      aria-describedby=settings-sync-info
+      aria-label=${warningText}
+      .iconName=${'info'}
+      .variant=${Buttons.Button.Variant.ICON}
+      .size=${Buttons.Button.Size.SMALL}
+      @click=${handleClick}>
+    </devtools-button>
     <devtools-tooltip
         id=settings-sync-info
         variant=simple>
@@ -315,7 +329,7 @@ function renderGdpSectionIfNeeded({
     // clang-format off
     return html`
       <div class="gdp-profile-header">
-        <div class="gdp-logo" role="img" tabindex="0" aria-label="Google Developer Program"></div>
+        <div class="gdp-logo" role="img" aria-label="Google Developer Program"></div>
       </div>
     `;
     // clang-format on

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -585,7 +585,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         ${i18nString(UIStrings.mobileCheckboxLabel)}
       </label>
     ` :
-                                                           html``;
+                                                           Lit.nothing;
     return html`
       <span class="full-row label">${i18nString(UIStrings.deviceModel)}</span>
       <div class="full-row brand-row" aria-label=${i18nString(UIStrings.deviceProperties)} role="group">

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -59,6 +59,9 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (showTeaser) {
       this.#teaser = new PanelCommon.AiCodeCompletionTeaser({onDetach: this.#detachAiCodeCompletionTeaser.bind(this)});
     }
+
+    this.#aiCodeCompletionDisclaimerContainer.classList.add('ai-code-completion-disclaimer-container');
+    this.#aiCodeCompletionDisclaimerContainer.style.paddingInline = 'var(--sys-size-3)';
   }
 
   static override accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
@@ -100,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([])});
@@ -184,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/sources/SourcesPanel.ts

@@ -1197,7 +1197,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     } else if (position === 'bottom') {
       vertically = true;
     } else {
-      vertically = UI.InspectorView.InspectorView.instance().element.offsetWidth < 680;
+      vertically = this.splitWidget.element.offsetWidth < 680;
     }
 
     if (this.sidebarPaneView && vertically === !this.splitWidget.isVertical()) {

package/front_end/panels/sources/sourcesView.css

@@ -14,11 +14,16 @@
 
 #sources-panel-sources-view .sources-toolbar {
   display: flex;
-  flex: 0 0 27px;
+  flex: 0 0 auto;
   background-color: var(--sys-color-cdt-base-container);
   border-top: 1px solid var(--sys-color-divider);
   overflow: hidden;
   z-index: 0;
+  align-items: flex-end;
+
+  devtools-toolbar:first-of-type {
+    flex-wrap: wrap;
+  }
 }
 
 .source-frame-debugger-script {

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/LayoutShiftDetails.ts

@@ -158,7 +158,7 @@ export class LayoutShiftDetails extends UI.Widget.Widget {
 export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElement) => void =
     (input, _output, target) => {
       if (!input.event || !input.parsedTrace) {
-        render(html``, target);
+        render(Lit.nothing, target);
         return;
       }
 

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

@@ -197,7 +197,7 @@ export interface ViewInput {
 export const DEFAULT_VIEW: (
     input: ViewInput, output: object, target: HTMLElement) => void = (input, _output, target) => {
   if (!input.request) {
-    render(html``, target);
+    render(Lit.nothing, target);
     return;
   }
   const {request} = input;

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

@@ -86,7 +86,7 @@ export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElemen
       const {activeEvent, eventToInsightsMap} = input;
       const relatedInsights = activeEvent ? eventToInsightsMap.get(activeEvent) ?? [] : [];
       if (!activeEvent || eventToInsightsMap.size === 0 || relatedInsights.length === 0) {
-        render(html``, target);
+        render(Lit.nothing, target);
         return;
       }
 

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

@@ -478,7 +478,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
       insightSetKey,
     } = this.#data;
     if (!parsedTrace?.insights || !insightSetKey) {
-      Lit.render(html``, this.#shadow, {host: this});
+      Lit.render(Lit.nothing, this.#shadow, {host: this});
       return;
     }
 

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: 8b6a2b940e6b293e99d648cdf34f8d26ae731d64
+Revision: c0cd408650a942d836b07c15facd3f4fede1d578
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/puppeteer/README.chromium

@@ -1,10 +1,10 @@
 Name: Puppeteer Core
 Short Name: Puppeteer Core
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core
-Version: 24.22.0
+Version: 24.22.3
 License: Apache-2.0
 License File: LICENSE
-Revision: 0e2affad10d4e4e19ef07504d9b8784b3da9ff91
+Revision: cb4342d28e3450852cbf3c21e16bbe2dc40747df
 Security Critical: no
 Shipped: yes
 Update Mechanism: Autoroll

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/bidi/core/Realm.d.ts

@@ -34,8 +34,8 @@ export declare abstract class Realm extends EventEmitter<{
 }> {
     #private;
     protected readonly disposables: {
-        "__#59109@#disposed": boolean;
-        "__#59109@#stack": Disposable[];
+        "__#59155@#disposed": boolean;
+        "__#59155@#stack": Disposable[];
         readonly disposed: boolean;
         dispose(): void;
         use<T extends Disposable | null | undefined>(value: T): T;