mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-09 21:28:43 +08:00
Sigurd Schneider
0ddc59337e
This change refactors the IssueView to a separate file and converts IssuesPane to TypeScript. Bug: chromium:1072335 Change-Id: Ibb9a6944858730fd8efa72b6b6da78df3c1851d9 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2678099 Commit-Queue: Sigurd Schneider <sigurds@chromium.org> Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
// Copyright 2021 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 Common from '../common/common.js';
|
|
import * as Host from '../host/host.js';
|
|
import * as i18n from '../i18n/i18n.js';
|
|
import * as SDK from '../sdk/sdk.js';
|
|
|
|
import {AffectedItem, AffectedResourcesView} from './AffectedResourcesView.js';
|
|
import {IssueView} from './IssueView.js';
|
|
|
|
export const UIStrings = {
|
|
/**
|
|
*@description Singular label for number of affected element resource indication in issue view
|
|
*/
|
|
element: 'element',
|
|
/**
|
|
*@description Plural label for number of affected element resource indication in issue view
|
|
*/
|
|
elements: 'elements',
|
|
};
|
|
const str_ = i18n.i18n.registerUIStrings('issues/AffectedElementsView.ts', UIStrings);
|
|
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
|
|
export class AffectedElementsView extends AffectedResourcesView {
|
|
private issue: SDK.Issue.Issue;
|
|
|
|
constructor(parent: IssueView, issue: SDK.Issue.Issue) {
|
|
super(parent, {singular: i18nString(UIStrings.element), plural: i18nString(UIStrings.elements)});
|
|
this.issue = issue;
|
|
}
|
|
|
|
private sendTelemetry(): void {
|
|
Host.userMetrics.issuesPanelResourceOpened(this.issue.getCategory(), AffectedItem.Element);
|
|
}
|
|
|
|
private async appendAffectedElements(affectedElements: Iterable<SDK.Issue.AffectedElement>): Promise<void> {
|
|
let count = 0;
|
|
for (const element of affectedElements) {
|
|
await this.appendAffectedElement(element);
|
|
count++;
|
|
}
|
|
this.updateAffectedResourceCount(count);
|
|
}
|
|
|
|
private async appendAffectedElement(element: SDK.Issue.AffectedElement): Promise<void> {
|
|
const cellElement = await this.renderElementCell(element);
|
|
const rowElement = document.createElement('tr');
|
|
rowElement.appendChild(cellElement);
|
|
this.affectedResources.appendChild(rowElement);
|
|
}
|
|
|
|
protected async renderElementCell({backendNodeId, nodeName}: SDK.Issue.AffectedElement): Promise<Element> {
|
|
const mainTarget = SDK.SDKModel.TargetManager.instance().mainTarget() as SDK.SDKModel.Target;
|
|
const deferredDOMNode = new SDK.DOMModel.DeferredDOMNode(mainTarget, backendNodeId);
|
|
const anchorElement = (await Common.Linkifier.Linkifier.linkify(deferredDOMNode)) as HTMLElement;
|
|
anchorElement.textContent = nodeName;
|
|
anchorElement.addEventListener('click', () => this.sendTelemetry());
|
|
anchorElement.addEventListener('keydown', (event: Event) => {
|
|
if ((event as KeyboardEvent).key === 'Enter') {
|
|
this.sendTelemetry();
|
|
}
|
|
});
|
|
const cellElement = document.createElement('td');
|
|
cellElement.classList.add('affected-resource-element', 'devtools-link');
|
|
cellElement.appendChild(anchorElement);
|
|
return cellElement;
|
|
}
|
|
|
|
update(): void {
|
|
this.clear();
|
|
this.appendAffectedElements(this.issue.elements());
|
|
}
|
|
}
|