Rollup merge of #133636 - GuillaumeGomez:sans-serif, r=rustdoc

[rustdoc] Add sans-serif font setting

Fixes #52449.

This PR adds a new setting introducing the possibility to switch to a sans-serif font (`Fira Sans`) for the text.

Can be tested [here](https://rustdoc.crud.net/imperio/sans-serif/std/index.html).

cc ```@rust-lang/rustdoc-frontend```
r? ```@notriddle```

Author: matthiaskrgr

REUSE.toml

@@ -92,7 +92,7 @@ SPDX-FileCopyrightText = "2015 Anders Kaseorg <andersk@mit.edu>"
 SPDX-License-Identifier = "MIT"
 
 [[annotations]]
-path = "src/librustdoc/html/static/fonts/FiraSans**"
+path = "src/librustdoc/html/static/fonts/Fira**"
 precedence = "override"
 SPDX-FileCopyrightText = ["2014, Mozilla Foundation", "2014, Telefonica S.A."]
 SPDX-License-Identifier = "OFL-1.1"

license-metadata.json

@@ -113,8 +113,12 @@
               {
                 "directories": [],
                 "files": [
+                  "FiraMono-Medium.woff2",
+                  "FiraMono-Regular.woff2",
+                  "FiraSans-Italic.woff2",
                   "FiraSans-LICENSE.txt",
                   "FiraSans-Medium.woff2",
+                  "FiraSans-MediumItalic.woff2",
                   "FiraSans-Regular.woff2"
                 ],
                 "license": {
@@ -266,4 +270,4 @@
     ],
     "type": "root"
   }
-}
+}

src/librustdoc/build.rs

@@ -17,10 +17,15 @@ fn main() {
         "static/images/rust-logo.svg",
         "static/images/favicon.svg",
         "static/images/favicon-32x32.png",
+        "static/fonts/FiraSans-Italic.woff2",
         "static/fonts/FiraSans-Regular.woff2",
         "static/fonts/FiraSans-Medium.woff2",
+        "static/fonts/FiraSans-MediumItalic.woff2",
+        "static/fonts/FiraMono-Regular.woff2",
+        "static/fonts/FiraMono-Medium.woff2",
         "static/fonts/FiraSans-LICENSE.txt",
         "static/fonts/SourceSerif4-Regular.ttf.woff2",
+        "static/fonts/SourceSerif4-Semibold.ttf.woff2",
         "static/fonts/SourceSerif4-Bold.ttf.woff2",
         "static/fonts/SourceSerif4-It.ttf.woff2",
         "static/fonts/SourceSerif4-LICENSE.md",

src/librustdoc/html/static/COPYRIGHT.txt

@@ -36,7 +36,7 @@ included, and carry their own copyright notices and license terms:
     See SourceCodePro-LICENSE.txt.
 
 * Source Serif 4 (SourceSerif4-Regular.ttf.woff2, SourceSerif4-Bold.ttf.woff2,
-    SourceSerif4-It.ttf.woff2):
+    SourceSerif4-It.ttf.woff2, SourceSerif4-Semibold.ttf.woff2):
 
     Copyright 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name
     'Source'. All Rights Reserved. Source is a trademark of Adobe in the United

src/librustdoc/html/static/css/rustdoc.css

@@ -38,6 +38,13 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 	--code-block-border-radius: 6px;
 	--impl-items-indent: 0.3em;
 	--docblock-indent: 24px;
+	--font-family: "Source Serif 4", NanumBarunGothic, serif;
+	--font-family-code: "Source Code Pro", monospace;
+}
+
+:root.sans-serif {
+	--font-family: "Fira Sans", sans-serif;
+	--font-family-code: "Fira Mono", monospace;
 }
 
 /* See FiraSans-LICENSE.txt for the Fira Sans license. */
@@ -49,6 +56,14 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 		url("FiraSans-Regular-0fe48ade.woff2") format("woff2");
 	font-display: swap;
 }
+@font-face {
+	font-family: 'Fira Sans';
+	font-style: italic;
+	font-weight: 400;
+	src: local('Fira Sans Italic'),
+		url("FiraSans-Italic-81dc35de.woff2") format("woff2");
+	font-display: swap;
+}
 @font-face {
 	font-family: 'Fira Sans';
 	font-style: normal;
@@ -57,6 +72,30 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 		url("FiraSans-Medium-e1aa3f0a.woff2") format("woff2");
 	font-display: swap;
 }
+@font-face {
+	font-family: 'Fira Sans';
+	font-style: italic;
+	font-weight: 500;
+	src: local('Fira Sans Medium Italic'),
+		url("FiraSans-MediumItalic-ccf7e434.woff2") format("woff2");
+	font-display: swap;
+}
+@font-face {
+	font-family: 'Fira Mono';
+	font-style: normal;
+	font-weight: 400;
+	src: local('Fira Mono'),
+		url("FiraMono-Regular-87c26294.woff2") format("woff2");
+	font-display: swap;
+}
+@font-face {
+	font-family: 'Fira Mono';
+	font-style: normal;
+	font-weight: 500;
+	src: local('Fira Mono Medium'),
+		url("FiraMono-Medium-86f75c8c.woff2") format("woff2");
+	font-display: swap;
+}
 
 /* See SourceSerif4-LICENSE.md for the Source Serif 4 license. */
 @font-face {
@@ -75,6 +114,14 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 		url("SourceSerif4-It-ca3b17ed.ttf.woff2") format("woff2");
 	font-display: swap;
 }
+@font-face {
+	font-family: 'Source Serif 4';
+	font-style: normal;
+	font-weight: 500;
+	src: local('Source Serif 4 Semibold'),
+		url("SourceSerif4-Semibold-457a13ac.ttf.woff2") format("woff2");
+	font-display: swap;
+}
 @font-face {
 	font-family: 'Source Serif 4';
 	font-style: normal;
@@ -126,7 +173,7 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 body {
 	/* Line spacing at least 1.5 per Web Content Accessibility Guidelines
 	   https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */
-	font: 1rem/1.5 "Source Serif 4", NanumBarunGothic, serif;
+	font: 1rem/1.5 var(--font-family);
 	margin: 0;
 	position: relative;
 	/* We use overflow-wrap: break-word for Safari, which doesn't recognize
@@ -380,7 +427,7 @@ details:not(.toggle) summary {
 }
 
 code, pre, .code-header, .type-signature {
-	font-family: "Source Code Pro", monospace;
+	font-family: var(--font-family-code);
 }
 .docblock code, .item-table dd code {
 	border-radius: 3px;

src/librustdoc/html/static/fonts/FiraMono-Medium.woff2

@@ -53,6 +53,12 @@
                     removeClass(document.documentElement, "hide-modnav");
                 }
                 break;
+            case "sans-serif-fonts":
+                if (value === true) {
+                    addClass(document.documentElement, "sans-serif");
+                } else {
+                    removeClass(document.documentElement, "sans-serif");
+                }
         }
     }
 
@@ -235,6 +241,11 @@
                 "js_name": "disable-shortcuts",
                 "default": false,
             },
+            {
+                "name": "Use sans serif fonts",
+                "js_name": "sans-serif-fonts",
+                "default": false,
+            },
         ];
 
         // Then we build the DOM.

src/librustdoc/html/static/fonts/FiraMono-Regular.woff2

@@ -279,6 +279,9 @@ if (getSettingValue("hide-toc") === "true") {
 if (getSettingValue("hide-modnav") === "true") {
     addClass(document.documentElement, "hide-modnav");
 }
+if (getSettingValue("sans-serif-fonts") === "true") {
+    addClass(document.documentElement, "sans-serif");
+}
 function updateSidebarWidth() {
     const desktopSidebarWidth = getSettingValue("desktop-sidebar-width");
     if (desktopSidebarWidth && desktopSidebarWidth !== "null") {

src/librustdoc/html/static/fonts/FiraSans-Italic.woff2

@@ -98,10 +98,15 @@ static_files! {
     rust_logo_svg => "static/images/rust-logo.svg",
     rust_favicon_svg => "static/images/favicon.svg",
     rust_favicon_png_32 => "static/images/favicon-32x32.png",
+    fira_sans_italic => "static/fonts/FiraSans-Italic.woff2",
     fira_sans_regular => "static/fonts/FiraSans-Regular.woff2",
     fira_sans_medium => "static/fonts/FiraSans-Medium.woff2",
+    fira_sans_medium_italic => "static/fonts/FiraSans-MediumItalic.woff2",
+    fira_mono_regular => "static/fonts/FiraMono-Regular.woff2",
+    fira_mono_medium => "static/fonts/FiraMono-Medium.woff2",
     fira_sans_license => "static/fonts/FiraSans-LICENSE.txt",
     source_serif_4_regular => "static/fonts/SourceSerif4-Regular.ttf.woff2",
+    source_serif_4_semibold => "static/fonts/SourceSerif4-Semibold.ttf.woff2",
     source_serif_4_bold => "static/fonts/SourceSerif4-Bold.ttf.woff2",
     source_serif_4_italic => "static/fonts/SourceSerif4-It.ttf.woff2",
     source_serif_4_license => "static/fonts/SourceSerif4-LICENSE.md",

src/librustdoc/html/static/fonts/FiraSans-MediumItalic.woff2

@@ -7,7 +7,7 @@
     <meta name="description" content="{{page.description}}"> {# #}
     <title>{{page.title}}</title> {# #}
     <script>if(window.location.protocol!=="file:") {# Hack to skip preloading fonts locally - see #98769 #}
-    document.head.insertAdjacentHTML("beforeend","{{files.source_serif_4_regular}},{{files.fira_sans_regular}},{{files.fira_sans_medium}},{{files.source_code_pro_regular}},{{files.source_code_pro_semibold}}".split(",").map(f=>`<link rel="preload" as="font" type="font/woff2" crossorigin href="{{static_root_path|safe}}${f}">`).join("")) {# #}
+    document.head.insertAdjacentHTML("beforeend","{{files.source_serif_4_regular}},{{files.fira_sans_italic}},{{files.fira_sans_regular}},{{files.fira_sans_medium_italic}},{{files.fira_sans_medium}},{{files.source_code_pro_regular}},{{files.source_code_pro_semibold}}".split(",").map(f=>`<link rel="preload" as="font" type="font/woff2" crossorigin href="{{static_root_path|safe}}${f}">`).join("")) {# #}
     </script> {# #}
     <link rel="stylesheet" {#+ #}
           href="{{static_root_path|safe}}{{files.normalize_css}}"> {# #}

src/librustdoc/html/static/fonts/SourceSerif4-Semibold.ttf.woff2

@@ -134,7 +134,7 @@ mod os_impl {
             &mut |entry| {
                 let file = entry.path();
                 let extension = file.extension();
-                let scripts = ["py", "sh", "ps1"];
+                let scripts = ["py", "sh", "ps1", "woff2"];
                 if scripts.into_iter().any(|e| extension == Some(OsStr::new(e))) {
                     return;
                 }

src/librustdoc/html/static/js/settings.js

@@ -0,0 +1,31 @@
+// Ensures that the font serif change is working as expected.
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
+
+// By default, it should be the serif fonts.
+store-value: (serif_font, '"Source Serif 4", NanumBarunGothic, serif')
+store-value: (serif_code_font, '"Source Code Pro", monospace')
+assert-css: ("body", {"font-family": |serif_font|})
+assert-css: ("p code", {"font-family": |serif_code_font|})
+
+// We now switch to the sans serif font
+click: "#settings-menu"
+wait-for: "#sans-serif-fonts"
+click: "#sans-serif-fonts"
+
+store-value: (font, '"Fira Sans", sans-serif')
+store-value: (code_font, '"Fira Mono", monospace')
+assert-css: ("body", {"font-family": |font|})
+assert-css: ("p code", {"font-family": |code_font|})
+
+// Reloading the page to ensure it is loaded correctly.
+reload:
+assert-css: ("body", {"font-family": |font|})
+assert-css: ("p code", {"font-family": |code_font|})
+
+// We switch back to the serif font
+click: "#settings-menu"
+wait-for: "#sans-serif-fonts"
+click: "#sans-serif-fonts"
+
+assert-css: ("body", {"font-family": |serif_font|})
+assert-css: ("p code", {"font-family": |serif_code_font|})

src/librustdoc/html/static/js/storage.js

@@ -257,15 +257,15 @@ assert-text: ("#preferred-light-theme .setting-radio-name", "Preferred light the
 // We now check that clicking on the toggles' text is like clicking on the checkbox.
 // To test it, we use the "Disable keyboard shortcuts".
 set-local-storage: {"rustdoc-disable-shortcuts": "false"}
-click: ".setting-line:last-child .setting-check span"
+click: "#disable-shortcuts"
 assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
 
 // We now check that focusing a toggle and pressing Space is like clicking on it.
 assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
-focus: ".setting-line:last-child .setting-check input"
+focus: "#disable-shortcuts"
 press-key: "Space"
 assert-local-storage: {"rustdoc-disable-shortcuts": "false"}
-focus: ".setting-line:last-child .setting-check input"
+focus: "#disable-shortcuts"
 press-key: "Space"
 assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
 
@@ -276,7 +276,7 @@ assert-false: "#help-button .popover"
 wait-for-css: ("#settings-menu .popover", {"display": "block"})
 
 // Now turn keyboard shortcuts back on, and see if they work.
-click: ".setting-line:last-child .setting-check span"
+click: "#disable-shortcuts"
 assert-local-storage: {"rustdoc-disable-shortcuts": "false"}
 press-key: "Escape"
 press-key: "?"