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 cad0fce205 added the `min-width` rule, but 6a5f8b1aef 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)
This commit is contained in:
Matthias Krüger 2022-09-24 07:38:55 +02:00 committed by GitHub
commit 9a4fe30fff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 28 additions and 13 deletions

View File

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

View File

@ -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)

View File

@ -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"})

View File

@ -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: (

View File

@ -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

View File

@ -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},
)

View File

@ -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.

View File

@ -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"})

View File

@ -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"})