chrome-devtools-frontend 1.0.1702515 → 1.0.1704172

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -119,9 +119,11 @@ export async function findScopeChainForDebuggerScope(scope: SDK.DebuggerModel.Sc
   const {scopeTree, text} = scopeTreeAndText;
 
   // Compute the offset within the scope tree coordinate space.
+  const start = script.rawLocationToRelativeLocation(startLocation);
+  const end = script.rawLocationToRelativeLocation(endLocation);
   const scopeOffsets = {
-    start: text.offsetFromPosition(startLocation.lineNumber, startLocation.columnNumber),
-    end: text.offsetFromPosition(endLocation.lineNumber, endLocation.columnNumber),
+    start: text.offsetFromPosition(start.lineNumber, start.columnNumber),
+    end: text.offsetFromPosition(end.lineNumber, end.columnNumber),
   };
 
   return findScopeChain(scopeTree, scopeOffsets);
@@ -482,7 +484,8 @@ export const allVariablesAtPosition =
           }
 
           const {scopeTree, text} = scopeTreeAndText;
-          const locationOffset = text.offsetFromPosition(location.lineNumber, location.columnNumber);
+          const {lineNumber, columnNumber} = script.rawLocationToRelativeLocation(location);
+          const locationOffset = text.offsetFromPosition(lineNumber, columnNumber);
           const scopeChain = findScopeChain(scopeTree, {start: locationOffset, end: locationOffset});
 
           while (scopeChain.length > 0) {
@@ -746,8 +749,8 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
  * start or if the function scope does not start with a left paren (e.g., arrow
  * function with one parameter), the resolution returns null.
  **/
-async function getFunctionNameFromScopeStart(
-    script: SDK.Script.Script, lineNumber: number, columnNumber: number): Promise<string|null> {
+async function getFunctionNameFromScopeStart(script: SDK.Script.Script, rawLineNumber: number,
+                                             rawColumnNumber: number): Promise<string|null> {
   // To reduce the overhead of resolving function names,
   // we check for source maps first and immediately leave
   // this function if the script doesn't have a sourcemap.
@@ -756,6 +759,11 @@ async function getFunctionNameFromScopeStart(
     return null;
   }
 
+  // The source map and the script text are relative to the start of the script, whereas
+  // raw V8 positions in inline scripts are relative to the start of the document.
+  const {lineNumber, columnNumber} =
+      script.rawLocationToRelativeLocation({lineNumber: rawLineNumber, columnNumber: rawColumnNumber});
+
   const scopeName = sourceMap.findOriginalFunctionName({line: lineNumber, column: columnNumber});
   if (scopeName !== null) {
     return scopeName;

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingListView.ts

@@ -4,6 +4,7 @@
 
 import '../../ui/legacy/components/data_grid/data_grid.js';
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -45,6 +46,14 @@ const UIStrings = {
    * @description Accessible title for the announcements data grid.
    */
   ariaLiveRecordingList: 'Accessibility Announcements',
+  /**
+   * @description Context menu item for copying the announcement message text to the clipboard.
+   */
+  copyMessage: 'Copy message',
+  /**
+   * @description Context menu item for copying the announcement element HTML snippet to the clipboard.
+   */
+  copyElementHtml: 'Copy element HTML',
 } as const;
 const str_ =
     i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityAnnouncementRecordingListView.ts', UIStrings);
@@ -53,6 +62,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface ViewInput {
   items: readonly A11yAnnouncement[];
   selectedItem: A11yAnnouncement|null;
+  onContextMenu: (menu: UI.ContextMenu.ContextMenu, item: A11yAnnouncement) => void;
   onSelect: (item: A11yAnnouncement) => void;
   onDeselect: () => void;
 }
@@ -92,7 +102,12 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           return html`
             <tr
               ?selected=${item === input.selectedItem}
-              @select=${() => input.onSelect(item)}>
+              @select=${() => input.onSelect(item)}
+              @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => {
+                if (e.detail instanceof UI.ContextMenu.ContextMenu) {
+                  input.onContextMenu(e.detail, item);
+                }
+              }}>
               <td data-value=${item.time}>
                 <span>${timeString}</span>
               </td>
@@ -159,10 +174,27 @@ export class AccessibilityAnnouncementRecordingListView extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
+  #populateContextMenu(contextMenu: UI.ContextMenu.ContextMenu, item: A11yAnnouncement): void {
+    if (item.message) {
+      contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyMessage), () => {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(item.message);
+      }, {jslogContext: 'copy-message'});
+    }
+
+    if (item.element) {
+      contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyElementHtml), () => {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(item.element);
+      }, {jslogContext: 'copy-element-html'});
+    }
+  }
+
   override performUpdate(): void {
     const input: ViewInput = {
       items: this.#items,
       selectedItem: this.#selectedItem,
+      onContextMenu: (contextMenu: UI.ContextMenu.ContextMenu, item: A11yAnnouncement) => {
+        this.#populateContextMenu(contextMenu, item);
+      },
       onSelect: (item: A11yAnnouncement) => {
         this.selectedItem = item;
         this.#onSelect?.(item);

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -744,14 +744,6 @@ export function validateAndSanitizeAnnouncement(payload: unknown): A11yAnnouncem
   };
 }
 
-export function escapeCsvValue(val: string): string {
-  const escaped = val.replace(/"/g, '""');
-  if (escaped.includes(',') || escaped.includes('\n') || escaped.includes('\r') || escaped.includes('"')) {
-    return `"${escaped}"`;
-  }
-  return escaped;
-}
-
 export function buildCsvContent(announcements: readonly A11yAnnouncement[]): string {
   const csvRows: string[] = [];
   csvRows.push(['Time', 'API', 'Politeness', 'Message'].join(','));
@@ -759,10 +751,10 @@ export function buildCsvContent(announcements: readonly A11yAnnouncement[]): str
   for (const item of announcements) {
     const timeString = new Date(item.time).toISOString();
     const row = [
-      escapeCsvValue(timeString),
-      escapeCsvValue(item.api),
-      escapeCsvValue(item.politeness),
-      escapeCsvValue(item.message),
+      Platform.StringUtilities.escapeCsvCell(timeString),
+      Platform.StringUtilities.escapeCsvCell(item.api),
+      Platform.StringUtilities.escapeCsvCell(item.politeness),
+      Platform.StringUtilities.escapeCsvCell(item.message),
     ];
     csvRows.push(row.join(','));
   }

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -87,207 +87,205 @@ import {WebMCPTreeElement} from './WebMCPTreeElement.js';
 
 const UIStrings = {
   /**
-   * @description Text of a context menu item to start a chat with AI
+   * @description Context menu item to start a chat with AI in the Application panel sidebar.
    */
   startAChat: 'Start a chat',
   /**
-   * @description Text of a context menu item to explain contents of a local/session storage bucket with AI
+   * @description Context menu item to explain storage with AI in the Application panel sidebar.
    */
   explainStorage: 'Explain storage',
   /**
-   * @description Text of a context menu item to explain web cookies with AI
+   * @description Context menu item to explain cookies with AI in the Application panel sidebar.
    */
   explainCookies: 'Explain cookies',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Section header for the application section in the sidebar of the Application panel.
    */
   application: 'Application',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Tree item label for ads in the sidebar of the Application panel.
    */
   ads: 'Ads',
   /**
-   * @description Tooltip for the experimental icon in the Ads panel
+   * @description Tooltip for the experimental feature icon next to the ads item in the sidebar of the Application panel.
    */
   experimental: 'Experimental',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Tree item label for storage in the sidebar of the Application panel.
    */
   storage: 'Storage',
   /**
-   * @description Text in Application Panelthat shows if no local storage
-   *             can be shown.
+   * @description Empty state text displayed when no local storage is detected in the Application panel.
    */
   noLocalStorage: 'No local storage detected',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Tree item label for local storage in the sidebar of the Application panel.
    */
   localStorage: 'Local storage',
   /**
-   * @description Text in the Application panel describing the local storage tab.
+   * @description Informational text describing the local storage view in the Application panel.
    */
   localStorageDescription: 'On this page you can view, add, edit, and delete local storage key-value pairs',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Tree item label for session storage in the sidebar of the Application panel.
    */
   sessionStorage: 'Session storage',
   /**
-   * @description Text in Application Panel if no session storage can be shown.
+   * @description Empty state text displayed when no session storage is detected in the Application panel.
    */
   noSessionStorage: 'No session storage detected',
   /**
-   * @description Text in the Application panel describing the session storage tab.
+   * @description Informational text describing the session storage view in the Application panel.
    */
   sessionStorageDescription: 'On this page you can view, add, edit, and delete session storage key-value pairs',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Tree item label for extension storage in the sidebar of the Application panel.
    */
   extensionStorage: 'Extension storage',
   /**
-   * @description Text in Application Panel if no extension storage can be shown
+   * @description Empty state text displayed when no extension storage is detected in the Application panel.
    */
   noExtensionStorage: 'No extension storage detected',
   /**
-   * @description Text in the Application panel describing the extension storage tab.
+   * @description Informational text describing the extension storage view in the Application panel.
    */
   extensionStorageDescription: 'On this page you can view, add, edit, and delete extension storage key-value pairs',
   /**
-   * @description Text for extension session storage in Application panel
+   * @description Label for extension session storage in the Application panel.
    */
   extensionSessionStorage: 'Session',
   /**
-   * @description Text for extension local storage in Application panel
+   * @description Label for extension local storage in the Application panel.
    */
   extensionLocalStorage: 'Local',
   /**
-   * @description Text for extension sync storage in Application panel
+   * @description Label for extension sync storage in the Application panel.
    */
   extensionSyncStorage: 'Sync',
   /**
-   * @description Text for extension managed storage in Application panel
+   * @description Label for extension managed storage in the Application panel.
    */
   extensionManagedStorage: 'Managed',
   /**
-   * @description Text for web cookies
+   * @description Tree item label for cookies in the sidebar of the Application panel.
    */
   cookies: 'Cookies',
   /**
-   * @description Text in the Application Panel if no cookies are set
+   * @description Empty state text displayed when no cookies are set in the Application panel.
    */
   noCookies: 'No cookies set',
   /**
-   * @description Text for web cookies
+   * @description Informational text describing the cookies view in the Application panel.
    */
   cookiesDescription: 'On this page you can view, add, edit, and delete cookies',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Tree item label for background services in the sidebar of the Application panel.
    */
   backgroundServices: 'Background services',
   /**
-   * @description Text for rendering frames
+   * @description Tree item label for frames in the sidebar of the Application panel.
    */
   frames: 'Frames',
   /**
-   * @description Text that appears on a button for the manifest resource type filter.
+   * @description Tree item label for the web app manifest in the sidebar of the Application panel.
    */
   manifest: 'Manifest',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Tree item label for IndexedDB in the sidebar of the Application panel.
    */
   indexeddb: 'IndexedDB',
   /**
-   * @description Text in Application Panel if no indexedDB is detected
+   * @description Empty state text displayed when no IndexedDB database is detected in the Application panel.
    */
-  noIndexeddb: 'No indexedDB detected',
+  noIndexeddb: 'No IndexedDB detected',
   /**
-   * @description Text in the Application panel describing the extension storage tab.
+   * @description Informational text describing the IndexedDB view in the Application panel.
    */
-  indexeddbDescription: 'On this page you can view and delete indexedDB key-value pairs and databases',
+  indexeddbDescription: 'On this page you can view and delete IndexedDB key-value pairs and databases',
   /**
-   * @description A context menu item in the Application Panel Sidebar of the Application panel
+   * @description Context menu item to refresh IndexedDB in the Application panel sidebar.
    */
   refreshIndexeddb: 'Refresh IndexedDB',
   /**
-   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @description Tooltip for an empty database showing its version in the IndexedDB tree item in the Application panel sidebar.
    * @example {1.0} PH1
    */
   versionSEmpty: 'Version: {PH1} (empty)',
   /**
-   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @description Tooltip for a database showing its version in the IndexedDB tree item in the Application panel sidebar.
    * @example {1.0} PH1
    */
   versionS: 'Version: {PH1}',
   /**
-   * @description Text to clear content
+   * @description Context menu item to clear data in the Application panel sidebar.
    */
   clear: 'Clear',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Tooltip for an object store showing its key path in the IndexedDB tree item in the Application panel sidebar.
    * @example {"key path"} PH1
    */
   keyPathS: 'Key path: {PH1}',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Tree item label for local files in the sidebar of the Application panel.
    */
-  localFiles: 'Local Files',
+  localFiles: 'Local files',
   /**
-   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @description Tooltip for a cookie domain showing which frames use its cookies in the Application panel sidebar.
    * @example {https://example.com} PH1
    */
   cookiesUsedByFramesFromS: 'Cookies used by frames from {PH1}',
   /**
-   * @description Text in Frames View of the Application panel
+   * @description Tree item label for opened windows in the sidebar of the Application panel.
    */
-  openedWindows: 'Opened Windows',
+  openedWindows: 'Opened windows',
   /**
-   * @description Text in Frames View of the Application panel
+   * @description Informational text describing the opened windows view in the Application panel.
    */
-  openedWindowsDescription: 'On this page you can view windows opened via window\.open\(\)',
+  openedWindowsDescription: 'On this page you can view windows opened via `window.open()`',
   /**
-   * @description Label for plural of worker type: web workers
+   * @description Tree item label for Web Workers in the sidebar of the Application panel.
    */
   webWorkers: 'Web Workers',
   /**
-   * @description Label in frame tree for unavailable document
+   * @description Tree item label in the frame tree when no document is detected in the Application panel sidebar.
    */
   documentNotAvailable: 'No document detected',
   /**
-   * @description Description of content of unavailable document in Application panel
+   * @description Informational text explaining that a document was generated dynamically via document.write().
    */
-  theContentOfThisDocumentHasBeen:
-      'The content of this document has been generated dynamically via \'document.write()\'',
+  theContentOfThisDocumentHasBeen: 'The content of this document has been generated dynamically via `document.write()`',
   /**
-   * @description Text in Frames View of the Application panel
+   * @description Tree item label for an opened window without a title in the sidebar of the Application panel.
    */
   windowWithoutTitle: 'Window without title',
   /**
-   * @description Default name for worker
+   * @description Fallback tree item label for a worker without a title or URL in the sidebar of the Application panel.
    */
   worker: 'worker',
   /**
-   * @description Description text for describing the dedicated worker tab.
+   * @description Informational text describing the dedicated workers view in the Application panel.
    */
-  workerDescription: 'On this page you can view dedicated workers that are created by the parent frame',
+  workerDescription: 'On this page you can view dedicated workers added by the parent frame',
   /**
-   * @description Aria text for screen reader to announce they can scroll to top of manifest if invoked
+   * @description Accessibility announcement indicating that invoking the element scrolls to the top of the manifest.
    */
-  onInvokeManifestAlert: 'Manifest: Invoke to scroll to the top of manifest',
+  onInvokeManifestAlert: 'Manifest: invoke to scroll to the top of manifest',
   /**
-   * @description Aria text for screen reader to announce they can scroll to a section if invoked
+   * @description Accessibility announcement indicating that invoking the element scrolls to a section in the manifest.
    * @example {"Identity"} PH1
    */
-  beforeInvokeAlert: '{PH1}: Invoke to scroll to this section in manifest',
+  beforeInvokeAlert: '{PH1}: invoke to scroll to this section in manifest',
   /**
-   * @description Alert message for screen reader to announce which subsection is being scrolled to
+   * @description Accessibility announcement indicating that the manifest view was scrolled to a section.
    * @example {"Identity"} PH1
    */
   onInvokeAlert: 'Scrolled to {PH1}',
   /**
-   * @description Application sidebar panel
+   * @description Accessibility label for the Application panel sidebar.
    */
   applicationSidebarPanel: 'Application panel sidebar',
   /**
-   * @description Description text in the Application Panel describing a frame's resources
+   * @description Informational text describing a frame's resources in the Application panel.
    */
   resourceDescription: 'On this page you can view the frame’s resources',
 } as const;

package/front_end/panels/application/BackForwardCacheTreeElement.ts

@@ -13,7 +13,7 @@ import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Label for the back/forward cache tree item in the sidebar of the Application panel.
    */
   backForwardCache: 'Back/forward cache',
 } as const;