From 6930b14add49d08c565059f8ae79de63fcedc810 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Mon, 26 Jun 2023 13:34:46 -0700 Subject: [PATCH 1/5] =?UTF-8?q?rustdoc:=20redesign=20[+]/[=E2=88=92]=20con?= =?UTF-8?q?trols?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is a continuation of #107658 and #59851, making the toggles consistent with other buttons, instead of looking like syntax. The tactics to improve the look of these controls: * When the toggle is expanded, the minus sign remains as dark as before, but the border is lighter. The plus sign has a border that's the same color as the label (black, on the default theme). This makes expansion buttons more prominent, easier to tell apart from collapse buttons. * The plus sign is slightly taller than wide, also to make it easier to tell apart from the minus sign. * The use of crispEdges has to get a bit strategic to make this come out right. I've tested it on Firefox, Safari, and Chromium, but it's a bit hard to be sure it works right on all setups. * Does anybody know some trick to do crispEdges on only the X axis, while still allowing antialiasing on the Y? * The "toggle all" button is modeled after the Help and Settings buttons, with a matching border, width, and +/− label. --- src/librustdoc/html/static/css/rustdoc.css | 43 +++++++++++-------- src/librustdoc/html/static/js/main.js | 4 +- src/librustdoc/html/templates/print_item.html | 4 +- tests/rustdoc-gui/anchors.goml | 16 ++++++- tests/rustdoc-gui/shortcuts.goml | 10 ++--- tests/rustdoc-gui/sidebar.goml | 4 +- tests/rustdoc-gui/toggle-docs.goml | 12 +++--- .../rustdoc-gui/type-declation-overflow.goml | 5 ++- tests/rustdoc/source-version-separator.rs | 4 +- 9 files changed, 60 insertions(+), 42 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index b898eb5d381e3..2ffa418616e8a 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -138,7 +138,7 @@ h1, h2, h3, h4 { margin-top: 0; } .main-heading h1 { - margin: 0; + margin: 9px 0 0 0; padding: 0; flex-grow: 1; /* We use overflow-wrap: break-word for Safari, which doesn't recognize @@ -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; @@ -725,7 +716,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; } @@ -1471,11 +1462,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 +1478,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 { +#help-button > a:hover, #help-button > a:focus, +button#toggle-all-docs:hover, button#toggle-all-docs:focus { 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,9 +1594,9 @@ 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; @@ -1626,7 +1627,7 @@ details.toggle > summary.hideme::after { content: ""; } -details.toggle > summary:focus::before, +details.toggle > summary:focus-visible::before, details.toggle > summary:hover::before { opacity: 1; } @@ -1676,7 +1677,7 @@ details.toggle[open] > summary::before { /* toggle minus */ background: url('data:image/svg+xml,') no-repeat top left; +d="M2.5 2.5h12v12h-12v-12.5" stroke="%23999"/>') no-repeat top left; } details.toggle[open] > summary::after { @@ -1734,6 +1735,10 @@ in src-script.js flex-direction: column; } + button#toggle-all-docs { + margin-top: -8px; + } + .out-of-band { text-align: left; margin-left: initial; 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..0b1c92fa687d3 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": "#000", }, ) 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/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..a9ca656513f0c 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,7 +42,7 @@ 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. 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; From 73d8119141c0052487ee3a01bc98915e507ae3ef Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Wed, 28 Jun 2023 09:29:17 -0700 Subject: [PATCH 2/5] rustdoc: tweak outline color on minus button and dark toggle all --- src/librustdoc/html/static/css/noscript.css | 8 ++++++++ src/librustdoc/html/static/css/rustdoc.css | 16 ++++++++++++---- tests/rustdoc-gui/anchors.goml | 2 +- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index fe0cf6dc8cc75..6b2f064d8fb06 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -239,5 +239,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 2ffa418616e8a..a0120d7d38885 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1483,9 +1483,9 @@ a.tooltip:hover::after { opacity: 1; } -#settings-menu > a:hover, #settings-menu > a:focus, -#help-button > a:hover, #help-button > a:focus, -button#toggle-all-docs:hover, button#toggle-all-docs: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); } @@ -1677,7 +1677,7 @@ details.toggle[open] > summary::before { /* toggle minus */ background: url('data:image/svg+xml,') no-repeat top left; +d="M2.5 2.5h12v12h-12v-12.5"/>') no-repeat top left; } details.toggle[open] > summary::after { @@ -2382,6 +2382,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 */ diff --git a/tests/rustdoc-gui/anchors.goml b/tests/rustdoc-gui/anchors.goml index 0b1c92fa687d3..0b9e18ede3c6a 100644 --- a/tests/rustdoc-gui/anchors.goml +++ b/tests/rustdoc-gui/anchors.goml @@ -103,7 +103,7 @@ call-function: ( "main_heading_type_color": "#2dbfb8", "src_link_color": "#d2991d", "sidebar_link_color": "#fdbf35", - "button_color": "#000", + "button_color": "#ddd", }, ) call-function: ( From e930ab391e6f0635e56c21b29ce270e1fcb406e9 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Sun, 2 Jul 2023 18:26:24 -0700 Subject: [PATCH 3/5] rustdoc: make toggle buttons a bit bigger --- src/librustdoc/html/static/css/rustdoc.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index a0120d7d38885..119af65b9ebf3 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1594,13 +1594,13 @@ 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: 18px; + height: 18px; display: inline-block; vertical-align: middle; opacity: .5; @@ -1675,9 +1675,9 @@ details.toggle[open] > summary.hideme > span { details.toggle[open] > summary::before { /* toggle minus */ - background: url('data:image/svg+xml,') no-repeat top left; +d="M2.5 2.5h14v14h-14v-14.5"/>') no-repeat top left; } details.toggle[open] > summary::after { From 14252354b79c792662af48629f289a5324758ab9 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Thu, 10 Aug 2023 10:38:14 -0700 Subject: [PATCH 4/5] rustdoc: improve alignment of out-of-band page info --- src/librustdoc/html/static/css/rustdoc.css | 24 +++++++++++++------ tests/rustdoc-gui/scrape-examples-layout.goml | 4 ++-- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 119af65b9ebf3..1f10097bc29a9 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -138,7 +138,7 @@ h1, h2, h3, h4 { margin-top: 0; } .main-heading h1 { - margin: 9px 0 0 0; + margin: 0; padding: 0; flex-grow: 1; /* We use overflow-wrap: break-word for Safari, which doesn't recognize @@ -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: @@ -577,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; } @@ -668,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, @@ -1120,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 { @@ -1596,7 +1606,7 @@ details.toggle > summary::before { /* toggle plus */ background: url('data:image/svg+xml,') no-repeat top left; +shape-rendering="crispEdges" stroke="grey"/>') no-repeat top left; content: ""; cursor: pointer; width: 18px; @@ -1675,9 +1685,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 { @@ -1743,6 +1752,7 @@ in src-script.js text-align: left; margin-left: initial; padding: initial; + display: block; } .out-of-band .since::before { 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|}) From 36f75e46b65de17a8115d79cd8db274a7c66b556 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Tue, 5 Dec 2023 18:56:31 -0700 Subject: [PATCH 5/5] rustdoc: make the toggle buttons look more like the big one --- src/librustdoc/html/static/css/noscript.css | 4 +++ src/librustdoc/html/static/css/rustdoc.css | 19 +++++++++------ tests/rustdoc-gui/toggle-docs.goml | 27 ++++++++++++++++----- 3 files changed, 37 insertions(+), 13 deletions(-) diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 6b2f064d8fb06..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%); diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 1f10097bc29a9..fc5febd891768 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1604,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: 18px; - height: 18px; + width: 13px; + height: 13px; + border: solid 1px var(--toggle-border); display: inline-block; vertical-align: middle; - opacity: .5; filter: var(--toggle-filter); } @@ -1639,7 +1638,7 @@ details.toggle > summary.hideme::after { 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 { @@ -2208,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%); @@ -2310,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%); @@ -2427,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/tests/rustdoc-gui/toggle-docs.goml b/tests/rustdoc-gui/toggle-docs.goml index a9ca656513f0c..95062e51db0f4 100644 --- a/tests/rustdoc-gui/toggle-docs.goml +++ b/tests/rustdoc-gui/toggle-docs.goml @@ -49,7 +49,7 @@ assert-attribute: ("details.toggle", {"open": ""}, ALL) 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", +})