rustdoc: reduce clutter on mobile search page

Author: notriddle

src/librustdoc/html/static/css/rustdoc.css

@@ -244,9 +244,6 @@ h1, h2, h3, h4 {
 	   more aggressively when we want them to. */
 	overflow-wrap: anywhere;
 }
-.search-results-main-heading nav.sub {
-	grid-area: main-heading-h1;
-}
 .main-heading {
 	position: relative;
 	display: grid;
@@ -259,6 +256,17 @@ h1, h2, h3, h4 {
 	padding-bottom: 6px;
 	margin-bottom: 15px;
 }
+.search-results-main-heading {
+	grid-template-areas:
+		"main-heading-breadcrumbs main-heading-placeholder"
+		"main-heading-breadcrumbs main-heading-toolbar    "
+		"main-heading-h1          main-heading-toolbar    ";
+}
+.search-results-main-heading nav.sub {
+	grid-area: main-heading-h1;
+	align-items: end;
+	margin: 4px 0 8px 0;
+}
 .rustdoc-breadcrumbs {
 	grid-area: main-heading-breadcrumbs;
 	line-height: 1.25;
@@ -268,12 +276,13 @@ h1, h2, h3, h4 {
 }
 .search-switcher {
 	grid-area: main-heading-breadcrumbs;
-	line-height: 1.25;
+	line-height: 1.5;
 	display: flex;
 	color: var(--main-color);
 	align-items: baseline;
 	white-space: nowrap;
-	margin-top: -1px;
+	padding-top: 8px;
+	min-height: 34px;
 }
 .rustdoc-breadcrumbs a {
 	padding: 5px 0 7px;
@@ -1264,6 +1273,8 @@ table,
 	position: relative;
 	/* allows this div (and with it the <select>-element "#crate-search") to be shrunk */
 	min-width: 0;
+	/* keep label text for switcher from moving down when this appears */
+	margin-top: -1px;
 }
 #crate-search {
 	padding: 0 23px 0 4px;
@@ -2051,7 +2062,10 @@ button#toggle-all-docs {
 	justify-content: center;
 	flex-direction: column;
 }
-#settings-menu > a, #help-button > a, button#toggle-all-docs {
+#search-button > a,
+.settings-menu > a,
+.help-menu > a,
+button#toggle-all-docs {
 	border: 1px solid transparent;
 	border-radius: var(--button-border-radius);
 	color: var(--main-color);
@@ -2483,12 +2497,28 @@ However, it's not needed with smaller screen width because the doc/code block is
 	        "main-heading-h1 main-heading-toolbar"
 	        "main-heading-sub-heading main-heading-toolbar";
 	}
+	.search-results-main-heading {
+	    display: grid;
+	    grid-template-areas:
+		"main-heading-breadcrumbs main-heading-toolbar"
+		"main-heading-breadcrumbs main-heading-toolbar"
+		"main-heading-h1 main-heading-toolbar";
+	}
 	rustdoc-toolbar {
 	    display: grid;
 	    grid-template-areas:
 	        "x settings help"
 	        "search summary summary";
 	}
+	.search-results-main-heading rustdoc-toolbar {
+	    display: grid;
+	    grid-template-areas:
+	        "settings help"
+	        "search search";
+	}
+	.search-results-main-heading #toggle-all-docs {
+	    display: none;
+	}
 	rustdoc-toolbar .settings-menu span.label,
 	rustdoc-toolbar .help-menu span.label
 	{
@@ -2565,6 +2595,13 @@ in src-script.js and main.js
 	        "main-heading-h1 main-heading-toolbar"
 	        "main-heading-sub-heading main-heading-toolbar";
 	}
+	.search-results-main-heading {
+	    display: grid;
+	    grid-template-areas:
+		"main-heading-breadcrumbs main-heading-placeholder"
+		"main-heading-breadcrumbs main-heading-toolbar"
+		"main-heading-h1 main-heading-toolbar";
+	}
 	rustdoc-topbar span.label,
 	rustdoc-toolbar .settings-menu,
 	rustdoc-toolbar .help-menu

src/librustdoc/html/static/js/main.js

@@ -1,6 +1,6 @@
 // Local js definitions:
 /* global addClass, getSettingValue, hasClass, updateLocalStorage */
-/* global onEachLazy, removeClass, getVar */
+/* global onEachLazy, removeClass, getVar, nonnull */
 
 "use strict";
 
@@ -65,7 +65,7 @@ window.currentCrate = getVar("current-crate");
  * keypress on hitting the Escape key.
  *
  * So I guess you could say things are getting pretty interoperable.
- * 
+ *
  * @param {KeyboardEvent} ev
  * @returns {string}
  */
@@ -497,7 +497,8 @@ function preLoadCss(cssUrl) {
         },
         setLoadingSearch: () => {
             const search = window.searchState.outputElement();
-            nonnull(search).innerHTML = "<h3 class=\"search-loading\">" + window.searchState.loadingText + "</h3>";
+            nonnull(search).innerHTML = "<h3 class=\"search-loading\">" +
+                window.searchState.loadingText + "</h3>";
             window.searchState.showResults();
         },
         descShards: new Map(),
@@ -1755,7 +1756,7 @@ function preLoadCss(cssUrl) {
                     } else {
                         showHelp();
                     }
-                }
+                },
             );
         });
     }

src/librustdoc/html/static/js/search.js

@@ -1,5 +1,5 @@
 // ignore-tidy-filelength
-/* global addClass, getNakedUrl, getSettingValue, getVar */
+/* global addClass, getNakedUrl, getSettingValue, getVar, nonnull */
 /* global onEachLazy, removeClass, searchState, browserSupportsHistoryApi, exports */
 
 "use strict";
@@ -4940,7 +4940,8 @@ ${item.displayPath}<span class="${type}">${name}</span>\
             output.innerHTML = "Example searches:<ul>" +
                 "<li><a href=\"" + getNakedUrl() + "?search=std::vec\">std::vec</a></li>" +
                 "<li><a href=\"" + getNakedUrl() + "?search=u32+->+bool\">u32 -> bool</a></li>" +
-                "<li><a href=\"" + getNakedUrl() + "?search=Option<T>,+(T+->+U)+->+Option<U>\">Option&lt;T>, (T -> U) -> Option&lt;U></a></li>" +
+                "<li><a href=\"" + getNakedUrl() + "?search=Option<T>,+(T+->+U)+->+Option<U>\">" +
+                    + "Option&lt;T>, (T -> U) -> Option&lt;U></a></li>" +
                 "</ul>";
         } else {
             output.innerHTML = "No results :(<br/>" +
@@ -5112,10 +5113,11 @@ async function showResults(results, go_to_first, filterCrates) {
     resultsElem.appendChild(ret_returned);
 
     search.innerHTML = output;
-    // @ts-expect-error
-    if (searchState.rustdocToolbar) {
-        // @ts-expect-error
-        search.querySelector(".main-heading").appendChild(searchState.rustdocToolbar);
+    if (window.searchState.rustdocToolbar) {
+        nonnull(
+            nonnull(window.searchState.containerElement())
+                .querySelector(".main-heading"),
+        ).appendChild(window.searchState.rustdocToolbar);
     }
     const crateSearch = document.getElementById("crate-search");
     if (crateSearch) {
@@ -5339,7 +5341,7 @@ function updateCrate(ev) {
 }
 
 /**
- * @param {Map<string, import("./rustdoc").RawSearchIndexCrate>} searchIndx 
+ * @param {Map<string, import("./rustdoc").RawSearchIndexCrate>} searchIndx
  */
 async function initSearch(searchIndx) {
     if (ROOT_PATH === null) {

src/librustdoc/html/static/js/settings.js

@@ -1,25 +1,13 @@
 // Local js definitions:
 /* global getSettingValue, updateLocalStorage, updateTheme */
 /* global addClass, removeClass, onEach, onEachLazy */
-/* global MAIN_ID, getVar */
+/* global MAIN_ID, getVar, nonnull */
 
 "use strict";
 
 (function() {
     const isSettingsPage = window.location.pathname.endsWith("/settings.html");
 
-    /**
-     * @param {Element} elem
-     * @param {EventTarget|null} target
-     */
-    function elemContainsTarget(elem, target) {
-        if (target instanceof Node) {
-            return elem.contains(target);
-        } else {
-            return false;
-        }
-    }
-
     /**
      * @overload {"theme"|"preferred-dark-theme"|"preferred-light-theme"}
      * @param {string} settingName

tests/rustdoc-gui/source-code-page.goml

@@ -89,15 +89,9 @@ assert-css: ("a[data-nosnippet]", {"text-align": "right"}, ALL)
 // do anything (and certainly not add a `#NaN` to the URL!).
 go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
 // We use this assert-position to know where we will click.
-<<<<<<< HEAD
-assert-position: ("//*[@id='1']", {"x": 81, "y": 169})
-// We click on the left of the "1" anchor but still in the `a[data-nosnippet]`.
-click: (77, 163)
-=======
 assert-position: ("//*[@id='1']", {"x": 88, "y": 143})
 // We click on the left of the "1" anchor but still in the "src-line-number" `<pre>`.
 click: (135, 77)
->>>>>>> 411344983c0 (Fix test cases and hide-sidebar mode)
 assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
 
 // Checking the source code sidebar.