chrome-devtools-frontend 1.0.1029795 → 1.0.1030946

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

@@ -13,6 +13,8 @@
 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/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/NavigatorView.ts

@@ -211,6 +211,16 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       this.navigatorGroupByAuthoredExperiment = Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
     }
 
+    Common.Settings.Settings.instance()
+        .moduleSetting('skipStackFramesPattern')
+        .addChangeListener(this.ignoreListChanged.bind(this));
+    Common.Settings.Settings.instance()
+        .moduleSetting('skipContentScripts')
+        .addChangeListener(this.ignoreListChanged.bind(this));
+    Common.Settings.Settings.instance()
+        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
+        .addChangeListener(this.ignoreListChanged.bind(this));
+
     this.initGrouping();
 
     Persistence.Persistence.PersistenceImpl.instance().addEventListener(
@@ -443,6 +453,12 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   }
 
   private addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
+        Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+            uiSourceCode)) {
+      return;
+    }
+
     if (!this.acceptsUISourceCode(uiSourceCode)) {
       return;
     }
@@ -1033,6 +1049,12 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     this.workspaceInternal.uiSourceCodes().forEach(this.addUISourceCode.bind(this));
   }
 
+  private ignoreListChanged(): void {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE)) {
+      this.groupingChanged();
+    }
+  }
+
   private initGrouping(): void {
     this.groupByFrame = true;
     this.groupByDomain = this.navigatorGroupByFolderSetting.get();

package/front_end/third_party/codemirror.next/bundle.ts

@@ -78,7 +78,7 @@ export async function shell() {
   return StreamLanguage.define((await import('@codemirror/legacy-modes/mode/shell')).shell);
 }
 export async function cssStreamParser() {
-  return (await import('@codemirror/legacy-modes/mode/css') as any).sCSS;
+  return (await import('@codemirror/legacy-modes/mode/css') as any).css;
 }
 export function wast() {
   return import('@codemirror/lang-wast');