From 518ca9c16f87435dca9db434a0d6d8f5d6a6d1e8 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sat, 24 Dec 2022 08:28:59 +0100 Subject: [PATCH 1/2] Migrate toggle-line-inner background to CSS variable --- src/librustdoc/html/static/css/rustdoc.css | 5 +++++ 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, 11 insertions(+), 18 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 1bca973bf71..bca58fec517 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -2029,6 +2029,11 @@ in storage.js .toggle-line-inner { min-width: 2px; height: 100%; + background: var(--scrape-example-toggle-line-background); +} + +.toggle-line:hover .toggle-line-inner { + background: var(--scrape-example-toggle-line-hover-background); } .more-scraped-examples .scraped-example, .example-links { diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index ce416f77afe..f117183fa9b 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -90,6 +90,8 @@ Original by Dempfi (https://github.com/dempfi/ayu) --source-sidebar-background-hover: #14191f; --table-alt-row-background-color: #191f26; --codeblock-link-background: #333; + --scrape-example-toggle-line-background: #999; + --scrape-example-toggle-line-hover-background: #c5c5c5; } h1, h2, h3, h4 { @@ -221,9 +223,3 @@ pre.rust .kw-2, pre.rust .prelude-ty {} .scraped-example:not(.expanded) .code-wrapper::after { background: linear-gradient(to top, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0)); } -.toggle-line-inner { - background: #999; -} -.toggle-line:hover .toggle-line-inner { - background: #c5c5c5; -} diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 33d934ff3c3..f4f33263d04 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -85,6 +85,8 @@ --source-sidebar-background-hover: #444; --table-alt-row-background-color: #2A2A2A; --codeblock-link-background: #333; + --scrape-example-toggle-line-background: #999; + --scrape-example-toggle-line-hover-background: #c5c5c5; } #titles > button:not(.selected) { @@ -117,9 +119,3 @@ .scraped-example:not(.expanded) .code-wrapper::after { background: linear-gradient(to top, rgba(53, 53, 53, 1), rgba(53, 53, 53, 0)); } -.toggle-line-inner { - background: #999; -} -.toggle-line:hover .toggle-line-inner { - background: #c5c5c5; -} diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 30e91077d33..453741ed1d3 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -82,6 +82,8 @@ --source-sidebar-background-hover: #e0e0e0; --table-alt-row-background-color: #F5F5F5; --codeblock-link-background: #eee; + --scrape-example-toggle-line-background: #ccc; + --scrape-example-toggle-line-hover-background: #999; } #titles > button:not(.selected) { @@ -114,9 +116,3 @@ .scraped-example:not(.expanded) .code-wrapper::after { background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); } -.toggle-line-inner { - background: #ccc; -} -.toggle-line:hover .toggle-line-inner { - background: #999; -} From 457f6c8332428fddfa6ac94b78394ed5d0a116b4 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sat, 24 Dec 2022 08:29:17 +0100 Subject: [PATCH 2/2] Extend GUI test for toggle-line background --- .../rustdoc-gui/scrape-examples-toggle.goml | 44 +++++++++++++++++-- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/src/test/rustdoc-gui/scrape-examples-toggle.goml b/src/test/rustdoc-gui/scrape-examples-toggle.goml index ee720afb788..9bb338d7129 100644 --- a/src/test/rustdoc-gui/scrape-examples-toggle.goml +++ b/src/test/rustdoc-gui/scrape-examples-toggle.goml @@ -1,9 +1,45 @@ goto: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html" -// Clicking "More examples..." will open additional examples -assert-attribute-false: (".more-examples-toggle", {"open": ""}) -click: ".more-examples-toggle" -assert-attribute: (".more-examples-toggle", {"open": ""}) +// Checking the color of the toggle line. +show-text: true +define-function: ( + "check-color", + (theme, toggle_line_color, toggle_line_hover_color), + [ + ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}), + ("reload"), + + // Clicking "More examples..." will open additional examples + ("assert-attribute-false", (".more-examples-toggle", {"open": ""})), + ("click", ".more-examples-toggle"), + ("assert-attribute", (".more-examples-toggle", {"open": ""})), + + ("assert-css", (".toggle-line-inner", {"background-color": |toggle_line_color|}, ALL)), + ("move-cursor-to", ".toggle-line"), + ("assert-css", ( + ".toggle-line:hover .toggle-line-inner", + {"background-color": |toggle_line_hover_color|}, + )), + // Moving cursor away from the toggle line to prevent disrupting next test. + ("move-cursor-to", ".search-input"), + ], +) + +call-function: ("check-color", { + "theme": "ayu", + "toggle_line_color": "rgb(153, 153, 153)", + "toggle_line_hover_color": "rgb(197, 197, 197)", +}) +call-function: ("check-color", { + "theme": "dark", + "toggle_line_color": "rgb(153, 153, 153)", + "toggle_line_hover_color": "rgb(197, 197, 197)", +}) +call-function: ("check-color", { + "theme": "light", + "toggle_line_color": "rgb(204, 204, 204)", + "toggle_line_hover_color": "rgb(153, 153, 153)", +}) // Toggling all docs will close additional examples click: "#toggle-all-docs"