Rollup merge of #102146 - notriddle:notriddle/sidebar-jank, r=GuillaumeGomez

rustdoc: CSS prevent sidebar width change jank

This commit makes the `width` and `min-width` of the sidebar the same. They originally were when cad0fce added the `min-width` rule, but 6a5f8b1 changed the `width` without changing the `min-width`, causing it to sometimes oscilate between 200 and 250 pixels depending on the main content.

# Before

[Screencast from 09-22-2022 10:25:29 AM.webm](https://user-images.githubusercontent.com/1593513/191813469-ea00f30f-6f49-40fc-9a26-e1dfd5068d2b.webm)

# After

[Screencast from 09-22-2022 10:32:20 AM.webm](https://user-images.githubusercontent.com/1593513/191813642-ae0902da-5262-403a-bbdf-995334201acb.webm)

Author: matthiaskrgr

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

@@ -411,7 +411,7 @@ img {
 
 .sidebar {
 	font-size: 0.875rem;
-	width: 250px;
+	width: 200px;
 	min-width: 200px;
 	overflow-y: scroll;
 	position: sticky;

src/test/rustdoc-gui/code-blocks-overflow.goml

@@ -5,4 +5,4 @@ size: (1080, 600)
 assert-count: (".docblock > .example-wrap", 2)
 assert: ".docblock > .example-wrap > .language-txt"
 assert: ".docblock > .example-wrap > .rust-example-rendered"
-assert-css: (".docblock > .example-wrap > pre", {"width": "785.25px", "overflow-x": "auto"}, ALL)
+assert-css: (".docblock > .example-wrap > pre", {"width": "796px", "overflow-x": "auto"}, ALL)

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

@@ -4,7 +4,7 @@ goto: file://|DOC_PATH|/lib2/long_table/struct.Foo.html
 size: (1100, 800)
 // Logically, the ".docblock" and the "<p>" should have the same scroll width.
 compare-elements-property: (".top-doc .docblock", ".top-doc .docblock > p", ["scrollWidth"])
-assert-property: (".top-doc .docblock", {"scrollWidth": "801"})
+assert-property: (".top-doc .docblock", {"scrollWidth": "816"})
 // However, since there is overflow in the <table>, its scroll width is bigger.
 assert-property: (".top-doc .docblock table", {"scrollWidth": "1572"})
 
@@ -16,6 +16,6 @@ compare-elements-property: (
     "#implementations-list > details .docblock > p",
     ["scrollWidth"],
 )
-assert-property: ("#implementations-list > details .docblock", {"scrollWidth": "801"})
+assert-property: ("#implementations-list > details .docblock", {"scrollWidth": "816"})
 // However, since there is overflow in the <table>, its scroll width is bigger.
 assert-property: ("#implementations-list > details .docblock table", {"scrollWidth": "1572"})

src/test/rustdoc-gui/item-info-overflow.goml

@@ -4,7 +4,7 @@ goto: file://|DOC_PATH|/lib2/struct.LongItemInfo.html
 size: (1200, 870)
 // Logically, the "item-decl" and the "item-info" should have the same scroll width.
 compare-elements-property: (".item-decl", ".item-info", ["scrollWidth"])
-assert-property: (".item-info", {"scrollWidth": "890"})
+assert-property: (".item-info", {"scrollWidth": "940"})
 // Just to be sure we're comparing the correct "item-info":
 assert-text: (
     ".item-info",
@@ -21,7 +21,7 @@ compare-elements-property: (
 )
 assert-property: (
     "#impl-SimpleTrait-for-LongItemInfo2 .item-info",
-    {"scrollWidth": "866"},
+    {"scrollWidth": "916"},
 )
 // Just to be sure we're comparing the correct "item-info":
 assert-text: (

src/test/rustdoc-gui/item-info.goml

@@ -4,9 +4,9 @@ goto: file://|DOC_PATH|/lib2/struct.Foo.html
 // We set a fixed size so there is no chance of "random" resize.
 size: (1100, 800)
 // We check that ".item-info" is bigger than its content.
-assert-css: (".item-info", {"width": "790px"})
+assert-css: (".item-info", {"width": "840px"})
 assert-css: (".item-info .stab", {"width": "289px"})
-assert-position: (".item-info .stab", {"x": 295})
+assert-position: (".item-info .stab", {"x": 245})
 
 // Now we ensure that they're not rendered on the same line.
 goto: file://|DOC_PATH|/lib2/trait.Trait.html

src/test/rustdoc-gui/notable-trait.goml

@@ -18,11 +18,11 @@ compare-elements-position-false: (
 // The `i` should be *after* the type.
 assert-position: (
     "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
-    {"x": 692},
+    {"x": 677},
 )
 assert-position: (
     "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
-    {"x": 966},
+    {"x": 951},
 )
 
 

src/test/rustdoc-gui/search-result-display.goml

@@ -7,7 +7,7 @@ press-key: 'Enter'
 wait-for: "#crate-search"
 // The width is returned by "getComputedStyle" which returns the exact number instead of the
 // CSS rule which is "50%"...
-assert-css: (".search-results div.desc", {"width": "293px"})
+assert-css: (".search-results div.desc", {"width": "318px"})
 size: (600, 100)
 // As counter-intuitive as it may seem, in this width, the width is "100%", which is why
 // when computed it's larger.

src/test/rustdoc-gui/sidebar.goml

@@ -1,5 +1,6 @@
 // Checks multiple things on the sidebar display (width of its elements, colors, etc).
 goto: file://|DOC_PATH|/test_docs/index.html
+assert-property: (".sidebar", {"clientWidth": "200"})
 show-text: true
 local-storage: {"rustdoc-theme": "light"}
 // We reload the page so the local storage settings are being used.
@@ -39,11 +40,13 @@ assert-property: ("html", {"scrollTop": "0"})
 
 // We now go back to the crate page to click on the "lib2" crate link.
 goto: file://|DOC_PATH|/test_docs/index.html
+assert-property: (".sidebar", {"clientWidth": "200"})
 assert-css: (".sidebar-elems .crate > ul > li:first-child > a", {"color": "rgb(53, 109, 164)"})
 click: ".sidebar-elems .crate > ul > li:first-child > a"
 
 // PAGE: lib2/index.html
 goto: file://|DOC_PATH|/lib2/index.html
+assert-property: (".sidebar", {"clientWidth": "200"})
 assert-text: (".sidebar > .location", "Crate lib2")
 // We check that we have the crates list and that the "current" on is now "lib2".
 assert-text: (".sidebar-elems .crate > ul > li > a.current", "lib2")
@@ -65,11 +68,13 @@ assert-text: (".sidebar .sidebar-elems .location", "In lib2")
 assert-false: ".sidebar-elems > .crate"
 
 goto: ./module/index.html
+assert-property: (".sidebar", {"clientWidth": "200"})
 assert-text: (".sidebar > .location", "Module module")
 // We check that we don't have the crate list.
 assert-false: ".sidebar-elems > .crate"
 
 goto: ./sub_module/sub_sub_module/index.html
+assert-property: (".sidebar", {"clientWidth": "200"})
 assert-text: (".sidebar > .location", "Module sub_sub_module")
 // We check that we don't have the crate list.
 assert-false: ".sidebar-elems .crate"
@@ -78,11 +83,21 @@ assert-text: ("#functions + .item-table .item-left > a", "foo")
 
 // Links to trait implementations in the sidebar should not wrap even if they are long.
 goto: file://|DOC_PATH|/lib2/struct.HasALongTraitWithParams.html
+assert-property: (".sidebar", {"clientWidth": "200"})
 assert-property: (".sidebar-elems section .block li > a", {"offsetHeight": 29})
 
 // Test that clicking on of the "In <module>" headings in the sidebar links to the
 // appropriate anchor in index.html.
 goto: file://|DOC_PATH|/test_docs/struct.Foo.html
+assert-property: (".sidebar", {"clientWidth": "200"})
 click: ".block.mod h3 a"
 // PAGE: index.html
 assert-css: ("#modules", {"background-color": "rgb(253, 255, 211)"})
+
+// Finally, assert that the `[+]/[−]` toggle doesn't affect sidebar width.
+click: "#toggle-all-docs"
+assert-text: ("#toggle-all-docs", "[+]")
+assert-property: (".sidebar", {"clientWidth": "200"})
+click: "#toggle-all-docs"
+assert-text: ("#toggle-all-docs", "[−]")
+assert-property: (".sidebar", {"clientWidth": "200"})

src/test/rustdoc-gui/type-declation-overflow.goml

@@ -15,7 +15,7 @@ assert-property: (".item-table .struct", {"offsetWidth": "684"})
 goto: file://|DOC_PATH|/lib2/too_long/type.ReallyLongTypeNameLongLongLong.html
 assert-property: ("body", {"scrollWidth": "1100"})
 // We now check that the section width hasn't grown because of it.
-assert-property: ("#main-content", {"scrollWidth": "825"})
+assert-property: ("#main-content", {"scrollWidth": "840"})
 // And now checking that it has scrollable content.
 assert-property: (".item-decl pre", {"scrollWidth": "1103"})
 
@@ -24,7 +24,7 @@ assert-property: (".item-decl pre", {"scrollWidth": "1103"})
 goto: file://|DOC_PATH|/lib2/too_long/constant.ReallyLongTypeNameLongLongLongConstBecauseWhyNotAConstRightGigaGigaSupraLong.html
 assert-property: ("body", {"scrollWidth": "1100"})
 // We now check that the section width hasn't grown because of it.
-assert-property: ("#main-content", {"scrollWidth": "825"})
+assert-property: ("#main-content", {"scrollWidth": "840"})
 // And now checking that it has scrollable content.
 assert-property: (".item-decl pre", {"scrollWidth": "950"})