mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rollup merge of #82315 - jsha:font-display-swap, r=GuillaumeGomez

Browse Source 
Improve page load performance in rustdoc

Add an explicit height to icons (which already had an explicit width) to allow browsers to lay out the page more accurately before the icons have been loaded. https://web.dev/optimize-cls/.

Add min-width: 115px to the crate search dropdown. When the HTML first loads, this dropdown includes only the text "All crates." Later, JS loads the items underneath it, some of which are wider. That causes the dropdown to get wider, causing a distracting reflow. This sets a min-width based on the size that the dropdown eventually becomes based on the crates on doc.rust-lang.org, reducing page movement during load.

Add font-display: swap. Per https://web.dev/font-display/, this prevents "flash of invisible text" during load by using a system font until the custom font is available. I've noticed this flash of invisible text occasionally when reading Rust docs. Note that users without cached fonts will see text, and then see it reflow. For `docs.rust-lang.org`, [setting caching headers will help a lot](https://github.com/rust-lang/simpleinfra/issues/62).

Generated output at https://jacob.hoffman-andrews.com/rust/flow-improvements/std/string/struct.String.html.
This commit is contained in:
Yuki Okushi 2021-03-04 20:01:04 +09:00 committed by GitHub
commit 569f0330d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/doc/rust.css
View File

@ -3,30 +3,35 @@
font-style: normal;
font-weight: 400;
src: local('Fira Sans'), url("FiraSans-Regular.woff") format('woff');
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 500;
src: local('Fira Sans Medium'), url("FiraSans-Medium.woff") format('woff');
font-display: swap;
}
@font-face {
font-family: 'Source Serif Pro';
font-style: normal;
font-weight: 400;
src: local('Source Serif Pro'), url("SourceSerifPro-Regular.ttf.woff") format('woff');
font-display: swap;
}
@font-face {
font-family: 'Source Serif Pro';
font-style: italic;
font-weight: 400;
src: url("SourceSerifPro-It.ttf.woff") format('woff');
font-display: swap;
}
@font-face {
font-family: 'Source Serif Pro';
font-style: normal;
font-weight: 700;
src: local('Source Serif Pro Bold'), url("SourceSerifPro-Bold.ttf.woff") format('woff');
font-display: swap;
}
@font-face {
font-family: 'Source Code Pro';
@ -35,6 +40,7 @@
/* Avoid using locally installed font because bad versions are in circulation:
* see https://github.com/rust-lang/rust/issues/24355 */
src: url("SourceCodePro-Regular.woff") format('woff');
font-display: swap;
}
*:not(body) {

4
src/librustdoc/html/layout.rs
View File

@ -83,7 +83,7 @@
<div class=\"theme-picker\">\
<button id=\"theme-picker\" aria-label=\"Pick another theme!\" aria-haspopup=\"menu\">\
<img src=\"{static_root_path}brush{suffix}.svg\" \
width=\"18\" \
width=\"18\" height=\"18\" \
alt=\"Pick another theme!\">\
</button>\
<div id=\"theme-choices\" role=\"menu\"></div>\
@ -103,7 +103,7 @@
<button type=\"button\" class=\"help-button\">?</button>
<a id=\"settings-menu\" href=\"{root_path}settings.html\">\
<img src=\"{static_root_path}wheel{suffix}.svg\" \
width=\"18\" \
width=\"18\" height=\"18\" \
alt=\"Change settings\">\
</a>\
</div>\

14
src/librustdoc/html/static/rustdoc.css
View File

@ -6,6 +6,7 @@
src: local('Fira Sans'),
url("FiraSans-Regular.woff2") format("woff2"),
url("FiraSans-Regular.woff") format('woff');
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
@ -14,6 +15,7 @@
src: local('Fira Sans Medium'),
url("FiraSans-Medium.woff2") format("woff2"),
url("FiraSans-Medium.woff") format('woff');
font-display: swap;
}
/* See SourceSerifPro-LICENSE.txt for the Source Serif Pro license. */
@ -22,18 +24,21 @@
font-style: normal;
font-weight: 400;
src: local('Source Serif Pro'), url("SourceSerifPro-Regular.ttf.woff") format('woff');
font-display: swap;
}
@font-face {
font-family: 'Source Serif Pro';
font-style: italic;
font-weight: 400;
src: local('Source Serif Pro Italic'), url("SourceSerifPro-It.ttf.woff") format('woff');
font-display: swap;
}
@font-face {
font-family: 'Source Serif Pro';
font-style: normal;
font-weight: 700;
src: local('Source Serif Pro Bold'), url("SourceSerifPro-Bold.ttf.woff") format('woff');
font-display: swap;
}
/* See SourceCodePro-LICENSE.txt for the Source Code Pro license. */
@ -44,12 +49,14 @@
/* Avoid using locally installed font because bad versions are in circulation:
* see https://github.com/rust-lang/rust/issues/24355 */
src: url("SourceCodePro-Regular.woff") format('woff');
font-display: swap;
}
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 600;
src: url("SourceCodePro-Semibold.woff") format('woff');
font-display: swap;
}
* {
@ -129,7 +136,7 @@ h1, h2, h3, h4,
#source-sidebar, #sidebar-toggle,
/* This selector is for the items listed in the "all items" page. */
#main > ul.docblock > li > a {
font-family: "Fira Sans", sans-serif;
font-family: "Fira Sans", Arial;
}
.content ul.crate a.crate {
@ -475,7 +482,7 @@ h4 > code, h3 > code, .invisible > code {
}
#main > .since {
top: inherit;
font-family: "Fira Sans", sans-serif;
font-family: "Fira Sans", Arial;
}
.content table:not(.table-display) {
@ -684,6 +691,7 @@ a {
width: calc(100% - 63px);
}
#crate-search {
min-width: 115px;
margin-top: 5px;
padding: 6px;
padding-right: 19px;
@ -1293,7 +1301,7 @@ h4 > .notable-traits {
.help-button {
right: 30px;
font-family: "Fira Sans",sans-serif;
font-family: "Fira Sans", Arial;
text-align: center;
font-size: 17px;
}