rustdoc: redesign [+]/[−] controls

src/librustdoc/html/static/css/noscript.css

@@ -54,6 +54,8 @@ nav.sub {
 	--code-attribute-color: #999;
 	--toggles-color: #999;
 	--toggle-filter: none;
+	--toggle-border: #ccc;
+	--toggle-border-hover: #616161;
 	--search-input-focused-border-color: #66afe9;
 	--copy-path-button-color: #999;
 	--copy-path-img-filter: invert(50%);
@@ -157,6 +159,8 @@ nav.sub {
 		--code-attribute-color: #999;
 		--toggles-color: #999;
 		--toggle-filter: invert(100%);
+		--toggle-border: grey;
+		--toggle-border-hover: black;
 		--search-input-focused-border-color: #008dfd;
 		--copy-path-button-color: #999;
 		--copy-path-img-filter: invert(50%);
@@ -239,5 +243,13 @@ nav.sub {
 		--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
 		--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
 	}
+
+	/* Other themes give the toggle-all-docs button the same color as the rest of
+		the toolbar buttons. Dark theme makes it less bright and noticeable. */
+	:root button#toggle-all-docs {
+		background-color: transparent;
+		border-color: grey;
+		color: #ddd;
+	}
 /* End theme: dark */
 }

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

@@ -151,7 +151,7 @@ h1, h2, h3, h4 {
 .main-heading {
 	display: flex;
 	flex-wrap: wrap;
-	padding-bottom: 6px;
+	padding: 9px 0 6px 0;
 	margin-bottom: 15px;
 }
 /* The only headings that get underlines are:
@@ -293,15 +293,6 @@ button {
 
 /* end tweaks for normalize.css 8 */
 
-button#toggle-all-docs {
-	padding: 0;
-	background: none;
-	border: none;
-	/* iOS button gradient: https://stackoverflow.com/q/5438567 */
-	-webkit-appearance: none;
-	opacity: 1;
-}
-
 .rustdoc {
 	display: flex;
 	flex-direction: row;
@@ -586,6 +577,11 @@ ul.block, .block li {
 	margin-bottom: 1rem;
 }
 
+.version {
+	/* same font style used in `.since` */
+	font-variant-numeric: oldstyle-nums;
+}
+
 .mobile-topbar {
 	display: none;
 }
@@ -677,7 +673,10 @@ ul.block, .block li {
 
 .out-of-band {
 	flex-grow: 0;
-	font-size: 1.125rem;
+	font-size: 1.25rem;
+	align-items: center;
+	display: flex;
+	gap: 0.25em;
 }
 
 .docblock code, .docblock-short code,
@@ -725,7 +724,7 @@ div.where {
 nav.sub {
 	flex-grow: 1;
 	flex-flow: row nowrap;
-	margin: 4px 0 25px 0;
+	margin: 4px 0 16px 0;
 	display: flex;
 	align-items: center;
 }
@@ -1129,6 +1128,8 @@ so that we can apply CSS-filters to change the arrow color in themes */
 .since {
 	font-weight: normal;
 	font-size: initial;
+	/* align with the word "source" in all lowercase */
+	font-variant-numeric: oldstyle-nums;
 }
 
 .rightside {
@@ -1471,11 +1472,11 @@ a.tooltip:hover::after {
 	opacity: 1;
 }
 
-#settings-menu, #help-button {
+#settings-menu, #help-button, button#toggle-all-docs {
 	margin-left: 4px;
 	display: flex;
 }
-#settings-menu > a, #help-button > a {
+#settings-menu > a, #help-button > a, button#toggle-all-docs {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -1487,13 +1488,23 @@ a.tooltip:hover::after {
 	   as an icon, it's okay to specify their sizes in pixels. */
 	font-size: 20px;
 	width: 33px;
+	/* iOS button gradient: https://stackoverflow.com/q/5438567 */
+	-webkit-appearance: none;
+	opacity: 1;
 }
 
-#settings-menu > a:hover, #settings-menu > a:focus,
-#help-button > a:hover, #help-button > a:focus {
+#settings-menu > a:hover, #settings-menu > a:focus-visible,
+#help-button > a:hover, #help-button > a:focus-visible,
+button#toggle-all-docs:hover, button#toggle-all-docs:focus-visible {
 	border-color: var(--settings-button-border-focus);
 }
 
+button#toggle-all-docs {
+	height: 34px;
+	margin-left: 16px;
+	float: right;
+}
+
 #copy-path {
 	color: var(--copy-path-button-color);
 	background: var(--main-background-color);
@@ -1593,16 +1604,15 @@ details.toggle > summary.hideme > span {
 
 details.toggle > summary::before {
 	/* toggle plus */
-	background: url('data:image/svg+xml,<svg width="17" height="17" \
-shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \
-d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></svg>') no-repeat top left;
+	background: url('data:image/svg+xml,<svg width="15" height="15" stroke="black" fill="none" \
+xmlns="http://www.w3.org/2000/svg"><path d="M3 6.5h7M6.5 10.5V2.5"/></svg>') no-repeat top left;
 	content: "";
 	cursor: pointer;
-	width: 16px;
-	height: 16px;
+	width: 13px;
+	height: 13px;
+	border: solid 1px var(--toggle-border);
 	display: inline-block;
 	vertical-align: middle;
-	opacity: .5;
 	filter: var(--toggle-filter);
 }
 
@@ -1626,9 +1636,9 @@ details.toggle > summary.hideme::after {
 	content: "";
 }
 
-details.toggle > summary:focus::before,
+details.toggle > summary:focus-visible::before,
 details.toggle > summary:hover::before {
-	opacity: 1;
+	border: solid 1px var(--toggle-border-hover);
 }
 
 details.toggle > summary:focus-visible::before {
@@ -1674,9 +1684,8 @@ details.toggle[open] > summary.hideme > span {
 
 details.toggle[open] > summary::before {
 	/* toggle minus */
-	background: url('data:image/svg+xml,<svg width="17" height="17" \
-shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \
-d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>') no-repeat top left;
+	background: url('data:image/svg+xml,<svg width="15" height="15" stroke="black" fill="none" \
+xmlns="http://www.w3.org/2000/svg"><path d="M3 6.5h7"/></svg>') no-repeat top left;
 }
 
 details.toggle[open] > summary::after {
@@ -1734,10 +1743,15 @@ in src-script.js
 		flex-direction: column;
 	}
 
+	button#toggle-all-docs {
+		margin-top: -8px;
+	}
+
 	.out-of-band {
 		text-align: left;
 		margin-left: initial;
 		padding: initial;
+		display: block;
 	}
 
 	.out-of-band .since::before {
@@ -2193,6 +2207,8 @@ in src-script.js
 	--code-attribute-color: #999;
 	--toggles-color: #999;
 	--toggle-filter: none;
+	--toggle-border: #ccc;
+	--toggle-border-hover: #616161;
 	--search-input-focused-border-color: #66afe9;
 	--copy-path-button-color: #999;
 	--copy-path-img-filter: invert(50%);
@@ -2295,6 +2311,8 @@ in src-script.js
 	--code-attribute-color: #999;
 	--toggles-color: #999;
 	--toggle-filter: invert(100%);
+	--toggle-border: grey;
+	--toggle-border-hover: black;
 	--search-input-focused-border-color: #008dfd;
 	--copy-path-button-color: #999;
 	--copy-path-img-filter: invert(50%);
@@ -2377,6 +2395,14 @@ in src-script.js
 	--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
 	--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
 }
+
+/* Other themes give the toggle-all-docs button the same color as the rest of
+	the toolbar buttons. Dark theme makes it less bright and noticeable. */
+:root[data-theme="dark"] button#toggle-all-docs {
+	background-color: transparent;
+	border-color: grey;
+	color: #ddd;
+}
 /* End theme: dark */
 
 /* Begin theme: ayu */
@@ -2404,6 +2430,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--code-attribute-color: #999;
 	--toggles-color: #999;
 	--toggle-filter: invert(100%);
+	--toggle-border: grey;
+	--toggle-border-hover: black;
 	--search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */
 	--copy-path-button-color: #fff;
 	--copy-path-img-filter: invert(70%);

src/librustdoc/html/static/js/main.js

@@ -879,7 +879,7 @@ function preLoadCss(cssUrl) {
             }
         });
         innerToggle.title = "collapse all docs";
-        innerToggle.children[0].innerText = "\u2212"; // "\u2212" is "−" minus sign
+        innerToggle.innerText = "\u2212"; // "\u2212" is "−" minus sign
     }
 
     function collapseAllDocs() {
@@ -894,7 +894,7 @@ function preLoadCss(cssUrl) {
             }
         });
         innerToggle.title = "expand all docs";
-        innerToggle.children[0].innerText = "+";
+        innerToggle.innerText = "+";
     }
 
     function toggleAllDocs() {

src/librustdoc/html/templates/print_item.html

@@ -18,11 +18,11 @@ <h1>
         {% endif %}
         {% match src_href %}
             {% when Some with (href) %}
-                <a class="src" href="{{href|safe}}">source</a> · {#+ #}
+                <a class="src" href="{{href|safe}}">source</a> {#+ #}
             {% else %}
         {% endmatch %}
         <button id="toggle-all-docs" title="collapse all docs"> {# #}
-            [<span>&#x2212;</span>] {# #}
+            &#x2212; {# #}
         </button> {# #}
     </span> {# #}
 </div> {# #}

tests/rustdoc-gui/anchors.goml

@@ -2,7 +2,16 @@
 
 define-function: (
     "check-colors",
-    (theme, main_color, title_color, main_heading_color, main_heading_type_color, src_link_color, sidebar_link_color),
+    (
+        theme,
+        main_color,
+        title_color,
+        main_heading_color,
+        main_heading_type_color,
+        src_link_color,
+        sidebar_link_color,
+        button_color,
+    ),
     block {
         go-to: "file://" + |DOC_PATH| + "/staged_api/struct.Foo.html"
         // This is needed to ensure that the text color is computed.
@@ -13,7 +22,7 @@ define-function: (
         // We reload the page so the local storage settings are being used.
         reload:
 
-        assert-css: ("#toggle-all-docs", {"color": |main_color|})
+        assert-css: ("#toggle-all-docs", {"color": |button_color|})
         assert-css: (".main-heading h1 a:nth-of-type(1)", {"color": |main_heading_color|})
         assert-css: (".main-heading a:nth-of-type(2)", {"color": |main_heading_type_color|})
         assert-css: (
@@ -81,6 +90,7 @@ call-function: (
         "main_heading_type_color": "#ffa0a5",
         "src_link_color": "#39afd7",
         "sidebar_link_color": "#53b1db",
+        "button_color": "#fff",
     },
 )
 call-function: (
@@ -93,6 +103,7 @@ call-function: (
         "main_heading_type_color": "#2dbfb8",
         "src_link_color": "#d2991d",
         "sidebar_link_color": "#fdbf35",
+        "button_color": "#ddd",
     },
 )
 call-function: (
@@ -105,5 +116,6 @@ call-function: (
         "main_heading_type_color": "#ad378a",
         "src_link_color": "#3873ad",
         "sidebar_link_color": "#356da4",
+        "button_color": "black",
     },
 )

tests/rustdoc-gui/scrape-examples-layout.goml

@@ -44,5 +44,5 @@ assert-position: (".scraped-example .code-wrapper .prev", {"y": 226 + |offset_y|
 
 // Then with mobile
 set-window-size: (600, 600)
-assert-position: (".scraped-example .code-wrapper", {"y": 308})
-assert-position: (".scraped-example .code-wrapper .prev", {"y": 308 + |offset_y|})
+assert-position: (".scraped-example .code-wrapper", {"y": 311})
+assert-position: (".scraped-example .code-wrapper .prev", {"y": 311 + |offset_y|})

tests/rustdoc-gui/shortcuts.goml

@@ -13,19 +13,19 @@ press-key: "Escape"
 assert-css: ("#help-button .popover", {"display": "none"})
 // Checking doc collapse and expand.
 // It should be displaying a "-":
-assert-text: ("#toggle-all-docs", "[−]")
+assert-text: ("#toggle-all-docs", "−")
 press-key: "-"
-wait-for-text: ("#toggle-all-docs", "[+]")
+wait-for-text: ("#toggle-all-docs", "+")
 assert-attribute: ("#toggle-all-docs", {"class": "will-expand"})
 // Pressing it again shouldn't do anything.
 press-key: "-"
-assert-text: ("#toggle-all-docs", "[+]")
+assert-text: ("#toggle-all-docs", "+")
 assert-attribute: ("#toggle-all-docs", {"class": "will-expand"})
 // Expanding now.
 press-key: "+"
-wait-for-text: ("#toggle-all-docs", "[−]")
+wait-for-text: ("#toggle-all-docs", "−")
 assert-attribute: ("#toggle-all-docs", {"class": ""})
 // Pressing it again shouldn't do anything.
 press-key: "+"
-assert-text: ("#toggle-all-docs", "[−]")
+assert-text: ("#toggle-all-docs", "−")
 assert-attribute: ("#toggle-all-docs", {"class": ""})

tests/rustdoc-gui/sidebar.goml

@@ -163,10 +163,10 @@ assert-css: ("#modules", {"background-color": "#fdffd3"})
 
 // Finally, assert that the `[+]/[−]` toggle doesn't affect sidebar width.
 click: "#toggle-all-docs"
-assert-text: ("#toggle-all-docs", "[+]")
+assert-text: ("#toggle-all-docs", "+")
 assert-property: (".sidebar", {"clientWidth": "200"})
 click: "#toggle-all-docs"
-assert-text: ("#toggle-all-docs", "[−]")
+assert-text: ("#toggle-all-docs", "−")
 assert-property: (".sidebar", {"clientWidth": "200"})
 
 // Checks that all.html and index.html have their sidebar link in the same place.

tests/rustdoc-gui/toggle-docs.goml

@@ -1,25 +1,25 @@
 // Checks that the documentation toggles have the correct position, style and work as expected.
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
 assert-attribute: ("#main-content > details.top-doc", {"open": ""})
-assert-text: ("#toggle-all-docs", "[−]")
+assert-text: ("#toggle-all-docs", "−")
 click: "#toggle-all-docs"
 wait-for: 50
 // This is now collapsed so there shouldn't be the "open" attribute on details.
 assert-attribute-false: ("#main-content > details.top-doc", {"open": ""})
-assert-text: ("#toggle-all-docs", "[+]")
+assert-text: ("#toggle-all-docs", "+")
 assert-css: (
     "#main-content > details.top-doc > summary",
     {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
 )
 click: "#toggle-all-docs"
 // Not collapsed anymore so the "open" attribute should be back.
 wait-for-attribute: ("#main-content > details.top-doc", {"open": ""})
-assert-text: ("#toggle-all-docs", "[−]")
+assert-text: ("#toggle-all-docs", "−")
 
 // Check that it works on non-module pages as well.
 go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
 // We first check that everything is visible.
-assert-text: ("#toggle-all-docs", "[−]")
+assert-text: ("#toggle-all-docs", "−")
 assert-attribute: ("#implementations-list details.toggle", {"open": ""}, ALL)
 assert-attribute: ("#trait-implementations-list details.toggle", {"open": ""}, ALL)
 assert-attribute-false: (
@@ -30,7 +30,7 @@ assert-attribute-false: (
 
 // We collapse them all.
 click: "#toggle-all-docs"
-wait-for-text: ("#toggle-all-docs", "[+]")
+wait-for-text: ("#toggle-all-docs", "+")
 // We check that all <details> are collapsed (except for the impl block ones).
 assert-attribute-false: ("details.toggle:not(.implementors-toggle)", {"open": ""}, ALL)
 assert-attribute: ("#implementations-list > details.implementors-toggle", {"open": ""})
@@ -42,34 +42,49 @@ assert-attribute-false: (
 )
 // We open them all again.
 click: "#toggle-all-docs"
-wait-for-text: ("#toggle-all-docs", "[−]")
+wait-for-text: ("#toggle-all-docs", "−")
 assert-attribute: ("details.toggle", {"open": ""}, ALL)
 
 // Checking the toggles style.
 show-text: true
 define-function: (
     "check-color",
-    (theme, filter),
+    (theme, filter, border_color, border_color_hover),
     block {
         // Setting the theme.
         set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
         // We reload the page so the local storage settings are being used.
         reload:
 
         assert-css: ("details.toggle > summary::before", {
-            "opacity": "0.5",
+            "border-color": |border_color|,
             "filter": |filter|,
         }, ALL)
         move-cursor-to: "details.toggle summary"
         assert-css: ("details.toggle > summary:hover::before", {
-            "opacity": "1",
+            "border-color": |border_color_hover|,
             "filter": |filter|,
         })
         // moving the cursor somewhere else to not mess with next function calls.
         move-cursor-to: ".search-input"
     },
 )
 
-call-function: ("check-color", {"theme": "ayu", "filter": "invert(1)"})
-call-function: ("check-color", {"theme": "dark", "filter": "invert(1)"})
-call-function: ("check-color", {"theme": "light", "filter": "none"})
+call-function: ("check-color", {
+    "theme": "ayu",
+    "filter": "invert(1)",
+    "border_color": "#808080",
+    "border_color_hover": "#000",
+})
+call-function: ("check-color", {
+    "theme": "dark",
+    "filter": "invert(1)",
+    "border_color": "#808080",
+    "border_color_hover": "#000",
+})
+call-function: ("check-color", {
+    "theme": "light",
+    "filter": "none",
+    "border_color": "#ccc",
+    "border_color_hover": "#616161",
+})

tests/rustdoc-gui/type-declation-overflow.goml

@@ -47,9 +47,10 @@ assert-css: (".mobile-topbar h2", {"overflow-x": "hidden"})
 // On desktop, they wrap when too big.
 set-window-size: (1100, 800)
 go-to: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html"
-compare-elements-position-false: (".main-heading h1", ".main-heading .out-of-band", ("y"))
+store-position: (".main-heading .out-of-band", {"y": out_of_band_long_y})
 go-to: "file://" + |DOC_PATH| + "/lib2/index.html"
-compare-elements-position: (".main-heading h1", ".main-heading .out-of-band", ("y"))
+store-position: (".main-heading .out-of-band", {"y": out_of_band_lib2_y})
+assert: |out_of_band_long_y| > |out_of_band_lib2_y|
 // make sure there is a gap between them
 compare-elements-position-near-false: (".main-heading h1", ".main-heading .out-of-band", {"x": 550})
 

tests/rustdoc/source-version-separator.rs

@@ -3,7 +3,7 @@
 #![feature(staged_api)]
 
 // @has foo/trait.Bar.html
-// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0.0 · source · '
+// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0.0 · source'
 #[stable(feature = "bar", since = "1.0")]
 pub trait Bar {
     // @has - '//*[@id="tymethod.foo"]/*[@class="rightside"]' '3.0.0 · source'
@@ -14,7 +14,7 @@ pub trait Bar {
 // @has - '//div[@id="implementors-list"]//*[@class="rightside"]' '4.0.0 · source'
 
 // @has foo/struct.Foo.html
-// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0.0 · source · '
+// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0.0 · source'
 #[stable(feature = "baz", since = "1.0")]
 pub struct Foo;