chrome-devtools-frontend 1.0.1662965 → 1.0.1664496

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -159,13 +159,13 @@ const UIStrings = {
    */
   noEvents: 'No events have been logged yet.',
   /**
-   *@description Text to preserve the log of events after refreshing.
+   *@description Text to keep the log of events after refreshing.
    */
-  preserveLog: 'Preserve log',
+  preserveLog: 'Keep log',
   /**
-   *@description Tooltip text that appears on the preserve log setting when hovering over it.
+   *@description Tooltip text that appears on the keep log setting when hovering over it.
    */
-  doNotClearLogOnPageReload: 'Do not clear log on page reload/navigation.',
+  doNotClearLogOnPageReload: 'Don’t clear log on page reload/navigation',
   /**
    *@description Label for the ID of a session.
    */

package/front_end/panels/application/ExtensionStorageItemsView.ts

@@ -31,8 +31,8 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as JSON5 from '../../third_party/json5/json5.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';

package/front_end/panels/application/FrameDetailsView.ts

@@ -139,7 +139,7 @@ const UIStrings = {
   /**
    * @description Explanatory text in the Frame Details view
    */
-  theFramesSchemeIsInsecure: 'The frame\'s scheme is insecure',
+  theFramesSchemeIsInsecure: 'The frame’s scheme is insecure',
   /**
    * @description This label specifies the server endpoints to which the server is reporting errors
    *and warnings through the Report-to API. Following this label will be the URL of the server.

package/front_end/panels/application/ServiceWorkerCacheTreeElement.ts

@@ -41,6 +41,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class ServiceWorkerCacheTreeElement extends ExpandableApplicationPanelTreeElement {
   private swCacheModels: Set<SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel>;
   private swCacheTreeElements: Set<SWCacheTreeElement>;
+  private swCacheModelObserver?:
+      SDK.TargetManager.SDKModelObserver<SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel>;
   private storageBucket?: Protocol.Storage.StorageBucket;
 
   constructor(resourcesPanel: ResourcesPanel, storageBucket?: Protocol.Storage.StorageBucket) {
@@ -53,17 +55,25 @@ export class ServiceWorkerCacheTreeElement extends ExpandableApplicationPanelTre
     this.swCacheModels = new Set();
     this.swCacheTreeElements = new Set();
     this.storageBucket = storageBucket;
+    this.initialize();
   }
 
   initialize(): void {
+    this.removeChildren();
     this.swCacheModels.clear();
     this.swCacheTreeElements.clear();
-    SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel, {
+    if (this.swCacheModelObserver) {
+      SDK.TargetManager.TargetManager.instance().unobserveModels(SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel,
+                                                                 this.swCacheModelObserver);
+    }
+    this.swCacheModelObserver = {
       modelAdded: (model: SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel) =>
           this.serviceWorkerCacheModelAdded(model),
       modelRemoved: (model: SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel) =>
           this.serviceWorkerCacheModelRemoved(model),
-    });
+    };
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel,
+                                                             this.swCacheModelObserver, {scoped: true});
   }
 
   override onattach(): void {

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -9,8 +9,8 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';

package/front_end/panels/application/application.ts

@@ -26,6 +26,7 @@ import * as PreloadingTreeElement from './PreloadingTreeElement.js';
 import * as ReportingApiTreeElement from './ReportingApiTreeElement.js';
 import * as ReportingApiView from './ReportingApiView.js';
 import * as ResourcesPanel from './ResourcesPanel.js';
+import * as ServiceWorkerCacheTreeElement from './ServiceWorkerCacheTreeElement.js';
 import * as ServiceWorkerCacheViews from './ServiceWorkerCacheViews.js';
 import * as ServiceWorkersView from './ServiceWorkersView.js';
 import * as ServiceWorkerUpdateCycleView from './ServiceWorkerUpdateCycleView.js';
@@ -67,6 +68,7 @@ export {
   ReportingApiTreeElement,
   ReportingApiView,
   ResourcesPanel,
+  ServiceWorkerCacheTreeElement,
   ServiceWorkerCacheViews,
   ServiceWorkersView,
   ServiceWorkerUpdateCycleView,

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

@@ -49,7 +49,7 @@ const UIStrings = {
    * the back/forward cache was not used and a normal navigation occurred instead.
    */
   normalNavigation:
-      'Not served from back/forward cache: to trigger back/forward cache, use Chrome\'s back/forward buttons, or use the test button below to automatically navigate away and back.',
+      'Not served from back/forward cache: to trigger back/forward cache, use Chrome’s back/forward buttons, or use the test button below to automatically navigate away and back.',
   /**
    * @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.
@@ -463,13 +463,29 @@ export class BackForwardCacheView extends UI.Widget.Widget {
   constructor(view = DEFAULT_VIEW) {
     super({useShadowDom: true, delegatesFocus: true});
     this.#view = view;
-    this.#getMainResourceTreeModel()?.addEventListener(
-        SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.requestUpdate, this);
-    this.#getMainResourceTreeModel()?.addEventListener(
-        SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated, this.requestUpdate, this);
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    SDK.TargetManager.TargetManager.instance().addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                                                SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+                                                                this.requestUpdate, this);
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated,
+        this.requestUpdate, this);
     this.requestUpdate();
   }
 
+  override willHide(): void {
+    SDK.TargetManager.TargetManager.instance().removeModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                                                   SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+                                                                   this.requestUpdate, this);
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated,
+        this.requestUpdate, this);
+    super.willHide();
+  }
+
   #getMainResourceTreeModel(): SDK.ResourceTreeModel.ResourceTreeModel|null {
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     return mainTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel) || null;

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

@@ -6,7 +6,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 type * as TextUtils from '../../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../../core/text_utils/text_utils.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, render} from '../../../ui/lit/lit.js';
 

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

@@ -149,12 +149,12 @@ export class TrustTokensView extends UI.Widget.VBox {
   override wasShown(): void {
     super.wasShown();
     this.requestUpdate();
-    this.#updateInterval = setInterval(this.requestUpdate.bind(this), REFRESH_INTERVAL_MS);
+    this.#updateInterval = window.setInterval(this.requestUpdate.bind(this), REFRESH_INTERVAL_MS);
   }
 
   override willHide(): void {
     super.willHide();
-    clearInterval(this.#updateInterval);
+    window.clearInterval(this.#updateInterval);
     this.#updateInterval = 0;
   }
 

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -12,8 +12,8 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import * as TextUtils from '../../../core/text_utils/text_utils.js';
 import * as Protocol from '../../../generated/protocol.js';
-import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import emptyWidgetStyles from '../../../ui/legacy/emptyWidget.css.js';

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

@@ -56,7 +56,7 @@ const UIStrings = {
   /**
    * @description Description in dialog
    */
-  descriptionDisabledByDataSaver: 'Speculative loading is disabled because of the operating system\'s Data Saver mode.',
+  descriptionDisabledByDataSaver: 'Speculative loading is disabled because of the operating system’s Data Saver mode.',
   /**
    * @description Header in dialog
    */
@@ -65,7 +65,7 @@ const UIStrings = {
    * @description Description in dialog
    */
   descriptionDisabledByBatterySaver:
-      'Speculative loading is disabled because of the operating system\'s Battery Saver mode.',
+      'Speculative loading is disabled because of the operating system’s Battery Saver mode.',
   /**
    * @description Header in dialog
    */

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

@@ -22,7 +22,7 @@ const UIStrings = {
   /**
    * @description  Description text for Prefetch status PrefetchFailedMIMENotSupported.
    */
-  PrefetchFailedMIMENotSupported: 'The prefetch failed because the response\'s Content-Type header was not supported.',
+  PrefetchFailedMIMENotSupported: 'The prefetch failed because the response’s Content-Type header was not supported.',
   /**
    * @description  Description text for Prefetch status PrefetchFailedNetError.
    */
@@ -293,7 +293,7 @@ const UIStrings = {
    *  Description text for PrerenderFinalStatus::kActivatedDuringMainFrameNavigation.
    */
   prerenderFinalStatusActivatedDuringMainFrameNavigation:
-      'Prerendered page activated during initiating page\'s main frame navigation.',
+      'Prerendered page activated during initiating page’s main frame navigation.',
   /**
    *  Description text for PrerenderFinalStatus::kCrossSiteRedirectInMainFrameNavigation.
    */

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

@@ -35,7 +35,7 @@ const UIStrings = {
    * @description Message that tells this page was prerendered.
    */
   downgradedPrefetchUsed:
-      'The initiating page attempted to prerender this page\'s URL. The prerender failed, but the resulting response body was still used as a prefetch.',
+      'The initiating page attempted to prerender this page’s URL. The prerender failed, but the resulting response body was still used as a prefetch.',
   /**
    * @description Message that tells this page was prefetched.
    */
@@ -48,16 +48,16 @@ const UIStrings = {
    * @description Message that tells this page was prefetched.
    */
   prefetchFailed:
-      'The initiating page attempted to prefetch this page\'s URL, but the prefetch failed, so a full navigation was performed instead.',
+      'The initiating page attempted to prefetch this page’s URL, but the prefetch failed, so a full navigation was performed instead.',
   /**
    * @description Message that tells this page was prerendered.
    */
   prerenderFailed:
-      'The initiating page attempted to prerender this page\'s URL, but the prerender failed, so a full navigation was performed instead.',
+      'The initiating page attempted to prerender this page’s URL, but the prerender failed, so a full navigation was performed instead.',
   /**
    * @description Message that tells this page was not preloaded.
    */
-  noPreloads: 'The initiating page did not attempt to speculatively load this page\'s URL.',
+  noPreloads: 'The initiating page did not attempt to speculatively load this page’s URL.',
   /**
    * @description Header for current URL.
    */

package/front_end/panels/autofill/AutofillView.ts

@@ -32,7 +32,7 @@ const UIStrings = {
    * @description Explanation for how to populate the autofill panel with data. Shown when there is
    * no data available.
    */
-  toStartDebugging: 'To start debugging autofill, use Chrome\'s autofill menu to fill an address form.',
+  toStartDebugging: 'To start debugging autofill, use Chrome’s autofill menu to fill an address form.',
   /**
    * @description Column header for column containing form field values
    */

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -39,7 +39,7 @@ const UIStringsNotTranslate = {
   /**
    * @description Text for dismissing teaser.
    */
-  dontShowAgain: 'Don\'t show again',
+  dontShowAgain: 'Don’t show again',
   /**
    * @description Text for teaser to turn on code suggestions.
    */

package/front_end/panels/common/ExtensionServer.ts

@@ -14,12 +14,12 @@ import * as Platform from '../../core/platform/platform.js';
 import * as _ProtocolClient from '../../core/protocol_client/protocol_client.js';  // eslint-disable-line @typescript-eslint/no-unused-vars
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Extensions from '../../models/extensions/extensions.js';
 import * as HAR from '../../models/har/har.js';
 import * as Logs from '../../models/logs/logs.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';

package/front_end/panels/console/ConsoleFilter.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 
 import type {ConsoleGroupViewMessage, ConsoleViewMessage} from './ConsoleViewMessage.js';
 

package/front_end/panels/console/ConsoleSidebar.ts

@@ -5,8 +5,8 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
-import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';

package/front_end/panels/console/ConsoleView.ts

@@ -40,13 +40,13 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as AiCodeGeneration from '../../models/ai_code_generation/ai_code_generation.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -39,12 +39,12 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';

package/front_end/panels/console/PromptBuilder.ts

@@ -3,11 +3,11 @@
 // found in the LICENSE file.
 
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as Logs from '../../models/logs/logs.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 

package/front_end/panels/coverage/CoverageDecorationManager.ts

@@ -4,8 +4,8 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Bindings from '../../models/bindings/bindings.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 
 import type {CoverageInfo, CoverageModel} from './CoverageModel.js';
@@ -54,7 +54,15 @@ export class CoverageDecorationManager {
   update(updatedEntries: CoverageInfo[]): void {
     for (const entry of updatedEntries) {
       for (const uiSourceCode of this.uiSourceCodeByContentProvider.get(entry.getContentProvider())) {
+        const alreadyDecorated = uiSourceCode.getDecorationData(decoratorType) === this;
         uiSourceCode.setDecorationData(decoratorType, this);
+        // We set the decoration data to `this` (the manager itself), which acts as a singleton.
+        // If the file was already decorated with `this`, `setDecorationData` performs an identity
+        // check and will skip dispatching the `DecorationChanged` event. Since the manager's internal
+        // coverage data has updated, we must manually dispatch the event to force the editor to redraw.
+        if (alreadyDecorated) {
+          uiSourceCode.dispatchEventToListeners(Workspace.UISourceCode.Events.DecorationChanged, decoratorType);
+        }
       }
     }
   }

package/front_end/panels/coverage/CoverageModel.ts

@@ -5,9 +5,9 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
 import type * as Bindings from '../../models/bindings/bindings.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 
 export const enum CoverageType {

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -9,9 +9,9 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Geometry from '../../models/geometry/geometry.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -9,8 +9,8 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
-import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
 

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -8,7 +8,7 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -20,6 +20,14 @@ const UIStrings = {
    * @description Text for copying, copy should be used as a verb
    */
   copy: 'Copy',
+  /**
+   * @description Text to scroll the displayed content into view
+   */
+  scrollIntoView: 'Scroll into view',
+  /**
+   * @description A context menu item in the Accessibility Tree View to switch to DOM tree
+   */
+  switchToDomTree: 'Switch to DOM tree',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/AccessibilityTreeView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -30,6 +38,8 @@ export interface ViewInput {
   onNodeHighlight: (node: SDK.AccessibilityModel.AccessibilityNode) => void;
   onNodeClearHighlight: () => void;
   onCopy: (node: SDK.AccessibilityModel.AccessibilityNode) => void;
+  onScrollIntoView: (node: SDK.AccessibilityModel.AccessibilityNode) => void;
+  onSwitchToDomTree: () => void;
 }
 
 export interface ViewOutput {
@@ -78,12 +88,20 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   };
   const onItemContextMenu =
       (event: TreeOutline.TreeOutline.ItemContextMenuEvent<AccessibilityTreeUtils.AXTreeNodeData>): void => {
-        event.data.originalEvent.preventDefault();
-        event.data.originalEvent.stopPropagation();
-        const contextMenu = new UI.ContextMenu.ContextMenu(event.data.originalEvent);
+        const contextMenu = event.createContextMenu();
         const axNode = event.data.node.treeNodeData;
         contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copy), () => input.onCopy(axNode),
                                                   {jslogContext: 'copy'});
+
+        if (axNode.isDOMNode()) {
+          contextMenu.viewSection().appendItem(i18nString(UIStrings.scrollIntoView),
+                                               () => input.onScrollIntoView(axNode),
+                                               {jslogContext: 'scroll-into-view'});
+        }
+
+        contextMenu.viewSection().appendItem(i18nString(UIStrings.switchToDomTree), () => input.onSwitchToDomTree(),
+                                             {jslogContext: 'switch-to-dom-tree'});
+
         void contextMenu.show();
       };
 
@@ -157,6 +175,21 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
     UI.UIUtils.copyTextToClipboard(text);
   };
 
+  #onScrollIntoView = (axNode: SDK.AccessibilityModel.AccessibilityNode): void => {
+    const deferredNode = axNode.deferredDOMNode();
+    if (deferredNode) {
+      deferredNode.resolve(domNode => {
+        if (domNode) {
+          void domNode.scrollIntoView();
+        }
+      });
+    }
+  };
+
+  #onSwitchToDomTree = async(): Promise<void> => {
+    ElementsPanel.instance().toggleAccessibilityTree();
+  };
+
   override async wasShown(): Promise<void> {
     super.wasShown();
     this.requestUpdate();
@@ -183,6 +216,8 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
       onNodeHighlight: this.#onNodeHighlight,
       onNodeClearHighlight: this.#onNodeClearHighlight,
       onCopy: this.#onCopy,
+      onScrollIntoView: this.#onScrollIntoView,
+      onSwitchToDomTree: this.#onSwitchToDomTree,
     };
     this.#view(input, this.#treeOperations, this.contentElement);
   }

package/front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -4,7 +4,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';

package/front_end/panels/elements/ElementIssueUtils.ts

@@ -30,11 +30,11 @@ const UIStrings = {
   /**
    * @description Tooltip text shown in the Elements panel when an element has an error.
    */
-  formAriaLabelledByToNonExistingId: 'An aria-labelledby attribute doesn\'t match any element id',
+  formAriaLabelledByToNonExistingId: 'An aria-labelledby attribute doesn’t match any element id',
   /**
    * @description Tooltip text shown in the Elements panel when an element has an error.
    */
-  formInputAssignedAutocompleteValueToIdOrNameAttributeError: 'An element doesn\'t have an autocomplete attribute',
+  formInputAssignedAutocompleteValueToIdOrNameAttributeError: 'An element doesn’t have an autocomplete attribute',
   /**
    * @description Tooltip text shown in the Elements panel when an element has an error.
    */

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -42,13 +42,13 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Elements from '../../models/elements/elements.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -121,6 +121,10 @@ const UIStrings = {
    * @description Text to scroll the displayed content into view
    */
   scrollIntoView: 'Scroll into view',
+  /**
+   * @description A context menu item in the Elements panel to switch to Accessibility tree
+   */
+  switchToAccessibilityTree: 'Switch to accessibility tree',
   /**
    * @description A context menu item in the Elements Tree Element of the Elements panel
    */
@@ -2361,8 +2365,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     this.populateExpandRecursively(contextMenu);
-    contextMenu.viewSection().appendItem(
-        i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this), {jslogContext: 'collapse-children'});
+    contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this),
+                                         {jslogContext: 'collapse-children'});
+    contextMenu.viewSection().appendItem(i18nString(UIStrings.switchToAccessibilityTree),
+                                         () => ElementsPanel.instance().toggleAccessibilityTree(),
+                                         {jslogContext: 'switch-to-accessibility-tree'});
     const deviceModeWrapperAction = new Emulation.DeviceModeWrapper.ActionDelegate();
     contextMenu.viewSection().appendItem(
         i18nString(UIStrings.captureNodeScreenshot),

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -4,8 +4,8 @@
 
 import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import type * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as ComputedStyle from '../../models/computed_style/computed_style.js';
-import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -40,10 +40,10 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import {createIcon, type Icon} from '../../ui/kit/kit.js';

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -9,10 +9,10 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import {createIcon, Icon} from '../../ui/kit/kit.js';