front_end/panels/coverage/CoverageListView.ts - devtools/devtools-frontend - Git at Google

 // Copyright 2017 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

 import '../../ui/components/highlighting/highlighting.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';

 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';

 import coverageListViewStyles from './coverageListView.css.js';
 import {CoverageType} from './CoverageModel.js';

 export interface CoverageListItem {
   url: Platform.DevToolsPath.UrlString;
   type: CoverageType;
   size: number;
   usedSize: number;
   unusedSize: number;
   usedPercentage: number;
   unusedPercentage: number;
   sources: CoverageListItem[];
   isContentScript: boolean;
   generatedUrl?: Platform.DevToolsPath.UrlString;
 }

 const UIStrings = {
   /**
    * @description Text that appears on a button for the css resource type filter.
    */
   css: 'CSS',
   /**
    * @description Text in Coverage List View of the Coverage tab
    */
   jsPerFunction: 'JS (per function)',
   /**
    * @description Text in Coverage List View of the Coverage tab
    */
   jsPerBlock: 'JS (per block)',
   /**
    * @description Text for web URLs
    */
   url: 'URL',
   /**
    * @description Text that refers to some types
    */
   type: 'Type',
   /**
    * @description Text in Coverage List View of the Coverage tab
    */
   totalBytes: 'Total Bytes',
   /**
    * @description Text in Coverage List View of the Coverage tab
    */
   unusedBytes: 'Unused Bytes',
   /**
    * @description Text in the Coverage List View of the Coverage Tab
    */
   usageVisualization: 'Usage Visualization',
   /**
    * @description Data grid name for Coverage data grids
    */
   codeCoverage: 'Code Coverage',
   /**
    * @description Cell title in Coverage List View of the Coverage tab. The coverage tool tells
    *developers which functions (logical groups of lines of code) were actually run/executed. If a
    *function does get run, then it is marked in the UI to indicate that it was covered.
    */
   jsCoverageWithPerFunction:
       'JS coverage with per function granularity: Once a function was executed, the whole function is marked as covered.',
   /**
    * @description Cell title in Coverage List View of the Coverage tab. The coverage tool tells
    *developers which blocks (logical groups of lines of code, smaller than a function) were actually
    *run/executed. If a block does get run, then it is marked in the UI to indicate that it was
    *covered.
    */
   jsCoverageWithPerBlock:
       'JS coverage with per block granularity: Once a block of JavaScript was executed, that block is marked as covered.',
   /**
    * @description Accessible text for the value in bytes in memory allocation or coverage view.
    */
   sBytes: '{n, plural, =1 {# byte} other {# bytes}}',
   /**
    * @description Accessible text for the unused bytes column in the coverage tool that describes the total unused bytes and percentage of the file unused.
    * @example {88%} percentage
    */
   sBytesS: '{n, plural, =1 {# byte, {percentage}} other {# bytes, {percentage}}}',
   /**
    * @description Tooltip text for the bar in the coverage list view of the coverage tool that illustrates the relation between used and unused bytes.
    * @example {1000} PH1
    * @example {12.34} PH2
    */
   sBytesSBelongToFunctionsThatHave: '{PH1} bytes ({PH2}) belong to functions that have not (yet) been executed.',
   /**
    * @description Tooltip text for the bar in the coverage list view of the coverage tool that illustrates the relation between used and unused bytes.
    * @example {1000} PH1
    * @example {12.34} PH2
    */
   sBytesSBelongToBlocksOf: '{PH1} bytes ({PH2}) belong to blocks of JavaScript that have not (yet) been executed.',
   /**
    * @description Message in Coverage View of the Coverage tab
    * @example {1000} PH1
    * @example {12.34} PH2
    */
   sBytesSBelongToFunctionsThatHaveExecuted: '{PH1} bytes ({PH2}) belong to functions that have executed at least once.',
   /**
    * @description Message in Coverage View of the Coverage tab
    * @example {1000} PH1
    * @example {12.34} PH2
    */
   sBytesSBelongToBlocksOfJavascript:
       '{PH1} bytes ({PH2}) belong to blocks of JavaScript that have executed at least once.',
   /**
    * @description Accessible text for the visualization column of coverage tool. Contains percentage of unused bytes to used bytes.
    * @example {12.3} PH1
    * @example {12.3} PH2
    */
   sOfFileUnusedSOfFileUsed: '{PH1} % of file unused, {PH2} % of file used',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/coverage/CoverageListView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {styleMap, repeat} = Directives;

 export function coverageTypeToString(type: CoverageType): string {
   const types = [];
   if (type & CoverageType.CSS) {
     types.push(i18nString(UIStrings.css));
   }
   if (type & CoverageType.JAVA_SCRIPT_PER_FUNCTION) {
     types.push(i18nString(UIStrings.jsPerFunction));
   } else if (type & CoverageType.JAVA_SCRIPT) {
     types.push(i18nString(UIStrings.jsPerBlock));
   }
   return types.join('+');
 }

 interface ViewInput {
   items: CoverageListItem[];
   selectedUrl: Platform.DevToolsPath.UrlString|null;
   maxSize: number;
   onOpen: (url: Platform.DevToolsPath.UrlString) => void;
   highlightRegExp: RegExp|null;
 }

 type View = (input: ViewInput, output: object, target: HTMLElement) => void;

 const formatBytes = (value: number|undefined): string => {
   return getBytesFormatter().format(value ?? 0);
 };
 const formatPercent = (value: number|undefined): string => {
   return getPercentageFormatter().format(value ?? 0);
 };
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
     <style>${coverageListViewStyles}</style>
     <devtools-data-grid class="flex-auto" name=${i18nString(UIStrings.codeCoverage)} striped autofocus resize="last"
       .template=${html`
         <table>
           <tr>
             <th id="url" width="250px" weight="3" sortable>${i18nString(UIStrings.url)}</th>
             <th id="type" width="45px" weight="1" fixed sortable>${i18nString(UIStrings.type)}</th>
             <th id="size" width="60px" align="right" weight="1" fixed sortable>${i18nString(UIStrings.totalBytes)}</th>
             <th id="unused-size" width="100px" align="right" weight="1" fixed sortable sort="descending">${
                 i18nString(UIStrings.unusedBytes)}</th>
             <th id="bars" width="250px" weight="1" sortable>${i18nString(UIStrings.usageVisualization)}</th>
           </tr>
           ${repeat(input.items, info => info.url, info => renderItem(info, input))}
         </table>`}>
       </devtools-data-grid>`,
       target);
   // clang-format on
 };

 export class CoverageListView extends UI.Widget.VBox {
   #highlightRegExp: RegExp|null;
   #coverageInfo: CoverageListItem[] = [];
   #selectedUrl: Platform.DevToolsPath.UrlString|null = null;
   #maxSize = 0;
   #view: View;

   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true, delegatesFocus: true});
     this.#view = view;
     this.#highlightRegExp = null;
   }

   set highlightRegExp(highlightRegExp: RegExp|null) {
     this.#highlightRegExp = highlightRegExp;
     this.requestUpdate();
   }

   get highlightRegExp(): RegExp|null {
     return this.#highlightRegExp;
   }

   set coverageInfo(coverageInfo: CoverageListItem[]) {
     this.#coverageInfo = coverageInfo;
     this.#maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size), 0);
     this.requestUpdate();
   }

   get coverageInfo(): CoverageListItem[] {
     return this.#coverageInfo;
   }

   override performUpdate(): void {
     const input: ViewInput = {
       items: this.#coverageInfo,
       selectedUrl: this.#selectedUrl,
       maxSize: this.#maxSize,
       onOpen: (url: Platform.DevToolsPath.UrlString) => {
         this.selectedUrl = url;
       },
       highlightRegExp: this.#highlightRegExp,
     };
     this.#view(input, {}, this.contentElement);
   }

   reset(): void {
     this.#coverageInfo = [];
     this.#maxSize = 0;
     this.requestUpdate();
   }

   set selectedUrl(url: Platform.DevToolsPath.UrlString|null) {
     const info = this.#coverageInfo.find(info => info.url === url);
     if (!info) {
       return;
     }
     if (this.#selectedUrl !== url) {
       this.#selectedUrl = url as Platform.DevToolsPath.UrlString;
       this.requestUpdate();
     }
     const sourceCode = url ? Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url) : null;
     if (!sourceCode) {
       return;
     }

     void Common.Revealer.reveal(sourceCode);
   }

   get selectedUrl(): Platform.DevToolsPath.UrlString|null {
     return this.#selectedUrl;
   }
 }

 let percentageFormatter: Intl.NumberFormat|null = null;

 function getPercentageFormatter(): Intl.NumberFormat {
   if (!percentageFormatter) {
     percentageFormatter = new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
       style: 'percent',
       maximumFractionDigits: 1,
     });
   }
   return percentageFormatter;
 }

 let bytesFormatter: Intl.NumberFormat|null = null;

 function getBytesFormatter(): Intl.NumberFormat {
   if (!bytesFormatter) {
     bytesFormatter = new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale);
   }
   return bytesFormatter;
 }

 function renderItem(info: CoverageListItem, input: ViewInput): TemplateResult {
   function highlightRange(textContent: string): string {
     const matches = input.highlightRegExp?.exec(textContent);
     return matches?.length ? `${matches.index},${matches[0].length}` : '';
   }

   const splitURL = /^(.*)(\/[^/]*)$/.exec(info.url);
   // clang-format off
   return html`
     <style>${coverageListViewStyles}</style>
     <tr data-url=${info.url} selected=${info.url === input.selectedUrl}
         @open=${() => input.onOpen(info.url)}>
       <td data-value=${info.url} title=${info.url} aria-label=${info.url}>
         <devtools-highlight ranges=${highlightRange(info.url)} class="url-outer" aria-hidden="true">
           <div class="url-prefix">${splitURL ? splitURL[1] : info.url}</div>
           <div class="url-suffix">${splitURL ? splitURL[2] : ''}</div>
         </devtools-highlight>
       </td>
       <td data-value=${coverageTypeToString(info.type)}
           title=${info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.jsCoverageWithPerFunction) :
                       info.type & CoverageType.JAVA_SCRIPT          ? i18nString(UIStrings.jsCoverageWithPerBlock) :
                                                                       ''}>
         ${coverageTypeToString(info.type)}
       </td>
       <td data-value=${info.size} aria-label=${i18nString(UIStrings.sBytes, {n: info.size || 0})}>
         <span>${formatBytes(info.size)}</span>
       </td>
       <td data-value=${info.unusedSize} aria-label=${i18nString(UIStrings.sBytesS, {n: info.unusedSize, percentage: formatPercent(info.unusedPercentage)})}>
         <span>${formatBytes(info.unusedSize)}</span>
         <span class="percent-value">
           ${formatPercent(info.unusedPercentage)}
         </span>
       </td>
       <td data-value=${info.unusedSize} aria-label=${i18nString(UIStrings.sOfFileUnusedSOfFileUsed, {PH1: formatPercent(info.unusedPercentage), PH2: formatPercent(info.usedPercentage)})}>
         <div class="bar-container">
           ${info.unusedSize > 0 ? html`
             <div class="bar bar-unused-size"
                 title=${
                   info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.sBytesSBelongToFunctionsThatHave, {PH1: info.unusedSize, PH2: formatPercent(info.unusedPercentage)}) :
                   info.type & CoverageType.JAVA_SCRIPT              ? i18nString(UIStrings.sBytesSBelongToBlocksOf, {PH1: info.unusedSize, PH2: formatPercent(info.unusedPercentage)}) :
                                                                       ''}
                   style=${styleMap({width: ((info.unusedSize / input.maxSize) * 100 || 0) + '%'})}>
             </div>` : nothing}
           ${info.usedSize > 0 ? html`
             <div class="bar bar-used-size"
                   title=${
                     info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.sBytesSBelongToFunctionsThatHaveExecuted, {PH1: info.usedSize, PH2: formatPercent(info.usedPercentage)}) :
                     info.type & CoverageType.JAVA_SCRIPT              ? i18nString(UIStrings.sBytesSBelongToBlocksOfJavascript, {PH1: info.usedSize, PH2: formatPercent(info.usedPercentage)}) :
                                                                         ''}
                 style=${styleMap({width:((info.usedSize / input.maxSize) * 100 || 0) + '%'})}>
             </div>` : nothing}
         </div>
       </td>
       ${info.sources.length > 0 ? html`
         <td><table>
           ${repeat(info.sources, source => source.url, source => renderItem(source, input))}
         </table></td>` : nothing}
     </tr>`;
   // clang-format on
 }
	// Copyright 2017 The Chromium Authors
	// Use of this source code is governed by a BSD-style license that can be
	// found in the LICENSE file.

	import '../../ui/components/highlighting/highlighting.js';
	import '../../ui/legacy/components/data_grid/data_grid.js';

	import * as Common from '../../core/common/common.js';
	import * as i18n from '../../core/i18n/i18n.js';
	import type * as Platform from '../../core/platform/platform.js';
	import * as Workspace from '../../models/workspace/workspace.js';
	import * as UI from '../../ui/legacy/legacy.js';
	import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';

	import coverageListViewStyles from './coverageListView.css.js';
	import {CoverageType} from './CoverageModel.js';

	export interface CoverageListItem {
	url: Platform.DevToolsPath.UrlString;
	type: CoverageType;
	size: number;
	usedSize: number;
	unusedSize: number;
	usedPercentage: number;
	unusedPercentage: number;
	sources: CoverageListItem[];
	isContentScript: boolean;
	generatedUrl?: Platform.DevToolsPath.UrlString;
	}

	const UIStrings = {
	/**
	* @description Text that appears on a button for the css resource type filter.
	*/
	css: 'CSS',
	/**
	* @description Text in Coverage List View of the Coverage tab
	*/
	jsPerFunction: 'JS (per function)',
	/**
	* @description Text in Coverage List View of the Coverage tab
	*/
	jsPerBlock: 'JS (per block)',
	/**
	* @description Text for web URLs
	*/
	url: 'URL',
	/**
	* @description Text that refers to some types
	*/
	type: 'Type',
	/**
	* @description Text in Coverage List View of the Coverage tab
	*/
	totalBytes: 'Total Bytes',
	/**
	* @description Text in Coverage List View of the Coverage tab
	*/
	unusedBytes: 'Unused Bytes',
	/**
	* @description Text in the Coverage List View of the Coverage Tab
	*/
	usageVisualization: 'Usage Visualization',
	/**
	* @description Data grid name for Coverage data grids
	*/
	codeCoverage: 'Code Coverage',
	/**
	* @description Cell title in Coverage List View of the Coverage tab. The coverage tool tells
	*developers which functions (logical groups of lines of code) were actually run/executed. If a
	*function does get run, then it is marked in the UI to indicate that it was covered.
	*/
	jsCoverageWithPerFunction:
	'JS coverage with per function granularity: Once a function was executed, the whole function is marked as covered.',
	/**
	* @description Cell title in Coverage List View of the Coverage tab. The coverage tool tells
	*developers which blocks (logical groups of lines of code, smaller than a function) were actually
	*run/executed. If a block does get run, then it is marked in the UI to indicate that it was
	*covered.
	*/
	jsCoverageWithPerBlock:
	'JS coverage with per block granularity: Once a block of JavaScript was executed, that block is marked as covered.',
	/**
	* @description Accessible text for the value in bytes in memory allocation or coverage view.
	*/
	sBytes: '{n, plural, =1 {# byte} other {# bytes}}',
	/**
	* @description Accessible text for the unused bytes column in the coverage tool that describes the total unused bytes and percentage of the file unused.
	* @example {88%} percentage
	*/
	sBytesS: '{n, plural, =1 {# byte, {percentage}} other {# bytes, {percentage}}}',
	/**
	* @description Tooltip text for the bar in the coverage list view of the coverage tool that illustrates the relation between used and unused bytes.
	* @example {1000} PH1
	* @example {12.34} PH2
	*/
	sBytesSBelongToFunctionsThatHave: '{PH1} bytes ({PH2}) belong to functions that have not (yet) been executed.',
	/**
	* @description Tooltip text for the bar in the coverage list view of the coverage tool that illustrates the relation between used and unused bytes.
	* @example {1000} PH1
	* @example {12.34} PH2
	*/
	sBytesSBelongToBlocksOf: '{PH1} bytes ({PH2}) belong to blocks of JavaScript that have not (yet) been executed.',
	/**
	* @description Message in Coverage View of the Coverage tab
	* @example {1000} PH1
	* @example {12.34} PH2
	*/
	sBytesSBelongToFunctionsThatHaveExecuted: '{PH1} bytes ({PH2}) belong to functions that have executed at least once.',
	/**
	* @description Message in Coverage View of the Coverage tab
	* @example {1000} PH1
	* @example {12.34} PH2
	*/
	sBytesSBelongToBlocksOfJavascript:
	'{PH1} bytes ({PH2}) belong to blocks of JavaScript that have executed at least once.',
	/**
	* @description Accessible text for the visualization column of coverage tool. Contains percentage of unused bytes to used bytes.
	* @example {12.3} PH1
	* @example {12.3} PH2
	*/
	sOfFileUnusedSOfFileUsed: '{PH1} % of file unused, {PH2} % of file used',
	} as const;
	const str_ = i18n.i18n.registerUIStrings('panels/coverage/CoverageListView.ts', UIStrings);
	const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
	const {styleMap, repeat} = Directives;

	export function coverageTypeToString(type: CoverageType): string {
	const types = [];
	if (type & CoverageType.CSS) {
	types.push(i18nString(UIStrings.css));
	}
	if (type & CoverageType.JAVA_SCRIPT_PER_FUNCTION) {
	types.push(i18nString(UIStrings.jsPerFunction));
	} else if (type & CoverageType.JAVA_SCRIPT) {
	types.push(i18nString(UIStrings.jsPerBlock));
	}
	return types.join('+');
	}

	interface ViewInput {
	items: CoverageListItem[];
	selectedUrl: Platform.DevToolsPath.UrlString\|null;
	maxSize: number;
	onOpen: (url: Platform.DevToolsPath.UrlString) => void;
	highlightRegExp: RegExp\|null;
	}

	type View = (input: ViewInput, output: object, target: HTMLElement) => void;

	const formatBytes = (value: number\|undefined): string => {
	return getBytesFormatter().format(value ?? 0);
	};
	const formatPercent = (value: number\|undefined): string => {
	return getPercentageFormatter().format(value ?? 0);
	};
	export const DEFAULT_VIEW: View = (input, _output, target) => {
	// clang-format off
	render(html`
	<style>${coverageListViewStyles}</style>
	<devtools-data-grid class="flex-auto" name=${i18nString(UIStrings.codeCoverage)} striped autofocus resize="last"
	.template=${html`
	<table>
	<tr>
	<th id="url" width="250px" weight="3" sortable>${i18nString(UIStrings.url)}</th>
	<th id="type" width="45px" weight="1" fixed sortable>${i18nString(UIStrings.type)}</th>
	<th id="size" width="60px" align="right" weight="1" fixed sortable>${i18nString(UIStrings.totalBytes)}</th>
	<th id="unused-size" width="100px" align="right" weight="1" fixed sortable sort="descending">${
	i18nString(UIStrings.unusedBytes)}</th>
	<th id="bars" width="250px" weight="1" sortable>${i18nString(UIStrings.usageVisualization)}</th>
	</tr>
	${repeat(input.items, info => info.url, info => renderItem(info, input))}
	</table>`}>
	</devtools-data-grid>`,
	target);
	// clang-format on
	};

	export class CoverageListView extends UI.Widget.VBox {
	#highlightRegExp: RegExp\|null;
	#coverageInfo: CoverageListItem[] = [];
	#selectedUrl: Platform.DevToolsPath.UrlString\|null = null;
	#maxSize = 0;
	#view: View;

	constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
	super(element, {useShadowDom: true, delegatesFocus: true});
	this.#view = view;
	this.#highlightRegExp = null;
	}

	set highlightRegExp(highlightRegExp: RegExp\|null) {
	this.#highlightRegExp = highlightRegExp;
	this.requestUpdate();
	}

	get highlightRegExp(): RegExp\|null {
	return this.#highlightRegExp;
	}

	set coverageInfo(coverageInfo: CoverageListItem[]) {
	this.#coverageInfo = coverageInfo;
	this.#maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size), 0);
	this.requestUpdate();
	}

	get coverageInfo(): CoverageListItem[] {
	return this.#coverageInfo;
	}

	override performUpdate(): void {
	const input: ViewInput = {
	items: this.#coverageInfo,
	selectedUrl: this.#selectedUrl,
	maxSize: this.#maxSize,
	onOpen: (url: Platform.DevToolsPath.UrlString) => {
	this.selectedUrl = url;
	},
	highlightRegExp: this.#highlightRegExp,
	};
	this.#view(input, {}, this.contentElement);
	}

	reset(): void {
	this.#coverageInfo = [];
	this.#maxSize = 0;
	this.requestUpdate();
	}

	set selectedUrl(url: Platform.DevToolsPath.UrlString\|null) {
	const info = this.#coverageInfo.find(info => info.url === url);
	if (!info) {
	return;
	}
	if (this.#selectedUrl !== url) {
	this.#selectedUrl = url as Platform.DevToolsPath.UrlString;
	this.requestUpdate();
	}
	const sourceCode = url ? Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url) : null;
	if (!sourceCode) {
	return;
	}

	void Common.Revealer.reveal(sourceCode);
	}

	get selectedUrl(): Platform.DevToolsPath.UrlString\|null {
	return this.#selectedUrl;
	}
	}

	let percentageFormatter: Intl.NumberFormat\|null = null;

	function getPercentageFormatter(): Intl.NumberFormat {
	if (!percentageFormatter) {
	percentageFormatter = new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
	style: 'percent',
	maximumFractionDigits: 1,
	});
	}
	return percentageFormatter;
	}

	let bytesFormatter: Intl.NumberFormat\|null = null;

	function getBytesFormatter(): Intl.NumberFormat {
	if (!bytesFormatter) {
	bytesFormatter = new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale);
	}
	return bytesFormatter;
	}

	function renderItem(info: CoverageListItem, input: ViewInput): TemplateResult {
	function highlightRange(textContent: string): string {
	const matches = input.highlightRegExp?.exec(textContent);
	return matches?.length ? `${matches.index},${matches[0].length}` : '';
	}

	const splitURL = /^(.)(\/[^/])$/.exec(info.url);
	// clang-format off
	return html`
	<style>${coverageListViewStyles}</style>
	<tr data-url=${info.url} selected=${info.url === input.selectedUrl}
	@open=${() => input.onOpen(info.url)}>
	<td data-value=${info.url} title=${info.url} aria-label=${info.url}>
	<devtools-highlight ranges=${highlightRange(info.url)} class="url-outer" aria-hidden="true">
	<div class="url-prefix">${splitURL ? splitURL[1] : info.url}</div>
	<div class="url-suffix">${splitURL ? splitURL[2] : ''}</div>
	</devtools-highlight>
	</td>
	<td data-value=${coverageTypeToString(info.type)}
	title=${info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.jsCoverageWithPerFunction) :
	info.type & CoverageType.JAVA_SCRIPT ? i18nString(UIStrings.jsCoverageWithPerBlock) :
	''}>
	${coverageTypeToString(info.type)}
	</td>
	<td data-value=${info.size} aria-label=${i18nString(UIStrings.sBytes, {n: info.size \|\| 0})}>
	<span>${formatBytes(info.size)}</span>
	</td>
	<td data-value=${info.unusedSize} aria-label=${i18nString(UIStrings.sBytesS, {n: info.unusedSize, percentage: formatPercent(info.unusedPercentage)})}>
	<span>${formatBytes(info.unusedSize)}</span>
	<span class="percent-value">
	${formatPercent(info.unusedPercentage)}
	</span>
	</td>
	<td data-value=${info.unusedSize} aria-label=${i18nString(UIStrings.sOfFileUnusedSOfFileUsed, {PH1: formatPercent(info.unusedPercentage), PH2: formatPercent(info.usedPercentage)})}>
	<div class="bar-container">
	${info.unusedSize > 0 ? html`
	<div class="bar bar-unused-size"
	title=${
	info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.sBytesSBelongToFunctionsThatHave, {PH1: info.unusedSize, PH2: formatPercent(info.unusedPercentage)}) :
	info.type & CoverageType.JAVA_SCRIPT ? i18nString(UIStrings.sBytesSBelongToBlocksOf, {PH1: info.unusedSize, PH2: formatPercent(info.unusedPercentage)}) :
	''}
	style=${styleMap({width: ((info.unusedSize / input.maxSize) * 100 \|\| 0) + '%'})}>
	</div>` : nothing}
	${info.usedSize > 0 ? html`
	<div class="bar bar-used-size"
	title=${
	info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.sBytesSBelongToFunctionsThatHaveExecuted, {PH1: info.usedSize, PH2: formatPercent(info.usedPercentage)}) :
	info.type & CoverageType.JAVA_SCRIPT ? i18nString(UIStrings.sBytesSBelongToBlocksOfJavascript, {PH1: info.usedSize, PH2: formatPercent(info.usedPercentage)}) :
	''}
	style=${styleMap({width:((info.usedSize / input.maxSize) * 100 \|\| 0) + '%'})}>
	</div>` : nothing}
	</div>
	</td>
	${info.sources.length > 0 ? html`
	<td><table>
	${repeat(info.sources, source => source.url, source => renderItem(source, input))}
	</table></td>` : nothing}
	</tr>`;
	// clang-format on
	}