chrome-devtools-frontend 1.0.1025631 → 1.0.1027150

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -45,6 +45,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #resizeObserver = new ResizeObserver(() => this.#checkForOverflowOnResize());
+  readonly #renderBound = this.#render.bind(this);
 
   #crumbsData: readonly DOMNode[] = [];
   #selectedDOMNode: Readonly<DOMNode>|null = null;
@@ -61,7 +62,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
     this.#selectedDOMNode = data.selectedNode;
     this.#crumbsData = data.crumbs;
     this.#userHasManuallyScrolled = false;
-    void this.#update();
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
   }
 
   disconnectedCallback(): void {
@@ -104,12 +105,6 @@ export class ElementsBreadcrumbs extends HTMLElement {
     }
   }
 
-  async #update(): Promise<void> {
-    await this.#render();
-    this.#engageResizeObserver();
-    void this.#ensureSelectedNodeIsVisible();
-  }
-
   #onCrumbMouseMove(node: DOMNode): () => void {
     return (): void => node.highlightNode();
   }
@@ -267,53 +262,53 @@ export class ElementsBreadcrumbs extends HTMLElement {
       `;
   }
 
-  async #render(): Promise<void> {
+  #render(): void {
     const crumbs = crumbsToRender(this.#crumbsData, this.#selectedDOMNode);
 
-    await coordinator.write('Breadcrumbs render', () => {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      LitHtml.render(LitHtml.html`
-        <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)}>
-          ${this.#renderOverflowButton('left', this.#userScrollPosition === 'start')}
-
-          <div class="crumbs-window" @scroll=${this.#onCrumbsWindowScroll}>
-            <ul class="crumbs-scroll-container">
-              ${crumbs.map(crumb => {
-                const crumbClasses = {
-                  crumb: true,
-                  selected: crumb.selected,
-                };
-                // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
-                return LitHtml.html`
-                  <li class=${LitHtml.Directives.classMap(crumbClasses)}
-                    data-node-id=${crumb.node.id}
-                    data-crumb="true"
-                  >
-                    <a href="#"
-                      draggable=false
-                      class="crumb-link"
-                      @click=${this.#onCrumbClick(crumb.node)}
-                      @mousemove=${this.#onCrumbMouseMove(crumb.node)}
-                      @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
-                      @focus=${this.#onCrumbFocus(crumb.node)}
-                      @blur=${this.#onCrumbBlur(crumb.node)}
-                    ><${NodeText.NodeText.NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
-                      nodeTitle: crumb.title.main,
-                      nodeId: crumb.title.extras.id,
-                      nodeClasses: crumb.title.extras.classes,
-                    } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
-                  </li>`;
-              })}
-            </ul>
-          </div>
-          ${this.#renderOverflowButton('right', this.#userScrollPosition === 'end')}
-        </nav>
-      `, this.#shadow, { host: this });
-      // clang-format on
-    });
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)}>
+        ${this.#renderOverflowButton('left', this.#userScrollPosition === 'start')}
+
+        <div class="crumbs-window" @scroll=${this.#onCrumbsWindowScroll}>
+          <ul class="crumbs-scroll-container">
+            ${crumbs.map(crumb => {
+              const crumbClasses = {
+                crumb: true,
+                selected: crumb.selected,
+              };
+              // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
+              return LitHtml.html`
+                <li class=${LitHtml.Directives.classMap(crumbClasses)}
+                  data-node-id=${crumb.node.id}
+                  data-crumb="true"
+                >
+                  <a href="#"
+                    draggable=false
+                    class="crumb-link"
+                    @click=${this.#onCrumbClick(crumb.node)}
+                    @mousemove=${this.#onCrumbMouseMove(crumb.node)}
+                    @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
+                    @focus=${this.#onCrumbFocus(crumb.node)}
+                    @blur=${this.#onCrumbBlur(crumb.node)}
+                  ><${NodeText.NodeText.NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
+                    nodeTitle: crumb.title.main,
+                    nodeId: crumb.title.extras.id,
+                    nodeClasses: crumb.title.extras.classes,
+                  } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
+                </li>`;
+            })}
+          </ul>
+        </div>
+        ${this.#renderOverflowButton('right', this.#userScrollPosition === 'end')}
+      </nav>
+    `, this.#shadow, { host: this });
+    // clang-format on
 
     void this.#checkForOverflow();
+    this.#engageResizeObserver();
+    void this.#ensureSelectedNodeIsVisible();
   }
 
   async #ensureSelectedNodeIsVisible(): Promise<void> {

package/front_end/panels/elements/elementsTreeOutline.css

@@ -28,7 +28,7 @@
 }
 
 .adorner-reveal {
-  margin: 3px;
+  margin: 0 3px;
 }
 
 .adorner-with-icon {

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -309,6 +309,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       return '';
     }
     const usageData = await mainTarget.storageAgent().invoke_getUsageAndQuota({origin});
+    if (usageData.getError()) {
+      return '';
+    }
     const locations = usageData.usageBreakdown.filter(usage => usage.usage)
                           .map(usage => STORAGE_TYPE_NAMES.get(usage.storageType))
                           .map(i18nStringFn => i18nStringFn ? i18nStringFn() : undefined)

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -308,6 +308,8 @@ export class LighthousePanel extends UI.Panel.Panel {
     const reportContainer = this.auditResultsElement.createChild('div', 'lh-vars lh-root lh-devtools');
     // @ts-ignore Expose LHR on DOM for e2e tests
     reportContainer._lighthouseResultForTesting = lighthouseResult;
+    // @ts-ignore Expose Artifacts on DOM for e2e tests
+    reportContainer._lighthouseArtifactsForTesting = artifacts;
 
     const dom = new LighthouseReport.DOM(this.auditResultsElement.ownerDocument as Document, reportContainer);
     const renderer = new LighthouseReportRenderer(dom) as LighthouseReport.ReportRenderer;

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1043,8 +1043,7 @@ export class NetworkRequestNode extends NetworkNode {
         const secondIconElement = document.createElement('img');
         secondIconElement.classList.add('icon');
         secondIconElement.alt = i18nString(UIStrings.webBundleInnerRequest);
-        secondIconElement.src = 'Images/ic_file_webbundle_inner_request.svg';
-        new URL('../../Images/ic_file_webbundle_inner_request.svg', import.meta.url).toString();
+        secondIconElement.src = new URL('../../Images/ic_file_webbundle_inner_request.svg', import.meta.url).toString();
 
         const networkManager = SDK.NetworkManager.NetworkManager.forRequest(this.requestInternal);
         if (webBundleInnerRequestInfo.bundleRequestId && networkManager) {

package/front_end/panels/security/SecurityPanel.ts

@@ -329,6 +329,16 @@ const UIStrings = {
   */
   cipher: 'Cipher',
   /**
+  *@description Text in Security Panel that refers to the signature algorithm
+  *used by the server for authenticate in the TLS handshake.
+  */
+  serverSignature: 'Server signature',
+  /**
+  *@description Text in Security Panel that refers to whether the ClientHello
+  *message in the TLS handshake was encrypted.
+  */
+  encryptedClientHello: 'Encrypted ClientHello',
+  /**
   *@description Sct div text content in Security Panel of the Security panel
   */
   certificateTransparency: 'Certificate Transparency',
@@ -442,12 +452,42 @@ const UIStrings = {
   *@example {2} PH1
   */
   showMoreSTotal: 'Show more ({PH1} total)',
+  /**
+  *@description Shown when a field refers to an option that is unknown to the frontend.
+  */
+  unknownField: 'unknown',
+  /**
+  *@description Shown when a field refers to a TLS feature which was enabled.
+  */
+  enabled: 'enabled',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/security/SecurityPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let securityPanelInstance: SecurityPanel;
 
+// See https://www.iana.org/assignments/tls-parameters/tls-parameters.xhtml#tls-signaturescheme
+// This contains signature schemes supported by Chrome.
+const SignatureSchemeStrings = new Map([
+  // The full name for these schemes is RSASSA-PKCS1-v1_5, sometimes
+  // "PKCS#1 v1.5", but those are very long, so let "RSA" vs "RSA-PSS"
+  // disambiguate.
+  [0x0201, 'RSA with SHA-1'],
+  [0x0401, 'RSA with SHA-256'],
+  [0x0501, 'RSA with SHA-384'],
+  [0x0601, 'RSA with SHA-512'],
+
+  // We omit the curve from these names because in TLS 1.2 these code points
+  // were not specific to a curve. Saying "P-256" for a server that used a P-384
+  // key with SHA-256 in TLS 1.2 would be confusing.
+  [0x0403, 'ECDSA with SHA-256'],
+  [0x0503, 'ECDSA with SHA-384'],
+
+  [0x0804, 'RSA-PSS with SHA-256'],
+  [0x0805, 'RSA-PSS with SHA-384'],
+  [0x0806, 'RSA-PSS with SHA-512'],
+]);
+
 export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
     SDK.TargetManager.SDKModelObserver<SecurityModel> {
   private readonly mainView: SecurityMainView;
@@ -1466,11 +1506,23 @@ export class SecurityOriginView extends UI.Widget.VBox {
         table.addRow(i18nString(UIStrings.keyExchange), originState.securityDetails.keyExchangeGroup);
       }
 
+      if (originState.securityDetails.serverSignatureAlgorithm) {
+        // See https://www.iana.org/assignments/tls-parameters/tls-parameters.xhtml#tls-signaturescheme
+        let sigString = SignatureSchemeStrings.get(originState.securityDetails.serverSignatureAlgorithm);
+        sigString ??=
+            i18nString(UIStrings.unknownField) + ' (' + originState.securityDetails.serverSignatureAlgorithm + ')';
+        table.addRow(i18nString(UIStrings.serverSignature), sigString);
+      }
+
       table.addRow(
           i18nString(UIStrings.cipher),
           originState.securityDetails.cipher +
               (originState.securityDetails.mac ? ' with ' + originState.securityDetails.mac : ''));
 
+      if (originState.securityDetails.encryptedClientHello) {
+        table.addRow(i18nString(UIStrings.encryptedClientHello), i18nString(UIStrings.enabled));
+      }
+
       // Create the certificate section outside the callback, so that it appears in the right place.
       const certificateSection = this.element.createChild('div', 'origin-view-section');
       const certificateDiv = certificateSection.createChild('div', 'origin-view-section-title');

package/front_end/panels/security/originView.css

@@ -79,7 +79,7 @@
 
 .security-origin-view .details-table-row > td:first-child {
   color: var(--color-text-secondary);
-  width: calc(110px + 1em);
+  width: calc(120px + 1em);
   text-align: right;
   padding-right: 1em;
 }

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -26,6 +26,15 @@ const UIStrings = {
   */
   ignoreListContentScriptsExtension: 'Add content scripts to ignore list (extension scripts in the page)',
   /**
+  *@description Text in Framework Ignore List Settings Tab of the Settings
+  */
+  automaticallyIgnoreListKnownThirdPartyScripts: 'Automatically add known third-party scripts to ignore list',
+  /**
+  *@description Text in Framework Ignore List Settings Tab of the Settings
+  */
+  automaticallyIgnoreListKnownThirdPartyScriptsTooltip:
+      'Add sources from the `x_google_ignoreList` field from source maps to the ignore list',
+  /**
   *@description Ignore List label in Framework Ignore List Settings Tab of the Settings
   */
   ignoreList: 'Ignore List',
@@ -98,6 +107,13 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
         Common.Settings.Settings.instance().moduleSetting('skipContentScripts'), true));
     UI.Tooltip.Tooltip.install(ignoreListContentScripts, i18nString(UIStrings.ignoreListContentScriptsExtension));
 
+    const automaticallyIgnoreList = this.contentElement.createChild('div', 'automatically-ignore-list');
+    automaticallyIgnoreList.appendChild(UI.SettingsUI.createSettingCheckbox(
+        i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScripts),
+        Common.Settings.Settings.instance().moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts'), true));
+    UI.Tooltip.Tooltip.install(
+        automaticallyIgnoreList, i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScriptsTooltip));
+
     this.ignoreListLabel = i18nString(UIStrings.ignoreList);
     this.disabledLabel = i18nString(UIStrings.disabled);
 

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -34,6 +34,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
+import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -106,6 +107,7 @@ let callstackSidebarPaneInstance: CallStackSidebarPane;
 export class CallStackSidebarPane extends UI.View.SimpleView implements UI.ContextFlavorListener.ContextFlavorListener,
                                                                         UI.ListControl.ListDelegate<Item> {
   private readonly ignoreListMessageElement: Element;
+  private readonly ignoreListCheckboxElement: HTMLInputElement;
   private readonly notPausedMessageElement: HTMLElement;
   private readonly callFrameWarningsElement: HTMLElement;
   private readonly items: UI.ListModel.ListModel<Item>;
@@ -118,18 +120,20 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
   private readonly updateItemThrottler: Common.Throttler.Throttler;
   private readonly scheduledForUpdateItems: Set<Item>;
   private muteActivateItem?: boolean;
+  private lastDebuggerModel: SDK.DebuggerModel.DebuggerModel|null = null;
 
   private constructor() {
     super(i18nString(UIStrings.callStack), true);
 
-    this.ignoreListMessageElement = this.createIgnoreListMessageElement();
+    ({element: this.ignoreListMessageElement, checkbox: this.ignoreListCheckboxElement} =
+         this.createIgnoreListMessageElementAndCheckbox());
     this.contentElement.appendChild(this.ignoreListMessageElement);
 
     this.notPausedMessageElement = this.contentElement.createChild('div', 'gray-info-message');
     this.notPausedMessageElement.textContent = i18nString(UIStrings.notPaused);
     this.notPausedMessageElement.tabIndex = -1;
 
-    this.callFrameWarningsElement = this.contentElement.createChild('div', 'ignore-listed-message');
+    this.callFrameWarningsElement = this.contentElement.createChild('div', 'call-frame-warnings-message');
     const icon = UI.Icon.Icon.create('smallicon-warning', 'call-frame-warning-icon');
     this.callFrameWarningsElement.appendChild(icon);
     this.callFrameWarningsElement.appendChild(document.createTextNode(i18nString(UIStrings.callFrameWarnings)));
@@ -178,6 +182,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
 
   flavorChanged(_object: Object|null): void {
     this.showIgnoreListed = false;
+    this.ignoreListCheckboxElement.checked = false;
     this.maxAsyncStackChainDepth = defaultMaxAsyncStackChainDepth;
     this.update();
   }
@@ -186,6 +191,24 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.update();
   }
 
+  private setSourceMapSubscription(debuggerModel: SDK.DebuggerModel.DebuggerModel|null): void {
+    // Shortcut for the case when we are listening to the same model.
+    if (this.lastDebuggerModel === debuggerModel) {
+      return;
+    }
+
+    if (this.lastDebuggerModel) {
+      this.lastDebuggerModel.sourceMapManager().removeEventListener(
+          SDK.SourceMapManager.Events.SourceMapAttached, this.debugInfoAttached, this);
+    }
+
+    this.lastDebuggerModel = debuggerModel;
+    if (this.lastDebuggerModel) {
+      this.lastDebuggerModel.sourceMapManager().addEventListener(
+          SDK.SourceMapManager.Events.SourceMapAttached, this.debugInfoAttached, this);
+    }
+  }
+
   private update(): void {
     void this.updateThrottler.schedule(() => this.doUpdate());
   }
@@ -196,6 +219,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.callFrameWarningsElement.classList.add('hidden');
 
     const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
+    this.setSourceMapSubscription(details?.debuggerModel ?? null);
     if (!details) {
       this.notPausedMessageElement.classList.remove('hidden');
       this.ignoreListMessageElement.classList.add('hidden');
@@ -256,6 +280,9 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     }
     this.showMoreMessageElement.classList.toggle('hidden', !asyncStackTrace);
     this.items.replaceAll(items);
+    for (const item of this.items) {
+      this.refreshItem(item);
+    }
     if (this.maxAsyncStackChainDepth === defaultMaxAsyncStackChainDepth) {
       this.list.selectNextItem(true /* canWrap */, false /* center */);
       const selectedItem = this.list.selectedItem();
@@ -283,6 +310,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
         }
         this.ignoreListMessageElement.classList.toggle('hidden', true);
       } else {
+        this.showIgnoreListed = this.ignoreListCheckboxElement.checked;
         const itemsSet = new Set<Item>(items);
         let hasIgnoreListed = false;
         for (let i = 0; i < this.items.length; ++i) {
@@ -292,7 +320,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
           }
           hasIgnoreListed = hasIgnoreListed || item.isIgnoreListed;
         }
-        this.ignoreListMessageElement.classList.toggle('hidden', this.showIgnoreListed || !hasIgnoreListed);
+        this.ignoreListMessageElement.classList.toggle('hidden', !hasIgnoreListed);
       }
       delete this.muteActivateItem;
     });
@@ -365,24 +393,24 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     return true;
   }
 
-  private createIgnoreListMessageElement(): Element {
+  private createIgnoreListMessageElementAndCheckbox(): {element: Element, checkbox: HTMLInputElement} {
     const element = document.createElement('div');
     element.classList.add('ignore-listed-message');
-    element.createChild('span');
-    const showAllLink = element.createChild('span', 'link');
-    showAllLink.textContent = i18nString(UIStrings.showIgnorelistedFrames);
-    UI.ARIAUtils.markAsLink(showAllLink);
-    showAllLink.tabIndex = 0;
+    const label = element.createChild('label');
+    label.classList.add('ignore-listed-message-label');
+    const checkbox = label.createChild('input') as HTMLInputElement;
+    checkbox.tabIndex = 0;
+    checkbox.type = 'checkbox';
+    checkbox.classList.add('ignore-listed-checkbox');
+    label.append(i18nString(UIStrings.showIgnorelistedFrames));
     const showAll = (): void => {
-      this.showIgnoreListed = true;
+      this.showIgnoreListed = checkbox.checked;
       for (const item of this.items) {
         this.refreshItem(item);
       }
-      this.ignoreListMessageElement.classList.toggle('hidden', true);
     };
-    showAllLink.addEventListener('click', showAll);
-    showAllLink.addEventListener('keydown', event => event.key === 'Enter' && showAll());
-    return element;
+    checkbox.addEventListener('click', showAll);
+    return {element, checkbox};
   }
 
   private createShowMoreMessageElement(): Element {
@@ -465,7 +493,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     const canIgnoreList =
         Bindings.IgnoreListManager.IgnoreListManager.instance().canIgnoreListUISourceCode(uiSourceCode);
     const isIgnoreListed =
-        Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedUISourceCode(uiSourceCode);
+        Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(uiSourceCode.url());
     const isContentScript = uiSourceCode.project().type() === Workspace.Workspace.projectTypes.ContentScripts;
 
     const manager = Bindings.IgnoreListManager.IgnoreListManager.instance();
@@ -572,7 +600,8 @@ export class Item {
   static async createForDebuggerCallFrame(
       frame: SDK.DebuggerModel.CallFrame, locationPool: Bindings.LiveLocation.LiveLocationPool,
       updateDelegate: (arg0: Item) => void): Promise<Item> {
-    const item = new Item(UI.UIUtils.beautifyFunctionName(frame.functionName), updateDelegate);
+    const name = await SourceMapScopes.NamesResolver.resolveFrameFunctionName(frame) ?? frame.functionName;
+    const item = new Item(UI.UIUtils.beautifyFunctionName(name), updateDelegate);
     await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
         frame.location(), item.update.bind(item), locationPool);
     return item;

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -235,6 +235,9 @@ export class DebuggerPlugin extends Plugin {
     Common.Settings.Settings.instance()
         .moduleSetting('skipContentScripts')
         .addChangeListener(this.showIgnoreListInfobarIfNeeded, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
+        .addChangeListener(this.showIgnoreListInfobarIfNeeded, this);
 
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
     this.liveLocationPool = new Bindings.LiveLocation.LiveLocationPool();
@@ -365,7 +368,7 @@ export class DebuggerPlugin extends Plugin {
       return;
     }
     const projectType = uiSourceCode.project().type();
-    if (!Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedUISourceCode(uiSourceCode)) {
+    if (!Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(uiSourceCode.url())) {
       this.hideIgnoreListInfobar();
       return;
     }
@@ -513,7 +516,7 @@ export class DebuggerPlugin extends Plugin {
 
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
         Common.Settings.Settings.instance().moduleSetting('jsSourceMapsEnabled').get() &&
-        !Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedUISourceCode(this.uiSourceCode)) {
+        !Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(this.uiSourceCode.url())) {
       if (this.scriptFileForDebuggerModel.size) {
         const scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile =
             this.scriptFileForDebuggerModel.values().next().value;
@@ -1625,6 +1628,9 @@ export class DebuggerPlugin extends Plugin {
     Common.Settings.Settings.instance()
         .moduleSetting('skipContentScripts')
         .removeChangeListener(this.showIgnoreListInfobarIfNeeded, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
+        .removeChangeListener(this.showIgnoreListInfobarIfNeeded, this);
     super.dispose();
 
     UI.Context.Context.instance().removeFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);

package/front_end/panels/sources/callStackSidebarPane.css

@@ -4,7 +4,7 @@
  * found in the LICENSE file.
  */
 
-.ignore-listed-message {
+.call-frame-warnings-message {
   --override-ignore-message-background-color: #ffffc2;
 
   text-align: center;
@@ -14,6 +14,16 @@
   background-color: var(--override-ignore-message-background-color);
 }
 
+.ignore-listed-message {
+  padding: 1px;
+}
+
+.ignore-listed-message-label {
+  color: var(--color-text-secondary);
+  align-items: center;
+  display: flex;
+}
+
 .-theme-with-dark-background .ignore-listed-message,
 :host-context(.-theme-with-dark-background) .ignore-listed-message {
   --override-ignore-message-background-color: rgb(72 72 0);
@@ -23,14 +33,6 @@
   margin-left: 5px;
 }
 
-.ignore-listed-message > .link {
-  margin-left: 5px;
-}
-
-.ignore-listed-message > .link:focus {
-  outline-width: unset;
-}
-
 .show-more-message {
   text-align: center;
   font-style: italic;
@@ -80,6 +82,10 @@
   background-color: var(--legacy-focus-bg-color);
 }
 
+.ignore-listed-checkbox:focus-visible {
+  outline-width: unset;
+}
+
 .call-frame-item:not(.async-header):hover {
   background-color: var(--color-background-elevation-1);
 }

package/front_end/panels/sources/navigatorTree.css

@@ -121,9 +121,9 @@
   background: var(--override-image-font-tree-item-color);
 }
 
-.navigator-sm-folder-tree-item .tree-element-title,
-.navigator-sm-script-tree-item .tree-element-title,
-.navigator-sm-stylesheet-tree-item .tree-element-title {
+.tree-outline:not(:has(.navigator-deployed-tree-item)) .navigator-sm-folder-tree-item .tree-element-title,
+.tree-outline:not(:has(.navigator-deployed-tree-item)) .navigator-sm-script-tree-item .tree-element-title,
+.tree-outline:not(:has(.navigator-deployed-tree-item)) .navigator-sm-stylesheet-tree-item .tree-element-title {
   font-style: italic;
 }
 

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -10,6 +10,12 @@
   opacity: 0%;
 }
 
+:host-context(.-theme-with-dark-background) .watch-expression-delete-button {
+  /* This is a workaround due to a sprite with hardcoded color.
+     It should no longer be necessary after we update icons. */
+  filter: brightness(1.5);
+}
+
 .right-aligned {
   right: 16px;
 }

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -701,7 +701,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   private isIgnoreListedURL(url: Platform.DevToolsPath.UrlString): boolean {
-    return Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedURL(url);
+    return Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(url);
   }
 
   private appendAsyncEventsGroup(