mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-11 14:14:36 +08:00
Annabel Zhou
39974fe062
accessibility and DOM tree in ElementsPanel This change is hidden behind experiment flag "fullAccessibilityTree". Design doc: https://goo.gle/devtools-a11y-tree Bug: 887173 Change-Id: Ib3eb0cd22a45198c5718f2f00bbdad419d3de06f Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2613074 Commit-Queue: Annabel Zhou <annabelzhou@google.com> Reviewed-by: Mathias Bynens <mathias@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org> Reviewed-by: Changhao Han <changhaohan@chromium.org>
32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
// Copyright 2020 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import * as SDK from '../sdk/sdk.js';
|
|
import * as UI from '../ui/ui.js';
|
|
|
|
import {AccessibilityTree} from './AccessibilityTree.js';
|
|
|
|
// This class simply acts as a wrapper around the AccessibilityTree web component for
|
|
// compatibility with DevTools legacy UI widgets. It in itself contains no business logic
|
|
// or functionality.
|
|
export class AccessibilityTreeView extends UI.Widget.VBox {
|
|
private readonly accessibilityTreeComponent = new AccessibilityTree();
|
|
private readonly toggleButton: HTMLButtonElement;
|
|
|
|
constructor(toggleButton: HTMLButtonElement) {
|
|
super();
|
|
// toggleButton is bound to a click handler on ElementsPanel to switch between the DOM tree
|
|
// and accessibility tree views.
|
|
this.toggleButton = toggleButton;
|
|
this.contentElement.appendChild(this.toggleButton);
|
|
this.contentElement.appendChild(this.accessibilityTreeComponent);
|
|
}
|
|
|
|
setNode(inspectedNode: SDK.DOMModel.DOMNode): void {
|
|
this.accessibilityTreeComponent.data = {
|
|
node: inspectedNode,
|
|
};
|
|
}
|
|
}
|