chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/panels/network/ResourceDirectSocketChunkView.ts

@@ -42,7 +42,7 @@ const UIStrings = {
   /**
    * @description Data grid name for Direct Socket Chunk data grids
    */
-  directSocketChunk: 'Direct Socket Chunk',
+  directSocketChunk: 'Direct socket chunk',
   /**
    * @description Example for placeholder text. Note: "(direct)?socket)" is an example code and should not be translated.
    */

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -49,39 +49,39 @@ const UIStrings = {
    */
   sOpcodeS: '{PH1} (Opcode {PH2})',
   /**
-   * @description Op codes continuation frame of map in Resource Web Socket Frame View of the Network panel
+   * @description WebSocket opcode (operation code) name for a continuation frame in WebSocket messages view of the Network panel. In the WebSocket protocol, an opcode defines the frame payload type; continuation frames split large messages into multiple chunks.
    */
-  continuationFrame: 'Continuation Frame',
+  continuationFrame: 'Continuation frame',
   /**
-   * @description Op codes text frame of map in Resource Web Socket Frame View of the Network panel
+   * @description WebSocket opcode (operation code) name for a text message frame in WebSocket messages view of the Network panel. In the WebSocket protocol, an opcode defines the frame payload type.
    */
-  textMessage: 'Text Message',
+  textMessage: 'Text message',
   /**
-   * @description Op codes binary frame of map in Resource Web Socket Frame View of the Network panel
+   * @description WebSocket opcode (operation code) name for a binary message frame in WebSocket messages view of the Network panel. In the WebSocket protocol, an opcode defines the frame payload type.
    */
-  binaryMessage: 'Binary Message',
+  binaryMessage: 'Binary message',
   /**
-   * @description Op codes continuation frame of map in Resource Web Socket Frame View of the Network panel indicating that the web socket connection has been closed.
+   * @description WebSocket opcode (operation code) name for a connection close frame in WebSocket messages view of the Network panel. In the WebSocket protocol, an opcode defines the frame payload type.
    */
-  connectionCloseMessage: 'Connection Close Message',
+  connectionCloseMessage: 'Connection close message',
   /**
-   * @description Op codes ping frame of map in Resource Web Socket Frame View of the Network panel
+   * @description WebSocket opcode (operation code) name for a ping frame in WebSocket messages view of the Network panel. In the WebSocket protocol, an opcode defines the frame payload type; ping frames check connection liveness.
    */
-  pingMessage: 'Ping Message',
+  pingMessage: 'Ping message',
   /**
-   * @description Op codes pong frame of map in Resource Web Socket Frame View of the Network panel
+   * @description WebSocket opcode (operation code) name for a pong frame in WebSocket messages view of the Network panel. In the WebSocket protocol, an opcode defines the frame payload type; pong frames reply to ping frames.
    */
-  pongMessage: 'Pong Message',
+  pongMessage: 'Pong message',
   /**
-   * @description Data grid name for Web Socket Frame data grids
+   * @description Accessible name for WebSocket message data grid in WebSocket messages view of the Network panel.
    */
-  webSocketFrame: 'Web Socket Frame',
+  webSocketFrame: 'WebSocket frame',
   /**
-   * @description Text for something not available
+   * @description Text shown when a value is not available in WebSocket messages view of the Network panel.
    */
   na: 'N/A',
   /**
-   * @description Example for placeholder text
+   * @description Placeholder text for filter input in WebSocket messages view of the Network panel.
    */
   filterUsingRegex: 'Filter using regex (example: (web)?socket)',
 } as const;

package/front_end/panels/network/binaryResourceView.css

@@ -4,18 +4,20 @@
  * found in the LICENSE file.
  */
 
-.panel.network devtools-toolbar.binary-view-toolbar {
-  border-top: 1px solid var(--sys-color-divider);
-  border-bottom: 0;
-  padding-left: 5px;
-  flex: none;
-}
+@scope to (devtools-widget > *) {
+  .panel.network devtools-toolbar.binary-view-toolbar {
+    border-top: 1px solid var(--sys-color-divider);
+    border-bottom: 0;
+    padding-left: 5px;
+    flex: none;
+  }
 
-.binary-view-copied-text {
-  opacity: 100%;
-}
+  .binary-view-copied-text {
+    opacity: 100%;
+  }
 
-.binary-view-copied-text.fadeout {
-  opacity: 0%;
-  transition: opacity 1s;
+  .binary-view-copied-text.fadeout {
+    opacity: 0%;
+    transition: opacity 1s;
+  }
 }

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

@@ -27,11 +27,11 @@ const UIStrings = {
   /**
    * @description Section header for a list of the main aspects of a direct socket connection
    */
-  openInfo: 'Open Info',
+  openInfo: 'Open info',
   /**
    * @description Text in Connection info View of the Network panel
    */
-  type: 'DirectSocket Type',
+  type: 'DirectSocket type',
   /**
    * @description Text in Connection info View of the Network panel
    */

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

@@ -46,7 +46,7 @@ const UIStrings = {
   /**
    * @description Description of which letters the name of an HTTP header may contain (a-z, A-Z, 0-9, '-', or '_').
    */
-  headerNamesOnlyLetters: 'Header names should contain only letters, digits, hyphens or underscores',
+  headerNamesOnlyLetters: 'Header names should contain only letters, digits, hyphens, or underscores',
   /**
    * @description Text that is usually a hyperlink to more documentation
    */

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

@@ -65,7 +65,7 @@ const UIStrings = {
   /**
    * @description Detailed text for a success status in the Network panel
    */
-  theOperationsResultWasServedFrom: 'The operations result was served from cache.',
+  theOperationsResultWasServedFrom: 'The operation’s result was served from cache.',
   /**
    * @description Detailed text for a success status in the Network panel
    */
@@ -87,7 +87,7 @@ const UIStrings = {
   /**
    * @description Text for an error status in the Network panel
    */
-  theServersResponseWasMalformedOr: 'The servers response was malformed or otherwise invalid.',
+  theServersResponseWasMalformedOr: 'The server’s response was malformed or otherwise invalid.',
   /**
    * @description Text for an error status in the Network panel
    */

package/front_end/panels/network/network-meta.ts

@@ -26,7 +26,7 @@ const UIStrings = {
   /**
    * @description Command for showing the 'Network request blocking' tool
    */
-  showRequestConditions: 'Show Request conditions',
+  showRequestConditions: 'Show request conditions',
   /**
    * @description Title of the 'Request conditions' tool in the bottom drawer
    */

package/front_end/panels/network/network.ts

@@ -31,6 +31,7 @@ import './NetworkPanel.js';
 
 import * as BinaryResourceView from './BinaryResourceView.js';
 import * as EventSourceMessagesView from './EventSourceMessagesView.js';
+import * as FetchHeaderCommenting from './FetchHeaderCommenting.js';
 import * as LinkPreloadGenerator from './LinkPreloadGenerator.js';
 import * as NetworkConfigView from './NetworkConfigView.js';
 import * as NetworkDataGridNode from './NetworkDataGridNode.js';
@@ -61,6 +62,7 @@ import * as SignedExchangeInfoView from './SignedExchangeInfoView.js';
 export {
   BinaryResourceView,
   EventSourceMessagesView,
+  FetchHeaderCommenting,
   LinkPreloadGenerator,
   NetworkConfigView,
   NetworkDataGridNode,

package/front_end/panels/profiler/HeapDetachedElementsDataGrid.ts

@@ -111,7 +111,6 @@ export class HeapDetachedElementsDataGridNode extends DataGrid.DataGrid.DataGrid
     return count;
   }
 
-  // FIXME: is it a partial dupe of front_end/panels/elements/ElementsTreeOutlineRenderer.ts?
   #renderNode(node: SDK.DOMModel.DOMNode, target: HTMLElement): void {
     render(
         html`

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -453,7 +453,6 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
       const retainmentViewHeader = document.createElement('div');
       retainmentViewHeader.classList.add('heap-snapshot-view-resizer');
       const retainingPathsTitleDiv = retainmentViewHeader.createChild('div', 'title');
-      retainmentViewHeader.createChild('div', 'verticalResizerIcon');
       const retainingPathsTitle = retainingPathsTitleDiv.createChild('span');
       retainingPathsTitle.textContent = i18nString(UIStrings.retainers);
 
@@ -1350,7 +1349,6 @@ export class AllocationPerspective extends Perspective {
     const resizer = document.createElement('div');
     resizer.classList.add('heap-snapshot-view-resizer');
     const title = resizer.createChild('div', 'title').createChild('span');
-    resizer.createChild('div', 'verticalResizerIcon');
     title.textContent = i18nString(UIStrings.liveObjects);
     this.allocationSplitWidget.hideDefaultResizer();
     this.allocationSplitWidget.installResizer(resizer);

package/front_end/panels/profiler/heapProfiler.css

@@ -100,15 +100,6 @@
   white-space: nowrap;
 }
 
-.heap-snapshot-view .heap-snapshot-view-resizer .verticalResizerIcon {
-  /* stylelint-disable-next-line custom-property-pattern */
-  background-image: var(--image-file-toolbarResizerVertical);
-  background-repeat: no-repeat;
-  background-position: center;
-  flex: 0 0 28px;
-  margin-left: auto;
-}
-
 .heap-snapshot-view .heap-snapshot-view-resizer .title > span {
   display: inline-block;
   padding-top: 3px;

package/front_end/panels/recorder/RecorderPanel.ts

@@ -13,10 +13,9 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as PublicExtensions from '../../models/extensions/extensions.js';
 import type * as Trace from '../../models/trace/trace.js';
-import * as PanelCommon from '../../panels/common/common.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import type * as Dialogs from '../../ui/components/dialogs/dialogs.js';
+import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import type * as Menus from '../../ui/components/menus/menus.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, render} from '../../ui/lit/lit.js';
@@ -1668,7 +1667,7 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
       return true;
     }
 
-    const result = await PanelCommon.TypeToAllowDialog.show({
+    const result = await Dialogs.TypeToAllowDialog.TypeToAllowDialog.show({
       jslogContext: {
         input: 'confirm-import-recording-input',
         dialog: 'confirm-import-recording-dialog',

package/front_end/panels/screencast/ScreencastView.ts

@@ -214,7 +214,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             if (el instanceof HTMLCanvasElement) {
               output.focusCanvas = (): void => el.focus();
               canvasElement = el;
-              ScreencastView.repaintScreencastCanvas(el, input);
+              repaintScreencastCanvas(el, input);
             }
           })}></canvas>
         <div
@@ -225,7 +225,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           })}
           ${ref(el => {
             if (el instanceof HTMLElement && canvasElement && input.elementTitleData?.visible && !el.classList.contains('hidden')) {
-              ScreencastView.clampTooltipPosition(canvasElement, el, input.highlightModel);
+              clampTooltipPosition(canvasElement, el, input.highlightModel);
             }
         })}>
           <span class="screencast-tag-name">${input.elementTitleData?.tagName ?? nothing}</span>
@@ -239,6 +239,141 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   // clang-format on
 };
 
+function repaintScreencastCanvas(el: HTMLCanvasElement, input: CanvasRenderingInput): void {
+  const context = el.getContext('2d');
+  if (!context) {
+    return;
+  }
+
+  const model = input.highlightModel;
+  const config = input.highlightConfig;
+
+  const canvasWidth = el.getBoundingClientRect().width;
+  const canvasHeight = el.getBoundingClientRect().height;
+  el.width = window.devicePixelRatio * canvasWidth;
+  el.height = window.devicePixelRatio * canvasHeight;
+
+  context.save();
+  context.scale(window.devicePixelRatio, window.devicePixelRatio);
+
+  if (model && config) {
+    context.save();
+    const quads = [];
+    const isTransparent = (color: Protocol.DOM.RGBA): boolean => Boolean(color.a && color.a === 0);
+    if (model.content && config.contentColor && !isTransparent(config.contentColor)) {
+      quads.push({quad: model.content, color: config.contentColor});
+    }
+    if (model.padding && config.paddingColor && !isTransparent(config.paddingColor)) {
+      quads.push({quad: model.padding, color: config.paddingColor});
+    }
+    if (model.border && config.borderColor && !isTransparent(config.borderColor)) {
+      quads.push({quad: model.border, color: config.borderColor});
+    }
+    if (model.margin && config.marginColor && !isTransparent(config.marginColor)) {
+      quads.push({quad: model.margin, color: config.marginColor});
+    }
+
+    for (let i = quads.length - 1; i > 0; --i) {
+      drawOutlinedQuadWithClip(context, quads[i].quad, quads[i - 1].quad, quads[i].color);
+    }
+    if (quads.length > 0) {
+      drawOutlinedQuad(context, quads[0].quad, quads[0].color);
+    }
+    context.globalCompositeOperation = 'destination-over';
+  }
+
+  if (input.screencastImage) {
+    context.drawImage(input.screencastImage, 0, input.screenOffsetTop * input.screenZoom,
+                      input.screencastImage.naturalWidth * input.imageZoom,
+                      input.screencastImage.naturalHeight * input.imageZoom);
+  }
+  context.restore();
+}
+
+function cssColor(color: Protocol.DOM.RGBA): string {
+  if (!color) {
+    return 'transparent';
+  }
+  return Common.Color.Legacy.fromRGBA([color.r, color.g, color.b, color.a !== undefined ? color.a : 1])
+             .asString(Common.Color.Format.RGBA) ||
+      '';
+}
+
+function quadToPath(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad): CanvasRenderingContext2D {
+  context.beginPath();
+  context.moveTo(quad[0], quad[1]);
+  context.lineTo(quad[2], quad[3]);
+  context.lineTo(quad[4], quad[5]);
+  context.lineTo(quad[6], quad[7]);
+  context.closePath();
+  return context;
+}
+
+function drawOutlinedQuad(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad,
+                          fillColor: Protocol.DOM.RGBA): void {
+  context.save();
+  context.lineWidth = 2;
+  quadToPath(context, quad).clip();
+  context.fillStyle = cssColor(fillColor);
+  context.fill();
+  context.restore();
+}
+
+function drawOutlinedQuadWithClip(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad,
+                                  clipQuad: Protocol.DOM.Quad, fillColor: Protocol.DOM.RGBA): void {
+  context.fillStyle = cssColor(fillColor);
+  context.save();
+  context.lineWidth = 0;
+  quadToPath(context, quad).fill();
+  context.globalCompositeOperation = 'destination-out';
+  context.fillStyle = 'red';
+  quadToPath(context, clipQuad).fill();
+  context.restore();
+}
+
+function clampTooltipPosition(canvas: HTMLCanvasElement, titleElement: HTMLElement,
+                              model?: Protocol.DOM.BoxModel|null): void {
+  if (!model) {
+    return;
+  }
+  const canvasWidth = canvas.getBoundingClientRect().width;
+  const canvasHeight = canvas.getBoundingClientRect().height;
+  const titleWidth = titleElement.offsetWidth;
+  const titleHeight = titleElement.offsetHeight;
+
+  const anchorTop = model.margin[1];
+  const anchorBottom = model.margin[7];
+
+  const arrowHeight = 7;
+  let arrowDirection: 'up'|'down'|undefined;
+
+  let boxX = Math.max(2, model.margin[0]);
+  if (boxX + titleWidth > canvasWidth) {
+    boxX = canvasWidth - titleWidth - 2;
+  }
+
+  let boxY;
+  if (anchorTop > canvasHeight) {
+    boxY = canvasHeight - titleHeight - arrowHeight;
+    arrowDirection = 'down';
+  } else if (anchorBottom < 0) {
+    boxY = arrowHeight;
+    arrowDirection = 'up';
+  } else if (anchorBottom + titleHeight + arrowHeight < canvasHeight) {
+    boxY = anchorBottom + arrowHeight - 4;
+    arrowDirection = 'up';
+  } else if (anchorTop - titleHeight - arrowHeight > 0) {
+    boxY = anchorTop - titleHeight - arrowHeight + 3;
+    arrowDirection = 'down';
+  } else {
+    boxY = arrowHeight;
+  }
+
+  titleElement.style.top = `${boxY}px`;
+  titleElement.style.left = `${boxX}px`;
+  titleElement.classList.toggle('arrow-up', arrowDirection === 'up');
+  titleElement.classList.toggle('arrow-down', arrowDirection === 'down');
+}
 export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel.Highlighter {
   readonly #view: View;
   #viewOutput: ViewOutput;
@@ -373,6 +508,8 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
                                                  this.requestNavigationHistoryEvent, this);
       this.resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.CachedResourcesLoaded,
                                                  this.requestNavigationHistoryEvent, this);
+      this.resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.FrameNavigatedWithinDocument,
+                                                 this.onFrameNavigated, this);
     }
   }
 
@@ -653,98 +790,6 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
     return model;
   }
 
-  static repaintScreencastCanvas(el: HTMLCanvasElement, input: CanvasRenderingInput): void {
-    const context = el.getContext('2d');
-    if (!context) {
-      return;
-    }
-
-    const model = input.highlightModel;
-    const config = input.highlightConfig;
-
-    const canvasWidth = el.getBoundingClientRect().width;
-    const canvasHeight = el.getBoundingClientRect().height;
-    el.width = window.devicePixelRatio * canvasWidth;
-    el.height = window.devicePixelRatio * canvasHeight;
-
-    context.save();
-    context.scale(window.devicePixelRatio, window.devicePixelRatio);
-
-    if (model && config) {
-      context.save();
-      const quads = [];
-      const isTransparent = (color: Protocol.DOM.RGBA): boolean => Boolean(color.a && color.a === 0);
-      if (model.content && config.contentColor && !isTransparent(config.contentColor)) {
-        quads.push({quad: model.content, color: config.contentColor});
-      }
-      if (model.padding && config.paddingColor && !isTransparent(config.paddingColor)) {
-        quads.push({quad: model.padding, color: config.paddingColor});
-      }
-      if (model.border && config.borderColor && !isTransparent(config.borderColor)) {
-        quads.push({quad: model.border, color: config.borderColor});
-      }
-      if (model.margin && config.marginColor && !isTransparent(config.marginColor)) {
-        quads.push({quad: model.margin, color: config.marginColor});
-      }
-
-      for (let i = quads.length - 1; i > 0; --i) {
-        ScreencastView.drawOutlinedQuadWithClip(context, quads[i].quad, quads[i - 1].quad, quads[i].color);
-      }
-      if (quads.length > 0) {
-        ScreencastView.drawOutlinedQuad(context, quads[0].quad, quads[0].color);
-      }
-      context.globalCompositeOperation = 'destination-over';
-    }
-
-    if (input.screencastImage) {
-      context.drawImage(input.screencastImage, 0, input.screenOffsetTop * input.screenZoom,
-                        input.screencastImage.naturalWidth * input.imageZoom,
-                        input.screencastImage.naturalHeight * input.imageZoom);
-    }
-    context.restore();
-  }
-
-  private static cssColor(color: Protocol.DOM.RGBA): string {
-    if (!color) {
-      return 'transparent';
-    }
-    return Common.Color.Legacy.fromRGBA([color.r, color.g, color.b, color.a !== undefined ? color.a : 1])
-               .asString(Common.Color.Format.RGBA) ||
-        '';
-  }
-
-  private static quadToPath(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad): CanvasRenderingContext2D {
-    context.beginPath();
-    context.moveTo(quad[0], quad[1]);
-    context.lineTo(quad[2], quad[3]);
-    context.lineTo(quad[4], quad[5]);
-    context.lineTo(quad[6], quad[7]);
-    context.closePath();
-    return context;
-  }
-
-  private static drawOutlinedQuad(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad,
-                                  fillColor: Protocol.DOM.RGBA): void {
-    context.save();
-    context.lineWidth = 2;
-    ScreencastView.quadToPath(context, quad).clip();
-    context.fillStyle = ScreencastView.cssColor(fillColor);
-    context.fill();
-    context.restore();
-  }
-
-  private static drawOutlinedQuadWithClip(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad,
-                                          clipQuad: Protocol.DOM.Quad, fillColor: Protocol.DOM.RGBA): void {
-    context.fillStyle = ScreencastView.cssColor(fillColor);
-    context.save();
-    context.lineWidth = 0;
-    ScreencastView.quadToPath(context, quad).fill();
-    context.globalCompositeOperation = 'destination-out';
-    context.fillStyle = 'red';
-    ScreencastView.quadToPath(context, clipQuad).fill();
-    context.restore();
-  }
-
   private drawElementTitle(): void {
     if (!this.node) {
       if (this.#elementTitleData.visible) {
@@ -773,50 +818,6 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
     }
   }
 
-  static clampTooltipPosition(canvas: HTMLCanvasElement, titleElement: HTMLElement,
-                              model?: Protocol.DOM.BoxModel|null): void {
-    if (!model) {
-      return;
-    }
-    const canvasWidth = canvas.getBoundingClientRect().width;
-    const canvasHeight = canvas.getBoundingClientRect().height;
-    const titleWidth = titleElement.offsetWidth;
-    const titleHeight = titleElement.offsetHeight;
-
-    const anchorTop = model.margin[1];
-    const anchorBottom = model.margin[7];
-
-    const arrowHeight = 7;
-    let arrowDirection: 'up'|'down'|undefined;
-
-    let boxX = Math.max(2, model.margin[0]);
-    if (boxX + titleWidth > canvasWidth) {
-      boxX = canvasWidth - titleWidth - 2;
-    }
-
-    let boxY;
-    if (anchorTop > canvasHeight) {
-      boxY = canvasHeight - titleHeight - arrowHeight;
-      arrowDirection = 'down';
-    } else if (anchorBottom < 0) {
-      boxY = arrowHeight;
-      arrowDirection = 'up';
-    } else if (anchorBottom + titleHeight + arrowHeight < canvasHeight) {
-      boxY = anchorBottom + arrowHeight - 4;
-      arrowDirection = 'up';
-    } else if (anchorTop - titleHeight - arrowHeight > 0) {
-      boxY = anchorTop - titleHeight - arrowHeight + 3;
-      arrowDirection = 'down';
-    } else {
-      boxY = arrowHeight;
-    }
-
-    titleElement.style.top = `${boxY}px`;
-    titleElement.style.left = `${boxX}px`;
-    titleElement.classList.toggle('arrow-up', arrowDirection === 'up');
-    titleElement.classList.toggle('arrow-down', arrowDirection === 'down');
-  }
-
   private viewportDimensions(): {width: number, height: number} {
     const gutterSize = 30;
     const bordersSize = BORDERS_SIZE;
@@ -848,6 +849,8 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
                                               this.requestNavigationHistoryEvent, this);
       this.resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.CachedResourcesLoaded,
                                               this.requestNavigationHistoryEvent, this);
+      this.resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameNavigatedWithinDocument,
+                                              this.onFrameNavigated, this);
     }
   }
 
@@ -904,6 +907,13 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
     void this.requestNavigationHistory();
   }
 
+  private onFrameNavigated(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>): void {
+    const frame = event.data;
+    if (frame.isOutermostFrame()) {
+      this.requestNavigationHistoryEvent();
+    }
+  }
+
   private async requestNavigationHistory(): Promise<void> {
     const history = this.resourceTreeModel ? await this.resourceTreeModel.navigationHistory() : null;
     if (!history) {

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -20,7 +20,7 @@ const CITATIONS_TOOLTIP_ID = 'sources-ai-code-completion-citations-tooltip';
 
 export class AiCodeCompletionPlugin extends Plugin {
   #editor?: TextEditor.TextEditor.TextEditor;
-  #aiCodeCompletionDisclaimer?: PanelCommon.AiCodeCompletionDisclaimer;
+  #aiCodeCompletionDisclaimer?: TextEditor.AiCodeCompletionDisclaimer.AiCodeCompletionDisclaimer;
   #aiCodeCompletionDisclaimerContainer = document.createElement('div');
   #aiCodeCompletionDisclaimerToolbarItem = new UI.Toolbar.ToolbarItem(this.#aiCodeCompletionDisclaimerContainer);
   #aiCodeCompletionCitationsToolbar?: PanelCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar;
@@ -103,7 +103,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (this.#aiCodeCompletionDisclaimer) {
       return;
     }
-    this.#aiCodeCompletionDisclaimer = new PanelCommon.AiCodeCompletionDisclaimer();
+    this.#aiCodeCompletionDisclaimer = new TextEditor.AiCodeCompletionDisclaimer.AiCodeCompletionDisclaimer();
     this.#aiCodeCompletionDisclaimer.disclaimerTooltipId = DISCLAIMER_TOOLTIP_ID;
     this.#aiCodeCompletionDisclaimer.spinnerTooltipId = SPINNER_TOOLTIP_ID;
     this.#aiCodeCompletionDisclaimer.disclaimerTextVariant = 'sources';

package/front_end/panels/sources/BreakpointsView.ts

@@ -170,9 +170,9 @@ export class BreakpointsSidebarController implements UI.ContextFlavorListener.Co
         Breakpoints.BreakpointManager.Events.BreakpointAdded, this.#onBreakpointAdded, this);
     this.#breakpointManager.addEventListener(
         Breakpoints.BreakpointManager.Events.BreakpointRemoved, this.#onBreakpointRemoved, this);
-    this.#breakpointsActiveSetting = settings.moduleSetting('breakpoints-active');
+    this.#breakpointsActiveSetting = settings.resolve(SDK.SDKSettings.breakpointsActiveSettingDescriptor);
     this.#breakpointsActiveSetting.addChangeListener(this.update, this);
-    this.#pauseOnUncaughtExceptionSetting = settings.moduleSetting('pause-on-uncaught-exception');
+    this.#pauseOnUncaughtExceptionSetting = settings.resolve(SDK.SDKSettings.pauseOnUncaughtExceptionSettingDescriptor);
     this.#pauseOnUncaughtExceptionSetting.addChangeListener(this.update, this);
     this.#pauseOnCaughtExceptionSetting = settings.resolve(SDK.SDKSettings.pauseOnCaughtExceptionSettingDescriptor);
     this.#pauseOnCaughtExceptionSetting.addChangeListener(this.update, this);