chrome-devtools-frontend 1.0.973645 → 1.0.975056

package/front_end/generated/protocol.ts

@@ -307,10 +307,6 @@ export namespace Accessibility {
      * If omitted, the full tree is returned.
      */
     depth?: integer;
-    /**
-     * Deprecated. This parameter has been renamed to `depth`. If depth is not provided, max_depth will be used.
-     */
-    max_depth?: integer;
     /**
      * The frame for whose document the AX tree should be retrieved.
      * If omited, the root frame is used.
@@ -758,6 +754,7 @@ export namespace Audits {
   }
 
   export const enum MixedContentResourceType {
+    AttributionSrc = 'AttributionSrc',
     Audio = 'Audio',
     Beacon = 'Beacon',
     CSPReport = 'CSPReport',
@@ -1059,7 +1056,7 @@ export namespace Audits {
   /**
    * Represents the failure reason when a federated authentication reason fails.
    * Should be updated alongside RequestIdTokenStatus in
-   * third_party/blink/public/mojom/webid/federated_auth_request.mojom to include
+   * third_party/blink/public/mojom/devtools/inspector_issue.mojom to include
    * all cases except for success.
    */
   export const enum FederatedAuthRequestIssueReason {
@@ -1924,6 +1921,11 @@ export namespace CSS {
      * The array enumerates @supports at-rules starting with the innermost one, going outwards.
      */
     supports?: CSSSupports[];
+    /**
+     * Cascade layer array. Contains the layer hierarchy that this rule belongs to starting
+     * with the innermost layer and going outwards.
+     */
+    layers?: CSSLayer[];
   }
 
   /**
@@ -2185,6 +2187,44 @@ export namespace CSS {
     styleSheetId?: StyleSheetId;
   }
 
+  /**
+   * CSS Layer at-rule descriptor.
+   */
+  export interface CSSLayer {
+    /**
+     * Layer name.
+     */
+    text: string;
+    /**
+     * The associated rule header range in the enclosing stylesheet (if
+     * available).
+     */
+    range?: SourceRange;
+    /**
+     * Identifier of the stylesheet containing this object (if exists).
+     */
+    styleSheetId?: StyleSheetId;
+  }
+
+  /**
+   * CSS Layer data.
+   */
+  export interface CSSLayerData {
+    /**
+     * Layer name.
+     */
+    name: string;
+    /**
+     * Direct sub-layers
+     */
+    subLayers?: CSSLayerData[];
+    /**
+     * Layer order. The order determines the order of the layer in the cascade order.
+     * A higher number has higher priority in the cascade order.
+     */
+    order: number;
+  }
+
   /**
    * Information about amount of glyphs that were rendered with given font.
    */
@@ -2495,6 +2535,14 @@ export namespace CSS {
     text: string;
   }
 
+  export interface GetLayersForNodeRequest {
+    nodeId: DOM.NodeId;
+  }
+
+  export interface GetLayersForNodeResponse extends ProtocolResponseWithError {
+    rootLayer: CSSLayerData;
+  }
+
   export interface TrackComputedStyleUpdatesRequest {
     propertiesToTrack: CSSComputedStyleProperty[];
   }
@@ -2951,10 +2999,11 @@ export namespace DOM {
     ScrollbarCorner = 'scrollbar-corner',
     Resizer = 'resizer',
     InputListButton = 'input-list-button',
-    Transition = 'transition',
-    TransitionContainer = 'transition-container',
-    TransitionOldContent = 'transition-old-content',
-    TransitionNewContent = 'transition-new-content',
+    PageTransition = 'page-transition',
+    PageTransitionContainer = 'page-transition-container',
+    PageTransitionImageWrapper = 'page-transition-image-wrapper',
+    PageTransitionOutgoingImage = 'page-transition-outgoing-image',
+    PageTransitionIncomingImage = 'page-transition-incoming-image',
   }
 
   /**
@@ -5351,6 +5400,13 @@ export namespace Emulation {
      */
     userAgentMetadata?: UserAgentMetadata;
   }
+
+  export interface SetAutomationOverrideRequest {
+    /**
+     * Whether the override should be enabled.
+     */
+    enabled: boolean;
+  }
 }
 
 /**

package/front_end/models/bindings/CompilerScriptMapping.ts

@@ -30,6 +30,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
@@ -327,11 +328,11 @@ const uiSourceCodeToBinding = new WeakMap<Workspace.UISourceCode.UISourceCode, B
 
 class Binding {
   readonly #project: ContentProviderBasedProject;
-  readonly #url: string;
+  readonly #url: Platform.DevToolsPath.UrlString;
   referringSourceMaps: SDK.SourceMap.SourceMap[];
   uiSourceCode: Workspace.UISourceCode.UISourceCode|null;
 
-  constructor(project: ContentProviderBasedProject, url: string) {
+  constructor(project: ContentProviderBasedProject, url: Platform.DevToolsPath.UrlString) {
     this.#project = project;
     this.#url = url;
 

package/front_end/models/bindings/SASSSourceMapping.ts

@@ -79,7 +79,7 @@ export class SASSSourceMapping implements SourceMapping {
     for (const sourceURL of sourceMap.sourceURLs()) {
       let binding = bindings.get(sourceURL);
       if (!binding) {
-        binding = new Binding(project, sourceURL as Platform.DevToolsPath.UrlString);
+        binding = new Binding(project, sourceURL);
         bindings.set(sourceURL, binding);
       }
       binding.addSourceMap(sourceMap, header.frameId);

package/front_end/models/formatter/SourceFormatter.ts

@@ -129,7 +129,7 @@ export class SourceFormatter {
         let count = 0;
         let suffix = '';
         do {
-          formattedURL = `${uiSourceCode.url()}:formatted${suffix}`;
+          formattedURL = Common.ParsedURL.ParsedURL.concatenate(uiSourceCode.url(), ':formatted', suffix);
           suffix = `:${count++}`;
         } while (this.project.uiSourceCodeForURL(formattedURL));
         const contentProvider = TextUtils.StaticContentProvider.StaticContentProvider.fromString(

package/front_end/models/issues_manager/IssuesManager.ts

@@ -117,6 +117,12 @@ const issueCodeHandlers = new Map<
  */
 function createIssuesFromProtocolIssue(
     issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue): Issue[] {
+  if (inspectorIssue.code.toString() === 'CookieIssue') {
+    // TODO: backward compatibility for the next chromium roll
+    const details = inspectorIssue.details as {cookieIssueDetails: Protocol.Audits.SameSiteCookieIssueDetails};
+    inspectorIssue.code = Protocol.Audits.InspectorIssueCode.SameSiteCookieIssue;
+    inspectorIssue.details.sameSiteCookieIssueDetails = details.cookieIssueDetails;
+  }
   const handler = issueCodeHandlers.get(inspectorIssue.code);
   if (handler) {
     return handler(issuesModel, inspectorIssue);

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -2634,7 +2634,7 @@ export const NativeFunctions = [
   },
   {
     name: 'transitionWhile',
-    signatures: [['newNavigationAction']]
+    signatures: [['newNavigationAction','?options']]
   },
   {
     name: 'updateCurrent',
@@ -2783,6 +2783,10 @@ export const NativeFunctions = [
     name: 'CSSKeywordValue',
     signatures: [['keyword']]
   },
+  {
+    name: 'CSSMathClamp',
+    signatures: [['lower','value','upper']]
+  },
   {
     name: 'CSSMathInvert',
     signatures: [['arg']]
@@ -2907,6 +2911,14 @@ export const NativeFunctions = [
     name: 'vh',
     signatures: [['value']]
   },
+  {
+    name: 'vi',
+    signatures: [['value']]
+  },
+  {
+    name: 'vb',
+    signatures: [['value']]
+  },
   {
     name: 'vmin',
     signatures: [['value']]
@@ -2915,6 +2927,78 @@ export const NativeFunctions = [
     name: 'vmax',
     signatures: [['value']]
   },
+  {
+    name: 'svw',
+    signatures: [['value']]
+  },
+  {
+    name: 'svh',
+    signatures: [['value']]
+  },
+  {
+    name: 'svi',
+    signatures: [['value']]
+  },
+  {
+    name: 'svb',
+    signatures: [['value']]
+  },
+  {
+    name: 'svmin',
+    signatures: [['value']]
+  },
+  {
+    name: 'svmax',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvw',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvh',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvi',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvb',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvmin',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvmax',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvw',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvh',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvi',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvb',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvmin',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvmax',
+    signatures: [['value']]
+  },
   {
     name: 'qw',
     signatures: [['value']]
@@ -3625,14 +3709,6 @@ export const NativeFunctions = [
     name: 'dispatchEvent',
     signatures: [['event']]
   },
-  {
-    name: 'Event',
-    signatures: [['type','?eventInitDict']]
-  },
-  {
-    name: 'initEvent',
-    signatures: [['type','?bubbles','?cancelable']]
-  },
   {
     name: 'MutationObserver',
     signatures: [['callback']]
@@ -4513,7 +4589,8 @@ export const NativeFunctions = [
   },
   {
     name: 'end',
-    signatures: [['index']]
+    signatures: [['index']],
+    receiver: 'TimeRanges'
   },
   {
     name: 'getTrackById',
@@ -6659,11 +6736,6 @@ export const NativeFunctions = [
     name: 'requestAll',
     signatures: [['permissions']]
   },
-  {
-    name: 'requestPictureInPicture',
-    signatures: [['?options']],
-    receiver: 'HTMLElement'
-  },
   {
     name: 'PictureInPictureEvent',
     signatures: [['type','eventInitDict']]
@@ -8544,10 +8616,6 @@ export const NativeFunctions = [
     name: 'requestAdapter',
     signatures: [['?options']]
   },
-  {
-    name: 'provide',
-    signatures: [['?id_token']]
-  },
   {
     name: 'MIDIConnectionEvent',
     signatures: [['type','?eventInitDict']]

package/front_end/models/text_utils/StaticContentProvider.ts

@@ -21,14 +21,14 @@ export class StaticContentProvider implements ContentProvider {
     this.lazyContent = lazyContent;
   }
 
-  static fromString(contentURL: string, contentType: Common.ResourceType.ResourceType, content: string):
-      StaticContentProvider {
+  static fromString(
+      contentURL: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType,
+      content: string): StaticContentProvider {
     const lazyContent = (): Promise<{
       content: string,
       isEncoded: boolean,
     }> => Promise.resolve({content, isEncoded: false});
-    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    return new StaticContentProvider(contentURL as Platform.DevToolsPath.UrlString, contentType, lazyContent);
+    return new StaticContentProvider(contentURL, contentType, lazyContent);
   }
 
   contentURL(): Platform.DevToolsPath.UrlString {

package/front_end/models/workspace/UISourceCode.ts

@@ -235,6 +235,13 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.contentInternal as TextUtils.ContentProvider.DeferredContent;
   }
 
+  #decodeContent(content: TextUtils.ContentProvider.DeferredContent|null): string|null {
+    if (!content) {
+      return null;
+    }
+    return content.isEncoded && content.content ? window.atob(content.content) : content.content;
+  }
+
   async checkContentUpdated(): Promise<void> {
     if (!this.contentLoadedInternal && !this.forceLoadOnCheckContentInternal) {
       return;
@@ -260,7 +267,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       return;
     }
 
-    if (this.contentInternal?.content === updatedContent.content) {
+    if (this.#decodeContent(this.contentInternal) === this.#decodeContent(updatedContent)) {
       this.lastAcceptedContent = null;
       return;
     }

package/front_end/panels/application/AppManifestView.ts

@@ -16,6 +16,8 @@ import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 const UIStrings = {
   /**
   *@description Text in App Manifest View of the Application panel
@@ -640,7 +642,8 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
 
     this.startURLField.removeChildren();
     if (startURL) {
-      const completeURL = (Common.ParsedURL.ParsedURL.completeURL(url, startURL) as string);
+      const completeURL =
+          (Common.ParsedURL.ParsedURL.completeURL(url as Platform.DevToolsPath.UrlString, startURL) as string);
       const link = Components.Linkifier.Linkifier.linkifyURL(
           completeURL, ({text: startURL} as Components.Linkifier.LinkifyURLOptions));
       link.tabIndex = 0;
@@ -691,7 +694,8 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.newNoteUrlField.parentElement?.classList.toggle('hidden', !hasNewNoteUrl);
     this.newNoteUrlField.removeChildren();
     if (hasNewNoteUrl) {
-      const completeURL = (Common.ParsedURL.ParsedURL.completeURL(url, newNoteUrl) as string);
+      const completeURL =
+          (Common.ParsedURL.ParsedURL.completeURL(url as Platform.DevToolsPath.UrlString, newNoteUrl) as string);
       const link = Components.Linkifier.Linkifier.linkifyURL(
           completeURL, ({text: newNoteUrl} as Components.Linkifier.LinkifyURLOptions));
       link.tabIndex = 0;
@@ -761,7 +765,8 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
         shortcutSection.appendFlexedField('Description', shortcut.description);
       }
       const urlField = shortcutSection.appendFlexedField('URL');
-      const shortcutUrl = (Common.ParsedURL.ParsedURL.completeURL(url, shortcut.url) as string);
+      const shortcutUrl =
+          (Common.ParsedURL.ParsedURL.completeURL(url as Platform.DevToolsPath.UrlString, shortcut.url) as string);
       const link = Components.Linkifier.Linkifier.linkifyURL(
           shortcutUrl, ({text: shortcut.url} as Components.Linkifier.LinkifyURLOptions));
       link.tabIndex = 0;
@@ -1021,7 +1026,8 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
       imageResourceErrors.push(i18nString(UIStrings.sSrcIsNotSet, {PH1: resourceName}));
       return {imageResourceErrors};
     }
-    const imageUrl = Common.ParsedURL.ParsedURL.completeURL(baseUrl, imageResource['src']);
+    const imageUrl =
+        Common.ParsedURL.ParsedURL.completeURL(baseUrl as Platform.DevToolsPath.UrlString, imageResource['src']);
     if (!imageUrl) {
       imageResourceErrors.push(
           i18nString(UIStrings.sUrlSFailedToParse, {PH1: resourceName, PH2: imageResource['src']}));

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -32,6 +32,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -319,7 +320,7 @@ export class DOMStorageItemsView extends StorageItemsView {
     const value = entry && entry.data && entry.data.value;
     if (entry && entry.data && entry.data.value) {
       const protocol = this.domStorage.isLocalStorage ? 'localstorage' : 'sessionstorage';
-      const url = `${protocol}://${entry.key}`;
+      const url = `${protocol}://${entry.key}` as Platform.DevToolsPath.UrlString;
       const provider = TextUtils.StaticContentProvider.StaticContentProvider.fromString(
           url, Common.ResourceType.resourceTypes.XHR, (value as string));
       const preview = await SourceFrame.PreviewFactory.PreviewFactory.createPreview(provider, 'text/plain');

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -15,6 +15,9 @@ import {InterestGroupStorageView} from './InterestGroupStorageView.js';
 const UIStrings = {
   /**
   *@description Label for an item in the Application Panel Sidebar of the Application panel
+  * An interest group is an ad targeting group stored on the browser that can
+  * be used to show a certain set of advertisements in the future as the
+  * outcome of a FLEDGE auction. (https://developer.chrome.com/blog/fledge-api/)
   */
   interestGroups: 'Interest Groups',
 };

package/front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -14,22 +14,33 @@ import interestGroupAccessGridStyles from './interestGroupAccessGrid.css.js';
 const UIStrings = {
   /**
   *@description Hover text for an info icon in the Interest Group Event panel
+  * An interest group is an ad targeting group stored on the browser that can
+  * be used to show a certain set of advertisements in the future as the
+  * outcome of a FLEDGE auction.
   */
   allInterestGroupStorageEvents: 'All interest group storage events.',
   /**
     *@description Text in InterestGroupStorage Items View of the Application panel
+    * Date and time of an Interest Group storage event in a locale-
+    * dependent format.
     */
   eventTime: 'Event Time',
   /**
   *@description Text in InterestGroupStorage Items View of the Application panel
+  * Type of interest group event such as 'join', 'bid', 'win', or 'leave'.
   */
   eventType: 'Access Type',
   /**
    *@description Text in InterestGroupStorage Items View of the Application panel
+   * Owner of the interest group. The origin that controls the
+   * content of information associated with the interest group such as which
+   * ads get displayed.
   */
   groupOwner: 'Owner',
   /**
    *@description Text in InterestGroupStorage Items View of the Application panel
+   * Name of the interest group. The name is unique per-owner and identifies the
+   * interest group.
   */
   groupName: 'Name',
   /**

package/front_end/panels/console/ConsolePrompt.ts

@@ -41,6 +41,10 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private readonly eagerEvalSetting: Common.Settings.Setting<boolean>;
   private previewRequestForTest: Promise<void>|null;
   private highlightingNode: boolean;
+  // The CodeMirror state field that controls whether the argument hints are showing.
+  // If they are, the escape key will clear them. However, if they aren't, then the
+  // console drawer should be hidden as a whole.
+  #argumentHintsState: CodeMirror.StateField<CodeMirror.Tooltip|null>;
 
   constructor() {
     super();
@@ -70,13 +74,15 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.element.tabIndex = 0;
     this.previewRequestForTest = null;
     this.highlightingNode = false;
+    const argumentHints = TextEditor.JavaScript.argumentHints();
+    this.#argumentHintsState = argumentHints[0];
 
     const editorState = CodeMirror.EditorState.create({
       doc: this.initialText,
       extensions: [
         CodeMirror.keymap.of(this.editorKeymap()),
         CodeMirror.EditorView.updateListener.of(update => this.editorUpdate(update)),
-        TextEditor.JavaScript.argumentHints(),
+        argumentHints,
         TextEditor.JavaScript.completion(),
         TextEditor.Config.showCompletionHint,
         CodeMirror.javascript.javascript(),
@@ -212,8 +218,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       {
         key: 'Escape',
         run: (): boolean => {
-          TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor);
-          return true;
+          return TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor, this.#argumentHintsState);
         },
       },
       {
@@ -266,7 +271,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private async handleEnter(): Promise<void> {
     if (await this.enterWillEvaluate()) {
       this.appendCommand(this.text(), true);
-      TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor);
+      TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor, this.#argumentHintsState);
       this.editor.dispatch({
         changes: {from: 0, to: this.editor.state.doc.length},
         scrollIntoView: true,

package/front_end/panels/console/ErrorStackParser.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 
@@ -80,7 +81,10 @@ export function parseSourcePositionsFromErrorStack(
     }
     let url = parseOrScriptMatch(debuggerModel, splitResult.url);
     if (!url && Common.ParsedURL.ParsedURL.isRelativeURL(splitResult.url)) {
-      url = parseOrScriptMatch(debuggerModel, Common.ParsedURL.ParsedURL.completeURL(baseURL, splitResult.url));
+      // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+      url = parseOrScriptMatch(
+          debuggerModel,
+          Common.ParsedURL.ParsedURL.completeURL(baseURL as Platform.DevToolsPath.UrlString, splitResult.url));
     }
     if (!url) {
       return null;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -3391,7 +3391,8 @@ export class StylesSidebarPropertyRenderer {
     UI.UIUtils.createTextChild(container, 'url(');
     let hrefUrl: (string|null)|null = null;
     if (this.rule && this.rule.resourceURL()) {
-      hrefUrl = Common.ParsedURL.ParsedURL.completeURL(this.rule.resourceURL(), url);
+      // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+      hrefUrl = Common.ParsedURL.ParsedURL.completeURL(this.rule.resourceURL() as Platform.DevToolsPath.UrlString, url);
     } else if (this.node) {
       hrefUrl = this.node.resolveURL(url);
     }

package/front_end/panels/network/BinaryResourceView.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 
 import binaryResourceViewStyles from './binaryResourceView.css.js';
 
+import type * as Platform from '../../core/platform/platform.js';
 import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -70,7 +71,9 @@ export class BinaryResourceView extends UI.Widget.VBox {
   private addFadeoutSettimeoutId: number|null;
   private lastView: UI.Widget.Widget|null;
 
-  constructor(base64content: string, contentUrl: string, resourceType: Common.ResourceType.ResourceType) {
+  constructor(
+      base64content: string, contentUrl: Platform.DevToolsPath.UrlString,
+      resourceType: Common.ResourceType.ResourceType) {
     super();
 
     this.binaryResourceViewFactory =

package/front_end/panels/network/RequestTimingView.ts

@@ -224,6 +224,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class RequestTimingView extends UI.Widget.VBox {
   private request: SDK.NetworkRequest.NetworkRequest;
   private calculator: NetworkTimeCalculator;
+  private lastMinimumBoundary: number;
   private tableElement?: Element;
   constructor(request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator) {
     super();
@@ -231,6 +232,7 @@ export class RequestTimingView extends UI.Widget.VBox {
 
     this.request = request;
     this.calculator = calculator;
+    this.lastMinimumBoundary = -1;
   }
 
   private static timeRangeTitle(name: RequestTimeRangeNames): string {
@@ -647,7 +649,7 @@ export class RequestTimingView extends UI.Widget.VBox {
   wasShown(): void {
     this.request.addEventListener(SDK.NetworkRequest.Events.TimingChanged, this.refresh, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.refresh, this);
-    this.calculator.addEventListener(Events.BoundariesChanged, this.refresh, this);
+    this.calculator.addEventListener(Events.BoundariesChanged, this.boundaryChanged, this);
     this.registerCSSFiles([networkingTimingTableStyles]);
     this.refresh();
   }
@@ -655,7 +657,7 @@ export class RequestTimingView extends UI.Widget.VBox {
   willHide(): void {
     this.request.removeEventListener(SDK.NetworkRequest.Events.TimingChanged, this.refresh, this);
     this.request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.refresh, this);
-    this.calculator.removeEventListener(Events.BoundariesChanged, this.refresh, this);
+    this.calculator.removeEventListener(Events.BoundariesChanged, this.boundaryChanged, this);
   }
 
   private refresh(): void {
@@ -671,6 +673,14 @@ export class RequestTimingView extends UI.Widget.VBox {
       this.constructFetchDetailsView();
     }
   }
+
+  private boundaryChanged(): void {
+    const minimumBoundary = this.calculator.minimumBoundary();
+    if (minimumBoundary !== this.lastMinimumBoundary) {
+      this.lastMinimumBoundary = minimumBoundary;
+      this.refresh();
+    }
+  }
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -461,8 +461,9 @@ export class ResourceWebSocketFrameNode extends DataGrid.SortableDataGrid.Sortab
 
     if (!this.binaryViewInternal) {
       if (this.dataTextInternal.length > 0) {
-        this.binaryViewInternal =
-            new BinaryResourceView(this.dataTextInternal, /* url */ '', Common.ResourceType.resourceTypes.WebSocket);
+        this.binaryViewInternal = new BinaryResourceView(
+            this.dataTextInternal, /* url */ '' as Platform.DevToolsPath.UrlString,
+            Common.ResourceType.resourceTypes.WebSocket);
       }
     }
     return this.binaryViewInternal;