chrome-devtools-frontend 1.0.1565595 → 1.0.1567721

package/front_end/panels/application/ResourcesPanel.ts

@@ -13,6 +13,8 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ApplicationPanelSidebar, StorageCategoryView} from './ApplicationPanelSidebar.js';
 import {CookieItemsView} from './CookieItemsView.js';
+import type {DeviceBoundSessionsModel} from './DeviceBoundSessionsModel.js';
+import {DeviceBoundSessionsView} from './DeviceBoundSessionsView.js';
 import {DOMStorageItemsView} from './DOMStorageItemsView.js';
 import type {DOMStorage} from './DOMStorageModel.js';
 import {ExtensionStorageItemsView} from './ExtensionStorageItemsView.js';
@@ -33,6 +35,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   private domStorageView: DOMStorageItemsView|null;
   private extensionStorageView: ExtensionStorageItemsView|null;
   private cookieView: CookieItemsView|null;
+  private deviceBoundSessionsView: DeviceBoundSessionsView|null;
   private readonly sidebar: ApplicationPanelSidebar;
 
   private constructor() {
@@ -58,6 +61,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     this.extensionStorageView = null;
 
     this.cookieView = null;
+    this.deviceBoundSessionsView = null;
 
     this.sidebar = new ApplicationPanelSidebar(this);
     this.sidebar.show(this.panelSidebarElement());
@@ -206,6 +210,21 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
       }
     });
   }
+
+  showDeviceBoundSession(model: DeviceBoundSessionsModel, site: string, sessionId?: string): void {
+    if (!this.deviceBoundSessionsView) {
+      this.deviceBoundSessionsView = new DeviceBoundSessionsView();
+    }
+    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/application.ts

@@ -8,6 +8,9 @@ import * as BackgroundServiceModel from './BackgroundServiceModel.js';
 import * as BackgroundServiceView from './BackgroundServiceView.js';
 import * as BounceTrackingMitigationsTreeElement from './BounceTrackingMitigationsTreeElement.js';
 import * as CookieItemsView from './CookieItemsView.js';
+import * as DeviceBoundSessionsModel from './DeviceBoundSessionsModel.js';
+import * as DeviceBoundSessionsTreeElement from './DeviceBoundSessionsTreeElement.js';
+import * as DeviceBoundSessionsView from './DeviceBoundSessionsView.js';
 import * as DOMStorageItemsView from './DOMStorageItemsView.js';
 import * as DOMStorageModel from './DOMStorageModel.js';
 import * as ExtensionStorageItemsView from './ExtensionStorageItemsView.js';
@@ -45,6 +48,9 @@ export {
   BackgroundServiceView,
   BounceTrackingMitigationsTreeElement,
   CookieItemsView,
+  DeviceBoundSessionsModel,
+  DeviceBoundSessionsTreeElement,
+  DeviceBoundSessionsView,
   DOMStorageItemsView,
   DOMStorageModel,
   ExtensionStorageItemsView,

package/front_end/panels/application/deviceBoundSessionsView.css

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+.device-bound-session-grid-wrapper {
+  padding: 0 20px 5px;
+}
+
+.device-bound-session-grid-wrapper devtools-data-grid {
+  display: block;
+}
+
+.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

@@ -11,6 +11,7 @@ import * as Root from '../../core/root/root.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import type * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -20,7 +21,7 @@ import consoleInsightTeaserStyles from './consoleInsightTeaser.css.js';
 import {ConsoleViewMessage} from './ConsoleViewMessage.js';
 import {PromptBuilder} from './PromptBuilder.js';
 
-const {render, html} = Lit;
+const {render, html, Directives: {ref}} = Lit;
 
 const BUILT_IN_AI_DOCUMENTATION = 'https://developer.chrome.com/docs/ai/built-in';
 
@@ -153,6 +154,10 @@ interface ViewInput {
   isForWarning: boolean;
 }
 
+interface ViewOutput {
+  tooltip?: Tooltips.Tooltip.Tooltip;
+}
+
 function renderNoModel(input: ViewInput): Lit.TemplateResult {
   // clang-format off
   return html`
@@ -347,7 +352,7 @@ function renderTeaser(input: ViewInput): Lit.TemplateResult {
   // clang-format on
 }
 
-export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
   if (input.isInactive) {
     render(Lit.nothing, target);
     return;
@@ -357,8 +362,11 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
   render(html`
     <style>${consoleInsightTeaserStyles}</style>
     <devtools-tooltip
+      ${ref(element => {
+        output.tooltip = element as Tooltips.Tooltip.Tooltip;
+      })}
       id=${'teaser-' + input.uuid}
-      hover-delay=500
+      hover-delay=1000
       variant="rich"
       vertical-distance-increase=-6
       prefer-span-left
@@ -407,6 +415,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #state: State;
   #eventListeners: Common.EventTarget.EventDescriptor[] = [];
   #isForWarning: boolean;
+  #callShowTooltip = false;
+  #startTime = 0;
 
   constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
     super(element);
@@ -420,6 +430,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.#boundOnSessionCreation = this.#onSessionCreation.bind(this);
     this.#builtInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
     this.#state = this.#builtInAi.hasSession() ? State.READY : State.NO_MODEL;
+    this.#callShowTooltip = true;
     this.requestUpdate();
   }
 
@@ -571,11 +582,18 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     }
   }
 
-  abortTeaserGeneration(): void {
+  abortTeaserGeneration(): {okToRemove: boolean} {
     if (this.#abortController) {
       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);
@@ -584,6 +602,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       clearTimeout(this.#timeoutId);
     }
     Common.EventTarget.removeEventListeners(this.#eventListeners);
+    return {okToRemove: this.#state !== State.TEASER};
   }
 
   setInactive(isInactive: boolean): void {
@@ -604,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 {
@@ -615,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) {
@@ -633,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);
@@ -669,6 +694,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   }
 
   override performUpdate(): Promise<void>|void {
+    const output: ViewOutput = {};
     this.#view(
         {
           onTellMeMoreClick: this.#onTellMeMoreClick.bind(this),
@@ -685,7 +711,14 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
           state: this.#state,
           isForWarning: this.#isForWarning,
         },
-        undefined, this.contentElement);
+        output, this.contentElement);
+    if (this.#callShowTooltip && output.tooltip?.hasAttribute('popover')) {
+      // The ConsoleInsightTeaser is created on hover, which means the tooltip's
+      // event listener is created after the hover event is received. We therefore
+      // explicitly call `showTooltip()`, otherwise the tooltip wouldn't show up.
+      output.tooltip.showTooltip();
+    }
+    this.#callShowTooltip = false;
   }
 
   override wasShown(): void {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -402,9 +402,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
   wasShown(): void {
     this.isVisibleInternal = true;
-    if (this.elementInternal) {
-      this.#teaser?.show(this.elementInternal, this.consoleRowWrapper);
-    }
   }
 
   onResize(): void {
@@ -413,7 +410,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   willHide(): void {
     this.isVisibleInternal = false;
     this.cachedHeight = this.element().offsetHeight;
-    this.#teaser?.detach();
   }
 
   isVisible(): boolean {
@@ -1410,14 +1406,31 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   #startTeaserGeneration(): void {
-    if (this.#teaser &&
-        Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled()) {
+    if (!this.elementInternal) {
+      return;
+    }
+    if (this.shouldShowTeaser()) {
+      if (!this.#teaser) {
+        const uuid = crypto.randomUUID();
+        this.elementInternal.setAttribute('aria-details', `teaser-${uuid}`);
+        this.#teaser = new ConsoleInsightTeaser(uuid, this);
+        this.#teaser.show(this.elementInternal, this.consoleRowWrapper);
+      }
       this.#teaser.maybeGenerateTeaser();
+    } else {  // Removes teaser if preferences have changed
+      this.#teaser?.detach();
+      this.#teaser = undefined;
     }
   }
 
   #abortTeaserGeneration(): void {
-    this.#teaser?.abortTeaserGeneration();
+    if (this.#teaser) {
+      const {okToRemove} = this.#teaser.abortTeaserGeneration();
+      if (okToRemove) {
+        this.#teaser.detach();
+        this.#teaser = undefined;
+      }
+    }
   }
 
   toMessageElement(): HTMLElement {
@@ -1450,12 +1463,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.consoleRowWrapper = this.elementInternal.createChild('div');
     this.consoleRowWrapper.classList.add('console-row-wrapper');
 
-    if (this.shouldShowTeaser()) {
-      const uuid = crypto.randomUUID();
-      this.elementInternal.setAttribute('aria-details', `teaser-${uuid}`);
-      this.#teaser = new ConsoleInsightTeaser(uuid, this);
-    }
-
     if (this.message.isGroupStartMessage()) {
       this.elementInternal.classList.add('console-group-title');
     }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -96,6 +96,8 @@ interface ViewInput {
   deindentSingleNode: boolean;
   currentHighlightedNode: SDK.DOMModel.DOMNode|null;
 
+  selectedNode: SDK.DOMModel.DOMNode|null;
+
   onSelectedNodeChanged:
       (event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>) => void;
   onElementsTreeUpdated: (event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>) => void;
@@ -172,6 +174,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                                    output.elementsTreeOutline.rootElement()) as ElementsTreeElement;
       treeElement = output.elementsTreeOutline.createTreeElementFor(input.currentHighlightedNode);
     }
+    if (input.selectedNode) {
+      output.elementsTreeOutline.selectDOMNode(input.selectedNode);
+    }
 
     output.highlightedTreeElement = treeElement;
     output.elementsTreeOutline.setHoverEffect(treeElement);
@@ -320,6 +325,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           deindentSingleNode: this.deindentSingleNode,
 
           currentHighlightedNode: this.#currentHighlightedNode,
+          selectedNode: this.selectedDOMNode(),
           onElementsTreeUpdated: this.onElementsTreeUpdated.bind(this),
           onSelectedNodeChanged: event => {
             this.#clearHighlightedNode();
@@ -1523,6 +1529,7 @@ export class ElementsTreeOutline extends
     domModel.addEventListener(SDK.DOMModel.Events.AttrRemoved, this.attributeRemoved, this);
     domModel.addEventListener(SDK.DOMModel.Events.CharacterDataModified, this.characterDataModified, this);
     domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
+    domModel.addEventListener(SDK.DOMModel.Events.DocumentURLChanged, this.documentURLChanged, this);
     domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
     domModel.addEventListener(
@@ -1538,6 +1545,7 @@ export class ElementsTreeOutline extends
     domModel.removeEventListener(SDK.DOMModel.Events.AttrRemoved, this.attributeRemoved, this);
     domModel.removeEventListener(SDK.DOMModel.Events.CharacterDataModified, this.characterDataModified, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.DocumentURLChanged, this.documentURLChanged, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
     domModel.removeEventListener(
@@ -1595,6 +1603,11 @@ export class ElementsTreeOutline extends
     this.updateModifiedNodesSoon();
   }
 
+  private documentURLChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMDocument>): void {
+    this.addUpdateRecord(event.data).charDataModified();
+    this.updateModifiedNodesSoon();
+  }
+
   private nodeInserted(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
     const node = event.data;
     this.addUpdateRecord((node.parentNode as SDK.DOMModel.DOMNode)).nodeInserted(node);

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -341,7 +341,9 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
 
       previousBox = boxElement;
     }
-    metricsElement.appendChild((previousBox as HTMLDivElement));
+    if (previousBox) {
+      metricsElement.appendChild(previousBox);
+    }
     metricsElement.addEventListener('mouseover', this.highlightDOMNode.bind(this, false, 'all'), false);
     metricsElement.addEventListener('mouseleave', this.highlightDOMNode.bind(this, false, 'all'), false);
     this.contentElement.removeChildren();

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;