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,') no-repeat top left; + background: url('data:image/svg+xml,') 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,') no-repeat top left; + background: url('data:image/svg+xml,') 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 @@

{% endif %} {% match src_href %} {% when Some with (href) %} - source · {#+ #} + source {#+ #} {% else %} {% endmatch %} {# #} {# #} {# #} 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
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;