chrome-devtools-frontend 1.0.1515446 → 1.0.1515796

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6088,7 +6088,7 @@ export const NativeFunctions = [
   },
   {
     name: "addAnimation",
-    signatures: [["animation"]]
+    signatures: [["animation","action","behavior"]]
   },
   {
     name: "removeAnimation",
@@ -6765,6 +6765,10 @@ export const NativeFunctions = [
     name: "DragEvent",
     signatures: [["type","?eventInitDict"]]
   },
+  {
+    name: "EmailVerifiedEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "ErrorEvent",
     signatures: [["type","?eventInitDict"]]
@@ -7605,7 +7609,7 @@ export const NativeFunctions = [
     signatures: [["element","x","y","?dwidth","?dheight"]]
   },
   {
-    name: "drawHTML",
+    name: "drawElementImage",
     signatures: [["element","x","y","?dwidth","?dheight"]]
   },
   {
@@ -8420,10 +8424,6 @@ export const NativeFunctions = [
     name: "RTCRtpScriptTransform",
     signatures: [["worker","?options","?transfer"]]
   },
-  {
-    name: "sendRtp",
-    signatures: [["packet","options"]]
-  },
   {
     name: "setHeaderExtensionsToNegotiate",
     signatures: [["extensions"]]
@@ -8891,7 +8891,7 @@ export const NativeFunctions = [
     signatures: [["provokeMode"]]
   },
   {
-    name: "texHTML2D",
+    name: "texElementImage2D",
     signatures: [["target","level","internalformat","format","type","element"]]
   },
   {

package/front_end/models/text_utils/TextUtils.ts

@@ -367,6 +367,32 @@ export const performSearchInSearchMatches = function(
   return result;
 };
 
+/**
+ * Finds the longest overlapping string segment between the end of the first
+ * string and the beginning of the second string.
+ *
+ * @param s1 The first string (whose suffix will be checked).
+ * @param s2 The second string (whose prefix will be checked).
+ * @returns The overlapping string segment, or an empty string ("")
+ * if no overlap is found.
+ */
+export const getOverlap = function(s1: string, s2: string): string|null {
+  const minLen = Math.min(s1.length, s2.length);
+  // Check from longest possible overlap down to 1
+  for (let n = minLen; n > 0; n--) {
+    // slice(-n) gets the last 'n' chars
+    const suffix = s1.slice(-n);
+    // substring(0, n) gets the first 'n' chars
+    const prefix = s2.substring(0, n);
+
+    if (suffix === prefix) {
+      return suffix;
+    }
+  }
+
+  return null;
+};
+
 export interface ParsedFilter {
   key?: string;
   text?: string|null;

package/front_end/models/trace/Processor.ts

@@ -443,7 +443,7 @@ export class TraceProcessor extends EventTarget {
       let model: Insights.Types.InsightModel|Error;
       try {
         options.logger?.start(`insights:${name}`);
-        model = insight.generateInsight(data, context);
+        model = insight.generateInsight(data, context, options.insightTimeFormatters);
         model.frameId = context.frameId;
         const navId = context.navigation?.args.data?.navigationId;
         if (navId) {

package/front_end/models/trace/insights/DocumentLatency.ts

@@ -190,11 +190,14 @@ function finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>
 }
 
 export function generateInsight(
-    data: Handlers.Types.HandlerData, context: InsightSetContext): DocumentLatencyInsightModel {
+    data: Handlers.Types.HandlerData, context: InsightSetContext,
+    timeFormatters?: Types.Configuration.InsightTimeFormatters): DocumentLatencyInsightModel {
   if (!context.navigation) {
     return finalize({});
   }
 
+  const millisToString = timeFormatters?.milli ?? i18n.TimeUtilities.millisToString;
+
   const documentRequest = data.NetworkRequests.byId.get(context.navigationId);
   if (!documentRequest) {
     return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
@@ -212,7 +215,8 @@ export function generateInsight(
     overallSavingsMs = Math.max(serverResponseTime - TARGET_MS, 0);
   }
 
-  const redirectDuration = Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000);
+  const redirectDuration =
+      Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000) as Types.Timing.Milli;
   overallSavingsMs += redirectDuration;
 
   const metricSavings = {
@@ -237,16 +241,14 @@ export function generateInsight(
         noRedirects: {
           label: noRedirects ? i18nString(UIStrings.passingRedirects) : i18nString(UIStrings.failedRedirects, {
             PH1: documentRequest.args.data.redirects.length,
-            PH2: i18n.TimeUtilities.millisToString(redirectDuration),
+            PH2: millisToString(redirectDuration),
           }),
           value: noRedirects
         },
         serverResponseIsFast: {
           label: serverResponseIsFast ?
-              i18nString(
-                  UIStrings.passingServerResponseTime, {PH1: i18n.TimeUtilities.millisToString(serverResponseTime)}) :
-              i18nString(
-                  UIStrings.failedServerResponseTime, {PH1: i18n.TimeUtilities.millisToString(serverResponseTime)}),
+              i18nString(UIStrings.passingServerResponseTime, {PH1: millisToString(serverResponseTime)}) :
+              i18nString(UIStrings.failedServerResponseTime, {PH1: millisToString(serverResponseTime)}),
           value: serverResponseIsFast
         },
         usesCompression: {

package/front_end/models/trace/types/Configuration.ts

@@ -8,6 +8,7 @@ import type * as Protocol from '../../../generated/protocol.js';
 import type * as Lantern from '../lantern/lantern.js';
 
 import type * as File from './File.js';
+import type {Milli} from './Timing.js';
 
 export interface Configuration {
   /**
@@ -83,6 +84,17 @@ export interface ParseOptions {
     end: (id: string) => void,
   };
   lanternSettings?: Omit<Lantern.Types.Simulation.Settings, 'networkAnalysis'>;
+  /**
+   * Used when an Insight needs to format a time to string as part of its
+   * output. By default we use the i18n.TimeUtilities in DevTools but this
+   * enables it to be overridden, which is useful if you are consuming the trace
+   * engine outside of DevTools.
+   */
+  insightTimeFormatters?: InsightTimeFormatters;
+}
+
+export interface InsightTimeFormatters {
+  milli: (x: Milli) => string;
 }
 
 export interface ResolveSourceMapParams {

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

@@ -3,6 +3,8 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
+import type * as Protocol from '../../../generated/protocol.js';
 
 const UIStrings = {
   /**
@@ -552,7 +554,10 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheStrings.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-export const NotRestoredReasonDescription = {
+type NotRestoredReason =
+    Record<Protocol.Page.BackForwardCacheNotRestoredReason, {name: () => Platform.UIString.LocalizedString}>;
+
+export const NotRestoredReasonDescription: NotRestoredReason = {
   NotPrimaryMainFrame: {name: i18nLazyString(UIStrings.notMainFrame)},
   BackForwardCacheDisabled: {name: i18nLazyString(UIStrings.backForwardCacheDisabled)},
   RelatedActiveContentsExist: {name: i18nLazyString(UIStrings.relatedActiveContentsExist)},
@@ -567,6 +572,7 @@ export const NotRestoredReasonDescription = {
   JavaScriptExecution: {name: i18nLazyString(UIStrings.JavaScriptExecution)},
   RendererProcessKilled: {name: i18nLazyString(UIStrings.rendererProcessKilled)},
   RendererProcessCrashed: {name: i18nLazyString(UIStrings.rendererProcessCrashed)},
+  // @ts-expect-error kept for backwards compatibly
   GrantedMediaStreamAccess: {name: i18nLazyString(UIStrings.grantedMediaStreamAccess)},
   CacheFlushed: {name: i18nLazyString(UIStrings.cacheFlushed)},
   ServiceWorkerVersionActivation: {name: i18nLazyString(UIStrings.serviceWorkerVersionActivation)},
@@ -713,4 +719,4 @@ export const NotRestoredReasonDescription = {
       {name: i18n.i18n.lockedLazyString('CacheLimitPrunedOnModerateMemoryPressure')},
   CacheLimitPrunedOnCriticalMemoryPressure:
       {name: i18n.i18n.lockedLazyString('CacheLimitPrunedOnCriticalMemoryPressure')},
-};
+} as const;

package/front_end/panels/common/BadgeNotification.ts

@@ -21,16 +21,16 @@ const UIStrings = {
   /**
    * @description Title for close button
    */
-  dismiss: 'Dismiss',
+  close: 'Close',
   /**
    * @description Activity based badge award notification text
    * @example {Badge Title} PH1
    */
-  activityBasedBadgeAwardMessage: 'You earned the {PH1} badge! It has been added to your Developer Profile.',
+  activityBasedBadgeAwardMessage: 'You earned the {PH1} badge! It’s been added to your Developer Profile.',
   /**
    * @description Action title for navigating to the badge settings in Google Developer Profile section
    */
-  badgeSettings: 'Badge settings',
+  manageSettings: 'Manage settings',
   /**
    * @description Action title for opening the Google Developer Program profile page of the user in a new tab
    */
@@ -55,7 +55,7 @@ const UIStrings = {
   /**
    * @description Action title for enabling the "Receive badges" setting
    */
-  receiveBadges: 'Receive badges',
+  receiveBadges: 'Turn on badges',
   /**
    * @description Action title for creating a Google Developer Program profle
    */
@@ -103,10 +103,10 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
         class="dismiss notification-button"
         @click=${input.onCloseClick}
         jslog=${VisualLogging.action('badge-notification.dismiss').track({click: true})}
-        aria-label=${i18nString(UIStrings.dismiss)}
+        aria-label=${i18nString(UIStrings.close)}
         .iconName=${'cross'}
         .variant=${Buttons.Button.Variant.ICON}
-        .title=${i18nString(UIStrings.dismiss)}
+        .title=${i18nString(UIStrings.close)}
         .inverseColorTheme=${true}
     ></devtools-button>`;
 
@@ -114,7 +114,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
     <style>${badgeNotificationStyles}</style>
     <div class="container">
       <div class="badge-container">
-        <img class="badge-image" src=${input.imageUri}>
+        <img class="badge-image" role="presentation" src=${input.imageUri}>
       </div>
       <div class="action-and-text-container">
         <div class="label-container">
@@ -145,6 +145,8 @@ export class BadgeNotification extends UI.Widget.Widget {
     super(element);
     this.#view = view;
 
+    // eslint-disable-next-line
+    this.contentElement.role = 'alert';
     this.markAsRoot();
   }
 
@@ -240,7 +242,7 @@ export class BadgeNotification extends UI.Widget.Widget {
       message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
       actions: [
         {
-          label: i18nString(UIStrings.badgeSettings),
+          label: i18nString(UIStrings.manageSettings),
           onClick: () => {
             this.#close();
             revealBadgeSettings();

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -39,8 +39,7 @@ const UIStrings = {
   /**
    * @description Body for the first section of the GDP sign up dialog.
    */
-  designedForSuccessBody:
-      'Grow your skills, build with AI, and receive badges you can showcase in your developer profile',
+  designedForSuccessBody: 'Grow your skills, build with AI, and earn badges you can showcase in your developer profile',
   /**
    * @description Title for the second section of the GDP sign up dialog.
    */
@@ -48,23 +47,32 @@ const UIStrings = {
   /**
    * @description Body for the second section of the GDP sign up dialog.
    */
-  keepUpdatedBody: 'The latest DevTools features, event invites, and tailored insights directly in your inbox',
+  keepUpdatedBody: 'The latest DevTools features, event invites, and tailored insights land directly in your inbox',
   /**
    * @description Title for the third section of the GDP sign up dialog.
    */
-  thingsToConsider: 'Things to consider',
+  tailorProfile: 'Tailor your profile',
+  /**
+   * @description Body for the third section of the GDP sign up dialog.
+   */
+  tailorProfileBody:
+      'The name on your Google Account and your interests will be used in your Google Developer Profile. Your name may appear where you contribute and can be changed at any time.',
   /**
    * @description Body for the third section of the GDP sign up dialog.
    * @example {Content Policy} PH1
    * @example {Terms of Service} PH2
    * @example {Privacy Policy} PH3
    */
-  thingsToConsiderBody:
-      'By creating a Developer Profile, you agree to the {PH1}. Google’s {PH2} and {PH3} apply to your use of this service. The name on your Google Account and your interests will be used in your Google Developer Profile. Your name may appear where you contribute and can be changed at any time.',
+  tailorProfileBodyDisclaimer:
+      'By creating a Developer Profile, you agree to the {PH1}. Google’s {PH2} and {PH3} apply to your use of this service.',
   /**
    * @description Button text for learning more about the Google Developer Program.
    */
   learnMore: 'Learn more',
+  /**
+   * @description Accessible text for learning more about the Google Developer Program.
+   */
+  learnMoreAccessibleText: 'Learn more about the Google Developer Program',
   /**
    * @description Link text for Content Policy.
    */
@@ -106,14 +114,14 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
   render(
     html`
       <style>${styles}</style>
-      <div class="gdp-sign-up-dialog-header"></div>
+      <div class="gdp-sign-up-dialog-header" role="img" tabindex="0" aria-label="Google Developer Program"></div>
       <div class="main-content">
         <div class="section">
           <div class="icon-container">
             <devtools-icon name="trophy"></devtools-icon>
           </div>
           <div class="text-container">
-            <h3 class="section-title">${i18nString(UIStrings.designedForSuccess)}</h3>
+            <h2 class="section-title">${i18nString(UIStrings.designedForSuccess)}</h2>
             <div class="section-text">${i18nString(UIStrings.designedForSuccessBody)}</div>
           </div>
         </div>
@@ -122,7 +130,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <devtools-icon name="mark-email-unread"></devtools-icon>
           </div>
           <div class="text-container">
-            <h3 class="section-title">${i18nString(UIStrings.keepUpdated)}</h3>
+            <h2 class="section-title">${i18nString(UIStrings.keepUpdated)}</h2>
             <div class="section-text">${i18nString(UIStrings.keepUpdatedBody)}</div>
           </div>
           <div class="switch-container">
@@ -140,19 +148,24 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <devtools-icon name="google"></devtools-icon>
           </div>
           <div class="text-container">
-            <h3 class="section-title">${i18nString(UIStrings.thingsToConsider)}</h3>
-            <div class="section-text">${i18n.i18n.getFormatLocalizedString(str_, UIStrings.thingsToConsiderBody, {
+            <h2 class="section-title">${i18nString(UIStrings.tailorProfile)}</h2>
+            <div class="section-text">
+              <div>${i18nString(UIStrings.tailorProfileBody)}</div><br/>
+              <div>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.tailorProfileBodyDisclaimer, {
       PH1: UI.XLink.XLink.create(CONTENT_POLICY_URL, i18nString(UIStrings.contentPolicy), 'link', undefined, 'gdp.content-policy'),
       PH2: UI.XLink.XLink.create(TERMS_OF_SERVICE_URL, i18nString(UIStrings.termsOfService), 'link',
         undefined, 'gdp.terms-of-service'),
       PH3: UI.XLink.XLink.create(PRIVACY_POLICY_URL, i18nString(UIStrings.privacyPolicy), 'link',
         undefined, 'gdp.privacy-policy'),
     })}</div>
+            </div>
           </div>
         </div>
       </div>
       <div class="buttons">
         <devtools-button
+          aria-label=${i18nString(UIStrings.learnMoreAccessibleText)}
+          .title=${i18nString(UIStrings.learnMoreAccessibleText)}
           .variant=${Buttons.Button.Variant.OUTLINED}
           .jslogContext=${'learn-more'}
           @click=${() => UI.UIUtils.openInNewTab(GDP_PROGRAM_URL as Platform.DevToolsPath.UrlString)}>${i18nString(UIStrings.learnMore)}</devtools-button>

package/front_end/panels/common/gdpSignUpDialog.css

@@ -17,6 +17,10 @@
         background-repeat: no-repeat;
         background-size: contain;
         margin: 0;
+
+        &:focus-visible {
+            outline: 2px solid var(--sys-color-state-focus-ring);
+        }
     }
 
     :host-context(.theme-with-dark-background) & .gdp-sign-up-dialog-header {