-
Notifications
You must be signed in to change notification settings - Fork 9.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Report: denser styling #2706
Report: denser styling #2706
Conversation
const audits = categoryDOM.querySelectorAll('.lh-category > .lh-audit, ' + | ||
'.lh-category > .lh-passed-audits > .lh-audit, ' + | ||
'.lh-audit-group--manual .lh-audit'); | ||
const audits = categoryDOM.querySelectorAll('.lh-audit'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❤️
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
all seems fine to me, but a couple nit thoughts
- the debug string feels really close to the description even in non-devtools, should the description text be a bit smaller too?
@@ -265,14 +287,14 @@ <h1 class="leftnav__header__title">Lighthouse</h1> | |||
.lh-config__settings-toggle summary::-webkit-details-marker { | |||
display: none; | |||
} | |||
@media screen and (min-width: 1130px) { | |||
@media screen and (min-width: 960px) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this meant to be 964px?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah sorted these out. most are 964. there's a 965 in there too.
thx!
sg. added 3px margin in all cases. feels good.
changed it from 12px to 11px in devtools. (this was chris's original size, too)
good call. sorted. |
@@ -489,6 +490,11 @@ class CategoryRenderer { | |||
element.appendChild(passedElem); | |||
return element; | |||
} | |||
|
|||
_createPermalinkSpan(element, id) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
jsdocs for these to pass the closure check
@@ -210,28 +205,30 @@ class CategoryRenderer { | |||
* Renders the group container for a group of audits. Individual audit elements can be added | |||
* directly to the returned element. | |||
* @param {!ReportRenderer.GroupJSON} group | |||
* @param {{expandable: boolean}} opts | |||
* @return {!HTMLDetailsElement} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should drop HTMLDetailsElement
for Element
(which breaks el.open
but old-type-inference closure doesn't catch that)
_renderAuditGroup(group, opts) { | ||
const expandable = opts.expandable; | ||
const auditGroupElem = /** @type {!HTMLDetailsElement} */ ( | ||
this._dom.createElement(expandable ? 'details' :'div', | ||
'lh-audit-group lh-expandable-details')); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this is shared by expandable and non-expandable, lh-expandable-details
-> lh-group
(or something better)? Is lh-audit-group
only used for these?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sg. stripped expandable details from these.
'lh-audit-group lh-expandable-details')); | ||
const auditGroupHeader = this._dom.createElement('div', | ||
const auditGroupSummary = this._dom.createChildOf(auditGroupElem, 'summary', | ||
'lh-audit-group__summary lh-expandable-details__summary'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lh-expandable-details__summary
const auditGroupHeader = this._dom.createElement('div', | ||
const auditGroupSummary = this._dom.createChildOf(auditGroupElem, 'summary', | ||
'lh-audit-group__summary lh-expandable-details__summary'); | ||
const auditGroupHeader = this._dom.createChildOf(auditGroupSummary, 'div', | ||
'lh-audit-group__header lh-expandable-details__header'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lh-expandable-details__header
}); | ||
auditGroupSummary.appendChild(auditGroupHeader); | ||
auditGroupSummary.appendChild(auditGroupArrow); | ||
if (group.description) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
another option is to put these as two templates, one expandable and one unexpandable. _renderAuditGroup
could then just query the one it needs and then add a description
as below if needed
@@ -167,6 +163,8 @@ class CategoryRenderer { | |||
const titleEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__title'); | |||
titleEl.textContent = audit.result.description; | |||
|
|||
this._dom.createChildOf(summary, 'div', 'lh-toggle-arrow', {title: 'See resources'}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can this be lh-toggle-arrow-unexpandable
? Since it doesn't appear to expand?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lookin great |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
category hash nav shouldn't underlap the fixed header firefox support width@964 breakpoint. fix @print styles: show site URL & time ensmallen scorecards. size based off body-font-size shorter sparklines. for perf opportunities, show debugText within summary, so it isn't pushed below large results tables. break-word for long urls in debugStrings sharper focus ring 5px -> 3px open details by default some groups can't be collapsed: failed, perf groups, a11y failing no special styling for the manual section devtools font size isn't smaller than 12px
manually squashed and merged in 97c7170 |
This PR takes over from #2297
Basic before and after:
But let's do it with a few reports, because its all about the details:
original:
http://dense-lh-reports.surge.sh/verge.orig.html
http://dense-lh-reports.surge.sh/omroep.orig.html
http://dense-lh-reports.surge.sh/paulirish.orig.html
http://dense-lh-reports.surge.sh/exampleperf.orig.html
http://dense-lh-reports.surge.sh/polymerperf.orig.html
new look:
http://dense-lh-reports.surge.sh/verge.html
http://dense-lh-reports.surge.sh/omroep.html
http://dense-lh-reports.surge.sh/paulirish.html
http://dense-lh-reports.surge.sh/exampleperf.html
http://dense-lh-reports.surge.sh/polymerperf.html
denser still, for devtools:
http://dense-lh-reports.surge.sh/verge.devtools.html
http://dense-lh-reports.surge.sh/omroep.devtools.html
http://dense-lh-reports.surge.sh/paulirish.devtools.html
http://dense-lh-reports.surge.sh/exampleperf.devtools.html
http://dense-lh-reports.surge.sh/polymerperf.devtools.html