chrome-devtools-frontend 1.0.1698733 → 1.0.1700561

package/front_end/panels/application/IndexedDBModel.ts

@@ -428,6 +428,9 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
 
   storageBucketDeleted(_event: Protocol.Storage.StorageBucketDeletedEvent): void {
   }
+
+  privateVerificationTokensUpdated(): void {
+  }
 }
 
 SDK.SDKModel.SDKModel.register(IndexedDBModel, {capabilities: SDK.Target.Capability.STORAGE, autostart: false});

package/front_end/panels/application/IndexedDBViews.ts

@@ -289,7 +289,7 @@ const populateContextMenu = (e: CustomEvent<UI.ContextMenu.ContextMenu>): void =
 const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
   const keyPath = input.isIndex && input.index ? input.index.keyPath : input.objectStore.keyPath;
   // clang-format off
-  return html`<devtools-data-grid row-height="auto" striped style="flex: auto;" name=${i18nString(UIStrings.indexedDb)} .template=${html`
+  return html`<devtools-data-grid row-height="auto" striped deletable style="flex: auto;" name=${i18nString(UIStrings.indexedDb)} .template=${html`
     <style>${indexedDBViewsStyles}</style>
     <table>
       <tr>

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -153,6 +153,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                 <devtools-data-grid
                   .name=${`${id}-datagrid-with-preview`}
                   striped
+                  deletable
                   style="flex: auto"
                   @sort=${(e: CustomEvent<{columnId: string, ascending: boolean}>) => input.onSort(e.detail.ascending)}
                   @refresh=${input.onRefresh}

package/front_end/panels/application/OriginTrialTreeView.ts

@@ -20,53 +20,48 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Label for the 'origin' field in a parsed Origin Trial Token.
+   * @description Label for the origin field in an origin trial token.
    */
   origin: 'Origin',
   /**
-   * @description Label for `trialName` field in a parsed Origin Trial Token.
-   * This field is only shown when token has unknown trial name as the token
-   * will be put into 'UNKNOWN' group.
+   * @description Label for the trial name field in an origin trial token.
    */
-  trialName: 'Trial Name',
+  trialName: 'Trial name',
   /**
-   * @description Label for `expiryTime` field in a parsed Origin Trial Token.
+   * @description Label for the expiry time field in an origin trial token.
    */
-  expiryTime: 'Expiry Time',
+  expiryTime: 'Expiry time',
   /**
-   * @description Label for `usageRestriction` field in a parsed Origin Trial Token.
+   * @description Label for the usage restriction field in an origin trial token.
    */
-  usageRestriction: 'Usage Restriction',
+  usageRestriction: 'Usage restriction',
   /**
-   * @description Label for `isThirdParty` field in a parsed Origin Trial Token.
+   * @description Label for the third party field in an origin trial token.
    */
-  isThirdParty: 'Third Party',
+  isThirdParty: 'Third party',
   /**
-   * @description Label for a field containing info about an Origin Trial Token's `matchSubDomains` field.
-   *An Origin Trial Token contains an origin URL. The `matchSubDomains` field describes whether the token
-   *only applies to the origin URL or to all subdomains of the origin URL as well.
-   *The field contains either 'true' or 'false'.
+   * @description Label for the subdomain matching field in an origin trial token.
    */
-  matchSubDomains: 'Subdomain Matching',
+  matchSubDomains: 'Subdomain matching',
   /**
-   * @description Label for the raw(= encoded / not human-readable) Origin Trial Token.
+   * @description Label for the raw token text in an origin trial token.
    */
-  rawTokenText: 'Raw Token',
+  rawTokenText: 'Raw token',
   /**
-   * @description Label for `status` field in an Origin Trial Token.
+   * @description Label for the token status field in an origin trial token.
    */
-  status: 'Token Status',
+  status: 'Token status',
   /**
-   * @description Label for tokenWithStatus node.
+   * @description Label for a token node in the origin trials tree view.
    */
   token: 'Token',
   /**
-   * @description Label for a badge showing the number of Origin Trial Tokens. This number is always greater than 1.
+   * @description Label for a badge showing the number of origin trial tokens.
    * @example {2} PH1
    */
   tokens: '{PH1} tokens',
   /**
-   * @description Label shown when there are no Origin Trial Tokens in the Frame view of the Application panel.
+   * @description Label shown when there are no origin trial tokens in the frame details view of the Application panel.
    */
   noTrialTokens: 'No trial tokens',
 } as const;

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -14,13 +14,13 @@ import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**
-   * @description Label for an item in the Application Panel Sidebar of the Application panel
+   * @description Label for an item in the sidebar of the Application panel.
    */
   reportingApi: 'Reporting API',
   /**
-   * @description Label for the Crash Report Context child item in the Reporting API section.
+   * @description Label for the crash report context item in the sidebar of the Application panel.
    */
-  crashReportContext: 'Crash Report Context',
+  crashReportContext: 'Crash report context',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiTreeElement.ts', UIStrings);
 export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/application/ReportingApiView.ts

@@ -17,29 +17,21 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Placeholder text that shows if no report or endpoint was detected.
-   *             A report contains information on issues or events that were encountered by a web browser.
-   *             An endpoint is a URL where the report is sent to.
-   *             (https://developer.chrome.com/docs/capabilities/web-apis/reporting-api)
+   * @description Header text in an empty state view when no report or endpoint has been detected in the reporting API view of the Application panel.
    */
   noReportOrEndpoint: 'No report or endpoint',
   /**
-   * @description Placeholder text that shows if no report or endpoint was detected.
-   *             A report contains information on issues or events that were encountered by a web browser.
-   *             An endpoint is a URL where the report is sent to.
-   *             (https://developer.chrome.com/docs/capabilities/web-apis/reporting-api)
+   * @description Explanatory text in an empty state view describing the reporting API view of the Application panel.
    */
-  reportingApiDescription: 'On this page you will be able to inspect `Reporting API` reports and endpoints',
+  reportingApiDescription: 'Inspect `Reporting API` reports and endpoints',
   /**
-   * @description Placeholder text that shows if no report was selected for viewing
-   *report body (https://developers.google.com/web/updates/2018/09/reportingapi#sending).
+   * @description Header text in an empty state view when no report is selected in the reporting API view of the Application panel.
    */
   noReportSelected: 'No report selected',
   /**
-   * @description Placeholder text instructing the user how to display a Reporting API
-   *report body (https://developers.google.com/web/updates/2018/09/reportingapi#sending).
+   * @description Explanatory text instructing the user how to display a report body in the reporting API view of the Application panel.
    */
-  clickToDisplayBody: 'Click on any report to display its body',
+  clickToDisplayBody: 'Click any report to display its body',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiView.ts', UIStrings);
 export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);

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

@@ -12,31 +12,31 @@ import * as PreloadingHelper from './preloading/helper/helper.js';
 
 const UIStrings = {
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Title of the Application panel.
    */
   application: 'Application',
   /**
-   * @description Command for showing the 'Application' tool
+   * @description Command in the command menu for showing the Application panel.
    */
   showApplication: 'Show Application',
   /**
-   * @description A tag of Application Panel that can be searched in the command menu
+   * @description Search tag for the Application panel in the command menu.
    */
   pwa: 'pwa',
   /**
-   * @description Text of button in Clear Storage View of the Application panel
+   * @description Title of an action in the Application panel to clear site data.
    */
   clearSiteData: 'Clear site data',
   /**
-   * @description Title of an action that clears all site data including 3rd party cookies
+   * @description Title of an action in the Application panel to clear all site data including third-party cookies.
    */
   clearSiteDataIncludingThirdparty: 'Clear site data (including third-party cookies)',
   /**
-   * @description Title of an action under the Background Services category that can be invoked through the Command Menu
+   * @description Title of an action under the background services category that can be invoked through the command menu.
    */
   startRecordingEvents: 'Start recording events',
   /**
-   * @description Title of an action under the Background Services category that can be invoked through the Command Menu
+   * @description Title of an action under the background services category that can be invoked through the command menu.
    */
   stopRecordingEvents: 'Stop recording events',
 } as const;

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

@@ -23,6 +23,12 @@ const {html} = Lit;
 const {repeat} = Lit.Directives;
 const {bindToSetting} = UI.UIUtils;
 
+const DENSITY_DOC_URL = 'https://developer.chrome.com/docs/ads/metrics/density';
+const COUNT_DOC_URL = 'https://developer.chrome.com/docs/ads/metrics/count';
+const CPU_USAGE_DOC_URL = 'https://developer.chrome.com/docs/ads/metrics/weight-cpu';
+const NETWORK_USAGE_DOC_URL = 'https://developer.chrome.com/docs/ads/metrics/weight-network';
+const AD_DETECTION_DOC_URL = 'https://developer.chrome.com/docs/ads/detection';
+
 const UIStrings = {
   /**
    * @description Title for the metrics table.
@@ -32,18 +38,34 @@ const UIStrings = {
    * @description Title for a metric showing the percentage of the viewport covered by ads.
    */
   viewportAdDensity: 'Viewport ad density',
+  /**
+   * @description Tooltip text explaining the viewport ad density metric in the ads view of the Application panel.
+   */
+  viewportAdDensityExplanation: 'Percentage of the viewport covered by ads',
   /**
    * @description Title for a metric showing the number of ads in the viewport.
    */
   viewportAdCount: 'Viewport ad count',
+  /**
+   * @description Tooltip text explaining the viewport ad count metric in the ads view of the Application panel.
+   */
+  viewportAdCountExplanation: 'Number of ads in the viewport',
   /**
    * @description Title for a metric showing the total CPU usage by ads.
    */
   totalCpuUsage: 'Total CPU usage by ads',
+  /**
+   * @description Tooltip text explaining the total CPU usage metric in the ads view of the Application panel.
+   */
+  totalCpuUsageExplanation: 'Total CPU time consumed by ads',
   /**
    * @description Title for a metric showing the total network usage by ads.
    */
   totalNetworkUsage: 'Total network usage by ads',
+  /**
+   * @description Tooltip text explaining the total network usage metric in the ads view of the Application panel.
+   */
+  totalNetworkUsageExplanation: 'Total network data consumed by ads',
   /**
    * @description Subtext showing the average value of a metric.
    * @example {5.00%} PH1
@@ -231,6 +253,26 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     });
   };
 
+  const renderMetricTooltip = (tooltipId: string, explanation: string, url: string): Lit.LitTemplate => {
+    return html`
+      <devtools-icon
+        name="info"
+        class="small metric-info-icon"
+        tabindex="0"
+        role="button"
+        aria-details=${tooltipId}
+        aria-label=${explanation}
+      ></devtools-icon>
+      <devtools-tooltip id=${tooltipId} variant="rich" prefer-span-left @copy=${stopPropagation}>
+        <span>${explanation}</span>
+        &#32;
+        <devtools-link href=${url} jslogcontext="learn-more">
+          ${i18nString(UIStrings.learnMore)}
+        </devtools-link>
+      </devtools-tooltip>
+    `;
+  };
+
   // clang-format off
   Lit.render(html`
     <style>${adsViewStyles}</style>
@@ -245,6 +287,11 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                 PH1: formatAverage(metrics.averageViewportAdDensityByArea, true),
               })}</span>
           </dd>
+          ${renderMetricTooltip(
+            'density-metric-tooltip',
+            i18nString(UIStrings.viewportAdDensityExplanation),
+            DENSITY_DOC_URL,
+          )}
         </div>
         <div class="metric-box">
           <dt class="metric-title">${i18nString(UIStrings.viewportAdCount)}</dt>
@@ -254,18 +301,33 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                 PH1: formatAverage(metrics.averageViewportAdCount, false),
               })}</span>
           </dd>
+          ${renderMetricTooltip(
+            'count-metric-tooltip',
+            i18nString(UIStrings.viewportAdCountExplanation),
+            COUNT_DOC_URL,
+          )}
         </div>
         <div class="metric-box">
           <dt class="metric-title">${i18nString(UIStrings.totalCpuUsage)}</dt>
           <dd class="metric-value">
             <span>${formatCpu(metrics.totalAdCpuTime)}</span>
           </dd>
+          ${renderMetricTooltip(
+            'cpu-metric-tooltip',
+            i18nString(UIStrings.totalCpuUsageExplanation),
+            CPU_USAGE_DOC_URL,
+          )}
         </div>
         <div class="metric-box">
           <dt class="metric-title">${i18nString(UIStrings.totalNetworkUsage)}</dt>
           <dd class="metric-value">
             <span>${formatNetwork(metrics.totalAdNetworkBytes)}</span>
           </dd>
+          ${renderMetricTooltip(
+            'network-metric-tooltip',
+            i18nString(UIStrings.totalNetworkUsageExplanation),
+            NETWORK_USAGE_DOC_URL,
+          )}
         </div>
       </dl>
       <hr class="divider">
@@ -374,7 +436,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         <span>
           ${i18nString(UIStrings.adDetectionMistakes)}
           &#32;
-          <devtools-link class="link devtools-link" href="https://chromium.googlesource.com/chromium/src/+/main/docs/ad_tagging.md" jslogcontext="learn-more">
+          <devtools-link href=${AD_DETECTION_DOC_URL} jslogcontext="learn-more">
             ${i18nString(UIStrings.learnMore)}
           </devtools-link>
         </span>

package/front_end/panels/application/components/adsView.css

@@ -29,17 +29,20 @@
 
 .metric-box {
   background-color: var(--sys-color-surface);
-  padding: var(--sys-size-6);
+  padding: var(--sys-size-4);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
 }
 
 .metric-title {
   font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-on-surface-subtle);
   margin: 0 0 var(--sys-size-3);
+  padding: 0 var(--sys-size-8);
+  text-align: center;
 }
 
 .metric-value {
@@ -59,6 +62,13 @@
   color: var(--sys-color-on-surface-subtle);
 }
 
+.metric-info-icon {
+  position: absolute;
+  top: var(--sys-size-4);
+  right: var(--sys-size-4);
+  cursor: pointer;
+}
+
 .metrics-title,
 .ad-frames-title,
 .ad-scripts-title,

package/front_end/panels/common/CommentThreadWidget.ts

@@ -5,6 +5,7 @@
 import '../../ui/components/tooltips/tooltips.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 import type * as CommentManager from '../../models/comment_manager/comment_manager.js';
 import * as Input from '../../ui/components/input/input.js';
 import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
@@ -12,14 +13,12 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
 import commentThreadWidgetStyles from './commentThreadWidget.css.js';
+import {DOMNodeLink} from './DOMLinkifier.js';
 
 const {html, render, Directives: {createRef, ref}} = Lit;
+const {widget} = UI.Widget;
 
 const UIStrings = {
-  /**
-   * @description Link text in the info tooltip for learning more about comments sent to the agent.
-   */
-  learnMore: 'Learn more',
   /**
    * @description Text next to the checkmark in the comment thread header indicating that comments have been sent to
    * the agent.
@@ -37,7 +36,7 @@ const UIStrings = {
   /**
    * @description Label for the aria-label of the add comment button.
    */
-  addCommentButton: 'Add comment',
+  sendToAgent: 'Send to agent',
   /**
    * @description aria-label for the comment text area.
    */
@@ -49,19 +48,26 @@ const UIStringsNotTranslate = {
    * @description Disclaimer text in the comment thread info tooltip.
    */
   inputDisclaimer:
-      'Comment strings, DOM hierarchy snippets, tracked CSS and DOM changes, Visual Element (VE) paths and signatures, and tracked presenter changes are sent to the connected third-party agent to assist with debugging and code updates.',
+      'Comment strings, DOM hierarchy snippets, tracked CSS and DOM changes, Visual Element (VE) paths and signatures, and tracked presenter changes are sent to the connected third-party agent to assist with debugging and code updates',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/common/CommentThreadWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
+/**
+ * Either the DOM node the thread is anchored to, or a plain text label for anchors that are not
+ * DOM nodes (e.g. network requests).
+ */
+export type Title = {
+  node: SDK.DOMModel.DOMNode,
+}|{text: string};
+
 export interface ViewInput {
-  title: string;
+  title: Title;
   comments: CommentManager.CommentManager.Comment[];
   commentText: string;
   textAreaRef: Lit.Directives.Ref<HTMLTextAreaElement>;
-  onLearnMoreClick: () => void;
   onAddComment: (text: string) => void;
   onCommentTextChange: (event: Event) => void;
 }
@@ -77,7 +83,9 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
     <div class="comment-thread-widget ${hasComment ? 'submitted' : ''}">
       <div class="header">
         <span class="selected-item">
-          <span class="selected-item-text">${input.title}</span>
+          ${'node' in input.title ?
+            widget(DOMNodeLink, {node: input.title.node}) :
+            html`<span class="selected-item-text">${input.title.text}</span>`}
         </span>
         ${hasComment ? html`
           <div class="sent-status">
@@ -139,18 +147,13 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
           >
             <div class="info-tooltip-container">
               ${lockedString(UIStringsNotTranslate.inputDisclaimer)}
-              <button
-                class="tooltip-link"
-                role="link"
-                @click=${input.onLearnMoreClick}
-              >${i18nString(UIStrings.learnMore)}</button>
             </div>
           </devtools-tooltip>
           <devtools-button
-            aria-label=${i18nString(UIStrings.addCommentButton)}
+            aria-label=${i18nString(UIStrings.sendToAgent)}
             .disabled=${!input.commentText.trim()}
             @click=${() => input.onAddComment(input.commentText)}>
-            ${i18nString(UIStrings.addCommentButton)}
+            ${i18nString(UIStrings.sendToAgent)}
           </devtools-button>
         </div>
       ` : Lit.nothing}
@@ -162,7 +165,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
 type View = typeof DEFAULT_VIEW;
 
 export class CommentThreadWidget extends UI.Widget.Widget {
-  title = 'Comment Thread';
+  title: Title = {text: ''};
   #comments: CommentManager.CommentManager.Comment[] = [];
   #commentText = '';
   #textAreaRef = createRef<HTMLTextAreaElement>();
@@ -187,10 +190,6 @@ export class CommentThreadWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  #handleLearnMoreClick = (): void => {
-    // TODO: wire up the learn more click
-  };
-
   #handleAddComment = (text: string): void => {
     const commentText = text.trim();
     if (commentText && this.onAddComment) {
@@ -212,7 +211,6 @@ export class CommentThreadWidget extends UI.Widget.Widget {
       comments: this.#comments,
       commentText: this.#commentText,
       textAreaRef: this.#textAreaRef,
-      onLearnMoreClick: this.#handleLearnMoreClick,
       onAddComment: this.#handleAddComment,
       onCommentTextChange: this.#handleCommentTextChange,
     };