From d3e7ffa7f548801d4a5784d314aabdafe9186af7 Mon Sep 17 00:00:00 2001
From: Jacob Hoffman-Andrews <github@hoffman-andrews.com>
Date: Fri, 19 Feb 2021 17:54:41 -0800
Subject: [PATCH] Improve page load performance in rustdoc.

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.

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.
---
 src/doc/rust.css                       | 6 ++++++
 src/librustdoc/html/layout.rs          | 4 ++--
 src/librustdoc/html/static/rustdoc.css | 8 ++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/doc/rust.css b/src/doc/rust.css
index a92d4ff54db..ff18e1a8f51 100644
--- a/src/doc/rust.css
+++ b/src/doc/rust.css
@@ -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) {
diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs
index e5a686bd07d..64b209a46c0 100644
--- a/src/librustdoc/html/layout.rs
+++ b/src/librustdoc/html/layout.rs
@@ -82,7 +82,7 @@ crate fn render<T: Print, S: Print>(
     <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>\
@@ -102,7 +102,7 @@ crate fn render<T: Print, S: Print>(
                 <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>\
diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css
index e3d63fa2308..7da18409d5e 100644
--- a/src/librustdoc/html/static/rustdoc.css
+++ b/src/librustdoc/html/static/rustdoc.css
@@ -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;
 }
 
 * {
@@ -684,6 +691,7 @@ a {
 	width: calc(100% - 63px);
 }
 #crate-search {
+	min-width: 115px;
 	margin-top: 5px;
 	padding: 6px;
 	padding-right: 19px;