chrome-devtools-frontend 1.0.1611390 → 1.0.1613465

package/front_end/panels/ai_assistance/components/WalkthroughView.ts

@@ -45,6 +45,10 @@ const UIStrings = {
    * @description Title for the button that hides the walkthrough when there are widgets in the walkthrough.
    */
   hideAgentWalkthrough: 'Hide agent walkthrough',
+  /**
+   * @description Aria label for the spinner to be read by screen reader when a step is in progress.
+   */
+  inProgress: 'In progress',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/WalkthroughView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -118,7 +122,7 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
     <div class="inline-wrapper" ?data-open=${input.isExpanded}>
       <span class="inline-icon">
         ${input.isLoading ?
-            html`<devtools-spinner></devtools-spinner>` :
+            html`<devtools-spinner aria-label=${lockedString(UIStrings.inProgress)}></devtools-spinner>` :
             html`<devtools-icon name=${icon}></devtools-icon>`
         }
       </span>
@@ -149,7 +153,7 @@ function renderSidebarWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate
   return html`
     <div class="walkthrough-view">
       <div class="walkthrough-header">
-         <div class="walkthrough-title">${i18nString(UIStrings.title)}</div>
+         <h2 class="walkthrough-title">${i18nString(UIStrings.title)}</h2>
          <devtools-button
           .data=${{
             variant: Buttons.Button.Variant.TOOLBAR,

package/front_end/panels/ai_assistance/components/exportForAgentsDialog.css

@@ -21,7 +21,7 @@
   .export-for-agents-dialog header {
     margin-bottom: var(--sys-size-6);
 
-    h2 {
+    h1 {
       font: var(--sys-typescale-headline5);
       margin: 0;
       color: var(--sys-color-on-surface);

package/front_end/panels/ai_assistance/components/optInChangeDialog.css

@@ -0,0 +1,95 @@
+/*
+ * 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.
+ */
+
+@scope to (devtools-widget > *) {
+  :scope {
+    width: 100%;
+    box-shadow: none;
+    padding: var(--sys-size-8);
+    background-color: var(--sys-color-surface);
+    border-radius: var(--sys-shape-corner-medium);
+  }
+
+  .opt-in-change-dialog {
+    width: var(--sys-size-33);
+    max-width: 100%;
+  }
+
+  header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--sys-size-8);
+    margin-bottom: var(--sys-size-8);
+
+    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);
+      height: var(--sys-size-14);
+      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);
+        color: var(--sys-color-on-primary);
+      }
+    }
+  }
+
+  main {
+    background-color: var(--sys-color-surface4);
+    border-radius: var(--sys-shape-corner-medium-small);
+    padding: var(--sys-size-8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-6);
+    margin-bottom: var(--sys-size-8);
+
+    .item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--sys-size-8);
+
+      devtools-icon {
+        width: var(--sys-size-8);
+        height: var(--sys-size-8);
+        flex-shrink: 0;
+        color: var(--sys-color-on-surface-subtle);
+      }
+
+      .text {
+        font: var(--sys-typescale-body4);
+        color: var(--sys-color-on-surface);
+      }
+    }
+  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+
+    .right-buttons {
+      display: flex;
+      gap: var(--sys-size-5);
+    }
+  }
+}

package/front_end/panels/ai_assistance/components/walkthroughView.css

@@ -99,7 +99,7 @@
 
   .inline-wrapper {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: var(--sys-size-2);
     justify-content: flex-start;
 
@@ -118,21 +118,9 @@
     &[open] {
       border-radius: var(--sys-size-5);
       width: auto;
-      background-color: var(--sys-color-surface1);
+      background-color: var(--sys-color-surface2);
       margin-left: calc(var(--sys-size-6) / 2);
       flex-grow: 1;
-
-      > summary {
-        border-radius: var(--sys-shape-corner-medium-small);
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-        background: var(--sys-color-surface5);
-        color: var(--sys-color-on-surface);
-
-        &[data-has-widgets] {
-          margin-left: 0;
-        }
-      }
     }
   }
 
@@ -177,6 +165,23 @@
     }
   }
 
+  .walkthrough-inline[open] > summary {
+    border-radius: var(--sys-shape-corner-medium-small);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    background: var(--sys-color-surface5);
+    color: var(--sys-color-on-surface);
+
+    &[data-has-widgets] {
+      margin-left: 0;
+    }
+
+    > devtools-icon[name='chevron-right'] {
+      transform: rotate(270deg);
+    }
+
+  }
+
   .walkthrough-inline > summary::-webkit-details-marker {
     display: none;
   }
@@ -201,8 +206,4 @@
   .walkthrough-inline .step {
     background-color: var(--sys-color-surface5);
   }
-
-  .walkthrough-inline[open] > summary > devtools-icon[name='chevron-right'] {
-    transform: rotate(270deg);
-  }
 }

package/front_end/panels/application/CookieItemsView.ts

@@ -375,9 +375,10 @@ export class CookieItemsView extends UI.Widget.VBox {
   }
 
   deleteSelectedItem(): void {
-    if (this.selectedCookie) {
+    const cookie = this.selectedCookie;
+    if (cookie) {
       this.showPreview(null);
-      void this.model.deleteCookie(this.selectedCookie);
+      void this.model.deleteCookie(cookie);
     }
   }
 

package/front_end/panels/application/WebMCPView.ts

@@ -433,19 +433,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   @click=${() => input.onCallSelect(null)}
                 ></devtools-button>
                 <devtools-widget
-                  id="details"
+                  id="webmcp.tool-details"
                   title=${i18nString(UIStrings.toolDetails)}
                   ${widget(ToolDetailsWidget, {tool: input.selectedCall?.tool})}>
                 </devtools-widget>
                 <devtools-widget
-                  id="inputs"
+                  id="webmcp.call-inputs"
                   title=${i18nString(UIStrings.input)}
                   ${widget(PayloadWidget, parsePayload(input.selectedCall?.input))}>
                 </devtools-widget>
                 <devtools-widget
-                  id="outputs"
+                  id="webmcp.call-outputs"
                   title=${i18nString(UIStrings.output)}
-                  ${widget(PayloadWidget, parsePayload(input.selectedCall?.result?.output))}>
+                  ${widget(PayloadWidget, {
+                          valueObject: input.selectedCall?.result?.output,
+                          errorText: input.selectedCall?.result?.errorText,
+                          exceptionDetails: input.selectedCall?.result?.exceptionDetails,
+                  })}>
                 </devtools-widget>
               </devtools-tabbed-pane>
             </div>
@@ -685,10 +689,12 @@ export class WebMCPView extends UI.Widget.VBox {
 export interface PayloadViewInput {
   valueObject?: unknown;
   valueString?: string;
+  errorText?: string;
+  exceptionDetails?: WebMCP.WebMCPModel.ExceptionDetails;
 }
 
 export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, target: HTMLElement): void => {
-  if (input.valueObject === undefined && input.valueString === undefined) {
+  if (!input.valueObject && !input.valueString && !input.errorText && !input.exceptionDetails) {
     render(nothing, target);
     return;
   }
@@ -715,6 +721,52 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
   };
 
   const createSourceText = (text: string): TemplateResult => html`<div class="payload-value source-code">${text}</div>`;
+  const createErrorText = (text: string): TemplateResult =>
+      html`<div class="payload-value source-code error-text">${text}</div>`;
+
+  const createException = (
+      details: WebMCP.WebMCPModel.ExceptionDetails,
+      linkifier: Components.Linkifier.Linkifier = new Components.Linkifier.Linkifier(),
+      ): TemplateResult => {
+    const renderFrame = (
+        frame: StackTrace.ErrorStackParser.ParsedErrorFrame,
+        index: number,
+        array: StackTrace.ErrorStackParser.ParsedErrorFrame[],
+        ): TemplateResult => {
+      const newline = index < array.length - 1 ? '\n' : '';
+      const {line, link, isCallFrame} = frame;
+
+      if (!isCallFrame) {
+        return html`<span>${line}${newline}</span>`;
+      }
+
+      if (!link) {
+        return html`<span class="formatted-builtin-stack-frame">${line}${newline}</span>`;
+      }
+
+      const scriptLocationLink = linkifier.linkifyScriptLocation(
+          details.error.runtimeModel().target(),
+          link.scriptId || null,
+          link.url,
+          link.lineNumber,
+          {
+            columnNumber: link.columnNumber,
+            inlineFrameIndex: 0,
+            showColumnNumber: true,
+          },
+      );
+      scriptLocationLink.tabIndex = -1;
+
+      return html`<span class="formatted-stack-frame">${link.prefix}${scriptLocationLink}${link.suffix}${
+          newline}</span>`;
+    };
+
+    return html`
+      <div class="payload-value source-code error-text">
+        ${details.frames.length === 0 && details.description ? html`<span>${details.description}\n</span>` : nothing}
+        <div>${details.frames.map(renderFrame)}</div>
+        ${details.cause ? html`\nCaused by:\n${createException(details.cause, linkifier)}` : nothing}</div>`;
+  };
 
   render(
       html`
@@ -723,7 +775,10 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
       <div class="call-payload-content">
             ${
           isParsable ? createPayload(input.valueObject) :
-                       (input.valueString !== undefined ? createSourceText(input.valueString) : nothing)}
+                       (input.valueString !== undefined ?
+                            createSourceText(input.valueString) :
+                            (input.exceptionDetails ? createException(input.exceptionDetails) :
+                                                      (input.errorText ? createErrorText(input.errorText) : nothing)))}
       </div>
     </div>
   `,
@@ -733,6 +788,9 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
 export class PayloadWidget extends UI.Widget.Widget {
   #valueObject?: unknown;
   #valueString?: string;
+  #errorText?: string;
+  #exceptionDetailsPromise?: Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>;
+  #exceptionDetails?: WebMCP.WebMCPModel.ExceptionDetails;
   #view: typeof PAYLOAD_DEFAULT_VIEW;
 
   constructor(element?: HTMLElement, view = PAYLOAD_DEFAULT_VIEW) {
@@ -758,6 +816,37 @@ export class PayloadWidget extends UI.Widget.Widget {
     return this.#valueString;
   }
 
+  set errorText(errorText: string|undefined) {
+    this.#errorText = errorText;
+    this.requestUpdate();
+  }
+
+  get errorText(): string|undefined {
+    return this.#errorText;
+  }
+
+  async #updateExceptionDetails(
+      exceptionDetailsPromise: Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>|undefined): Promise<void> {
+    if (this.#exceptionDetailsPromise === exceptionDetailsPromise) {
+      return;
+    }
+    this.#exceptionDetailsPromise = exceptionDetailsPromise;
+    this.#exceptionDetails = undefined;
+    this.requestUpdate();
+    const exceptionDetails = await exceptionDetailsPromise;
+    if (this.#exceptionDetailsPromise === exceptionDetailsPromise) {
+      this.#exceptionDetails = exceptionDetails;
+      this.requestUpdate();
+    }
+  }
+
+  set exceptionDetails(exceptionDetailsPromise: Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>|undefined) {
+    void this.#updateExceptionDetails(exceptionDetailsPromise);
+  }
+
+  get exceptionDetails(): Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>|undefined {
+    return this.#exceptionDetailsPromise;
+  }
   override wasShown(): void {
     super.wasShown();
     this.requestUpdate();
@@ -767,6 +856,8 @@ export class PayloadWidget extends UI.Widget.Widget {
     const input: PayloadViewInput = {
       valueObject: this.#valueObject,
       valueString: this.#valueString,
+      errorText: this.#errorText,
+      exceptionDetails: this.#exceptionDetails,
     };
     this.#view(input, {}, this.contentElement);
   }

package/front_end/panels/application/webMCPView.css

@@ -48,7 +48,8 @@
         background-color: var(--sys-color-tonal-container);
       }
 
-      tr.selected.status-error {
+      tbody tr.selected.status-error,
+      tbody tr.selected.status-error.revealed {
         background-color: var(--sys-color-error-container);
         color: var(--sys-color-error);
       }
@@ -210,4 +211,9 @@
         flex: auto;
         overflow: auto;
     }
+
+    .payload-value.error-text {
+      color: var(--sys-color-error);
+      white-space: pre-wrap;
+    }
 }

package/front_end/panels/changes/ChangesView.ts

@@ -6,13 +6,11 @@ import '../../ui/legacy/legacy.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as GreenDev from '../../models/greendev/greendev.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.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';
-import * as PanelsCommon from '../common/common.js';
 
 import {ChangesSidebar, Events} from './ChangesSidebar.js';
 import changesViewStyles from './changesView.css.js';
@@ -48,8 +46,6 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         Events.SELECTED_UI_SOURCE_CODE_CHANGED, () => input.onSelect(sidebar.selectedUISourceCode()));
   };
 
-  const hasCopyToPrompt = GreenDev.Prototypes.instance().isEnabled('copyToGemini');
-
   render(
       // clang-format off
       html`
@@ -70,14 +66,6 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                 workspaceDiff: input.workspaceDiff
             })}
           </div>
-          ${hasCopyToPrompt ? html`
-            <devtools-widget class="copy-to-prompt"
-              ${widget(PanelsCommon.CopyChangesToPrompt, {
-                workspaceDiff: input.workspaceDiff,
-                patchAgentCSSChange: null,
-              })}
-            ></devtools-widget>
-          ` : Lit.nothing}
         </div>
         <devtools-widget slot="sidebar" ${widget(ChangesSidebar, {workspaceDiff: input.workspaceDiff})}
           ${UI.Widget.widgetRef(ChangesSidebar, onSidebar)}>

package/front_end/panels/common/common.ts

@@ -111,4 +111,3 @@ export * as PersistenceUtils from './PersistenceUtils.js';
 export * as DOMLinkifier from './DOMLinkifier.js';
 export * as ThrottlingUtils from './ThrottlingUtils.js';
 export * as ExtensionIframe from './ExtensionView.js';
-export {CopyChangesToPrompt} from './CopyChangesToPrompt.js';

package/front_end/panels/console/ConsolePrompt.ts

@@ -29,11 +29,11 @@ const UIStrings = {
    */
   consolePrompt: 'Console prompt',
   /**
-   * @description Warning shown to users when pasting text into the DevTools console.
+   * @description Warning shown to users when pasting text into the DevTools console. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow pasting} PH1
    */
   selfXssWarning:
-      'Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘{PH1}’ below and press Enter to allow pasting.',
+      'Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type “{PH1}” below and press Enter to allow pasting.',
   /**
    * @description Text a user needs to type in order to confirm that they are aware of the danger of pasting code into the DevTools console.
    */

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2782,7 +2782,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       existingElement?.remove();
     }
 
-    if (!this.overriddenByAnimation() || UI.ViewManager.ViewManager.instance().isViewVisible('animations')) {
+    if (!this.overriddenByAnimation() || UI.ViewManager.ViewManager.instance().isViewVisible('animations') ||
+        !Common.Settings.Settings.instance().moduleSetting('css-animations-only-when-animations-tab-open').get()) {
       return;
     }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1096,10 +1096,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     // the matched styles we reenable the button.
     LayersWidget.ButtonProvider.instance().item().setVisible(false);
     const animationsPanelVisible = UI.ViewManager.ViewManager.instance().isViewVisible('animations');
+    const cssAnimationsOnlyWhenAnimationsTabOpen =
+        Common.Settings.Settings.instance().moduleSetting('css-animations-only-when-animations-tab-open').get();
     for (const style of matchedStyles.nodeStyles()) {
       const isTransitionOrAnimationStyle = style.type === SDK.CSSStyleDeclaration.Type.Transition ||
           style.type === SDK.CSSStyleDeclaration.Type.Animation;
-      if (isTransitionOrAnimationStyle && !animationsPanelVisible) {
+      if (isTransitionOrAnimationStyle && cssAnimationsOnlyWhenAnimationsTabOpen && !animationsPanelVisible) {
         continue;
       }
 

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

@@ -163,6 +163,10 @@ const UIStrings = {
    * @description Command for toggling the eye dropper when the color picker is open
    */
   toggleEyeDropper: 'Toggle eye dropper',
+  /**
+   * @description Title of a setting under the Elements category.
+   */
+  cssAnimationsOnlyWhenAnimationsTabOpen: 'Show animation styles only when the Animations tab is open',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/elements-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -569,6 +573,16 @@ Common.Settings.registerSettingExtension({
   defaultValue: true,
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.ELEMENTS,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  order: 6,
+  title: i18nLazyString(UIStrings.cssAnimationsOnlyWhenAnimationsTabOpen),
+  settingName: 'css-animations-only-when-animations-tab-open',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
 Common.Settings.registerSettingExtension({
   settingName: 'show-event-listeners-for-ancestors',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/panels/network/NetworkLogView.ts

@@ -1880,10 +1880,30 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       const throttlingMenu =
           contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.throttleRequests), /* disabled=*/ true);
 
-      const urlWithoutScheme = request.parsedURL.urlWithoutScheme();
-      const urlPattern = urlWithoutScheme &&
+      const parsed = request.parsedURL;
+      let urlPatternString = '';
+      if (parsed.isValid) {
+        // We cannot escape parsed.urlWithoutScheme() directly. If we escaped the first '?'
+        // URLPattern would treat the entire string as the pathname and fail to match the query string.
+        // Thus, we must escape the components individually and reconstruct the pattern string.
+        urlPatternString = '*://' + Platform.StringUtilities.escapeForURLPattern(parsed.host);
+        if (parsed.port) {
+          urlPatternString += ':' + Platform.StringUtilities.escapeForURLPattern(parsed.port);
+        }
+        urlPatternString += Platform.StringUtilities.escapeForURLPattern(parsed.path);
+        if (parsed.queryParams) {
+          urlPatternString += '?' + Platform.StringUtilities.escapeForURLPattern(parsed.queryParams);
+        }
+        if (parsed.fragment) {
+          urlPatternString += '#' + Platform.StringUtilities.escapeForURLPattern(parsed.fragment);
+        }
+      } else if (parsed.urlWithoutScheme()) {
+        urlPatternString = '*://' + Platform.StringUtilities.escapeForURLPattern(parsed.urlWithoutScheme());
+      }
+
+      const urlPattern = urlPatternString &&
           SDK.NetworkManager.RequestURLPattern.create(
-              `*://${urlWithoutScheme}` as SDK.NetworkManager.URLPatternConstructorString);
+              urlPatternString as SDK.NetworkManager.URLPatternConstructorString);
       if (urlPattern) {
         throttlingMenu.setEnabled(true);
         blockingMenu.setEnabled(true);
@@ -1906,30 +1926,39 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
             {jslogContext: 'throttle-request-url'});
       }
 
-        const domain = request.parsedURL.domain();
-        const domainPattern = domain &&
-            SDK.NetworkManager.RequestURLPattern.create(
-                `*://${domain}` as SDK.NetworkManager.URLPatternConstructorString);
-        if (domainPattern) {
-          throttlingMenu.setEnabled(true);
-          blockingMenu.setEnabled(true);
-          const existingConditions = manager.requestConditions.findCondition(domainPattern.constructorString);
-          const isBlocking = existingConditions?.conditions === SDK.NetworkManager.BlockingConditions;
-          const isThrottling = existingConditions &&
-              existingConditions.conditions !== SDK.NetworkManager.BlockingConditions &&
-              existingConditions.conditions !== SDK.NetworkManager.NoThrottlingConditions;
-          const croppedURL = Platform.StringUtilities.trimMiddle(domainPattern.constructorString, maxBlockedURLLength);
-          blockingMenu.debugSection().appendItem(
-              isBlocking ? i18nString(UIStrings.unblockS, {PH1: croppedURL}) : i18nString(UIStrings.blockRequestDomain),
-              () => isBlocking ? removeRequestCondition(domainPattern) :
-                                 addRequestCondition(domainPattern, SDK.NetworkManager.BlockingConditions),
-              {jslogContext: 'block-request-domain'});
-          throttlingMenu.debugSection().appendItem(
-              isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: croppedURL}) :
-                             i18nString(UIStrings.throttleRequestDomain),
-              () => isThrottling ? removeRequestCondition(domainPattern) :
-                                   addRequestCondition(domainPattern, SDK.NetworkManager.Slow3GConditions),
-              {jslogContext: 'throttle-request-domain'});
+      let domainPatternString = '';
+      if (parsed.isValid) {
+        domainPatternString = '*://' + Platform.StringUtilities.escapeForURLPattern(parsed.host);
+        if (parsed.port) {
+          domainPatternString += ':' + Platform.StringUtilities.escapeForURLPattern(parsed.port);
+        }
+      } else if (parsed.domain()) {
+        domainPatternString = '*://' + Platform.StringUtilities.escapeForURLPattern(parsed.domain());
+      }
+
+      const domainPattern = domainPatternString &&
+          SDK.NetworkManager.RequestURLPattern.create(
+              domainPatternString as SDK.NetworkManager.URLPatternConstructorString);
+      if (domainPattern) {
+        throttlingMenu.setEnabled(true);
+        blockingMenu.setEnabled(true);
+        const existingConditions = manager.requestConditions.findCondition(domainPattern.constructorString);
+        const isBlocking = existingConditions?.conditions === SDK.NetworkManager.BlockingConditions;
+        const isThrottling = existingConditions &&
+            existingConditions.conditions !== SDK.NetworkManager.BlockingConditions &&
+            existingConditions.conditions !== SDK.NetworkManager.NoThrottlingConditions;
+        const croppedURL = Platform.StringUtilities.trimMiddle(domainPattern.constructorString, maxBlockedURLLength);
+        blockingMenu.debugSection().appendItem(
+            isBlocking ? i18nString(UIStrings.unblockS, {PH1: croppedURL}) : i18nString(UIStrings.blockRequestDomain),
+            () => isBlocking ? removeRequestCondition(domainPattern) :
+                               addRequestCondition(domainPattern, SDK.NetworkManager.BlockingConditions),
+            {jslogContext: 'block-request-domain'});
+        throttlingMenu.debugSection().appendItem(
+            isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: croppedURL}) :
+                           i18nString(UIStrings.throttleRequestDomain),
+            () => isThrottling ? removeRequestCondition(domainPattern) :
+                                 addRequestCondition(domainPattern, SDK.NetworkManager.Slow3GConditions),
+            {jslogContext: 'throttle-request-domain'});
       }
 
       if (SDK.NetworkManager.NetworkManager.canReplayRequest(request)) {
@@ -1944,7 +1973,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     const requests = Logs.NetworkLog.NetworkLog.instance().requests().filter(request => this.applyFilter(request));
     return requests.filter(NetworkLogView.getHTTPRequestsFilter).filter(request => {
       return request.finished ||
-          (request.resourceType() === Common.ResourceType.resourceTypes.WebSocket && request.responseReceivedTime);
+          (request.resourceType() === Common.ResourceType.resourceTypes.WebSocket && request.responseReceivedTime) ||
+          Boolean(request.eventSourceMessages()?.length);
     });
   }
 

package/front_end/panels/recorder/RecorderController.ts

@@ -133,21 +133,21 @@ const UIStrings = {
    */
   doYouTrustThisCode: 'Do you trust this recording?',
   /**
-   * @description Warning shown to users when imports code into DevTools Recorder.
+   * @description Warning shown to users when imports code into DevTools Recorder. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow importing} PH1
    */
   doNotImport:
-      'Don\'t import recordings you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type \'\'{PH1}\'\' below to allow importing.',
+      'Don\'t import recordings you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type “{PH1}” below to allow importing.',
   /**
    * @description Text a user needs to type in order to confirm that they
    *are aware of the danger of import code into the DevTools Recorder.
    */
   allowImporting: 'allow importing',
   /**
-   * @description Input box placeholder which instructs the user to type 'allow importing' into the input box.
+   * @description Input box placeholder which instructs the user to type 'allow importing' into the input box. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow importing} PH1
    */
-  typeAllowImporting: 'Type \'\'{PH1}\'\'',
+  typeAllowImporting: 'Type “{PH1}”',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/recorder/RecorderController.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);