chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts

@@ -16,11 +16,11 @@ const {classMap} = Directives;
 
 const UIStrings = {
   /**
-   * @description Label for the 'Clear overview' button in the CSS overview report
+   * @description Label for the 'Clear overview' button in the CSS overview report.
    */
   clearOverview: 'Clear overview',
   /**
-   * @description Accessible label for the CSS overview panel sidebar
+   * @description Accessible label for the CSS overview panel sidebar.
    */
   cssOverviewPanelSidebar: 'CSS overview panel sidebar',
 } as const;

package/front_end/panels/css_overview/CSSOverviewStartView.ts

@@ -15,28 +15,28 @@ import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
 
 const UIStrings = {
   /**
-   * @description Label for the capture button in the CSS overview panel
+   * @description Label for the capture button in the CSS overview panel.
    */
   captureOverview: 'Capture overview',
   /**
-   * @description Header for the summary of CSS overview
+   * @description Header for the summary of CSS overview.
    */
   identifyCSSImprovements: 'Identify potential CSS improvements',
   /**
-   * @description First point of the summarized features of CSS overview
+   * @description First point of the summarized features of CSS overview.
    */
   capturePageCSSOverview: 'Capture an overview of your page’s CSS',
   /**
-   * @description Second point of the summarized features of CSS overview
+   * @description Second point of the summarized features of CSS overview.
    */
   identifyCSSImprovementsWithExampleIssues:
       'Identify potential CSS improvements (e.g. low contrast issues, unused declarations, color or font mismatches)',
   /**
-   * @description Third point of the summarized features of CSS overview
+   * @description Third point of the summarized features of CSS overview.
    */
   locateAffectedElements: 'Locate the affected elements in the Elements panel',
   /**
-   * @description Title of the link to the quick start video and documentation to CSS overview panel
+   * @description Title of the link to the quick start video and documentation to CSS overview panel.
    */
   quickStartWithCSSOverview: 'Quick start: get started with the new CSS overview panel',
 } as const;

package/front_end/panels/css_overview/CSSOverviewUnusedDeclarations.ts

@@ -7,7 +7,7 @@ import type * as Protocol from '../../generated/protocol.js';
 
 const UIStrings = {
   /**
-   * @description Label to explain why top values are ignored
+   * @description Label to explain why top values are ignored.
    */
   topAppliedToAStatically: '`Top` applied to a statically positioned element',
   /**
@@ -15,23 +15,23 @@ const UIStrings = {
    */
   leftAppliedToAStatically: '`Left` applied to a statically positioned element',
   /**
-   * @description Label to explain why right values are ignored
+   * @description Label to explain why right values are ignored.
    */
   rightAppliedToAStatically: '`Right` applied to a statically positioned element',
   /**
-   * @description Label to explain why bottom values are ignored
+   * @description Label to explain why bottom values are ignored.
    */
   bottomAppliedToAStatically: '`Bottom` applied to a statically positioned element',
   /**
-   * @description Label to explain why width values are ignored
+   * @description Label to explain why width values are ignored.
    */
   widthAppliedToAnInlineElement: '`Width` applied to an inline element',
   /**
-   * @description Label to explain why height values are ignored
+   * @description Label to explain why height values are ignored.
    */
   heightAppliedToAnInlineElement: '`Height` applied to an inline element',
   /**
-   * @description Label to explain why vertical-align values are ignored
+   * @description Label to explain why vertical-align values are ignored.
    */
   verticalAlignmentAppliedTo: 'Vertical alignment applied to element which is neither `inline` nor `table-cell`',
 } as const;

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

@@ -9,11 +9,11 @@ import type * as CSSOverview from './css_overview.js';
 
 const UIStrings = {
   /**
-   * @description Title of the CSS overview panel
+   * @description Title of the CSS overview panel.
    */
   cssOverview: 'CSS overview',
   /**
-   * @description Title of the CSS overview panel
+   * @description Command for showing the CSS overview panel.
    */
   showCssOverview: 'Show CSS overview',
 } as const;

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -18,64 +18,63 @@ import developerResourcesListViewStyles from './developerResourcesListView.css.j
 
 const UIStrings = {
   /**
-   * @description Text for the status of something
+   * @description Column header in the Developer resources panel showing the load status (pending, success, or failure) of a resource.
    */
   status: 'Status',
   /**
-   * @description Text for web URLs
+   * @description Column header in the Developer resources panel showing the URL of the developer resource.
    */
   url: 'URL',
   /**
-   * @description Text for the initiator of something
+   * @description Column header in the Developer resources panel showing the initiator (such as an extension or script) that requested the resource.
    */
   initiator: 'Initiator',
   /**
-   * @description Text in Coverage List View of the Coverage tab
+   * @description Column header in the Developer resources panel showing the total size of a resource in bytes.
    */
-  totalBytes: 'Total Bytes',
+  totalBytes: 'Total bytes',
   /**
-   * @description Column header. The column contains the time it took to load a resource.
+   * @description Column header in the Developer resources panel showing the time it took to load a resource.
    */
   duration: 'Duration',
   /**
-   * @description Text for errors
+   * @description Column header in the Developer resources panel showing the error message when loading a resource fails.
    */
   error: 'Error',
   /**
-   * @description Title for the Developer resources tab
+   * @description Accessible name for the data grid in the Developer resources panel.
    */
   developerResources: 'Developer resources',
   /**
-   * @description Text for a context menu entry
+   * @description Context menu item in the Developer resources panel for copying the selected resource's URL to the clipboard.
    */
   copyUrl: 'Copy URL',
   /**
-   * @description Text for a context menu entry. Command to copy a URL to the clipboard. The initiator
-   * of a request is the entity that caused this request to be sent.
+   * @description Context menu item in the Developer resources panel for copying the initiator's URL to the clipboard. The initiator of a request is the entity that caused this request to be sent.
    */
   copyInitiatorUrl: 'Copy initiator URL',
   /**
-   * @description Text for the status column of a list view
+   * @description Status text in the Developer resources panel indicating that a resource is currently loading.
    */
-  pending: 'pending',
+  pending: 'Pending',
   /**
-   * @description Text for the status column of a list view
+   * @description Status text in the Developer resources panel indicating that a resource loaded successfully.
    */
-  success: 'success',
+  success: 'Success',
   /**
-   * @description Text for the status column of a list view
+   * @description Status text in the Developer resources panel indicating that a resource failed to load.
    */
-  failure: 'failure',
+  failure: 'Failure',
   /**
-   * @description Accessible text for the value in bytes in memory allocation.
+   * @description Accessible label in the Developer resources panel for the size of a resource in bytes.
    */
   sBytes: '{n, plural, =1 {# byte} other {# bytes}}',
   /**
-   * @description Number of resource(s) match
+   * @description Screen reader announcement in the Developer resources panel indicating how many resources match the current text filter.
    */
   numberOfResourceMatch: '{n, plural, =1 {# resource matches} other {# resources match}}',
   /**
-   * @description No resource matches
+   * @description Screen reader announcement in the Developer resources panel when no resources match the current text filter.
    */
   noResourceMatches: 'No resource matches',
 } as const;
@@ -261,7 +260,7 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
         }
       },
       onInitiatorMouseLeave: () => {
-        SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+        SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
       },
     };
     const output = {};

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -21,31 +21,29 @@ const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**
-   * @description Placeholder for a search field in a toolbar
+   * @description Placeholder text for the text filter input field in the toolbar of the Developer resources panel.
    */
   filterByText: 'Filter by URL and error',
   /**
-   * @description Tooltip for a checkbox in the toolbar of the developer resources view. The
+   * @description Tooltip for a checkbox in the toolbar of the Developer resources panel. The
    * inspected target is the webpage that DevTools is debugging/inspecting/attached to.
    */
-  loadHttpsDeveloperResources:
-      'Load `HTTP(S)` developer resources through the website you inspect, not through DevTools',
+  loadHttpsDeveloperResources: 'Load HTTP(S) developer resources through the website you inspect, not through DevTools',
   /**
-   * @description Text for a checkbox in the toolbar of the developer resources view. The target is
+   * @description Text for a checkbox in the toolbar of the Developer resources panel. The target is
    * the webpage that DevTools is debugging/inspecting/attached to. This setting makes it so
    * developer resources are requested from the webpage itself, and not from the DevTools
    * application.
    */
   enableLoadingThroughTarget: 'Load through website',
   /**
-   * @description Text for resources load status
+   * @description Status bar message in the Developer resources panel showing the total number of resources and how many are currently loading.
    * @example {1} PH1
    * @example {1} PH2
    */
   resourcesCurrentlyLoading: '{PH1} resources, {PH2} currently loading',
   /**
-   * @description Status text that appears to tell the developer how many resources were loaded in
-   * total. Resources are files related to the webpage.
+   * @description Status bar message in the Developer resources panel showing the total number of loaded resources. Resources are files related to the webpage.
    */
   resources: '{n, plural, =1 {# resource} other {# resources}}',
 } as const;

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

@@ -11,11 +11,11 @@ import type * as DeveloperResources from './developer_resources.js';
 
 const UIStrings = {
   /**
-   * @description Title for developer resources panel
+   * @description Title for the Developer resources panel.
    */
   developerResources: 'Developer resources',
   /**
-   * @description Command for showing the developer resources panel
+   * @description Command for showing the Developer resources panel.
    */
   showDeveloperResources: 'Show Developer resources',
 } as const;

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -4,8 +4,7 @@
 
 import './components/components.js';
 
-import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as Lit from '../../ui/lit/lit.js';
 
@@ -14,112 +13,23 @@ const {html} = Lit;
 export type AXTreeNodeData = SDK.AccessibilityModel.AccessibilityNode;
 export type AXTreeNode = TreeOutline.TreeOutlineUtils.TreeNode<AXTreeNodeData>;
 
-function isLeafNode(node: SDK.AccessibilityModel.AccessibilityNode): boolean {
-  return node.numChildren() === 0 && node.role()?.value !== 'Iframe';
-}
-
-function getModel(frameId: Protocol.Page.FrameId,
-                  frameManager: SDK.FrameManager.FrameManager =
-                      SDK.FrameManager.FrameManager.instance()): SDK.AccessibilityModel.AccessibilityModel {
-  const frame = frameManager.getFrame(frameId);
-  const model = frame?.resourceTreeModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
-  if (!model) {
-    throw new Error('Could not instantiate model for frameId');
-  }
-  return model;
-}
-
-export async function getRootNode(
-    frameId: Protocol.Page.FrameId,
-    frameManager: SDK.FrameManager.FrameManager =
-        SDK.FrameManager.FrameManager.instance()): Promise<SDK.AccessibilityModel.AccessibilityNode> {
-  const model = getModel(frameId, frameManager);
-  const root = await model.requestRootNode(frameId);
-  if (!root) {
-    throw new Error('No accessibility root for frame');
-  }
-  return root;
-}
-
-function getFrameIdForNodeOrDocument(node: SDK.DOMModel.DOMNode): Protocol.Page.FrameId {
-  let frameId;
-  if (node instanceof SDK.DOMModel.DOMDocument) {
-    frameId = node.body?.frameId();
-  } else {
-    frameId = node.frameId();
-  }
-  if (!frameId) {
-    throw new Error('No frameId for DOM node');
-  }
-  return frameId;
-}
-
-export async function getNodeAndAncestorsFromDOMNode(
-    domNode: SDK.DOMModel.DOMNode,
-    frameManager: SDK.FrameManager.FrameManager =
-        SDK.FrameManager.FrameManager.instance()): Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
-  let frameId = getFrameIdForNodeOrDocument(domNode);
-  const model = getModel(frameId, frameManager);
-  const result = await model.requestAndLoadSubTreeToNode(domNode);
-  if (!result) {
-    throw new Error('Could not retrieve accessibility node for inspected DOM node');
-  }
-
-  const outermostFrameId = frameManager.getOutermostFrame()?.id;
-  if (!outermostFrameId) {
-    return result;
-  }
-  while (frameId !== outermostFrameId) {
-    const node = await frameManager.getFrame(frameId)?.getOwnerDOMNodeOrDocument();
-    if (!node) {
-      break;
-    }
-    frameId = getFrameIdForNodeOrDocument(node);
-    const model = getModel(frameId, frameManager);
-    const ancestors = await model.requestAndLoadSubTreeToNode(node);
-    result.push(...ancestors || []);
-  }
-  return result;
-}
-
-async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode,
-                           frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()):
-    Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
-  if (node.role()?.value === 'Iframe') {
-    const domNode = await node.deferredDOMNode()?.resolvePromise();
-    if (!domNode) {
-      throw new Error('Could not find corresponding DOMNode');
-    }
-    const frameId = domNode.frameOwnerFrameId();
-    if (!frameId) {
-      throw new Error('No owner frameId on iframe node');
-    }
-    const localRoot = await getRootNode(frameId, frameManager);
-    return [localRoot];
-  }
-  return await node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
-}
-
-export async function sdkNodeToAXTreeNodes(
-    sdkNode: SDK.AccessibilityModel.AccessibilityNode,
-    frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()): Promise<AXTreeNode[]> {
+export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.AccessibilityNode): Promise<AXTreeNode[]> {
   const treeNodeData = sdkNode;
-  if (isLeafNode(sdkNode)) {
+  if (sdkNode.isLeafNode()) {
     return [{
       treeNodeData,
-      id: getNodeId(sdkNode),
+      id: sdkNode.getNodeId(),
     }];
   }
 
   return [{
     treeNodeData,
     children: async () => {
-      const childNodes = await getChildren(sdkNode, frameManager);
-      const childTreeNodes =
-          await Promise.all(childNodes.map(childNode => sdkNodeToAXTreeNodes(childNode, frameManager)));
+      const childNodes = await sdkNode.getChildren();
+      const childTreeNodes = await Promise.all(childNodes.map(childNode => sdkNodeToAXTreeNodes(childNode)));
       return childTreeNodes.flat(1);
     },
-    id: getNodeId(sdkNode),
+    id: sdkNode.getNodeId(),
   }];
 }
 
@@ -129,13 +39,9 @@ export function accessibilityNodeRenderer(node: AXTreeNode): Lit.TemplateResult
   const role = sdkNode.role()?.value || '';
   const properties = sdkNode.properties() || [];
   const ignored = sdkNode.ignored();
-  const id = getNodeId(sdkNode);
+  const id = sdkNode.getNodeId();
   return html`<devtools-accessibility-tree-node .data=${{
     name, role, ignored, properties, id,
   }
   }></devtools-accessibility-tree-node>`;
 }
-
-export function getNodeId(node: SDK.AccessibilityModel.AccessibilityNode): string {
-  return node.getFrameId() + '#' + node.id();
-}