chrome-devtools-frontend 1.0.1566234 → 1.0.1567721

package/front_end/panels/application/ResourcesPanel.ts

@@ -218,6 +218,13 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     this.deviceBoundSessionsView.showSession(model, site, sessionId);
     this.showView(this.deviceBoundSessionsView);
   }
+  showDeviceBoundSessionDefault(model: DeviceBoundSessionsModel, title: string, description: string): void {
+    if (!this.deviceBoundSessionsView) {
+      this.deviceBoundSessionsView = new DeviceBoundSessionsView();
+    }
+    this.deviceBoundSessionsView.showDefault(model, title, description);
+    this.showView(this.deviceBoundSessionsView);
+  }
 }
 
 export class ResourceRevealer implements Common.Revealer.Revealer<SDK.Resource.Resource> {

package/front_end/panels/application/deviceBoundSessionsView.css

@@ -11,8 +11,17 @@
   display: block;
 }
 
-.device-bound-session-view-wrapper {
+.device-bound-session-view-wrapper, .device-bound-session-sidebar {
   overflow-y: auto;
   scroll-behavior: smooth;
   padding-bottom: 20px;
 }
+
+.device-bound-session-no-events-wrapper, .device-bound-session-no-event-details {
+  padding: 0 20px;
+}
+
+.device-bound-sessions-toolbar {
+  background-color: var(--sys-color-cdt-base-container);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+}

package/front_end/panels/common/AiCodeGenerationUpgradeDialog.ts

@@ -0,0 +1,115 @@
+// Copyright 2026 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 @devtools/no-lit-render-outside-of-view */
+
+import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+
+import styles from './aiCodeGenerationUpgradeDialog.css.js';
+
+const {html} = Lit;
+
+const UIStringsNotTranslate = {
+  /**
+   * @description Header text for the upgrade notice dialog.
+   */
+  codeCompletionJustGotBetter: 'Code completion just got better',
+  /**
+   * @description First item in the description
+   */
+  asYouType: 'As you type, DevTools generates code suggestions to help you code faster.',
+  /**
+   * @description Second item in the description
+   */
+  describeCodeInComment:
+      'In Console and Sources, you can now describe the code you need in a comment, then press Ctrl+I to generate it.',
+  /**
+   * @description Second item in the description
+   */
+  describeCodeInCommentForMacOs:
+      'In Console and Sources, you can now describe the code you need in a comment, then press Cmd+I to generate it.',
+  /**
+   * @description Text for the manage in settings button in the upgrade notice dialog.
+   */
+  manageInSettings: 'Manage in settings',
+  /**
+   * @description Text for the got it button in the upgrade notice dialog.
+   */
+  gotIt: 'Got it',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+
+export class AiCodeGenerationUpgradeDialog {
+  static show(): void {
+    const dialog = new UI.Dialog.Dialog();
+    dialog.setAriaLabel(lockedString(UIStringsNotTranslate.codeCompletionJustGotBetter));
+    // clang-format off
+    Lit.render(html`
+      <div class="ai-code-generation-upgrade-dialog">
+        <style>
+          ${styles}
+        </style>
+        <header>
+          <div class="header-icon-container">
+            <devtools-icon name="pen-spark"></devtools-icon>
+          </div>
+          <h2 tabindex="-1">
+            ${lockedString(UIStringsNotTranslate.codeCompletionJustGotBetter)}
+          </h2>
+        </header>
+        <main class="reminder-container">
+          <div class="reminder-item">
+            <devtools-icon class="reminder-icon" name="code"></devtools-icon>
+            <span>${lockedString(UIStringsNotTranslate.asYouType)}</span>
+          </div>
+          <div class="reminder-item">
+            <devtools-icon class="reminder-icon" name="text-analysis"></devtools-icon>
+            <span>
+              ${Host.Platform.isMac() ?
+                  lockedString(UIStringsNotTranslate.describeCodeInCommentForMacOs) :
+                  lockedString(UIStringsNotTranslate.describeCodeInComment)}
+            </span>
+          </div>
+        </main>
+        <footer>
+          <div class="right-buttons">
+            <devtools-button
+              @click=${() => {
+                void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+                }}
+              .jslogContext=${'ai-code-generation-upgrade-dialog.manage-in-settings'}
+              .variant=${Buttons.Button.Variant.OUTLINED}
+              aria-label=${lockedString(UIStringsNotTranslate.manageInSettings)}>
+              ${lockedString(UIStringsNotTranslate.manageInSettings)}
+            </devtools-button>
+            <devtools-button
+              @click=${() => {
+                  dialog.hide();
+                }}
+              .jslogContext=${'ai-code-generation-upgrade-dialog.continue'}
+              .variant=${Buttons.Button.Variant.PRIMARY}>
+              ${lockedString(UIStringsNotTranslate.gotIt)}
+            </devtools-button>
+          </div>
+        </footer>
+      </div>`, dialog.contentElement);
+    // clang-format on
+
+    dialog.setOutsideClickCallback(ev => {
+      ev.consume(true);  // true = preventDefault()
+      dialog.hide();
+    });
+
+    dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+    dialog.setDimmed(true);
+    dialog.show();
+  }
+
+  private constructor() {
+  }
+}

package/front_end/panels/common/aiCodeGenerationUpgradeDialog.css

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+
+.ai-code-generation-upgrade-dialog {
+  width: var(--sys-size-33);
+  padding: var(--sys-size-9);
+
+  header {
+    display: flex;
+    gap: var(--sys-size-8);
+    margin-bottom: var(--sys-size-6);
+    align-items: center;
+
+    h2 {
+      margin: 0;
+      color: var(--sys-color-on-surface);
+      font: var(--sys-typescale-headline5);
+    }
+
+    .header-icon-container {
+      background: linear-gradient(
+        135deg,
+        var(--sys-color-gradient-primary),
+        var(--sys-color-gradient-tertiary)
+      );
+      border-radius: var(--sys-size-4);
+      min-height: var(--sys-size-14);
+      min-width: var(--sys-size-14);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      devtools-icon {
+        width: var(--sys-size-9);
+        height: var(--sys-size-9);
+      }
+    }
+  }
+
+  .reminder-container {
+    border-radius: var(--sys-size-6);
+    background-color: var(--sys-color-surface4);
+    padding: var(--sys-size-9);
+    gap: var(--sys-size-6);
+    display: flex;
+    flex-direction: column;
+
+    .reminder-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--sys-size-5);
+      font: var(--sys-typescale-body4-regular);
+
+      devtools-icon.reminder-icon {
+        width: var(--sys-size-8);
+        height: var(--sys-size-8);
+      }
+    }
+  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-end;
+    margin-top: var(--sys-size-8);
+    min-width: var(--sys-size-28);
+
+    .right-buttons {
+      display: flex;
+      gap: var(--sys-size-5);
+    }
+  }
+}

package/front_end/panels/common/common.ts

@@ -96,6 +96,7 @@ export class TypeToAllowDialog {
 
 export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
 export * as AiCodeGenerationTeaser from './AiCodeGenerationTeaser.js';
+export {AiCodeGenerationUpgradeDialog} from './AiCodeGenerationUpgradeDialog.js';
 export {AnnotationManager} from './AnnotationManager.js';
 export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -416,6 +416,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #eventListeners: Common.EventTarget.EventDescriptor[] = [];
   #isForWarning: boolean;
   #callShowTooltip = false;
+  #startTime = 0;
 
   constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
     super(element);
@@ -586,6 +587,13 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       this.#abortController.abort();
     }
     if (this.#state === State.GENERATING || this.#state === State.PARTIAL_TEASER) {
+      if (this.#startTime) {
+        if (this.#mainText) {
+          Host.userMetrics.consoleInsightTeaserAbortedAfterFirstCharacter(performance.now() - this.#startTime);
+        } else {
+          Host.userMetrics.consoleInsightTeaserAbortedBeforeFirstCharacter(performance.now() - this.#startTime);
+        }
+      }
       this.#mainText = '';
       this.#state = State.READY;
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationAborted);
@@ -615,7 +623,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.#state = State.GENERATING;
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationStarted);
     this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS);
-    const startTime = performance.now();
+    this.#startTime = performance.now();
     let teaserText = '';
     let firstChunkReceived = false;
     try {
@@ -626,7 +634,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
         this.requestUpdate();
         if (!firstChunkReceived) {
           firstChunkReceived = true;
-          Host.userMetrics.consoleInsightTeaserFirstChunkGenerated(performance.now() - startTime);
+          Host.userMetrics.consoleInsightTeaserFirstChunkGenerated(performance.now() - this.#startTime);
         }
       }
     } catch (err) {
@@ -644,7 +652,13 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     }
 
     clearTimeout(this.#timeoutId);
-    Host.userMetrics.consoleInsightTeaserGenerated(performance.now() - startTime);
+    const duration = performance.now() - this.#startTime;
+    Host.userMetrics.consoleInsightTeaserGenerated(duration);
+    if (teaserText.length > 300) {
+      Host.userMetrics.consoleInsightLongTeaserGenerated(duration);
+    } else {
+      Host.userMetrics.consoleInsightShortTeaserGenerated(duration);
+    }
     this.#state = State.TEASER;
     this.#mainText = teaserText;
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationCompleted);

package/front_end/panels/issues/AffectedSourcesView.ts

@@ -44,7 +44,6 @@ export class AffectedSourcesView extends AffectedResourcesView {
     // 'click' neither 'keydown' if that key is the 'Enter' key.
     // Also, this element has a context menu, so we should be able to
     // track when the user use the context menu too.
-    // TODO(crbug.com/1108503): Add some mechanism to be able to add telemetry to this element.
     const anchorElement =
         Components.Linkifier.Linkifier.linkifyURL(url as Platform.DevToolsPath.UrlString, linkifierURLOptions);
     anchorElement.setAttribute('jslog', `${VisualLogging.link('source-location').track({click: true})}`);

package/front_end/panels/issues/IssuesPane.ts

@@ -270,7 +270,6 @@ export class IssuesPane extends UI.Widget.VBox {
         thirdPartySetting, i18nString(UIStrings.includeCookieIssuesCausedBy),
         i18nString(UIStrings.includeThirdpartyCookieIssues));
     rightToolbar.appendToolbarItem(this.#showThirdPartyCheckbox);
-    this.setDefaultFocusedElement(this.#showThirdPartyCheckbox.element);
 
     rightToolbar.appendSeparator();
     const issueCounter = new IssueCounter.IssueCounter.IssueCounter();
@@ -459,9 +458,6 @@ export class IssuesPane extends UI.Widget.VBox {
       }
     } else {
       this.#issuesTree.element.hidden = true;
-      if (this.#showThirdPartyCheckbox) {
-        this.setDefaultFocusedElement(this.#showThirdPartyCheckbox.element);
-      }
       // We alreay know that issesCount is zero here.
       const hasOnlyThirdPartyIssues =
           this.#issuesManager.numberOfAllStoredIssues() - this.#issuesManager.numberOfThirdPartyCookiePhaseoutIssues() >

package/front_end/panels/network/RequestTimingView.ts

@@ -374,9 +374,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     if (!target?.classList.contains('network-fetch-timing-bar-clickable')) {
       return;
     }
-    const isChecked = target.ariaChecked === 'false';
-    target.ariaChecked = isChecked ? 'true' : 'false';
-    if (!isChecked) {
+    const isExpanded = target.ariaExpanded === 'true';
+    target.ariaExpanded = isExpanded ? 'false' : 'true';
+    if (!isExpanded) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelServiceWorkerRespondWith);
     }
   };
@@ -454,8 +454,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             <tr>
               ${isClickable(range) ? html`<td
                   tabindex=0
-                  role=switch
-                  aria-checked=false
+                  role=button
+                  aria-expanded=false
                   @click=${onActivate}
                   @keydown=${onActivate}
                   class=network-fetch-timing-bar-clickable>
@@ -589,21 +589,6 @@ export class RequestTimingView extends UI.Widget.VBox {
     this.#view(input, {}, this.contentElement);
   }
 
-  private onToggleFetchDetails(fetchDetailsElement: Element, event: Event): void {
-    if (!event.target) {
-      return;
-    }
-
-    const target = (event.target as Element);
-    if (target.classList.contains('network-fetch-timing-bar-clickable')) {
-      const expanded = target.getAttribute('aria-checked') === 'true';
-      target.setAttribute('aria-checked', String(!expanded));
-
-      fetchDetailsElement.classList.toggle('network-fetch-timing-bar-details-collapsed');
-      fetchDetailsElement.classList.toggle('network-fetch-timing-bar-details-expanded');
-    }
-  }
-
   #fetchDetailsTree(): UI.TreeOutline.TreeOutlineInShadow|undefined {
     if (!this.#request?.fetchedViaServiceWorker) {
       return undefined;

package/front_end/panels/network/networkTimingTable.css

@@ -145,13 +145,13 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
   left: -12px;
 }
 
-tr:has([aria-checked="false"].network-fetch-timing-bar-clickable) ~ .router-evaluation-timing-bar-details,
-tr:has([aria-checked="false"].network-fetch-timing-bar-clickable) ~ .network-fetch-timing-bar-details {
+tr:has([aria-expanded="false"].network-fetch-timing-bar-clickable) ~ .router-evaluation-timing-bar-details,
+tr:has([aria-expanded="false"].network-fetch-timing-bar-clickable) ~ .network-fetch-timing-bar-details {
   display: none;
 }
 
-tr:has([aria-checked].network-fetch-timing-bar-clickable) ~ .router-evaluation-timing-bar-details,
-tr:has([aria-checked].network-fetch-timing-bar-clickable) ~ .network-fetch-timing-bar-details {
+tr:has([aria-expanded="true"].network-fetch-timing-bar-clickable) ~ .router-evaluation-timing-bar-details,
+tr:has([aria-expanded="true"].network-fetch-timing-bar-clickable) ~ .network-fetch-timing-bar-details {
   display: block;
 }
 
@@ -159,7 +159,7 @@ tr:has([aria-checked].network-fetch-timing-bar-clickable) ~ .network-fetch-timin
   background-color: var(--sys-color-state-focus-highlight);
 }
 
-.network-fetch-timing-bar-clickable[aria-checked="true"]::before {
+.network-fetch-timing-bar-clickable[aria-expanded="true"]::before {
   transform: rotate(90deg);
 }
 

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

@@ -610,6 +610,7 @@ export class StepEditor extends LitElement {
     return html`
       <devtools-button
         title=${opts.title}
+        .accessibleLabel=${opts.title}
         .size=${Buttons.Button.Size.SMALL}
         .iconName=${opts.iconName}
         .variant=${Buttons.Button.Variant.ICON}
@@ -658,8 +659,9 @@ export class StepEditor extends LitElement {
     this.#renderedAttributes.add('type');
     // clang-format off
     return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type')}>
-      <div>type<span class="separator">:</span></div>
+      <div id="type">type<span class="separator">:</span></div>
       <devtools-suggestion-input
+        aria-labelledby="type"
         .disabled=${!editable || this.disabled}
         .options=${Object.values(Models.Schema.StepType)}
         .placeholder=${defaultValuesByAttribute.type}
@@ -678,9 +680,10 @@ export class StepEditor extends LitElement {
     }
     // clang-format off
     return html`<div class="row attribute" data-attribute=${attribute} jslog=${VisualLogging.treeItem(Platform.StringUtilities.toKebabCase(attribute))}>
-      <div>${attribute}<span class="separator">:</span></div>
+      <div id=${attribute}>${attribute}<span class="separator">:</span></div>
       <devtools-suggestion-input
         .disabled=${this.disabled}
+        aria-labelledby=${attribute}
         .placeholder=${defaultValuesByAttribute[attribute].toString()}
         .value=${live(attributeValue)}
         .mimeType=${(() => {
@@ -723,13 +726,14 @@ export class StepEditor extends LitElement {
     return html`
       <div class="attribute" data-attribute="frame" jslog=${VisualLogging.treeItem('frame')}>
         <div class="row">
-          <div>frame<span class="separator">:</span></div>
+          <div id="frame">frame<span class="separator">:</span></div>
           ${this.#renderDeleteButton('frame')}
         </div>
         ${this.state.frame.map((frame, index, frames) => {
           return html`
             <div class="padded row">
               <devtools-suggestion-input
+                aria-labelledby="frame"
                 .disabled=${this.disabled}
                 .placeholder=${defaultValuesByAttribute.frame[0].toString()}
                 .value=${live(frame.toString())}
@@ -806,7 +810,7 @@ export class StepEditor extends LitElement {
       </div>
       ${this.state.selectors.map((selector, index, selectors) => {
         return html`<div class="padded row" data-selector-path=${index}>
-            <div>selector #${index + 1}<span class="separator">:</span></div>
+            <div id="selector-${index}">selector #${index + 1}<span class="separator">:</span></div>
             ${this.#renderInlineButton({
               class: 'add-selector',
               title: i18nString(UIStrings.addSelector),
@@ -843,6 +847,7 @@ export class StepEditor extends LitElement {
               data-selector-path="${index}.${partIndex}"
             >
               <devtools-suggestion-input
+                aria-labelledby="selector-${index}"
                 .disabled=${this.disabled}
                 .placeholder=${defaultValuesByAttribute.selectors[0][0]}
                 .value=${live(part)}
@@ -925,12 +930,13 @@ export class StepEditor extends LitElement {
       </div>
       ${this.state.assertedEvents.map((event, index) => {
         return html` <div class="padded row" jslog=${VisualLogging.treeItem('event-type')}>
-            <div>type<span class="separator">:</span></div>
-            <div>${event.type}</div>
+            <div id="event-type">type<span class="separator">:</span></div>
+            <div aria-labelledby="event-type">${event.type}</div>
           </div>
           <div class="padded row" jslog=${VisualLogging.treeItem('event-title')}>
-            <div>title<span class="separator">:</span></div>
+            <div id="event-title">title<span class="separator">:</span></div>
             <devtools-suggestion-input
+              aria-labelledby="event-title"
               .disabled=${this.disabled}
               .placeholder=${defaultValuesByAttribute.assertedEvents[0].title}
               .value=${live(event.title ?? '')}
@@ -950,9 +956,10 @@ export class StepEditor extends LitElement {
               })}
             ></devtools-suggestion-input>
           </div>
-          <div class="padded row" jslog=${VisualLogging.treeItem('event-url')}>
+          <div  id="event-url" class="padded row" jslog=${VisualLogging.treeItem('event-url')}>
             <div>url<span class="separator">:</span></div>
             <devtools-suggestion-input
+              aria-labelledby="event-url"
               .disabled=${this.disabled}
               .placeholder=${defaultValuesByAttribute.assertedEvents[0].url}
               .value=${live(event.url ?? '')}

package/front_end/panels/settings/AISettingsTab.ts

@@ -8,6 +8,7 @@ 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 AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as AiCodeGeneration from '../../models/ai_code_generation/ai_code_generation.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Input from '../../ui/components/input/input.js';
 import * as Switch from '../../ui/components/switch/switch.js';
@@ -121,7 +122,7 @@ const UIStrings = {
   /**
    * @description Text describing the 'Code suggestions' feature
    */
-  helpUnderstandCodeSuggestions: 'Get help completing your code',
+  helpUnderstandCodeSuggestions: 'Write code faster with AI-powered suggestions',
   /**
    * @description Text which is a hyperlink to more documentation
    */
@@ -172,6 +173,21 @@ const UIStrings = {
    */
   asYouTypeCodeSuggestions:
       'As you type in the Console or Sources panel, you’ll get code suggestions. Press Tab to accept one.',
+  /**
+   * @description First item in the description of the 'Code suggestions' feature [updated]
+   */
+  asYouTypeRelevantDataIsBeingSentToGoogle:
+      'As you type, relevant data is being sent to Google to generate code suggestions. Press Tab to accept.',
+  /**
+   * @description Second item in the description of the 'Code suggestions' feature [new]
+   */
+  describeCodeInComment:
+      'In Console or Sources, describe the code you need in a comment, then press Ctrl+I to generate it.',
+  /**
+   * @description Second item in the description of the 'Code suggestions' feature [new]
+   */
+  describeCodeInCommentForMacOs:
+      'In Console or Sources, describe the code you need in a comment, then press Cmd+I to generate it.',
   /**
    * @description Explainer for which data is being sent for the 'Code suggestions' feature
    */
@@ -520,12 +536,25 @@ export class AISettingsTab extends UI.Widget.VBox {
     }
 
     if (this.#aiCodeCompletionSetting) {
+      const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+      const isAiCodeGenerationEnabled =
+          AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationEnabled(devtoolsLocale.locale);
+      const settingItems = isAiCodeGenerationEnabled ?
+          [
+            {iconName: 'code', text: i18nString(UIStrings.asYouTypeRelevantDataIsBeingSentToGoogle)}, {
+              iconName: 'text-analysis',
+              text: Host.Platform.isMac() ? i18nString(UIStrings.describeCodeInCommentForMacOs) :
+                                            i18nString(UIStrings.describeCodeInComment)
+            }
+          ] :
+          [{iconName: 'code', text: i18nString(UIStrings.asYouTypeCodeSuggestions)}];
+
       const aiCodeCompletionData: AiSettingParams = {
         settingName: i18n.i18n.lockedString('Code suggestions'),
         iconName: 'text-analysis',
         settingDescription: i18nString(UIStrings.helpUnderstandCodeSuggestions),
         enableSettingText: i18nString(UIStrings.enableAiCodeSuggestions),
-        settingItems: [{iconName: 'code', text: i18nString(UIStrings.asYouTypeCodeSuggestions)}],
+        settingItems,
         toConsiderSettingItems: [{
           iconName: 'google',
           text: noLogging ? i18nString(UIStrings.codeSuggestionsSendDataNoLogging) :

package/front_end/panels/sources/InplaceFormatterEditorAction.ts

@@ -98,13 +98,15 @@ export class InplaceFormatterEditorAction implements EditorAction {
     if (!uiSourceCode) {
       return false;
     }
-    if (uiSourceCode.project().canSetFileContent()) {
-      return true;
-    }
-    if (Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode) !== null) {
-      return true;
+    // Only show Format button for editable files
+    if (!Persistence.Persistence.PersistenceImpl.instance().hasEditableContent(uiSourceCode)) {
+      return false;
     }
-    return false;
+    // Only show Format button for JavaScript files. For other file types (JSON, CSS),
+    // the pretty-print toggle in the status bar should be used instead, which provides
+    // reversible formatting (fixes issue 378870233).
+    const mimeType = Common.ResourceType.ResourceType.simplifyContentType(uiSourceCode.mimeType());
+    return Common.ResourceType.ResourceType.isJavaScriptMimeType(mimeType);
   }
 
   private formatSourceInPlace(): void {

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -161,9 +161,15 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
         this.#uiSourceCode, this.#boundOnBindingChanged);
     this.installMessageAndDecorationListeners();
     this.updateStyle();
-    const canPrettyPrint = FormatterActions.FORMATTABLE_MEDIA_TYPES.includes(this.contentType) &&
-        !this.#uiSourceCode.project().canSetFileContent() &&
-        Persistence.Persistence.PersistenceImpl.instance().binding(this.#uiSourceCode) === null;
+    // Show pretty-print toggle if file type is formattable.
+    // For editable JavaScript files, the toggle is hidden because live edit fails on
+    // large whitespace changes. For non-JS files (JSON, CSS), the toggle can be shown
+    // because they don't have this issue (fixes issue 378870233).
+    const isFormattable = FormatterActions.FORMATTABLE_MEDIA_TYPES.includes(this.contentType);
+    const isEditable = Persistence.Persistence.PersistenceImpl.instance().hasEditableContent(this.#uiSourceCode);
+    // Check if the MIME type is JavaScript (not the resource type, which can be wrong for file system files)
+    const isJavaScript = Common.ResourceType.ResourceType.isJavaScriptMimeType(this.contentType);
+    const canPrettyPrint = isFormattable && (!isEditable || !isJavaScript);
     const autoPrettyPrint = !this.#uiSourceCode.contentType().isFromSourceMap();
     this.setCanPrettyPrint(canPrettyPrint, autoPrettyPrint);
   }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -1540,6 +1540,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
 
     let blob = new Blob(blobParts, {type: 'application/json'});
+    blobParts.length = 0;  // Don't retain this large object for the remaining lifetime of this function.
 
     if (config.shouldCompress) {
       this.statusDialog.updateStatus(i18nString(UIStrings.compressingTraceForDownload));
@@ -1560,8 +1561,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       //  blobParts.join('') === (await gzBlob.arrayBuffer().then(bytes => Common.Gzip.arrayBufferToString(bytes)))
     }
 
+    const blobType = blob.type;  // blob may be reassigned later.
+
     // In some cases Base64.encode() can return undefined; see crbug.com/436482118 for details.
-    // TODO(crbug.com/436482118): understand this edge case and fix the Base64.encode method to not just return undefined.
     let bytesAsB64: string|null = null;
     try {
       // The maximum string length in v8 is `2 ** 29 - 23`, aka 538 MB.
@@ -1569,11 +1571,17 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.statusDialog.updateStatus(i18nString(UIStrings.encodingTraceForDownload));
       this.statusDialog.updateProgressBar(i18nString(UIStrings.encodingTraceForDownload), 100);
       bytesAsB64 = await Common.Base64.encode(blob);
-    } catch {
+      blob = new Blob();  // Don't retain this large object for the remaining lifetime of this function.
+    } catch (err) {
+      if (err instanceof Error && err.message.startsWith('failed to convert to base64')) {
+        // Expected and handled below.
+      } else {
+        throw err;
+      }
     }
 
-    if (bytesAsB64?.length) {
-      const contentData = new TextUtils.ContentData.ContentData(bytesAsB64, /* isBase64=*/ true, blob.type);
+    if (bytesAsB64) {
+      const contentData = new TextUtils.ContentData.ContentData(bytesAsB64, /* isBase64=*/ true, blobType);
       await Workspace.FileManager.FileManager.instance().save(fileName, contentData, /* forceSaveAs=*/ true);
       Workspace.FileManager.FileManager.instance().close(fileName);
     } else {

package/front_end/panels/timeline/components/insights/DuplicatedJavaScript.ts

@@ -97,7 +97,7 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScr
         jslog=${VisualLogging.action(`timeline.treemap.${this.internalName}-insight`).track({
         click: true
       })}
-        @click=${this.#openTreemap}
+        @click=${this.#openTreemap.bind(this)}
       >View Treemap</devtools-button>`;
     }
 

package/front_end/third_party/chromium/README.chromium

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