chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/application/components/BackForwardCacheStrings.ts

@@ -285,6 +285,10 @@ const UIStrings = {
    * @description Description text for not restored reason SharedWorker.
    */
   sharedWorker: 'Pages that use SharedWorker are not currently eligible for back/forward cache.',
+  /**
+   * @description Description text for not restored reason SharedWorkerMessage.
+   */
+  sharedWorkerMessage: 'The page was evicted from the cache because it received a message from a SharedWorker',
   /**
    * @description Description text for not restored reason WebLocks.
    */
@@ -531,17 +535,17 @@ const UIStrings = {
   cookieDisabled:
       'Back/forward cache is disabled because cookies are disabled on a page that uses `Cache-Control: no-store`.',
   /**
-   * @description Description text for not restored reason WebRTCSticky.
+   * @description Description text for not restored reason WebRTCUsedWithCCNS.
    */
-  webRTCSticky: 'Back/forward cache is disabled because WebRTC has been used.',
+  webRTCUsedWithCCNS: 'Back/forward cache is disabled because WebRTC has been used.',
   /**
-   * @description Description text for not restored reason WebTransportSticky.
+   * @description Description text for not restored reason WebTransportUsedWithCCNS.
    */
-  webTransportSticky: 'Back/forward cache is disabled because WebTransport has been used.',
+  webTransportUsedWithCCNS: 'Back/forward cache is disabled because WebTransport has been used.',
   /**
-   * @description Description text for not restored reason WebSocketSticky.
+   * @description Description text for not restored reason WebSocketUsedWithCCNS.
    */
-  webSocketSticky: 'Back/forward cache is disabled because WebSocket has been used.',
+  webSocketUsedWithCCNS: 'Back/forward cache is disabled because WebSocket has been used.',
 
 } as const;
 
@@ -626,6 +630,7 @@ export const NotRestoredReasonDescription = {
   IndexedDBConnection: {name: i18nLazyString(UIStrings.indexedDBConnection)},
   WebXR: {name: i18nLazyString(UIStrings.webXR)},
   SharedWorker: {name: i18nLazyString(UIStrings.sharedWorker)},
+  SharedWorkerMessage: {name: i18nLazyString(UIStrings.sharedWorkerMessage)},
   WebLocks: {name: i18nLazyString(UIStrings.webLocks)},
   WebHID: {name: i18nLazyString(UIStrings.webHID)},
   WebShare: {name: i18nLazyString(UIStrings.webShare)},
@@ -686,9 +691,9 @@ export const NotRestoredReasonDescription = {
       {name: i18nLazyString(UIStrings.jsNetworkRequestReceivedCacheControlNoStoreResource)},
   IndexedDBEvent: {name: i18nLazyString(UIStrings.indexedDBEvent)},
   CookieDisabled: {name: i18nLazyString(UIStrings.cookieDisabled)},
-  WebRTCSticky: {name: i18nLazyString(UIStrings.webRTCSticky)},
-  WebTransportSticky: {name: i18nLazyString(UIStrings.webTransportSticky)},
-  WebSocketSticky: {name: i18nLazyString(UIStrings.webSocketSticky)},
+  WebRTCUsedWithCCNS: {name: i18nLazyString(UIStrings.webRTCUsedWithCCNS)},
+  WebTransportUsedWithCCNS: {name: i18nLazyString(UIStrings.webTransportUsedWithCCNS)},
+  WebSocketUsedWithCCNS: {name: i18nLazyString(UIStrings.webSocketUsedWithCCNS)},
   HTTPAuthRequired: {name: i18n.i18n.lockedLazyString('HTTPAuthRequired')},
   CookieFlushed: {name: i18n.i18n.lockedLazyString('CookieFlushed')},
   SmartCard: {name: i18n.i18n.lockedLazyString('SmartCard')},

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -15,7 +15,6 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as ReportView from '../../../ui/components/report_view/report_view.js';
@@ -52,7 +51,7 @@ const UIStrings = {
   unknown: 'Unknown Status',
   /**
    * @description Status text for the status of the back/forward cache status indicating that
-   * the back/forward cache was not used and a normal navigation occured instead.
+   * the back/forward cache was not used and a normal navigation occurred instead.
    */
   normalNavigation:
       'Not served from back/forward cache: to trigger back/forward cache, use Chrome\'s back/forward buttons, or use the test button below to automatically navigate away and back.',
@@ -137,8 +136,8 @@ const UIStrings = {
    */
   framesPerIssue: '{n, plural, =1 {# frame} other {# frames}}',
   /**
-   *@description Title for a frame in the frame tree that doesn't have a URL. Placeholder indicates which number frame with a blank URL it is.
-   *@example {3} PH1
+   * @description Title for a frame in the frame tree that doesn't have a URL. Placeholder indicates which number frame with a blank URL it is.
+   * @example {3} PH1
    */
   blankURLTitle: 'Blank URL [{PH1}]',
   /**
@@ -310,8 +309,8 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     // clang-format on
   }
 
-  #maybeRenderFrameTree(explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree|
-                        undefined): Lit.LitTemplate {
+  #maybeRenderFrameTree(explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree|undefined):
+      Lit.LitTemplate {
     if (!explanationTree || (explanationTree.explanations.length === 0 && explanationTree.children.length === 0)) {
       return Lit.nothing;
     }
@@ -321,12 +320,7 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
       return html`
         <div class="text-ellipsis">
           ${node.treeNodeData.iconName ? html`
-            <devtools-icon class="inline-icon" style="margin-bottom: -3px;" .data=${{
-              iconName: node.treeNodeData.iconName,
-              color: 'var(--icon-default)',
-              width: '20px',
-              height: '20px',
-            } as IconButton.Icon.IconData}>
+            <devtools-icon class="inline-icon extra-large" .name=${node.treeNodeData.iconName} style="margin-bottom: -3px;">
             </devtools-icon>
           ` : Lit.nothing}
           ${node.treeNodeData.text}
@@ -427,13 +421,8 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
         // clang-format off
         return html`
           <devtools-report-section>
-            <div class="status">
-              <devtools-icon class="inline-icon" .data=${{
-                iconName: 'check-circle',
-                color: 'var(--icon-checkmark-green)',
-                width: '20px',
-                height: '20px',
-                } as IconButton.Icon.IconData}>
+            <div class="status extra-large">
+              <devtools-icon class="inline-icon extra-large" name="check-circle" style="color: var(--icon-checkmark-green);">
               </devtools-icon>
             </div>
             ${i18nString(UIStrings.restoredFromBFCache)}
@@ -445,12 +434,7 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
         return html`
           <devtools-report-section>
             <div class="status">
-              <devtools-icon class="inline-icon" .data=${{
-                  iconName: 'clear',
-                  color: 'var(--icon-default)',
-                  width: '20px',
-                  height: '20px',
-                  } as IconButton.Icon.IconData}>
+              <devtools-icon class="inline-icon extra-large" name="clear">
               </devtools-icon>
             </div>
             ${i18nString(UIStrings.normalNavigation)}
@@ -529,12 +513,7 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
         <devtools-report-section-header>
           ${category}
           <div class="help-outline-icon">
-            <devtools-icon class="inline-icon" .data=${{
-              iconName: 'help',
-              color: 'var(--icon-default)',
-              width: '16px',
-              height: '16px',
-              } as IconButton.Icon.IconData} title=${explainerText}>
+            <devtools-icon class="inline-icon medium" name="help" title=${explainerText}>
             </devtools-icon>
           </div>
         </devtools-report-section-header>
@@ -621,12 +600,7 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
         ${(explanation.reason in NotRestoredReasonDescription) ?
           html`
             <div class="circled-exclamation-icon">
-              <devtools-icon class="inline-icon" .data=${{
-                iconName: 'warning',
-                color: 'var(--icon-warning)',
-                width: '16px',
-                height: '16px',
-              } as IconButton.Icon.IconData}>
+              <devtools-icon class="inline-icon medium" style="color: var(--icon-warning)" name="warning">
               </devtools-icon>
             </div>
             <div>

package/front_end/panels/application/components/BounceTrackingMitigationsView.ts

@@ -77,6 +77,7 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
 
   connectedCallback(): void {
     void this.#render();
+    this.parentElement?.classList.add('overflow-auto');
   }
 
   async #render(): Promise<void> {

package/front_end/panels/application/components/EndpointsGrid.ts

@@ -15,12 +15,12 @@ import reportingApiGridStyles from './reportingApiGrid.css.js';
 
 const UIStrings = {
   /**
-   *@description Placeholder text when there are no Reporting API endpoints.
+   * @description Placeholder text when there are no Reporting API endpoints.
    *(https://developers.google.com/web/updates/2018/09/reportingapi#tldr)
    */
   noEndpointsToDisplay: 'No endpoints to display',
   /**
-   *@description Placeholder text when there are no Reporting API endpoints.
+   * @description Placeholder text when there are no Reporting API endpoints.
    *(https://developers.google.com/web/updates/2018/09/reportingapi#tldr)
    */
   endpointsDescription: 'Here you will find the list of endpoints that receive the reports'
@@ -48,6 +48,10 @@ export class EndpointsGrid extends HTMLElement {
     this.#render();
   }
 
+  get data(): EndpointsGridData {
+    return {endpoints: this.#endpoints};
+  }
+
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off

package/front_end/panels/application/components/FrameDetailsView.ts

@@ -38,230 +38,230 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Section header in the Frame Details view
+   * @description Section header in the Frame Details view
    */
   additionalInformation: 'Additional Information',
   /**
-   *@description Explanation for why the additional information section is being shown
+   * @description Explanation for why the additional information section is being shown
    */
   thisAdditionalDebugging:
       'This additional (debugging) information is shown because the \'Protocol Monitor\' experiment is enabled.',
   /**
-   *@description Label for subtitle of frame details view
+   * @description Label for subtitle of frame details view
    */
   frameId: 'Frame ID',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   document: 'Document',
   /**
-   *@description A web URL (for a lot of languages this does not need to be translated, please translate only where necessary)
+   * @description A web URL (for a lot of languages this does not need to be translated, please translate only where necessary)
    */
   url: 'URL',
   /**
-  /**
-   *@description Title for a link to the Sources panel
+   * /**
+   * @description Title for a link to the Sources panel
    */
   clickToOpenInSourcesPanel: 'Click to open in Sources panel',
   /**
-   *@description Title for a link to the Network panel
+   * @description Title for a link to the Network panel
    */
   clickToOpenInNetworkPanel: 'Click to open in Network panel',
   /**
-   *@description Title for unreachable URL field
+   * @description Title for unreachable URL field
    */
   unreachableUrl: 'Unreachable URL',
   /**
-   *@description Title for a link that applies a filter to the network panel
+   * @description Title for a link that applies a filter to the network panel
    */
   clickToOpenInNetworkPanelMight: 'Click to open in Network panel (might require page reload)',
   /**
-   *@description The origin of a URL (https://web.dev/same-site-same-origin/#origin)
+   * @description The origin of a URL (https://web.dev/same-site-same-origin/#origin)
    *(for a lot of languages this does not need to be translated, please translate only where necessary)
    */
   origin: 'Origin',
   /**
-  /**
-   *@description Related node label in Timeline UIUtils of the Performance panel
+   * /**
+   * @description Related node label in Timeline UIUtils of the Performance panel
    */
   ownerElement: 'Owner Element',
   /**
-   *@description Title for a link to the Elements panel
+   * @description Title for a link to the Elements panel
    */
   clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
-   *@description Title for ad frame type field
+   * @description Title for ad frame type field
    */
   adStatus: 'Ad Status',
   /**
-   *@description Description for ad frame type
+   * @description Description for ad frame type
    */
   rootDescription: 'This frame has been identified as the root frame of an ad',
   /**
-   *@description Value for ad frame type
+   * @description Value for ad frame type
    */
   root: 'root',
   /**
-   *@description Description for ad frame type
+   * @description Description for ad frame type
    */
   childDescription: 'This frame has been identified as a child frame of an ad',
   /**
-   *@description Value for ad frame type
+   * @description Value for ad frame type
    */
   child: 'child',
   /**
-   *@description Section header in the Frame Details view
+   * @description Section header in the Frame Details view
    */
   securityIsolation: 'Security & Isolation',
   /**
-   *@description Section header in the Frame Details view
+   * @description Section header in the Frame Details view
    */
   contentSecurityPolicy: 'Content Security Policy (CSP)',
   /**
-   *@description Row title for in the Frame Details view
+   * @description Row title for in the Frame Details view
    */
   secureContext: 'Secure Context',
   /**
-   *@description Text in Timeline indicating that input has happened recently
+   * @description Text in Timeline indicating that input has happened recently
    */
   yes: 'Yes',
   /**
-   *@description Text in Timeline indicating that input has not happened recently
+   * @description Text in Timeline indicating that input has not happened recently
    */
   no: 'No',
   /**
-   *@description Label for whether a frame is cross-origin isolated
+   * @description Label for whether a frame is cross-origin isolated
    *(https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/)
    *(for a lot of languages this does not need to be translated, please translate only where necessary)
    */
   crossoriginIsolated: 'Cross-Origin Isolated',
   /**
-   *@description Explanatory text in the Frame Details view
+   * @description Explanatory text in the Frame Details view
    */
   localhostIsAlwaysASecureContext: '`Localhost` is always a secure context',
   /**
-   *@description Explanatory text in the Frame Details view
+   * @description Explanatory text in the Frame Details view
    */
   aFrameAncestorIsAnInsecure: 'A frame ancestor is an insecure context',
   /**
-   *@description Explanatory text in the Frame Details view
+   * @description Explanatory text in the Frame Details view
    */
   theFramesSchemeIsInsecure: 'The frame\'s scheme is insecure',
   /**
-   *@description This label specifies the server endpoints to which the server is reporting errors
+   * @description This label specifies the server endpoints to which the server is reporting errors
    *and warnings through the Report-to API. Following this label will be the URL of the server.
    */
   reportingTo: 'reporting to',
   /**
-   *@description Section header in the Frame Details view
+   * @description Section header in the Frame Details view
    */
   apiAvailability: 'API availability',
   /**
-   *@description Explanation of why cross-origin isolation is important
+   * @description Explanation of why cross-origin isolation is important
    *(https://web.dev/why-coop-coep/)
    *(for a lot of languages 'cross-origin isolation' does not need to be translated, please translate only where necessary)
    */
   availabilityOfCertainApisDepends: 'Availability of certain APIs depends on the document being cross-origin isolated.',
   /**
-   *@description Description of the SharedArrayBuffer status
+   * @description Description of the SharedArrayBuffer status
    */
   availableTransferable: 'available, transferable',
   /**
-   *@description Description of the SharedArrayBuffer status
+   * @description Description of the SharedArrayBuffer status
    */
   availableNotTransferable: 'available, not transferable',
   /**
-   *@description Explanation for the SharedArrayBuffer availability status
+   * @description Explanation for the SharedArrayBuffer availability status
    */
   unavailable: 'unavailable',
   /**
-   *@description Tooltip for the SharedArrayBuffer availability status
+   * @description Tooltip for the SharedArrayBuffer availability status
    */
   sharedarraybufferConstructorIs:
       '`SharedArrayBuffer` constructor is available and `SABs` can be transferred via `postMessage`',
   /**
-   *@description Tooltip for the SharedArrayBuffer availability status
+   * @description Tooltip for the SharedArrayBuffer availability status
    */
   sharedarraybufferConstructorIsAvailable:
       '`SharedArrayBuffer` constructor is available but `SABs` cannot be transferred via `postMessage`',
   /**
-   *@description Explanation why SharedArrayBuffer will not be available in the future
+   * @description Explanation why SharedArrayBuffer will not be available in the future
    *(https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/)
    *(for a lot of languages 'cross-origin isolation' does not need to be translated, please translate only where necessary)
    */
   willRequireCrossoriginIsolated: '⚠️ will require cross-origin isolated context in the future',
   /**
-   *@description Explanation why SharedArrayBuffer is not available
+   * @description Explanation why SharedArrayBuffer is not available
    *(https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/)
    *(for a lot of languages 'cross-origin isolation' does not need to be translated, please translate only where necessary).
    */
   requiresCrossoriginIsolated: 'requires cross-origin isolated context',
   /**
-   *@description Explanation for the SharedArrayBuffer availability status in case the transfer of a SAB requires the
+   * @description Explanation for the SharedArrayBuffer availability status in case the transfer of a SAB requires the
    * permission policy `cross-origin-isolated` to be enabled (e.g. because the message refers to the situation in an iframe).
    */
   transferRequiresCrossoriginIsolatedPermission:
       '`SharedArrayBuffer` transfer requires enabling the permission policy:',
   /**
-   *@description Explanation for the Measure Memory availability status
+   * @description Explanation for the Measure Memory availability status
    */
   available: 'available',
   /**
-   *@description Tooltip for the Measure Memory availability status
+   * @description Tooltip for the Measure Memory availability status
    */
   thePerformanceAPI: 'The `performance.measureUserAgentSpecificMemory()` API is available',
   /**
-   *@description Tooltip for the Measure Memory availability status
+   * @description Tooltip for the Measure Memory availability status
    */
   thePerformancemeasureuseragentspecificmemory:
       'The `performance.measureUserAgentSpecificMemory()` API is not available',
   /**
-   *@description Entry in the API availability section of the frame details view
+   * @description Entry in the API availability section of the frame details view
    */
   measureMemory: 'Measure Memory',
   /**
-   *@description Text that is usually a hyperlink to more documentation
+   * @description Text that is usually a hyperlink to more documentation
    */
   learnMore: 'Learn more',
   /**
-   *@description Label for a stack trace. If a frame is created programmatically (i.e. via JavaScript), there is a
+   * @description Label for a stack trace. If a frame is created programmatically (i.e. via JavaScript), there is a
    * stack trace for the line of code which caused the creation of the iframe. This is the stack trace we are showing here.
    */
   creationStackTrace: 'Frame Creation `Stack Trace`',
   /**
-   *@description Tooltip for 'Frame Creation Stack Trace' explaining that the stack
+   * @description Tooltip for 'Frame Creation Stack Trace' explaining that the stack
    *trace shows where in the code the frame has been created programmatically
    */
   creationStackTraceExplanation:
       'This frame was created programmatically. The `stack trace` shows where this happened.',
   /**
-   *@description Text descripting why a frame has been indentified as an advertisement.
+   * @description Text descripting why a frame has been indentified as an advertisement.
    */
   parentIsAdExplanation: 'This frame is considered an ad frame because its parent frame is an ad frame.',
   /**
-   *@description Text descripting why a frame has been indentified as an advertisement.
+   * @description Text descripting why a frame has been indentified as an advertisement.
    */
   matchedBlockingRuleExplanation:
       'This frame is considered an ad frame because its current (or previous) main document is an ad resource.',
   /**
-   *@description Text descripting why a frame has been indentified as an advertisement.
+   * @description Text descripting why a frame has been indentified as an advertisement.
    */
   createdByAdScriptExplanation:
       'There was an ad script in the `(async) stack` when this frame was created. Examining the creation `stack trace` of this frame might provide more insight.',
   /**
-   *@description Label for the link(s) to the ad script(s) that led to this frame's creation.
+   * @description Label for the link(s) to the ad script(s) that led to this frame's creation.
    */
   creatorAdScriptAncestry: 'Creator Ad Script Ancestry',
   /**
-   *@description Label for the filterlist rule that identified the root script in 'Creator Ad Script Ancestry' as an ad.
+   * @description Label for the filterlist rule that identified the root script in 'Creator Ad Script Ancestry' as an ad.
    */
   rootScriptFilterlistRule: 'Root Script Filterlist Rule',
   /**
-   *@description Text describing the absence of a value.
+   * @description Text describing the absence of a value.
    */
   none: 'None',
   /**
-   *@description Explanation of what origin trials are
+   * @description Explanation of what origin trials are
    *(https://developer.chrome.com/docs/web-platform/origin-trials/)
    *(please don't translate 'origin trials').
    */
@@ -404,14 +404,19 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
   }
 
   #maybeRenderSourcesLinkForURL(): Lit.LitTemplate {
-    if (!this.#frame || this.#frame.unreachableUrl()) {
+    const frame = this.#frame;
+    if (!frame || frame.unreachableUrl()) {
       return Lit.nothing;
     }
-    const sourceCode = this.#uiSourceCodeForFrame(this.#frame);
     return renderIconLink(
         'label',
         i18nString(UIStrings.clickToOpenInSourcesPanel),
-        () => Common.Revealer.reveal(sourceCode),
+        async () => {
+          const sourceCode = this.#uiSourceCodeForFrame(frame);
+          if (sourceCode) {
+            await Common.Revealer.reveal(sourceCode);
+          }
+        },
         'reveal-in-sources',
     );
   }
@@ -712,13 +717,39 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     if (!info) {
       return Lit.nothing;
     }
+    function crossOriginValueToString(
+        value: Protocol.Network.CrossOriginEmbedderPolicyValue|Protocol.Network.CrossOriginOpenerPolicyValue): string {
+      switch (value) {
+        case Protocol.Network.CrossOriginEmbedderPolicyValue.Credentialless:
+          return 'credentialless';
+        case Protocol.Network.CrossOriginEmbedderPolicyValue.None:
+          return 'none';
+        case Protocol.Network.CrossOriginEmbedderPolicyValue.RequireCorp:
+          return 'require-corp';
+        case Protocol.Network.CrossOriginOpenerPolicyValue.NoopenerAllowPopups:
+          return 'noopenener-allow-popups';
+        case Protocol.Network.CrossOriginOpenerPolicyValue.SameOrigin:
+          return 'same-origin';
+        case Protocol.Network.CrossOriginOpenerPolicyValue.SameOriginAllowPopups:
+          return 'same-origin-allow-popups';
+        case Protocol.Network.CrossOriginOpenerPolicyValue.SameOriginPlusCoep:
+          return 'same-origin-plus-coep';
+        case Protocol.Network.CrossOriginOpenerPolicyValue.RestrictProperties:
+          return 'restrict-properties';
+        case Protocol.Network.CrossOriginOpenerPolicyValue.RestrictPropertiesPlusCoep:
+          return 'restrict-properties-plus-coep';
+        case Protocol.Network.CrossOriginOpenerPolicyValue.UnsafeNone:
+          return 'unsafe-none';
+      }
+    }
+
     const isEnabled = info.value !== noneValue;
     const isReportOnly = (!isEnabled && info.reportOnlyValue !== noneValue);
     const endpoint = isEnabled ? info.reportingEndpoint : info.reportOnlyReportingEndpoint;
     return html`
       <devtools-report-key>${policyName}</devtools-report-key>
       <devtools-report-value>
-        ${isEnabled ? info.value : info.reportOnlyValue}
+        ${crossOriginValueToString(isEnabled ? info.value : info.reportOnlyValue)}
         ${isReportOnly ? html`<span class="inline-comment">report-only</span>` : Lit.nothing}
         ${
         endpoint ? html`<span class="inline-name">${i18nString(UIStrings.reportingTo)}</span>${endpoint}` : Lit.nothing}

package/front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -16,45 +16,45 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Hover text for an info icon in the Interest Group Event panel
+   * @description Hover text for an info icon in the Interest Group Event panel
    * An interest group is an ad targeting group stored on the browser that can
    * be used to show a certain set of advertisements in the future as the
    * outcome of a FLEDGE auction.
    */
   allInterestGroupStorageEvents: 'All interest group storage events.',
   /**
-   *@description Text in InterestGroupStorage Items View of the Application panel
+   * @description Text in InterestGroupStorage Items View of the Application panel
    * Date and time of an Interest Group storage event in a locale-
    * dependent format.
    */
   eventTime: 'Event Time',
   /**
-   *@description Text in InterestGroupStorage Items View of the Application panel
+   * @description Text in InterestGroupStorage Items View of the Application panel
    * Type of interest group event such as 'join', 'bid', 'win', or 'leave'.
    */
   eventType: 'Access Type',
   /**
-   *@description Text in InterestGroupStorage Items View of the Application panel
+   * @description Text in InterestGroupStorage Items View of the Application panel
    * Owner of the interest group. The origin that controls the
    * content of information associated with the interest group such as which
    * ads get displayed.
    */
   groupOwner: 'Owner',
   /**
-   *@description Text in InterestGroupStorage Items View of the Application panel
+   * @description Text in InterestGroupStorage Items View of the Application panel
    * Name of the interest group. The name is unique per-owner and identifies the
    * interest group.
    */
   groupName: 'Name',
   /**
-   *@description Text shown when no interest groups are detected.
+   * @description Text shown when no interest groups are detected.
    * An interest group is an ad targeting group stored on the browser that can
    * be used to show a certain set of advertisements in the future as the
    * outcome of a FLEDGE auction.
    */
   noEvents: 'No interest group events detected',
   /**
-   *@description Text shown when no interest groups are detected and explains what this page is about.
+   * @description Text shown when no interest groups are detected and explains what this page is about.
    * An interest group is an ad targeting group stored on the browser that can
    * be used to show a certain set of advertisements in the future as the
    * outcome of a FLEDGE auction.
@@ -92,9 +92,8 @@ export class InterestGroupAccessGrid extends HTMLElement {
         html`
           <div>
             <span class="heading">Interest Groups</span>
-            <devtools-icon class="info-icon"
-                          title=${i18nString(UIStrings.allInterestGroupStorageEvents)}
-                          .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
+            <devtools-icon class="info-icon medium" name="info"
+                          title=${i18nString(UIStrings.allInterestGroupStorageEvents)}>
             </devtools-icon>
             ${this.#renderGrid()}
           </div>`}