ReportView.js 3.9 KB

12345678910111213141516171819202122232425262728293031323334
  1. export default class ReportView extends UI.VBox{constructor(title){super(true);this.registerRequiredCSS('ui/reportView.css');this._contentBox=this.contentElement.createChild('div','report-content-box');this._headerElement=this._contentBox.createChild('div','report-header vbox');this._titleElement=this._headerElement.createChild('div','report-title');this._titleElement.textContent=title;UI.ARIAUtils.markAsHeading(this._titleElement,1);this._sectionList=this._contentBox.createChild('div','vbox');}
  2. setTitle(title){if(this._titleElement.textContent===title){return;}
  3. this._titleElement.textContent=title;}
  4. setSubtitle(subtitle){if(this._subtitleElement&&this._subtitleElement.textContent===subtitle){return;}
  5. if(!this._subtitleElement){this._subtitleElement=this._headerElement.createChild('div','report-subtitle');}
  6. this._subtitleElement.textContent=subtitle;}
  7. setURL(link){if(!this._urlElement){this._urlElement=this._headerElement.createChild('div','report-url link');}
  8. this._urlElement.removeChildren();if(link){this._urlElement.appendChild(link);}}
  9. createToolbar(){const toolbar=new UI.Toolbar('');this._headerElement.appendChild(toolbar.element);return toolbar;}
  10. appendSection(title,className){const section=new Section(title,className);section.show(this._sectionList);return section;}
  11. sortSections(comparator){const sections=(this.children().slice());const sorted=sections.every((e,i,a)=>!i||comparator(a[i-1],a[i])<=0);if(sorted){return;}
  12. this.detachChildWidgets();sections.sort(comparator);for(const section of sections){section.show(this._sectionList);}}
  13. setHeaderVisible(visible){this._headerElement.classList.toggle('hidden',!visible);}
  14. setBodyScrollable(scrollable){this._contentBox.classList.toggle('no-scroll',!scrollable);}}
  15. export class Section extends UI.VBox{constructor(title,className){super();this.element.classList.add('report-section');if(className){this.element.classList.add(className);}
  16. this._headerElement=this.element.createChild('div','report-section-header');this._titleElement=this._headerElement.createChild('div','report-section-title');this.setTitle(title);UI.ARIAUtils.markAsHeading(this._titleElement,2);this._fieldList=this.element.createChild('div','vbox');this._fieldMap=new Map();}
  17. title(){return this._titleElement.textContent;}
  18. setTitle(title){if(this._titleElement.textContent!==title){this._titleElement.textContent=title;}
  19. this._titleElement.classList.toggle('hidden',!this._titleElement.textContent);}
  20. setUiGroupTitle(groupTitle){UI.ARIAUtils.markAsGroup(this.element);UI.ARIAUtils.setAccessibleName(this.element,groupTitle);}
  21. createToolbar(){const toolbar=new UI.Toolbar('');this._headerElement.appendChild(toolbar.element);return toolbar;}
  22. appendField(title,textValue){let row=this._fieldMap.get(title);if(!row){row=this._fieldList.createChild('div','report-field');row.createChild('div','report-field-name').textContent=title;this._fieldMap.set(title,row);row.createChild('div','report-field-value');}
  23. if(textValue){row.lastElementChild.textContent=textValue;}
  24. return(row.lastElementChild);}
  25. appendFlexedField(title,textValue){const field=this.appendField(title,textValue);field.classList.add('report-field-value-is-flexed');return field;}
  26. removeField(title){const row=this._fieldMap.get(title);if(row){row.remove();}
  27. this._fieldMap.delete(title);}
  28. setFieldVisible(title,visible){const row=this._fieldMap.get(title);if(row){row.classList.toggle('hidden',!visible);}}
  29. fieldValue(title){const row=this._fieldMap.get(title);return row?row.lastElementChild:null;}
  30. appendRow(){return this._fieldList.createChild('div','report-row');}
  31. appendSelectableRow(){return this._fieldList.createChild('div','report-row report-row-selectable');}
  32. clearContent(){this._fieldList.removeChildren();this._fieldMap.clear();}
  33. markFieldListAsGroup(){UI.ARIAUtils.markAsGroup(this._fieldList);UI.ARIAUtils.setAccessibleName(this._fieldList,this.title());}}
  34. self.UI=self.UI||{};UI=UI||{};UI.ReportView=ReportView;UI.ReportView.Section=Section;