Rollup merge of #105442 - notriddle:notriddle/docblock-table-css, r=G…

…uillaumeGomez

rustdoc: clean up docblock table CSS

# Preview

http://notriddle.com/notriddle-rustdoc-demos/table-2/test_dingus/fn.test.html

# Before

![image](https://user-images.githubusercontent.com/1593513/206364287-1b80eaaf-2e0e-4138-8b56-4aa8ff39abac.png)

# After

![image](https://user-images.githubusercontent.com/1593513/206364209-d287d165-31be-4de1-9b43-05b35ce2a86b.png)

# Details

* The rule `display: block` had no noticeable effect. Technically, because markdown tables have a tbody and thead, they get wrapped in an [anonymous table box] in the CSS tree, nested within the `<table>` element's block layout box.

  This rule was added in #87230 to make the table side-scrolling, but this same issue was doubly fixed in #88742 by wrapping it in an explicit `<div>` tag. Since accessibility advocates recommend the wrapper div over marking the table as `display: block`, we'll stick with that.

  https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html

* The rule `width: calc(100% - 2px)` had no visible effect, because the anonymous table box was not affected.

* The style is tweaked to basically be the same style GitHub uses. In particular, it adds zebra stripes, and removes dotted borders.

  https://rust-lang.zulipchat.com/#narrow/stream/266220-rustdoc/topic/Markdown.20table.20styling

[anonymous table box]: https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes

src/librustdoc/html/static/css/rustdoc.css

@@ -630,22 +630,16 @@ pre, .rustdoc.source .example-wrap {
 
 .docblock table {
 	margin: .5em 0;
-	width: calc(100% - 2px);
-	overflow-x: auto;
-	display: block;
 	border-collapse: collapse;
 }
 
-.docblock table td {
+.docblock table td, .docblock table th {
 	padding: .5em;
-	border: 1px dashed var(--border-color);
-	vertical-align: top;
+	border: 1px solid var(--border-color);
 }
 
-.docblock table th {
-	padding: .5em;
-	text-align: left;
-	border: 1px solid var(--border-color);
+.docblock table tbody tr:nth-child(2n) {
+	background: var(--table-alt-row-background-color);
 }
 
 /* Shift "where ..." part of method or fn definition down a line */

src/librustdoc/html/static/css/themes/ayu.css

@@ -87,6 +87,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--crate-search-hover-border: #e0e0e0;
 	--source-sidebar-background-selected: #14191f;
 	--source-sidebar-background-hover: #14191f;
+	--table-alt-row-background-color: #191f26;
 }
 
 h1, h2, h3, h4 {

src/librustdoc/html/static/css/themes/dark.css

@@ -82,6 +82,7 @@
 	--crate-search-hover-border: #2196f3;
 	--source-sidebar-background-selected: #333;
 	--source-sidebar-background-hover: #444;
+	--table-alt-row-background-color: #2A2A2A;
 }
 
 .content .item-info::before { color: #ccc; }

src/librustdoc/html/static/css/themes/light.css

@@ -79,6 +79,7 @@
 	--crate-search-hover-border: #717171;
 	--source-sidebar-background-selected: #fff;
 	--source-sidebar-background-hover: #e0e0e0;
+	--table-alt-row-background-color: #F5F5F5;
 }
 
 .content .item-info::before { color: #ccc; }

src/test/rustdoc-gui/docblock-table.goml

@@ -2,3 +2,50 @@ goto: "file://" + |DOC_PATH| + "/test_docs/doc_block_table/struct.DocBlockTable.
 
 compare-elements-css: (".impl-items .docblock table th", ".top-doc .docblock table th", ["border"])
 compare-elements-css: (".impl-items .docblock table td", ".top-doc .docblock table td", ["border"])
+
+define-function: (
+    "check-colors",
+    (theme, border_color, zebra_stripe_color),
+    [
+        ("local-storage", {"rustdoc-use-system-theme": "false", "rustdoc-theme": |theme|}),
+        ("reload"),
+        ("assert-css", (".top-doc .docblock table tbody tr:nth-child(1)", {
+            "background-color": "rgba(0, 0, 0, 0)",
+        })),
+        ("assert-css", (".top-doc .docblock table tbody tr:nth-child(2)", {
+            "background-color": |zebra_stripe_color|,
+        })),
+        ("assert-css", (".top-doc .docblock table tbody tr:nth-child(3)", {
+            "background-color": "rgba(0, 0, 0, 0)",
+        })),
+        ("assert-css", (".top-doc .docblock table tbody tr:nth-child(4)", {
+            "background-color": |zebra_stripe_color|,
+        })),
+        ("assert-css", (".top-doc .docblock table td", {
+            "border-style": "solid",
+            "border-width": "1px",
+            "border-color": |border_color|,
+        })),
+        ("assert-css", (".top-doc .docblock table th", {
+            "border-style": "solid",
+            "border-width": "1px",
+            "border-color": |border_color|,
+        })),
+    ]
+)
+
+call-function: ("check-colors", {
+    "theme": "dark",
+    "border_color": "rgb(224, 224, 224)",
+    "zebra_stripe_color": "rgb(42, 42, 42)",
+})
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "border_color": "rgb(92, 103, 115)",
+    "zebra_stripe_color": "rgb(25, 31, 38)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "border_color": "rgb(224, 224, 224)",
+    "zebra_stripe_color": "rgb(245, 245, 245)",
+})

src/test/rustdoc-gui/src/test_docs/lib.rs

@@ -343,6 +343,9 @@ pub mod doc_block_table {
     /// | header1                  | header2                  |
     /// |--------------------------|--------------------------|
     /// | Lorem Ipsum, Lorem Ipsum | Lorem Ipsum, Lorem Ipsum |
+    /// | Lorem Ipsum, Lorem Ipsum | Lorem Ipsum, Lorem Ipsum |
+    /// | Lorem Ipsum, Lorem Ipsum | Lorem Ipsum, Lorem Ipsum |
+    /// | Lorem Ipsum, Lorem Ipsum | Lorem Ipsum, Lorem Ipsum |
     pub struct DocBlockTable {}
 
     impl DocBlockTableTrait for DocBlockTable {