diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css
index fe0cf6dc8cc75..788b34b27210a 100644
--- a/src/librustdoc/html/static/css/noscript.css
+++ b/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 */
}
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index b898eb5d381e3..fc5febd891768 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/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%);
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index d613997cd7ff5..713737780ba01 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/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() {
diff --git a/src/librustdoc/html/templates/print_item.html b/src/librustdoc/html/templates/print_item.html
index 1d215c26968d8..ddb2a3212430f 100644
--- a/src/librustdoc/html/templates/print_item.html
+++ b/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>−</span>] {# #}
+ − {# #}
</button> {# #}
</span> {# #}
</div> {# #}
diff --git a/tests/rustdoc-gui/anchors.goml b/tests/rustdoc-gui/anchors.goml
index 72e0bcd77e08c..0b9e18ede3c6a 100644
--- a/tests/rustdoc-gui/anchors.goml
+++ b/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",
},
)
diff --git a/tests/rustdoc-gui/scrape-examples-layout.goml b/tests/rustdoc-gui/scrape-examples-layout.goml
index 4fc1c1ac065f4..1621ad2473fa4 100644
--- a/tests/rustdoc-gui/scrape-examples-layout.goml
+++ b/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|})
diff --git a/tests/rustdoc-gui/shortcuts.goml b/tests/rustdoc-gui/shortcuts.goml
index 2c61ee5428b86..57f6ad9c34b4a 100644
--- a/tests/rustdoc-gui/shortcuts.goml
+++ b/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": ""})
diff --git a/tests/rustdoc-gui/sidebar.goml b/tests/rustdoc-gui/sidebar.goml
index eff66d803d2a8..ad4f755fd24c4 100644
--- a/tests/rustdoc-gui/sidebar.goml
+++ b/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.
diff --git a/tests/rustdoc-gui/toggle-docs.goml b/tests/rustdoc-gui/toggle-docs.goml
index 9ea6d9b18f4c7..95062e51db0f4 100644
--- a/tests/rustdoc-gui/toggle-docs.goml
+++ b/tests/rustdoc-gui/toggle-docs.goml
@@ -1,12 +1,12 @@
// 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'},
@@ -14,12 +14,12 @@ assert-css: (
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,14 +42,14 @@ 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"}
@@ -57,12 +57,12 @@ define-function: (
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.
@@ -70,6 +70,21 @@ define-function: (
},
)
-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",
+})
diff --git a/tests/rustdoc-gui/type-declation-overflow.goml b/tests/rustdoc-gui/type-declation-overflow.goml
index 5780f5c88f82c..059692ee88b77 100644
--- a/tests/rustdoc-gui/type-declation-overflow.goml
+++ b/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})
diff --git a/tests/rustdoc/source-version-separator.rs b/tests/rustdoc/source-version-separator.rs
index 7256f731573dc..be6873988a54c 100644
--- a/tests/rustdoc/source-version-separator.rs
+++ b/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;