chrome-devtools-frontend 1.0.1028626 → 1.0.1029795

package/front_end/models/issues_manager/AttributionReportingIssue.ts

@@ -10,34 +10,32 @@ import {type MarkdownIssueDescription} from './MarkdownIssueDescription.js';
 
 export const enum IssueCode {
   PermissionPolicyDisabled = 'AttributionReportingIssue::PermissionPolicyDisabled',
-  AttributionSourceUntrustworthyFrameOrigin = 'AttributionReportingIssue::AttributionSourceUntrustworthyFrameOrigin',
-  AttributionSourceUntrustworthyOrigin = 'AttributionReportingIssue::AttributionSourceUntrustworthyOrigin',
-  AttributionUntrustworthyFrameOrigin = 'AttributionReportingIssue::AttributionUntrustworthyFrameOrigin',
-  AttributionUntrustworthyOrigin = 'AttributionReportingIssue::AttributionUntrustworthyOrigin',
   UntrustworthyReportingOrigin = 'AttributionReportingIssue::UntrustworthyReportingOrigin',
   InsecureContext = 'AttributionReportingIssue::InsecureContext',
-  InvalidHeader = 'AttributionReportingIssue::InvalidHeader',
+  InvalidRegisterSourceHeader = 'AttributionReportingIssue::InvalidRegisterSourceHeader',
   InvalidRegisterTriggerHeader = 'AttributionReportingIssue::InvalidRegisterTriggerHeader',
+  InvalidEligibleHeader = 'AttributionReportingIssue::InvalidEligibleHeader',
+  // TODO(apaseltiner): Remove this once old issue types are removed from
+  // protocol.
+  Unknown = 'AttributionReportingIssue::Unknown',
 }
 
 function getIssueCode(details: Protocol.Audits.AttributionReportingIssueDetails): IssueCode {
   switch (details.violationType) {
     case Protocol.Audits.AttributionReportingIssueType.PermissionPolicyDisabled:
       return IssueCode.PermissionPolicyDisabled;
-    case Protocol.Audits.AttributionReportingIssueType.AttributionSourceUntrustworthyOrigin:
-      return details.frame !== undefined ? IssueCode.AttributionSourceUntrustworthyFrameOrigin :
-                                           IssueCode.AttributionSourceUntrustworthyOrigin;
-    case Protocol.Audits.AttributionReportingIssueType.AttributionUntrustworthyOrigin:
-      return details.frame !== undefined ? IssueCode.AttributionUntrustworthyFrameOrigin :
-                                           IssueCode.AttributionUntrustworthyOrigin;
     case Protocol.Audits.AttributionReportingIssueType.UntrustworthyReportingOrigin:
       return IssueCode.UntrustworthyReportingOrigin;
     case Protocol.Audits.AttributionReportingIssueType.InsecureContext:
       return IssueCode.InsecureContext;
     case Protocol.Audits.AttributionReportingIssueType.InvalidHeader:
-      return IssueCode.InvalidHeader;
+      return IssueCode.InvalidRegisterSourceHeader;
     case Protocol.Audits.AttributionReportingIssueType.InvalidRegisterTriggerHeader:
       return IssueCode.InvalidRegisterTriggerHeader;
+    case Protocol.Audits.AttributionReportingIssueType.InvalidEligibleHeader:
+      return IssueCode.InvalidEligibleHeader;
+    default:
+      return IssueCode.Unknown;
   }
 }
 
@@ -61,47 +59,35 @@ export class AttributionReportingIssue extends Issue<IssueCode> {
           file: 'arPermissionPolicyDisabled.md',
           links: [],
         };
-      case IssueCode.AttributionSourceUntrustworthyFrameOrigin:
+      case IssueCode.UntrustworthyReportingOrigin:
         return {
-          file: 'arAttributionSourceUntrustworthyFrameOrigin.md',
+          file: 'arUntrustworthyReportingOrigin.md',
           links: [],
         };
-      case IssueCode.AttributionSourceUntrustworthyOrigin:
+      case IssueCode.InsecureContext:
         return {
-          file: 'arAttributionSourceUntrustworthyOrigin.md',
-          links: [
-            {
-              link:
-                  'https://developer.chrome.com/docs/privacy-sandbox/attribution-reporting-event-guide/#html-attribute-attributiondestination-required',
-              linkTitle: 'attributiondestination attribute',
-            },
-            {
-              link:
-                  'https://developer.chrome.com/docs/privacy-sandbox/attribution-reporting-event-guide/#html-attribute-attributionreportto',
-              linkTitle: 'attributionreportto attribute',
-            },
-          ],
+          file: 'arInsecureContext.md',
+          links: [],
         };
-      case IssueCode.AttributionUntrustworthyFrameOrigin:
+      case IssueCode.InvalidRegisterSourceHeader:
         return {
-          file: 'arAttributionUntrustworthyFrameOrigin.md',
+          file: 'arInvalidRegisterSourceHeader.md',
           links: [],
         };
-      case IssueCode.AttributionUntrustworthyOrigin:
+      case IssueCode.InvalidRegisterTriggerHeader:
         return {
-          file: 'arAttributionUntrustworthyOrigin.md',
+          file: 'arInvalidRegisterTriggerHeader.md',
           links: [],
         };
-      case IssueCode.UntrustworthyReportingOrigin:
-        return null;
-      case IssueCode.InsecureContext:
-        return null;
-      case IssueCode.InvalidHeader:
+      case IssueCode.InvalidEligibleHeader:
         return {
-          file: 'arInvalidHeader.md',
-          links: [],
+          file: 'arInvalidEligibleHeader.md',
+          links: [{
+            link: 'https://tools.ietf.org/id/draft-ietf-httpbis-header-structure-15.html#rfc.section.4.2.2',
+            linkTitle: 'Structured Headers RFC',
+          }],
         };
-      case IssueCode.InvalidRegisterTriggerHeader:
+      case IssueCode.Unknown:
         return null;
     }
   }

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -27,9 +27,14 @@ const UIStrings = {
    */
   title: 'Deprecated Feature Used',
 
-  // Store alphabetized messages per DeprecationIssueType in this block.
   /**
-   * @description TODO(crbug.com/1318846): Description needed for translation
+   * @description We show this warning when 1) an "authorization" header is
+   *   attached to the request by scripts, 2) there is no "authorization" in
+   *   the "access-control-allow-headers" header in the response, and 3) there
+   *   is a wildcard symbol ("*") in the "access-control-allow-header" header
+   *   in the response. This is allowed now, but we're planning to reject such
+   *   responses and require responses to have an "access-control-allow-headers"
+   *   containing "authorization".
    */
   authorizationCoveredByWildcard:
       'Authorization will not be covered by the wildcard symbol (*) in CORS `Access-Control-Allow-Headers` handling.',
@@ -181,6 +186,11 @@ const UIStrings = {
    */
   openWebDatabaseInsecureContext:
       'WebSQL in non-secure contexts is deprecated and will be removed in M107. Please use Web Storage or Indexed Database.',
+  /**
+   * @description Warning displayed to developers when persistent storage type is used to notify that storage type is deprecated.
+   */
+  persistentQuotaType:
+      '`StorageType.persistent` is deprecated. Please use standardized `navigator.storage` instead.',
   /**
    * @description This issue indicates that a `<source>` element with a `<picture>` parent was using an `src` attribute, which is not valid and is ignored by the browser. The `srcset` attribute should be used instead.
    */
@@ -441,6 +451,11 @@ export class DeprecationIssue extends Issue {
         feature = 5175124599767040;
         milestone = 105;
         break;
+      case Protocol.Audits.DeprecationIssueType.PersistentQuotaType:
+        messageFunction = i18nLazyString(UIStrings.persistentQuotaType);
+        feature = 5176235376246784;
+        milestone = 106;
+        break;
       case Protocol.Audits.DeprecationIssueType.PictureSourceSrc:
         messageFunction = i18nLazyString(UIStrings.pictureSourceSrc);
         break;

package/front_end/models/issues_manager/descriptions/arInsecureContext.md

@@ -0,0 +1,7 @@
+# Ensure that the attribution registration context is secure
+
+This page tried to register a source or trigger using the Attribution Reporting
+API but failed because the page that initiated the registration was not secure.
+
+The registration context must use HTTPS unless it is `localhost` or
+`127.0.0.1`.

package/front_end/models/issues_manager/descriptions/arInvalidEligibleHeader.md

@@ -0,0 +1,19 @@
+# Ensure that the `Attribution-Reporting-Eligible` header is valid
+
+This page sent a request containing an `Attribution-Reporting-Eligible` header,
+but the header value was not a valid structured dictionary, causing any source
+or trigger registration in the response to be ignored.
+
+The header should contain a structured dictionary as follows:
+
+To allow the response to register an event source:
+`Attribution-Reporting-Eligible: event-source`
+
+To allow the response to register a trigger:
+`Attribution-Reporting-Eligible: trigger`
+
+To allow the response to register an event source or a trigger:
+`Attribution-Reporting-Eligible: event-source, trigger`
+
+To prevent the response from registering anything:
+`Attribution-Reporting-Eligible: `

package/front_end/models/issues_manager/descriptions/arInvalidRegisterSourceHeader.md

@@ -0,0 +1,5 @@
+# Ensure that the `Attribution-Reporting-Register-Source` header is valid
+
+This page tried to register a source using the Attribution Reporting API but
+failed because an `Attribution-Reporting-Register-Source` response header was
+invalid.

package/front_end/models/issues_manager/descriptions/arInvalidRegisterTriggerHeader.md

@@ -0,0 +1,5 @@
+# Ensure that the `Attribution-Reporting-Register-Trigger` header is valid
+
+This page tried to register a trigger using the Attribution Reporting API but
+failed because an `Attribution-Reporting-Register-Trigger` response header was
+invalid.

package/front_end/models/issues_manager/descriptions/arPermissionPolicyDisabled.md

@@ -1,6 +1,9 @@
-# Ensure the "attribution-reporting" Permission Policy is enabled when using the Attribution Reporting API
+# Ensure that the `attribution-reporting` permission policy is enabled
 
-This page tries to use the Attribution Reporting API but this was aborted, because the `attribution-reporting` policy is not enabled.
+This page tried to use the Attribution Reporting API but failed because the
+`attribution-reporting` permission policy is not enabled.
 
-This API is enabled by default in the top-level context and in same-origin child frames, but must
-be explicitly opted-in for cross-origin frames. Add the permission policy as follows: `<iframe src="..." allow="attribution-reporting">`.
+This API is enabled by default in the top-level context and in same-origin
+child frames, but must be explicitly opted-in for cross-origin frames. Add the
+permission policy as follows:
+`<iframe src="..." allow="attribution-reporting">`.

package/front_end/models/issues_manager/descriptions/arUntrustworthyReportingOrigin.md

@@ -0,0 +1,10 @@
+# Ensure that attribution reporting origins are trustworthy
+
+This page tried to register a source or trigger using the Attribution Reporting
+API but failed because the reporting origin was not potentially trustworthy.
+
+The reporting origin is typically the server that sets the
+`Attribution-Reporting-Register-Source` or
+`Attribution-Reporting-Register-Trigger` header.
+
+The reporting origin must use HTTPS unless it is `localhost` or `127.0.0.1`.

package/front_end/models/text_utils/ContentProvider.ts

@@ -59,4 +59,12 @@ export const contentAsDataURL = function(
 export type DeferredContent = {
   content: string,
   isEncoded: boolean,
-}|{content: null, error: string, isEncoded: boolean};
+}|{
+  content: '',
+  isEncoded: false,
+  wasmDisassemblyInfo: Common.WasmDisassembly.WasmDisassembly,
+}|{
+  content: null,
+  error: string,
+  isEncoded: boolean,
+};

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -26,6 +26,8 @@ import {cssRuleValidatorsMap, type AuthoringHint} from './CSSRuleValidator.js';
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
 
+export const activeHints = new WeakMap<Element, AuthoringHint>();
+
 const UIStrings = {
   /**
   *@description Text in Color Swatch Popover Icon of the Elements panel
@@ -719,11 +721,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const showAuthoringHint = authoringHint !== null && this.property.parsedOk;
     if (showAuthoringHint) {
       const hintIcon = UI.Icon.Icon.create('mediumicon-info', 'hint');
-      const hintPopover =
-          new UI.PopoverHelper.PopoverHelper(hintIcon, event => this.handleHintPopoverRequest(authoringHint, event));
-      hintPopover.setHasPadding(true);
-      hintPopover.setTimeout(0, 100);
-
+      activeHints.set(hintIcon, authoringHint);
       this.listItemElement.append(hintIcon);
     }
 
@@ -836,24 +834,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     return null;
   }
 
-  private handleHintPopoverRequest(authoringHint: AuthoringHint, event: Event): UI.PopoverHelper.PopoverRequest|null {
-    const link = event.composedPath()[0];
-    Platform.DCHECK(() => link instanceof Element, 'Link is not an instance of Element');
-
-    return {
-      box: (link as Element).boxInWindow(),
-      show: async(popover: UI.GlassPane.GlassPane): Promise<boolean> => {
-        const node = this.node();
-        if (!node) {
-          return false;
-        }
-        const popupElement = new ElementsComponents.CSSHintDetailsView.CSSHintDetailsView(authoringHint);
-        popover.contentElement.insertAdjacentElement('beforeend', popupElement);
-        return true;
-      },
-    };
-  }
-
   private mouseUp(event: MouseEvent): void {
     const activeTreeElement = parentMap.get(this.parentPaneInternal);
     parentMap.delete(this.parentPaneInternal);

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -60,7 +60,7 @@ import {StyleEditorWidget} from './StyleEditorWidget.js';
 import {StylePropertyHighlighter} from './StylePropertyHighlighter.js';
 import stylesSidebarPaneStyles from './stylesSidebarPane.css.js';
 
-import {type StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import {activeHints, type StylePropertyTreeElement} from './StylePropertyTreeElement.js';
 import {
   StylePropertiesSection,
   BlankStylePropertiesSection,
@@ -213,6 +213,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private needsForceUpdate: boolean;
   private readonly resizeThrottler: Common.Throttler.Throttler;
   private readonly imagePreviewPopover: ImagePreviewPopover;
+  #hintPopoverHelper: UI.PopoverHelper.PopoverHelper;
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
   #urlToChangeTracker: Map<Platform.DevToolsPath.UrlString, ChangeTracker> = new Map();
   #copyChangesButton?: UI.Toolbar.ToolbarButton;
@@ -282,6 +283,35 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }, () => this.node());
 
     this.activeCSSAngle = null;
+
+    this.#hintPopoverHelper = new UI.PopoverHelper.PopoverHelper(this.contentElement, event => {
+      const icon = event.composedPath()[0] as Element;
+
+      if (!icon) {
+        return null;
+      }
+
+      if (!icon.matches('.hint')) {
+        return null;
+      }
+
+      const hint = activeHints.get(icon);
+
+      if (!hint) {
+        return null;
+      }
+
+      return {
+        box: icon.boxInWindow(),
+        show: async(popover: UI.GlassPane.GlassPane): Promise<boolean> => {
+          const popupElement = new ElementsComponents.CSSHintDetailsView.CSSHintDetailsView(hint);
+          popover.contentElement.appendChild(popupElement);
+          return true;
+        },
+      };
+    });
+    this.#hintPopoverHelper.setTimeout(200);
+    this.#hintPopoverHelper.setHasPadding(true);
   }
 
   swatchPopoverHelper(): InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper {

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -14,11 +14,6 @@ const UIStrings = {
    * @description Label for number of rows in the issue details table.
    */
   nViolations: '{n, plural, =1 {# violation} other {# violations}}',
-  /**
-   * @description Noun, label for the column showing the associated frame in the issue details table.
-   * The associated frame can either be the "main frame" (or main window), or an HTML iframe.
-   */
-  frame: 'Frame',
   /**
    * @description Noun, label for the column showing the associated HTML element in the issue details table.
    */
@@ -60,31 +55,19 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
       issues: Iterable<IssuesManager.AttributionReportingIssue.AttributionReportingIssue>): void {
     const header = document.createElement('tr');
     switch (issueCode) {
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionUntrustworthyFrameOrigin:
-        this.appendColumnTitle(header, i18nString(UIStrings.frame));
-        this.appendColumnTitle(header, i18nString(UIStrings.request));
-        this.appendColumnTitle(header, i18nString(UIStrings.untrustworthyOrigin));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionUntrustworthyOrigin:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidRegisterSourceHeader:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidRegisterTriggerHeader:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidEligibleHeader:
         this.appendColumnTitle(header, i18nString(UIStrings.request));
-        this.appendColumnTitle(header, i18nString(UIStrings.untrustworthyOrigin));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionSourceUntrustworthyFrameOrigin:
-        this.appendColumnTitle(header, i18nString(UIStrings.frame));
-        this.appendColumnTitle(header, i18nString(UIStrings.element));
-        this.appendColumnTitle(header, i18nString(UIStrings.untrustworthyOrigin));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidHeaderValue));
         break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionSourceUntrustworthyOrigin:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InsecureContext:
+      case IssuesManager.AttributionReportingIssue.IssueCode.UntrustworthyReportingOrigin:
         this.appendColumnTitle(header, i18nString(UIStrings.element));
-        this.appendColumnTitle(header, i18nString(UIStrings.untrustworthyOrigin));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidHeader:
-        this.appendColumnTitle(header, i18nString(UIStrings.frame));
         this.appendColumnTitle(header, i18nString(UIStrings.request));
-        this.appendColumnTitle(header, i18nString(UIStrings.invalidHeaderValue));
+        this.appendColumnTitle(header, i18nString(UIStrings.untrustworthyOrigin));
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyDisabled:
-        this.appendColumnTitle(header, i18nString(UIStrings.frame));
         this.appendColumnTitle(header, i18nString(UIStrings.element));
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         break;
@@ -108,21 +91,19 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
     const details = issue.issueDetails;
 
     switch (issueCode) {
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionSourceUntrustworthyOrigin:
-        await this.#appendElementOrEmptyCell(element, issue);
-        this.appendIssueDetailCell(element, details.invalidParameter || '');
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionUntrustworthyOrigin:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidRegisterSourceHeader:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidRegisterTriggerHeader:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidEligibleHeader:
         this.#appendRequestOrEmptyCell(element, details.request);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidHeader:
-        this.#appendFrameOrEmptyCell(element, issue);
+      case IssuesManager.AttributionReportingIssue.IssueCode.InsecureContext:
+      case IssuesManager.AttributionReportingIssue.IssueCode.UntrustworthyReportingOrigin:
+        await this.#appendElementOrEmptyCell(element, issue);
         this.#appendRequestOrEmptyCell(element, details.request);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyDisabled:
-        this.#appendFrameOrEmptyCell(element, issue);
         await this.#appendElementOrEmptyCell(element, issue);
         this.#appendRequestOrEmptyCell(element, details.request);
         break;
@@ -131,16 +112,6 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
     this.affectedResources.appendChild(element);
   }
 
-  #appendFrameOrEmptyCell(
-      parent: HTMLElement, issue: IssuesManager.AttributionReportingIssue.AttributionReportingIssue): void {
-    const details = issue.issueDetails;
-    if (details.frame) {
-      parent.appendChild(this.createFrameCell(details.frame.frameId, issue.getCategory()));
-    } else {
-      this.appendIssueDetailCell(parent, '');
-    }
-  }
-
   async #appendElementOrEmptyCell(
       parent: HTMLElement, issue: IssuesManager.AttributionReportingIssue.AttributionReportingIssue): Promise<void> {
     const details = issue.issueDetails;

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

@@ -6,7 +6,6 @@ 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 {assertNotNullOrUndefined} from '../../../core/platform/platform.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';
@@ -174,12 +173,16 @@ export class RequestHeadersView extends UI.Widget.VBox {
   wasShown(): void {
     this.#request.addEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
     this.#request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
+    this.#request.addEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged, this.#refreshHeadersView, this);
+    this.#request.addEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged, this.#refreshHeadersView, this);
     this.#refreshHeadersView();
   }
 
   willHide(): void {
     this.#request.removeEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
     this.#request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
+    this.#request.removeEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged, this.#refreshHeadersView, this);
+    this.#request.removeEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged, this.#refreshHeadersView, this);
   }
 
   #refreshHeadersView(): void {
@@ -212,7 +215,9 @@ export class RequestHeadersComponent extends HTMLElement {
   }
 
   #render(): void {
-    assertNotNullOrUndefined(this.#request);
+    if (!this.#request) {
+      return;
+    }
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -224,8 +229,10 @@ export class RequestHeadersComponent extends HTMLElement {
     // clang-format on
   }
 
-  #renderResponseHeaders(): LitHtml.TemplateResult {
-    assertNotNullOrUndefined(this.#request);
+  #renderResponseHeaders(): LitHtml.LitTemplate {
+    if (!this.#request) {
+      return LitHtml.nothing;
+    }
 
     const headersWithIssues = [];
     if (this.#request.wasBlocked()) {
@@ -299,8 +306,10 @@ export class RequestHeadersComponent extends HTMLElement {
     // clang-format on
   }
 
-  #renderRequestHeaders(): LitHtml.TemplateResult {
-    assertNotNullOrUndefined(this.#request);
+  #renderRequestHeaders(): LitHtml.LitTemplate {
+    if (!this.#request) {
+      return LitHtml.nothing;
+    }
 
     const headers = this.#request.requestHeaders().slice();
     headers.sort(function(a, b) {
@@ -337,8 +346,7 @@ export class RequestHeadersComponent extends HTMLElement {
   }
 
   #maybeRenderProvisionalHeadersWarning(): LitHtml.LitTemplate {
-    assertNotNullOrUndefined(this.#request);
-    if (this.#request.requestHeadersText() !== undefined) {
+    if (!this.#request || this.#request.requestHeadersText() !== undefined) {
       return LitHtml.nothing;
     }
 
@@ -350,14 +358,16 @@ export class RequestHeadersComponent extends HTMLElement {
     } else {
       cautionText = i18nString(UIStrings.provisionalHeadersAreShown);
     }
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
     return html`
       <div class="call-to-action">
         <div class="call-to-action-body">
           <div class="explanation" title=${cautionTitle}>
             <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
-              iconName: 'warning_icon',
-              width: '12px',
-              height: '12px',
+                iconName: 'clear-warning_icon',
+                width: '12px',
+                height: '12px',
               } as IconButton.Icon.IconData}>
             </${IconButton.Icon.Icon.litTagName}>
             ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
@@ -365,6 +375,7 @@ export class RequestHeadersComponent extends HTMLElement {
         </div>
       </div>
     `;
+    // clang-format on
   }
 
   #renderHeader(header: HeaderDescriptor): LitHtml.TemplateResult {
@@ -373,13 +384,15 @@ export class RequestHeadersComponent extends HTMLElement {
     return html`
       <div class="row">
         <div class="header-name">
-          ${header.headerNotSet ? html`
-            <div class="header-badge header-badge-text">
-              ${i18n.i18n.lockedString('not-set')}
-            </div>
-          ` : ''}${header.name}:
+          ${header.headerNotSet ?
+            html`<div class="header-badge header-badge-text">${i18n.i18n.lockedString('not-set')}</div>` :
+            LitHtml.nothing
+          }${header.name}:
         </div>
-        <div class="header-value ${header.headerValueIncorrect ? 'header-warning' : ''}">
+        <div
+          class="header-value ${header.headerValueIncorrect ? 'header-warning' : ''}"
+          @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+        >
           ${header.value?.toString() || ''}
           ${this.#maybeRenderHeaderValueSuffix(header)}
         </div>
@@ -399,10 +412,10 @@ export class RequestHeadersComponent extends HTMLElement {
       // clang-format off
       return html`
         <${IconButton.Icon.Icon.litTagName} class="inline-icon" title=${titleText} .data=${{
-          iconName: 'warning_icon',
-          width: '12px',
-          height: '12px',
-        } as IconButton.Icon.IconData}>
+            iconName: 'clear-warning_icon',
+            width: '12px',
+            height: '12px',
+          } as IconButton.Icon.IconData}>
         </${IconButton.Icon.Icon.litTagName}>
       `;
       // clang-format on
@@ -533,8 +546,10 @@ export class RequestHeadersComponent extends HTMLElement {
     `;
   }
 
-  #renderGeneralSection(): LitHtml.TemplateResult {
-    assertNotNullOrUndefined(this.#request);
+  #renderGeneralSection(): LitHtml.LitTemplate {
+    if (!this.#request) {
+      return LitHtml.nothing;
+    }
 
     let coloredCircleClassName = 'red-circle';
     if (this.#request.statusCode < 300 || this.#request.statusCode === 304) {
@@ -574,28 +589,43 @@ export class RequestHeadersComponent extends HTMLElement {
       >
         <div class="row">
           <div class="header-name">${i18nString(UIStrings.requestUrl)}:</div>
-          <div class="header-value">${this.#request.url()}</div>
+          <div
+            class="header-value"
+            @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+          >${this.#request.url()}</div>
         </div>
         ${this.#request.statusCode? html`
           <div class="row">
             <div class="header-name">${i18nString(UIStrings.requestMethod)}:</div>
-            <div class="header-value">${this.#request.requestMethod}</div>
+            <div
+              class="header-value"
+              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+            >${this.#request.requestMethod}</div>
           </div>
           <div class="row">
             <div class="header-name">${i18nString(UIStrings.statusCode)}:</div>
-            <div class="header-value ${coloredCircleClassName} ${statusTextHasComment ? 'status-with-comment' : ''}">${statusText}</div>
+            <div
+              class="header-value ${coloredCircleClassName} ${statusTextHasComment ? 'status-with-comment' : ''}"
+              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+            >${statusText}</div>
           </div>
         ` : ''}
         ${this.#request.remoteAddress()? html`
           <div class="row">
             <div class="header-name">${i18nString(UIStrings.remoteAddress)}:</div>
-            <div class="header-value">${this.#request.remoteAddress()}</div>
+            <div
+              class="header-value"
+              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+            >${this.#request.remoteAddress()}</div>
           </div>
         ` : ''}
         ${this.#request.referrerPolicy()? html`
           <div class="row">
             <div class="header-name">${i18nString(UIStrings.referrerPolicy)}:</div>
-            <div class="header-value">${this.#request.referrerPolicy()}</div>
+            <div
+              class="header-value"
+              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+            >${this.#request.referrerPolicy()}</div>
           </div>
         ` : ''}
       </${Category.litTagName}>

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

@@ -108,6 +108,11 @@ const UIStrings = {
   *@description Title of a setting under the Network category that can be invoked through the Command Menu
   */
   dontGroupNetworkLogItemsByFrame: 'Don\'t group network log items by frame',
+  /**
+   * @description Label of a checkbox in the DevTools settings UI.
+   */
+  enableUNCLoading:
+      'Allow `DevTools` to load resources, such as source maps, from Windows Shares via `UNC` paths. Disabled by default for security reasons.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/network-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -316,6 +321,17 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
+// While this setting is used by the Network module, we place it under the
+// "sources" category as source map loading is the dominant use case.
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
+  title: i18nLazyString(UIStrings.enableUNCLoading),
+  settingName: 'network.enable-unc-loading',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
 UI.ViewManager.registerLocationResolver({
   name: UI.ViewManager.ViewLocationValues.NETWORK_SIDEBAR,
   category: UI.ViewManager.ViewLocationCategoryValues.NETWORK,