From c3eb202a61445eec77f0fb4af87704d148bca0e0 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Wed, 28 Dec 2022 17:14:17 +0100 Subject: [PATCH 1/4] Migrate scraped examples higlight CSS to variables --- src/librustdoc/html/static/css/rustdoc.css | 7 +++++++ src/librustdoc/html/static/css/themes/ayu.css | 8 ++------ src/librustdoc/html/static/css/themes/dark.css | 8 ++------ src/librustdoc/html/static/css/themes/light.css | 8 ++------ 4 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 1ba8d118b7644..31bc8c9129df3 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1959,6 +1959,13 @@ in storage.js overflow-x: hidden; } +.scraped-example .example-wrap .rust span.highlight { + background: var(--scrape-example-code-line-highlight); +} +.scraped-example .example-wrap .rust span.highlight.focus { + background: var(--scrape-example-code-line-highlight-focus); +} + .more-examples-toggle { max-width: calc(100% + 25px); margin-top: 10px; diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index 7d7bdfb92ce2d..3d0025054221c 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -91,6 +91,8 @@ Original by Dempfi (https://github.com/dempfi/ayu) --codeblock-link-background: #333; --scrape-example-toggle-line-background: #999; --scrape-example-toggle-line-hover-background: #c5c5c5; + --scrape-example-code-line-highlight: rgb(91, 59, 1); + --scrape-example-code-line-highlight-focus: rgb(124, 75, 15); } h1, h2, h3, h4 { @@ -206,12 +208,6 @@ above the `@media (max-width: 700px)` rules due to a bug in the css checker */ border-color: white; color: white; } -.scraped-example .example-wrap .rust span.highlight { - background: rgb(91, 59, 1); -} -.scraped-example .example-wrap .rust span.highlight.focus { - background: rgb(124, 75, 15); -} .scraped-example:not(.expanded) .code-wrapper::before { background: linear-gradient(to bottom, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0)); } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 6dd15d2e1bbaa..b88eeedddf3ce 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -86,6 +86,8 @@ --codeblock-link-background: #333; --scrape-example-toggle-line-background: #999; --scrape-example-toggle-line-hover-background: #c5c5c5; + --scrape-example-code-line-highlight: rgb(91, 59, 1); + --scrape-example-code-line-highlight-focus: rgb(124, 75, 15); } #search-tabs > button:not(.selected) { @@ -106,12 +108,6 @@ border-color: white; color: white; } -.scraped-example .example-wrap .rust span.highlight { - background: rgb(91, 59, 1); -} -.scraped-example .example-wrap .rust span.highlight.focus { - background: rgb(124, 75, 15); -} .scraped-example:not(.expanded) .code-wrapper::before { background: linear-gradient(to bottom, rgba(53, 53, 53, 1), rgba(53, 53, 53, 0)); } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 804e20d0d44e9..fff59d4e9c98c 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -83,6 +83,8 @@ --codeblock-link-background: #eee; --scrape-example-toggle-line-background: #ccc; --scrape-example-toggle-line-hover-background: #999; + --scrape-example-code-line-highlight: #fcffd6; + --scrape-example-code-line-highlight-focus: #f6fdb0; } #search-tabs > button:not(.selected) { @@ -103,12 +105,6 @@ border-color: black; color: black; } -.scraped-example .example-wrap .rust span.highlight { - background: #fcffd6; -} -.scraped-example .example-wrap .rust span.highlight.focus { - background: #f6fdb0; -} .scraped-example:not(.expanded) .code-wrapper::before { background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); } From aa20f885c4abaa8a13f0adcc5d5738b895cc84a8 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Wed, 28 Dec 2022 17:15:09 +0100 Subject: [PATCH 2/4] Add GUI test for scraped examples colors --- .../rustdoc-gui/scrape-examples-color.goml | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/test/rustdoc-gui/scrape-examples-color.goml diff --git a/src/test/rustdoc-gui/scrape-examples-color.goml b/src/test/rustdoc-gui/scrape-examples-color.goml new file mode 100644 index 0000000000000..5175891e7ba69 --- /dev/null +++ b/src/test/rustdoc-gui/scrape-examples-color.goml @@ -0,0 +1,34 @@ +// Check that scrape example code blocks have the expected colors. +goto: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html" + +define-function: ( + "check-colors", + (theme, highlight, highlight_focus), + [ + ("local-storage", { "rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false", }), + ("reload"), + ("wait-for", ".more-examples-toggle"), + ("assert-css", (".scraped-example .example-wrap .rust span.highlight:not(.focus)", { + "background-color": |highlight|, + }, ALL)), + ("assert-css", (".scraped-example .example-wrap .rust span.highlight.focus", { + "background-color": |highlight_focus|, + }, ALL)), + ] +) + +call-function: ("check-colors", { + "theme": "ayu", + "highlight": "rgb(91, 59, 1)", + "highlight_focus": "rgb(124, 75, 15)", +}) +call-function: ("check-colors", { + "theme": "dark", + "highlight": "rgb(91, 59, 1)", + "highlight_focus": "rgb(124, 75, 15)", +}) +call-function: ("check-colors", { + "theme": "light", + "highlight": "rgb(252, 255, 214)", + "highlight_focus": "rgb(246, 253, 176)", +}) From 5494da23afe9a8ff178475c6bd9d3efb5ddac645 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 29 Dec 2022 12:10:24 +0100 Subject: [PATCH 3/4] Migrate more scraped examples CSS rules to CSS variables --- src/librustdoc/html/static/css/rustdoc.css | 8 ++++++++ src/librustdoc/html/static/css/themes/ayu.css | 12 ++++-------- src/librustdoc/html/static/css/themes/dark.css | 12 ++++-------- src/librustdoc/html/static/css/themes/light.css | 12 ++++-------- 4 files changed, 20 insertions(+), 24 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 31bc8c9129df3..1a75610310b39 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1965,6 +1965,14 @@ in storage.js .scraped-example .example-wrap .rust span.highlight.focus { background: var(--scrape-example-code-line-highlight-focus); } +.scraped-example-list .scrape-help { + border-color: var(--scrape-example-help-border-color); + color: var(--scrape-example-help-color); +} +.scraped-example-list .scrape-help:hover { + border-color: var(--scrape-example-help-hover-border-color); + color: var(--scrape-example-help-hover-color); +} .more-examples-toggle { max-width: calc(100% + 25px); diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index 3d0025054221c..979e7e0f999ed 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -93,6 +93,10 @@ Original by Dempfi (https://github.com/dempfi/ayu) --scrape-example-toggle-line-hover-background: #c5c5c5; --scrape-example-code-line-highlight: rgb(91, 59, 1); --scrape-example-code-line-highlight-focus: rgb(124, 75, 15); + --scrape-example-help-border-color: #aaa; + --scrape-example-help-color: #eee; + --scrape-example-help-hover-border-color: #fff; + --scrape-example-help-hover-color: #fff; } h1, h2, h3, h4 { @@ -200,14 +204,6 @@ above the `@media (max-width: 700px)` rules due to a bug in the css checker */ color: #ffb44c; } -.scraped-example-list .scrape-help { - border-color: #aaa; - color: #eee; -} -.scraped-example-list .scrape-help:hover { - border-color: white; - color: white; -} .scraped-example:not(.expanded) .code-wrapper::before { background: linear-gradient(to bottom, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0)); } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index b88eeedddf3ce..fb15863b027ca 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -88,6 +88,10 @@ --scrape-example-toggle-line-hover-background: #c5c5c5; --scrape-example-code-line-highlight: rgb(91, 59, 1); --scrape-example-code-line-highlight-focus: rgb(124, 75, 15); + --scrape-example-help-border-color: #aaa; + --scrape-example-help-color: #eee; + --scrape-example-help-hover-border-color: #fff; + --scrape-example-help-hover-color: #fff; } #search-tabs > button:not(.selected) { @@ -100,14 +104,6 @@ background-color: #353535; } -.scraped-example-list .scrape-help { - border-color: #aaa; - color: #eee; -} -.scraped-example-list .scrape-help:hover { - border-color: white; - color: white; -} .scraped-example:not(.expanded) .code-wrapper::before { background: linear-gradient(to bottom, rgba(53, 53, 53, 1), rgba(53, 53, 53, 0)); } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index fff59d4e9c98c..053fa78d1dc58 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -85,6 +85,10 @@ --scrape-example-toggle-line-hover-background: #999; --scrape-example-code-line-highlight: #fcffd6; --scrape-example-code-line-highlight-focus: #f6fdb0; + --scrape-example-help-border-color: #555; + --scrape-example-help-color: #333; + --scrape-example-help-hover-border-color: #000; + --scrape-example-help-hover-color: #000; } #search-tabs > button:not(.selected) { @@ -97,14 +101,6 @@ border-top-color: #0089ff; } -.scraped-example-list .scrape-help { - border-color: #555; - color: #333; -} -.scraped-example-list .scrape-help:hover { - border-color: black; - color: black; -} .scraped-example:not(.expanded) .code-wrapper::before { background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); } From 4b5c0923c779e14f68ce6a104ab4e6c029f0627f Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 29 Dec 2022 12:10:39 +0100 Subject: [PATCH 4/4] Extend rustdoc GUI test for scraped examples --- .../rustdoc-gui/scrape-examples-color.goml | 28 ++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/test/rustdoc-gui/scrape-examples-color.goml b/src/test/rustdoc-gui/scrape-examples-color.goml index 5175891e7ba69..360e2af8ba427 100644 --- a/src/test/rustdoc-gui/scrape-examples-color.goml +++ b/src/test/rustdoc-gui/scrape-examples-color.goml @@ -1,9 +1,11 @@ // Check that scrape example code blocks have the expected colors. goto: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html" +show-text: true define-function: ( "check-colors", - (theme, highlight, highlight_focus), + (theme, highlight, highlight_focus, help_border, help_color, help_hover_border, + help_hover_color), [ ("local-storage", { "rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false", }), ("reload"), @@ -14,6 +16,18 @@ define-function: ( ("assert-css", (".scraped-example .example-wrap .rust span.highlight.focus", { "background-color": |highlight_focus|, }, ALL)), + + ("assert-css", (".scraped-example-list .scrape-help", { + "border-color": |help_border|, + "color": |help_color|, + })), + ("move-cursor-to", ".scraped-example-list .scrape-help"), + ("assert-css", (".scraped-example-list .scrape-help:hover", { + "border-color": |help_hover_border|, + "color": |help_hover_color|, + })), + // Moving the cursor to another item to not break next runs. + ("move-cursor-to", ".search-input"), ] ) @@ -21,14 +35,26 @@ call-function: ("check-colors", { "theme": "ayu", "highlight": "rgb(91, 59, 1)", "highlight_focus": "rgb(124, 75, 15)", + "help_border": "rgb(170, 170, 170)", + "help_color": "rgb(238, 238, 238)", + "help_hover_border": "rgb(255, 255, 255)", + "help_hover_color": "rgb(255, 255, 255)", }) call-function: ("check-colors", { "theme": "dark", "highlight": "rgb(91, 59, 1)", "highlight_focus": "rgb(124, 75, 15)", + "help_border": "rgb(170, 170, 170)", + "help_color": "rgb(238, 238, 238)", + "help_hover_border": "rgb(255, 255, 255)", + "help_hover_color": "rgb(255, 255, 255)", }) call-function: ("check-colors", { "theme": "light", "highlight": "rgb(252, 255, 214)", "highlight_focus": "rgb(246, 253, 176)", + "help_border": "rgb(85, 85, 85)", + "help_color": "rgb(51, 51, 51)", + "help_hover_border": "rgb(0, 0, 0)", + "help_hover_color": "rgb(0, 0, 0)", })