From 16b55903ee16503e7026677c169727d1907704c2 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 17 Nov 2022 14:31:34 +0100 Subject: [PATCH 1/2] Migrate tooltip style to CSS variables --- src/librustdoc/html/static/css/rustdoc.css | 6 ++++-- src/librustdoc/html/static/css/themes/ayu.css | 11 ++--------- src/librustdoc/html/static/css/themes/dark.css | 12 ++---------- src/librustdoc/html/static/css/themes/light.css | 13 +++---------- 4 files changed, 11 insertions(+), 31 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 9b1cac85cfd58..c6800fea5eb5e 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1162,6 +1162,8 @@ pre.rust .doccomment { width: max-content; top: -2px; z-index: 1; + background-color: var(--tooltip-background-color); + color: var(--tooltip-color); } .example-wrap .tooltip::before { @@ -1170,10 +1172,10 @@ pre.rust .doccomment { top: 50%; left: 16px; margin-top: -5px; - border-width: 5px; - border-style: solid; display: none; z-index: 1; + border: 5px solid transparent; + border-right-color: var(--tooltip-background-color); } .example-wrap.ignore .tooltip::after { diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index db311bccd6dc4..0e4dacb28f7cd 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -65,6 +65,8 @@ Original by Dempfi (https://github.com/dempfi/ayu) --test-arrow-hover-background-color: rgba(57, 175, 215, 0.368); --target-background-color: rgba(255, 236, 164, 0.06); --target-border-color: rgba(255, 180, 76, 0.85); + --tooltip-background-color: #314559; + --tooltip-color: #c5c5c5; --rust-logo-filter: drop-shadow(1px 0 0px #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) @@ -160,15 +162,6 @@ details.rustdoc-toggle > summary::before { color: #788797; } -.tooltip::after { - background-color: #314559; - color: #c5c5c5; -} - -.tooltip::before { - border-color: transparent #314559 transparent transparent; -} - #titles > button.selected { background-color: #141920 !important; border-bottom: 1px solid #ffb44c !important; diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index b2f2c77f5475a..8e00591179f1f 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -60,6 +60,8 @@ --test-arrow-hover-background-color: #4e8bca; --target-background-color: #494a3d; --target-border-color: #bb7410; + --tooltip-background-color: #000; + --tooltip-color: #fff; --rust-logo-filter: drop-shadow(1px 0 0px #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) @@ -82,16 +84,6 @@ details.rustdoc-toggle > summary::before { filter: invert(100%); } -.tooltip::after { - background-color: #000; - color: #fff; - border-color: #000; -} - -.tooltip::before { - border-color: transparent black transparent transparent; -} - #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 e81327956888b..e23e3682b166e 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -58,8 +58,10 @@ --test-arrow-background-color: rgba(78, 139, 202, 0.2); --test-arrow-hover-color: #f5f5f5; --test-arrow-hover-background-color: #4e8bca; - --target-background-color: #fdFfd3; + --target-background-color: #fdffd3; --target-border-color: #ad7c37; + --tooltip-background-color: #fdffd3; + --tooltip-color: #fff; --rust-logo-filter: initial; /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ --crate-search-div-filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg) @@ -75,15 +77,6 @@ body.source .example-wrap pre.rust a { background: #eee; } -.tooltip::after { - background-color: #000; - color: #fff; -} - -.tooltip::before { - border-color: transparent black transparent transparent; -} - #titles > button:not(.selected) { background-color: #e6e6e6; border-top-color: #e6e6e6; From 11d0c97de9413e4954012d7fc9707375ae8199c4 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 17 Nov 2022 14:31:50 +0100 Subject: [PATCH 2/2] Extend codeblock GUI test to include tooltips --- src/test/rustdoc-gui/codeblock-tooltip.goml | 80 +++++++++++++++++++-- 1 file changed, 76 insertions(+), 4 deletions(-) diff --git a/src/test/rustdoc-gui/codeblock-tooltip.goml b/src/test/rustdoc-gui/codeblock-tooltip.goml index 8e681a2a0c3a3..caa1ab8f31eb4 100644 --- a/src/test/rustdoc-gui/codeblock-tooltip.goml +++ b/src/test/rustdoc-gui/codeblock-tooltip.goml @@ -4,7 +4,7 @@ show-text: true define-function: ( "check-colors", - (theme), + (theme, background, color, border), [ // Setting the theme. ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}), @@ -30,6 +30,25 @@ define-function: ( ".docblock .example-wrap.compile_fail", {"border-left": "2px solid rgb(255, 0, 0)"}, )), + ("assert-css", ( + ".docblock .example-wrap.compile_fail .tooltip::after", + { + "content": '"This example deliberately fails to compile"', + "text-align": "center", + "padding": "5px 3px 3px", + "background-color": |background|, + "color": |color|, + "border": "1px solid " + |border|, + }, + )), + ("assert-css", ( + ".docblock .example-wrap.compile_fail .tooltip::before", + { + "border-width": "5px", + "border-style": "solid", + "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)", + }, + )), // should_panic block ("assert-css", ( @@ -51,6 +70,25 @@ define-function: ( ".docblock .example-wrap.should_panic", {"border-left": "2px solid rgb(255, 0, 0)"}, )), + ("assert-css", ( + ".docblock .example-wrap.should_panic .tooltip::after", + { + "content": '"This example panics"', + "text-align": "center", + "padding": "5px 3px 3px", + "background-color": |background|, + "color": |color|, + "border": "1px solid " + |border|, + }, + )), + ("assert-css", ( + ".docblock .example-wrap.should_panic .tooltip::before", + { + "border-width": "5px", + "border-style": "solid", + "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)", + }, + )), // ignore block ("assert-css", ( @@ -72,9 +110,43 @@ define-function: ( ".docblock .example-wrap.ignore", {"border-left": "2px solid rgb(255, 142, 0)"}, )), + ("assert-css", ( + ".docblock .example-wrap.ignore .tooltip::after", + { + "content": '"This example is not tested"', + "text-align": "center", + "padding": "5px 3px 3px", + "background-color": |background|, + "color": |color|, + "border": "1px solid " + |border|, + }, + )), + ("assert-css", ( + ".docblock .example-wrap.ignore .tooltip::before", + { + "border-width": "5px", + "border-style": "solid", + "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)", + }, + )), ], ) -call-function: ("check-colors", ("ayu")) -call-function: ("check-colors", ("dark")) -call-function: ("check-colors", ("light")) +call-function: ("check-colors", { + "theme": "ayu", + "background": "rgb(49, 69, 89)", + "color": "rgb(197, 197, 197)", + "border": "rgb(92, 103, 115)", +}) +call-function: ("check-colors", { + "theme": "dark", + "background": "rgb(0, 0, 0)", + "color": "rgb(255, 255, 255)", + "border": "rgb(224, 224, 224)", +}) +call-function: ("check-colors", { + "theme": "light", + "background": "rgb(253, 255, 211)", + "color": "rgb(255, 255, 255)", + "border": "rgb(224, 224, 224)", +})