chrome-devtools-frontend 1.0.1030070 → 1.0.1031400

package/front_end/panels/elements/CSSRuleValidatorHelper.ts

@@ -0,0 +1,34 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export const buildStyledRuleText = (property: String, value: String|undefined): string => {
+  if (value === undefined) {
+    return buildStyledPropertyText(property);
+  }
+  return '<code class="unbreakable-text"><span class="property">' + property + '</span>: ' + value + '</code>';
+};
+
+export const buildStyledPropertyText = (property: String): string => {
+  return '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
+};
+
+export const isFlexContainer = (computedStyles: Map<String, String>|null): boolean => {
+  if (computedStyles === null) {
+    return false;
+  }
+  const display = computedStyles.get('display');
+  return display === 'flex' || display === 'inline-flex';
+};
+
+export const isGridContainer = (computedStyles: Map<String, String>): boolean => {
+  const display = computedStyles.get('display');
+  return display === 'grid' || display === 'inline-grid';
+};
+
+export const isMulticolContainer = (computedStyles: Map<String, String>): boolean => {
+  const columnWidth = computedStyles.get('column-width');
+  const columnCount = computedStyles.get('column-count');
+
+  return columnWidth !== 'auto' || columnCount !== 'auto';
+};

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -103,7 +103,7 @@ export class ElementsTreeOutline extends
   private treeElementBeingDragged?: ElementsTreeElement;
   private dragOverTreeElement?: ElementsTreeElement;
   private updateModifiedNodesTimeout?: number;
-  private topLayerContainer?: TopLayerContainer;
+  #topLayerContainerByParent: Map<UI.TreeOutline.TreeElement, TopLayerContainer> = new Map();
 
   constructor(omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean) {
     super();
@@ -453,7 +453,7 @@ export class ElementsTreeOutline extends
       }
     }
 
-    this.createTopLayerContainer();
+    void this.createTopLayerContainer(this.rootElement(), this.rootDOMNode.domModel());
 
     if (selectedNode) {
       this.revealAndSelectNode(selectedNode, true);
@@ -1183,9 +1183,16 @@ export class ElementsTreeOutline extends
     });
   }
 
-  createTopLayerContainer(): void {
-    this.topLayerContainer = new TopLayerContainer(this);
-    void this.topLayerContainer.throttledUpdateTopLayerElements();
+  async createTopLayerContainer(parent: UI.TreeOutline.TreeElement, domModel: SDK.DOMModel.DOMModel): Promise<void> {
+    if (!parent.treeOutline || !(parent.treeOutline instanceof ElementsTreeOutline)) {
+      return;
+    }
+    const container = new TopLayerContainer(parent.treeOutline, domModel);
+    await container.throttledUpdateTopLayerElements();
+    if (container.currentTopLayerElements.size > 0) {
+      parent.appendChild(container);
+    }
+    this.#topLayerContainerByParent.set(parent, container);
   }
 
   private createElementTreeElement(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean): ElementsTreeElement {
@@ -1342,6 +1349,9 @@ export class ElementsTreeOutline extends
       isClosingTag?: boolean): ElementsTreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
+    if (child.nodeType() === Node.DOCUMENT_NODE) {
+      void this.createTopLayerContainer(newElement, child.domModel());
+    }
     return newElement;
   }
 
@@ -1447,8 +1457,14 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private topLayerElementsChanged(): void {
-    void this.topLayerContainer?.throttledUpdateTopLayerElements();
+  private async topLayerElementsChanged(): Promise<void> {
+    for (const [parent, container] of this.#topLayerContainerByParent) {
+      await container.throttledUpdateTopLayerElements();
+      if (container.currentTopLayerElements.size > 0 && container.parent !== parent) {
+        parent.appendChild(container);
+      }
+      container.hidden = container.currentTopLayerElements.size === 0;
+    }
   }
 
   private static treeOutlineSymbol = Symbol('treeOutline');

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -827,7 +827,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     for (const validator of cssRuleValidatorsMap.get(propertyName) || []) {
       if (!validator.isRuleValid(computedStyles, parentComputedStyles)) {
-        return validator.getAuthoringHint(propertyName, this.parentsComputedStyles);
+        return validator.getAuthoringHint(propertyName, this.computedStyles, this.parentsComputedStyles);
       }
     }
 

package/front_end/panels/elements/TopLayerContainer.ts

@@ -14,23 +14,24 @@ import {type ElementsTreeElement} from './ElementsTreeElement.js';
 
 const UIStrings = {
   /**
-   * @description Top layer is rendered closest to the user within a viewport, therefore its elements always appear on top of all other content
-   */
-  topLayer: 'top-layer',
+  *@description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.
+  */
+  reveal: 'reveal',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/TopLayerContainer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {
-  domContainer: ElementsTreeOutline.ElementsTreeOutline;
+  tree: ElementsTreeOutline.ElementsTreeOutline;
+  domModel: SDK.DOMModel.DOMModel;
   currentTopLayerElements: Set<ElementsTreeElement>;
   topLayerUpdateThrottler: Common.Throttler.Throttler;
-  #inserted = false;
 
-  constructor(domContainer: ElementsTreeOutline.ElementsTreeOutline) {
+  constructor(tree: ElementsTreeOutline.ElementsTreeOutline, domModel: SDK.DOMModel.DOMModel) {
     super('#top-layer');
-    this.domContainer = domContainer;
+    this.tree = tree;
+    this.domModel = domModel;
     this.currentTopLayerElements = new Set();
     this.topLayerUpdateThrottler = new Common.Throttler.Throttler(1);
   }
@@ -44,26 +45,19 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
     this.removeCurrentTopLayerElementsAdorners();
     this.currentTopLayerElements = new Set();
 
-    const domModel = this.domContainer.rootDOMNode?.domModel();
-    if (!domModel) {
-      this.hidden = true;
-      return;
-    }
-
-    const newTopLayerElementsIDs = await domModel.getTopLayerElements();
+    const newTopLayerElementsIDs = await this.domModel.getTopLayerElements();
     if (!newTopLayerElementsIDs || newTopLayerElementsIDs.length === 0) {
-      this.hidden = true;
       return;
     }
 
     let topLayerElementIndex = 0;
     for (let i = 0; i < newTopLayerElementsIDs.length; i++) {
-      const topLayerDOMNode = domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
+      const topLayerDOMNode = this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
       if (topLayerDOMNode && topLayerDOMNode.nodeName() !== '::backdrop') {
         const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-            domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
+            this.domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
         const topLayerElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(topLayerElementShortcut);
-        const topLayerTreeElement = this.domContainer.treeElementByNode.get(topLayerDOMNode);
+        const topLayerTreeElement = this.tree.treeElementByNode.get(topLayerDOMNode);
         if (!topLayerTreeElement) {
           continue;
         }
@@ -73,21 +67,16 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         this.currentTopLayerElements.add(topLayerTreeElement);
         this.appendChild(topLayerElementRepresentation);
         // Add the element's backdrop if previous top layer element is a backdrop.
-        const previousTopLayerDOMNode = (i > 0) ? domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
+        const previousTopLayerDOMNode =
+            (i > 0) ? this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
         if (previousTopLayerDOMNode && previousTopLayerDOMNode.nodeName() === '::backdrop') {
           const backdropElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-              domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
+              this.domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
           const backdropElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(backdropElementShortcut);
           topLayerElementRepresentation.appendChild(backdropElementRepresentation);
         }
       }
     }
-
-    this.hidden = topLayerElementIndex <= 0;
-    if (!this.hidden && !this.#inserted) {
-      this.domContainer.appendChild(this);
-      this.#inserted = true;
-    }
   }
 
   private removeCurrentTopLayerElementsAdorners(): void {
@@ -118,8 +107,8 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
       adorner.addInteraction(onClick, {
         isToggle: false,
         shouldPropagateOnKeydown: false,
-        ariaLabelDefault: i18nString(UIStrings.topLayer),
-        ariaLabelActive: i18nString(UIStrings.topLayer),
+        ariaLabelDefault: i18nString(UIStrings.reveal),
+        ariaLabelActive: i18nString(UIStrings.reveal),
       });
       adorner.addEventListener('mousedown', e => e.consume(), false);
     }

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

@@ -23,7 +23,7 @@ interface Hint {
     getHintPrefix(): string;
     getHintMessage(): string;
     getPossibleFixMessage(): string|null;
-    getLearnMoreLink(): string|null;
+    getLearnMoreLink(): string|undefined;
 }
 
 export class CSSHintDetailsView extends HTMLElement {
@@ -39,25 +39,28 @@ export class CSSHintDetailsView extends HTMLElement {
     }
 
     #render(): void {
-        render(html`
-            <div class="hint-popup-wrapper">
-                <div class="hint-popup-reason">
-                    <strong>${this.#authoringHint.getHintPrefix()}:</strong> ${Directives.unsafeHTML(this.#authoringHint.getHintMessage())}
-                </div>
-                ${this.#authoringHint.getPossibleFixMessage() ? html`
-                    <div class="hint-popup-possible-fix">
-                        ${Directives.unsafeHTML(this.#authoringHint.getPossibleFixMessage())}
-                        ${this.#authoringHint.getLearnMoreLink() ? html`
-                            <x-link id='learn-more' href='${this.#authoringHint.getLearnMoreLink()}' class='clickable underlined unbreakable-text'}>
-                                ${i18nString(UIStrings.learnMore)}
-                            </x-link>
-                        `: ''}
-                    </div>
-                ` : ''}
-            </div>
-        `, this.#shadow, {
-            host: this,
-          });
+      const link = this.#authoringHint.getLearnMoreLink();
+      // clang-format off
+      render(html`
+        <div class="hint-popup-wrapper">
+          <div class="hint-popup-reason">
+              <strong>${this.#authoringHint.getHintPrefix()}:</strong> ${Directives.unsafeHTML(this.#authoringHint.getHintMessage())}
+          </div>
+          ${this.#authoringHint.getPossibleFixMessage() ? html`
+              <div class="hint-popup-possible-fix">
+                  ${Directives.unsafeHTML(this.#authoringHint.getPossibleFixMessage())}
+                  ${link ? html`
+                      <x-link id="learn-more" href=${link} class="clickable underlined unbreakable-text"}>
+                          ${i18nString(UIStrings.learnMore)}
+                      </x-link>
+                  `: ''}
+              </div>
+          ` : ''}
+        </div>
+      `, this.#shadow, {
+        host: this,
+      });
+      // clang-format on
     }
 }
 

package/front_end/panels/elements/components/cssHintDetailsView.css

@@ -4,15 +4,21 @@
  * found in the LICENSE file.
  */
 
+:host {
+  padding: 6px;
+}
+
 .hint-popup-wrapper {
-  width: 400px;
-  line-height: 1.1;
+  max-width: 232px;
   font-size: 12px;
+  line-height: 1.4;
 }
 
 code {
   background-color: var(--color-background-elevation-1);
   padding: 0 2px;
+  font-size: var(--source-code-font-size);
+  font-family: var(--source-code-font-family);
 }
 
 .property {

package/front_end/panels/elements/stylesSectionTree.css

@@ -159,7 +159,7 @@ ol.expanded {
   position: absolute;
   top: 0;
   bottom: 0;
-  margin: auto auto auto 5px;
+  margin: auto auto auto 3px;
   display: inline-block;
   cursor: pointer;
   transform: scale(0.9);

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -22,6 +22,10 @@ const UIStrings = {
    * @description Noun, label for the column showing the invalid header value in the issue details table.
    */
   invalidHeaderValue: 'Invalid Header Value',
+  /**
+   * @description Noun, label for the column showing the maximum concurrent registrations header value in the issue details table.
+   */
+  maximumConcurrentRegistrations: 'Maximum Concurrent Registrations',
   /**
    * @description Noun, label for the column showing the associated network request in the issue details table.
    */
@@ -71,6 +75,10 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendColumnTitle(header, i18nString(UIStrings.element));
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.TooManyConcurrentRequests:
+        this.appendColumnTitle(header, i18nString(UIStrings.element));
+        this.appendColumnTitle(header, i18nString(UIStrings.maximumConcurrentRegistrations));
+        break;
     }
 
     this.affectedResources.appendChild(header);
@@ -107,6 +115,10 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         await this.#appendElementOrEmptyCell(element, issue);
         this.#appendRequestOrEmptyCell(element, details.request);
         break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.TooManyConcurrentRequests:
+        await this.#appendElementOrEmptyCell(element, issue);
+        this.appendIssueDetailCell(element, details.invalidParameter || '');
+        break;
     }
 
     this.affectedResources.appendChild(element);

package/front_end/panels/network/components/RequestHeadersView.css

@@ -27,17 +27,12 @@ details[open] .header-count {
   display: none;
 }
 
-details summary label {
+details .hide-when-closed {
   display: none;
 }
 
-details[open] summary label {
-  display: inline-flex;
-  gap: 2px;
-}
-
-.raw-checkbox-container {
-  float: right;
+details[open] .hide-when-closed {
+  display: block;
 }
 
 details summary input {
@@ -69,6 +64,7 @@ div.raw-headers-row {
   font-weight: 500;
   width: 160px;
   flex-shrink: 0;
+  text-transform: capitalize;
 }
 
 .header-value {
@@ -175,3 +171,40 @@ div.raw-headers-row {
   font-size: 90%;
   color: var(--color-text-secondary);
 }
+
+.header-grid-container {
+  display: inline-grid;
+  grid-template-columns: 156px 50px 1fr;
+  grid-gap: 4px;
+  /* Make this fit into the same line as the summary marker */
+  width: calc(100% - 15px);
+}
+
+.header-grid-container div:last-child {
+  text-align: right;
+}
+
+.header .devtools-link {
+  color: var(--color-text-primary);
+}
+
+x-link .inline-icon { /* stylelint-disable-line selector-type-no-unknown */
+  padding-right: 3px;
+}
+
+.purple-dot {
+  filter: hue-rotate(160deg);
+}
+
+.-theme-with-dark-background .purple-dot,
+:host-context(.-theme-with-dark-background) .purple-dot {
+  filter: invert(80%) hue-rotate(350deg);
+}
+
+summary label {
+  color: var(--color-text-secondary);
+}
+
+summary label:hover {
+  color: var(--color-text-primary);
+}

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

@@ -6,9 +6,12 @@ import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
+import * as Persistence from '../../../models/persistence/persistence.js';
+import * as Workspace from '../../../models/workspace/workspace.js';
 import * as ClientVariations from '../../../third_party/chromium/client-variations/client-variations.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
@@ -16,6 +19,7 @@ import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Sources from '../../sources/sources.js';
 
 import requestHeadersViewStyles from './RequestHeadersView.css.js';
 
@@ -69,6 +73,11 @@ const UIStrings = {
   */
   general: 'General',
   /**
+  *@description Label for a link from the network panel's headers view to the file in which
+  * header overrides are defined in the sources panel.
+  */
+  headerOverrides: 'Header overrides',
+  /**
   *@description Text that is usually a hyperlink to more documentation
   */
   learnMore: 'Learn more',
@@ -204,6 +213,7 @@ export class RequestHeadersComponent extends HTMLElement {
   #showRequestHeadersText = false;
   #showResponseHeadersTextFull = false;
   #showRequestHeadersTextFull = false;
+  readonly #workspace = Workspace.Workspace.WorkspaceImpl.instance();
 
   set data(data: RequestHeadersComponentData) {
     this.#request = data.request;
@@ -212,6 +222,23 @@ export class RequestHeadersComponent extends HTMLElement {
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles];
+    this.#workspace.addEventListener(
+        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
+    this.#workspace.addEventListener(
+        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
+  }
+
+  disconnectedCallback(): void {
+    this.#workspace.removeEventListener(
+        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
+    this.#workspace.removeEventListener(
+        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
+  }
+
+  #uiSourceCodeAddedOrRemoved(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    if (this.#getHeaderOverridesFileUrl() === event.data.url()) {
+      this.#render();
+    }
   }
 
   #render(): void {
@@ -284,6 +311,10 @@ export class RequestHeadersComponent extends HTMLElement {
       this.#render();
     };
 
+    if (!mergedHeaders.length) {
+      return LitHtml.nothing;
+    }
+
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
@@ -294,6 +325,7 @@ export class RequestHeadersComponent extends HTMLElement {
           title: i18nString(UIStrings.responseHeaders),
           headerCount: this.#request.sortedResponseHeaders.length,
           checked: this.#request.responseHeadersText ? this.#showResponseHeadersText : undefined,
+          additionalContent: this.#renderHeaderOverridesLink(),
         } as CategoryData}
         aria-label=${i18nString(UIStrings.responseHeaders)}
       >
@@ -306,6 +338,57 @@ export class RequestHeadersComponent extends HTMLElement {
     // clang-format on
   }
 
+  #renderHeaderOverridesLink(): LitHtml.LitTemplate {
+    const overrideable = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES);
+    if (!overrideable || !this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl())) {
+      return LitHtml.nothing;
+    }
+
+    const overridesSetting: Common.Settings.Setting<boolean> =
+        Common.Settings.Settings.instance().moduleSetting('persistenceNetworkOverridesEnabled');
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    const fileIcon = overridesSetting.get() ? html`
+      <${IconButton.Icon.Icon.litTagName} class="inline-icon purple-dot" .data=${{
+          iconName: 'file-sync_icon',
+          width: '11px',
+          height: '13px',
+        } as IconButton.Icon.IconData}>
+      </${IconButton.Icon.Icon.litTagName}>` : html`
+      <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+          iconName: 'file_icon',
+          color: 'var(--color-text-primary)',
+          width: '12px',
+          height: '12px',
+        } as IconButton.Icon.IconData}>
+      </${IconButton.Icon.Icon.litTagName}>`;
+    // clang-format on
+
+    const revealHeadersFile = (event: Event): void => {
+      event.preventDefault();
+      const uiSourceCode = this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl());
+      if (uiSourceCode) {
+        Sources.SourcesPanel.SourcesPanel.instance().showUISourceCode(uiSourceCode);
+      }
+    };
+
+    return html`
+      <x-link @click=${revealHeadersFile} class="link devtools-link">
+        ${fileIcon}${i18nString(UIStrings.headerOverrides)}
+      </x-link>
+    `;
+  }
+
+  #getHeaderOverridesFileUrl(): Platform.DevToolsPath.UrlString {
+    if (!this.#request) {
+      return Platform.DevToolsPath.EmptyUrlString;
+    }
+    const fileUrl = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().fileUrlFromNetworkUrl(
+        this.#request.url(), /* ignoreInactive */ true);
+    return fileUrl.substring(0, fileUrl.lastIndexOf('/')) + '/' +
+        Persistence.NetworkPersistenceManager.HEADERS_FILENAME as Platform.DevToolsPath.UrlString;
+  }
+
   #renderRequestHeaders(): LitHtml.LitTemplate {
     if (!this.#request) {
       return LitHtml.nothing;
@@ -316,6 +399,9 @@ export class RequestHeadersComponent extends HTMLElement {
       return Platform.StringUtilities.compare(a.name.toLowerCase(), b.name.toLowerCase());
     });
     const requestHeadersText = this.#request.requestHeadersText();
+    if (!headers.length && requestHeadersText !== undefined) {
+      return LitHtml.nothing;
+    }
 
     const toggleShowRaw = (): void => {
       this.#showRequestHeadersText = !this.#showRequestHeadersText;
@@ -647,6 +733,7 @@ export interface CategoryData {
   title: Common.UIString.LocalizedString;
   headerCount?: number;
   checked?: boolean;
+  additionalContent?: LitHtml.LitTemplate;
 }
 
 export class Category extends HTMLElement {
@@ -656,6 +743,7 @@ export class Category extends HTMLElement {
   #title: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
   #headerCount?: number = undefined;
   #checked: boolean|undefined = undefined;
+  #additionalContent: LitHtml.LitTemplate|undefined = undefined;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles, Input.checkboxStyles];
@@ -667,6 +755,7 @@ export class Category extends HTMLElement {
         Common.Settings.Settings.instance().createSetting('request-info-' + data.name + '-category-expanded', true);
     this.#headerCount = data.headerCount;
     this.#checked = data.checked;
+    this.#additionalContent = data.additionalContent;
     this.#render();
   }
 
@@ -681,18 +770,19 @@ export class Category extends HTMLElement {
     render(html`
       <details ?open=${isOpen} @toggle=${this.#onToggle}>
         <summary class="header" @keydown=${this.#onSummaryKeyDown}>
-          ${this.#title}${this.#headerCount ?
-            html`<span class="header-count"> (${this.#headerCount})</span>` :
-            LitHtml.nothing
-          }
-          ${this.#checked !== undefined ? html`
-            <span class="raw-checkbox-container">
-              <label>
-                <input type="checkbox" .checked=${this.#checked} @change=${this.#onCheckboxToggle} />
-                ${i18nString(UIStrings.raw)}
-              </label>
-            </span>
-          ` : LitHtml.nothing}
+          <div class="header-grid-container">
+            <div>
+              ${this.#title}${this.#headerCount ?
+                html`<span class="header-count"> (${this.#headerCount})</span>` :
+                LitHtml.nothing
+              }
+            </div>
+            <div class="hide-when-closed">
+              ${this.#checked !== undefined ? html`
+                <label><input type="checkbox" .checked=${this.#checked} @change=${this.#onCheckboxToggle} />${i18nString(UIStrings.raw)}</label>
+              ` : LitHtml.nothing}
+            </div>
+            <div class="hide-when-closed">${this.#additionalContent}</div>
         </summary>
         <slot></slot>
       </details>

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -164,6 +164,7 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
     this.infoWidget = new InfoWidget();
 
     const dataGridInitialData: DataGrid.DataGridController.DataGridControllerData = {
+      paddingRowsCount: 100,
       columns: [
         {
           id: 'type',

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -4,7 +4,9 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
+import * as Root from '../../core/root/root.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -62,6 +64,11 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     if (this.uiSourceCodeUrls.has(uiSourceCode.url())) {
       return false;
     }
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
+        Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+            uiSourceCode)) {
+      return false;
+    }
     const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     return !binding || binding.fileSystem === uiSourceCode;
   }