From bbac29c0950c780af5a9aea707d4ff30c046be45 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Mon, 17 Oct 2022 13:54:42 -0700 Subject: [PATCH 1/2] rustdoc: remove CSS `@media (min-width: 701px)` The two rules within it can and should be done without the separate media query: * There ain't no rule saying a viewport can't be `700.5px` wide, since hardware pixels can be finer than CSS pixels. * The rule for the first example-wrap child should probably apply on mobile. * The rule for the source sidebar is overriden by the mobile rule setting `max-width: 100vw`, so it can be merged with the rest of the styles. --- src/librustdoc/html/static/css/rustdoc.css | 30 ++++++++-------------- src/librustdoc/html/static/js/storage.js | 2 +- 2 files changed, 11 insertions(+), 21 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 5788363036acd..7b6f52b0acf69 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -437,6 +437,7 @@ img { .source-sidebar-expanded .source .sidebar { overflow-y: auto; + width: 300px; } .source-sidebar-expanded .source .sidebar > *:not(#sidebar-toggle) { @@ -1692,31 +1693,20 @@ details.rustdoc-toggle[open] > summary.hideme::after { display: inline-block; } -/* Media Queries */ - -/* -WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY; -If you update this line, then you also need to update the line with the same warning -in storage.js plus the media query with (max-width: 700px) -*/ -@media (min-width: 701px) { - /* In case there is no documentation before a code block, we need to add some margin at the top - to prevent an overlay between the "collapse toggle" and the information tooltip. - However, it's not needed with smaller screen width because the doc/code block is always put - "one line" below. */ - .docblock > .example-wrap:first-child .tooltip { - margin-top: 16px; - } - - .source-sidebar-expanded .source .sidebar { - width: 300px; - } +/* In case there is no documentation before a code block, we need to add some margin at the top +to prevent an overlay between the "collapse toggle" and the information tooltip. +However, it's not needed with smaller screen width because the doc/code block is always put +"one line" below. */ +.docblock > .example-wrap:first-child .tooltip { + margin-top: 16px; } +/* Media Queries */ + /* WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY If you update this line, then you also need to update the line with the same warning -in storage.js plus the media query with (min-width: 701px) +in storage.js */ @media (max-width: 700px) { /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar, diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js index 0c5389d45e5b7..5fbad357f3781 100644 --- a/src/librustdoc/html/static/js/storage.js +++ b/src/librustdoc/html/static/js/storage.js @@ -10,7 +10,7 @@ window.currentTheme = document.getElementById("themeStyle"); window.mainTheme = document.getElementById("mainThemeStyle"); // WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY -// If you update this line, then you also need to update the two media queries with the same +// If you update this line, then you also need to update the media query with the same // warning in rustdoc.css window.RUSTDOC_MOBILE_BREAKPOINT = 701; From d4e4b08b9b53f3dda7be3cc3bf8881db4180f736 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Mon, 17 Oct 2022 14:20:04 -0700 Subject: [PATCH 2/2] rustdoc: change mobile breakpoint to match CSS Since it's possible to have a 700.5px viewport width, the JS needs to not switch to mobile mode in such a setup. --- src/librustdoc/html/static/js/main.js | 4 ++-- src/librustdoc/html/static/js/storage.js | 2 +- src/test/rustdoc-gui/sidebar-mobile-scroll.goml | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 3bcadcda534dc..1251d6bfda352 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -737,7 +737,7 @@ function loadCss(cssFileName) { window.rustdocMobileScrollLock = function() { const mobile_topbar = document.querySelector(".mobile-topbar"); - if (window.innerWidth < window.RUSTDOC_MOBILE_BREAKPOINT) { + if (window.innerWidth <= window.RUSTDOC_MOBILE_BREAKPOINT) { // This is to keep the scroll position on mobile. oldSidebarScrollPosition = window.scrollY; document.body.style.width = `${document.body.offsetWidth}px`; @@ -783,7 +783,7 @@ function loadCss(cssFileName) { } window.addEventListener("resize", () => { - if (window.innerWidth >= window.RUSTDOC_MOBILE_BREAKPOINT && + if (window.innerWidth > window.RUSTDOC_MOBILE_BREAKPOINT && oldSidebarScrollPosition !== null) { // If the user opens the sidebar in "mobile" mode, and then grows the browser window, // we need to switch away from mobile mode and make the main content area scrollable. diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js index 5fbad357f3781..b462a2c50f145 100644 --- a/src/librustdoc/html/static/js/storage.js +++ b/src/librustdoc/html/static/js/storage.js @@ -12,7 +12,7 @@ window.mainTheme = document.getElementById("mainThemeStyle"); // WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY // If you update this line, then you also need to update the media query with the same // warning in rustdoc.css -window.RUSTDOC_MOBILE_BREAKPOINT = 701; +window.RUSTDOC_MOBILE_BREAKPOINT = 700; const settingsDataset = (function() { const settingsElement = document.getElementById("default-settings"); diff --git a/src/test/rustdoc-gui/sidebar-mobile-scroll.goml b/src/test/rustdoc-gui/sidebar-mobile-scroll.goml index f1cba172ee358..2449269b192aa 100644 --- a/src/test/rustdoc-gui/sidebar-mobile-scroll.goml +++ b/src/test/rustdoc-gui/sidebar-mobile-scroll.goml @@ -1,12 +1,12 @@ // This test ensures that the mobile sidebar preserves scroll position. goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html" // Switching to "mobile view" by reducing the width to 600px. -size: (600, 600) +size: (700, 600) assert-css: (".sidebar", {"display": "block", "left": "-1000px"}) // Scroll down. scroll-to: "//h2[@id='blanket-implementations']" -assert-window-property: {"pageYOffset": "651"} +assert-window-property: {"pageYOffset": "627"} // Open the sidebar menu. click: ".sidebar-menu-toggle" @@ -21,11 +21,11 @@ assert-window-property: {"pageYOffset": "0"} // Close the sidebar menu. Make sure the scroll position gets restored. click: ".sidebar-menu-toggle" wait-for-css: (".sidebar", {"left": "-1000px"}) -assert-window-property: {"pageYOffset": "651"} +assert-window-property: {"pageYOffset": "627"} // Now test that scrollability returns when the browser window is just resized. click: ".sidebar-menu-toggle" wait-for-css: (".sidebar", {"left": "0px"}) assert-window-property: {"pageYOffset": "0"} size: (900, 600) -assert-window-property: {"pageYOffset": "651"} +assert-window-property: {"pageYOffset": "627"}