chrome-devtools-frontend 1.0.1029692 → 1.0.1029795

package/config/gni/devtools_grd_files.gni

@@ -280,6 +280,7 @@ grd_files_release_sources = [
   "front_end/models/issues_manager/descriptions/TwaHttpError.md",
   "front_end/models/issues_manager/descriptions/TwaPageUnavailableOffline.md",
   "front_end/models/issues_manager/descriptions/arInsecureContext.md",
+  "front_end/models/issues_manager/descriptions/arInvalidEligibleHeader.md",
   "front_end/models/issues_manager/descriptions/arInvalidRegisterSourceHeader.md",
   "front_end/models/issues_manager/descriptions/arInvalidRegisterTriggerHeader.md",
   "front_end/models/issues_manager/descriptions/arPermissionPolicyDisabled.md",

package/front_end/models/issues_manager/AttributionReportingIssue.ts

@@ -14,6 +14,7 @@ export const enum IssueCode {
   InsecureContext = 'AttributionReportingIssue::InsecureContext',
   InvalidRegisterSourceHeader = 'AttributionReportingIssue::InvalidRegisterSourceHeader',
   InvalidRegisterTriggerHeader = 'AttributionReportingIssue::InvalidRegisterTriggerHeader',
+  InvalidEligibleHeader = 'AttributionReportingIssue::InvalidEligibleHeader',
   // TODO(apaseltiner): Remove this once old issue types are removed from
   // protocol.
   Unknown = 'AttributionReportingIssue::Unknown',
@@ -31,6 +32,8 @@ function getIssueCode(details: Protocol.Audits.AttributionReportingIssueDetails)
       return IssueCode.InvalidRegisterSourceHeader;
     case Protocol.Audits.AttributionReportingIssueType.InvalidRegisterTriggerHeader:
       return IssueCode.InvalidRegisterTriggerHeader;
+    case Protocol.Audits.AttributionReportingIssueType.InvalidEligibleHeader:
+      return IssueCode.InvalidEligibleHeader;
     default:
       return IssueCode.Unknown;
   }
@@ -76,6 +79,14 @@ export class AttributionReportingIssue extends Issue<IssueCode> {
           file: 'arInvalidRegisterTriggerHeader.md',
           links: [],
         };
+      case IssueCode.InvalidEligibleHeader:
+        return {
+          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.Unknown:
         return null;
     }

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/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

@@ -57,6 +57,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
     switch (issueCode) {
       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.invalidHeaderValue));
         break;
@@ -92,6 +93,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
     switch (issueCode) {
       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;

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

@@ -173,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 {
@@ -385,7 +389,10 @@ export class RequestHeadersComponent extends HTMLElement {
             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>
@@ -582,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/protocol_monitor/ProtocolMonitor.ts

@@ -125,6 +125,8 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
   private messages: LogMessage[] = [];
   private isRecording: boolean = false;
 
+  #historyAutocompleteDataProvider = new HistoryAutocompleteDataProvider();
+
   constructor() {
     super(true);
     this.started = false;
@@ -303,21 +305,24 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
     const shrinkFactor = 0.2;
     const tooltip = i18nString(UIStrings.sendRawCDPCommandExplanation);
     const input = new UI.Toolbar.ToolbarInput(
-        placeholder, accessiblePlaceholder, growFactor, shrinkFactor, tooltip, undefined, false);
+        placeholder, accessiblePlaceholder, growFactor, shrinkFactor, tooltip,
+        this.#historyAutocompleteDataProvider.buildTextPromptCompletions, false);
     input.addEventListener(UI.Toolbar.ToolbarInput.Event.EnterPressed, () => this.#onCommandSend(input));
     return input;
   }
 
   #onCommandSend(input: UI.Toolbar.ToolbarInput): void {
-    const {command, parameters} = parseCommandInput(input.value());
+    const value = input.value();
+    const {command, parameters} = parseCommandInput(value);
     const test = ProtocolClient.InspectorBackend.test;
     // TODO: TS thinks that properties are read-only because
     // in TS test is defined as a namespace.
     // @ts-ignore
     test.sendRawMessage(command, parameters, () => {});
+    this.#historyAutocompleteDataProvider.addEntry(value);
   }
 
-  static instance(opts = {forceNew: null}): ProtocolMonitorImpl {
+  static instance(opts: {forceNew: null|boolean} = {forceNew: null}): ProtocolMonitorImpl {
     const {forceNew} = opts;
     if (!protocolMonitorImplInstance || forceNew) {
       protocolMonitorImplInstance = new ProtocolMonitorImpl();
@@ -487,6 +492,39 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
   }
 }
 
+export class HistoryAutocompleteDataProvider {
+  #maxHistorySize = 200;
+  #commandHistory = new Set<string>();
+
+  constructor(maxHistorySize?: number) {
+    if (maxHistorySize !== undefined) {
+      this.#maxHistorySize = maxHistorySize;
+    }
+  }
+
+  buildTextPromptCompletions =
+      async(expression: string, prefix: string, force?: boolean): Promise<UI.SuggestBox.Suggestions> => {
+    if (!prefix && !force && expression) {
+      return [];
+    }
+    const newestToOldest = [...this.#commandHistory].reverse();
+    return newestToOldest.filter(cmd => cmd.startsWith(prefix)).map(text => ({
+                                                                      text,
+                                                                    }));
+  };
+
+  addEntry(value: string): void {
+    if (this.#commandHistory.has(value)) {
+      this.#commandHistory.delete(value);
+    }
+    this.#commandHistory.add(value);
+    if (this.#commandHistory.size > this.#maxHistorySize) {
+      const earliestEntry = this.#commandHistory.values().next().value;
+      this.#commandHistory.delete(earliestEntry);
+    }
+  }
+}
+
 export class InfoWidget extends UI.Widget.VBox {
   private readonly tabbedPane: UI.TabbedPane.TabbedPane;
   constructor() {

package/front_end/ui/legacy/TextPrompt.ts

@@ -89,7 +89,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   }
 
   initialize(
-      completions: (this: null, arg1: string, arg2: string, arg3?: boolean|undefined) => Promise<Suggestion[]>,
+      completions: (this: null, expression: string, filter: string, force?: boolean|undefined) => Promise<Suggestion[]>,
       stopCharacters?: string, usesSuggestionBuilder?: boolean): void {
     this.loadCompletions = completions;
     this.completionStopCharacters = stopCharacters || ' =:[({;,!+-*/&|^<>.';

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1029692"
+  "version": "1.0.1029795"
 }