From 786ec7ccf1aacdd82ba7585618c335f8818b2a86 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 24 Nov 2022 23:36:26 +0100 Subject: [PATCH 1/3] Migrate source code elements style to CSS 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 | 10 ++-------- src/librustdoc/html/static/css/themes/light.css | 9 ++------- 4 files changed, 14 insertions(+), 20 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index d4e881ad832af..dad6a301f17ef 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1345,6 +1345,13 @@ a.test-arrow:hover { border-bottom: 1px solid var(--border-color); margin-bottom: 6px; } +#source-sidebar div.files > a:hover, details.dir-entry summary:hover, +#source-sidebar div.files > a:focus, details.dir-entry summary:focus { + background-color: var(--source-sidebar-background-hover); +} +#source-sidebar div.files > a.selected { + background-color: var(--source-sidebar-background-selected); +} #sidebar-toggle > button { font-size: inherit; font-weight: bold; diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index eb66377670c6b..de7db7d438c9f 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -84,6 +84,8 @@ Original by Dempfi (https://github.com/dempfi/ayu) --crate-search-div-hover-filter: invert(98%) sepia(12%) saturate(81%) hue-rotate(343deg) brightness(113%) contrast(76%); --crate-search-hover-border: #e0e0e0; + --source-sidebar-background-selected: #14191f; + --source-sidebar-background-hover: #14191f; } h1, h2, h3, h4 { @@ -208,12 +210,8 @@ pre.rust .kw-2, pre.rust .prelude-ty {} color: #fff; } #source-sidebar div.files > a:hover, details.dir-entry summary:hover, -#source-sidebar div.files > a:focus, details.dir-entry summary:focus { - background-color: #14191f; - color: #ffb44c; -} +#source-sidebar div.files > a:focus, details.dir-entry summary:focus, #source-sidebar div.files > a.selected { - background-color: #14191f; color: #ffb44c; } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 44598a6b77866..d8929f3233864 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -79,6 +79,8 @@ --crate-search-div-hover-filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) brightness(100%) contrast(91%); --crate-search-hover-border: #2196f3; + --source-sidebar-background-selected: #333; + --source-sidebar-background-hover: #444; } .content .item-info::before { color: #ccc; } @@ -105,14 +107,6 @@ details.rustdoc-toggle > summary::before { color: #888; } -#source-sidebar div.files > a:hover, details.dir-entry summary:hover, -#source-sidebar div.files > a:focus, details.dir-entry summary:focus { - background-color: #444; -} -#source-sidebar div.files > a.selected { - background-color: #333; -} - .scraped-example-list .scrape-help { border-color: #aaa; color: #eee; diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index f0db14fd59f53..ff6c68635338c 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -76,6 +76,8 @@ --crate-search-div-hover-filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg) brightness(96%) contrast(93%); --crate-search-hover-border: #717171; + --source-sidebar-background-selected: #fff; + --source-sidebar-background-hover: #e0e0e0; } .content .item-info::before { color: #ccc; } @@ -98,13 +100,6 @@ body.source .example-wrap pre.rust a { color: #888; } -#source-sidebar div.files > a:hover, details.dir-entry summary:hover, -#source-sidebar div.files > a:focus, details.dir-entry summary:focus { - background-color: #E0E0E0; -} -#source-sidebar div.files > a.selected { - background-color: #fff; -} .scraped-example-list .scrape-help { border-color: #555; color: #333; From 6fc52c6b8026ac71c455a553785989b0670103ef Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 24 Nov 2022 23:36:41 +0100 Subject: [PATCH 2/3] Extend GUI test to include more source code elements checks --- .../sidebar-source-code-display.goml | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/src/test/rustdoc-gui/sidebar-source-code-display.goml b/src/test/rustdoc-gui/sidebar-source-code-display.goml index abf8af77715c9..67f57405afc8f 100644 --- a/src/test/rustdoc-gui/sidebar-source-code-display.goml +++ b/src/test/rustdoc-gui/sidebar-source-code-display.goml @@ -43,6 +43,7 @@ define-function: ( "#source-sidebar details[open] > .files a.selected", {"color": |color_hover|, "background-color": |background|}, )), + // Without hover or focus. ("assert-css", ("#sidebar-toggle > button", {"background-color": |background_toggle|})), // With focus. @@ -52,7 +53,8 @@ define-function: ( // With hover. ("move-cursor-to", "#sidebar-toggle > button"), ("assert-css", ("#sidebar-toggle > button", {"background-color": |background_toggle_hover|})), - // Without hover. + + // Without hover or focus. ("assert-css", ( "#source-sidebar details[open] > .files a:not(.selected)", {"color": |color|, "background-color": |background_toggle|}, @@ -70,7 +72,27 @@ define-function: ( "#source-sidebar details[open] > .files a:not(.selected)", {"color": |color_hover|, "background-color": |background_hover|}, )), - // Without hover. + + // Without hover or focus. + ("assert-css", ( + "#source-sidebar .dir-entry summary", + {"color": |color|, "background-color": |background_toggle|}, + )), + // With focus. + ("focus", "#source-sidebar .dir-entry summary"), + ("wait-for-css", ( + "#source-sidebar .dir-entry summary:focus", + {"color": |color_hover|, "background-color": |background_hover|}, + )), + ("focus", ".search-input"), + // With hover. + ("move-cursor-to", "#source-sidebar .dir-entry summary"), + ("assert-css", ( + "#source-sidebar .dir-entry summary:hover", + {"color": |color_hover|, "background-color": |background_hover|}, + )), + + // Without hover or focus. ("assert-css", ( "#source-sidebar details[open] > .folders > details > summary", {"color": |color|, "background-color": |background_toggle|}, From e6a4008d24cf91baf681014f301ff01b503f580a Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 24 Nov 2022 23:39:49 +0100 Subject: [PATCH 3/3] Strenghten GUI test to include extra state in selector --- .../sidebar-source-code-display.goml | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/test/rustdoc-gui/sidebar-source-code-display.goml b/src/test/rustdoc-gui/sidebar-source-code-display.goml index 67f57405afc8f..40ae4af81be45 100644 --- a/src/test/rustdoc-gui/sidebar-source-code-display.goml +++ b/src/test/rustdoc-gui/sidebar-source-code-display.goml @@ -48,11 +48,17 @@ define-function: ( ("assert-css", ("#sidebar-toggle > button", {"background-color": |background_toggle|})), // With focus. ("focus", "#sidebar-toggle > button"), - ("assert-css", ("#sidebar-toggle > button", {"background-color": |background_toggle_hover|})), + ("assert-css", ( + "#sidebar-toggle > button:focus", + {"background-color": |background_toggle_hover|}, + )), ("focus", ".search-input"), // With hover. ("move-cursor-to", "#sidebar-toggle > button"), - ("assert-css", ("#sidebar-toggle > button", {"background-color": |background_toggle_hover|})), + ("assert-css", ( + "#sidebar-toggle > button:hover", + {"background-color": |background_toggle_hover|}, + )), // Without hover or focus. ("assert-css", ( @@ -62,14 +68,14 @@ define-function: ( // With focus. ("focus", "#source-sidebar details[open] > .files a:not(.selected)"), ("wait-for-css", ( - "#source-sidebar details[open] > .files a:not(.selected)", + "#source-sidebar details[open] > .files a:not(.selected):focus", {"color": |color_hover|, "background-color": |background_hover|}, )), ("focus", ".search-input"), // With hover. ("move-cursor-to", "#source-sidebar details[open] > .files a:not(.selected)"), ("assert-css", ( - "#source-sidebar details[open] > .files a:not(.selected)", + "#source-sidebar details[open] > .files a:not(.selected):hover", {"color": |color_hover|, "background-color": |background_hover|}, )), @@ -100,14 +106,14 @@ define-function: ( // With focus. ("focus", "#source-sidebar details[open] > .folders > details > summary"), ("wait-for-css", ( - "#source-sidebar details[open] > .folders > details > summary", + "#source-sidebar details[open] > .folders > details > summary:focus", {"color": |color_hover|, "background-color": |background_hover|}, )), ("focus", ".search-input"), // With hover. ("move-cursor-to", "#source-sidebar details[open] > .folders > details > summary"), ("assert-css", ( - "#source-sidebar details[open] > .folders > details > summary", + "#source-sidebar details[open] > .folders > details > summary:hover", {"color": |color_hover|, "background-color": |background_hover|}, )), ],