core(audit): make dom-size table prettier #6065
Conversation
| columnDOMDepth: 'Maximum DOM Depth', | ||
| /** Label for the value of the maximum number of children any DOM node in the page has. */ | ||
| columnDOMWidth: 'Maximum Children', | ||
| /** Table column header for the type of analytic found. */ |
There was a problem hiding this comment.
@brendankenny @paulirish are these label comments sufficient?
There was a problem hiding this comment.
keep in mind that ~90 different linguists will be reading these descriptions to translate the text to another language. And they see them in isolation, without knowing necessarily what it looks like in the UI, or without having read any other descriptions of other strings. :)
in this case 'analytic' and 'snippet' aren't well understood terms, so that'd be hard for them.
Table column header for the type of statistic. These statistics describe how big the DOM is (count of DOM nodes, children, depth).
| /** Label for the value of the maximum number of children any DOM node in the page has. */ | ||
| columnDOMWidth: 'Maximum Children', | ||
| /** Table column header for the type of analytic found. */ | ||
| columnCategory: 'Category', |
There was a problem hiding this comment.
bikeshed. wdyt about 'Statistic' or 'Metric'. cc @brendankenny @patrickhulce
There was a problem hiding this comment.
I like either of those, maybe Metric more? Agreed they're slightly more descriptive than Category
There was a problem hiding this comment.
I took the Category name from the Minimizes main thread work Audit table. So we can update the phrasing in every table if we like Metric more (which I agree is more descriptive than Category).
There was a problem hiding this comment.
heh, in that case I feel like "Category" is better (since it's actually bringing e.g. multiple Script Evaluation tasks together and grouping them into one line), but also see the appeal of consistency
| columnDOMDepth: 'Maximum DOM Depth', | ||
| /** Label for the value of the maximum number of children any DOM node in the page has. */ | ||
| columnDOMWidth: 'Maximum Children', | ||
| /** Table column header for the type of analytic found. */ |
There was a problem hiding this comment.
keep in mind that ~90 different linguists will be reading these descriptions to translate the text to another language. And they see them in isolation, without knowing necessarily what it looks like in the UI, or without having read any other descriptions of other strings. :)
in this case 'analytic' and 'snippet' aren't well understood terms, so that'd be hard for them.
Table column header for the type of statistic. These statistics describe how big the DOM is (count of DOM nodes, children, depth).
| categoryDOMNodes: 'Total DOM Nodes', | ||
| /** Label for the numeric value of the maximum depth in the page's DOM tree. */ | ||
| categoryDOMDepth: 'Maximum DOM Depth', | ||
| /** Label for the value of the maximum number of children any DOM node in the page has. */ |
There was a problem hiding this comment.
Might add "This item described is the element that has the most children" just to be safe.
There was a problem hiding this comment.
Added, might want to check the wording again.
| let prunedMatch = match[0]; | ||
| ignore.forEach(attribute =>{ | ||
| const ignoreRegex = new RegExp(attribute + '=".*?"'); | ||
| prunedMatch = prunedMatch.split(ignoreRegex).join(''); |
There was a problem hiding this comment.
wdyt about replacing with style="..." instead?
There was a problem hiding this comment.
I refactored this function, kept the removal aspect, but it is much more clear. Thoughts? I could manually re-add the removed attr's after the Node is stringified, but that seems excessive.
| /** Label for the value of the maximum number of children any DOM node in the page has. */ | ||
| columnDOMWidth: 'Maximum Children', | ||
| /** Table column header for the type of analytic found. */ | ||
| columnCategory: 'Category', |
There was a problem hiding this comment.
I like either of those, maybe Metric more? Agreed they're slightly more descriptive than Category
…ct string comparisons.
|
you'll also need to run |
|
oochie coochie la la la. oochie coochie. 🎶 |
Summary
Reformatted the dom-size output table. Converted the table to be more row-centric vs column centric. See issue #5220 for discussion and screenshots. Some CSS changes required from #6049 to format the
codesnippets and the left alignment of the text.Related Issues/PRs
fixes: #5220
requires: #6049