// Copyright 2012 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {assert} from 'chrome://resources/js/assert.js';
import {CustomElement} from 'chrome://resources/js/custom_element.js';
import type {AngleFeature, BrowserBridge, ClientInfo, FeatureStatus, Problem} from './browser_bridge.js';
import {getTemplate} from './info_view.html.js';
import {VulkanInfo} from './vulkan_info.js';
/**
* Given a blob and a filename, prompts user to
* save as a file.
*/
const saveData = (function() {
const a = document.createElement('a');
a.style.display = 'none';
document.body.appendChild(a);
return function saveData(blob: Blob, fileName: string) {
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
};
}());
function getProblemTextAndUrl(problem: Problem) {
let text = problem.description;
let url = '';
const pattern = ' Please update your graphics driver via this link: ';
const pos = text.search(pattern);
if (pos > 0) {
url = text.substring(pos + pattern.length);
text = text.substring(0, pos);
}
return {text, url};
}
function formatANGLEBug(bug: string) {
if (bug.includes('crbug.com/')) {
return bug.match(/\d+/)!.toString();
} else if (bug.includes('anglebug.com/')) {
return `anglebug:${bug.match(/\d+/)}`;
} else {
return bug;
}
}
/**
* Calls a function to insert an element between every element
* of an existing array
*/
function insertBetweenElements<Type>(
array: Type[], fn: (i: number) => Type): Type[] {
const newArray = array.slice(0, 1);
for (let i = 1; i < array.length; ++i) {
newArray.push(fn(i), array[i] as Type);
}
return newArray;
}
/** Inserts <span>, </span> between every element in array */
function separateByCommas(array: HTMLElement[], comma = ', ') {
return insertBetweenElements(array, () => createElem('span', comma));
}
/**
* Conditionally add elements to an array
*
* ```js
* const array = [
* "carrots",
* "potatoes",
* ...addIf(haveFruit, () => ["apple", "cherry"]),
* ]
* ```
*
* The function is not called if `cond` is false.
*/
function addIf<T>(cond: boolean, fn: () => T[]) {
return cond ? fn() : [];
}
/**
* Word wraps a string, prefixing each line.
*/
function wordWrap(s: string, prefix = ' ', maxLength?: number) {
maxLength = maxLength || (80 - prefix.length);
const lines: string[] = [];
const words = s.split(' ');
const line: string[] = [];
let length = 0;
for (const word of words) {
if (length + word.length + 1 >= maxLength) {
lines.push(line.join(' '));
line.length = 0;
length = 0;
}
line.push(word);
length += word.length + 1;
}
if (line.length) {
lines.push(line.join(' '));
}
return lines.map(s => `${prefix}${s}`).join('\n');
}
interface Attributes {
[key: string]: string|Attributes;
}
/**
* Creates an HTMLElement with optional attributes and children
*
* Examples:
*
* ```js
* br = createElem('br');
* p = createElem('p', 'hello world');
* a = createElem('a', {href: 'https://google.com', textContent: 'Google'});
* ul = createElement('ul', {}, [
* createElem('li', 'apple'),
* createElem('li', 'banana'),
* ]);
* h1 = createElem('h1', { style: { color: 'red' }, textContent: 'Title'})
* ```
*/
function createElem(
tag: string, attrs: Attributes|string = {}, children: HTMLElement[] = []) {
const elem = document.createElement(tag) as HTMLElement;
if (typeof attrs === 'string') {
elem.textContent = attrs;
} else {
const elemAsAttribs = elem as unknown as Attributes;
for (const [key, value] of Object.entries(attrs)) {
if (typeof value === 'function' && key.startsWith('on')) {
const eventName = key.substring(2).toLowerCase();
elem.addEventListener(eventName, value, {passive: false});
} else if (typeof value === 'object') {
for (const [k, v] of Object.entries(value)) {
(elemAsAttribs[key] as Attributes)[k] = v;
}
} else if (elemAsAttribs[key] === undefined) {
elem.setAttribute(key, value);
} else {
elemAsAttribs[key] = value;
}
}
}
for (const child of children) {
elem.appendChild(child);
}
return elem;
}
export interface Data {
description: string;
id?: string;
value: string;
}
export interface ArrayData {
description: string;
value: Data[];
}
/** Creates the td elements for a table row */
function createInfoElements(
data: Data|ArrayData, padSize: number): HTMLElement[] {
const desc = createElem('td', {}, [
createElem('span', data.description.padEnd(padSize)),
createHidden(':'),
]);
if (Array.isArray(data.value)) {
return [
desc,
createElem('td', {}, [createInfoTable((data as ArrayData).value)]),
];
} else {
return [
desc,
createElem('td', {
textContent: data.value.toString().trim(),
id: (data as Data).id!,
}),
];
}
}
/** Creates a table from the given data */
function createInfoTable(data: Data[]|ArrayData[]) {
const longestDesc = Math.min(
32,
(data as Data[])
.reduce(
(longest, {description}) => Math.max(longest, description.length),
0));
return createElem('table', {className: 'info-table'}, [
createElem(
'tbody', {},
data.map(
data => createElem('tr', {}, createInfoElements(data, longestDesc)),
)),
]);
}
/**
* Creates a hidden span that will only be used when the when
* the user copies or downloads text.
*/
function createHidden(textContent: string) {
return createElem('span', {className: 'copy', textContent});
}
/**
* Given a string or Attributes returns the `textContent`
* and the attributes with `textContent` removed
*/
function separateTextContentFromAttributes(attrs: Attributes|string = {}) {
return typeof attrs === 'string' ? {textContent: attrs, attribs: {}} : {
textContent: attrs['textContent'] as string || '',
attribs: {...attrs, textContent: ''},
};
}
/**
* Creates a list item with a hidden `* ` span prepended for copy
*/
function createLi(attrs: Attributes|string = {}, children: HTMLElement[] = []) {
const {textContent, attribs} = separateTextContentFromAttributes(attrs);
return createElem('li', attribs, [
createHidden('* '),
createElem('span', textContent),
...children,
]);
}
/**
* Creates a heading tag with hidden text for copying
* so the copy will be like markdown.
*/
function createHeading(
tag: string, padChar: string, attrs: Attributes|string = {},
children: HTMLElement[] = []) {
const {textContent, attribs} = separateTextContentFromAttributes(attrs);
return createElem(tag, attribs, [
createHidden('\n\n'),
createElem('span', textContent),
createHidden(`\n${''.padEnd(textContent.length, padChar)}`),
...children,
]);
}
/**
* Creates a link pair with an anchor tag that is visible
* in the page and hidden text for copying so the copy
* will appear as (href)
*/
function createLinkPair(textContent: string, href: string) {
return [
createElem('a', {
className: 'hide-on-copy',
textContent,
href,
}),
createHidden(`(${href})`),
];
}
/**
* Get a string data value
*/
function getDataValue(data: Data|ArrayData): string {
return Array.isArray(data.value) ?
data.value.map(data => getDataValue(data)).join(',') :
data.value;
}
/**
* Go through Datas and find ones that start with 'GPUx'
* return the first with who's value ends itn '*ACTIVE*'
* or else the first one.
* @param data
* @returns
*/
function getActiveGPU(data: Data[]|ArrayData[]) {
// get list of GPUs
const gpus =
[...data].filter(({description}) => /^GPU\d+$/.test(description));
// get list of active GPUs
const active = gpus.filter(data => getDataValue(data).endsWith('*ACTIVE*'));
const all = [...active, ...gpus];
// get the first one
if (all.length > 0) {
const gpu = getDataValue(all[0]!);
const parts = gpu.split(', ')[0]!.split('=');
return parts.length === 2 && parts[0]! === 'VENDOR' ? parseInt(parts[1]!) :
0;
}
return 0;
}
/** convert a value to a string or empty string if null or undefined */
function safeString(value: any) {
return typeof value === 'undefined' || value === null ? '' : value.toString();
}
const kSections = {
featureStatus: ['Graphics Feature Status', 'ul'],
clientInfo: ['Version Information', 'div'],
basicInfo: ['Driver Information', 'div'],
workarounds: ['Driver Bug Workarounds', 'ul'],
problems: ['Problems Detected', 'ul'],
angleFeatures: ['ANGLE Features', 'ul'],
dawnInfo: ['Dawn Info', 'ul'],
compositorInfo: ['Compositor Information', 'div'],
gpuMemoryBufferInfo: ['GpuMemoryBuffers Status', 'div'],
displayInfo: ['Display(s) Information', 'div'],
videoAccelerationInfo: ['Video Acceleration Information', 'div'],
vulkanInfo: ['Vulkan Information', 'div'],
devicePerfInfo: ['Device Performance Information', 'div'],
diagnostics: ['Diagnostics', 'div'],
basicInfoForHardwareGpu: ['Driver Information for Hardware GPU', 'div'],
featureStatusForHardwareGpu:
['Graphics Feature Status for Hardware GPU', 'ul'],
workaroundsForHardwareGpu: ['Driver Bug Workarounds for Hardware GPU', 'ul'],
problemsForHardwareGpu: ['Problems Detected for Hardware GPU', 'ul'],
logMessages: ['Log Messages', 'ul'],
} as const;
interface Section {
div: HTMLElement;
list: HTMLElement;
wrap: HTMLElement;
}
type Sections = {
[key in keyof typeof kSections]: Section
};
/**
* @fileoverview This view displays information on the current GPU
* hardware. Its primary usefulness is to allow users to copy-paste
* their data in an easy to read format for bug reports.
*/
export class InfoViewElement extends CustomElement {
browserBridge?: BrowserBridge;
sections?: Sections;
static override get template() {
return getTemplate();
}
addBrowserBridgeListeners(browserBridge: BrowserBridge) {
browserBridge.addEventListener(
'gpuInfoUpdate', this.refresh.bind(this, browserBridge));
browserBridge.addEventListener(
'logMessagesChange', this.refresh.bind(this, browserBridge));
browserBridge.addEventListener(
'clientInfoChange', this.refresh.bind(this, browserBridge));
this.refresh(browserBridge);
}
/**
* public interface for testing
*/
getInfo(category: string, feature: string = ''): string|string[] {
const gpuInfo = this.browserBridge?.gpuInfo;
if (!gpuInfo) {
throw new Error('no gpuInfo');
}
switch (category) {
case 'feature-status-for-hardware-gpu-list':
return safeString(
gpuInfo.featureStatusForHardwareGpu?.featureStatus[feature]);
case 'feature-status-list':
return safeString(gpuInfo.featureStatus?.featureStatus[feature]);
case 'active-gpu-for-hardware':
return safeString(getActiveGPU(gpuInfo.basicInfoForHardwareGpu));
case 'active-gpu':
return safeString(getActiveGPU(gpuInfo.basicInfo));
case 'workarounds':
return (gpuInfo.featureStatus || gpuInfo.featureStatusForHardwareGpu)
?.workarounds ||
[];
default:
throw new Error(`unknown category: ${category}`);
}
}
getSelectionText(all: boolean) {
const dynamicStyle = this.getRequiredElement('#dynamic-style')!;
dynamicStyle.textContent = `
#content { white-space: pre !important; }
.copy { display: initial; }
.hide-on-copy { display: none; }
`;
const contentDiv = this.getRequiredElement('#content')!;
// document.getSelection doesn't work through shadowDom
// and shadowRoot getSelection is non-standard chromium
const shadowDoc = this.shadowRoot! as unknown as Document;
const selection = shadowDoc.getSelection()!;
if (all) {
selection.removeAllRanges();
selection.selectAllChildren(contentDiv);
} else {
const position =
selection.anchorNode?.compareDocumentPosition(selection.focusNode!);
const [startNode, startOffset, endNode, endOffset] =
((position || 0) & Node.DOCUMENT_POSITION_FOLLOWING) ?
[
selection.anchorNode!,
selection.anchorOffset,
selection.focusNode!,
selection.focusOffset,
] :
[
selection.focusNode!,
selection.focusOffset,
selection.anchorNode!,
selection.anchorOffset,
];
if (startOffset === 0) {
// Given the selection between > and <
//
// * >abc
// * def<
//
// We need to move the start of the selection back to the parent
// otherwise the selection above will copied as
//
// abc
// * def
//
// since the * (the list item's bullet) is not selectable directly.
const li = startNode.parentElement?.closest('li');
selection.setBaseAndExtent(
li || startNode.parentNode!, 0, endNode, endOffset);
}
}
// Get text and remove superfluous lines and whitespace.
const text = selection.toString()
.replace(/\s*\n\s*\n\s*\n+/g, '\n\n')
.replace(/\t/g, ' ')
.trim();
if (all) {
shadowDoc.getSelection()?.removeAllRanges();
}
dynamicStyle.textContent = '';
return text;
}
connectedCallback() {
// Add handler to 'download report to clipboard' button
const downloadButton = this.getRequiredElement('#download-to-file');
assert(downloadButton);
downloadButton.onclick = (() => {
const text = this.getSelectionText(true);
const blob = new Blob([text], {type: 'text/text'});
const filename = `about-gpu-${
new Date().toISOString().replace(/[^a-z0-9-]/ig, '-')}.txt`;
saveData(blob, filename);
});
// Add a copy handler to massage the text for plain text.
document.addEventListener('copy', (event) => {
const text = this.getSelectionText(false);
event!.clipboardData!.setData('text/plain', text);
event.preventDefault();
});
const contentDiv = this.getRequiredElement('#content')!;
this.sections = Object.fromEntries(Object.entries(kSections).map(
([propName, [title, tag]]) => {
const div = createHeading('h3', '=', title);
const list = createElem(tag);
const wrap = createElem('div', {}, [
div,
list,
]);
contentDiv.appendChild(wrap);
return [propName, {div, list, wrap}];
})) as Sections;
}
/**
* Updates the view based on its currently known data
*/
refresh(browserBridge: BrowserBridge) {
this.browserBridge = browserBridge;
let clientInfo: ClientInfo;
function createSourcePermalink(
revisionIdentifier: string, filepath: string): string {
if (revisionIdentifier.length !== 40) {
// If the revision id isn't a hash, just use the 0.0.0.0 version
// from the Chrome version string "Chrome/0.0.0.0".
revisionIdentifier = clientInfo.version.split('/')[1]!;
}
return `https://chromium.googlesource.com/chromium/src/+/${
revisionIdentifier}/${filepath}`;
}
const sections = this.sections!;
// Client info
if (browserBridge.clientInfo) {
clientInfo = browserBridge.clientInfo;
this.setTable_(sections.clientInfo, [
{description: 'Data exported', value: (new Date()).toISOString()},
{description: 'Chrome version', value: clientInfo.version},
{description: 'Operating system', value: clientInfo.operating_system},
{
description: 'Software rendering list URL',
value: createSourcePermalink(
clientInfo.revision_identifier,
'gpu/config/software_rendering_list.json'),
},
{
description: 'Driver bug list URL',
value: createSourcePermalink(
clientInfo.revision_identifier,
'gpu/config/gpu_driver_bug_list.json'),
},
{description: 'ANGLE commit id', value: clientInfo.angle_commit_id},
{
description: '2D graphics backend',
value: clientInfo.graphics_backend,
},
{description: 'Command Line', value: clientInfo.command_line},
]);
} else {
sections.clientInfo.list.textContent = '... loading ...';
}
const gpuInfo = browserBridge.gpuInfo;
if (gpuInfo) {
// Not using jstemplate here for blocklist status because we construct
// href from data, which jstemplate can't seem to do.
if (gpuInfo.featureStatus) {
this.appendFeatureInfo_(
gpuInfo.featureStatus, sections.featureStatus.list,
sections.problems, sections.workarounds);
} else {
sections.featureStatus.list.textContent = '';
sections.problems.list.hidden = true;
sections.workarounds.list.hidden = true;
}
const hideHardware = !gpuInfo.featureStatusForHardwareGpu;
sections.basicInfoForHardwareGpu.div.hidden = hideHardware;
sections.featureStatusForHardwareGpu.div.hidden = hideHardware;
sections.problemsForHardwareGpu.div.hidden = hideHardware;
sections.workaroundsForHardwareGpu.div.hidden = hideHardware;
if (!hideHardware) {
this.appendFeatureInfo_(
gpuInfo.featureStatusForHardwareGpu,
sections.featureStatusForHardwareGpu.list,
sections.problemsForHardwareGpu,
sections.workaroundsForHardwareGpu);
this.setTable_(
sections.basicInfoForHardwareGpu, gpuInfo.basicInfoForHardwareGpu);
}
this.setTable_(sections.basicInfo, gpuInfo.basicInfo);
this.setTable_(sections.compositorInfo, gpuInfo.compositorInfo);
this.setTable_(sections.gpuMemoryBufferInfo, gpuInfo.gpuMemoryBufferInfo);
this.setTable_(sections.displayInfo, gpuInfo.displayInfo);
this.setTable_(
sections.videoAccelerationInfo, gpuInfo.videoAcceleratorsInfo);
this.updateSectionList_(
sections.angleFeatures, gpuInfo.ANGLEFeatures,
angleFeature => this.createAngleFeatureEl_(angleFeature));
this.updateSection_(sections.dawnInfo, () => {
const show = !!gpuInfo.dawnInfo && gpuInfo.dawnInfo.length > 0;
if (show) {
this.createDawnInfoEl_(sections.dawnInfo.list, gpuInfo.dawnInfo!);
}
return show;
});
this.updateSectionTable_(sections.diagnostics, gpuInfo.diagnostics);
this.setTable_(
sections.vulkanInfo,
gpuInfo.vulkanInfo ? [{
'description': 'info',
'value': new VulkanInfo(gpuInfo.vulkanInfo).toString(),
'id': 'vulkan-info-value',
}] :
[]);
this.setTable_(sections.devicePerfInfo, gpuInfo.devicePerfInfo);
} else {
sections.basicInfo.list.textContent = '... loading ...';
sections.diagnostics.div.hidden = true;
sections.featureStatus.list.textContent = '';
sections.problems.div.hidden = true;
sections.dawnInfo.div.hidden = true;
}
// Log messages
sections.logMessages.list.textContent = '';
browserBridge.logMessages.forEach(messageObj => {
sections.logMessages.list.appendChild(
createElem('li', `${messageObj.header}: ${messageObj.message}`));
});
}
/**
* Clears a section and then updates it by calling fn. If fn returns false
* it hides the section.
*/
private updateSection_(section: Section, fn: () => boolean) {
section.list.textContent = '';
const show = fn();
section.div.hidden = !show;
}
/**
* Clears and and updates a section from a list. If the list is empty it
* hides the section
*/
private updateSectionList_<T>(
section: Section, list: T[]|undefined, fn: (item: T) => HTMLElement) {
this.updateSection_(section, () => {
if (list) {
for (const item of list) {
section.list.appendChild(fn(item));
}
}
return !!list && list.length > 0;
});
}
/** Update a table, hiding it of the table has no elements */
private updateSectionTable_(
section: Section, inputData: Data[]|ArrayData[]|undefined) {
this.updateSection_(section, () => {
this.setTable_(section, inputData);
return !!inputData && inputData.length > 0;
});
}
private appendFeatureInfo_(
featureInfo: FeatureStatus, featureStatusList: HTMLElement,
problems: Section, workarounds: Section) {
// Feature map
const featureLabelMap: Record<string, string> = {
'2d_canvas': 'Canvas',
'gpu_compositing': 'Compositing',
'webgl': 'WebGL',
'multisampling': 'WebGL multisampling',
'texture_sharing': 'Texture Sharing',
'video_decode': 'Video Decode',
'rasterization': 'Rasterization',
'opengl': 'OpenGL',
'metal': 'Metal',
'vulkan': 'Vulkan',
'multiple_raster_threads': 'Multiple Raster Threads',
'native_gpu_memory_buffers': 'Native GpuMemoryBuffers',
'protected_video_decode': 'Hardware Protected Video Decode',
'surface_control': 'Surface Control',
'vpx_decode': 'VPx Video Decode',
'webgl2': 'WebGL2',
'canvas_oop_rasterization': 'Canvas out-of-process rasterization',
'raw_draw': 'Raw Draw',
'video_encode': 'Video Encode',
'direct_rendering_display_compositor':
'Direct Rendering Display Compositor',
'webgpu': 'WebGPU',
'skia_graphite': 'Skia Graphite',
'webnn': 'WebNN',
};
const statusMap: Record<string, {label: string, class: string}> = {
'disabled_software': {
'label': 'Software only. Hardware acceleration disabled',
'class': 'feature-yellow',
},
'disabled_off': {'label': 'Disabled', 'class': 'feature-red'},
'disabled_off_ok': {'label': 'Disabled', 'class': 'feature-yellow'},
'unavailable_software': {
'label': 'Software only, hardware acceleration unavailable',
'class': 'feature-yellow',
},
'unavailable_off': {'label': 'Unavailable', 'class': 'feature-red'},
'unavailable_off_ok': {
'label': 'Unavailable',
'class': 'feature-yellow',
},
'enabled_readback': {
'label': 'Hardware accelerated but at reduced performance',
'class': 'feature-yellow',
},
'enabled_force': {
'label': 'Hardware accelerated on all pages',
'class': 'feature-green',
},
'enabled': {'label': 'Hardware accelerated', 'class': 'feature-green'},
'enabled_on': {'label': 'Enabled', 'class': 'feature-green'},
'enabled_force_on': {'label': 'Force enabled', 'class': 'feature-green'},
};
// feature status list
featureStatusList.textContent = '';
for (const featureName in featureInfo.featureStatus) {
const featureStatus = featureInfo.featureStatus[featureName]!;
const label = featureLabelMap[featureName];
if (!label) {
console.info('Missing featureLabel for', featureName);
}
const statusInfo = statusMap[featureStatus];
if (!statusInfo) {
console.info('Missing status for ', featureStatus);
}
featureStatusList.appendChild(createLi({}, [
createElem('span', `${label}: `),
createElem(
'span',
statusInfo ? {
textContent: statusInfo['label'],
className: statusInfo['class'],
} :
{
textContent: 'Unknown',
className: 'feature-red',
},
),
]));
}
// problems list
this.updateSectionList_(
problems, featureInfo.problems,
problem => this.createProblemEl_(problem));
// driver bug workarounds list
this.updateSectionList_(
workarounds, featureInfo.workarounds,
workaround => createLi(workaround));
}
private createProblemEl_(problem: Problem): HTMLElement {
const {text, url} = getProblemTextAndUrl(problem);
return createLi({}, [
createElem('span', text),
// add bug separator
...addIf(
problem.crBugs.length > 0, () => [createElem('span', ':\n ')]),
// add bugs
...separateByCommas(problem.crBugs.map((id) => {
const bugId = parseInt(id);
const href = `http://crbug.com/${bugId}`;
return createElem('span', {}, createLinkPair(bugId.toString(), href));
})),
// add affectedGpuSettings
...addIf(
problem.affectedGpuSettings.length > 0,
() =>
[createElem('br'),
createHidden(' '),
createElem(
'i', {},
[
createElem(
'span',
problem.tag === 'disabledFeatures' ?
'Disabled Features: ' :
'Applied Workarounds: '),
...separateByCommas(
problem.affectedGpuSettings.map(
(textContent) => createElem('span', {
textContent,
className: problem.tag === 'disabledFeatures' ?
'feature-red' :
'feature-yellow',
}),
),
',\n '),
]),
]),
// add driver update link
...addIf(
!!url,
() =>
[createElem('br'),
createHidden(' '),
createElem(
'b', {className: 'bg-yellow'},
[
createElem(
'span', 'Please update your graphics drive via '),
createElem('a', {textContent: 'this link', href: url}),
]),
]),
// for copy spacing
createElem('span', '\n\n'),
]);
}
private createAngleFeatureEl_(angleFeature: AngleFeature) {
return createLi({}, [
// Name comes first, bolded
createElem('b', angleFeature.name),
// If there's a category, it follows the name in parentheses
...addIf(
!!angleFeature.category,
() =>
[createElem('span', ` (${angleFeature.category})`),
]),
// If there's a bug link, try to parse the crbug/anglebug number
...addIf(
!!angleFeature.bug,
() =>
[createElem('span', ' '),
...createLinkPair(
formatANGLEBug(angleFeature.bug), angleFeature.bug),
]),
// Follow with a colon, and the status (colored)
createElem('span', ': '),
createElem(
'span',
angleFeature.status === 'enabled' ?
{className: 'feature-green', textContent: 'Enabled'} :
{className: 'feature-red', textContent: 'Disabled'}),
...addIf(
!!angleFeature.condition,
() =>
[createHidden('\n condition'),
createElem('span', {
className: 'feature-gray',
textContent: `: ${angleFeature.condition}`,
}),
]),
...addIf(
!!angleFeature.description,
() =>
[createElem('br'),
createElem('i', wordWrap(angleFeature.description!)),
]),
// for copy spacing
createElem('span', '\n\n'),
]);
}
private setTable_(section: Section, inputData: Data[]|ArrayData[]|undefined) {
section.list.textContent = '';
section.list.appendChild(createInfoTable(inputData || []));
}
private createDawnInfoEl_(dawnInfoList: HTMLElement, gpuDawnInfo: string[]) {
dawnInfoList.textContent = '';
let inProcessingToggles = false;
for (let i = 0; i < gpuDawnInfo.length; ++i) {
const infoString = gpuDawnInfo[i]!;
let infoEl: HTMLElement;
if (infoString.startsWith('<')) {
// GPU type and backend type.
// Add an empty line for the next adaptor.
dawnInfoList.appendChild(createElem('br'));
// e.g. <Discrete GPU> D3D12 backend
infoEl = createHeading('h3', '-', infoString);
inProcessingToggles = false;
} else if (infoString.startsWith('[')) {
// e.g. [Enabled Toggle Names]
infoEl = createHeading('h4', '-', {
className: 'dawn-info-header',
textContent: infoString,
});
if (infoString === '[WebGPU Status]' ||
infoString === '[Adapter Supported Features]') {
inProcessingToggles = false;
} else {
inProcessingToggles = true;
}
} else if (inProcessingToggles) {
// Each toggle takes 3 strings
infoEl = createLi({}, [
// The toggle name comes first, bolded.
createElem('b', `${infoString}: \n `),
// URL
...createLinkPair(gpuDawnInfo[++i]!, gpuDawnInfo[i]!),
// Description, italicized
createElem('i', `:\n${wordWrap(gpuDawnInfo[++i]!)}`),
// for copy spacing
createElem('span', '\n\n'),
]);
} else {
// Display supported extensions
infoEl = createLi(infoString);
}
dawnInfoList.appendChild(infoEl);
}
}
}
declare global {
interface HTMLElementTagNameMap {
'info-view': InfoViewElement;
}
}
customElements.define('info-view', InfoViewElement);
Codebase Browser
chromium