diff --git a/src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version b/src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version index 9cf038687f117..bae256fd5b38a 100644 --- a/src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version +++ b/src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version @@ -1 +1 @@ -0.9.6 \ No newline at end of file +0.9.7 \ No newline at end of file diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 5d0756d30fb53..532b98d9bb9f6 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -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 { diff --git a/src/librustdoc/html/static/js/source-script.js b/src/librustdoc/html/static/js/source-script.js index 290c29d3141a2..acb1d8d7b5c8d 100644 --- a/src/librustdoc/html/static/js/source-script.js +++ b/src/librustdoc/html/static/js/source-script.js @@ -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"); diff --git a/src/test/rustdoc-gui/sidebar-source-code-display.goml b/src/test/rustdoc-gui/sidebar-source-code-display.goml index 8f53e8627ee1c..c441f84a82135 100644 --- a/src/test/rustdoc-gui/sidebar-source-code-display.goml +++ b/src/test/rustdoc-gui/sidebar-source-code-display.goml @@ -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"} diff --git a/src/test/rustdoc-gui/sidebar-source-code.goml b/src/test/rustdoc-gui/sidebar-source-code.goml index 724520bc399d0..86df478fa1dd2 100644 --- a/src/test/rustdoc-gui/sidebar-source-code.goml +++ b/src/test/rustdoc-gui/sidebar-source-code.goml @@ -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"})