Skip to content
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.

Sign up for GitHub

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

Jump to bottom

report: improve text wrapping #8820

Merged
merged 4 commits into from
May 3, 2019
Merged

report: improve text wrapping #8820

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9c2537c
wip
paulirish Apr 25, 2019
c54ad8e
Merge branch 'master' into tablewrapping
paulirish May 2, 2019
406d7a0
no more ellipsis on urls
paulirish May 2, 2019
0c0823e
oops
paulirish May 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 21 additions & 10 deletions lighthouse-core/report/html/report-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,23 @@
}

.lh-container {
/*
Text wrapping in the report is so much FUN!
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️ this comment

We have a `word-break: break-word;` globally here to prevent a few common scenarios, namely
long non-breakable text (usually URLs) found in:
1. The footer
2. .lh-node (outerHTML)
3. .lh-code

With that sorted, the next challenge is appropriate column sizing and text wrapping inside our
.lh-details tables. Even more fun.
* We don't want table headers ("Potential Savings (ms)") to wrap or their column values, but
we'd be happy for the URL column to wrap if the URLs are particularly long.
* We want the narrow columns to remain narrow, providing the most column width for URL
* We don't want the table to extend past 100% width.
* Long URLs in the URL column can wrap. Util.getURLDisplayName maxes them out at 64 characters,
but they do not get any overflow:ellipsis treatment.
*/
word-break: break-word;
}

Expand Down Expand Up @@ -387,7 +404,6 @@
.lh-node {
display: block;
font-family: var(--monospace-font-family);
word-break: break-word;
color: hsl(174, 100%, 27%);
}

Expand Down Expand Up @@ -939,7 +955,6 @@
white-space: normal;
margin-top: 0;
font-size: 85%;
word-break: break-word;
}

.lh-warnings {
Expand Down Expand Up @@ -1141,7 +1156,8 @@
}
.lh-table thead th {
font-weight: normal;
word-wrap: normal;
/* See text-wrapping comment on .lh-container. */
word-break: normal;
}

.lh-table tbody tr:nth-child(even) {
Expand All @@ -1168,6 +1184,7 @@
.lh-table-column--ms,
.lh-table-column--numeric {
text-align: right;
word-break: normal;
}


Expand All @@ -1177,7 +1194,6 @@

.lh-table-column--url {
min-width: 250px;
white-space: nowrap;
}

/* Keep columns narrow if they follow the URL column */
Expand All @@ -1190,18 +1206,13 @@
width: 12%;
}

.lh-text__url {
overflow: hidden;
text-overflow: ellipsis;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yayyyyyyy

}

.lh-text__url:hover {
text-decoration: underline dotted #999;
text-decoration-skip-ink: auto;
}

.lh-text__url > .lh-text, .lh-text__url-host {
display: inline-block;
display: inline;
}

.lh-text__url-host {
Expand Down