From f4517171572fdc2d6d2880fc20bb2b689faae3c3 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Fri, 23 Dec 2022 22:55:04 -0700 Subject: [PATCH] rustdoc: make line number CSS for doc comment and scraped the same Discussed in https://rust-lang.zulipchat.com/#narrow/stream/266220-rustdoc/topic/Line.20number.20styling --- src/librustdoc/html/static/css/rustdoc.css | 30 ++++------- src/librustdoc/html/static/css/themes/ayu.css | 3 +- .../html/static/css/themes/dark.css | 1 - .../html/static/css/themes/light.css | 1 - .../docblock-code-block-line-number.goml | 54 ++++++++++++++----- src/test/rustdoc-gui/source-code-page.goml | 4 +- 6 files changed, 54 insertions(+), 39 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 2b2b148f05e..53c8a1add78 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -347,6 +347,9 @@ pre { .source .content pre { padding: 20px; } +.rustdoc.source .example-wrap > pre.src-line-numbers { + padding: 20px 0 20px 4px; +} img { max-width: 100%; @@ -519,10 +522,6 @@ ul.block, .block li { display: none; } -.source .content pre.rust { - padding-left: 0; -} - .rustdoc .example-wrap { display: flex; position: relative; @@ -550,23 +549,21 @@ ul.block, .block li { -moz-user-select: none; -ms-user-select: none; user-select: none; + padding: 14px 8px; + color: var(--src-line-numbers-span-color); } -.example-line-numbers { - border: 1px solid; - padding: 13px 8px; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - border-color: var(--example-line-numbers-border-color); +.rustdoc .example-wrap > pre.src-line-numbers { + padding: 14px 0; } - .src-line-numbers a, .src-line-numbers span { color: var(--src-line-numbers-span-color); + padding: 0 8px; } .src-line-numbers :target { background-color: transparent; border-right: none; - padding-right: 0; + padding: 0 8px; } .src-line-numbers .line-highlighted { background-color: var(--src-line-number-highlighted-background-color); @@ -1958,15 +1955,6 @@ in storage.js bottom: 0; } -.scraped-example .code-wrapper .src-line-numbers { - padding: 14px 0; -} - -.scraped-example .code-wrapper .src-line-numbers a, -.scraped-example .code-wrapper .src-line-numbers span { - padding: 0 14px; -} - .scraped-example .code-wrapper .example-wrap { width: 100%; overflow-y: hidden; diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index ce416f77afe..7377e2a1791 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -62,7 +62,6 @@ Original by Dempfi (https://github.com/dempfi/ayu) --code-highlight-question-mark-color: #ff9011; --code-highlight-comment-color: #788797; --code-highlight-doc-comment-color: #a1ac88; - --example-line-numbers-border-color: none; --src-line-numbers-span-color: #5c6773; --src-line-number-highlighted-background-color: rgba(255, 236, 164, 0.06); --test-arrow-color: #788797; @@ -132,7 +131,7 @@ pre, .rustdoc.source .example-wrap { .src-line-numbers .line-highlighted { color: #708090; - padding-right: 4px; + padding-right: 7px; border-right: 1px solid #ffb44c; } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 33d934ff3c3..2091f8dcca9 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -57,7 +57,6 @@ --code-highlight-question-mark-color: #ff9011; --code-highlight-comment-color: #8d8d8b; --code-highlight-doc-comment-color: #8ca375; - --example-line-numbers-border-color: #4a4949; --src-line-numbers-span-color: #3b91e2; --src-line-number-highlighted-background-color: #0a042f; --test-arrow-color: #dedede; diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 30e91077d33..f582796d5dd 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -57,7 +57,6 @@ --code-highlight-question-mark-color: #ff9011; --code-highlight-comment-color: #8e908c; --code-highlight-doc-comment-color: #4d4d4c; - --example-line-numbers-border-color: #c7c7c7; --src-line-numbers-span-color: #c67e2d; --src-line-number-highlighted-background-color: #fdffd3; --test-arrow-color: #f5f5f5; diff --git a/src/test/rustdoc-gui/docblock-code-block-line-number.goml b/src/test/rustdoc-gui/docblock-code-block-line-number.goml index b094c483876..a3ed008719c 100644 --- a/src/test/rustdoc-gui/docblock-code-block-line-number.goml +++ b/src/test/rustdoc-gui/docblock-code-block-line-number.goml @@ -1,23 +1,53 @@ // Checks that the setting "line numbers" is working as expected. goto: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html" +// Otherwise, we can't check text color +show-text: true + // We check that without this setting, there is no line number displayed. assert-false: "pre.example-line-numbers" -// We now set the setting to show the line numbers on code examples. -local-storage: {"rustdoc-line-numbers": "true" } -// We reload to make the line numbers appear. -reload: - -// We wait for them to be added into the DOM by the JS... -wait-for: "pre.example-line-numbers" -// If the test didn't fail, it means that it was found! // Let's now check some CSS properties... -assert-css: ("pre.example-line-numbers", { - "margin": "0px", - "padding": "13px 8px", - "text-align": "right", +define-function: ( + "check-colors", + (theme, color), + [ + // We now set the setting to show the line numbers on code examples. + ("local-storage", { + "rustdoc-theme": |theme|, + "rustdoc-use-system-theme": "false", + "rustdoc-line-numbers": "true" + }), + // We reload to make the line numbers appear and change theme. + ("reload"), + // We wait for them to be added into the DOM by the JS... + ("wait-for", "pre.example-line-numbers"), + // If the test didn't fail, it means that it was found! + ("assert-css", ( + "pre.example-line-numbers", + { + "color": |color|, + "margin": "0px", + "padding": "14px 8px", + "text-align": "right", + }, + ALL, + )), + ], +) +call-function: ("check-colors", { + "theme": "ayu", + "color": "rgb(92, 103, 115)", }) +call-function: ("check-colors", { + "theme": "dark", + "color": "rgb(59, 145, 226)", +}) +call-function: ("check-colors", { + "theme": "light", + "color": "rgb(198, 126, 45)", +}) + // The first code block has two lines so let's check its `
` elements lists both of them.
 assert-text: ("pre.example-line-numbers", "1\n2")
 
diff --git a/src/test/rustdoc-gui/source-code-page.goml b/src/test/rustdoc-gui/source-code-page.goml
index 25da74e5173..8a33e713191 100644
--- a/src/test/rustdoc-gui/source-code-page.goml
+++ b/src/test/rustdoc-gui/source-code-page.goml
@@ -89,9 +89,9 @@ assert-css: (".src-line-numbers", {"text-align": "right"})
 // do anything (and certainly not add a `#NaN` to the URL!).
 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
 // We use this assert-position to know where we will click.
-assert-position: ("//*[@id='1']", {"x": 104, "y": 112})
+assert-position: ("//*[@id='1']", {"x": 88, "y": 112})
 // We click on the left of the "1" anchor but still in the "src-line-number" `
`.
-click: (103, 103)
+click: (87, 103)
 assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
 
 // Checking the source code sidebar.