Rollup merge of #104849 - GuillaumeGomez:source-code-sidebar-css-migration, r=notriddle

Migrate source code elements style to CSS variables

r? ``@notriddle``

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 9b07fc90f6f0526f5fa928dd2f219d0c2e2721b3..c1f7a8338342d550fd9d7eb9e1f255d8a737099a 100644 (file)
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1343,6 +1343,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 eb66377670c6bc1b8c2b3f7134a8a3e9383b0ad6..de7db7d438c9f4baf2ee19965d6202b62c65f640 100644 (file)
--- 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 44598a6b77866b142f68498840c095064ee96eb2..d8929f32338643a1276b6bbf6994ca125a133afe 100644 (file)
--- 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 f0db14fd59f53aa82e19862ba991b2811259edf3..ff6c68635338c6c324994fc9111421e01f2dc8bf 100644 (file)
--- 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;

diff --git a/src/test/rustdoc-gui/sidebar-source-code-display.goml b/src/test/rustdoc-gui/sidebar-source-code-display.goml
index abf8af77715c9eec5da0306c825e479abcf5db59..40ae4af81be45329419f13e007cdf1559d39f178 100644 (file)
--- a/src/test/rustdoc-gui/sidebar-source-code-display.goml
+++ b/src/test/rustdoc-gui/sidebar-source-code-display.goml
@@ -43,16 +43,24 @@ 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.
         ("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|})),
-        // Without hover.
+        ("assert-css", (
+            "#sidebar-toggle > button:hover",
+            {"background-color": |background_toggle_hover|},
+        )),
+
+        // Without hover or focus.
         ("assert-css", (
             "#source-sidebar details[open] > .files a:not(.selected)",
             {"color": |color|, "background-color": |background_toggle|},
@@ -60,17 +68,37 @@ 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|},
         )),
-        // 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|},
@@ -78,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|},
         )),
     ],