Skip to content

Commit

Permalink
feat: table styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrickhulce
patrickhulce committed May 10, 2017
1 parent 978ef5b commit c04f675
Show file tree
Hide file tree
Showing 15 changed files with 63 additions and 17 deletions.
2 changes: 2 additions & 0 deletions lighthouse-core/audits/audit.js
View file
Expand Up @@ -81,6 +81,7 @@ class Audit {

return {
type: heading.itemType,
styleAs: heading.styleAs,
text: value
};
});
Expand All @@ -95,6 +96,7 @@ class Audit {
static makeV2TableHeaders(headings) {
return headings.map(heading => ({
type: 'text',
styleAs: heading.styleAs,
text: heading.text
}));
}
Expand Down
4 changes: 2 additions & 2 deletions lighthouse-core/audits/byte-efficiency/offscreen-images.js
View file
Expand Up @@ -134,8 +134,8 @@ class OffscreenImages extends ByteEfficiencyAudit {
});

const headings = [
{key: 'preview', itemType: 'thumbnail', text: ''},
{key: 'url', itemType: 'url', text: 'URL'},
{key: 'preview', itemType: 'thumbnail', text: '', styleAs: 'preview'},
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'totalKb', itemType: 'text', text: 'Original'},
{key: 'potentialSavings', itemType: 'text', text: 'Potential Savings'},
];
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/audits/byte-efficiency/total-byte-weight.js
View file
Expand Up @@ -86,7 +86,7 @@ class TotalByteWeight extends ByteEfficiencyAudit {
const score = 100 * distribution.computeComplementaryPercentile(totalBytes);

const headings = [
{key: 'url', itemType: 'url', text: 'URL'},
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'totalKb', itemType: 'text', text: 'Total Size'},
{key: 'totalMs', itemType: 'text', text: 'Transfer Time'},
];
Expand Down
4 changes: 2 additions & 2 deletions lighthouse-core/audits/byte-efficiency/uses-optimized-images.js
View file
Expand Up @@ -121,8 +121,8 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
}

const headings = [
{key: 'preview', itemType: 'thumbnail', text: ''},
{key: 'url', itemType: 'url', text: 'URL'},
{key: 'preview', itemType: 'thumbnail', text: '', styleAs: 'preview'},
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'totalKb', itemType: 'text', text: 'Original'},
{key: 'webpSavings', itemType: 'text', text: 'Savings as WebP'},
{key: 'jpegSavings', itemType: 'text', text: 'Savings as JPEG'},
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/audits/byte-efficiency/uses-request-compression.js
View file
Expand Up @@ -91,7 +91,7 @@ class ResponsesAreCompressed extends ByteEfficiencyAudit {

let debugString;
const headings = [
{key: 'url', itemType: 'url', text: 'Uncompressed resource URL'},
{key: 'url', itemType: 'url', text: 'Uncompressed resource URL', styleAs: 'url'},
{key: 'totalKb', itemType: 'text', text: 'Original'},
{key: 'potentialSavings', itemType: 'text', text: 'GZIP Savings'},
];
Expand Down
4 changes: 2 additions & 2 deletions lighthouse-core/audits/byte-efficiency/uses-responsive-images.js
View file
Expand Up @@ -113,8 +113,8 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
.filter(item => item.wastedBytes > IGNORE_THRESHOLD_IN_BYTES);

const headings = [
{key: 'preview', itemType: 'thumbnail', text: ''},
{key: 'url', itemType: 'url', text: 'URL'},
{key: 'preview', itemType: 'thumbnail', text: '', styleAs: 'preview'},
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'totalKb', itemType: 'text', text: 'Original'},
{key: 'potentialSavings', itemType: 'text', text: 'Potential Savings'},
];
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/audits/dobetterweb/geolocation-on-start.js
View file
Expand Up @@ -49,7 +49,7 @@ class GeolocationOnStart extends ViolationAudit {
const results = ViolationAudit.getViolationResults(artifacts, /geolocation/);

const headings = [
{key: 'url', itemType: 'url', text: 'URL'},
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'label', itemType: 'text', text: 'Location'},
];
const details = ViolationAudit.makeV2TableDetails(headings, results);
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/audits/dobetterweb/link-blocking-first-paint.js
View file
Expand Up @@ -92,7 +92,7 @@ class LinkBlockingFirstPaintAudit extends Audit {
}

const headings = [
{key: 'url', itemType: 'url', text: 'URL'},
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'totalKb', itemType: 'text', text: 'Size (KB)'},
{key: 'totalMs', itemType: 'text', text: 'Delayed Paint By (ms)'},
];
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/audits/dobetterweb/no-document-write.js
View file
Expand Up @@ -49,7 +49,7 @@ class NoDocWriteAudit extends ViolationAudit {
const results = ViolationAudit.getViolationResults(artifacts, /document\.write/);

const headings = [
{key: 'url', itemType: 'url', text: 'URL'},
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'label', itemType: 'text', text: 'Location'},
];
const details = ViolationAudit.makeV2TableDetails(headings, results);
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/audits/dobetterweb/notification-on-start.js
View file
Expand Up @@ -49,7 +49,7 @@ class NotificationOnStart extends ViolationAudit {
const results = ViolationAudit.getViolationResults(artifacts, /notification permission/);

const headings = [
{key: 'url', itemType: 'url', text: 'URL'},
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'label', itemType: 'text', text: 'Location'},
];
const details = ViolationAudit.makeV2TableDetails(headings, results);
Expand Down
9 changes: 8 additions & 1 deletion lighthouse-core/audits/dobetterweb/uses-http2.js
View file
Expand Up @@ -71,6 +71,12 @@ class UsesHTTP2Audit extends Audit {
displayValue = `${resources.length} request was not handled over h2`;
}

const headings = [
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'protocol', itemType: 'text', text: 'Protocol'},
];
const details = Audit.makeV2TableDetails(headings, resources);

return {
rawValue: resources.length === 0,
displayValue: displayValue,
Expand All @@ -80,7 +86,8 @@ class UsesHTTP2Audit extends Audit {
results: resources,
tableHeadings: {url: 'URL', protocol: 'Protocol'}
}
}
},
details,
};
});
}
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/audits/dobetterweb/uses-passive-event-listeners.js
View file
Expand Up @@ -49,7 +49,7 @@ class PassiveEventsAudit extends ViolationAudit {
const results = ViolationAudit.getViolationResults(artifacts, /passive event listener/);

const headings = [
{key: 'url', itemType: 'url', text: 'URL'},
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'label', itemType: 'text', text: 'Location'},
];
const details = ViolationAudit.makeV2TableDetails(headings, results);
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/audits/load-fast-enough-for-pwa.js
View file
Expand Up @@ -88,7 +88,7 @@ class LoadFastEnough4Pwa extends Audit {
const recordsWithLatencies = allRequestLatencies.filter(val => val !== undefined);

const details = Audit.makeV2TableDetails([
{key: 'url', itemType: 'url', text: 'URL'},
{key: 'url', itemType: 'url', text: 'URL', styleAs: 'url'},
{key: 'latency', itemType: 'text', text: 'Latency (ms)'},
], recordsWithLatencies);

Expand Down
9 changes: 7 additions & 2 deletions lighthouse-core/report/v2/renderer/details-renderer.js
View file
Expand Up @@ -127,14 +127,18 @@ class DetailsRenderer {
const theadTrElem = this._dom.createChildOf(theadElem, 'tr');

for (const heading of details.itemHeaders) {
this._dom.createChildOf(theadTrElem, 'th').appendChild(this.render(heading));
const styleAs = heading.styleAs || 'default';
const classes = `lh-table-column--${styleAs}`;
this._dom.createChildOf(theadTrElem, 'th', classes).appendChild(this.render(heading));
}

const tbodyElem = this._dom.createChildOf(tableElem, 'tbody');
for (const row of details.items) {
const rowElem = this._dom.createChildOf(tbodyElem, 'tr');
for (const columnItem of row) {
this._dom.createChildOf(rowElem, 'td').appendChild(this.render(columnItem));
const styleAs = columnItem.styleAs || 'default';
const classes = `lh-table-column--${styleAs}`;
this._dom.createChildOf(rowElem, 'td', classes).appendChild(this.render(columnItem));
}
}
return element;
Expand Down Expand Up @@ -190,6 +194,7 @@ if (typeof module !== 'undefined' && module.exports) {
/**
* @typedef {{
* type: string,
* styleAs: (string|undefined),
* text: (string|undefined)
* }}
*/
Expand Down
32 changes: 32 additions & 0 deletions lighthouse-core/report/v2/report-styles.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit c04f675

Please sign in to comment.