chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/freestyler/components/freestylerChatUi.css

@@ -30,9 +30,51 @@
 .input-form {
   display: flex;
   flex-direction: column;
-  padding: var(--sys-size-8) var(--sys-size-5) 0 var(--sys-size-5);
+  padding: var(--sys-size-5) var(--sys-size-5) 0 var(--sys-size-5);
   max-width: var(--sys-size-36);
+  background-color: var(--sys-color-cdt-base-container);
   width: 100%;
+  position: sticky;
+  z-index: 9999;
+  bottom: 0;
+  /*
+  The `box-shadow` is a workaround to hide the content appearing between the `.input-form`
+  and the footer in some resolutions even though the `.input-form` has `bottom: 0`.
+  */
+  box-shadow: 0 1px var(--sys-color-cdt-base-container);
+
+  /* Prevents the input form from jumping when the scrollbar is shown */
+  /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @container (width > 688px) {
+    /* stylelint-disable-next-line unit-no-unknown */
+    --half-scrollbar-width: calc((100cqw - 100%) / 2);
+
+    margin-left: var(--half-scrollbar-width);
+    margin-right: calc(-1 * var(--half-scrollbar-width));
+  }
+
+  /* when there isn't enough space to view the messages,
+  do not overlay the input form on top of the messages */
+  /* height < var(--sys-size-27) */
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @container (height < 224px) {
+    position: static;
+  }
+}
+
+.chat-readonly-container {
+  display: flex;
+  width: 100%;
+  max-width: var(--sys-size-36);
+  justify-content: center;
+  align-items: center;
+  background-color: var(--sys-color-surface3);
+  font: var(--sys-typescale-body4-regular);
+  padding: var(--sys-size-5) 0;
+  border-radius: var(--sys-shape-corner-medium-small);
+  margin-bottom: var(--sys-size-5);
+  color: var(--sys-color-on-surface-subtle);
 }
 
 .chat-input-container {
@@ -76,6 +118,12 @@
   &:disabled {
     color: var(--sys-color-state-disabled);
     background-color: var(--sys-color-state-disabled-container);
+    border-color: transparent;
+
+    &::placeholder {
+      color: var(--sys-color-on-surface-subtle);
+      opacity: 100%;
+    }
   }
 }
 
@@ -101,17 +149,21 @@
   }
 }
 
-.messages-scroll-container {
-  overflow: auto;
+.messages-container {
   flex-grow: 1;
-  scrollbar-gutter: stable both-edges;
-  scrollbar-width: thin;
   width: 100%;
-}
-
-.messages-container {
-  margin: 0 auto;
   max-width: var(--sys-size-36);
+
+  /* Prevents the container from jumping when the scrollbar is shown */
+  /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @container (width > 688px) {
+    /* stylelint-disable-next-line unit-no-unknown */
+    --half-scrollbar-width: calc((100cqw - 100%) / 2);
+
+    margin-left: var(--half-scrollbar-width);
+    margin-right: calc(-1 * var(--half-scrollbar-width));
+  }
 }
 
 .chat-message {
@@ -157,66 +209,6 @@
     align-items: flex-end;
   }
 
-  /*
-    Scroll driven animation below is used for generating shadows
-    when the `.suggestions` area is scrollable.
-  */
-  .suggestions {
-    display: flex;
-    overflow-y: hidden;
-    overflow-x: auto;
-    scrollbar-width: none;
-    gap: var(--sys-size-3);
-    scroll-timeline: --scroll-timeline x; /* stylelint-disable-line property-no-unknown */
-    animation: detect-scroll;
-    animation-timeline: --scroll-timeline; /* stylelint-disable-line property-no-unknown */
-    animation-fill-mode: none;
-    position: relative;
-  }
-
-  .suggestions::before,
-  .suggestions::after {
-    content: "";
-    display: block;
-    position: sticky;
-    min-width: var(--sys-size-3);
-    height: var(--sys-size-11);
-    left: 0;
-    right: 0;
-    z-index: 999;
-    animation-name: reveal;
-    animation-timeline: --scroll-timeline; /* stylelint-disable-line property-no-unknown */
-    animation-fill-mode: both;
-  }
-
-  .suggestions::before {
-    top: 0;
-    visibility: var(--visibility-if-can-scroll, hidden);
-    animation-range: var(--sys-size-6) var(--sys-size-11); /* stylelint-disable-line property-no-unknown */
-    background:
-      radial-gradient(
-        farthest-side at 0 50%,
-        var(--app-color-scroll-area-shadow-start),
-        transparent
-      );
-  }
-
-  .suggestions::after {
-    bottom: 0;
-    visibility: var(--visibility-if-can-scroll, hidden);
-    animation-direction: reverse;
-    /* stylelint-disable-next-line property-no-unknown */
-    animation-range:
-      calc(100% - var(--sys-size-11))
-      calc(100% - var(--sys-size-6));
-    background:
-      radial-gradient(
-        farthest-side at 100% 50%,
-        var(--app-color-scroll-area-shadow-start),
-        transparent
-      );
-  }
-
   .aborted {
     color: var(--sys-color-on-surface-subtle);
   }
@@ -228,12 +220,9 @@
   align-items: center;
   width: 100%;
 
-  .resource-link {
-    cursor: pointer;
-  }
-
   .resource-link,
   .resource-task {
+    cursor: pointer;
     padding: var(--sys-size-2) var(--sys-size-4);
     font: var(--sys-typescale-body4-size);
     border: var(--sys-size-1) solid var(--sys-color-divider);
@@ -243,7 +232,8 @@
     white-space: nowrap;
     max-width: var(--sys-size-32);
 
-    .icon {
+    .icon,
+    devtools-file-source-icon {
       display: inline-flex;
       vertical-align: top;
       margin-right: var(--sys-size-3);
@@ -468,20 +458,42 @@ button.link {
 }
 
 main {
+  overflow-x: hidden;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
-  overflow-y: auto;
+  container-type: size; /* stylelint-disable-line property-no-unknown */
+  scrollbar-width: thin;
+  /*
+  Even though `transform: translateZ(1px)` doesn't have a visual effect,
+  it puts `main` element into another rendering layer which somehow
+  fixes the `.input-form` jumping on scroll issue.
+  */
+  transform: translateZ(1px);
 }
 
 .empty-state-container {
+  flex-grow: 1;
   display: grid;
   align-items: center;
   justify-content: center;
   font: var(--sys-typescale-headline4);
-  gap: var(--sys-size-11);
+  gap: var(--sys-size-8);
   padding: var(--sys-size-3);
+  max-width: var(--sys-size-33);
+
+  /* Prevents the container from jumping when the scrollbar is shown */
+  /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @container (width > 688px) {
+    /* stylelint-disable-next-line unit-no-unknown */
+    --half-scrollbar-width: calc((100cqw - 100%) / 2);
+
+    margin-left: var(--half-scrollbar-width);
+    margin-right: calc(-1 * var(--half-scrollbar-width));
+  }
 
   .header {
     display: flex;
@@ -510,9 +522,14 @@ main {
     h1 {
       font: var(--sys-typescale-headline4);
     }
+
+    p {
+      text-align: center;
+      font: var(--sys-typescale-body4-regular);
+    }
   }
 
-  .suggestions {
+  .empty-state-content {
     display: flex;
     flex-direction: column;
     gap: var(--sys-size-5);
@@ -522,15 +539,53 @@ main {
   }
 }
 
+.feature-card {
+  display: flex;
+  padding: var(--sys-size-4) var(--sys-size-6);
+  gap: 10px;
+  background-color: var(--sys-color-surface2);
+  border-radius: var(--sys-shape-corner-medium-small);
+  width: 100%;
+  align-items: center;
+
+  .feature-card-icon {
+    min-width: var(--sys-size-12);
+    min-height: var(--sys-size-12);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--sys-color-tonal-container);
+    border-radius: var(--sys-shape-corner-full);
+
+    devtools-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .feature-card-content {
+    h3 {
+      font: var(--sys-typescale-body3-medium);
+    }
+
+    p {
+      font: var(--sys-typescale-body4-regular);
+      line-height: 18px;
+    }
+  }
+}
+
 .disabled-view {
+  display: flex;
+  max-width: var(--sys-size-34);
   border-radius: var(--sys-shape-corner-small);
-  padding: var(--sys-size-6) var(--sys-size-8);
-  box-shadow: var(--drop-shadow);
+  box-shadow: var(--sys-elevation-level3);
+  background-color: var(--app-color-card-background);
   font: var(--sys-typescale-body4-regular);
-  margin: var(--sys-size-8);
-  max-width: var(--sys-size-34);
-  display: flex;
   text-wrap: pretty;
+  padding: var(--sys-size-6) var(--sys-size-8);
+  margin: var(--sys-size-4) 0;
+  line-height: var(--sys-size-9);
 
   .disabled-view-icon-container {
     border-radius: var(--sys-shape-corner-extra-small);
@@ -565,20 +620,3 @@ main {
   display: flex;
   gap: var(--sys-size-4);
 }
-
-@keyframes reveal {
-  0% {
-    opacity: 0%;
-  }
-
-  100% {
-    opacity: 100%;
-  }
-}
-
-@keyframes detect-scroll {
-  from,
-  to {
-    --visibility-if-can-scroll: visible;
-  }
-}

package/front_end/panels/freestyler/components/{provideFeedback.css → userActionRow.css}

@@ -8,6 +8,17 @@
   box-sizing: border-box;
 }
 
+:host {
+  width: 100%;
+}
+
+.feedback {
+  display: flex;
+  gap: var(--sys-size-8);
+  justify-content: space-between;
+  align-items: center;
+}
+
 .rate-buttons {
   display: flex;
   align-items: center;
@@ -22,6 +33,7 @@
   background-color: var(--sys-color-surface3);
   padding: var(--sys-size-6);
   border-radius: var(--sys-shape-corner-medium-small);
+  max-width: var(--sys-size-32);
 
   .feedback-input {
     height: var(--sys-size-11);
@@ -58,3 +70,53 @@
   background: var(--sys-color-divider);
   display: inline-block;
 }
+
+.suggestions-container {
+  overflow: hidden;
+  position: relative;
+  display: flex;
+
+  .suggestions-scroll-container {
+    display: flex;
+    overflow: auto hidden;
+    scrollbar-width: none;
+    gap: var(--sys-size-3);
+    padding-right: var(--sys-size-1);
+  }
+
+  .scroll-button-container {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    width: var(--sys-size-15);
+    z-index: 999;
+  }
+
+  .scroll-button-container.hidden {
+    display: none;
+  }
+
+  .scroll-button-container.left {
+    left: 0;
+    background:
+      linear-gradient(
+        90deg,
+        var(--sys-color-cdt-base-container) 0%,
+        var(--sys-color-cdt-base-container) 50%,
+        transparent
+      );
+  }
+
+  .scroll-button-container.right {
+    right: 0;
+    background:
+      linear-gradient(
+        90deg,
+        transparent,
+        var(--sys-color-cdt-base-container) 50%
+      );
+    justify-content: flex-end;
+  }
+}

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

@@ -37,11 +37,7 @@ 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',
-  /**
-   * @description Message shown to the user if the age check is not successful.
-   */
-  ageRestricted: 'This feature is only available to users who are 18 years of age or older',
+  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.
@@ -65,10 +61,6 @@ function isLocaleRestricted(): boolean {
   return !devtoolsLocale.locale.startsWith('en-');
 }
 
-function isAgeRestricted(config?: Root.Runtime.HostConfig): boolean {
-  return config?.aidaAvailability?.blockedByAge === true;
-}
-
 function isGeoRestricted(config?: Root.Runtime.HostConfig): boolean {
   return config?.aidaAvailability?.blockedByGeo === true;
 }
@@ -85,23 +77,25 @@ async function loadFreestylerModule(): Promise<typeof Freestyler> {
   return loadedFreestylerModule;
 }
 
-function isFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
+function isFreestylerFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
   return (config?.aidaAvailability?.enabled && config?.devToolsFreestyler?.enabled) === true;
 }
 
 function isDrJonesNetworkFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
-  return (config?.aidaAvailability?.enabled && config?.devToolsFreestyler?.enabled &&
-          config?.devToolsExplainThisResourceDogfood?.enabled) === true;
+  return (config?.aidaAvailability?.enabled && (config?.devToolsAiAssistanceNetworkAgent?.enabled)) === true;
 }
 
 function isDrJonesPerformanceFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
-  return (config?.aidaAvailability?.enabled && config?.devToolsFreestyler?.enabled &&
-          config?.devToolsAiAssistancePerformanceAgentDogfood?.enabled) === true;
+  return (config?.aidaAvailability?.enabled && (config?.devToolsAiAssistancePerformanceAgent?.enabled)) === true;
 }
 
 function isDrJonesFileFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
-  return (config?.aidaAvailability?.enabled && config?.devToolsFreestyler?.enabled &&
-          config?.devToolsAiAssistanceFileAgentDogfood?.enabled) === true;
+  return (config?.aidaAvailability?.enabled && (config?.devToolsAiAssistanceFileAgent?.enabled)) === true;
+}
+
+function isAnyFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
+  return isFreestylerFeatureAvailable(config) || isDrJonesNetworkFeatureAvailable(config) ||
+      isDrJonesPerformanceFeatureAvailable(config) || isDrJonesFileFeatureAvailable(config);
 }
 
 UI.ViewManager.registerViewExtension({
@@ -113,7 +107,7 @@ UI.ViewManager.registerViewExtension({
   isPreviewFeature: true,
   persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
   hasToolbar: false,
-  condition: config => isFeatureAvailable(config) && !isPolicyRestricted(config),
+  condition: config => isAnyFeatureAvailable(config) && !isPolicyRestricted(config),
   async loadView() {
     const Freestyler = await loadFreestylerModule();
     return Freestyler.FreestylerPanel.instance();
@@ -127,14 +121,11 @@ Common.Settings.registerSettingExtension({
   title: i18nLazyString(UIStrings.enableAiAssistance),
   defaultValue: false,
   reloadRequired: false,
-  condition: isFeatureAvailable,
+  condition: isAnyFeatureAvailable,
   disabledCondition: config => {
     if (isLocaleRestricted()) {
       return {disabled: true, reason: i18nString(UIStrings.wrongLocale)};
     }
-    if (isAgeRestricted(config)) {
-      return {disabled: true, reason: i18nString(UIStrings.ageRestricted)};
-    }
     if (isGeoRestricted(config)) {
       return {disabled: true, reason: i18nString(UIStrings.geoRestricted)};
     }
@@ -158,7 +149,7 @@ UI.ActionRegistration.registerActionExtension({
     const Freestyler = await loadFreestylerModule();
     return new Freestyler.ActionDelegate();
   },
-  condition: config => isFeatureAvailable(config) && !isPolicyRestricted(config),
+  condition: config => isFreestylerFeatureAvailable(config) && !isPolicyRestricted(config),
 });
 
 UI.ActionRegistration.registerActionExtension({
@@ -172,7 +163,22 @@ UI.ActionRegistration.registerActionExtension({
     const Freestyler = await loadFreestylerModule();
     return new Freestyler.ActionDelegate();
   },
-  condition: config => isFeatureAvailable(config) && !isPolicyRestricted(config),
+  condition: config => isFreestylerFeatureAvailable(config) && !isPolicyRestricted(config),
+});
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'drjones.network-floating-button',
+  contextTypes(): [] {
+    return [];
+  },
+  experiment: Root.Runtime.ExperimentName.FLOATING_ENTRY_POINTS_FOR_AI_ASSISTANCE,
+  category: UI.ActionRegistration.ActionCategory.GLOBAL,
+  title: i18nLazyString(UIStrings.askAi),
+  async loadActionDelegate() {
+    const Freestyler = await loadFreestylerModule();
+    return new Freestyler.ActionDelegate();
+  },
+  condition: config => isDrJonesNetworkFeatureAvailable(config) && !isPolicyRestricted(config),
 });
 
 UI.ActionRegistration.registerActionExtension({
@@ -194,7 +200,6 @@ UI.ActionRegistration.registerActionExtension({
   contextTypes(): [] {
     return [];
   },
-  setting,
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: i18nLazyString(UIStrings.askAi),
   async loadActionDelegate() {
@@ -204,12 +209,26 @@ UI.ActionRegistration.registerActionExtension({
   condition: config => isDrJonesPerformanceFeatureAvailable(config) && !isPolicyRestricted(config),
 });
 
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'drjones.sources-floating-button',
+  contextTypes(): [] {
+    return [];
+  },
+  experiment: Root.Runtime.ExperimentName.FLOATING_ENTRY_POINTS_FOR_AI_ASSISTANCE,
+  category: UI.ActionRegistration.ActionCategory.GLOBAL,
+  title: i18nLazyString(UIStrings.askAi),
+  async loadActionDelegate() {
+    const Freestyler = await loadFreestylerModule();
+    return new Freestyler.ActionDelegate();
+  },
+  condition: config => isDrJonesFileFeatureAvailable(config) && !isPolicyRestricted(config),
+});
+
 UI.ActionRegistration.registerActionExtension({
   actionId: 'drjones.sources-panel-context',
   contextTypes() {
     return [];
   },
-  setting,
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: i18nLazyString(UIStrings.askAi),
   async loadActionDelegate() {

package/front_end/panels/freestyler/freestyler.ts

@@ -8,7 +8,7 @@ export * from './DrJonesFileAgent.js';
 export * from './DrJonesNetworkAgent.js';
 export * from './DrJonesPerformanceAgent.js';
 export * from './components/FreestylerChatUi.js';
-export * from './components/ProvideFeedback.js';
+export * from './components/UserActionRow.js';
 export * from './ExtensionScope.js';
 export * from './FreestylerAgent.js';
 export * from './FreestylerEvaluateAction.js';

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -64,6 +64,8 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
       case IssuesManager.AttributionReportingIssue.IssueCode.OS_TRIGGER_IGNORED:
       case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_IGNORED:
       case IssuesManager.AttributionReportingIssue.IssueCode.TRIGGER_IGNORED:
+      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_INFO_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_UNIQUE_SCOPE_ALREADY_SET:
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidHeaderValue));
         break;
@@ -79,6 +81,11 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_AND_TRIGGER_HEADERS:
       case IssuesManager.AttributionReportingIssue.IssueCode.WEB_AND_OS_HEADERS:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_WEB_OR_OS_SUPPORT:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_SOURCE_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_TRIGGER_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_SOURCE_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_TRIGGER_HEADER:
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_WITHOUT_TRANSIENT_USER_ACTIVATION:
@@ -112,6 +119,8 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
       case IssuesManager.AttributionReportingIssue.IssueCode.OS_TRIGGER_IGNORED:
       case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_IGNORED:
       case IssuesManager.AttributionReportingIssue.IssueCode.TRIGGER_IGNORED:
+      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_INFO_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_UNIQUE_SCOPE_ALREADY_SET:
         this.#appendRequestOrEmptyCell(element, details.request);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
@@ -127,6 +136,11 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_AND_TRIGGER_HEADERS:
       case IssuesManager.AttributionReportingIssue.IssueCode.WEB_AND_OS_HEADERS:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_WEB_OR_OS_SUPPORT:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_SOURCE_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_TRIGGER_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_SOURCE_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_TRIGGER_HEADER:
         this.#appendRequestOrEmptyCell(element, details.request);
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_WITHOUT_TRANSIENT_USER_ACTIVATION:

package/front_end/panels/issues/IssueAggregator.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
-import type * as Protocol from '../../generated/protocol.js';
 
 type AggregationKeyTag = {
   aggregationKeyTag: undefined,
@@ -268,6 +268,15 @@ 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);
   }
 

package/front_end/panels/issues/components/ElementsPanelLink.ts

@@ -15,7 +15,6 @@ export interface ElementsPanelLinkData {
   onElementRevealIconMouseLeave: (event?: Event) => void;
 }
 export class ElementsPanelLink extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-elements-panel-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #onElementRevealIconClick: ((event?: Event) => void) = () => {};

package/front_end/panels/issues/components/HideIssuesMenu.ts

@@ -29,7 +29,6 @@ export interface HiddenIssuesMenuData {
 }
 
 export class HideIssuesMenu extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-hide-issues-menu`;
   readonly #shadow: ShadowRoot = this.attachShadow({mode: 'open'});
   #menuItemLabel: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
   #menuItemAction: () => void = () => {};
@@ -46,7 +45,7 @@ export class HideIssuesMenu extends HTMLElement {
 
   onMenuOpen(event: Event): void {
     event.stopPropagation();
-    const buttonElement = this.#shadow.querySelector('button');
+    const buttonElement = this.#shadow.querySelector('devtools-button');
     const contextMenu = new UI.ContextMenu.ContextMenu(event, {
       x: buttonElement?.getBoundingClientRect().left,
       y: buttonElement?.getBoundingClientRect().bottom,
@@ -64,7 +63,7 @@ export class HideIssuesMenu extends HTMLElement {
       .data=${{variant: Buttons.Button.Variant.ICON,iconName: 'dots-vertical', title: i18nString(UIStrings.tooltipTitle)} as Buttons.Button.ButtonData}
       .jslogContext=${'hide-issues'}
       class="hide-issues-menu-btn"
-      @click=${this.onMenuOpen.bind(this)}></devtools-button>
+      @click=${this.onMenuOpen}></devtools-button>
     `, this.#shadow, {host: this});
   }
 }

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -30,7 +30,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -316,7 +315,7 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
       this.paintCountCell.parentElement.classList.toggle('hidden', !layer.paintCount());
     }
     this.paintCountCell.textContent = String(layer.paintCount());
-    this.memoryEstimateCell.textContent = Platform.NumberUtilities.bytesToString(layer.gpuMemoryUsage());
+    this.memoryEstimateCell.textContent = i18n.ByteUtilities.bytesToString(layer.gpuMemoryUsage());
     void layer.requestCompositingReasons().then(this.updateCompositingReasons.bind(this));
     this.scrollRectsCell.removeChildren();
     layer.scrollRects().forEach(this.createScrollRectElement.bind(this));