googlechrome
/
lighthouse
зеркало из https://github.com/GoogleChrome/lighthouse.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

misc: replace appendChild with append (#13995)

This commit is contained in:
Alex N. Jose 2022-05-16 11:55:23 -07:00 коммит произвёл GitHub
Родитель 544144df00
Коммит 4e5d5d14aa
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
21 изменённых файлов: 116 добавлений и 119 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

11
clients/extension/scripts/popup.js
Просмотреть файл

@ -53,10 +53,11 @@ function createOptionItem(text, id, isChecked) {
}
const label = document.createElement('label');
label.appendChild(input);
label.appendChild(document.createElement('span')).textContent = text;
const span = document.createElement('span');
span.textContent = text;
label.append(input, span);
const listItem = document.createElement('li');
listItem.appendChild(label);
listItem.append(label);
return listItem;
}
@ -87,11 +88,11 @@ function generateOptionsList(settings) {
SettingsController.DEFAULT_CATEGORIES.forEach(category => {
const isChecked = settings.selectedCategories.includes(category.id);
frag.appendChild(createOptionItem(category.title, category.id, isChecked));
frag.append(createOptionItem(category.title, category.id, isChecked));
});
const optionsCategoriesList = find('.options__categories');
optionsCategoriesList.appendChild(frag);
optionsCategoriesList.append(frag);
}
function fillDevToolsShortcut() {

2
flow-report/src/util.ts
Просмотреть файл

@ -137,7 +137,7 @@ function useExternalRenderer<T extends Element>(
if (!ref.current) return;
const root = renderCallback();
ref.current.appendChild(root);
ref.current.append(root);
return () => {
if (ref.current?.contains(root)) ref.current.removeChild(root);

9
lighthouse-cli/test/fixtures/byte-efficiency/tester.html поставляемый
Просмотреть файл

@ -21,15 +21,14 @@ function generateInlineStyleWithSize(sizeInBytes, firstContent = '', used = fals
if (used) {
const div = document.createElement('div');
div.classList.add(className);
document.body.appendChild(div);
document.body.append(div);
}
sizeInBytes -= rule.length * 0.2; // 1 byte per character, GZip estimate is 20% for Stylesheets
}
const style = document.createElement('style');
const textContent = firstContent + data.join('\n');
style.appendChild(document.createTextNode(textContent));
document.head.appendChild(style);
style.append(firstContent + data.join('\n'));
document.head.append(style);
}
function longTask(length = 75) {
@ -43,7 +42,7 @@ setTimeout(longTask, 4000);
// Lazily load the image
setTimeout(() => {
const template = document.getElementById('lazily-loaded-image');
document.body.appendChild(template.content.cloneNode(true));
document.body.append(template.content.cloneNode(true));
}, 7000);
</script>
<style>

2
lighthouse-cli/test/fixtures/delayed-fcp.html поставляемый
Просмотреть файл

@ -10,7 +10,7 @@
setTimeout(() => {
const textEl = document.createElement('span');
textEl.textContent = 'Hello, World!';
document.body.appendChild(textEl);
document.body.append(textEl);
}, 6000);
</script>
</body>

2
lighthouse-cli/test/fixtures/delayed-lcp.html поставляемый
Просмотреть файл

@ -10,7 +10,7 @@
fetch('/404?delay=7000').then(() => {
const imageEl = document.createElement('img');
imageEl.src = '/byte-efficiency/lighthouse-480x320.jpg?delay=7000';
document.body.appendChild(imageEl);
document.body.append(imageEl);
})
</script>
</body>

8
lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html поставляемый
Просмотреть файл

@ -131,7 +131,7 @@
const shadowRoot = shadowRootContainer.attachShadow({mode: 'open'});
for (let i = 0; i < 100; i++) {
const span = document.createElement('span');
shadowRoot.appendChild(span);
shadowRoot.append(span);
}
</script>
@ -239,7 +239,7 @@
<script>
function stampTemplate(id, location) {
const template = document.querySelector('#' + id);
location.appendChild(template.content.cloneNode(true));
location.append(template.content.cloneNode(true));
}
function dateNowTest() {
@ -378,7 +378,7 @@ function isOnHttps() {
const blob = new Blob(['fake'])
const img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.body.appendChild(img); // PASS
document.body.append(img); // PASS
}
function noUnloadListenersTest() {
@ -461,7 +461,7 @@ if (location.search === '') {
fs.root.getFile(`empty-${Math.random()}.png`, {create: true, exclusive: true}, function (fileEntry) {
const img = document.createElement('img');
img.src = fileEntry.toURL();
document.body.appendChild(img);
document.body.append(img);
}, console.error);
}

2
lighthouse-cli/test/fixtures/perf/level-3.js поставляемый
Просмотреть файл

@ -9,4 +9,4 @@
const dummyDiv = document.createElement('div');
dummyDiv.innerHTML = 'Hello!';
document.body.appendChild(dummyDiv);
document.body.append(dummyDiv);

4
lighthouse-cli/test/fixtures/perf/preload_tester.js поставляемый
Просмотреть файл

@ -18,13 +18,13 @@ setTimeout(() => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/css?family=Ranchers&display=block';
document.head.appendChild(link);
document.head.append(link);
link.onload = () => {
// Make sure LCP is waiting on the network so the above resources are considered important.
const lcpElement = document.createElement('div');
lcpElement.style.fontFamily = 'Ranchers';
lcpElement.textContent = 'Here is some really tall text!'.repeat(50)
document.body.appendChild(lcpElement);
document.body.append(lcpElement);
};
}, 300);

2
lighthouse-core/test/fixtures/fraggle-rock/snapshot-basic/onclick.html поставляемый
Просмотреть файл

@ -27,7 +27,7 @@
function addTemplate(selector) {
/** @type {HTMLTemplateElement} */
const template = document.querySelector(selector);
document.body.appendChild(template.content.cloneNode(true));
document.body.append(template.content.cloneNode(true));
}
document.addEventListener('click', () => {

13
lighthouse-core/test/lib/page-functions-test.js
Просмотреть файл

@ -167,7 +167,7 @@ describe('Page Functions', () => {
parentEl.className = 'dont-use-this';
const childEl = document.createElement('div');
childEl.className = 'child';
parentEl.appendChild(childEl);
parentEl.append(childEl);
assert.equal(pageFunctions.getNodeSelector(childEl), 'div#wrapper > div.child');
});
});
@ -183,7 +183,7 @@ describe('Page Functions', () => {
const el = document.createElement('div');
const childEl = document.createElement('div');
childEl.setAttribute('aria-label', 'Something');
el.appendChild(childEl);
el.append(childEl);
assert.equal(pageFunctions.getNodeLabel(el), 'Something');
});
@ -204,7 +204,7 @@ describe('Page Functions', () => {
it('Returns null if there is no better label', () => {
const el = document.createElement('div');
const childEl = document.createElement('span');
el.appendChild(childEl);
el.append(childEl);
assert.equal(pageFunctions.getNodeLabel(el), null);
});
});
@ -225,8 +225,9 @@ describe('Page Functions', () => {
it('returns node path through shadow root', () => {
const el = document.createElement('div');
const main = el.appendChild(document.createElement('main'));
const shadowRoot = main.attachShadow({mode: 'open'});
const mainEl = document.createElement('main');
el.append(mainEl);
const shadowRoot = mainEl.attachShadow({mode: 'open'});
const sectionEl = document.createElement('section');
const img = document.createElement('img');
img.src = '#';
@ -245,7 +246,7 @@ describe('Page Functions', () => {
const childEl = document.createElement('p');
childEl.id = 'child';
childEl.className = 'child-el';
el.appendChild(childEl);
el.append(childEl);
const {nodeLabel} = pageFunctions.getNodeDetails(el);
assert.equal(nodeLabel, 'div#parent');
});

43
report/renderer/category-renderer.js
Просмотреть файл

@ -72,9 +72,9 @@ export class CategoryRenderer {
}
const titleEl = this.dom.find('.lh-audit__title', auditEl);
titleEl.appendChild(this.dom.convertMarkdownCodeSnippets(audit.result.title));
titleEl.append(this.dom.convertMarkdownCodeSnippets(audit.result.title));
const descEl = this.dom.find('.lh-audit__description', auditEl);
descEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
descEl.append(this.dom.convertMarkdownLinkSnippets(audit.result.description));
for (const relevantMetric of audit.relevantMetrics || []) {
const adornEl = this.dom.createChildOf(descEl, 'span', 'lh-audit__adorn');
@ -84,19 +84,16 @@ export class CategoryRenderer {
if (audit.stackPacks) {
audit.stackPacks.forEach(pack => {
const packElm = this.dom.createElement('div');
packElm.classList.add('lh-audit__stackpack');
const packElmImg = this.dom.createElement('img');
packElmImg.classList.add('lh-audit__stackpack__img');
const packElmImg = this.dom.createElement('img', 'lh-audit__stackpack__img');
packElmImg.src = pack.iconDataURL;
packElmImg.alt = pack.title;
packElm.appendChild(packElmImg);
packElm.appendChild(this.dom.convertMarkdownLinkSnippets(pack.description));
const snippets = this.dom.convertMarkdownLinkSnippets(pack.description);
const packElm = this.dom.createElement('div', 'lh-audit__stackpack');
packElm.append(packElmImg, snippets);
this.dom.find('.lh-audit__stackpacks', auditEl)
.appendChild(packElm);
.append(packElm);
});
}
@ -105,12 +102,12 @@ export class CategoryRenderer {
const elem = this.detailsRenderer.render(audit.result.details);
if (elem) {
elem.classList.add('lh-details');
header.appendChild(elem);
header.append(elem);
}
}
// Add chevron SVG to the end of the summary
this.dom.find('.lh-chevron-container', auditEl).appendChild(this._createChevron());
this.dom.find('.lh-chevron-container', auditEl).append(this._createChevron());
this._setRatingClass(auditEl, audit.result.score, scoreDisplayMode);
if (audit.result.scoreDisplayMode === 'error') {
@ -132,7 +129,7 @@ export class CategoryRenderer {
const warningsEl = this.dom.createChildOf(summaryEl, 'div', 'lh-warnings');
this.dom.createChildOf(warningsEl, 'span').textContent = strings.warningHeader;
if (warnings.length === 1) {
warningsEl.appendChild(this.dom.createTextNode(warnings.join('')));
warningsEl.append(this.dom.createTextNode(warnings.join('')));
} else {
const warningsUl = this.dom.createChildOf(warningsEl, 'ul');
for (const warning of warnings) {
@ -207,11 +204,11 @@ export class CategoryRenderer {
const gaugeContainerEl = this.dom.find('.lh-score__gauge', component);
const gaugeEl = this.renderCategoryScore(category, groupDefinitions, options);
gaugeContainerEl.appendChild(gaugeEl);
gaugeContainerEl.append(gaugeEl);
if (category.description) {
const descEl = this.dom.convertMarkdownLinkSnippets(category.description);
this.dom.find('.lh-category-header__description', component).appendChild(descEl);
this.dom.find('.lh-category-header__description', component).append(descEl);
}
return component;
@ -230,13 +227,13 @@ export class CategoryRenderer {
this.dom.createChildOf(auditGroupHeader, 'span', 'lh-audit-group__title')
.textContent = group.title;
groupEl.appendChild(auditGroupHeader);
groupEl.append(auditGroupHeader);
let footerEl = null;
if (group.description) {
footerEl = this.dom.convertMarkdownLinkSnippets(group.description);
footerEl.classList.add('lh-audit-group__description', 'lh-audit-group__footer');
groupEl.appendChild(footerEl);
groupEl.append(footerEl);
}
return [groupEl, footerEl];
@ -300,7 +297,7 @@ export class CategoryRenderer {
renderUnexpandableClump(auditRefs, groupDefinitions) {
const clumpElement = this.dom.createElement('div');
const elements = this._renderGroupedAudits(auditRefs, groupDefinitions);
elements.forEach(elem => clumpElement.appendChild(elem));
elements.forEach(elem => clumpElement.append(elem));
return clumpElement;
}
@ -334,7 +331,7 @@ export class CategoryRenderer {
if (description) {
const descriptionEl = this.dom.convertMarkdownLinkSnippets(description);
descriptionEl.classList.add('lh-audit-group__description', 'lh-audit-group__footer');
el.appendChild(descriptionEl);
el.append(descriptionEl);
}
this.dom.find('.lh-clump-toggletext--show', el).textContent = Util.i18n.strings.show;
@ -426,7 +423,7 @@ export class CategoryRenderer {
const content = this.dom.find('.lh-fraction__content', tmpl);
const text = this.dom.createElement('span');
text.textContent = `${numPassed}/${numPassableAudits}`;
content.appendChild(text);
content.append(text);
let rating = Util.calculateRating(fraction);
@ -530,7 +527,7 @@ export class CategoryRenderer {
render(category, groupDefinitions = {}, options) {
const element = this.dom.createElement('div', 'lh-category');
element.id = category.id;
element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
element.append(this.renderCategoryHeader(category, groupDefinitions, options));
// Top level clumps for audits, in order they will appear in the report.
/** @type {Map<TopLevelClumpId, Array<LH.ReportResult.AuditRef>>} */
@ -563,13 +560,13 @@ export class CategoryRenderer {
if (clumpId === 'failed') {
const clumpElem = this.renderUnexpandableClump(auditRefs, groupDefinitions);
clumpElem.classList.add(`lh-clump--failed`);
element.appendChild(clumpElem);
element.append(clumpElem);
continue;
}
const description = clumpId === 'manual' ? category.manualDescription : undefined;
const clumpElem = this.renderClump(clumpId, {auditRefs, description});
element.appendChild(clumpElem);
element.append(clumpElem);
}
return element;

44
report/renderer/crc-details-renderer.js
Просмотреть файл

@ -105,34 +105,33 @@ class CriticalRequestChainRenderer {
// Construct lines and add spacers for sub requests.
segment.treeMarkers.forEach(separator => {
if (separator) {
treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-vert'));
treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
} else {
treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
}
const classSeparator = separator ?
'lh-tree-marker lh-vert' :
'lh-tree-marker';
treeMarkeEl.append(
dom.createElement('span', classSeparator),
dom.createElement('span', 'lh-tree-marker')
);
});
if (segment.isLastChild) {
treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-up-right'));
treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
} else {
treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-vert-right'));
treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
}
const classLastChild = segment.isLastChild ?
'lh-tree-marker lh-up-right' :
'lh-tree-marker lh-vert-right';
const classHasChildren = segment.hasChildren ?
'lh-tree-marker lh-horiz-down' :
'lh-tree-marker lh-right';
if (segment.hasChildren) {
treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-horiz-down'));
} else {
treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
}
treeMarkeEl.append(
dom.createElement('span', classLastChild),
dom.createElement('span', 'lh-tree-marker lh-right'),
dom.createElement('span', classHasChildren)
);
// Fill in url, host, and request size information.
const url = segment.node.request.url;
const linkEl = detailsRenderer.renderTextURL(url);
const treevalEl = dom.find('.lh-crc-node__tree-value', chainEl);
treevalEl.appendChild(linkEl);
treevalEl.append(linkEl);
if (!segment.hasChildren) {
const {startTime, endTime, transferSize} = segment.node.request;
@ -141,8 +140,7 @@ class CriticalRequestChainRenderer {
const span2 = dom.createElement('span', 'lh-crc-node__chain-duration');
span2.textContent = Util.i18n.formatBytesToKiB(transferSize, 0.01);
treevalEl.appendChild(span);
treevalEl.appendChild(span2);
treevalEl.append(span, span2);
}
return chainEl;
@ -158,7 +156,7 @@ class CriticalRequestChainRenderer {
* @param {DetailsRenderer} detailsRenderer
*/
static buildTree(dom, tmpl, segment, elem, details, detailsRenderer) {
elem.appendChild(CRCRenderer.createChainNode(dom, segment, detailsRenderer));
elem.append(CRCRenderer.createChainNode(dom, segment, detailsRenderer));
if (segment.node.children) {
for (const key of Object.keys(segment.node.children)) {
const childSegment = CRCRenderer.createSegment(segment.node.children, key,

12
report/renderer/details-renderer.js
Просмотреть файл

@ -119,12 +119,12 @@ export class DetailsRenderer {
}
const element = this._dom.createElement('div', 'lh-text__url');
element.appendChild(this._renderLink({text: displayedPath, url}));
element.append(this._renderLink({text: displayedPath, url}));
if (displayedHost) {
const hostElem = this._renderText(displayedHost);
hostElem.classList.add('lh-text__url-host');
element.appendChild(hostElem);
element.append(hostElem);
}
if (title) {
@ -397,7 +397,7 @@ export class DetailsRenderer {
if (valueElement) {
const classes = `lh-table-column--${heading.valueType}`;
this._dom.createChildOf(rowElem, 'td', classes).appendChild(valueElement);
this._dom.createChildOf(rowElem, 'td', classes).append(valueElement);
} else {
// Empty cell is rendered for a column if:
// - the pair is null
@ -452,7 +452,7 @@ export class DetailsRenderer {
const classes = `lh-table-column--${valueType}`;
const labelEl = this._dom.createElement('div', 'lh-text');
labelEl.textContent = heading.label;
this._dom.createChildOf(theadTrElem, 'th', classes).appendChild(labelEl);
this._dom.createChildOf(theadTrElem, 'th', classes).append(labelEl);
}
const tbodyElem = this._dom.createChildOf(tableElem, 'tbody');
@ -495,13 +495,13 @@ export class DetailsRenderer {
if (item.nodeLabel) {
const nodeLabelEl = this._dom.createElement('div');
nodeLabelEl.textContent = item.nodeLabel;
element.appendChild(nodeLabelEl);
element.append(nodeLabelEl);
}
if (item.snippet) {
const snippetEl = this._dom.createElement('div');
snippetEl.classList.add('lh-node__snippet');
snippetEl.textContent = item.snippet;
element.appendChild(snippetEl);
element.append(snippetEl);
}
if (item.selector) {
element.title = item.selector;

12
report/renderer/dom.js
Просмотреть файл

@ -97,7 +97,7 @@ export class DOM {
*/
createChildOf(parentElem, elementName, className) {
const element = this.createElement(elementName, className);
parentElem.appendChild(element);
parentElem.append(element);
return element;
}
@ -135,7 +135,7 @@ export class DOM {
for (const segment of Util.splitMarkdownLink(text)) {
if (!segment.isLink) {
// Plain text segment.
element.appendChild(this._document.createTextNode(segment.text));
element.append(this._document.createTextNode(segment.text));
continue;
}
@ -153,7 +153,7 @@ export class DOM {
a.target = '_blank';
a.textContent = segment.text;
this.safelySetHref(a, url.href);
element.appendChild(a);
element.append(a);
}
return element;
@ -210,9 +210,9 @@ export class DOM {
if (segment.isCode) {
const pre = this.createElement('code');
pre.textContent = segment.text;
element.appendChild(pre);
element.append(pre);
} else {
element.appendChild(this._document.createTextNode(segment.text));
element.append(this._document.createTextNode(segment.text));
}
}
@ -295,7 +295,7 @@ export class DOM {
const a = this.createElement('a');
a.download = filename;
this.safelySetBlobHref(a, blob);
this._document.body.appendChild(a); // Firefox requires anchor to be in the DOM.
this._document.body.append(a); // Firefox requires anchor to be in the DOM.
a.click();
// cleanup.

2
report/renderer/element-screenshot-renderer.js
Просмотреть файл

@ -186,7 +186,7 @@ export class ElementScreenshotRenderer {
overlay.remove();
return;
}
overlay.appendChild(screenshotElement);
overlay.append(screenshotElement);
overlay.addEventListener('click', () => overlay.remove());
});
}

20
report/renderer/performance-category-renderer.js
Просмотреть файл

@ -39,7 +39,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
valueEl.textContent = audit.result.displayValue || '';
const descriptionEl = this.dom.find('.lh-metric__description', tmpl);
descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
descriptionEl.append(this.dom.convertMarkdownLinkSnippets(audit.result.description));
if (audit.result.scoreDisplayMode === 'error') {
descriptionEl.textContent = '';
@ -179,7 +179,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
const strings = Util.i18n.strings;
const element = this.dom.createElement('div', 'lh-category');
element.id = category.id;
element.appendChild(this.renderCategoryHeader(category, groups, options));
element.append(this.renderCategoryHeader(category, groups, options));
// Metrics.
const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
@ -204,7 +204,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
const metricsBoxesEl = this.dom.createElement('div', 'lh-metrics-container');
metricsGroupEl.insertBefore(metricsBoxesEl, metricsFooterEl);
metricAudits.forEach(item => {
metricsBoxesEl.appendChild(this._renderMetric(item));
metricsBoxesEl.append(this._renderMetric(item));
});
// Only add the disclaimer with the score calculator link if the category was rendered with a score gauge.
@ -212,7 +212,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
const descriptionEl = this.dom.find('.lh-category-header__description', element);
const estValuesEl = this.dom.createChildOf(descriptionEl, 'div', 'lh-metrics__disclaimer');
const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer);
estValuesEl.appendChild(disclaimerEl);
estValuesEl.append(disclaimerEl);
// Add link to score calculator.
const calculatorLink = this.dom.createChildOf(estValuesEl, 'a', 'lh-calclink');
@ -222,7 +222,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
}
metricsGroupEl.classList.add('lh-audit-group--metrics');
element.appendChild(metricsGroupEl);
element.append(metricsGroupEl);
}
// Filmstrip
@ -232,7 +232,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
if (thumbnailResult?.details) {
timelineEl.id = thumbnailResult.id;
const filmstripEl = this.detailsRenderer.render(thumbnailResult.details);
filmstripEl && timelineEl.appendChild(filmstripEl);
filmstripEl && timelineEl.append(filmstripEl);
}
// Opportunities
@ -266,7 +266,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
opportunityAudits.forEach(item =>
groupEl.insertBefore(this._renderOpportunity(item, scale), footerEl));
groupEl.classList.add('lh-audit-group--load-opportunities');
element.appendChild(groupEl);
element.append(groupEl);
}
// Diagnostics
@ -283,7 +283,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
const [groupEl, footerEl] = this.renderAuditGroup(groups['diagnostics']);
diagnosticAudits.forEach(item => groupEl.insertBefore(this.renderAudit(item), footerEl));
groupEl.classList.add('lh-audit-group--diagnostics');
element.appendChild(groupEl);
element.append(groupEl);
}
// Passed audits
@ -297,7 +297,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
groupDefinitions: groups,
};
const passedElem = this.renderClump('passed', clumpOpts);
element.appendChild(passedElem);
element.append(passedElem);
// Budgets
/** @type {Array<Element>} */
@ -317,7 +317,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
const [groupEl, footerEl] = this.renderAuditGroup(groups.budgets);
budgetTableEls.forEach(table => groupEl.insertBefore(table, footerEl));
groupEl.classList.add('lh-audit-group--budgets');
element.appendChild(groupEl);
element.append(groupEl);
}
return element;

6
report/renderer/pwa-category-renderer.js
Просмотреть файл

@ -27,7 +27,7 @@ export class PwaCategoryRenderer extends CategoryRenderer {
render(category, groupDefinitions = {}) {
const categoryElem = this.dom.createElement('div', 'lh-category');
categoryElem.id = category.id;
categoryElem.appendChild(this.renderCategoryHeader(category, groupDefinitions));
categoryElem.append(this.renderCategoryHeader(category, groupDefinitions));
const auditRefs = category.auditRefs;
@ -35,13 +35,13 @@ export class PwaCategoryRenderer extends CategoryRenderer {
// all put in a top-level clump that isn't expandable/collapsible.
const regularAuditRefs = auditRefs.filter(ref => ref.result.scoreDisplayMode !== 'manual');
const auditsElem = this._renderAudits(regularAuditRefs, groupDefinitions);
categoryElem.appendChild(auditsElem);
categoryElem.append(auditsElem);
// Manual audits are still in a manual clump.
const manualAuditRefs = auditRefs.filter(ref => ref.result.scoreDisplayMode === 'manual');
const manualElem = this.renderClump('manual',
{auditRefs: manualAuditRefs, description: category.manualDescription});
categoryElem.appendChild(manualElem);
categoryElem.append(manualElem);
return categoryElem;
}

33
report/renderer/report-renderer.js
Просмотреть файл

@ -70,7 +70,7 @@ export class ReportRenderer {
const report = Util.prepareReportResult(lhr);
this._dom.rootEl.textContent = ''; // Remove previous report.
this._dom.rootEl.appendChild(this._renderReport(report));
this._dom.rootEl.append(this._renderReport(report));
return this._dom.rootEl;
}
@ -178,11 +178,13 @@ export class ReportRenderer {
const message = this._dom.find('.lh-warnings__msg', container);
message.textContent = Util.i18n.strings.toplevelWarningsMessage;
const warnings = this._dom.find('ul', container);
const warnings = [];
for (const warningString of report.runWarnings) {
const warning = warnings.appendChild(this._dom.createElement('li'));
warning.appendChild(this._dom.convertMarkdownLinkSnippets(warningString));
const warning = this._dom.createElement('li');
warning.append(this._dom.convertMarkdownLinkSnippets(warningString));
warnings.push(warning);
}
this._dom.find('ul', container).append(...warnings);
return container;
}
@ -275,11 +277,11 @@ export class ReportRenderer {
};
const headerContainer = this._dom.createElement('div');
headerContainer.appendChild(this._renderReportHeader());
headerContainer.append(this._renderReportHeader());
const reportContainer = this._dom.createElement('div', 'lh-container');
const reportSection = this._dom.createElement('div', 'lh-report');
reportSection.appendChild(this._renderReportWarnings(report));
reportSection.append(this._renderReportWarnings(report));
let scoreHeader;
const isSoloCategory = Object.keys(report.categories).length === 1;
@ -296,23 +298,23 @@ export class ReportRenderer {
const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
scoreHeader.append(
...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
scoresContainer.appendChild(scoreHeader);
scoresContainer.appendChild(scoreScale);
scoresContainer.append(scoreHeader, scoreScale);
const stickyHeader = this._dom.createElement('div', 'lh-sticky-header');
stickyHeader.append(
...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
reportContainer.appendChild(stickyHeader);
reportContainer.append(stickyHeader);
}
const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
const categories = this._dom.createElement('div', 'lh-categories');
reportSection.append(categories);
const categoryOptions = {gatherMode: report.gatherMode};
for (const category of Object.values(report.categories)) {
const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
// .lh-category-wrapper is full-width and provides horizontal rules between categories.
// .lh-category within has the max-width: var(--report-content-max-width);
const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
wrapper.appendChild(renderer.render(
wrapper.append(renderer.render(
category,
report.categoryGroups,
categoryOptions
@ -327,13 +329,12 @@ export class ReportRenderer {
}
if (!this._opts.omitTopbar) {
reportFragment.appendChild(this._renderReportTopbar(report));
reportFragment.append(this._renderReportTopbar(report));
}
reportFragment.appendChild(reportContainer);
reportContainer.appendChild(headerContainer);
reportContainer.appendChild(reportSection);
reportSection.appendChild(this._renderReportFooter(report));
reportFragment.append(reportContainer);
reportSection.append(this._renderReportFooter(report));
reportContainer.append(headerContainer, reportSection);
if (fullPageScreenshot) {
ElementScreenshotRenderer.installFullPageScreenshot(

4
report/renderer/snippet-renderer.js
Просмотреть файл

@ -128,7 +128,7 @@ export class SnippetRenderer {
// access the full element detail. Just being able to see the outer HTML isn't very useful.
if (details.node && dom.isDevTools()) {
const nodeContainer = dom.find('.lh-snippet__node', header);
nodeContainer.appendChild(detailsRenderer.renderNode(details.node));
nodeContainer.append(detailsRenderer.renderNode(details.node));
}
return header;
@ -163,7 +163,7 @@ export class SnippetRenderer {
const lineContent = content + (truncated ? '…' : '');
const lineContentEl = dom.find('.lh-snippet__line code', contentLine);
if (contentType === LineContentType.MESSAGE) {
lineContentEl.appendChild(dom.convertMarkdownLinkSnippets(lineContent));
lineContentEl.append(dom.convertMarkdownLinkSnippets(lineContent));
} else {
lineContentEl.textContent = lineContent;
}

2
treemap/app/src/util.js
Просмотреть файл

@ -118,7 +118,7 @@ class TreemapUtil {
*/
static createChildOf(parentElem, elementName, className) {
const element = this.createElement(elementName, className);
parentElem.appendChild(element);
parentElem.append(element);
return element;
}

2
viewer/app/src/lighthouse-report-viewer.js
Просмотреть файл

@ -279,7 +279,7 @@ export class LighthouseReportViewer {
// Reset container content.
container.innerHTML = '';
const rootEl = document.createElement('div');
container.appendChild(rootEl);
container.append(rootEl);
// Only give gist-saving callback if current report isn't from a gist.
let saveGistCallback;