chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

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

@@ -26,91 +26,91 @@ const MAX_URL_LENGTH = 100;
 
 const UIStrings = {
   /**
-   * @description Text that refers to the network request method
+   * @description Label for the HTTP request method in the network request details view of the Performance panel.
    */
   requestMethod: 'Request method',
   /**
-   * @description Text that refers to the network request protocol
+   * @description Label for the network protocol in the network request details view of the Performance panel.
    */
   protocol: 'Protocol',
   /**
-   * @description Text to show the priority of an item
+   * @description Label for the network request priority in the network request details view of the Performance panel.
    */
   priority: 'Priority',
   /**
-   * @description Text used when referring to the data sent in a network request that is encoded as a particular file format.
+   * @description Label for the encoded data size in the network request details view of the Performance panel.
    */
   encodedData: 'Encoded data',
   /**
-   * @description Text used to refer to the data sent in a network request that has been decoded.
+   * @description Label for the decoded body size in the network request details view of the Performance panel.
    */
   decodedBody: 'Decoded body',
   /**
-   * @description Text in Timeline indicating that input has happened recently
+   * @description Value indicating yes in the network request details view of the Performance panel.
    */
   yes: 'Yes',
   /**
-   * @description Text in Timeline indicating that input has not happened recently
+   * @description Value indicating no in the network request details view of the Performance panel.
    */
   no: 'No',
   /**
-   * @description Text to indicate to the user they are viewing an event representing a network request.
+   * @description Header title for a network request in the network request details view of the Performance panel.
    */
   networkRequest: 'Network request',
   /**
-   * @description Text for the data source of a network request.
+   * @description Label indicating whether a network request was served from cache in the network request details view of the Performance panel.
    */
   fromCache: 'From cache',
   /**
-   * @description Text used to show the mime-type of the data transferred with a network request (e.g. "application/json").
+   * @description Label for the MIME type of a network request in the network request details view of the Performance panel.
    */
   mimeType: 'MIME type',
   /**
-   * @description Text used to show the user that a request was served from the browser's in-memory cache.
+   * @description Suffix indicating that a network request was served from memory cache in the Performance panel.
    */
   FromMemoryCache: ' (from memory cache)',
   /**
-   * @description Text used to show the user that a request was served from the browser's file cache.
+   * @description Suffix indicating that a network request was served from disk cache in the Performance panel.
    */
   FromCache: ' (from cache)',
   /**
-   * @description Label for a network request indicating that it was a HTTP2 server push instead of a regular network request, in the Performance panel
+   * @description Suffix indicating that a network request was served from server push in the Performance panel.
    */
   FromPush: ' (from push)',
   /**
-   * @description Text used to show a user that a request was served from an installed, active service worker.
+   * @description Suffix indicating that a network request was served from a service worker in the Performance panel.
    */
   FromServiceWorker: ' (from `service worker`)',
   /**
-   * @description Text for the event initiated by another one
+   * @description Label indicating what initiated the network request in the network request details view of the Performance panel.
    */
   initiatedBy: 'Initiated by',
   /**
-   * @description Text that refers to if the network request is blocking
+   * @description Label for the render-blocking status of a network request in the network request details view of the Performance panel.
    */
   blocking: 'Blocking',
   /**
-   * @description Text that refers to if the network request is in-body parser render-blocking
+   * @description Status value indicating that a network request is in-body parser blocking in the Performance panel.
    */
   inBodyParserBlocking: 'In-body parser blocking',
   /**
-   * @description Text that refers to if the network request is render-blocking
+   * @description Status value indicating that a network request is render-blocking in the Performance panel.
    */
   renderBlocking: 'Render-blocking',
   /**
-   * @description Text to refer to a 3rd Party entity.
+   * @description Label for the third-party entity of a network request in the network request details view of the Performance panel.
    */
   entity: '3rd party',
   /**
-   * @description Label for a column containing the names of timings (performance metric) taken in the server side application.
+   * @description Column header for server timing metric names in the network request details view of the Performance panel.
    */
   serverTiming: 'Server timing',
   /**
-   * @description Label for a column containing the values of timings (performance metric) taken in the server side application.
+   * @description Column header for server timing duration values in the network request details view of the Performance panel.
    */
   time: 'Time',
   /**
-   * @description Label for a column containing the description of timings (performance metric) taken in the server side application.
+   * @description Column header for server timing descriptions in the network request details view of the Performance panel.
    */
   description: 'Description',
 } as const;

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

@@ -23,39 +23,39 @@ const MAX_URL_LENGTH = 60;
 
 const UIStrings = {
   /**
-   * @description Text that refers to the priority of network request
+   * @description Label for network request priority in the network request tooltip of the Performance panel.
    */
   priority: 'Priority',
   /**
-   * @description Text for the duration of a network request
+   * @description Label for total duration in the network request tooltip of the Performance panel.
    */
   duration: 'Duration',
   /**
-   * @description Text that refers to the queueing and connecting time of a network request
+   * @description Label for the queuing and connecting phase duration in the network request tooltip of the Performance panel.
    */
   queuingAndConnecting: 'Queuing and connecting',
   /**
-   * @description Text that refers to the request sent and waiting time of a network request
+   * @description Label for the request sent and waiting phase duration in the network request tooltip of the Performance panel.
    */
   requestSentAndWaiting: 'Request sent and waiting',
   /**
-   * @description Text that refers to the content downloading time of a network request
+   * @description Label for the content downloading phase duration in the network request tooltip of the Performance panel.
    */
   contentDownloading: 'Content downloading',
   /**
-   * @description Text that refers to the waiting on main thread time of a network request
+   * @description Label for the main thread waiting phase duration in the network request tooltip of the Performance panel.
    */
   waitingOnMainThread: 'Waiting on main thread',
   /**
-   * @description Text that refers to a network request is render-blocking
+   * @description Label indicating that the network request is render-blocking in the network request tooltip of the Performance panel.
    */
   renderBlocking: 'Render-blocking',
   /**
-   * @description Text to refer to the list of redirects.
+   * @description Header label for redirect details in the network request tooltip of the Performance panel.
    */
   redirects: 'Redirects',
   /**
-   * @description Cell title in Network Data Grid Node of the Network panel
+   * @description Tooltip text indicating that the network request was throttled in the Performance panel.
    * @example {Fast 4G} PH1
    */
   wasThrottled: 'Request was throttled ({PH1})',

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

@@ -17,27 +17,27 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Title for a column in a data table representing a site origin used for development
+   * @description Column header for development origin in the origin mapping table of the Performance panel.
    */
   developmentOrigin: 'Development origin',
   /**
-   * @description Title for a column in a data table representing a site origin used by real users in a production environment
+   * @description Column header for production origin in the origin mapping table of the Performance panel.
    */
   productionOrigin: 'Production origin',
   /**
-   * @description Warning message explaining that an input origin is not a valid origin or URL.
+   * @description Warning message explaining that an entered origin is not a valid origin or URL in the Performance panel.
    * @example {http//malformed.com} PH1
    */
-  invalidOrigin: '"{PH1}" is not a valid origin or URL.',
+  invalidOrigin: '"{PH1}" isn’t a valid origin or URL.',
   /**
-   * @description Warning message explaining that an development origin is already mapped to a productionOrigin.
+   * @description Warning message explaining that a development origin is already mapped to a production origin in the Performance panel.
    * @example {https://example.com} PH1
    */
   alreadyMapped: '"{PH1}" is already mapped to a production origin.',
   /**
-   * @description Warning message explaining that a page doesn't have enough real user data to show any information for. "Chrome UX Report" is a product name and should not be translated.
+   * @description Warning message explaining that a page does not have enough real user data in the Performance panel.
    */
-  pageHasNoData: 'The Chrome UX Report does not have sufficient real user data for this page.',
+  pageHasNoData: 'The Chrome UX Report doesn’t have enough real user data for this page.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/OriginMap.ts', UIStrings);

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

@@ -13,11 +13,11 @@ const {html, render} = Lit;
 
 const UIStrings = {
   /**
-   * @description prefix shown next to related insight chips
+   * @description Prefix shown next to related insight chips in the Performance panel.
    */
   insightKeyword: 'Insight',
   /**
-   * @description Prefix shown next to related insight chips and containing the insight name.
+   * @description Prefix shown next to related insight chips containing the insight name in the Performance panel.
    * @example {Improve image delivery} PH1
    */
   insightWithName: 'Insight: {PH1}',

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

@@ -27,62 +27,61 @@ const deleteAnnotationImageUrl =
 
 const UIStrings = {
   /**
-   * @description Title for entry label.
+   * @description Title for the annotations onboarding section in the Performance panel sidebar.
    */
   annotationGetStarted: 'Annotate a trace for yourself and others',
   /**
-   * @description Title for entry label.
+   * @description Header title for the item label tutorial in the Performance panel sidebar.
    */
   entryLabelTutorialTitle: 'Label an item',
   /**
-   * @description Text for how to create an entry label.
+   * @description Instructions for how to add an item label in the Performance panel.
    */
-  entryLabelTutorialDescription: 'Double-click or press Enter on an item and type to create an item label.',
+  entryLabelTutorialDescription: 'Double-click or press Enter on an item and type to add an item label.',
   /**
-   * @description  Title for diagram.
+   * @description Header title for the item connection tutorial in the Performance panel sidebar.
    */
   entryLinkTutorialTitle: 'Connect two items',
   /**
-   * @description Text for how to create a diagram between entries.
+   * @description Instructions for how to connect two items in the flame chart of the Performance panel.
    */
   entryLinkTutorialDescription:
       'Double-click on an item, click on the adjacent rightward arrow, then select the destination item.',
   /**
-   * @description  Title for time range.
+   * @description Header title for the time range tutorial in the Performance panel sidebar.
    */
   timeRangeTutorialTitle: 'Define a time range',
   /**
-   * @description Text for how to create a time range selection and add note.
+   * @description Instructions for how to add a time range annotation in the flame chart of the Performance panel.
    */
-  timeRangeTutorialDescription: 'Shift-drag in the flamechart then type to create a time range annotation.',
+  timeRangeTutorialDescription: 'Shift-drag in the flame chart, then type to add a time range annotation.',
   /**
-   * @description  Title for deleting annotations.
+   * @description Header title for the annotation deletion tutorial in the Performance panel sidebar.
    */
   deleteAnnotationTutorialTitle: 'Delete an annotation',
   /**
-   * @description Text for how to access an annotation delete function.
+   * @description Instructions for how to delete an annotation in the Performance panel sidebar.
    */
-  deleteAnnotationTutorialDescription:
-      'Hover over the list in the sidebar with Annotations tab selected to access the delete function.',
+  deleteAnnotationTutorialDescription: 'Hover over the list in the sidebar Annotations tab to delete an annotation.',
   /**
-   * @description Text used to describe the delete button to screen readers.
-   * @example {"A paint event annotated with the text hello world"} PH1
-   **/
+   * @description Accessible label for the delete annotation button in the Performance panel sidebar.
+   * @example {A paint event annotated with the text hello world} PH1
+   */
   deleteButton: 'Delete annotation: {PH1}',
   /**
-   * @description label used to describe an annotation on an entry
+   * @description Accessible label describing an item annotation in the Performance panel sidebar.
    * @example {Paint} PH1
-   * @example {"Hello world"} PH2
+   * @example {Hello world} PH2
    */
   entryLabelDescriptionLabel: 'A "{PH1}" event annotated with the text "{PH2}"',
   /**
-   * @description label used to describe a time range annotation
+   * @description Accessible label describing a time range annotation in the Performance panel sidebar.
    * @example {2.5 milliseconds} PH1
    * @example {13.5 milliseconds} PH2
    */
   timeRangeDescriptionLabel: 'A time range starting at {PH1} and ending at {PH2}',
   /**
-   * @description label used to describe a link from one entry to another.
+   * @description Accessible label describing a link between two events in the Performance panel sidebar.
    * @example {Paint} PH1
    * @example {Recalculate styles} PH2
    */

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

@@ -44,7 +44,7 @@ const INSIGHT_NAME_TO_COMPONENT = {
 
 const UIStrings = {
   /**
-   * @description Summary text for an expandable dropdown that contains all insights in a passing state.
+   * @description Summary text for an expandable dropdown that contains all insights in a passing state in the Performance panel sidebar.
    * @example {4} PH1
    */
   passedInsights: 'Passed insights ({PH1})',

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

@@ -15,11 +15,11 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Text for total
+   * @description Label for total duration in the summary view of the Performance panel.
    */
   total: 'Total',
   /**
-   * @description Range in Timeline Details View's Summary
+   * @description Time range in the summary view of the Performance panel.
    * @example {1ms} PH1
    * @example {10ms} PH2
    */

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

@@ -14,16 +14,12 @@ import type {CompareRating} from './MetricCompareStrings.js';
 
 const UIStrings = {
   /**
-   * @description ms is the short form of milli-seconds and the placeholder is a decimal number.
-   * The shortest form or abbreviation of milliseconds should be used, as there is
-   * limited room in this UI.
+   * @description Short formatted milliseconds string in the Performance panel.
    * @example {2.14} PH1
    */
   fms: '{PH1}[ms]()',
   /**
-   * @description s is short for seconds and the placeholder is a decimal number
-   * The shortest form or abbreviation of seconds should be used, as there is
-   * limited room in this UI.
+   * @description Short formatted seconds string in the Performance panel.
    * @example {2.14} PH1
    */
   fs: '{PH1}[s]()',

package/front_end/panels/timeline/components/breadcrumbsUI.css

@@ -17,8 +17,8 @@
 }
 
 .breadcrumb {
-  padding: 2px 6px;
-  border-radius: 4px;
+  padding: var(--sys-size-2) var(--sys-size-4);
+  border-radius: var(--sys-shape-corner-extra-small);
 }
 
 .breadcrumb:hover {
@@ -26,7 +26,7 @@
 }
 
 .range {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   white-space: nowrap;
 }
 

package/front_end/panels/timeline/components/exportTraceOptions.css

@@ -16,7 +16,7 @@
   }
 
   devtools-button {
-    height: 24px;
+    height: var(--sys-size-11);
   }
 
   .export-trace-explanation {

package/front_end/panels/timeline/components/fieldSettingsDialog.css

@@ -24,11 +24,11 @@ devtools-dialog {
 }
 
 .privacy-disclosure {
-  margin: 8px 0;
+  margin: var(--sys-size-5) 0;
 }
 
 .url-override {
-  margin: 8px 0;
+  margin: var(--sys-size-5) 0;
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -53,12 +53,12 @@ details > summary {
 }
 
 .origin-mapping-grid {
-  border: 1px solid var(--sys-color-divider);
-  margin-top: 8px;
+  border: var(--sys-size-1) solid var(--sys-color-divider);
+  margin-top: var(--sys-size-5);
 }
 
 .origin-mapping-description {
-  margin-bottom: 8px;
+  margin-bottom: var(--sys-size-5);
 }
 
 .origin-mapping-button-section {
@@ -73,7 +73,7 @@ details > summary {
 }
 
 .advanced-section-contents {
-  margin: 4px 0 14px;
+  margin: var(--sys-size-3) 0 var(--sys-size-7);
 }
 
 .buttons-section {
@@ -88,11 +88,11 @@ details > summary {
 }
 
 input[type="checkbox"] {
-  height: 12px;
-  width: 12px;
-  min-height: 12px;
-  min-width: 12px;
-  margin: 6px;
+  height: var(--sys-size-6);
+  width: var(--sys-size-6);
+  min-height: var(--sys-size-6);
+  min-width: var(--sys-size-6);
+  margin: var(--sys-size-4);
 }
 
 input[type="text"][disabled] {
@@ -100,7 +100,7 @@ input[type="text"][disabled] {
 }
 
 .warning {
-  margin: 2px 8px;
+  margin: var(--sys-size-2) var(--sys-size-5);
   color: var(--color-error-text);
 }
 
@@ -112,5 +112,5 @@ devtools-link {
 .divider {
   margin: 10px 0;
   border: none;
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/panels/timeline/components/ignoreListSetting.css

@@ -20,7 +20,7 @@
   }
 
   devtools-button {
-    height: 24px;
+    height: var(--sys-size-11);
   }
 
   &:not(:hover) devtools-button {
@@ -38,8 +38,8 @@
   .harmony-input[type="text"] {
     /* padding: 3px 6px; */
     /* height: 24px; */
-    border: 1px solid var(--sys-color-neutral-outline);
-    border-radius: 4px;
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+    border-radius: var(--sys-shape-corner-extra-small);
     outline: none;
 
     &.error-input,

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -27,37 +27,34 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Text to tell the user the estimated time or size savings for this insight. "&" means "and" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
+   * @description Estimated time or size savings for an insight in the Performance panel sidebar.
    * @example {401 ms} PH1
-   * @example {112 kB} PH1
    */
   estimatedSavings: 'Est savings: {PH1}',
   /**
-   * @description Text to tell the user the estimated time and size savings for this insight. "&" means "and", "Est" means "Estimated" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
+   * @description Estimated time and size savings for an insight in the Performance panel sidebar.
    * @example {401 ms} PH1
    * @example {112 kB} PH2
    */
   estimatedSavingsTimingAndBytes: 'Est savings: {PH1} & {PH2}',
   /**
-   * @description Text to tell the user the estimated time savings for this insight that is used for screen readers.
+   * @description Accessible label for the estimated time savings of an insight in the Performance panel sidebar.
    * @example {401 ms} PH1
-   * @example {112 kB} PH1
    */
   estimatedSavingsAriaTiming: 'Estimated savings for this insight: {PH1}',
   /**
-   * @description Text to tell the user the estimated size savings for this insight that is used for screen readers. Value is in terms of "transfer size", aka encoded/compressed data length.
-   * @example {401 ms} PH1
+   * @description Accessible label for the estimated size savings of an insight in the Performance panel sidebar.
    * @example {112 kB} PH1
    */
   estimatedSavingsAriaBytes: 'Estimated savings for this insight: {PH1} transfer size',
   /**
-   * @description Text to tell the user the estimated time and size savings for this insight that is used for screen readers.
+   * @description Accessible label for both estimated time and size savings of an insight in the Performance panel sidebar.
    * @example {401 ms} PH1
    * @example {112 kB} PH2
    */
   estimatedSavingsTimingAndBytesAria: 'Estimated savings for this insight: {PH1} and {PH2} transfer size',
   /**
-   * @description Used for screen-readers as a label on the button to expand an insight to view details
+   * @description Accessible label for the button to expand an insight to view details in the Performance panel sidebar.
    * @example {LCP breakdown} PH1
    */
   viewDetails: 'View details for {PH1} insight.',

package/front_end/panels/timeline/components/insights/Checklist.ts

@@ -19,12 +19,12 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Text for a screen-reader label to tell the user that the icon represents a successful insight check
+   * @description Accessible label indicating that an insight checklist check passed in the Performance panel sidebar.
    * @example {Server response time} PH1
    */
   successAriaLabel: 'Insight check passed: {PH1}',
   /**
-   * @description Text for a screen-reader label to tell the user that the icon represents an unsuccessful insight check
+   * @description Accessible label indicating that an insight checklist check failed in the Performance panel sidebar.
    * @example {Server response time} PH1
    */
   failedAriaLabel: 'Insight check failed: {PH1}',

package/front_end/panels/timeline/components/insights/Table.ts

@@ -13,7 +13,7 @@ import tableStyles from './table.css.js';
 
 const UIStrings = {
   /**
-   * @description Table row value representing the remaining items not shown in the table due to size constraints. This row will always represent at least 2 items.
+   * @description Table row label representing the remaining items not shown in the table in the Performance panel sidebar.
    * @example {5} PH1
    */
   others: '{PH1} others',