Rollup merge of #103164 - notriddle:notriddle/media-min-width, r=Guil…

…laumeGomez

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.

    <details><summary>Screenshot</summary>

    ![image](https://user-images.githubusercontent.com/1593513/196283804-e946fbe3-d914-4819-ba2d-b4a6a07f190a.png)

    </details>

  * The rule for the first example-wrap child should probably apply on mobile.

    <details><summary>Screenshots</summary>

    ## Before

    ![rustdoc-before](https://user-images.githubusercontent.com/1593513/196282813-88b861c7-7b05-4de5-a421-914396f86a04.png)

    ## After

    ![rustdoc-after](https://user-images.githubusercontent.com/1593513/196282842-e57760c2-72d5-4dad-94f5-1d7175043326.png)

    </details>

  * 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

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

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.

src/librustdoc/html/static/js/storage.js

@@ -10,9 +10,9 @@ 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;
+window.RUSTDOC_MOBILE_BREAKPOINT = 700;
 
 const settingsDataset = (function() {
  const settingsElement = document.getElementById("default-settings");

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