chrome-devtools-frontend 1.0.942529 → 1.0.943986

package/front_end/panels/application/BackForwardCacheStrings.ts

@@ -16,9 +16,10 @@ const UIStrings = {
       'Back/forward cache is disabled by flags. Visit chrome://flags/#back-forward-cache to enable it locally on this device.',
   /**
       * @description Description text for not restored reason RelatedActiveContentsExist.
+      * Note: "window.open()" is the name of a JavaScript method and should not be translated.
       */
   relatedActiveContentsExist:
-      'The page was opened using `window.open()` and another tab has a reference to it, or the page opened a window.',
+      'The page was opened using \'`window.open()`\' and another tab has a reference to it, or the page opened a window.',
   /**
       * @description Description text for not restored reason HTTPStatusNotOK.
       */
@@ -83,6 +84,7 @@ const UIStrings = {
   sessionRestored: 'Chrome restarted and cleared the back/forward cache entries.',
   /**
       * @description Description text for not restored reason ServiceWorkerPostMessage.
+      * Note: "MessageEvent" should not be translated.
       */
   serviceWorkerPostMessage: 'A service worker attempted to send the page in back/forward cache a `MessageEvent`.',
   /**

package/front_end/panels/application/BackForwardCacheView.ts

@@ -17,67 +17,67 @@ import backForwardCacheViewStyles from './backForwardCacheView.css.js';
 
 const UIStrings = {
   /**
-   * @description Title text in Back-Forward Cache view of the Application panel
+   * @description Title text in back/forward cache view of the Application panel
    */
   mainFrame: 'Main Frame',
   /**
-   * @description Title text in Back-Forward Cache view of the Application panel
+   * @description Title text in back/forward cache view of the Application panel
    */
-  backForwardCacheTitle: 'Back-Forward Cache',
+  backForwardCacheTitle: 'Back/forward cache',
   /**
    * @description Status text for the status of the main frame
    */
   unavailable: 'unavailable',
   /**
-   * @description Entry name text in the Back-Forward Cache view of the Application panel
+   * @description Entry name text in the back/forward cache view of the Application panel
    */
   url: 'URL',
   /**
-   * @description Entry name text in the Back-Forward Cache view of the Application panel
+   * @description Entry name text in the back/forward cache view of the Application panel
    */
-  bfcacheStatus: 'Back-Forward Cache Status',
+  bfcacheStatus: 'Back/forward cache Status',
   /**
-   * @description Status text for the status of the Back-Forward Cache status
+   * @description Status text for the status of the back/forward cache status
    */
   unknown: 'unknown',
   /**
-   * @description Status text for the status of the Back-Forward Cache status indicating that
-   * the Back-Forward Cache was not used and a normal navigation occured instead.
+   * @description Status text for the status of the back/forward cache status indicating that
+   * the back/forward cache was not used and a normal navigation occured instead.
    */
-  normalNavigation: 'Normal navigation (Not restored from Back-Forward Cache)',
+  normalNavigation: 'Normal navigation (Not restored from back/forward cache)',
   /**
-   * @description Status text for the status of the Back-Forward Cache status indicating that
-   * the Back-Forward Cache was used to restore the page instead of reloading it.
+   * @description Status text for the status of the back/forward cache status indicating that
+   * the back/forward cache was used to restore the page instead of reloading it.
    */
-  restoredFromBFCache: 'Restored from Back-Forward Cache',
+  restoredFromBFCache: 'Restored from back/forward cache',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * Back-Forward Cache. These reasons are actionable i.e. they can be cleaned up to make the
-   * page eligible for Back-Forward Cache.
+   * back/forward cache. These reasons are actionable i.e. they can be cleaned up to make the
+   * page eligible for back/forward cache.
    */
   pageSupportNeeded: 'Actionable',
   /**
    * @description Explanation for actionable items which prevent the page from being eligible
-   * for Back-Forward Cache.
+   * for back/forward cache.
    */
   pageSupportNeededExplanation:
-      'These reasons are actionable i.e. they can be cleaned up to make the page eligible for Back-Forward Cache.',
+      'These reasons are actionable i.e. they can be cleaned up to make the page eligible for back/forward cache.',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * Back-Forward Cache. These reasons are circumstantial / not actionable i.e. they cannot be
-   * cleaned up by developers to make the page eligible for Back-Forward Cache.
+   * back/forward cache. These reasons are circumstantial / not actionable i.e. they cannot be
+   * cleaned up by developers to make the page eligible for back/forward cache.
    */
   circumstantial: 'Not Actionable',
   /**
    * @description Explanation for circumstantial/non-actionable items which prevent the page from being eligible
-   * for Back-Forward Cache.
+   * for back/forward cache.
    */
   circumstantialExplanation:
       'These reasons are not actionable i.e. caching was prevented by something outside of the direct control of the page.',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * Back-Forward Cache. These reasons are pending support by chrome i.e. in a future version
-   * of chrome they will not prevent Back-Forward Cache usage anymore.
+   * back/forward cache. These reasons are pending support by chrome i.e. in a future version
+   * of chrome they will not prevent back/forward cache usage anymore.
    */
   supportPending: 'Pending Support',
   /**
@@ -86,10 +86,10 @@ const UIStrings = {
   runTest: 'Run Test',
   /**
    * @description Explanation for 'pending support' items which prevent the page from being eligible
-   * for Back-Forward Cache.
+   * for back/forward cache.
    */
   supportPendingExplanation:
-      'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for Back-Forward Cache in a future version of Chrome.',
+      'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for back/forward cache in a future version of Chrome.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -168,9 +168,9 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
 
       // We can know whether the current page can use BFCache
       // as the browser navigates to another unrelated page and goes back to the current page.
-      // We chose "chrome://version" because it must be cross-site.
+      // We chose "chrome://terms" because it must be cross-site.
       // Ideally, We want to have our own testing page like "chrome: //bfcache-test".
-      resourceTreeModel.navigate('chrome://version/');
+      resourceTreeModel.navigate('chrome://terms');
     }
   }
 

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

@@ -6,7 +6,6 @@ import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Resources from './application.js';
 
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/application/components/stackTraceRow.css

@@ -26,3 +26,11 @@
 .ignore-list-link {
   opacity: 60%;
 }
+
+.link,
+.devtools-link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 2px 0; /* adjust focus ring size */
+}

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

@@ -4,10 +4,9 @@
 
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type * as Sources from '../sources/sources.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as BrowserDebugger from './browser_debugger.js';
-import type * as Sources from '../sources/sources.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 const UIStrings = {

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

@@ -7,7 +7,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Changes from './changes.js';
 
 let loadedChangesModule: (typeof Changes|undefined);

package/front_end/panels/console/ConsolePinPane.ts

@@ -164,8 +164,6 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
   }
 }
 
-let consolePinNumber = 0;
-
 export class ConsolePin {
   private readonly pinElement: Element;
   private readonly pinPreview: HTMLElement;
@@ -175,11 +173,9 @@ export class ConsolePin {
   private committedExpression: string;
   private hovered: boolean;
   private lastNode: SDK.RemoteObject.RemoteObject|null;
-  private consolePinNumber: number;
   private deletePinIcon: UI.UIUtils.DevToolsCloseButton;
 
   constructor(expression: string, private readonly pinPane: ConsolePinPane, private readonly focusOut: () => void) {
-    this.consolePinNumber = ++consolePinNumber;
     this.deletePinIcon = document.createElement('div', {is: 'dt-close-button'}) as UI.UIUtils.DevToolsCloseButton;
     this.deletePinIcon.gray = true;
     this.deletePinIcon.classList.add('close-button');
@@ -325,8 +321,8 @@ export class ConsolePin {
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     const preprocessedExpression = ObjectUI.JavaScriptREPL.JavaScriptREPL.preprocessExpression(text);
     const {preview, result} = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
-        `${preprocessedExpression}\n//# sourceURL=watch-expression-${this.consolePinNumber}.devtools`,
-        throwOnSideEffect, false /* replMode */, timeout, !isEditing /* allowErrors */, 'console');
+        preprocessedExpression, throwOnSideEffect, false /* replMode */, timeout, !isEditing /* allowErrors */,
+        'console', true /* awaitPromise */);
     if (this.lastResult && this.lastExecutionContext) {
       this.lastExecutionContext.runtimeModel.releaseEvaluationResult(this.lastResult);
     }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -50,9 +50,12 @@ import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+// eslint-disable-next-line rulesdir/es_modules_import
+import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
 
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
+import consoleViewStyles from './consoleView.css.js';
 
 const UIStrings = {
   /**
@@ -2067,7 +2070,11 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
         const tableElement = formattedResult.createChild('div', 'console-message-formatted-table');
         const dataGridContainer = tableElement.createChild('span');
         tableElement.appendChild(this.formatParameter(actualTable, true, false));
-        dataGridContainer.appendChild(this.dataGrid.element);
+        const shadowRoot = dataGridContainer.attachShadow({mode: 'open'});
+        const dataGridWidget = this.dataGrid.asWidget();
+        dataGridWidget.markAsRoot();
+        dataGridWidget.show(shadowRoot as unknown as Element);
+        dataGridWidget.registerCSSFiles([consoleViewStyles, objectValueStyles]);
         formattedMessage.appendChild(formattedResult);
         this.dataGrid.renderInline();
       }

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

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Console from './console.js';
 
 import * as i18n from '../../core/i18n/i18n.js';

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

@@ -4,7 +4,6 @@
 
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as ConsoleCounters from './console_counters.js';
 
 let loadedConsoleCountersModule: (typeof ConsoleCounters|undefined);

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

@@ -5,7 +5,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Coverage from './coverage.js';
 
 const UIStrings = {

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

@@ -5,7 +5,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as CSSOverview from './css_overview.js';
 
 const UIStrings = {

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

@@ -6,7 +6,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as DeveloperResources from './developer_resources.js';
 
 const UIStrings = {

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -6,87 +6,113 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as ElementsComponents from './components/components.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 export type AXTreeNodeData = SDK.AccessibilityModel.AccessibilityNode;
 export type AXTreeNode = TreeOutline.TreeOutlineUtils.TreeNode<AXTreeNodeData>;
 
-export function sdkNodeToAXTreeNode(sdkNode: SDK.AccessibilityModel.AccessibilityNode): AXTreeNode {
-  const treeNodeData = sdkNode;
-  const role = sdkNode.role()?.value;
-
-  if (role === 'Iframe') {
-    return {
-      treeNodeData,
-      children: async(): Promise<AXTreeNode[]> => {
-        const domNode = await sdkNode.deferredDOMNode()?.resolvePromise();
-        if (!domNode) {
-          throw new Error('Could not find corresponding DOMNode');
-        }
-        const frameId = domNode.frameOwnerFrameId();
+function isLeafNode(node: SDK.AccessibilityModel.AccessibilityNode): boolean {
+  return node.numChildren() === 0 && node.role()?.value !== 'Iframe';
+}
 
-        let document = domNode.contentDocument();
-        if (!document && frameId) {
-          const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
-          if (!frame) {
-            return [];
-          }
-          document = await frame.resourceTreeModel().domModel().requestDocument();
-        }
-        if (!document) {
-          return [];
-        }
+function getModel(frameId: Protocol.Page.FrameId): SDK.AccessibilityModel.AccessibilityModel {
+  const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
+  const model = frame?.resourceTreeModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
+  if (!model) {
+    throw Error('Could not instantiate model for frameId');
+  }
+  return model;
+}
 
-        const axmodel = document.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
-        if (!axmodel) {
-          throw new Error('Could not find AccessibilityModel for child document');
-        }
-        // Check if we have requested the node before:
-        let localRoot = axmodel.axNodeForDOMNode(document);
-        if (!localRoot && frameId) {
-          // Request the root node of the iframe document:
-          localRoot = await axmodel.requestRootNode(1, frameId) || null;
-        }
-        if (!localRoot) {
-          throw new Error('Could not find root node');
-        }
-        return [sdkNodeToAXTreeNode(localRoot)];
-      },
-      id: sdkNode.id(),
-    };
+export async function getRootNode(frameId: Protocol.Page.FrameId): Promise<SDK.AccessibilityModel.AccessibilityNode> {
+  const model = getModel(frameId);
+  const root = await model.requestRootNode(frameId);
+  if (!root) {
+    throw Error('No accessibility root for frame');
   }
+  return root;
+}
 
-  if (!sdkNode.numChildren()) {
-    return {
-      treeNodeData,
-      id: sdkNode.id(),
-    };
+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 Error('No frameId for DOM node');
   }
+  return frameId;
+}
 
-  return {
-    treeNodeData,
-    children: async(): Promise<AXTreeNode[]> => {
-      if (sdkNode.numChildren() === sdkNode.children().length) {
-        return sdkNode.children().map(child => sdkNodeToAXTreeNode(child));
-      }
-      // numChildren returns the number of children that this node has, whereas node.children()
-      // returns only children that have been loaded. If these two don't match, that means that
-      // there are backend children that need to be loaded into the model, so request them now.
-      await sdkNode.accessibilityModel().requestAXChildren(sdkNode.id(), sdkNode.getFrameId() || undefined);
+export async function getNodeAndAncestorsFromDOMNode(domNode: SDK.DOMModel.DOMNode):
+    Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
+  let frameId = getFrameIdForNodeOrDocument(domNode);
+  const model = getModel(frameId);
+  const result = await model.requestAndLoadSubTreeToNode(domNode);
+  if (!result) {
+    throw Error('Could not retrieve accessibility node for inspected DOM node');
+  }
 
-      if (sdkNode.numChildren() !== sdkNode.children().length) {
-        throw new Error('Once loaded, number of children and length of children must match.');
-      }
+  const topFrameId = SDK.FrameManager.FrameManager.instance().getTopFrame()?.id;
+  if (!topFrameId) {
+    return result;
+  }
+  while (frameId !== topFrameId) {
+    const node = await SDK.FrameManager.FrameManager.instance().getFrame(frameId)?.getOwnerDOMNodeOrDocument();
+    if (!node) {
+      break;
+    }
+    frameId = getFrameIdForNodeOrDocument(node);
+    const model = getModel(frameId);
+    const ancestors = await model.requestAndLoadSubTreeToNode(node);
+    result.push(...ancestors || []);
+  }
+  return result;
+}
 
-      const treeNodeChildren: AXTreeNode[] = [];
+async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
+    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 Error('No owner frameId on iframe node');
+    }
+    const localRoot = await getRootNode(frameId);
+    return [localRoot];
+  }
+  if (node.hasUnloadedChildren()) {
+    await node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
+    if (node.numChildren() !== node.children().length) {
+      throw new Error('Once loaded, number of children and length of children must match.');
+    }
+  }
+  return node.children();
+}
 
-      for (const child of sdkNode.children()) {
-        treeNodeChildren.push(sdkNodeToAXTreeNode(child));
-      }
+export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.AccessibilityNode): Promise<AXTreeNode[]> {
+  const treeNodeData = sdkNode;
+  if (isLeafNode(sdkNode)) {
+    return [{
+      treeNodeData,
+      id: getNodeId(sdkNode),
+    }];
+  }
 
-      return treeNodeChildren;
+  return [{
+    treeNodeData,
+    children: async(): Promise<AXTreeNode[]> => {
+      const childNodes = await getChildren(sdkNode);
+      const childTreeNodes = await Promise.all(childNodes.map(childNode => sdkNodeToAXTreeNodes(childNode)));
+      return childTreeNodes.flat(1);
     },
-    id: sdkNode.id(),
-  };
+    id: getNodeId(sdkNode),
+  }];
 }
 
 type Data = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNodeData;
@@ -99,3 +125,7 @@ export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateRes
   const ignored = sdkNode.ignored();
   return LitHtml.html`<${tag} .data=${{name, role, ignored} as Data}></${tag}>`;
 }
+
+export function getNodeId(node: SDK.AccessibilityModel.AccessibilityNode): string {
+  return node.getFrameId() + '#' + node.id();
+}