chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -10,7 +10,9 @@ import '../../../ui/components/menus/menus.js';
 import './MetricCard.js';
 
 import * as Common from '../../../core/common/common.js';
+import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as EmulationModel from '../../../models/emulation/emulation.js';
@@ -81,6 +83,15 @@ const UIStrings = {
    * @example {Mobile} PH1
    */
   showFieldDataForDevice: 'Show field data for device type: {PH1}',
+  /**
+   * @description Text indicating that there is not enough data to report real user statistics.
+   */
+  notEnoughData: 'Not enough data',
+  /**
+   * @description Label for a text block that describes the network connections of real users.
+   * @example {75th percentile is similar to Slow 4G throttling} PH1
+   */
+  network: 'Network: {PH1}',
   /**
    * @description Label for an select box that selects which device type field data be shown for (e.g. desktop/mobile/all devices/etc).
    * @example {Mobile} PH1
@@ -141,30 +152,20 @@ const UIStrings = {
    */
   showFieldDataForPage: 'Show field data for {PH1}',
   /**
-   * @description Tooltip text explaining that real user connections are similar to a test environment with no throttling. "latencies" refers to the time it takes for a website server to respond. "throttling" is when the network is intentionally slowed down to simulate a slower connection.
+   * @description Tooltip text explaining that real user connections are similar to a test environment with no throttling. "throttling" is when the network is intentionally slowed down to simulate a slower connection.
    */
-  tryDisablingThrottling:
-      'The 75th percentile of real users experienced network latencies similar to a connection with no throttling.',
+  tryDisablingThrottling: '75th percentile is too fast to simulate with throttling',
   /**
-   * @description Tooltip text explaining that real user connections are similar to a specif network throttling setup. "latencies" refers to the time it takes for a website server to respond. "throttling" is when the network is intentionally slowed down to simulate a slower connection.
+   * @description Tooltip text explaining that real user connections are similar to a specif network throttling setup. "throttling" is when the network is intentionally slowed down to simulate a slower connection.
    * @example {Slow 4G} PH1
    */
-  tryUsingThrottling: 'The 75th percentile of real users experienced network latencies similar to {PH1} throttling.',
-  /**
-   * @description Tooltip text explaining that a majority of users are using a mobile form factor with the specific percentage.
-   * @example {60%} PH1
-   */
-  mostUsersMobile: '{PH1} of users are on mobile.',
+  tryUsingThrottling: '75th percentile is similar to {PH1} throttling',
   /**
-   * @description Tooltip text explaining that a majority of users are using a desktop form factor with the specific percentage.
+   * @description Text block listing what percentage of real users are on different device form factors.
    * @example {60%} PH1
+   * @example {30%} PH2
    */
-  mostUsersDesktop: '{PH1} of users are on desktop.',
-  /**
-   * @description Text for a percentage value.
-   * @example {60} PH1
-   */
-  percentage: '{PH1}%',
+  percentDevices: '{PH1}% mobile, {PH2}% desktop',
   /**
    * @description Text block explaining how to simulate different mobile and desktop devices. The placeholder at the end will be a link with the text "simulate different devices" translated separately.
    * @example {simulate different devices} PH1
@@ -205,8 +206,9 @@ const UIStrings = {
   }`,
   /**
    * @description Label for a a range of dates that represents the period of time a set of field data is collected from.
+   * @example {Oct 1, 2024 - Nov 1, 2024} PH1
    */
-  collectionPeriod: 'Collection period:',
+  collectionPeriod: 'Collection period: {PH1}',
   /**
    * @description Text showing a range of dates meant to represent a period of time.
    * @example {Oct 1, 2024} PH1
@@ -219,23 +221,10 @@ const UIStrings = {
    */
   seeHowYourLocalMetricsCompare: 'See how your local metrics compare to real user data in the {PH1}.',
   /**
-   * @description Text block explaining that local metrics are collected from the local environment used to load the page being tested. PH1 will be a link with text that will be translated separately.
-   * @example {local metrics} PH1
-   */
-  theLocalMetricsAre: 'The {PH1} are captured from the current page using your network connection and device.',
-  /**
-   * @description Link text that is inserted in another translated text block that describes performance metrics measured in the developers local environment.
-   */
-  localMetricsLink: 'local metrics',
-  /**
-   * @description Text block explaining that field metrics are measured by real users using many different connections and hardware over a 28 period. PH1 will be a link with text that will be translated separately.
-   * @example {field data} PH1
-   */
-  theFieldMetricsAre: 'The {PH1} is measured by real users using many different network connections and devices.',
-  /**
-   * @description Link text that is inserted in another translated text block that describes performance data measured by real users in the field.
+   * @description Tooltip text for a link that goes to documentation explaining the difference between local and field metrics. "Local metrics" are performance metrics measured in the developers local environment. "field data" is data measured by real users in the field.
    */
-  fieldDataLink: 'field data',
+  learnMoreAboutMetrics:
+      'Local metrics are captured from the current page using your network connection and device. Field data is measured by real users using many different network connections and devices. Click to learn more about local and field metrics.',
   /**
    * @description Tooltip text explaining that this user interaction was ignored when calculating the Interaction to Next Paint (INP) metric because the interaction delay fell beyond the 98th percentile of interaction delays on this page. "INP" is an acronym and should not be translated.
    */
@@ -246,9 +235,9 @@ const UIStrings = {
    */
   clearCurrentLog: 'Clear the current log',
   /**
-   * @description Title for an expandable section that contains more information about real user environments. This message is meant to prompt the user to understand the conditions experienced by real users.
+   * @description Title for a section that contains more information about real user environments. This message is meant to prompt the user to understand the conditions experienced by real users.
    */
-  considerRealUser: 'Consider real user environments',
+  realUserEnvironments: 'Real user environments',
   /**
    * @description Title for a page load phase that measures the time between when the page load starts and the time when the first byte of the initial document is downloaded.
    */
@@ -289,6 +278,18 @@ const UIStrings = {
    * @description Tooltip text for a button that reveals the cluster of layout shift events that affected the page content the most. A layout shift is an event that shifts content in the layout of the page causing a jarring experience for the user. A cluster is a group of layout shift events that occur in quick succession.
    */
   showClsCluster: 'Go to worst layout shift cluster.',
+  /**
+   * @description Column header for table cell values representing the phase/component/stage/section of a larger duration.
+   */
+  phase: 'Phase',
+  /**
+   * @description Column header for table cell values representing a phase duration (in milliseconds) that was measured in the developers local environment.
+   */
+  duration: 'Local duration (ms)',
+  /**
+   * @description Tooltip text for a button that will open the Chrome DevTools console to and log additional details about a user interaction.
+   */
+  logToConsole: 'Log additional interaction data to the console',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/LiveMetricsView.ts', UIStrings);
@@ -300,7 +301,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   #lcpValue?: LiveMetrics.LCPValue;
   #clsValue?: LiveMetrics.CLSValue;
   #inpValue?: LiveMetrics.INPValue;
-  #interactions: LiveMetrics.Interaction[] = [];
+  #interactions: LiveMetrics.InteractionMap = new Map();
   #layoutShifts: LiveMetrics.LayoutShift[] = [];
 
   #cruxPageResult?: CrUXManager.PageResult;
@@ -332,8 +333,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     const hasNewLS = this.#layoutShifts.length < event.data.layoutShifts.length;
     this.#layoutShifts = [...event.data.layoutShifts];
 
-    const hasNewInteraction = this.#interactions.length < event.data.interactions.length;
-    this.#interactions = [...event.data.interactions];
+    const hasNewInteraction = this.#interactions.size < event.data.interactions.size;
+    this.#interactions = new Map(event.data.interactions);
 
     const renderPromise = ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
 
@@ -510,8 +511,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   #renderInpCard(): LitHtml.LitTemplate {
     const fieldData = this.#getFieldMetricData('interaction_to_next_paint');
     const phases = this.#inpValue?.phases;
-    const interaction =
-        this.#interactions.find(interaction => interaction.uniqueInteractionId === this.#inpValue?.uniqueInteractionId);
+    const interaction = this.#inpValue && this.#interactions.get(this.#inpValue.interactionId);
 
     // clang-format off
     return html`
@@ -611,47 +611,44 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     return i18nString(UIStrings.tryUsingThrottling, {PH1: title});
   }
 
-  #getDeviceRec(): Common.UIString.LocalizedString|null {
+  #getDeviceRec(): string|null {
     // `form_factors` metric is only populated if CrUX data is fetched for all devices.
     const fractions = this.#cruxPageResult?.[`${this.#fieldPageScope}-ALL`]?.record.metrics.form_factors?.fractions;
     if (!fractions) {
       return null;
     }
 
-    if (fractions.desktop > 0.5) {
-      const percentage = i18nString(UIStrings.percentage, {PH1: Math.round(fractions.desktop * 100)});
-      return i18nString(UIStrings.mostUsersDesktop, {PH1: percentage});
-    }
-
-    if (fractions.phone > 0.5) {
-      const percentage = i18nString(UIStrings.percentage, {PH1: Math.round(fractions.phone * 100)});
-      return i18nString(UIStrings.mostUsersMobile, {PH1: percentage});
-    }
-
-    return null;
+    return i18nString(UIStrings.percentDevices, {
+      PH1: Math.round(fractions.phone * 100),
+      PH2: Math.round(fractions.desktop * 100),
+    });
   }
 
   #renderRecordingSettings(): LitHtml.LitTemplate {
-    const envRecs = [
-      this.#getDeviceRec(),
-      this.#getNetworkRec(),
-    ].filter(rec => rec !== null);
+    const fieldEnabled = CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled;
 
     const deviceLinkEl = UI.XLink.XLink.create(
         'https://developer.chrome.com/docs/devtools/device-mode', i18nString(UIStrings.simulateDifferentDevices));
     const deviceMessage = i18n.i18n.getFormatLocalizedString(str_, UIStrings.useDeviceToolbar, {PH1: deviceLinkEl});
 
+    const deviceRecEl = document.createElement('span');
+    deviceRecEl.classList.add('environment-rec');
+    deviceRecEl.textContent = this.#getDeviceRec() || i18nString(UIStrings.notEnoughData);
+
+    const networkRecEl = document.createElement('span');
+    networkRecEl.classList.add('environment-rec');
+    networkRecEl.textContent = this.#getNetworkRec() || i18nString(UIStrings.notEnoughData);
+
     // clang-format off
     return html`
       <h3 class="card-title">${i18nString(UIStrings.environmentSettings)}</h3>
       <div class="device-toolbar-description">${deviceMessage}</div>
-      ${envRecs.length > 0 ? html`
-        <details class="environment-recs">
-          <summary>${i18nString(UIStrings.considerRealUser)}</summary>
-          <ul class="environment-recs-list">
-            ${envRecs.map(rec => html`<li>${rec}</li>`)}
-          </ul>
-        </details>
+      ${fieldEnabled ? html`
+        <div class="environment-recs-title">${i18nString(UIStrings.realUserEnvironments)}</div>
+        <ul class="environment-recs-list">
+          <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.device, {PH1: deviceRecEl})}</li>
+          <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.network, {PH1: networkRecEl})}</li>
+        </ul>
       ` : nothing}
       <div class="environment-option">
         <devtools-cpu-throttling-selector></devtools-cpu-throttling-selector>
@@ -838,10 +835,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format on
   }
 
-  #renderCollectionPeriod(): LitHtml.LitTemplate {
+  #getCollectionPeriodRange(): string|null {
     const selectedResponse = this.#getSelectedFieldResponse();
     if (!selectedResponse) {
-      return LitHtml.nothing;
+      return null;
     }
 
     const {firstDate, lastDate} = selectedResponse.record.collectionPeriod;
@@ -865,18 +862,25 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       day: 'numeric',
     };
 
-    const dateEl = document.createElement('span');
-    dateEl.classList.add('collection-period-range');
-    dateEl.textContent = i18nString(UIStrings.dateRange, {
+    return i18nString(UIStrings.dateRange, {
       PH1: formattedFirstDate.toLocaleDateString(undefined, options),
       PH2: formattedLastDate.toLocaleDateString(undefined, options),
     });
+  }
+
+  #renderCollectionPeriod(): LitHtml.LitTemplate {
+    const range = this.#getCollectionPeriodRange();
+
+    const dateEl = document.createElement('span');
+    dateEl.classList.add('collection-period-range');
+    dateEl.textContent = range || i18nString(UIStrings.notEnoughData);
+
+    const message = i18n.i18n.getFormatLocalizedString(str_, UIStrings.collectionPeriod, {
+      PH1: dateEl,
+    });
 
     return html`
-      <div class="field-data-message">
-        ${i18nString(UIStrings.collectionPeriod)}
-        ${dateEl}
-      </div>
+      <div class="field-data-message">${message}</div>
     `;
   }
 
@@ -894,24 +898,6 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     `;
   }
 
-  #renderDataDescriptions(): LitHtml.LitTemplate {
-    const fieldEnabled = CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled;
-
-    const localLink =
-        UI.XLink.XLink.create('https://goo.gle/perf-local-metrics', i18nString(UIStrings.localMetricsLink));
-    const localEl = i18n.i18n.getFormatLocalizedString(str_, UIStrings.theLocalMetricsAre, {PH1: localLink});
-
-    const fieldLink = UI.XLink.XLink.create('https://goo.gle/perf-field-data', i18nString(UIStrings.fieldDataLink));
-    const fieldEl = i18n.i18n.getFormatLocalizedString(str_, UIStrings.theFieldMetricsAre, {PH1: fieldLink});
-
-    return html`
-      <div class="data-descriptions">
-        <div>${localEl}</div>
-        ${fieldEnabled ? html`<div>${fieldEl}</div>` : nothing}
-      </div>
-    `;
-  }
-
   #renderLogSection(): LitHtml.LitTemplate {
     // clang-format off
     return html`
@@ -930,7 +916,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   async #revealInteraction(interaction: LiveMetrics.Interaction): Promise<void> {
-    const interactionEl = this.#shadow.getElementById(interaction.uniqueInteractionId);
+    const interactionEl = this.#shadow.getElementById(interaction.interactionId);
     if (!interactionEl || !this.#logsEl) {
       return;
     }
@@ -949,8 +935,15 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     });
   }
 
+  async #logExtraInteractionDetails(interaction: LiveMetrics.Interaction): Promise<void> {
+    const success = await LiveMetrics.LiveMetrics.instance().logInteractionScripts(interaction);
+    if (success) {
+      await Common.Console.Console.instance().showPromise();
+    }
+  }
+
   #renderInteractionsLog(): LitHtml.LitTemplate {
-    if (!this.#interactions.length) {
+    if (!this.#interactions.size) {
       return LitHtml.nothing;
     }
 
@@ -962,7 +955,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
           this.#interactionsListEl = node as HTMLElement;
         })}
       >
-        ${this.#interactions.map(interaction => {
+        ${this.#interactions.values().map(interaction => {
           const metricValue = renderMetricValue(
             'timeline.landing.interaction-event-timing',
             interaction.duration,
@@ -972,24 +965,54 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
           );
 
           const isP98Excluded = this.#inpValue && this.#inpValue.value < interaction.duration;
-          const isInp = this.#inpValue?.uniqueInteractionId === interaction.uniqueInteractionId;
+          const isInp = this.#inpValue?.interactionId === interaction.interactionId;
 
           return html`
-            <li id=${interaction.uniqueInteractionId} class="log-item interaction" tabindex="-1">
-              <span class="interaction-type">
-                ${interaction.interactionType}
-                ${isInp ?
-                  html`<span class="interaction-inp-chip" title=${i18nString(UIStrings.inpInteraction)}>INP</span>`
-                : nothing}
-              </span>
-              <span class="interaction-node">${
-                interaction.node && until(Common.Linkifier.Linkifier.linkify(interaction.node))}</span>
-              ${isP98Excluded ? html`<devtools-icon
-                class="interaction-info"
-                name="info"
-                title=${i18nString(UIStrings.interactionExcluded)}
-              ></devtools-icon>` : nothing}
-              <span class="interaction-duration">${metricValue}</span>
+            <li id=${interaction.interactionId} class="log-item interaction" tabindex="-1">
+              <details>
+                <summary>
+                  <span class="interaction-type">
+                    ${interaction.interactionType}
+                    ${isInp ?
+                      html`<span class="interaction-inp-chip" title=${i18nString(UIStrings.inpInteraction)}>INP</span>`
+                    : nothing}
+                  </span>
+                  <span class="interaction-node">${
+                    interaction.node && until(Common.Linkifier.Linkifier.linkify(interaction.node))}</span>
+                  ${isP98Excluded ? html`<devtools-icon
+                    class="interaction-info"
+                    name="info"
+                    title=${i18nString(UIStrings.interactionExcluded)}
+                  ></devtools-icon>` : nothing}
+                  <span class="interaction-duration">${metricValue}</span>
+                </summary>
+                <div class="phase-table" role="table">
+                  <div class="phase-table-row phase-table-header-row" role="row">
+                    <div role="columnheader">${i18nString(UIStrings.phase)}</div>
+                    <div role="columnheader">
+                      ${interaction.longAnimationFrameTimings.length ? html`
+                        <button
+                          class="log-extra-details-button"
+                          title=${i18nString(UIStrings.logToConsole)}
+                          @click=${() => this.#logExtraInteractionDetails(interaction)}
+                        >${i18nString(UIStrings.duration)}</button>
+                      ` : i18nString(UIStrings.duration)}
+                    </div>
+                  </div>
+                  <div class="phase-table-row" role="row">
+                    <div role="cell">${i18nString(UIStrings.inputDelay)}</div>
+                    <div role="cell">${Math.round(interaction.phases.inputDelay)}</div>
+                  </div>
+                  <div class="phase-table-row" role="row">
+                    <div role="cell">${i18nString(UIStrings.processingDuration)}</div>
+                    <div role="cell">${Math.round(interaction.phases.processingDuration)}</div>
+                  </div>
+                  <div class="phase-table-row" role="row">
+                    <div role="cell">${i18nString(UIStrings.presentationDelay)}</div>
+                    <div role="cell">${Math.round(interaction.phases.presentationDelay)}</div>
+                  </div>
+                </div>
+              </details>
             </li>
           `;
         })}
@@ -1076,13 +1099,25 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     const liveMetricsTitle =
         fieldEnabled ? i18nString(UIStrings.localAndFieldMetrics) : i18nString(UIStrings.localMetrics);
 
+    const helpLink = 'https://web.dev/articles/lab-and-field-data-differences#lab_data_versus_field_data' as
+        Platform.DevToolsPath.UrlString;
+
     // clang-format off
     const output = html`
       <div class="container">
         <div class="live-metrics-view">
           <main class="live-metrics"
           >
-            <h2 class="section-title">${liveMetricsTitle}</h2>
+            <h2 class="section-title">
+              ${liveMetricsTitle}
+              <devtools-button
+                class="section-title-help"
+                title=${i18nString(UIStrings.learnMoreAboutMetrics)}
+                .iconName=${'help'}
+                .variant=${Buttons.Button.Variant.ICON}
+                @click=${() => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(helpLink)}
+              ></devtools-button>
+            </h2>
             <div class="metric-cards"
               on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
                 this.#tooltipContainerEl = node;
@@ -1098,7 +1133,6 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                 ${this.#renderInpCard()}
               </div>
             </div>
-            ${this.#renderDataDescriptions()}
             ${this.#renderLogSection()}
           </main>
           <aside class="next-steps" aria-labelledby="next-steps-section-title">

package/front_end/panels/timeline/components/NetworkRequestDetails.test.ts

@@ -33,7 +33,7 @@ describeWithMockConnection('NetworkRequestDetails', () => {
     assert.strictEqual(titleSwatch?.style.backgroundColor, 'rgb(191, 103, 255)');
 
     const rowData = getRowDataForDetailsElement(details.shadowRoot);
-    const durationInnerText = '12.58 ms' +
+    const durationInnerText = 'Duration12.58 ms' +
         'Queuing and connecting1.83 ms' +
         'Request sent and waiting4.80 ms' +
         'Content downloading1.66 ms' +
@@ -41,32 +41,39 @@ describeWithMockConnection('NetworkRequestDetails', () => {
     assert.deepEqual(
         rowData,
         [
-          {title: 'URL', value: 'chromedevtools.github.io/performance-stories/lcp-web-font/app.css'},
+          {title: undefined, value: 'chromedevtools.github.io/performance-stories/lcp-web-font/app.css'},
           {title: 'Request method', value: 'GET'},
-          {title: 'Initial priority', value: 'Highest'},
           {title: 'Priority', value: 'Highest'},
           {title: 'MIME type', value: 'text/css'},
           {title: 'Encoded data', value: ' (from cache)'},
           {title: 'Decoded body', value: '96 B'},
+          {
+            title: 'Blocking',
+            value: 'Render blocking',
+          },
+          {title: 'From cache', value: 'Yes'},
+          {title: undefined, value: durationInnerText},
           {
             title: 'Initiated by',
             value: 'chromedevtools.github.io/performance-stories/lcp-web-font/index.html',
           },
-          {title: 'From cache', value: 'Yes'},
-          {title: 'Duration', value: durationInnerText},
         ],
     );
   });
 });
 
 function getRowDataForDetailsElement(details: ShadowRoot) {
-  return Array.from(details.querySelectorAll<HTMLDivElement>('.network-request-details-row')).map(row => {
+  return Array.from(details.querySelectorAll<HTMLDivElement>('.network-request-details-row, .timing-rows')).map(row => {
     const title = row.querySelector<HTMLDivElement>('.title')?.innerText;
     // The innerText in here will contain a `\n` and a few space for each child <div> tag, so just remove these empty
     // characters for easier test.
     const regExpForLineBreakAndFollowingSpaces = /\n[\s]+/g;
-    const value =
+    let value =
         row.querySelector<HTMLDivElement>('.value')?.innerText.replaceAll(regExpForLineBreakAndFollowingSpaces, '');
+
+    if (!title && !value) {
+      value = row.innerText.replaceAll(regExpForLineBreakAndFollowingSpaces, '');
+    }
     return {title, value};
   });
 }