Rollup merge of #106109 - notriddle:notriddle/source-lines, r=GuillaumeGomez

rustdoc: make line number CSS for doc comment and scraped the same

![image](https://user-images.githubusercontent.com/1593513/209423540-2657bb43-e6d7-4af3-9cb3-c790a8dd8cd9.png)

Discussed in
https://rust-lang.zulipchat.com/#narrow/stream/266220-rustdoc/topic/Line.20number.20styling

Preview: http://notriddle.com/notriddle-rustdoc-demos/source-lines/test_dingus/fn.test.html

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;

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;
 }
 

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;

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;

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 `<pre>` elements lists both of them.
 assert-text: ("pre.example-line-numbers", "1\n2")
 

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" `<pre>`.
-click: (103, 103)
+click: (87, 103)
 assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
 
 // Checking the source code sidebar.