chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/animation/AnimationGroupPreviewUI.ts

@@ -124,7 +124,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                     {offset: 0.9, width: '100%', opacity: 1},
                     {offset: 1, width: '100%', opacity: 0},
                   ],
-                  {duration: 200, easing: 'cubic-bezier(0, 0, 0.2, 1)'}
+                  {duration: 200, easing: 'cubic-bezier(0, 0, 0.2, 1)'},
                 );
               };
             }
@@ -195,34 +195,33 @@ export class AnimationGroupPreviewUI extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
-    this.#view(
-        {
-          isScrollDrivenAnimationGroup: this.#config.animationGroup.isScrollDriven(),
-          isPreviewAnimationDisabled: this.#previewAnimationDisabled,
-          isSelected: this.#selected,
-          isPaused: this.#paused,
-          isFocusable: this.#focusable,
-          label: this.#config.label,
-          animationGroupDuration: this.#config.animationGroup.groupDuration(),
-          animations: this.#config.animationGroup.animations().slice(0, MAX_ANIMATION_LINES_TO_SHOW),
-          onPreviewAnimationEnd: () => {
-            this.#previewAnimationDisabled = true;
-            this.requestUpdate();
-          },
-          onRemoveAnimationGroup: () => {
-            this.#config.onRemoveAnimationGroup();
-          },
-          onSelectAnimationGroup: () => {
-            this.#config.onSelectAnimationGroup();
-          },
-          onFocusNextGroup: () => {
-            this.#config.onFocusNextGroup();
-          },
-          onFocusPreviousGroup: () => {
-            this.#config.onFocusPreviousGroup();
-          }
-        },
-        this.#viewOutput, this.contentElement);
+    this.#view({
+      isScrollDrivenAnimationGroup: this.#config.animationGroup.isScrollDriven(),
+      isPreviewAnimationDisabled: this.#previewAnimationDisabled,
+      isSelected: this.#selected,
+      isPaused: this.#paused,
+      isFocusable: this.#focusable,
+      label: this.#config.label,
+      animationGroupDuration: this.#config.animationGroup.groupDuration(),
+      animations: this.#config.animationGroup.animations().slice(0, MAX_ANIMATION_LINES_TO_SHOW),
+      onPreviewAnimationEnd: () => {
+        this.#previewAnimationDisabled = true;
+        this.requestUpdate();
+      },
+      onRemoveAnimationGroup: () => {
+        this.#config.onRemoveAnimationGroup();
+      },
+      onSelectAnimationGroup: () => {
+        this.#config.onSelectAnimationGroup();
+      },
+      onFocusNextGroup: () => {
+        this.#config.onFocusNextGroup();
+      },
+      onFocusPreviousGroup: () => {
+        this.#config.onFocusPreviousGroup();
+      },
+    },
+               this.#viewOutput, this.contentElement);
   }
 
   override focus(): void {

package/front_end/panels/animation/AnimationTimeline.ts

@@ -470,7 +470,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
           },
           onSetPlaybackRateClick: (playbackRate: number) => {
             this.setPlaybackRate(playbackRate);
-          }
+          },
         },
         undefined, this.#toolbarViewContainer);
   }
@@ -698,7 +698,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
       },
       onFocusPreviousGroup: () => {
         this.focusNextGroup(group, /* focusPrevious */ true);
-      }
+      },
     });
 
     const previewUiContainer = document.createElement('div');
@@ -1216,7 +1216,7 @@ export class NodeUI {
     const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {
       onClick: () => {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.AnimatedNodeDescriptionClicked);
-      }
+      },
     });
     render(link, this.#description, {host: this});
     if (!node.ownerDocument) {

package/front_end/panels/animation/animationTimeline.css

@@ -44,13 +44,11 @@
 }
 
 path.animation-keyframe {
-  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   fill-opacity: 20%;
 }
 
 .animation-node-selected path.animation-keyframe,
 svg.animation-ui g:first-child:hover path.animation-keyframe {
-  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   fill-opacity: 40%;
 }
 

package/front_end/panels/application/AppManifestView.ts

@@ -1098,7 +1098,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     ${isEmpty ? widget(UI.EmptyWidget.EmptyWidget, {
       header: i18nString(UIStrings.noManifestDetected),
       text: i18nString(UIStrings.manifestDescription),
-      link: 'https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString
+      link: 'https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString,
     }) : html`
     <devtools-report .data=${{reportTitle: i18nString(UIStrings.appManifest), reportUrl: url}}>
       ${renderErrors(warnings, errors, imageErrors, output)}

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -296,7 +296,7 @@ const UIStrings = {
   /**
    * @description Description text in the Application Panel describing a frame's resources
    */
-  resourceDescription: 'On this page you can view the frame’s resources.'
+  resourceDescription: 'On this page you can view the frame’s resources.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ApplicationPanelSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/application/CookieItemsView.ts

@@ -230,7 +230,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                  </devtools-widget>` :
             html`<devtools-widget ${widget(UI.EmptyWidget.EmptyWidget, {
               header: i18nString(UIStrings.noCookieSelected),
-              text: i18nString(UIStrings.selectACookieToPreviewItsValue)
+              text: i18nString(UIStrings.selectACookieToPreviewItsValue),
             })}></devtools-widget>`}
         </devtools-widget>
       </devtools-split-view>

package/front_end/panels/application/CrashReportContextView.ts

@@ -107,7 +107,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
                          .iconName=${'refresh'}
                          .variant=${Buttons.Button.Variant.TOOLBAR}
                          jslog=${VisualLogging.action('refresh').track({
-                           click: true
+                           click: true,
                          })}>
         </devtools-button>
         <devtools-toolbar-input type="filter" placeholder=${i18nString(UIStrings.filterByText)}
@@ -127,8 +127,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
                     data: {
                       entries: frame.entries.map(e => ({key: e.key, value: e.value})),
                       selectedKey: input.selectedKey || undefined,
-                      filters: input.filters
-                    }
+                      filters: input.filters,
+                    },
                   })}
                   @select=${(e: CustomEvent<string>) => input.onRowSelected(e.detail)}>
                 </devtools-widget>

package/front_end/panels/application/DeviceBoundSessionsModel.ts

@@ -155,7 +155,7 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       sessionAndEvent = {
         isSessionTerminated: false,
         hasErrors: false,
-        eventsById: new Map<string, EventWithTimestamp>()
+        eventsById: new Map<string, EventWithTimestamp>(),
       };
       sessionIdToSessionMap.set(sessionId, sessionAndEvent);
     }

package/front_end/panels/application/DeviceBoundSessionsTreeElement.ts

@@ -12,7 +12,7 @@ import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {
   DeviceBoundSessionModelEvents,
   type DeviceBoundSessionModelEventTypes,
-  type DeviceBoundSessionsModel
+  type DeviceBoundSessionsModel,
 } from './DeviceBoundSessionsModel.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
 

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -16,7 +16,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {
   DeviceBoundSessionModelEvents,
   type DeviceBoundSessionsModel,
-  type SessionAndEvents
+  type SessionAndEvents,
 } from './DeviceBoundSessionsModel.js';
 import deviceBoundSessionsViewStyles from './deviceBoundSessionsView.css.js';
 const {widget} = UI.Widget;

package/front_end/panels/application/IndexedDBViews.ts

@@ -293,7 +293,7 @@ const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
           <td>${widget(ObjectPropertiesSectionWidget, {value: entry.key})}</td>
           ${input.isIndex ? html`<td>${widget(ObjectPropertiesSectionWidget, {value: entry.primaryKey})}</td>` : nothing}
           <td class="value-column">${widget(ObjectPropertiesSectionWidget, {value: entry.value})}</td>
-        </tr>`
+        </tr>`,
       )}
     </table>`}>
   </devtools-data-grid>`;

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -229,7 +229,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     const viewOutput = {
       set toolbar(toolbar: StorageItemsToolbar) {
         that.#toolbar = toolbar;
-      }
+      },
     };
     const viewInput = {
       items: this.#items,

package/front_end/panels/application/OriginTrialTreeView.ts

@@ -238,7 +238,7 @@ export class OriginTrialTokenRows extends UI.Widget.Widget {
         name: i18nString(UIStrings.expiryTime),
         value: {
           text: this.#dateFormatter.format(this.#tokenWithStatus.parsedToken.expiryTime * 1000),
-          hasError: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Expired
+          hasError: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Expired,
         },
       },
       {

package/front_end/panels/application/ServiceWorkersView.ts

@@ -288,9 +288,9 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
            container: {
              classes: [
                'service-worker-list',
-               (input.sections.length > 0 ? 'service-worker-has-current' : 'service-worker-list-empty')
-             ]
-           }
+               (input.sections.length > 0 ? 'service-worker-has-current' : 'service-worker-list-empty'),
+             ],
+           },
          });
   // clang-format on
 };
@@ -502,7 +502,7 @@ function renderHeaderButtons(input: SectionViewInput): LitTemplate {
     <devtools-button .data=${{
           variant: Buttons.Button.Variant.TEXT,
           title: i18nString(UIStrings.networkRequests),
-          jslogContext: 'show-network-requests'
+          jslogContext: 'show-network-requests',
         } as Buttons.Button.ButtonData}
         .disabled=${input.isDeleted}
         @click=${input.onNetworkRequests}>
@@ -511,7 +511,7 @@ function renderHeaderButtons(input: SectionViewInput): LitTemplate {
     <devtools-button .data=${{
           variant: Buttons.Button.Variant.TEXT,
           title: i18nString(UIStrings.update),
-          jslogContext: 'update'
+          jslogContext: 'update',
         } as Buttons.Button.ButtonData}
         .disabled=${input.isDeleted}
         @click=${input.onUpdate}>
@@ -520,7 +520,7 @@ function renderHeaderButtons(input: SectionViewInput): LitTemplate {
     <devtools-button .data=${{
           variant: Buttons.Button.Variant.TEXT,
           title: i18nString(UIStrings.unregisterServiceWorker),
-          jslogContext: 'unregister'
+          jslogContext: 'unregister',
         } as Buttons.Button.ButtonData}
         .disabled=${input.isDeleted}
         @click=${input.onUnregister}>

package/front_end/panels/application/StorageBucketsTreeElement.ts

@@ -37,7 +37,7 @@ const UIStrings = {
    * deleted independently. https://developer.chrome.com/docs/web-platform/storage-buckets.
    */
   storageBucketsDescription:
-      'On this page you can view and delete storage buckets, and their associated `Storage APIs`.'
+      'On this page you can view and delete storage buckets, and their associated `Storage APIs`.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/StorageBucketsTreeElement.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/application/StorageItemsToolbar.ts

@@ -59,7 +59,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElem
                         jslog=${VisualLogging.toolbar()}>
         <devtools-button title=${i18nString(UIStrings.refresh)}
                          jslog=${VisualLogging.action('storage-items-view.refresh').track({
-        click: true
+        click: true,
       })}
                          @click=${input.onRefresh}
                          .iconName=${'refresh'}
@@ -74,7 +74,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElem
                          id=storage-items-delete-all
                          ?disabled=${!input.deleteAllButtonEnabled}
                          jslog=${VisualLogging.action('storage-items-view.clear-all').track({
-        click: true
+        click: true,
       })}
                          .iconName=${input.deleteAllButtonIconName}
                          .variant=${Buttons.Button.Variant.TOOLBAR}></devtools-button>
@@ -82,7 +82,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElem
                          @click=${input.onDeleteSelected}
                          ?disabled=${!input.deleteSelectedButtonDisabled}
                          jslog=${VisualLogging.action('storage-items-view.delete-selected').track({
-        click: true
+        click: true,
       })}
                          .iconName=${'cross'}
                          .variant=${Buttons.Button.Variant.TOOLBAR}></devtools-button>

package/front_end/panels/application/WebMCPView.ts

@@ -338,8 +338,10 @@ function toolStatsIcon(status: Protocol.WebMCP.InvocationStatus|undefined): {ico
 function getIconGroupsFromStats(toolStats?: ToolStats):
     Array<IconButton.IconButton.IconWithTextData&{status: Protocol.WebMCP.InvocationStatus | undefined}> {
   const status = [
-    Protocol.WebMCP.InvocationStatus.Completed, Protocol.WebMCP.InvocationStatus.Error,
-    Protocol.WebMCP.InvocationStatus.Canceled, undefined
+    Protocol.WebMCP.InvocationStatus.Completed,
+    Protocol.WebMCP.InvocationStatus.Error,
+    Protocol.WebMCP.InvocationStatus.Canceled,
+    undefined,
   ];
   return status
       .map(status => ({
@@ -691,7 +693,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                 ...getJSONEditorParameters(input.selectedTool.tool),
                 commandToDisplay: {
                   command: input.selectedTool.tool.name,
-                  parameters: input.selectedTool.parameters || {}
+                  parameters: input.selectedTool.parameters || {},
                 },
                 })}
               ${UI.Widget.widgetRef(ProtocolMonitor.JSONEditor.JSONEditor, e => { editorWidget = e; })}
@@ -709,7 +711,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                     data: {
                       command: input.selectedTool.tool.name,
                       parameters: params,
-                    } as ProtocolMonitor.JSONEditor.Command
+                    } as ProtocolMonitor.JSONEditor.Command,
                   });
                 }
               }}>Run tool</devtools-button>
@@ -1145,7 +1147,7 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
           <devtools-node-text .data=${{
               nodeId: origin.getAttribute('id') || undefined,
               nodeTitle: origin.nodeNameInCorrectCase(),
-              nodeClasses: origin.getAttribute('class')?.split(/\s+/).filter(s => Boolean(s))
+              nodeClasses: origin.getAttribute('class')?.split(/\s+/).filter(s => Boolean(s)),
             } as NodeText.NodeText.NodeTextData}>
           </devtools-node-text>
         </span>

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

@@ -102,6 +102,7 @@ interface AdFrameNodeData {
   initialOrigin: string;
   networkBytes: string;
   cpuTime: string;
+  revealFrame: (e: Event) => void;
 }
 
 export interface ViewInput {
@@ -212,7 +213,15 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             </tr>
             ${input.adFrames.map(frame => html`
               <tr>
-                <td title=${frame.elementId}>${frame.elementId}</td>
+                <td title=${frame.elementId}>
+                  ${frame.elementId
+                    ? html`
+                        <button class="text-button link-style devtools-link" @click=${frame.revealFrame}>
+                          ${frame.elementId}
+                        </button>
+                      `
+                    : Lit.nothing}
+                </td>
                 <td title=${frame.initialOrigin}>${frame.initialOrigin}</td>
                 <td title=${frame.cpuTime}>${frame.cpuTime}</td>
                 <td title=${frame.networkBytes}>${frame.networkBytes}</td>
@@ -365,11 +374,7 @@ export class AdsView extends UI.Widget.Widget {
     if (!frame) {
       return undefined;
     }
-    const domModel = frame.resourceTreeModel().target().model(SDK.DOMModel.DOMModel);
-    if (!domModel) {
-      return undefined;
-    }
-    const deferredNode = await domModel.getOwnerNodeForFrame(frameId);
+    const deferredNode = await frame.getOwnerDeferredDOMNode();
     if (deferredNode) {
       const node = await deferredNode.resolvePromise();
       return node?.getAttribute('id') || null;
@@ -403,11 +408,21 @@ export class AdsView extends UI.Widget.Widget {
           (this.#adIframeElementIds.get(frameId) || i18nString(UIStrings.unnamed)) :
           '';
 
+      const revealFrame = (e: Event): void => {
+        e.preventDefault();
+        e.stopPropagation();
+        const frameToReveal = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
+        if (frameToReveal) {
+          void Common.Revealer.reveal(frameToReveal);
+        }
+      };
+
       adFramesArray.push({
         elementId: elementIdText,
         initialOrigin: frame.initialOrigin || '',
         cpuTime: formatCpu(frame.cpuTime),
         networkBytes: formatNetwork(frame.networkBytes),
+        revealFrame,
       });
     }
 

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

@@ -362,7 +362,7 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
     title: i18nString(UIStrings.framesPerIssue, {n: frames.length}),
   } as ExpandableList.ExpandableList.ExpandableListData}
         jslog=${VisualLogging.treeItem().track({
-    resize: true
+    resize: true,
   })}></devtools-expandable-list>
       </div>
     `;
@@ -394,7 +394,7 @@ function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlo
                                columnNumber: detail.columnNumber,
                                showColumnNumber: true,
                                maxLength: maxLengthForDisplayedURLs,
-                             }
+                             },
                            })}`));
   return html`
       <div class="details-list">

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

@@ -17,7 +17,7 @@ import {
   type LitTemplate,
   nothing,
   render,
-  type TemplateResult
+  type TemplateResult,
 } from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 

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

@@ -244,7 +244,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
         @click=${revealBucket}
         title=${name}
         jslog=${VisualLogging.action('storage-bucket').track({
-        click: true
+        click: true,
       })}
       >${name}</devtools-link>`;
     };

package/front_end/panels/application/preloading/components/MismatchedPreloadingGrid.ts

@@ -124,7 +124,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, never>, t
                         case Diff.Diff.Operation.Insert:
                           return html`<span style=${styleMap({
                             color: 'var(--sys-color-green)',
-                            'text-decoration': 'line-through'
+                            'text-decoration': 'line-through',
                           })}
                               >${s}</span>`;
                         case Diff.Diff.Operation.Delete:
@@ -132,7 +132,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, never>, t
                         case Diff.Diff.Operation.Edit:
                           return html`<span style=${styleMap({
                             color: 'var(--sys-color-green',
-                            'text-decoration': 'line-through'
+                            'text-decoration': 'line-through',
                           })}
                           >${s}</span>`;
                         default:

package/front_end/panels/application/preloading/components/PreloadingDetailsReportView.ts

@@ -273,7 +273,8 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
   #isPrerenderLike(speculationAction: Protocol.Preload.SpeculationAction): boolean {
     return [
-      Protocol.Preload.SpeculationAction.Prerender, Protocol.Preload.SpeculationAction.PrerenderUntilScript
+      Protocol.Preload.SpeculationAction.Prerender,
+      Protocol.Preload.SpeculationAction.PrerenderUntilScript,
     ].includes(speculationAction);
   }
 

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -332,7 +332,7 @@ const UIStrings = {
    * Description text for PrerenderFinalStatus::kSpeculationRuleRemoved.
    */
   prerenderFinalStatusSpeculationRuleRemoved:
-      'The prerendered page was unloaded because the initiating page removed the corresponding prerender rule from <script type="speculationrules">.',
+      'The prerendered page was unloaded because the initiating page removed the corresponding prerender rule from `<script type="speculationrules">`.',
   /**
    * Description text for PrerenderFinalStatus::kActivatedWithAuxiliaryBrowsingContexts.
    */
@@ -342,7 +342,7 @@ const UIStrings = {
    * Description text for PrerenderFinalStatus::kMaxNumOfRunningEagerPrerendersExceeded.
    */
   prerenderFinalStatusMaxNumOfRunningEagerPrerendersExceeded:
-      'The prerender whose eagerness is "eager" was not performed because the initiating page already has too many prerenders ongoing. Remove other speculation rules with "eager" to enable further prerendering.',
+      'The prerender whose eagerness is "`eager`" was not performed because the initiating page already has too many prerenders ongoing. Remove other speculation rules with "`eager`" to enable further prerendering.',
   /**
    * Description text for PrerenderFinalStatus::kMaxNumOfRunningEmbedderPrerendersExceeded.
    */
@@ -352,7 +352,7 @@ const UIStrings = {
    * Description text for PrerenderFinalStatus::kMaxNumOfRunningNonEagerPrerendersExceeded.
    */
   prerenderFinalStatusMaxNumOfRunningNonEagerPrerendersExceeded:
-      'The old non-eager prerender (with a "moderate" or "conservative" eagerness and triggered by hovering or clicking links) was automatically canceled due to starting a new non-eager prerender. It can be retriggered by interacting with the link again.',
+      'The old non-eager prerender (with a "`moderate`" or "`conservative`" eagerness and triggered by hovering or clicking links) was automatically canceled due to starting a new non-eager prerender. It can be retriggered by interacting with the link again.',
   /**
    * Description text for PrenderFinalStatus::kPrerenderingUrlHasEffectiveUrl.
    */

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -451,7 +451,8 @@ export class UsedPreloadingView extends UI.Widget.VBox {
 
   #isPrerenderLike(speculationAction: Protocol.Preload.SpeculationAction): boolean {
     return [
-      Protocol.Preload.SpeculationAction.Prerender, Protocol.Preload.SpeculationAction.PrerenderUntilScript
+      Protocol.Preload.SpeculationAction.Prerender,
+      Protocol.Preload.SpeculationAction.PrerenderUntilScript,
     ].includes(speculationAction);
   }
 

package/front_end/panels/autofill/AutofillView.ts

@@ -209,7 +209,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
                             Lit.nothing}
                   </td>
                   <td>"${field.value}"</td>
-                </tr>`
+                </tr>`,
             )}
           </table>
         </devtools-data-grid>

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -179,7 +179,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           </div>`}
       </div>
     `,
-    target
+    target,
   );
           // clang-format on
 };

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -170,7 +170,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
             @cancel=${cancel}>
         </devtools-prompt>
       `,
-      inputElementContainer
+      inputElementContainer,
     );
     // clang-format on
   }
@@ -282,7 +282,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
           </devtools-checkbox>
         </div>
       `,
-      listItemElement
+      listItemElement,
     );
     // clang-format on
 

package/front_end/panels/changes/ChangesSidebar.ts

@@ -17,7 +17,7 @@ import changesSidebarStyles from './changesSidebar.css.js';
 
 const UIStrings = {
   /**
-   * @description Name of an item from source map
+   * @description Tooltip title for a file item in the Changes sidebar when the file is generated from a source map.
    * @example {compile.html} PH1
    */
   sFromSourceMap: '{PH1} (from source map)',
@@ -95,7 +95,7 @@ export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
     const input: ViewInput = {
       onSelect: uiSourceCode => this.#selectionChanged(uiSourceCode),
       sourceCodes: this.#sourceCodes,
-      selectedSourceCode: this.#selectedUISourceCode
+      selectedSourceCode: this.#selectedUISourceCode,
     };
     this.#view(input, {}, this.contentElement);
   }

package/front_end/panels/changes/ChangesView.ts

@@ -20,14 +20,13 @@ const CHANGES_VIEW_URL = 'https://developer.chrome.com/docs/devtools/changes' as
 
 const UIStrings = {
   /**
-   * @description Text in Changes View of the Changes tab if no change has been made so far.
+   * @description Title shown in the Changes panel when no code changes have been made.
    */
   noChanges: 'No changes yet',
   /**
-   * @description Text in Changes View of the Changes tab to explain the Changes panel.
+   * @description Description text shown in the Changes panel explaining how to track code changes.
    */
-  changesViewDescription: 'On this page you can track code changes made within DevTools.',
-
+  changesViewDescription: 'Track code changes made within DevTools.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -58,7 +57,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <div class=diff-container role=tabpanel ?hidden=${input.workspaceDiff.modifiedUISourceCodes().length === 0}>
             ${widget(CombinedDiffView.CombinedDiffView, {
                 selectedFileUrl: input.selectedSourceCode?.url(),
-                workspaceDiff: input.workspaceDiff
+                workspaceDiff: input.workspaceDiff,
             })}
           </div>
         </div>

package/front_end/panels/changes/CombinedDiffView.ts

@@ -25,11 +25,11 @@ const {html, Directives: {classMap}} = Lit;
 
 const UIStrings = {
   /**
-   * @description The title of the button after it was pressed and the text was copied to clipboard.
+   * @description Text shown after copying code changes to the clipboard.
    */
   copied: 'Copied to clipboard',
   /**
-   * @description The title of the copy file to clipboard button
+   * @description Title of the button to copy file content to the clipboard.
    * @example {index.css} PH1
    */
   copyFile: 'Copy file {PH1} to clipboard',
@@ -242,7 +242,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
       if (fileSystemUiSourceCode) {
         displayText = [
           fileSystemUiSourceCode.project().displayName(),
-          ...Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.relativePath(fileSystemUiSourceCode)
+          ...Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.relativePath(fileSystemUiSourceCode),
         ].join('/');
       }
       return {

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

@@ -11,11 +11,11 @@ let loadedChangesModule: (typeof Changes|undefined);
 
 const UIStrings = {
   /**
-   * @description Title of the 'Changes' tool in the bottom drawer
+   * @description Title of the Changes panel.
    */
   changes: 'Changes',
   /**
-   * @description Command for showing the 'Changes' tool in the bottom drawer
+   * @description Command for showing the Changes panel.
    */
   showChanges: 'Show Changes',
 } as const;