chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/explain/PromptBuilder.test.ts

@@ -202,8 +202,8 @@ export const y = "";
   it('Extracts expected whitespace from beginnings of lines', () => {
     assert.strictEqual(Explain.lineWhitespace(' a'), ' ');
     assert.strictEqual(Explain.lineWhitespace('a'), '');
-    assert.strictEqual(Explain.lineWhitespace(' '), null);
-    assert.strictEqual(Explain.lineWhitespace(''), null);
+    assert.isNull(Explain.lineWhitespace(' '));
+    assert.isNull(Explain.lineWhitespace(''));
     assert.strictEqual(Explain.lineWhitespace('\t\ta'), '\t\t');
   });
 
@@ -240,7 +240,7 @@ export const y = "";
         PREAMBLE,
         ERROR_MESSAGE,
       ].join('\n'));
-      assert.deepStrictEqual(sources, [{type: 'message', value: ERROR_MESSAGE}]);
+      assert.deepEqual(sources, [{type: 'message', value: ERROR_MESSAGE}]);
     });
 
     it('builds a prompt with related code', async () => {
@@ -281,7 +281,7 @@ export const y = "";
         '```',
       ].join('\n'));
 
-      assert.deepStrictEqual(
+      assert.deepEqual(
           sources, [{type: 'message', value: ERROR_MESSAGE}, {type: 'relatedCode', value: RELATED_CODE.trim()}]);
 
       Workspace.Workspace.WorkspaceImpl.instance().removeProject(project);
@@ -329,7 +329,7 @@ export const y = "";
         '```',
       ].join('\n'));
 
-      assert.deepStrictEqual(sources, [
+      assert.deepEqual(sources, [
         {type: 'message', value: ERROR_MESSAGE},
         {type: 'stacktrace', value: STACK_TRACE},
         {type: 'relatedCode', value: RELATED_CODE.trim()},
@@ -394,7 +394,7 @@ export const y = "";
         '```',
       ].join('\n'));
 
-      assert.deepStrictEqual(
+      assert.deepEqual(
           sources, [{type: 'message', value: ERROR_MESSAGE}, {type: 'networkRequest', value: RELATED_REQUEST}]);
     });
 
@@ -415,7 +415,7 @@ export const y = "";
         PREAMBLE,
         TRIMMED_ERROR_MESSAGE,
       ].join('\n'));
-      assert.deepStrictEqual(sources, [{type: 'message', value: TRIMMED_ERROR_MESSAGE}]);
+      assert.deepEqual(sources, [{type: 'message', value: TRIMMED_ERROR_MESSAGE}]);
     });
 
     it('trims a very long stack trace', async () => {
@@ -455,7 +455,7 @@ export const y = "";
         '```',
       ].join('\n'));
 
-      assert.deepStrictEqual(sources, [
+      assert.deepEqual(sources, [
         {type: 'message', value: ERROR_MESSAGE},
         {type: 'stacktrace', value: STACK_TRACE},
         {type: 'relatedCode', value: RELATED_CODE.trim()},
@@ -506,7 +506,7 @@ export const y = "";
       ].join('\n'));
 
       assert.isNotTrue(isPageReloadRecommended, 'PromptBuilder did recommend reloading the page');
-      assert.deepStrictEqual(
+      assert.deepEqual(
           sources, [{type: 'message', value: ERROR_MESSAGE}, {type: 'networkRequest', value: RELATED_REQUEST}]);
     });
 

package/front_end/panels/explain/components/ConsoleInsight.test.ts

@@ -122,7 +122,7 @@ describeWithEnvironment('ConsoleInsight', () => {
       settingType: Common.Settings.SettingType.BOOLEAN,
       defaultValue: true,
       disabledCondition: () => {
-        return {disabled: true, reason: 'disabled for test'};
+        return {disabled: true, reasons: ['disabled for test']};
       },
     });
     component = new Explain.ConsoleInsight(
@@ -235,4 +235,40 @@ describeWithEnvironment('ConsoleInsight', () => {
     const content = component.shadowRoot!.querySelector('main')!.innerText.trim();
     assert.strictEqual(content, 'Check your internet connection and try again.');
   });
+
+  it('displays factuality metadata as related content', async () => {
+    function getAidaClientWithMetadata() {
+      return {
+        async *
+            fetch() {
+              yield {
+                explanation: 'test',
+                metadata: {
+                  rpcGlobalId: 0,
+                  factualityMetadata: {
+                    facts: [
+                      {sourceUri: 'https://www.firstSource.test/someInfo'},
+                      {sourceUri: 'https://www.anotherSource.test/page'},
+                    ],
+                  },
+                },
+                completed: true,
+              };
+            },
+        registerClientEvent: sinon.spy(),
+      };
+    }
+
+    component = new Explain.ConsoleInsight(
+        getTestPromptBuilder(), getAidaClientWithMetadata(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
+    renderElementIntoDOM(component);
+    await drainMicroTasks();
+    const details = component.shadowRoot!.querySelector('details');
+    assert.strictEqual(details!.querySelector('summary')!.textContent?.trim(), 'Sources and related content');
+    const xLinks = details!.querySelectorAll('x-link');
+    assert.strictEqual(xLinks[0].textContent?.trim(), 'https://www.firstSource.test/someInfo');
+    assert.strictEqual(xLinks[0].getAttribute('href'), 'https://www.firstSource.test/someInfo');
+    assert.strictEqual(xLinks[1].textContent?.trim(), 'https://www.anotherSource.test/page');
+    assert.strictEqual(xLinks[1].getAttribute('href'), 'https://www.anotherSource.test/page');
+  });
 });

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -131,6 +131,10 @@ const UIStrings = {
    * @description Text for a link to Chrome DevTools Settings.
    */
   settingsLink: '`Console insights` in Settings',
+  /**
+   * @description The title of the list of references/recitations that were used to generate the insight.
+   */
+  references: 'Sources and related content',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/explain/components/ConsoleInsight.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -563,6 +567,34 @@ export class ConsoleInsight extends HTMLElement {
     // clang-format on
   }
 
+  #maybeRenderRelatedContent(): LitHtml.LitTemplate {
+    if (this.#state.type !== State.INSIGHT || !this.#state.metadata.factualityMetadata?.facts.length) {
+      return LitHtml.nothing;
+    }
+    // clang-format off
+    return html`
+      <details jslog=${VisualLogging.expand('references').track({click: true})}>
+        <summary>${i18nString(UIStrings.references)}</summary>
+        <ul>
+          ${this.#state.metadata?.factualityMetadata?.facts.map(fact => {
+            return fact.sourceUri ? html`
+              <li>
+                <x-link
+                  href=${fact.sourceUri}
+                  class="link"
+                  jslog=${VisualLogging.link('references.console-insights').track({click: true})}
+                >
+                  ${fact.sourceUri}
+                </x-link>
+              </li>
+            ` : LitHtml.nothing;
+          })}
+        </ul>
+      </details>
+    `;
+    // clang-format on
+  }
+
   #renderMain(): LitHtml.TemplateResult {
     const jslog = `${VisualLogging.section(this.#state.type).track({resize: true})}`;
     // clang-format off
@@ -587,7 +619,8 @@ export class ConsoleInsight extends HTMLElement {
               .data=${{tokens: this.#state.tokens, renderer: this.#renderer, animationEnabled: true} as MarkdownView.MarkdownView.MarkdownViewData}>
             </devtools-markdown-view>`: this.#state.explanation
           }
-          <details style="--list-height: ${(this.#state.sources.length + (this.#state.isPageReloadRecommended ? 1 : 0)) * 20}px;" jslog=${VisualLogging.expand('sources').track({click: true})}>
+          ${this.#maybeRenderRelatedContent()}
+          <details jslog=${VisualLogging.expand('sources').track({click: true})}>
             <summary>${i18nString(UIStrings.inputData)}</summary>
             <devtools-console-insight-sources-list .sources=${this.#state.sources} .isPageReloadRecommended=${this.#state.isPageReloadRecommended}>
             </devtools-console-insight-sources-list>
@@ -788,10 +821,14 @@ export class ConsoleInsight extends HTMLElement {
               data-rating=${'true'}
               .data=${
                 {
-                  variant: Buttons.Button.Variant.ICON,
+                  variant: Buttons.Button.Variant.ICON_TOGGLE,
                   size: Buttons.Button.Size.SMALL,
                   iconName: 'thumb-up',
-                  active: this.#selectedRating !== undefined && this.#selectedRating,
+                  toggledIconName: 'thumb-up',
+                  toggleOnClick: false,
+                  toggleType: Buttons.Button.ToggleType.PRIMARY,
+                  disabled: this.#selectedRating !== undefined,
+                  toggled: this.#selectedRating === true,
                   title: i18nString(UIStrings.goodResponse),
                   jslogContext: 'thumbs-up',
                 } as Buttons.Button.ButtonData
@@ -802,10 +839,14 @@ export class ConsoleInsight extends HTMLElement {
               data-rating=${'false'}
               .data=${
                 {
-                  variant: Buttons.Button.Variant.ICON,
+                  variant: Buttons.Button.Variant.ICON_TOGGLE,
                   size: Buttons.Button.Size.SMALL,
                   iconName: 'thumb-down',
-                  active: this.#selectedRating !== undefined && !this.#selectedRating,
+                  toggledIconName: 'thumb-down',
+                  toggleOnClick: false,
+                  toggleType: Buttons.Button.ToggleType.PRIMARY,
+                  disabled: this.#selectedRating !== undefined,
+                  toggled: this.#selectedRating === false,
                   title: i18nString(UIStrings.badResponse),
                   jslogContext: 'thumbs-down',
                 } as Buttons.Button.ButtonData

package/front_end/panels/explain/components/consoleInsight.css

@@ -119,8 +119,7 @@ main {
   line-height: 20px;
 
   p {
-    margin-block-start: 1em;
-    margin-block-end: 1em;
+    margin-block: 1em;
   }
 
   ul {
@@ -210,7 +209,7 @@ textarea {
   gap: 5px;
 }
 
-@media (max-width: 500px) {
+@media (width <= 500px) {
   .buttons {
     flex-wrap: wrap;
   }
@@ -276,16 +275,21 @@ summary {
 }
 
 details {
-  --collapsed-height: 20px;
-
   overflow: hidden;
-  height: var(--collapsed-height);
   margin-top: 10px;
 }
 
-details[open] {
-  height: calc(var(--list-height) + var(--collapsed-height) + /* margin */ 8px);
-  transition: height var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized);
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+::details-content {
+  height: 0;
+  transition:
+    height var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized),
+    content-visibility var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized) allow-discrete;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+[open]::details-content {
+  height: auto;
 }
 
 h2 {

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

@@ -30,17 +30,17 @@ const UIStrings = {
    * @description Message shown to the user if the DevTools locale is not
    * supported.
    */
-  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings',
+  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings.',
   /**
    * @description Message shown to the user if the user's region is not
    * supported.
    */
-  geoRestricted: 'This feature is unavailable in your region',
+  geoRestricted: 'This feature is unavailable in your region.',
   /**
    * @description Message shown to the user if the enterprise policy does
    * not allow this feature.
    */
-  policyRestricted: 'This setting is managed by your administrator',
+  policyRestricted: 'This setting is managed by your administrator.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/explain/explain-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -105,14 +105,18 @@ Common.Settings.registerSettingExtension({
   reloadRequired: false,
   condition: config => isFeatureEnabled(config),
   disabledCondition: config => {
-    if (isLocaleRestricted()) {
-      return {disabled: true, reason: i18nString(UIStrings.wrongLocale)};
-    }
+    const reasons = [];
     if (isGeoRestricted(config)) {
-      return {disabled: true, reason: i18nString(UIStrings.geoRestricted)};
+      reasons.push(i18nString(UIStrings.geoRestricted));
     }
     if (isPolicyRestricted(config)) {
-      return {disabled: true, reason: i18nString(UIStrings.policyRestricted)};
+      reasons.push(i18nString(UIStrings.policyRestricted));
+    }
+    if (isLocaleRestricted()) {
+      reasons.push(i18nString(UIStrings.wrongLocale));
+    }
+    if (reasons.length > 0) {
+      return {disabled: true, reasons};
     }
     return {disabled: false};
   },

package/front_end/panels/issues/IssueAggregator.test.ts

@@ -17,6 +17,16 @@ import {StubIssue} from '../../testing/StubIssue.js';
 
 import * as Issues from './issues.js';
 
+function requestIds(...issues: Issues.IssueAggregator.AggregatedIssue[]): Set<string|undefined> {
+  const requestIds = new Set<string|undefined>();
+  for (const issue of issues) {
+    for (const {requestId} of issue.requests()) {
+      requestIds.add(requestId);
+    }
+  }
+  return requestIds;
+}
+
 describeWithEnvironment('AggregatedIssue', () => {
   const aggregationKey = 'key' as unknown as Issues.IssueAggregator.AggregationKey;
   it('deduplicates network requests across issues', () => {
@@ -27,8 +37,7 @@ describeWithEnvironment('AggregatedIssue', () => {
     aggregatedIssue.addInstance(issue1);
     aggregatedIssue.addInstance(issue2);
 
-    const actualRequestIds = [...aggregatedIssue.requests()].map(r => r.requestId).sort();
-    assert.deepStrictEqual(actualRequestIds, ['id1', 'id2']);
+    assert.deepEqual(requestIds(aggregatedIssue), new Set(['id1', 'id2']));
   });
 
   it('deduplicates affected cookies across issues', () => {
@@ -42,7 +51,7 @@ describeWithEnvironment('AggregatedIssue', () => {
     aggregatedIssue.addInstance(issue3);
 
     const actualCookieNames = [...aggregatedIssue.cookies()].map(c => c.name).sort();
-    assert.deepStrictEqual(actualCookieNames, ['cookie1', 'cookie2']);
+    assert.deepEqual(actualCookieNames, ['cookie1', 'cookie2']);
   });
 });
 
@@ -66,10 +75,7 @@ describeWithMockConnection('IssueAggregator', () => {
     mockManager.dispatchEventToListeners(
         IssuesManager.IssuesManager.Events.ISSUE_ADDED, {issuesModel: model, issue: issue2});
 
-    const issues = Array.from(aggregator.aggregatedIssues());
-    assert.strictEqual(issues.length, 1);
-    const requestIds = [...issues[0].requests()].map(r => r.requestId).sort();
-    assert.deepStrictEqual(requestIds, ['id1', 'id2']);
+    assert.deepEqual(requestIds(...aggregator.aggregatedIssues()), new Set(['id1', 'id2']));
   });
 
   it('deduplicates issues with the same code added before its creation', () => {
@@ -87,10 +93,7 @@ describeWithMockConnection('IssueAggregator', () => {
     mockManager.dispatchEventToListeners(
         IssuesManager.IssuesManager.Events.ISSUE_ADDED, {issuesModel: model, issue: issue2});
 
-    const issues = Array.from(aggregator.aggregatedIssues());
-    assert.strictEqual(issues.length, 1);
-    const requestIds = [...issues[0].requests()].map(r => r.requestId).sort();
-    assert.deepStrictEqual(requestIds, ['id1', 'id2', 'id3']);
+    assert.deepEqual(requestIds(...aggregator.aggregatedIssues()), new Set(['id1', 'id2', 'id3']));
   });
 
   it('keeps issues with different codes separate', () => {
@@ -109,9 +112,9 @@ describeWithMockConnection('IssueAggregator', () => {
         IssuesManager.IssuesManager.Events.ISSUE_ADDED, {issuesModel: model, issue: issue2});
 
     const issues = Array.from(aggregator.aggregatedIssues());
-    assert.strictEqual(issues.length, 3);
+    assert.lengthOf(issues, 3);
     const issueCodes = issues.map(r => r.aggregationKey().toString()).sort((a, b) => a.localeCompare(b));
-    assert.deepStrictEqual(issueCodes, ['codeA', 'codeB', 'codeC']);
+    assert.deepEqual(issueCodes, ['codeA', 'codeB', 'codeC']);
   });
 
   describe('aggregates issue kind', () => {
@@ -122,7 +125,7 @@ describeWithMockConnection('IssueAggregator', () => {
       const aggregator = new Issues.IssueAggregator.IssueAggregator(mockManager);
 
       const aggregatedIssues = Array.from(aggregator.aggregatedIssues());
-      assert.strictEqual(aggregatedIssues.length, 1);
+      assert.lengthOf(aggregatedIssues, 1);
       const aggregatedIssue = aggregatedIssues[0];
       assert.strictEqual(aggregatedIssue.getKind(), IssuesManager.Issue.IssueKind.IMPROVEMENT);
     });
@@ -138,7 +141,7 @@ describeWithMockConnection('IssueAggregator', () => {
       const aggregator = new Issues.IssueAggregator.IssueAggregator(mockManager);
 
       const aggregatedIssues = Array.from(aggregator.aggregatedIssues());
-      assert.strictEqual(aggregatedIssues.length, 1);
+      assert.lengthOf(aggregatedIssues, 1);
       const aggregatedIssue = aggregatedIssues[0];
       assert.strictEqual(aggregatedIssue.getKind(), IssuesManager.Issue.IssueKind.BREAKING_CHANGE);
     });
@@ -154,7 +157,7 @@ describeWithMockConnection('IssueAggregator', () => {
       const aggregator = new Issues.IssueAggregator.IssueAggregator(mockManager);
 
       const aggregatedIssues = Array.from(aggregator.aggregatedIssues());
-      assert.strictEqual(aggregatedIssues.length, 1);
+      assert.lengthOf(aggregatedIssues, 1);
       const aggregatedIssue = aggregatedIssues[0];
       assert.strictEqual(aggregatedIssue.getKind(), IssuesManager.Issue.IssueKind.PAGE_ERROR);
     });
@@ -185,9 +188,9 @@ describeWithMockConnection('IssueAggregator', () => {
         IssuesManager.IssuesManager.Events.ISSUE_ADDED, {issuesModel: model, issue: issue2});
 
     const issues = Array.from(aggregator.aggregatedIssues());
-    assert.strictEqual(issues.length, 1);
+    assert.lengthOf(issues, 1);
     const resolutions = [...issues[0].getHeavyAdIssues()].map(r => r.details().resolution).sort();
-    assert.deepStrictEqual(resolutions, [
+    assert.deepEqual(resolutions, [
       Protocol.Audits.HeavyAdResolutionStatus.HeavyAdBlocked,
       Protocol.Audits.HeavyAdResolutionStatus.HeavyAdWarning,
     ]);
@@ -220,9 +223,9 @@ describeWithMockConnection('IssueAggregator', () => {
       }
 
       const issues = Array.from(aggregator.aggregatedIssues());
-      assert.strictEqual(issues.length, 1);
+      assert.lengthOf(issues, 1);
       const locations = [...issues[0].sources()].sort((x, y) => JSON.stringify(x).localeCompare(JSON.stringify(y)));
-      assert.deepStrictEqual(locations, [
+      assert.deepEqual(locations, [
         {url: 'bar', lineNumber: 1, columnNumber: 1, scriptId: scriptId1},
         {url: 'bar', lineNumber: 1, columnNumber: 1},
         {url: 'baz', lineNumber: 1, columnNumber: 1},
@@ -358,3 +361,53 @@ describeWithMockConnection('IssueAggregator', () => {
     assert.strictEqual(aggregator.numberOfHiddenAggregatedIssues(), 0);
   });
 });
+
+describeWithMockConnection('IssueAggregator', () => {
+  function getTestMitigationCookieIssue(warningReason: Protocol.Audits.CookieWarningReason): IssuesManager.Issue.Issue {
+    return IssuesManager.IssuesManager.createIssuesFromProtocolIssue(model, {
+      code: Protocol.Audits.InspectorIssueCode.CookieIssue,
+      details: {
+        cookieIssueDetails: {
+          cookie: {
+            name: 'test',
+            path: '/',
+            domain: 'a.test',
+          },
+          cookieExclusionReasons: [],
+          cookieWarningReasons: [warningReason],
+          operation: Protocol.Audits.CookieOperation.ReadCookie,
+          cookieUrl: 'a.test',
+        },
+      },
+    })[0];
+  }
+
+  let issuesManager: IssuesManager.IssuesManager.IssuesManager;
+  let model: SDK.IssuesModel.IssuesModel;
+
+  beforeEach(() => {
+    const showThirdPartyIssuesSetting = createFakeSetting('third party flag', true);
+    issuesManager = new IssuesManager.IssuesManager.IssuesManager(showThirdPartyIssuesSetting);
+    const target = createTarget();
+    model = target.model(SDK.IssuesModel.IssuesModel) as SDK.IssuesModel.IssuesModel;
+  });
+
+  it('should not aggregate mitigation related cookie issues', async () => {
+    // Preexisting issues should not be added
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata));
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic));
+
+    const aggregator = new Issues.IssueAggregator.IssueAggregator(issuesManager);
+
+    // Issues added after aggregator creation should not exist either
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata));
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic));
+
+    assert.strictEqual(aggregator.numberOfAggregatedIssues(), 0);
+    assert.strictEqual(aggregator.numberOfHiddenAggregatedIssues(), 0);
+  });
+});

package/front_end/panels/issues/IssueAggregator.ts

@@ -30,7 +30,8 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
     hasRequest: boolean,
   }>();
   #affectedRawCookieLines = new Map<string, {rawCookieLine: string, hasRequest: boolean}>();
-  #affectedRequests = new Map<string, Protocol.Audits.AffectedRequest>();
+  #affectedRequests = new Array<Protocol.Audits.AffectedRequest>();
+  #affectedRequestIds = new Set<Protocol.Network.RequestId>();
   #affectedLocations = new Map<string, Protocol.Audits.SourceCodeLocation>();
   #heavyAdIssues = new Set<IssuesManager.HeavyAdIssue.HeavyAdIssue>();
   #blockedByResponseDetails = new Map<string, Protocol.Audits.BlockedByResponseIssueDetails>();
@@ -175,9 +176,13 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
     this.#issueKind = IssuesManager.Issue.unionIssueKind(this.#issueKind, issue.getKind());
     let hasRequest = false;
     for (const request of issue.requests()) {
+      const {requestId} = request;
       hasRequest = true;
-      if (!this.#affectedRequests.has(request.requestId)) {
-        this.#affectedRequests.set(request.requestId, request);
+      if (requestId === undefined) {
+        this.#affectedRequests.push(request);
+      } else if (!this.#affectedRequestIds.has(requestId)) {
+        this.#affectedRequests.push(request);
+        this.#affectedRequestIds.add(requestId);
       }
     }
     for (const cookie of issue.cookies()) {
@@ -268,15 +273,6 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   #onIssueAdded(event: Common.EventTarget.EventTargetEvent<IssuesManager.IssuesManager.IssueAddedEvent>): void {
-    const excludeFromAggregate = [
-      Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic,
-      Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata,
-    ];
-
-    if (excludeFromAggregate.some(exclude => event.data.issue.code().includes(exclude))) {
-      return;
-    }
-
     this.#aggregateIssue(event.data.issue);
   }
 
@@ -289,7 +285,16 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.dispatchEventToListeners(Events.FULL_UPDATE_REQUIRED);
   }
 
-  #aggregateIssue(issue: IssuesManager.Issue.Issue): AggregatedIssue {
+  #aggregateIssue(issue: IssuesManager.Issue.Issue): AggregatedIssue|undefined {
+    const excludeFromAggregate = [
+      Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic,
+      Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata,
+    ];
+
+    if (excludeFromAggregate.some(exclude => issue.code().includes(exclude))) {
+      return;
+    }
+
     const map = issue.isHidden() ? this.#hiddenAggregatedIssuesByKey : this.#aggregatedIssuesByKey;
     const aggregatedIssue = this.#aggregateIssueByStatus(map, issue);
     this.dispatchEventToListeners(Events.AGGREGATED_ISSUE_UPDATED, aggregatedIssue);

package/front_end/panels/issues/issuesTree.css

@@ -77,7 +77,7 @@
   background-color: unset;
 }
 
-.tree-outline li.issue:not(.expanded):not(.selected):hover .selection {
+.tree-outline li.issue:not(.expanded, .selected):hover .selection {
   background-color: var(--sys-color-state-hover-on-subtle);
 }
 
@@ -90,8 +90,7 @@
 }
 
 p {
-  margin-block-start: 2px;
-  margin-block-end: 2px;
+  margin-block: 2px;
 }
 
 /* Override selected tree item styles for issues to avoid changing width. */
@@ -176,7 +175,7 @@ p {
   border-left: 2px solid var(--issue-color-blue);
 }
 
-.tree-outline .issue-body li:hover:not(:has(span[is="dt-checkbox"])) .selection {
+.tree-outline .issue-body li:hover:not(:has(dt-checkbox)) .selection {
   background-color: unset;
 }
 

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -297,7 +297,7 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
         i18nString(UIStrings.nearestLayerShiftingContaining), constraint.nearestLayerShiftingContainingBlock());
   }
 
-  update(): void {
+  override update(): void {
     const layer = this.selection && this.selection.layer();
     if (!layer) {
       this.tableElement.remove();
@@ -328,16 +328,16 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
   }
 
   private buildContent(): void {
-    this.tableElement = this.contentElement.createChild('table') as HTMLElement;
-    this.tbodyElement = this.tableElement.createChild('tbody') as HTMLElement;
+    this.tableElement = this.contentElement.createChild('table');
+    this.tbodyElement = this.tableElement.createChild('tbody');
     this.sizeCell = this.createRow(i18nString(UIStrings.size));
     this.compositingReasonsCell = this.createRow(i18nString(UIStrings.compositingReasons));
     this.memoryEstimateCell = this.createRow(i18nString(UIStrings.memoryEstimate));
     this.paintCountCell = this.createRow(i18nString(UIStrings.paintCount));
     this.scrollRectsCell = this.createRow(i18nString(UIStrings.slowScrollRegions));
     this.stickyPositionConstraintCell = this.createRow(i18nString(UIStrings.stickyPositionConstraint));
-    this.paintProfilerLink = this.contentElement.createChild(
-                                 'button', 'hidden devtools-link link-margin text-button link-style') as HTMLElement;
+    this.paintProfilerLink =
+        this.contentElement.createChild('button', 'hidden devtools-link link-margin text-button link-style');
     UI.ARIAUtils.markAsLink(this.paintProfilerLink);
     this.paintProfilerLink.textContent = i18nString(UIStrings.paintProfiler);
     this.paintProfilerLink.tabIndex = 0;

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -150,7 +150,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     this.transformController.addEventListener(TransformControllerEvents.TRANSFORM_CHANGED, this.update, this);
 
     this.initToolbar();
-    this.canvasElement = this.contentElement.createChild('canvas') as HTMLCanvasElement;
+    this.canvasElement = this.contentElement.createChild('canvas');
     this.canvasElement.tabIndex = 0;
     this.canvasElement.addEventListener('dblclick', this.onDoubleClick.bind(this), false);
     this.canvasElement.addEventListener('mousedown', this.onMouseDown.bind(this), false);
@@ -738,7 +738,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     }
   }
 
-  private update(): void {
+  override update(): void {
     if (!this.isShowing()) {
       this.needsUpdate = true;
       return;
@@ -820,8 +820,9 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     return closestObject;
   }
 
-  private createVisibilitySetting(caption: string, name: string, value: boolean, toolbar: UI.Toolbar.Toolbar):
-      Common.Settings.Setting<boolean> {
+  private createVisibilitySetting(
+      caption: Common.UIString.LocalizedString, name: string, value: boolean,
+      toolbar: UI.Toolbar.Toolbar): Common.Settings.Setting<boolean> {
     const setting = Common.Settings.Settings.instance().createSetting(name, value);
     setting.setTitle(caption);
     setting.addChangeListener(this.update, this);

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -109,7 +109,7 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     this.contentElement.appendChild(this.pieChart);
 
     this.showImageCallback = showImageCallback;
-    this.canvas = this.canvasContainer.createChild('canvas', 'fill') as HTMLCanvasElement;
+    this.canvas = this.canvasContainer.createChild('canvas', 'fill');
     this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D;
     this.selectionWindowInternal = new PerfUI.OverviewGrid.Window(this.canvasContainer);
     this.selectionWindowInternal.addEventListener(
@@ -242,7 +242,7 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  private update(): void {
+  override update(): void {
     this.canvas.width = this.canvasContainer.clientWidth * window.devicePixelRatio;
     this.canvas.height = this.canvasContainer.clientHeight * window.devicePixelRatio;
     this.samplesPerBar = 0;

package/front_end/panels/layer_viewer/layerDetailsView.css

@@ -19,8 +19,7 @@ table td:first-child {
 ul {
   list-style: none;
   padding-inline-start: 0;
-  margin-block-start: 0;
-  margin-block-end: 0;
+  margin-block: 0;
 }
 
 .devtools-link.link-margin {

package/front_end/panels/layers/LayersPanel.ts

@@ -153,7 +153,7 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.Target
     void this.updateThrottler.schedule(this.update.bind(this));
   }
 
-  private update(): Promise<void> {
+  override update(): Promise<void> {
     if (this.model) {
       this.layerViewHost.setLayerTree(this.model.layerTree());
       const resourceModel = this.model.target().model(SDK.ResourceTreeModel.ResourceTreeModel);