chrome-devtools-frontend 1.0.1029692 → 1.0.1030457

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -4,6 +4,14 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 
+import {
+  buildStyledPropertyText,
+  buildStyledRuleText,
+  isFlexContainer,
+  isGridContainer,
+  isMulticolContainer,
+} from './CSSRuleValidatorHelper.js';
+
 const UIStrings = {
   /**
     *@description Hint prefix for deprecated properties.
@@ -18,25 +26,36 @@ const UIStrings = {
     *@example {flex-wrap: nowrap} REASON_RULE_CODE
     *@example {align-content} AFFECTED_RULE_CODE
     */
-  ruleViolatedBySameElementRuleReason: 'This element has {REASON_RULE_CODE} rule, therefore {AFFECTED_RULE_CODE} has no effect.',
+  ruleViolatedBySameElementRuleReason:
+      'This element has {REASON_RULE_CODE} rule, therefore {AFFECTED_RULE_CODE} has no effect.',
   /**
     *@description Possible fix for rules that was violated because of same elements rule.
     *@example {flex-wrap: nowrap} REASON_RULE_CODE
     */
-  ruleViolatedBySameElementRuleFix: 'For this property to work, please remove or change the value of {REASON_RULE_CODE}',
+  ruleViolatedBySameElementRuleFix:
+      'For this property to work, please remove or change the value of {REASON_RULE_CODE}',
+  /**
+    *@description Possible fix for rules that was violated because of same elements rule.
+    *@example {display: block} EXISTING_RULE
+    *@example {display: flex} TARGET_RULE
+    */
+  ruleViolatedBySameElementRuleChangeSuggestion:
+      'For this property to work, please change the {EXISTING_RULE} rule to {TARGET_RULE}',
   /**
     *@description Hint for rules that was violated because of parent element rule.
     *@example {display: block} REASON_RULE_CODE
     *@example {flex} AFFECTED_RULE_CODE
     */
-  ruleViolatedByParentElementRuleReason: 'Parent element has {REASON_RULE_CODE} rule, therefore this elements {AFFECTED_RULE_CODE} has no effect',
+  ruleViolatedByParentElementRuleReason:
+      'Parent element has {REASON_RULE_CODE} rule, therefore this elements {AFFECTED_RULE_CODE} has no effect',
   /**
     *@description Posible fix for rules that was violated because of parent element rule.
     *@example {display: block} EXISTING_PARENT_ELEMENT_RULE
     *@example {display: flex} TARGET_PARENT_ELEMENT_RULE
     */
-  ruleViolatedByParentElementRuleFix: 'Please change parent elements {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue.',
-  };
+  ruleViolatedByParentElementRuleFix:
+      'Please change parent elements {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue.',
+};
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
@@ -94,7 +113,9 @@ export abstract class CSSRuleValidator {
     return this.#affectedProperties;
   }
 
-  abstract getAuthoringHint(propertyName: string, parentComputedStyles: Map<String, String>|null): AuthoringHint;
+  abstract getAuthoringHint(
+      propertyName: string, computedStyles: Map<String, String>|null,
+      parentComputedStyles: Map<String, String>|null): AuthoringHint;
 }
 
 export class AlignContentValidator extends CSSRuleValidator {
@@ -106,16 +127,15 @@ export class AlignContentValidator extends CSSRuleValidator {
     if (computedStyles === null || computedStyles === undefined) {
       return true;
     }
-    const display = computedStyles.get('display');
-    if (display !== 'flex' && display !== 'inline-flex') {
+    if (!isFlexContainer(computedStyles)) {
       return true;
     }
     return computedStyles.get('flex-wrap') !== 'nowrap';
   }
 
   getAuthoringHint(): AuthoringHint {
-    const reasonRuleCode = '<code class="unbreakable-text"><span class="property">flex-wrap</span>: nowrap</code>';
-    const affectedRuleCode = '<code class="unbreakable-text"><span class="property">align-content</span></code>';
+    const reasonRuleCode = buildStyledPropertyText('flex-wrap');
+    const affectedRuleCode = buildStyledPropertyText('align-content');
 
     return new AuthoringHint(
       'align-content',
@@ -138,18 +158,18 @@ export class FlexItemValidator extends CSSRuleValidator {
   }
 
   isRuleValid(computedStyles: Map<String, String>|null, parentsComputedStyles: Map<String, String>|null): boolean {
-    if (computedStyles === null || computedStyles === undefined || parentsComputedStyles === null ||
-        parentsComputedStyles === undefined) {
+    if (parentsComputedStyles === null) {
       return true;
     }
-    const parentDisplay = parentsComputedStyles.get('display');
-    return parentDisplay === 'flex' || parentDisplay === 'inline-flex';
+    return isFlexContainer(parentsComputedStyles);
   }
 
-  getAuthoringHint(property: string, parentsComputedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = '<code class="unbreakable-text"><span class="property">display</span>:' + parentsComputedStyles?.get('display') + '</code>';
-    const affectedRuleCode = '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
-    const targetParentRuleCode = '<code class="unbreakable-text"><span class="property">display</span>: flex</code>';
+  getAuthoringHint(
+      property: string, computedStyles: Map<String, String>|null,
+      parentsComputedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', parentsComputedStyles?.get('display'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+    const targetParentRuleCode = buildStyledRuleText('display', 'flex');
 
     return new AuthoringHint(
       property,
@@ -167,11 +187,326 @@ export class FlexItemValidator extends CSSRuleValidator {
   }
 }
 
-const setupCSSRulesValidators = (): Map<String, CSSRuleValidator[]> => {
-  const validators = [new AlignContentValidator(), new FlexItemValidator()];
+export class FlexContainerValidator extends CSSRuleValidator {
+  constructor() {
+    super(['flex-direction', 'flex-flow', 'flex-wrap', 'justify-content']);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null) {
+      return true;
+    }
+    return isFlexContainer(computedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const targetRuleCode = buildStyledRuleText('display', 'flex');
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
+          'EXISTING_RULE': reasonRuleCode,
+          'TARGET_RULE': targetRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class GridContainerValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'grid',
+      'grid-auto-columns',
+      'grid-auto-flow',
+      'grid-auto-rows',
+      'grid-template',
+      'grid-template-areas',
+      'grid-template-columns',
+      'grid-template-rows',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null) {
+      return true;
+    }
+    return isGridContainer(computedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const targetRuleCode = buildStyledRuleText('display', 'grid');
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
+          'EXISTING_RULE': reasonRuleCode,
+          'TARGET_RULE': targetRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class GridItemValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'grid-area',
+      'grid-column',
+      'grid-row',
+      'grid-row-end',
+      'grid-row-start',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null, parentComputedStyles: Map<String, String>|null): boolean {
+    if (parentComputedStyles === null) {
+      return true;
+    }
+    return isGridContainer(parentComputedStyles);
+  }
+
+  getAuthoringHint(
+      property: string, computedStyles: Map<String, String>|null,
+      parentComputedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', parentComputedStyles?.get('display'));
+    const targetParentRuleCode = buildStyledRuleText('display', 'grid');
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+          'EXISTING_PARENT_ELEMENT_RULE': reasonRuleCode,
+          'TARGET_PARENT_ELEMENT_RULE': targetParentRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class FlexGridValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'order',
+      'align-content',
+      'align-items',
+      'align-self',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null) {
+      return true;
+    }
+    return isFlexContainer(computedStyles) || isGridContainer(computedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_RULE_CODE': reasonRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class MulticolFlexGridValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'gap',
+      'column-gap',
+      'row-gap',
+      'grid-gap',
+      'grid-column-gap',
+      'grid-column-end',
+      'grid-row-gap',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null) {
+      return true;
+    }
+    return isMulticolContainer(computedStyles) || isFlexContainer(computedStyles) || isGridContainer(computedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_RULE_CODE': reasonRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class PaddingValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'padding',
+      'padding-top',
+      'padding-right',
+      'padding-bottom',
+      'padding-left',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    const display = computedStyles?.get('display');
+    if (display === null || display === undefined) {
+      return true;
+    }
+    return !['table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group',
+             'table-column']
+                .includes(display as string);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_RULE_CODE': reasonRuleCode,
+        }),
+        true,
+    );
+  }
+}
 
+export class PositionValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'top',
+      'right',
+      'bottom',
+      'left',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    const position = computedStyles?.get('position');
+    if (position === null || position === undefined) {
+      return true;
+    }
+    return position !== 'static';
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('position', computedStyles?.get('position'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_RULE_CODE': reasonRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class ZIndexValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'z-index',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null, parentComputedStyles: Map<String, String>|null): boolean {
+    const position = computedStyles?.get('position');
+    if (position === null || position === undefined) {
+      return true;
+    }
+    return ['absolute', 'relative', 'fixed', 'sticky'].includes(position as string) ||
+        isFlexContainer(parentComputedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('position', computedStyles?.get('position'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_RULE_CODE': reasonRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+const CSS_RULE_VALIDATORS = [
+  AlignContentValidator,
+  FlexItemValidator,
+  FlexContainerValidator,
+  GridContainerValidator,
+  GridItemValidator,
+  FlexGridValidator,
+  MulticolFlexGridValidator,
+  PaddingValidator,
+  PositionValidator,
+  ZIndexValidator,
+];
+
+const setupCSSRulesValidators = (): Map<String, CSSRuleValidator[]> => {
   const validatorsMap = new Map<String, CSSRuleValidator[]>();
-  for (const validator of validators) {
+  for (const validatorClass of CSS_RULE_VALIDATORS) {
+    const validator = new validatorClass();
     const affectedProperties = validator.getAffectedProperties();
 
     for (const affectedProperty of affectedProperties) {

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/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);
     }
 
@@ -829,31 +827,13 @@ 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);
       }
     }
 
     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.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 {
@@ -175,3 +170,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);
+}