chrome-devtools-frontend 1.0.1030457 → 1.0.1030946

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -14,53 +14,53 @@ import {
 
 const UIStrings = {
   /**
-    *@description Hint prefix for deprecated properties.
+    *@description The type of the CSS rule validation message that is shown in the Style panel. "Deprecated property" means that the property in the declaration is deprecated and should not be used.
     */
-  deprecatedPropertyHintPrefix: 'Deprecated Property',
+  deprecatedPropertyHintPrefix: 'Deprecated property',
   /**
-    *@description Hint prefix for rule validation.
+    *@description The type of the CSS rule validation message that is shown in the Style panel. "Inactive property" means that a property declaration was valid syntactially but didn't have expected effect.
     */
-  ruleValidationHintPrefix: 'Inactive rule',
+  inactivePropertyHintPrefix: 'Inactive property',
   /**
-    *@description Hint for rules that was violated because of same elements rule.
-    *@example {flex-wrap: nowrap} REASON_RULE_CODE
-    *@example {align-content} AFFECTED_RULE_CODE
+    *@description The message that is shown in the Style panel when the user hovers over a property that has not effect due to some other property.
+    *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
+    *@example {align-content} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedBySameElementRuleReason:
-      'This element has {REASON_RULE_CODE} rule, therefore {AFFECTED_RULE_CODE} has no effect.',
+      'This element has the {REASON_PROPERTY_DECLARATION_CODE} property and, therefore, {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
   /**
-    *@description Possible fix for rules that was violated because of same elements rule.
-    *@example {flex-wrap: nowrap} REASON_RULE_CODE
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to some other property.
+    *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedBySameElementRuleFix:
-      'For this property to work, please remove or change the value of {REASON_RULE_CODE}',
+      'For this property to work, please remove or change the value of {REASON_PROPERTY_DECLARATION_CODE}.',
   /**
-    *@description Possible fix for rules that was violated because of same elements rule.
-    *@example {display: block} EXISTING_RULE
-    *@example {display: flex} TARGET_RULE
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to the current property value.
+    *@example {display: block} EXISTING_PROPERTY_DECLARATION
+    *@example {display: flex} TARGET_PROPERTY_DECLARATION
     */
   ruleViolatedBySameElementRuleChangeSuggestion:
-      'For this property to work, please change the {EXISTING_RULE} rule to {TARGET_RULE}',
+      'For this property to work, please change the {EXISTING_PROPERTY_DECLARATION} rule to {TARGET_PROPERTY_DECLARATION}.',
   /**
-    *@description Hint for rules that was violated because of parent element rule.
-    *@example {display: block} REASON_RULE_CODE
-    *@example {flex} AFFECTED_RULE_CODE
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to properties of the parent element.
+    *@example {display: block} REASON_PROPERTY_DECLARATION_CODE
+    *@example {flex} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedByParentElementRuleReason:
-      'Parent element has {REASON_RULE_CODE} rule, therefore this elements {AFFECTED_RULE_CODE} has no effect',
+      'Parent element has {REASON_PROPERTY_DECLARATION_CODE} rule, therefore this elements {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
   /**
-    *@description Posible fix for rules that was violated because of parent element rule.
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to the properties of the parent element.
     *@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.',
+      'Please change parent element\'s {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_);
 
 export const enum AuthoringHintType {
-  RULE_VALIDATION = 'ruleValidation',
+  INACTIVE_PROPERTY = 'ruleValidation',
   DEPRECATED_PROPERTY = 'deprecatedProperty',
 }
 
@@ -68,19 +68,20 @@ export class AuthoringHint {
   readonly #hintType: AuthoringHintType;
   readonly #hintMessage: string;
   readonly #possibleFixMessage: string|null;
-  readonly #learnMore: string|null;
+  readonly #learnMoreLink: string|undefined;
 
-  constructor(property: string, hintType: AuthoringHintType, hintMessage: string, possibleFixMessage: string|null, showLearnMore: boolean) {
+  constructor(
+      hintType: AuthoringHintType, hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
     this.#hintType = hintType;
     this.#hintMessage = hintMessage;
     this.#possibleFixMessage = possibleFixMessage;
-    this.#learnMore = showLearnMore ? property : null; // TODO: Add Goo.gle short link base url
+    this.#learnMoreLink = learnMoreLink;
   }
 
   getHintPrefix(): string {
     switch (this.#hintType) {
-      case AuthoringHintType.RULE_VALIDATION:
-        return i18nString(UIStrings.ruleValidationHintPrefix);
+      case AuthoringHintType.INACTIVE_PROPERTY:
+        return i18nString(UIStrings.inactivePropertyHintPrefix);
       case AuthoringHintType.DEPRECATED_PROPERTY:
         return i18nString(UIStrings.deprecatedPropertyHintPrefix);
     }
@@ -94,8 +95,8 @@ export class AuthoringHint {
     return this.#possibleFixMessage;
   }
 
-  getLearnMoreLink(): string|null {
-    return this.#learnMore;
+  getLearnMoreLink(): string|undefined {
+    return this.#learnMoreLink;
   }
 }
 
@@ -106,6 +107,9 @@ export abstract class CSSRuleValidator {
     this.#affectedProperties = affectedProperties;
   }
 
+  /**
+   * If `isRuleValid` returns false, it means there is a hint to be shown. The hint is retrieved by invoking `getAuthoringHint`.
+   */
   abstract isRuleValid(computedStyles: Map<String, String>|null, parentsComputedStyles?: Map<String, String>|null):
       boolean;
 
@@ -134,20 +138,18 @@ export class AlignContentValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(): AuthoringHint {
-    const reasonRuleCode = buildStyledPropertyText('flex-wrap');
-    const affectedRuleCode = buildStyledPropertyText('align-content');
+    const reasonPropertyDeclaration = buildStyledPropertyText('flex-wrap');
+    const affectedPropertyDeclarationCode = buildStyledPropertyText('align-content');
 
     return new AuthoringHint(
-      'align-content',
-      AuthoringHintType.RULE_VALIDATION,
-      i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-        'REASON_RULE_CODE': reasonRuleCode,
-        'AFFECTED_RULE_CODE': affectedRuleCode,
-      }),
-      i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-        'REASON_RULE_CODE': reasonRuleCode,
-      }),
-      true,
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+        }),
     );
   }
 }
@@ -167,22 +169,20 @@ export class FlexItemValidator extends CSSRuleValidator {
   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');
+    const reasonPropertyDeclaration = buildStyledRuleText('display', parentsComputedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+    const targeParentPropertyDeclaration = buildStyledRuleText('display', 'flex');
 
     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,
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+          'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targeParentPropertyDeclaration,
+        }),
     );
   }
 }
@@ -200,22 +200,20 @@ export class FlexContainerValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
     const targetRuleCode = buildStyledRuleText('display', 'flex');
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
-          'EXISTING_RULE': reasonRuleCode,
-          'TARGET_RULE': targetRuleCode,
+          'EXISTING_PROPERTY_DECLARATION': reasonPropertyDeclaration,
+          'TARGET_PROPERTY_DECLARATION': targetRuleCode,
         }),
-        true,
     );
   }
 }
@@ -242,22 +240,20 @@ export class GridContainerValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
     const targetRuleCode = buildStyledRuleText('display', 'grid');
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
-          'EXISTING_RULE': reasonRuleCode,
-          'TARGET_RULE': targetRuleCode,
+          'EXISTING_PROPERTY_DECLARATION': reasonPropertyDeclaration,
+          'TARGET_PROPERTY_DECLARATION': targetRuleCode,
         }),
-        true,
     );
   }
 }
@@ -283,22 +279,20 @@ export class GridItemValidator extends CSSRuleValidator {
   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);
+    const reasonPropertyDeclaration = buildStyledRuleText('display', parentComputedStyles?.get('display'));
+    const targeParentPropertyDeclaration = buildStyledRuleText('display', 'grid');
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
-          'EXISTING_PARENT_ELEMENT_RULE': reasonRuleCode,
-          'TARGET_PARENT_ELEMENT_RULE': targetParentRuleCode,
+          'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targeParentPropertyDeclaration,
         }),
-        true,
     );
   }
 }
@@ -321,20 +315,18 @@ export class FlexGridValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_RULE_CODE': reasonRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
         }),
-        true,
     );
   }
 }
@@ -360,20 +352,18 @@ export class MulticolFlexGridValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_RULE_CODE': reasonRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
         }),
-        true,
     );
   }
 }
@@ -400,20 +390,18 @@ export class PaddingValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_RULE_CODE': reasonRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
         }),
-        true,
     );
   }
 }
@@ -437,20 +425,18 @@ export class PositionValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('position', computedStyles?.get('position'));
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('position', computedStyles?.get('position'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_RULE_CODE': reasonRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
         }),
-        true,
     );
   }
 }
@@ -472,20 +458,18 @@ export class ZIndexValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('position', computedStyles?.get('position'));
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('position', computedStyles?.get('position'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_RULE_CODE': reasonRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
         }),
-        true,
     );
   }
 }

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

@@ -64,6 +64,7 @@ div.raw-headers-row {
   font-weight: 500;
   width: 160px;
   flex-shrink: 0;
+  text-transform: capitalize;
 }
 
 .header-value {

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

@@ -311,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`
@@ -395,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;

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');