From f76c4b84c9d3def13d4514db0d13201693552274 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 1 Dec 2022 15:55:09 +0100 Subject: [PATCH 1/2] Migrate summary toggle filter to CSS variable --- src/librustdoc/html/static/css/rustdoc.css | 1 + src/librustdoc/html/static/css/themes/ayu.css | 5 +---- src/librustdoc/html/static/css/themes/dark.css | 5 +---- src/librustdoc/html/static/css/themes/light.css | 1 + 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 98a5b761dedf5..fc688e285719c 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1521,6 +1521,7 @@ details.rustdoc-toggle > summary::before { display: inline-block; vertical-align: middle; opacity: .5; + filter: var(--toggle-filter); } details.rustdoc-toggle > summary.hideme > span, diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index de7db7d438c9f..6e0905e730d08 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -21,6 +21,7 @@ Original by Dempfi (https://github.com/dempfi/ayu) --right-side-color: grey; --code-attribute-color: #999; --toggles-color: #999; + --toggle-filter: invert(100%); --search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */ --copy-path-button-color: #fff; --copy-path-img-filter: invert(70%); @@ -158,10 +159,6 @@ body.source .example-wrap pre.rust a { background: #333; } -details.rustdoc-toggle > summary::before { - filter: invert(100%); -} - .module-item .stab, .import-item .stab { color: #000; diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index d8929f3233864..334fc3de5616d 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -16,6 +16,7 @@ --right-side-color: grey; --code-attribute-color: #999; --toggles-color: #999; + --toggle-filter: invert(100%); --search-input-focused-border-color: #008dfd; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); @@ -89,10 +90,6 @@ body.source .example-wrap pre.rust a { background: #333; } -details.rustdoc-toggle > summary::before { - filter: invert(100%); -} - #titles > button:not(.selected) { background-color: #252525; border-top-color: #252525; diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 78a0cdcc3bc05..453e7508af4ba 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -16,6 +16,7 @@ --right-side-color: grey; --code-attribute-color: #999; --toggles-color: #999; + --toggle-filter: none; --search-input-focused-border-color: #66afe9; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); From 188f31eba0c190425bb1fde67005cfd535686c36 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 1 Dec 2022 15:58:16 +0100 Subject: [PATCH 2/2] Add GUI test for toggle filter and opacity --- src/test/rustdoc-gui/toggle-docs.goml | 29 +++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/test/rustdoc-gui/toggle-docs.goml b/src/test/rustdoc-gui/toggle-docs.goml index 8c9fd0a8866d5..b7d1072376758 100644 --- a/src/test/rustdoc-gui/toggle-docs.goml +++ b/src/test/rustdoc-gui/toggle-docs.goml @@ -40,3 +40,32 @@ assert-attribute-false: ( click: "#toggle-all-docs" wait-for-text: ("#toggle-all-docs", "[−]") assert-attribute: ("details.rustdoc-toggle", {"open": ""}, ALL) + +// Checking the toggles style. +show-text: true +define-function: ( + "check-color", + (theme, filter), + [ + // Setting the theme. + ("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.rustdoc-toggle > summary::before", { + "opacity": "0.5", + "filter": |filter|, + }, ALL)), + ("move-cursor-to", "details.rustdoc-toggle summary"), + ("assert-css", ("details.rustdoc-toggle > summary:hover::before", { + "opacity": "1", + "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"})