rustdoc: make the header show all three buttons

This tweaks it to use less space for the breadcrumbs.

Author: notriddle

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

@@ -177,12 +177,21 @@ h1, h2, h3, h4 {
 	position: relative;
 	display: grid;
 	grid-template-areas:
+		"main-heading-breadcrumbs main-heading-breadcrumbs"
 		"main-heading-h1 main-heading-toolbar"
 		"main-heading-sub-heading main-heading-toolbar";
 	grid-template-columns: 1fr max-content;
+	grid-template-rows: 25px min-content min-content;
 	padding-bottom: 6px;
 	margin-bottom: 15px;
 }
+.rustdoc-breadcrumbs {
+	grid-area: main-heading-breadcrumbs;
+	height: 25px;
+	line-height: 1.25;
+	display: flex;
+	align-items: end;
+}
 /* The only headings that get underlines are:
 	 Markdown-generated headings within the top-doc
 	 Rustdoc-generated h2 section headings (e.g. "Implementations", "Required Methods", etc)
@@ -228,6 +237,7 @@ a.src,
 rustdoc-toolbar,
 summary.hideme,
 .scraped-example-list,
+.rustdoc-breadcrumbs,
 /* This selector is for the items listed in the "all items" page. */
 ul.all-items {
 	font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
@@ -890,9 +900,10 @@ both the code example and the line numbers, so we need to remove the radius in t
 }
 
 .sub-heading {
+	font-size: 1rem;
 	flex-grow: 0;
-	font-size: 1.125rem;
 	grid-area: main-heading-sub-heading;
+	line-height: 1.25;
 }
 
 .main-heading rustdoc-toolbar, .main-heading .out-of-band {
@@ -953,7 +964,7 @@ div.where {
 nav.sub {
 	flex-grow: 1;
 	flex-flow: row nowrap;
-	margin: 4px 0 25px 0;
+	margin: 4px 0 0 0;
 	display: flex;
 	align-items: center;
 }
@@ -964,7 +975,7 @@ nav.sub {
 	flex-grow: 1;
 }
 .src nav.sub {
-	margin: 0 0 15px 0;
+	margin: 0 0 -10px 0;
 }
 
 .section-header {
@@ -1074,6 +1085,11 @@ table,
 	with boxes (i.e. from the flex layout) */
 	align-items: baseline;
 }
+.search-results-title + .sub-heading {
+	color: var(--main-color);
+	display: flex;
+	align-items: center;
+}
 #crate-search-div {
 	/* ensures that 100% in properties of #crate-search-div:after
 	are relative to the size of this div */
@@ -1298,15 +1314,15 @@ so that we can apply CSS-filters to change the arrow color in themes */
 }
 
 #settings.popover {
-	--popover-arrow-offset: 118px;
-	top: 26px;
+	--popover-arrow-offset: 202px;
+	top: calc(100% - 12px);
 }
 
 /* use larger max-width for help popover, but not for help.html */
 #help.popover {
 	max-width: 600px;
-	--popover-arrow-offset: 36px;
-	top: 26px;
+	--popover-arrow-offset: 118px;
+	top: calc(100% - 12px);
 }
 
 #help dt {
@@ -1722,7 +1738,6 @@ a.tooltip:hover::after {
 }
 
 #search-tabs {
-	grid-area: main-heading-sub-heading;
 	margin-top: 0.25rem;
 	display: flex;
 	flex-direction: row;
@@ -1788,7 +1803,7 @@ a.tooltip:hover::after {
 #settings-menu, #help-button, button#toggle-all-docs {
 	margin-left: var(--button-left-margin);
 	display: flex;
-	line-height: initial;
+	line-height: 1.25;
 }
 #sidebar-button {
 	display: none;
@@ -1873,7 +1888,8 @@ button#toggle-all-docs:before {
 	content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 12 12" \
 	enable-background="new 0 0 12 12" xmlns="http://www.w3.org/2000/svg" fill="none">\
 	<circle r="5.25" cx="6" cy="6" stroke-width="1.25" stroke="black"/>\
-	<text x="4.25" y="9" style="font:8px sans-serif;font-weight:1000" fill="black">?</text></svg>');
+	<text x="6" y="7" style="font:8px sans-serif;font-weight:1000" text-anchor="middle" \
+		dominant-baseline="middle" fill="black">?</text></svg>');
 	width: 18px;
 	height: 18px;
 	filter: var(--settings-menu-filter);
@@ -1894,10 +1910,19 @@ button#toggle-all-docs:before,
 	}
 }
 
+button[disabled]#toggle-all-docs {
+	opacity: 0.25;
+	border: solid 1px var(--main-background-color);
+	background-size: cover;
+}
+
+button[disabled]#toggle-all-docs:hover {
+	border: solid 1px var(--main-background-color);
+	cursor: not-allowed;
+}
+
 rustdoc-toolbar span.label {
-	font-size: initial;
-	font-variant-caps: small-caps;
-	text-transform: lowercase;
+	font-size: 1rem;
 	flex-grow: 1;
 }
 
@@ -2155,15 +2180,6 @@ However, it's not needed with smaller screen width because the doc/code block is
 	opacity: 0.75;
 }
 
-/* help button is mostly for search */
-#help-button:not(.help-open),
-#alternative-display #toggle-all-docs {
-	display: none;
-}
-#alternative-display #help-button {
-	display: flex;
-}
-
 /* Media Queries */
 
 /* Make sure all the buttons line wrap at the same time */
@@ -2206,12 +2222,10 @@ in src-script.js and main.js
 		width: 33px;
 	}
 	#settings.popover {
-		--popover-arrow-offset: 48px;
-		top: calc(100% - 8px);
+		--popover-arrow-offset: 86px;
 	}
 	#help.popover {
-		--popover-arrow-offset: 12px;
-		top: calc(100% - 8px);
+		--popover-arrow-offset: 48px;
 	}
 
 	.rustdoc {
@@ -2257,6 +2271,9 @@ in src-script.js and main.js
 	.src .search-form {
 		margin-left: 40px;
 	}
+	.src .main-heading {
+		margin-left: 8px;
+	}
 	.hide-sidebar .search-form {
 		margin-left: 32px;
 	}
@@ -2394,7 +2411,7 @@ in src-script.js and main.js
 	}
 
 	.src nav.sub {
-		margin: 0;
+		margin: 0 0 -25px 0;
 		padding: var(--nav-sub-mobile-padding);
 	}
 }

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

@@ -19,6 +19,10 @@ function resourcePath(basename, extension) {
 
 function hideMain() {
     addClass(document.getElementById(MAIN_ID), "hidden");
+    const toggle = document.getElementById("toggle-all-docs");
+    if (toggle) {
+        toggle.setAttribute("disabled", "disabled");
+    }
 }
 
 function showMain() {
@@ -31,6 +35,10 @@ function showMain() {
         }
         mainHeading.appendChild(searchState.rustdocToolbar);
     }
+    const toggle = document.getElementById("toggle-all-docs");
+    if (toggle) {
+        toggle.removeAttribute("disabled");
+    }
 }
 
 window.rootPath = getVar("root-path");

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

@@ -3597,16 +3597,16 @@ async function showResults(results, go_to_first, filterCrates) {
 
     let crates = "";
     if (rawSearchIndex.size > 1) {
-        crates = " in&nbsp;<div id=\"crate-search-div\"><select id=\"crate-search\">" +
-            "<option value=\"all crates\">all crates</option>";
+        crates = "<div class=\"sub-heading\"> in&nbsp;<div id=\"crate-search-div\">" +
+            "<select id=\"crate-search\"><option value=\"all crates\">all crates</option>";
         for (const c of rawSearchIndex.keys()) {
             crates += `<option value="${c}" ${c === filterCrates && "selected"}>${c}</option>`;
         }
-        crates += "</select></div>";
+        crates += "</select></div></div>";
     }
 
     let output = `<div class="main-heading">\
-        <h1 class="search-results-title">Results${crates}</h1></div>`;
+        <h1 class="search-results-title">Results</h1>${crates}</div>`;
     if (results.query.error !== null) {
         const error = results.query.error;
         error.forEach((value, index) => {

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

@@ -293,10 +293,10 @@ class RustdocToolbarElement extends HTMLElement {
         <div id="settings-menu" tabindex="-1">
             <a href="${rootPath}settings.html"><span class="label">Settings</span></a>
         </div>
-        <button id="toggle-all-docs"><span class="label">Summary</span></button>
         <div id="help-button" tabindex="-1">
             <a href="${rootPath}help.html"><span class="label">Help</span></a>
-        </div>`;
+        </div>
+        <button id="toggle-all-docs"><span class="label">Summary</span></button>`;
     }
 }
 window.customElements.define("rustdoc-toolbar", RustdocToolbarElement);

src/librustdoc/html/templates/print_item.html

@@ -1,11 +1,16 @@
 <div class="main-heading"> {# #}
-    <h1>
-        {{typ}}
-        {# The breadcrumbs of the item path, like std::string #}
+    {% if !path_components.is_empty() %}
+    <span class="rustdoc-breadcrumbs">
         {% for component in path_components %}
             <a href="{{component.path|safe}}index.html">{{component.name}}</a>::<wbr>
         {% endfor %}
-        <a class="{{item_type}}" href="#">{{name}}</a> {# #}
+    </span>
+    {% endif %}
+    <h1>
+        {{typ}}
+        <span{% if item_type != "mod" +%} class="{{item_type}}"{% endif %}>
+        {{name}}
+        </span> {# #}
         <button id="copy-path" title="Copy item path to clipboard"> {# #}
             Copy item path {# #}
         </button> {# #}

tests/rustdoc-gui/anchors.goml

@@ -12,8 +12,7 @@ define-function: (
         call-function: ("switch-theme", {"theme": |theme|})
 
         assert-css: ("#toggle-all-docs", {"color": |main_color|})
-        assert-css: (".main-heading h1 a:nth-of-type(1)", {"color": |main_heading_color|})
-        assert-css: (".main-heading a:nth-of-type(2)", {"color": |main_heading_type_color|})
+        assert-css: (".main-heading h1 span", {"color": |main_heading_type_color|})
         assert-css: (
              ".rightside a.src",
              {"color": |src_link_color|, "text-decoration": "none solid " + |src_link_color|},
@@ -55,7 +54,7 @@ define-function: (
         assert-css: ("#top-doc-prose-title", {"color": |title_color|})
 
         assert-css: (".sidebar .block a", {"color": |sidebar_link_color|})
-        assert-css: (".main-heading h1 a", {"color": |title_color|})
+        assert-css: (".main-heading h1", {"color": |title_color|})
 
         // We move the cursor over the "Implementations" title so the anchor is displayed.
         move-cursor-to: "h2#implementations"

tests/rustdoc-gui/item-info.goml

@@ -20,7 +20,7 @@ store-position: (
     {"x": second_line_x, "y": second_line_y},
 )
 assert: |first_line_x| != |second_line_x| && |first_line_x| == 516 && |second_line_x| == 272
-assert: |first_line_y| != |second_line_y| && |first_line_y| == 715 && |second_line_y| == 738
+assert: |first_line_y| != |second_line_y| && |first_line_y| == 710 && |second_line_y| == 733
 
 // Now we ensure that they're not rendered on the same line.
 set-window-size: (1100, 800)

tests/rustdoc-gui/scrape-examples-layout.goml

@@ -72,8 +72,8 @@ click: ".scraped-example .button-holder .expand"
 store-value: (offset_y, 4)
 
 // First with desktop
-assert-position: (".scraped-example", {"y": 253})
-assert-position: (".scraped-example .prev", {"y": 253 + |offset_y|})
+assert-position: (".scraped-example", {"y": 248})
+assert-position: (".scraped-example .prev", {"y": 248 + |offset_y|})
 
 // Gradient background should be at the top of the code block.
 assert-css: (".scraped-example .example-wrap::before", {"top": "0px"})
@@ -82,8 +82,8 @@ assert-css: (".scraped-example .example-wrap::after", {"bottom": "0px"})
 // Then with mobile
 set-window-size: (600, 600)
 store-size: (".scraped-example .scraped-example-title", {"height": title_height})
-assert-position: (".scraped-example", {"y": 284})
-assert-position: (".scraped-example .prev", {"y": 284 + |offset_y| + |title_height|})
+assert-position: (".scraped-example", {"y": 277})
+assert-position: (".scraped-example .prev", {"y": 277 + |offset_y| + |title_height|})
 
 define-function: (
     "check_title_and_code_position",

tests/rustdoc-gui/search-filter.goml

@@ -56,7 +56,8 @@ assert-property: ("#crate-search", {"value": "lib2"})
 assert-false: "#results .externcrate"
 
 // Checking that the text for the "title" is correct (the "all crates" comes from the "<select>").
-assert-text: (".search-results-title", "Results in all crates", STARTS_WITH)
+assert-text: (".search-results-title", "Results", STARTS_WITH)
+assert-text: (".search-results-title + .sub-heading", " in all crates", STARTS_WITH)
 
 // Checking the display of the crate filter.
 // We start with the light theme.
@@ -84,6 +85,6 @@ wait-for-css: ("#crate-search", {
 click: "#theme-ayu"
 wait-for-css: ("#crate-search", {
     "border": "1px solid #5c6773",
-    "color": "#fff",
+    "color": "#c5c5c5",
     "background-color": "#0f1419",
 })

tests/rustdoc-gui/search-result-display.goml

@@ -50,7 +50,7 @@ compare-elements-size-near: (
 set-window-size: (900, 900)
 
 // First we check the current width, height and position.
-assert-css: ("#crate-search", {"width": "223px"})
+assert-css: ("#crate-search", {"width": "159px"})
 store-size: (".search-results-title", {
     "height": search_results_title_height,
     "width": search_results_title_width,
@@ -64,7 +64,7 @@ set-text: (
 )
 
 // Then we compare again to confirm the height didn't change.
-assert-size: ("#crate-search", {"width": 760})
+assert-size: ("#crate-search", {"width": 509})
 assert-size: (".search-results-title", {
     "height": |search_results_title_height|,
 })