[go: nahoru, domu]
Google Git
Sign in
chromium / devtools / devtools-frontend / 01eab3cff45fdca5d72759b0afb2c5101cfdfe40 / . / front_end / ui / legacy / ReportView.ts
blob: fe7609108c52c86c76a4ed72d35b2e571673a8e9 [file] [log] [blame]
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]1// Copyright (c) 2016 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
Paul Lewis9950e182019-12-16 16:06:07[diff] [blame]4
Tim van der Lippeaa76aa22020-02-14 14:38:24[diff] [blame]5import * as ARIAUtils from './ARIAUtils.js';
Paul Lewis9950e182019-12-16 16:06:07[diff] [blame]6import {Toolbar} from './Toolbar.js';
Tim van der Lippe70842f32020-11-23 16:56:57[diff] [blame]7import {Tooltip} from './Tooltip.js';
Paul Lewis9950e182019-12-16 16:06:07[diff] [blame]8import {VBox} from './Widget.js';
9
Simon Zünd1edfa262020-12-09 08:30:05[diff] [blame]10/**
11 * @deprecated Please consider using the web component version of this widget
Tim van der Lippefeb2a1e2021-04-14 11:39:54[diff] [blame]12 * (`ui/components/report_view/ReportView.ts`) for new code.
Simon Zünd1edfa262020-12-09 08:30:05[diff] [blame]13 */
Paul Lewis9950e182019-12-16 16:06:07[diff] [blame]14export class ReportView extends VBox {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]15 private readonly contentBox: HTMLElement;
16 private headerElement: HTMLElement;
17 private titleElement: HTMLElement;
18 private readonly sectionList: HTMLElement;
19 private subtitleElement?: HTMLElement;
20 private urlElement?: HTMLElement;
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]21 constructor(title?: string) {
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]22 super(true);
Jack Franklin84442c62021-06-28 15:02:06[diff] [blame]23 this.registerRequiredCSS('ui/legacy/reportView.css');
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]24
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]25 this.contentBox = this.contentElement.createChild('div', 'report-content-box');
26 this.headerElement = this.contentBox.createChild('div', 'report-header vbox');
27 this.titleElement = this.headerElement.createChild('div', 'report-title');
Simon Zündd038deb2020-08-18 10:33:42[diff] [blame]28 if (title) {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]29 this.titleElement.textContent = title;
Wolfgang Beyer92395c92021-02-02 10:43:23[diff] [blame]30 } else {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]31 this.headerElement.classList.add('hidden');
Simon Zündd038deb2020-08-18 10:33:42[diff] [blame]32 }
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]33 ARIAUtils.markAsHeading(this.titleElement, 1);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]34
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]35 this.sectionList = this.contentBox.createChild('div', 'vbox');
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]36 }
37
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]38 setTitle(title: string): void {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]39 if (this.titleElement.textContent === title) {
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]40 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]41 }
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]42 this.titleElement.textContent = title;
43 this.headerElement.classList.toggle('hidden', Boolean(title));
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]44 }
45
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]46 setSubtitle(subtitle: string): void {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]47 if (this.subtitleElement && this.subtitleElement.textContent === subtitle) {
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]48 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]49 }
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]50 if (!this.subtitleElement) {
51 this.subtitleElement = this.headerElement.createChild('div', 'report-subtitle');
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]52 }
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]53 this.subtitleElement.textContent = subtitle;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]54 }
55
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]56 setURL(link: Element|null): void {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]57 if (!this.urlElement) {
58 this.urlElement = this.headerElement.createChild('div', 'report-url link');
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]59 }
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]60 this.urlElement.removeChildren();
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]61 if (link) {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]62 this.urlElement.appendChild(link);
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]63 }
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]64 }
65
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]66 createToolbar(): Toolbar {
Paul Lewis9950e182019-12-16 16:06:07[diff] [blame]67 const toolbar = new Toolbar('');
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]68 this.headerElement.appendChild(toolbar.element);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]69 return toolbar;
70 }
71
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]72 appendSection(title: string, className?: string): Section {
Tim van der Lippe0830b3d2019-10-03 13:20:07[diff] [blame]73 const section = new Section(title, className);
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]74 section.show(this.sectionList);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]75 return section;
76 }
77
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]78 sortSections(comparator: (arg0: Section, arg1: Section) => number): void {
79 const sections = (this.children().slice() as Section[]);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]80 const sorted = sections.every((e, i, a) => !i || comparator(a[i - 1], a[i]) <= 0);
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]81 if (sorted) {
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]82 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]83 }
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]84
85 this.detachChildWidgets();
86 sections.sort(comparator);
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]87 for (const section of sections) {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]88 section.show(this.sectionList);
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]89 }
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]90 }
91
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]92 setHeaderVisible(visible: boolean): void {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]93 this.headerElement.classList.toggle('hidden', !visible);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]94 }
95
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]96 setBodyScrollable(scrollable: boolean): void {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]97 this.contentBox.classList.toggle('no-scroll', !scrollable);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]98 }
Tim van der Lippe0830b3d2019-10-03 13:20:07[diff] [blame]99}
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]100
Paul Lewis9950e182019-12-16 16:06:07[diff] [blame]101export class Section extends VBox {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]102 private readonly headerElement: HTMLElement;
103 private titleElement: HTMLElement;
104 private fieldList: HTMLElement;
105 private readonly fieldMap: Map<string, Element>;
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]106 constructor(title: string, className?: string) {
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]107 super();
108 this.element.classList.add('report-section');
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]109 if (className) {
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]110 this.element.classList.add(className);
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]111 }
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]112 this.headerElement = this.element.createChild('div', 'report-section-header');
113 this.titleElement = this.headerElement.createChild('div', 'report-section-title');
Junyi Xiao3ddd8d12019-05-23 23:15:44[diff] [blame]114 this.setTitle(title);
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]115 ARIAUtils.markAsHeading(this.titleElement, 2);
116 this.fieldList = this.element.createChild('div', 'vbox');
117 this.fieldMap = new Map();
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]118 }
119
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]120 title(): string {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]121 return this.titleElement.textContent || '';
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]122 }
123
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]124 setTitle(title: string, tooltip?: string): void {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]125 if (this.titleElement.textContent !== title) {
126 this.titleElement.textContent = title;
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]127 }
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]128 Tooltip.install(this.titleElement, tooltip || '');
129 this.titleElement.classList.toggle('hidden', !this.titleElement.textContent);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]130 }
131
132 /**
Rob Pavezacb832182019-10-16 23:13:00[diff] [blame]133 * Declares the overall container to be a group and assigns a title.
Rob Pavezacb832182019-10-16 23:13:00[diff] [blame]134 */
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]135 setUiGroupTitle(groupTitle: string): void {
Tim van der Lippeaa76aa22020-02-14 14:38:24[diff] [blame]136 ARIAUtils.markAsGroup(this.element);
137 ARIAUtils.setAccessibleName(this.element, groupTitle);
Rob Pavezacb832182019-10-16 23:13:00[diff] [blame]138 }
139
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]140 createToolbar(): Toolbar {
Paul Lewis9950e182019-12-16 16:06:07[diff] [blame]141 const toolbar = new Toolbar('');
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]142 this.headerElement.appendChild(toolbar.element);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]143 return toolbar;
144 }
145
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]146 appendField(title: string, textValue?: string): HTMLElement {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]147 let row = this.fieldMap.get(title);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]148 if (!row) {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]149 row = this.fieldList.createChild('div', 'report-field');
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]150 row.createChild('div', 'report-field-name').textContent = title;
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]151 this.fieldMap.set(title, row);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]152 row.createChild('div', 'report-field-value');
153 }
Simon Zündd038deb2020-08-18 10:33:42[diff] [blame]154 if (textValue && row.lastElementChild) {
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]155 row.lastElementChild.textContent = textValue;
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]156 }
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]157 return /** @type {!HTMLElement} */ row.lastElementChild as HTMLElement;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]158 }
159
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]160 appendFlexedField(title: string, textValue?: string): Element {
Jan Scheffler227ae822019-12-02 12:45:42[diff] [blame]161 const field = this.appendField(title, textValue);
162 field.classList.add('report-field-value-is-flexed');
163 return field;
164 }
165
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]166 removeField(title: string): void {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]167 const row = this.fieldMap.get(title);
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]168 if (row) {
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]169 row.remove();
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]170 }
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]171 this.fieldMap.delete(title);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]172 }
173
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]174 setFieldVisible(title: string, visible: boolean): void {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]175 const row = this.fieldMap.get(title);
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]176 if (row) {
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]177 row.classList.toggle('hidden', !visible);
Tim van der Lippe1d6e57a2019-09-30 11:55:34[diff] [blame]178 }
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]179 }
180
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]181 fieldValue(title: string): Element|null {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]182 const row = this.fieldMap.get(title);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]183 return row ? row.lastElementChild : null;
184 }
185
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]186 appendRow(): HTMLElement {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]187 return /** @type {!HTMLElement} */ this.fieldList.createChild('div', 'report-row') as HTMLElement;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]188 }
189
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]190 appendSelectableRow(): HTMLElement {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]191 return /** @type {!HTMLElement} */ this.fieldList.createChild('div', 'report-row report-row-selectable') as
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]192 HTMLElement;
Joey Arhar53f63452019-05-25 01:00:13[diff] [blame]193 }
194
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]195 clearContent(): void {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]196 this.fieldList.removeChildren();
197 this.fieldMap.clear();
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]198 }
Junyi Xiao3ddd8d12019-05-23 23:15:44[diff] [blame]199
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]200 markFieldListAsGroup(): void {
Jan Scheffler01eab3c2021-08-16 17:18:07[diff] [blame^]201 ARIAUtils.markAsGroup(this.fieldList);
202 ARIAUtils.setAccessibleName(this.fieldList, this.title());
Junyi Xiao3ddd8d12019-05-23 23:15:44[diff] [blame]203 }
Mathias Bynenscdae9e02019-12-09 14:21:18[diff] [blame]204
Jan Scheffler16b7c0c2021-04-14 15:58:14[diff] [blame]205 setIconMasked(masked: boolean): void {
Mathias Bynenscdae9e02019-12-09 14:21:18[diff] [blame]206 this.element.classList.toggle('show-mask', masked);
207 }
Tim van der Lippe0830b3d2019-10-03 13:20:07[diff] [blame]208}