Rollup merge of #98671 - GuillaumeGomez:source-sidebar-fixes, r=notriddle
Fix source sidebar bugs This PR fixes the following two bugs:   I added regression tests to prevent them to happen again. I think we should backport it to beta as well. You can test it [here](https://rustdoc.crud.net/imperio/source-sidebar-fixes/src/std/lib.rs.html). cc ```@jsha``` r? ```@notriddle```
This commit is contained in:
commit
b1403d6b78
5 changed files with 60 additions and 4 deletions
|
@ -1 +1 @@
|
|||
0.9.6
|
||||
0.9.7
|
|
@ -1772,9 +1772,11 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
/* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
|
||||
so don't bump down the main content or the sidebar. */
|
||||
.source main,
|
||||
.source .sidebar {
|
||||
.rustdoc.source .sidebar {
|
||||
top: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sidebar.shown,
|
||||
|
@ -1924,6 +1926,9 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
width: unset;
|
||||
border-top-right-radius: unset;
|
||||
border-bottom-right-radius: unset;
|
||||
position: sticky;
|
||||
border: 0;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
#source-sidebar {
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
(function() {
|
||||
|
||||
const rootPath = document.getElementById("rustdoc-vars").attributes["data-root-path"].value;
|
||||
let oldScrollPosition = 0;
|
||||
|
||||
function createDirEntry(elem, parent, fullPath, hasFoundFile) {
|
||||
const name = document.createElement("div");
|
||||
|
@ -65,10 +66,24 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) {
|
|||
function toggleSidebar() {
|
||||
const child = this.children[0];
|
||||
if (child.innerText === ">") {
|
||||
if (window.innerWidth < 701) {
|
||||
// This is to keep the scroll position on mobile.
|
||||
oldScrollPosition = window.scrollY;
|
||||
document.body.style.position = "fixed";
|
||||
document.body.style.top = `-${oldScrollPosition}px`;
|
||||
}
|
||||
addClass(document.documentElement, "source-sidebar-expanded");
|
||||
child.innerText = "<";
|
||||
updateLocalStorage("source-sidebar-show", "true");
|
||||
} else {
|
||||
if (window.innerWidth < 701) {
|
||||
// This is to keep the scroll position on mobile.
|
||||
document.body.style.position = "";
|
||||
document.body.style.top = "";
|
||||
// The scroll position is lost when resetting the style, hence why we store it in
|
||||
// `oldScroll`.
|
||||
window.scrollTo(0, oldScrollPosition);
|
||||
}
|
||||
removeClass(document.documentElement, "source-sidebar-expanded");
|
||||
child.innerText = ">";
|
||||
updateLocalStorage("source-sidebar-show", "false");
|
||||
|
|
|
@ -116,3 +116,39 @@ assert-css: (
|
|||
"#source-sidebar .expand + .children .folders .name",
|
||||
{"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
|
||||
)
|
||||
|
||||
// Now checking on mobile devices.
|
||||
size: (500, 700)
|
||||
reload:
|
||||
// Waiting for the sidebar to be displayed...
|
||||
wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
|
||||
|
||||
// We now check it takes the full size of the display.
|
||||
assert-property: ("body", {"clientWidth": "500", "clientHeight": "700"})
|
||||
assert-property: (".sidebar", {"clientWidth": "500", "clientHeight": "700"})
|
||||
|
||||
// We now check the display of the toggle once the sidebar is expanded.
|
||||
assert-property: ("#sidebar-toggle", {"clientWidth": "500", "clientHeight": "39"})
|
||||
assert-css: (
|
||||
"#sidebar-toggle",
|
||||
{
|
||||
"border-top-width": "0px",
|
||||
"border-right-width": "0px",
|
||||
"border-left-width": "0px",
|
||||
"border-bottom-width": "1px",
|
||||
},
|
||||
)
|
||||
|
||||
// We now check that the scroll position is kept when opening the sidebar.
|
||||
click: "#sidebar-toggle"
|
||||
wait-for-css: (".sidebar", {"width": "0px"})
|
||||
// We scroll to line 117 to change the scroll position.
|
||||
scroll-to: '//*[@id="117"]'
|
||||
assert-window-property: {"pageYOffset": "2519"}
|
||||
// Expanding the sidebar...
|
||||
click: "#sidebar-toggle"
|
||||
wait-for-css: (".sidebar", {"width": "500px"})
|
||||
click: "#sidebar-toggle"
|
||||
wait-for-css: (".sidebar", {"width": "0px"})
|
||||
// The "scrollTop" property should be the same.
|
||||
assert-window-property: {"pageYOffset": "2519"}
|
||||
|
|
|
@ -18,8 +18,8 @@ assert: "nav.sidebar"
|
|||
|
||||
// We now switch to mobile mode.
|
||||
size: (600, 600)
|
||||
// We check that the sidebar has the expected width (0 and 1px for the border).
|
||||
assert-css: ("nav.sidebar", {"width": "1px"})
|
||||
// We check that the sidebar has the expected width (0).
|
||||
assert-css: ("nav.sidebar", {"width": "0px"})
|
||||
// We expand the sidebar.
|
||||
click: "#sidebar-toggle"
|
||||
assert-css: (".source-sidebar-expanded nav.sidebar", {"width": "600px"})
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue