mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 12:33:47 +08:00
Brandon Goddard
1d054a1f6d
This CL adds a user action that fires when the source order viewer is activated (checkbox is checked). Backend CL: https://crrev.com/c/2351391 Bug: 1094406 Change-Id: I9f992e5a1c3c29a4cdf79ae3c9099b4cc7ae633d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2353377 Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com> Reviewed-by: Peter Marshall <petermarshall@chromium.org> Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
// 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 Host from '../host/host.js';
|
|
import * as SDK from '../sdk/sdk.js'; // eslint-disable-line no-unused-vars
|
|
import * as UI from '../ui/ui.js';
|
|
|
|
import {AccessibilitySubPane} from './AccessibilitySubPane.js';
|
|
|
|
const MAX_CHILD_ELEMENTS_THRESHOLD = 300;
|
|
|
|
export class SourceOrderPane extends AccessibilitySubPane {
|
|
constructor() {
|
|
super(ls`Source Order Viewer`);
|
|
|
|
this._noNodeInfo = this.createInfo(ls`No source order information available`);
|
|
this._warning =
|
|
this.createInfo(ls`There may be a delay in displaying source order for elements with many children`);
|
|
this._warning.id = 'source-order-warning';
|
|
this._checked = false;
|
|
this._checkboxLabel = UI.UIUtils.CheckboxLabel.create(/* title */ ls`Show source order`, /* checked */ false);
|
|
this._checkboxElement = this._checkboxLabel.checkboxElement;
|
|
|
|
this._checkboxLabel.classList.add('source-order-checkbox');
|
|
this._checkboxElement.addEventListener('click', this._checkboxClicked.bind(this), false);
|
|
this.element.appendChild(this._checkboxLabel);
|
|
|
|
/** @type {?SDK.DOMModel.DOMNode} */
|
|
this._node = null;
|
|
this._overlayModel = null;
|
|
}
|
|
|
|
/**
|
|
* @param {?SDK.DOMModel.DOMNode} node
|
|
* @returns {!Promise.<?>}
|
|
*/
|
|
async setNodeAsync(node) {
|
|
if (!this._checkboxLabel.classList.contains('hidden')) {
|
|
this._checked = this._checkboxElement.checked;
|
|
}
|
|
this._checkboxElement.checked = false;
|
|
this._checkboxClicked();
|
|
super.setNode(node);
|
|
if (!this._node) {
|
|
this._overlayModel = null;
|
|
return;
|
|
}
|
|
|
|
let foundSourceOrder = false;
|
|
const childCount = this._node.childNodeCount();
|
|
if (childCount > 0) {
|
|
if (!this._node.children()) {
|
|
await this._node.getSubtree(1, false);
|
|
}
|
|
const children = /** @type {!Array<!SDK.DOMModel.DOMNode>} */ (this._node.children());
|
|
foundSourceOrder = children.some(child => child.nodeType() === Node.ELEMENT_NODE);
|
|
}
|
|
|
|
this._noNodeInfo.classList.toggle('hidden', foundSourceOrder);
|
|
this._warning.classList.toggle('hidden', childCount < MAX_CHILD_ELEMENTS_THRESHOLD);
|
|
this._checkboxLabel.classList.toggle('hidden', !foundSourceOrder);
|
|
if (foundSourceOrder) {
|
|
this._overlayModel = this._node.domModel().overlayModel();
|
|
this._checkboxElement.checked = this._checked;
|
|
this._checkboxClicked();
|
|
} else {
|
|
this._overlayModel = null;
|
|
}
|
|
}
|
|
|
|
_checkboxClicked() {
|
|
if (!this._node || !this._overlayModel) {
|
|
return;
|
|
}
|
|
|
|
if (this._checkboxElement.checked) {
|
|
Host.userMetrics.actionTaken(Host.UserMetrics.Action.SourceOrderViewActivated);
|
|
this._overlayModel.highlightSourceOrderInOverlay(this._node);
|
|
} else {
|
|
this._overlayModel.hideSourceOrderInOverlay();
|
|
}
|
|
}
|
|
}
|