Auto merge of #91356 - GuillaumeGomez:improve-rustdoc-layout, r=jsha

Improve rustdoc layout

This is an overtake of https://github.com/rust-lang/rust/pull/89385 originally written by `@cynecx.`

I kept the original commit and simply added the missing fixes into a new one. You can test it online [here](https://rustdoc.crud.net/imperio/improve-rustdoc-layout/std/index.html).

r? `@jsha`

29 files changed, 343 insertions, 237 deletions

diff --git a/src/librustdoc/html/markdown.rs b/src/librustdoc/html/markdown.rs
index d811c85ea58..545b409175e 100644
--- a/src/librustdoc/html/markdown.rs
+++ b/src/librustdoc/html/markdown.rs
@@ -1447,7 +1447,7 @@ fn init_id_map() -> FxHashMap<String, usize> {
     map.insert("theme-choices".to_owned(), 1);
     map.insert("settings-menu".to_owned(), 1);
     map.insert("help-button".to_owned(), 1);
-    map.insert("main".to_owned(), 1);
+    map.insert("main-content".to_owned(), 1);
     map.insert("search".to_owned(), 1);
     map.insert("crate-search".to_owned(), 1);
     map.insert("render-detail".to_owned(), 1);
diff --git a/src/librustdoc/html/markdown/tests.rs b/src/librustdoc/html/markdown/tests.rs
index 68ab002f138..d4af3663b62 100644
--- a/src/librustdoc/html/markdown/tests.rs
+++ b/src/librustdoc/html/markdown/tests.rs
@@ -12,7 +12,7 @@ fn test_unique_id() {
         "examples",
         "method.into_iter",
         "foo",
-        "main",
+        "main-content",
         "search",
         "methods",
         "examples",
@@ -28,7 +28,7 @@ fn test_unique_id() {
         "examples-2",
         "method.into_iter-1",
         "foo-1",
-        "main-1",
+        "main-content-1",
         "search-1",
         "methods",
         "examples-3",
@@ -219,8 +219,8 @@ fn test_header_ids_multiple_blocks() {
     );
     t(
         &mut map,
-        "# Main",
-        "<h2 id=\"main-1\" class=\"section-header\"><a href=\"#main-1\">Main</a></h2>",
+        "# Search",
+        "<h2 id=\"search-1\" class=\"section-header\"><a href=\"#search-1\">Search</a></h2>",
     );
     t(
         &mut map,
diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css
index 37ea7b00033..e35358c5649 100644
--- a/src/librustdoc/html/static/css/noscript.css
+++ b/src/librustdoc/html/static/css/noscript.css
@@ -4,7 +4,7 @@ of content is hidden by default (depending on the settings too), we have to over
 rules.
 */
 
-#main .attributes {
+#main-content .attributes {
 	/* Since there is no toggle (the "[-]") when JS is disabled, no need for this margin either. */
 	margin-left: 0 !important;
 }
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index fceb508bc4f..79c7626ffc4 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -111,7 +111,6 @@ body {
 	font: 16px/1.4 "Source Serif 4", NanumBarunGothic, serif;
 	margin: 0;
 	position: relative;
-	padding: 10px 15px 20px 15px;
 
 	-webkit-font-feature-settings: "kern", "liga";
 	-moz-font-feature-settings: "kern", "liga";
@@ -202,7 +201,7 @@ details.rustdoc-toggle > summary::before,
 div.impl-items > div:not(.docblock):not(.item-info),
 .content ul.crate a.crate, a.srclink,
 /* This selector is for the items listed in the "all items" page. */
-#main > ul.docblock > li > a {
+#main-content > ul.docblock > li > a {
 	font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
 }
 
@@ -248,6 +247,32 @@ textarea {
 
 /* end tweaks for normalize.css 8 */
 
+.rustdoc {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+}
+
+main {
+	position: relative;
+	flex-grow: 1;
+	padding: 10px 15px 40px 45px;
+	min-width: 0;
+}
+
+.source main {
+	padding: 15px;
+}
+
+.width-limiter {
+	max-width: 960px;
+	margin-right: auto;
+}
+
+.source .width-limiter {
+	max-width: unset;
+}
+
 details:not(.rustdoc-toggle) summary {
 	margin-bottom: .6em;
 }
@@ -285,28 +310,75 @@ li {
 }
 
 .source .content {
-	margin-top: 50px;
 	max-width: none;
 	overflow: visible;
 	margin-left: 0px;
 }
 
 nav.sub {
+	position: relative;
 	font-size: 16px;
 	text-transform: uppercase;
 }
 
+.sub-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+}
+
+.sub-logo-container {
+	display: none;
+	margin-right: 20px;
+}
+
+.source .sub-logo-container {
+	display: block;
+}
+
+.source .sub-logo-container > img {
+	height: 60px;
+	width: 60px;
+	object-fit: contain;
+}
+
 .sidebar {
 	width: 200px;
-	position: fixed;
-	left: 0;
-	top: 0;
-	bottom: 0;
 	overflow-y: scroll;
+	position: sticky;
+	min-width: 200px;
+	height: 100vh;
+	top: 0;
+	left: 0;
 }
 
 .rustdoc.source .sidebar {
+	width: 50px;
+	min-width: 0px;
+	max-width: 300px;
+	flex-grow: 0;
+	flex-shrink: 0;
+	flex-basis: auto;
+	border-right: 1px solid;
+	overflow-x: hidden;
+	/* The sidebar is by default hidden  */
+	overflow-y: hidden;
+}
+
+.source .sidebar > *:not(:first-child) {
+	transition: opacity 0.5s, visibility 0.2s;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.source .sidebar.expanded {
 	overflow-y: auto;
+	width: 300px;
+}
+
+.source .sidebar.expanded > * {
+	opacity: 1;
+	visibility: visible;
 }
 
 /* Improve the scrollbar display on firefox */
@@ -332,10 +404,6 @@ nav.sub {
 	margin-right: -10px;
 }
 
-.content, nav {
-	max-width: 960px;
-}
-
 /* Everything else */
 
 .hidden {
@@ -343,23 +411,15 @@ nav.sub {
 }
 
 .logo-container {
-	height: 100px;
-	width: 100px;
-	position: relative;
-	margin: 20px auto;
-	display: block;
+	display: flex;
 	margin-top: 10px;
+	margin-bottom: 10px;
+	justify-content: center;
 }
 
 .logo-container > img {
-	max-width: 100px;
-	max-height: 100px;
-	height: 100%;
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, -50%);
-	display: block;
+	height: 100px;
+	width: 100px;
 }
 
 .sidebar .location {
@@ -439,10 +499,6 @@ nav.sub {
 	display: none;
 }
 
-.content {
-	padding: 15px 0;
-}
-
 .source .content pre.rust {
 	white-space: pre;
 	overflow: auto;
@@ -487,7 +543,6 @@ nav.sub {
 }
 
 #search {
-	margin-left: 230px;
 	position: relative;
 }
 
@@ -578,10 +633,10 @@ nav.sub {
 	display: inline-block;
 }
 
-#main {
+#main-content {
 	position: relative;
 }
-#main > .since {
+#main-content > .since {
 	top: inherit;
 	font-family: "Fira Sans", Arial, sans-serif;
 }
@@ -700,14 +755,18 @@ nav.sub {
 	flex-basis: 100%;
 }
 
-#main > .item-info {
+#main-content > .item-info {
 	margin-top: 0;
 }
 
 nav:not(.sidebar) {
+	flex-grow: 1;
 	border-bottom: 1px solid;
 	padding-bottom: 10px;
-	margin-bottom: 10px;
+	margin-bottom: 25px;
+}
+.source nav:not(.sidebar).sub {
+	margin-left: 32px;
 }
 nav.main {
 	padding: 20px 0;
@@ -726,10 +785,6 @@ nav.main .separator {
 nav.sum { text-align: right; }
 nav.sub form { display: inline; }
 
-nav.sub, .content {
-	margin-left: 230px;
-}
-
 a {
 	text-decoration: none;
 	background: transparent;
@@ -802,6 +857,7 @@ h2.small-section-header > .anchor {
 
 .search-container {
 	position: relative;
+	max-width: 960px;
 }
 .search-container > div {
 	display: inline-flex;
@@ -1320,30 +1376,23 @@ pre.rust {
 }
 
 #sidebar-toggle {
-	position: fixed;
-	top: 30px;
-	left: 300px;
-	z-index: 10;
-	padding: 3px;
-	border-top-right-radius: 3px;
-	border-bottom-right-radius: 3px;
+	position: sticky;
+	top: 0;
+	left: 0;
 	cursor: pointer;
 	font-weight: bold;
-	transition: left .5s;
 	font-size: 1.2em;
-	border: 1px solid;
-	border-left: 0;
+	border-bottom: 1px solid;
+	display: flex;
+	height: 40px;
+	justify-content: center;
+	align-items: center;
+	z-index: 10;
 }
 #source-sidebar {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
 	width: 300px;
 	z-index: 1;
 	overflow: auto;
-	transition: left .5s;
-	border-right: 1px solid;
 }
 #source-sidebar > .title {
 	font-size: 1.5em;
@@ -1354,8 +1403,8 @@ pre.rust {
 
 .theme-picker {
 	position: absolute;
-	left: 211px;
-	top: 19px;
+	left: -34px;
+	top: 9px;
 }
 
 .theme-picker button {
@@ -1472,10 +1521,10 @@ kbd {
 	left: -5px;
 }
 
-#main > ul {
+#main-content > ul {
 	padding-left: 10px;
 }
-#main > ul > li {
+#main-content > ul > li {
 	list-style: none;
 }
 
@@ -1646,6 +1695,18 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	.docblock > .information:first-child > .tooltip {
 		margin-top: 16px;
 	}
+
+	/* When we expand the sidebar on the source code page, we hide the logo on the left of the
+	search bar to have more space. */
+	.sidebar.expanded + main .width-limiter .sub-logo-container.rust-logo {
+		display: none;
+	}
+
+	/* It doesn't render well on mobile because of the layout, so better only have the transition
+	on desktop. */
+	.rustdoc.source .sidebar {
+		transition: width .5s;
+	}
 }
 
 @media (max-width: 700px) {
@@ -1653,14 +1714,43 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		padding-top: 0px;
 	}
 
-	.rustdoc > .sidebar {
+	main {
+		padding-left: 15px;
+		padding-top: 0px;
+	}
+
+	.rustdoc {
+		flex-direction: column;
+	}
+
+	.rustdoc:not(.source) > .sidebar {
+		width: 100%;
 		height: 45px;
 		min-height: 40px;
+		max-height: 45px;
 		margin: 0;
-		margin-left: -15px;
 		padding: 0 15px;
 		position: static;
 		z-index: 11;
+		overflow-y: hidden;
+	}
+
+	.rustdoc.source > .sidebar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		margin: 0;
+		z-index: 11;
+		width: 0;
+	}
+
+	.sidebar.mobile {
+		position: sticky !important;
+		top: 0;
+		left: 0;
+		width: 100%;
+		margin-left: 0;
+		background-color: rgba(0,0,0,0);
 	}
 
 	.sidebar > .location {
@@ -1678,7 +1768,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		padding: 0;
 	}
 
-	.sidebar .logo-container {
+	.rustdoc:not(.source) .sidebar .logo-container {
 		width: 35px;
 		height: 35px;
 		margin-top: 5px;
@@ -1699,6 +1789,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		cursor: pointer;
 		width: 45px;
 		left: 0;
+		top: 0;
 		text-align: center;
 		display: block;
 		border-bottom: 1px solid;
@@ -1748,20 +1839,25 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 
 	nav.sub {
 		width: calc(100% - 32px);
-		float: right;
+		margin-left: 32px;
+		margin-bottom: 10px;
+	}
+
+	.source nav:not(.sidebar).sub {
+		margin-left: 32px;
 	}
 
 	.content {
 		margin-left: 0px;
 	}
 
-	#main, #search {
-		margin-top: 45px;
-		padding: 0;
+	.source .content {
+		margin-top: 10px;
 	}
 
 	#search {
 		margin-left: 0;
+		padding: 0;
 	}
 
 	.anchor {
@@ -1769,8 +1865,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	}
 
 	.theme-picker {
-		left: 10px;
-		top: 54px;
 		z-index: 1;
 	}
 
@@ -1789,25 +1883,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		height: 50px;
 	}
 
-	.sidebar.mobile {
-		position: fixed;
-		width: 100%;
-		margin-left: 0;
-		background-color: rgba(0,0,0,0);
-		height: 100%;
-	}
-	/*
-	This allows to prevent the version text to overflow the sidebar title on mobile mode when the
-	sidebar is displayed (after clicking on the "hamburger" button).
-	*/
-	.sidebar.mobile > div.version {
-		overflow: hidden;
-		max-height: 33px;
-	}
-	.sidebar {
-		width: calc(100% + 30px);
-	}
-
 	.show-it, .sidebar-elems:focus-within {
 		z-index:  2;
 		left: 0;
@@ -1845,8 +1920,8 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		border-bottom: 1px solid;
 	}
 
-	#main > details.rustdoc-toggle > summary::before,
-	#main > div > details.rustdoc-toggle > summary::before {
+	#main-content > details.rustdoc-toggle > summary::before,
+	#main-content > div > details.rustdoc-toggle > summary::before {
 		left: -11px;
 	}
 
@@ -1854,19 +1929,32 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		margin: 10px;
 	}
 
-	#sidebar-toggle {
+	.sidebar.expanded #sidebar-toggle {
+		font-size: 1.5rem;
+	}
+
+	.sidebar:not(.expanded) #sidebar-toggle {
+		position: fixed;
+		left: 1px;
 		top: 100px;
 		width: 30px;
 		font-size: 1.5rem;
 		text-align: center;
 		padding: 0;
+		z-index: 10;
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
+		cursor: pointer;
+		font-weight: bold;
+		border: 1px solid;
+		border-left: 0;
 	}
 
 	#source-sidebar {
 		z-index: 11;
 	}
 
-	#main > .line-numbers {
+	#main-content > .line-numbers {
 		margin-top: 0;
 	}
 
@@ -1920,14 +2008,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		height: 73px;
 	}
 
-	/* This is to prevent the search bar from being underneath the <section>
-	 * element following it.
-	 */
-	#main, #search {
-		margin-top: 100px;
-	}
-
-	#main > table:not(.table-display) td {
+	#main-content > table:not(.table-display) td {
 		word-break: break-word;
 		width: 50%;
 	}
@@ -1969,6 +2050,23 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	.docblock code {
 		overflow-wrap: anywhere;
 	}
+
+	.sub-container {
+		flex-direction: column;
+	}
+
+	.sub-logo-container {
+		align-self: center;
+	}
+
+	.source .sub-logo-container > img {
+		height: 35px;
+		width: 35px;
+	}
+
+	.sidebar:not(.expanded) #sidebar-toggle {
+		top: 10px;
+	}
 }
 
 
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index 13e8dc85a24..f4f654f4745 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -61,7 +61,7 @@ pre, .rustdoc.source .example-wrap {
 	background-color: #14191f;
 }
 
-.logo-container.rust-logo > img {
+.rust-logo > img {
 	filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
 		drop-shadow(-1px 0 0 #fff)
@@ -97,7 +97,7 @@ pre, .rustdoc.source .example-wrap {
 }
 
 .source .sidebar {
-	background-color: #0f1419;
+	background-color: #14191f;
 }
 
 .sidebar .location {
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 8caf8a05d50..b10b8020380 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -32,7 +32,7 @@ pre, .rustdoc.source .example-wrap {
 	background-color: #505050;
 }
 
-.logo-container.rust-logo > img {
+.rust-logo > img {
 	filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
 		drop-shadow(-1px 0 0 #fff)
@@ -66,7 +66,7 @@ pre, .rustdoc.source .example-wrap {
 }
 
 .source .sidebar {
-	background-color: #353535;
+	background-color: #565656;
 }
 
 .sidebar .location {
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index fec71674e63..97f32ac1f7d 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -43,7 +43,7 @@ pre, .rustdoc.source .example-wrap {
 	scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
 }
 
-.logo-container.rust-logo > img {
+.rust-logo > img {
 	/* No need for a border in here! */
 }
 
@@ -66,7 +66,7 @@ pre, .rustdoc.source .example-wrap {
 }
 
 .source .sidebar {
-	background-color: #fff;
+	background-color: #f1f1f1;
 }
 
 .sidebar .location {
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index 5661d497334..411a94ef2d1 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -94,6 +94,7 @@ function getVirtualKey(ev) {
 
 var THEME_PICKER_ELEMENT_ID = "theme-picker";
 var THEMES_ELEMENT_ID = "theme-choices";
+var MAIN_ID = "main-content";
 
 function getThemesElement() {
     return document.getElementById(THEMES_ELEMENT_ID);
@@ -362,7 +363,7 @@ function hideThemeButtonState() {
     }
 
     var toggleAllDocsId = "toggle-all-docs";
-    var main = document.getElementById("main");
+    var main = document.getElementById(MAIN_ID);
     var savedHash = "";
 
     function handleHashes(ev) {
@@ -787,7 +788,7 @@ function hideThemeButtonState() {
         } else {
             addClass(innerToggle, "will-expand");
             onEachLazy(document.getElementsByClassName("rustdoc-toggle"), function(e) {
-                if (e.parentNode.id !== "main" ||
+                if (e.parentNode.id !== MAIN_ID ||
                     (!hasClass(e, "implementors-toggle") &&
                      !hasClass(e, "type-contents-toggle")))
                 {
@@ -1001,7 +1002,7 @@ function hideThemeButtonState() {
         container.appendChild(rustdoc_version);
 
         popup.appendChild(container);
-        insertAfter(popup, searchState.outputElement());
+        insertAfter(popup, document.querySelector("main"));
         // So that it's only built once and then it'll do nothing when called!
         buildHelperPopup = function() {};
     };
diff --git a/src/librustdoc/html/static/js/source-script.js b/src/librustdoc/html/static/js/source-script.js
index 4d9a59f836b..81dc0b2fb1e 100644
--- a/src/librustdoc/html/static/js/source-script.js
+++ b/src/librustdoc/html/static/js/source-script.js
@@ -77,16 +77,14 @@ function createDirEntry(elem, parent, fullPath, currentFile, hasFoundFile) {
 }
 
 function toggleSidebar() {
-    var sidebar = document.getElementById("source-sidebar");
-    var child = this.children[0].children[0];
+    var sidebar = document.querySelector("nav.sidebar");
+    var child = this.children[0];
     if (child.innerText === ">") {
-        sidebar.style.left = "";
-        this.style.left = "";
+        sidebar.classList.add("expanded");
         child.innerText = "<";
         updateLocalStorage("rustdoc-source-sidebar-show", "true");
     } else {
-        sidebar.style.left = "-300px";
-        this.style.left = "0";
+        sidebar.classList.remove("expanded");
         child.innerText = ">";
         updateLocalStorage("rustdoc-source-sidebar-show", "false");
     }
@@ -97,20 +95,15 @@ function createSidebarToggle() {
     sidebarToggle.id = "sidebar-toggle";
     sidebarToggle.onclick = toggleSidebar;
 
-    var inner1 = document.createElement("div");
-    inner1.style.position = "relative";
+    var inner = document.createElement("div");
 
-    var inner2 = document.createElement("div");
-    inner2.style.paddingTop = "3px";
     if (getCurrentValue("rustdoc-source-sidebar-show") === "true") {
-        inner2.innerText = "<";
+        inner.innerText = "<";
     } else {
-        inner2.innerText = ">";
-        sidebarToggle.style.left = "0";
+        inner.innerText = ">";
     }
 
-    inner1.appendChild(inner2);
-    sidebarToggle.appendChild(inner1);
+    sidebarToggle.appendChild(inner);
     return sidebarToggle;
 }
 
@@ -120,15 +113,17 @@ function createSourceSidebar() {
     if (!window.rootPath.endsWith("/")) {
         window.rootPath += "/";
     }
-    var main = document.getElementById("main");
+    var container = document.querySelector("nav.sidebar");
 
     var sidebarToggle = createSidebarToggle();
-    main.insertBefore(sidebarToggle, main.firstChild);
+    container.insertBefore(sidebarToggle, container.firstChild);
 
     var sidebar = document.createElement("div");
     sidebar.id = "source-sidebar";
     if (getCurrentValue("rustdoc-source-sidebar-show") !== "true") {
-        sidebar.style.left = "-300px";
+        container.classList.remove("expanded");
+    } else {
+        container.classList.add("expanded");
     }
 
     var currentFile = getCurrentFilePath();
@@ -144,7 +139,7 @@ function createSourceSidebar() {
                                       currentFile, hasFoundFile);
     });
 
-    main.insertBefore(sidebar, main.firstChild);
+    container.insertBefore(sidebar, document.querySelector(".sidebar-logo").nextSibling);
     // Focus on the current file in the source files sidebar.
     var selected_elem = sidebar.getElementsByClassName("selected")[0];
     if (typeof selected_elem !== "undefined") {
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
index c07851da18a..3c6f083419a 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -74,52 +74,67 @@
     {{- layout.external_html.before_content | safe -}}
     <nav class="sidebar"> {#- -#}
         <div class="sidebar-menu" role="button">&#9776;</div> {#- -#}
-        <a href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
+        <a class="sidebar-logo" href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
             <div class='logo-container rust-logo'> {#- -#}
-            <img src='
-                {%- if layout.logo -%}
-                {{layout.logo}}
-                {%- else -%}
-                {{static_root_path | safe}}rust-logo{{page.resource_suffix}}.png
-                {%- endif -%}
-                ' alt='logo'> {#- -#}
+                <img src='
+                    {%- if layout.logo -%}
+                    {{layout.logo}}
+                    {%- else -%}
+                    {{static_root_path | safe}}rust-logo{{page.resource_suffix}}.png
+                    {%- endif -%}
+                    ' alt='logo'> {#- -#}
             </div> {#- -#}
         </a> {#- -#}
         {{- sidebar | safe -}}
     </nav> {#- -#}
-    <div class="theme-picker"> {#- -#}
-        <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
-            <img width="18" height="18" alt="Pick another theme!" {# -#}
-             src="{{static_root_path | safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
-        </button> {#- -#}
-        <div id="theme-choices" role="menu"></div> {#- -#}
-    </div> {#- -#}
-    <nav class="sub"> {#- -#}
-        <form class="search-form"> {#- -#}
-            <div class="search-container"> {#- -#}
-                <div>{%- if layout.generate_search_filter -%}
-                    <select id="crate-search"> {#- -#}
-                        <option value="All crates">All crates</option> {#- -#}
-                    </select> {#- -#}
-                    {%- endif -%}
-                    <input {# -#}
-                        class="search-input" {# -#}
-                        name="search" {# -#}
-                        autocomplete="off" {# -#}
-                        spellcheck="false" {# -#}
-                        placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
-                        type="search"> {#- -#}
-                </div> {#- -#}
-                <button type="button" id="help-button" title="help">?</button> {#- -#}
-                <a id="settings-menu" href="{{page.root_path | safe}}settings.html" title="settings"> {#- -#}
-                    <img width="18" height="18" alt="Change settings" {# -#}
-                         src="{{static_root_path | safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
+    <main> {#- -#}
+        <div class="width-limiter"> {#- -#}
+            <div class="sub-container"> {#- -#}
+                <a class="sub-logo-container rust-logo" href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
+                    <img src='
+                        {%- if layout.logo -%}
+                        {{layout.logo}}
+                        {%- else -%}
+                        {{static_root_path | safe}}rust-logo{{page.resource_suffix}}.png
+                        {%- endif -%}
+                        ' alt='logo'> {#- -#}
                 </a> {#- -#}
+                <nav class="sub"> {#- -#}
+                    <div class="theme-picker"> {#- -#}
+                        <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
+                            <img width="18" height="18" alt="Pick another theme!" {# -#}
+                             src="{{static_root_path | safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
+                        </button> {#- -#}
+                        <div id="theme-choices" role="menu"></div> {#- -#}
+                    </div> {#- -#}
+                    <form class="search-form"> {#- -#}
+                        <div class="search-container"> {#- -#}
+                            <div>{%- if layout.generate_search_filter -%}
+                                <select id="crate-search"> {#- -#}
+                                    <option value="All crates">All crates</option> {#- -#}
+                                </select> {#- -#}
+                                {%- endif -%}
+                                <input {# -#}
+                                    class="search-input" {# -#}
+                                    name="search" {# -#}
+                                    autocomplete="off" {# -#}
+                                    spellcheck="false" {# -#}
+                                    placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
+                                    type="search"> {#- -#}
+                            </div> {#- -#}
+                            <button type="button" id="help-button" title="help">?</button> {#- -#}
+                            <a id="settings-menu" href="{{page.root_path | safe}}settings.html" title="settings"> {#- -#}
+                                <img width="18" height="18" alt="Change settings" {# -#}
+                                     src="{{static_root_path | safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
+                            </a> {#- -#}
+                        </div> {#- -#}
+                    </form> {#- -#}
+                </nav> {#- -#}
             </div> {#- -#}
-        </form> {#- -#}
-    </nav> {#- -#}
-    <section id="main" class="content">{{- content | safe -}}</section> {#- -#}
-    <section id="search" class="content hidden"></section> {#- -#}
+            <section id="main-content" class="content">{{- content | safe -}}</section> {#- -#}
+            <section id="search" class="content hidden"></section> {#- -#}
+        </div> {#- -#}
+    </main> {#- -#}
     {{- layout.external_html.after_content | safe -}}
     <div id="rustdoc-vars" {# -#}
          data-root-path="{{page.root_path | safe}}" {# -#}
diff --git a/src/test/rustdoc-gui/check-code-blocks-margin.goml b/src/test/rustdoc-gui/check-code-blocks-margin.goml
index 2de47682856..f6266eba75d 100644
--- a/src/test/rustdoc-gui/check-code-blocks-margin.goml
+++ b/src/test/rustdoc-gui/check-code-blocks-margin.goml
@@ -1,6 +1,6 @@
 // This test ensures that the docblock elements have the appropriate left margin.
 goto: file://|DOC_PATH|/test_docs/fn.foo.html
 // The top docblock elements shouldn't have left margin...
-assert-css: ("#main .docblock.item-decl", {"margin-left": "0px"})
+assert-css: ("#main-content .docblock.item-decl", {"margin-left": "0px"})
 // ... but all the others should!
-assert-css: ("#main .docblock:not(.item-decl)", {"margin-left": "24px"})
+assert-css: ("#main-content .docblock:not(.item-decl)", {"margin-left": "24px"})
diff --git a/src/test/rustdoc-gui/escape-key.goml b/src/test/rustdoc-gui/escape-key.goml
index 5cf8a5e136e..b65c398405c 100644
--- a/src/test/rustdoc-gui/escape-key.goml
+++ b/src/test/rustdoc-gui/escape-key.goml
@@ -3,15 +3,15 @@ goto: file://|DOC_PATH|/test_docs/index.html
 write: (".search-input", "test")
 wait-for: "#search > h1" // The search element is empty before the first search 
 assert-attribute: ("#search", {"class": "content"})
-assert-attribute: ("#main", {"class": "content hidden"})
+assert-attribute: ("#main-content", {"class": "content hidden"})
 press-key: "Escape"
 assert-attribute: ("#search", {"class": "content hidden"})
-assert-attribute: ("#main", {"class": "content"})
+assert-attribute: ("#main-content", {"class": "content"})
 
 // Check that focusing the search input brings back the search results
 focus: ".search-input"
 assert-attribute: ("#search", {"class": "content"})
-assert-attribute: ("#main", {"class": "content hidden"})
+assert-attribute: ("#main-content", {"class": "content hidden"})
 
 // Now let's check that when the help popup is displayed and we press Escape, it doesn't
 // hide the search results too.
@@ -20,7 +20,7 @@ assert-attribute: ("#help", {"class": ""})
 press-key: "Escape"
 assert-attribute: ("#help", {"class": "hidden"})
 assert-attribute: ("#search", {"class": "content"})
-assert-attribute: ("#main", {"class": "content hidden"})
+assert-attribute: ("#main-content", {"class": "content hidden"})
 
 // Check that Escape hides the search results when a search result is focused.
 focus: ".search-input"
@@ -31,4 +31,4 @@ assert: "#results a:focus"
 press-key: "Escape"
 assert-attribute: ("#help", {"class": "hidden"})
 assert-attribute: ("#search", {"class": "content hidden"})
-assert-attribute: ("#main", {"class": "content"})
+assert-attribute: ("#main-content", {"class": "content"})
diff --git a/src/test/rustdoc-gui/impl-default-expansion.goml b/src/test/rustdoc-gui/impl-default-expansion.goml
index b268ec68d42..7c4496dc0ca 100644
--- a/src/test/rustdoc-gui/impl-default-expansion.goml
+++ b/src/test/rustdoc-gui/impl-default-expansion.goml
@@ -1,3 +1,3 @@
 // This test ensures that the impl blocks are open by default.
 goto: file://|DOC_PATH|/test_docs/struct.Foo.html
-assert-attribute: ("#main > details.implementors-toggle", {"open": ""})
+assert-attribute: ("#main-content > details.implementors-toggle", {"open": ""})
diff --git a/src/test/rustdoc-gui/search-result-go-to-first.goml b/src/test/rustdoc-gui/search-result-go-to-first.goml
index 5d709f65881..cadd7f6a3f3 100644
--- a/src/test/rustdoc-gui/search-result-go-to-first.goml
+++ b/src/test/rustdoc-gui/search-result-go-to-first.goml
@@ -11,7 +11,7 @@ goto: file://|DOC_PATH|/test_docs/index.html?search=struct%3AFoo
 wait-for: "#titles"
 assert-text-false: (".fqn .in-band", "Struct test_docs::Foo")
 // Ensure that the search results are displayed, not the "normal" content.
-assert-css: ("#main", {"display": "none"})
+assert-css: ("#main-content", {"display": "none"})
 
 // Now we can check that the feature is working as expected!
 goto: file://|DOC_PATH|/test_docs/index.html?search=struct%3AFoo&go_to_first=true
diff --git a/src/test/rustdoc-gui/source-code-page.goml b/src/test/rustdoc-gui/source-code-page.goml
index 5a49807e180..f3682f59d21 100644
--- a/src/test/rustdoc-gui/source-code-page.goml
+++ b/src/test/rustdoc-gui/source-code-page.goml
@@ -1,6 +1,6 @@
 goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
 // Check that we can click on the line number.
-click: (40, 224) // This is the position of the span for line 4.
+click: ".line-numbers > span:nth-child(4)" // This is the span for line 4.
 // Unfortunately, "#4" isn't a valid query selector, so we have to go around that limitation
 // by instead getting the nth span.
 assert-attribute: (".line-numbers > span:nth-child(4)", {"class": "line-highlighted"})
diff --git a/src/test/rustdoc-gui/toggle-docs.goml b/src/test/rustdoc-gui/toggle-docs.goml
index 136868f3175..eaa4c554d5a 100644
--- a/src/test/rustdoc-gui/toggle-docs.goml
+++ b/src/test/rustdoc-gui/toggle-docs.goml
@@ -1,10 +1,10 @@
 goto: file://|DOC_PATH|/test_docs/index.html
-assert-attribute: ("#main > details.top-doc", {"open": ""})
+assert-attribute: ("#main-content > details.top-doc", {"open": ""})
 click: "#toggle-all-docs"
 wait-for: 1000
 // This is now collapsed so there shouldn't be the "open" attribute on details.
-assert-attribute-false: ("#main > details.top-doc", {"open": ""})
+assert-attribute-false: ("#main-content > details.top-doc", {"open": ""})
 click: "#toggle-all-docs"
 wait-for: 1000
 // Not collapsed anymore so the "open" attribute should be back.
-assert-attribute: ("#main > details.top-doc", {"open": ""})
+assert-attribute: ("#main-content > details.top-doc", {"open": ""})
diff --git a/src/test/rustdoc-gui/type-declation-overflow.goml b/src/test/rustdoc-gui/type-declation-overflow.goml
index 63ab867fb17..bb24d0ce792 100644
--- a/src/test/rustdoc-gui/type-declation-overflow.goml
+++ b/src/test/rustdoc-gui/type-declation-overflow.goml
@@ -11,7 +11,7 @@ assert-property: (".item-decl pre", {"scrollWidth": "1324"})
 goto: file://|DOC_PATH|/lib2/too_long/type.ReallyLongTypeNameLongLongLong.html
 assert-property: ("body", {"scrollWidth": "1100"})
 // We now check that the section width hasn't grown because of it.
-assert-property: ("#main", {"scrollWidth": "840"})
+assert-property: ("#main-content", {"scrollWidth": "840"})
 // And now checking that it has scrollable content.
 assert-property: (".item-decl pre", {"scrollWidth": "1103"})
 
@@ -20,6 +20,6 @@ assert-property: (".item-decl pre", {"scrollWidth": "1103"})
 goto: file://|DOC_PATH|/lib2/too_long/constant.ReallyLongTypeNameLongLongLongConstBecauseWhyNotAConstRightGigaGigaSupraLong.html
 assert-property: ("body", {"scrollWidth": "1100"})
 // We now check that the section width hasn't grown because of it.
-assert-property: ("#main", {"scrollWidth": "840"})
+assert-property: ("#main-content", {"scrollWidth": "840"})
 // And now checking that it has scrollable content.
 assert-property: (".item-decl pre", {"scrollWidth": "950"})
diff --git a/src/test/rustdoc/doc-cfg.rs b/src/test/rustdoc/doc-cfg.rs
index 8b2b7870c25..9465c8a35c8 100644
--- a/src/test/rustdoc/doc-cfg.rs
+++ b/src/test/rustdoc/doc-cfg.rs
@@ -2,7 +2,7 @@
 #![feature(target_feature, cfg_target_feature)]
 
 // @has doc_cfg/struct.Portable.html
-// @!has - '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' ''
+// @!has - '//*[@id="main-content"]/*[@class="item-info"]/*[@class="stab portability"]' ''
 // @has - '//*[@id="method.unix_and_arm_only_function"]' 'fn unix_and_arm_only_function()'
 // @has - '//*[@class="stab portability"]' 'This is supported on Unix and ARM only.'
 // @has - '//*[@id="method.wasi_and_wasm32_only_function"]' 'fn wasi_and_wasm32_only_function()'
@@ -10,14 +10,14 @@
 pub struct Portable;
 
 // @has doc_cfg/unix_only/index.html \
-//  '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
+//  '//*[@id="main-content"]/*[@class="item-info"]/*[@class="stab portability"]' \
 //  'This is supported on Unix only.'
 // @matches - '//*[@class="item-left module-item"]//*[@class="stab portability"]' '\AARM\Z'
 // @count - '//*[@class="stab portability"]' 2
 #[doc(cfg(unix))]
 pub mod unix_only {
     // @has doc_cfg/unix_only/fn.unix_only_function.html \
-    //  '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
+    //  '//*[@id="main-content"]/*[@class="item-info"]/*[@class="stab portability"]' \
     //  'This is supported on Unix only.'
     // @count - '//*[@class="stab portability"]' 1
     pub fn unix_only_function() {
@@ -25,7 +25,7 @@ pub mod unix_only {
     }
 
     // @has doc_cfg/unix_only/trait.ArmOnly.html \
-    //  '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
+    //  '//*[@id="main-content"]/*[@class="item-info"]/*[@class="stab portability"]' \
     //  'This is supported on Unix and ARM only.'
     // @count - '//*[@class="stab portability"]' 1
     #[doc(cfg(target_arch = "arm"))]
@@ -40,14 +40,14 @@ pub mod unix_only {
 }
 
 // @has doc_cfg/wasi_only/index.html \
-//  '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
+//  '//*[@id="main-content"]/*[@class="item-info"]/*[@class="stab portability"]' \
 //  'This is supported on WASI only.'
 // @matches - '//*[@class="item-left module-item"]//*[@class="stab portability"]' '\AWebAssembly\Z'
 // @count - '//*[@class="stab portability"]' 2
 #[doc(cfg(target_os = "wasi"))]
 pub mod wasi_only {
     // @has doc_cfg/wasi_only/fn.wasi_only_function.html \
-    //  '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
+    //  '//*[@id="main-content"]/*[@class="item-info"]/*[@class="stab portability"]' \
     //  'This is supported on WASI only.'
     // @count - '//*[@class="stab portability"]' 1
     pub fn wasi_only_function() {
@@ -55,7 +55,7 @@ pub mod wasi_only {
     }
 
     // @has doc_cfg/wasi_only/trait.Wasm32Only.html \
-    //  '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
+    //  '//*[@id="main-content"]/*[@class="item-info"]/*[@class="stab portability"]' \
     //  'This is supported on WASI and WebAssembly only.'
     // @count - '//*[@class="stab portability"]' 1
     #[doc(cfg(target_arch = "wasm32"))]
@@ -77,7 +77,7 @@ pub mod wasi_only {
 // @matches - '//*[@class="item-left module-item"]//*[@class="stab portability"]' '\Aavx\Z'
 
 // @has doc_cfg/fn.uses_target_feature.html
-// @has - '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
+// @has - '//*[@id="main-content"]/*[@class="item-info"]/*[@class="stab portability"]' \
 //        'This is supported with target feature avx only.'
 #[target_feature(enable = "avx")]
 pub unsafe fn uses_target_feature() {
@@ -85,7 +85,7 @@ pub unsafe fn uses_target_feature() {
 }
 
 // @has doc_cfg/fn.uses_cfg_target_feature.html
-// @has - '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
+// @has - '//*[@id="main-content"]/*[@class="item-info"]/*[@class="stab portability"]' \
 //        'This is supported with target feature avx only.'
 #[doc(cfg(target_feature = "avx"))]
 pub fn uses_cfg_target_feature() {
@@ -94,7 +94,7 @@ pub fn uses_cfg_target_feature() {
 
 // multiple attributes should be allowed
 // @has doc_cfg/fn.multiple_attrs.html \
-//  '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
+//  '//*[@id="main-content"]/*[@class="item-info"]/*[@class="stab portability"]' \
 //  'This is supported on x and y and z only.'
 #[doc(cfg(x))]
 #[doc(cfg(y), cfg(z))]
diff --git a/src/test/rustdoc/duplicate_impls/issue-33054.rs b/src/test/rustdoc/duplicate_impls/issue-33054.rs
index 7ace13fe3a6..b018dd6cda5 100644
--- a/src/test/rustdoc/duplicate_impls/issue-33054.rs
+++ b/src/test/rustdoc/duplicate_impls/issue-33054.rs
@@ -2,7 +2,7 @@
 // @has - '//h3[@class="code-header in-band"]' 'impl Foo'
 // @has - '//h3[@class="code-header in-band"]' 'impl Bar for Foo'
 // @count - '//*[@id="trait-implementations-list"]//*[@class="impl has-srclink"]' 1
-// @count - '//*[@id="main"]/details/summary/*[@class="impl has-srclink"]' 1
+// @count - '//*[@id="main-content"]/details/summary/*[@class="impl has-srclink"]' 1
 // @has issue_33054/impls/bar/trait.Bar.html
 // @has - '//h3[@class="code-header in-band"]' 'impl Bar for Foo'
 // @count - '//*[@class="struct"]' 1
diff --git a/src/test/rustdoc/impl-everywhere.rs b/src/test/rustdoc/impl-everywhere.rs
index 74281326258..44885d4301f 100644
--- a/src/test/rustdoc/impl-everywhere.rs
+++ b/src/test/rustdoc/impl-everywhere.rs
@@ -8,23 +8,23 @@ pub struct Bar;
 impl Foo for Bar {}
 impl Foo2 for Bar {}
 
-// @has foo/fn.foo.html '//section[@id="main"]//pre' "x: &'x impl Foo"
-// @has foo/fn.foo.html '//section[@id="main"]//pre' "-> &'x impl Foo"
+// @has foo/fn.foo.html '//section[@id="main-content"]//pre' "x: &'x impl Foo"
+// @has foo/fn.foo.html '//section[@id="main-content"]//pre' "-> &'x impl Foo"
 pub fn foo<'x>(x: &'x impl Foo) -> &'x impl Foo {
     x
 }
 
-// @has foo/fn.foo2.html '//section[@id="main"]//pre' "x: &'x impl Foo"
-// @has foo/fn.foo2.html '//section[@id="main"]//pre' '-> impl Foo2'
+// @has foo/fn.foo2.html '//section[@id="main-content"]//pre' "x: &'x impl Foo"
+// @has foo/fn.foo2.html '//section[@id="main-content"]//pre' '-> impl Foo2'
 pub fn foo2<'x>(_x: &'x impl Foo) -> impl Foo2 {
     Bar
 }
 
-// @has foo/fn.foo_foo.html '//section[@id="main"]//pre' '-> impl Foo + Foo2'
+// @has foo/fn.foo_foo.html '//section[@id="main-content"]//pre' '-> impl Foo + Foo2'
 pub fn foo_foo() -> impl Foo + Foo2 {
     Bar
 }
 
-// @has foo/fn.foo_foo_foo.html '//section[@id="main"]//pre' "x: &'x impl Foo + Foo2"
+// @has foo/fn.foo_foo_foo.html '//section[@id="main-content"]//pre' "x: &'x impl Foo + Foo2"
 pub fn foo_foo_foo<'x>(_x: &'x (impl Foo + Foo2)) {
 }
diff --git a/src/test/rustdoc/intra-doc/prim-methods-external-core.rs b/src/test/rustdoc/intra-doc/prim-methods-external-core.rs
index 47ac953f266..c3340af33d5 100644
--- a/src/test/rustdoc/intra-doc/prim-methods-external-core.rs
+++ b/src/test/rustdoc/intra-doc/prim-methods-external-core.rs
@@ -9,8 +9,8 @@
 #![crate_type = "rlib"]
 
 // @has prim_methods_external_core/index.html
-// @has - '//*[@id="main"]//a[@href="../my_core/primitive.char.html"]' 'char'
-// @has - '//*[@id="main"]//a[@href="../my_core/primitive.char.html#method.len_utf8"]' 'char::len_utf8'
+// @has - '//*[@id="main-content"]//a[@href="../my_core/primitive.char.html"]' 'char'
+// @has - '//*[@id="main-content"]//a[@href="../my_core/primitive.char.html#method.len_utf8"]' 'char::len_utf8'
 
 //! A [`char`] and its [`char::len_utf8`].
 
diff --git a/src/test/rustdoc/intra-doc/prim-methods-local.rs b/src/test/rustdoc/intra-doc/prim-methods-local.rs
index 266bfa20731..fd0b1b97c6e 100644
--- a/src/test/rustdoc/intra-doc/prim-methods-local.rs
+++ b/src/test/rustdoc/intra-doc/prim-methods-local.rs
@@ -3,10 +3,9 @@
 #![no_core]
 #![crate_type = "rlib"]
 
-
 // @has prim_methods_local/index.html
-// @has - '//*[@id="main"]//a[@href="primitive.char.html"]' 'char'
-// @has - '//*[@id="main"]//a[@href="primitive.char.html#method.len_utf8"]' 'char::len_utf8'
+// @has - '//*[@id="main-content"]//a[@href="primitive.char.html"]' 'char'
+// @has - '//*[@id="main-content"]//a[@href="primitive.char.html#method.len_utf8"]' 'char::len_utf8'
 
 //! A [prim@`char`] and its [`char::len_utf8`].
 
diff --git a/src/test/rustdoc/intra-doc/prim-methods.rs b/src/test/rustdoc/intra-doc/prim-methods.rs
index a9c5d7d4247..a412a23fda8 100644
--- a/src/test/rustdoc/intra-doc/prim-methods.rs
+++ b/src/test/rustdoc/intra-doc/prim-methods.rs
@@ -1,8 +1,7 @@
 #![deny(rustdoc::broken_intra_doc_links)]
 
-
 // @has prim_methods/index.html
-// @has - '//*[@id="main"]//a[@href="{{channel}}/std/primitive.char.html"]' 'char'
-// @has - '//*[@id="main"]//a[@href="{{channel}}/std/primitive.char.html#method.len_utf8"]' 'char::len_utf8'
+// @has - '//*[@id="main-content"]//a[@href="{{channel}}/std/primitive.char.html"]' 'char'
+// @has - '//*[@id="main-content"]//a[@href="{{channel}}/std/primitive.char.html#method.len_utf8"]' 'char::len_utf8'
 
 //! A [`char`] and its [`char::len_utf8`].
diff --git a/src/test/rustdoc/intra-doc/true-false.rs b/src/test/rustdoc/intra-doc/true-false.rs
index be9b3e420b7..e02be9cabd2 100644
--- a/src/test/rustdoc/intra-doc/true-false.rs
+++ b/src/test/rustdoc/intra-doc/true-false.rs
@@ -1,9 +1,8 @@
 #![deny(rustdoc::broken_intra_doc_links)]
 #![crate_name = "foo"]
 
-
 // @has foo/index.html
-// @has - '//*[@id="main"]//a[@href="{{channel}}/std/primitive.bool.html"]' 'true'
-// @has - '//*[@id="main"]//a[@href="{{channel}}/std/primitive.bool.html"]' 'false'
+// @has - '//*[@id="main-content"]//a[@href="{{channel}}/std/primitive.bool.html"]' 'true'
+// @has - '//*[@id="main-content"]//a[@href="{{channel}}/std/primitive.bool.html"]' 'false'
 
 //! A `bool` is either [`true`] or [`false`].
diff --git a/src/test/rustdoc/issue-55364.rs b/src/test/rustdoc/issue-55364.rs
index 70aa10767b2..14a6f5041f2 100644
--- a/src/test/rustdoc/issue-55364.rs
+++ b/src/test/rustdoc/issue-55364.rs
@@ -2,19 +2,19 @@
 
 // @has issue_55364/subone/index.html
 // These foo/bar links in the module's documentation should refer inside `subone`
-// @has - '//section[@id="main"]/details[@open=""]/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
-// @has - '//section[@id="main"]/details[@open=""]/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
+// @has - '//section[@id="main-content"]/details[@open=""]/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
+// @has - '//section[@id="main-content"]/details[@open=""]/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
 pub mod subone {
     //! See either [foo] or [bar].
 
     // This should refer to subone's `bar`
     // @has issue_55364/subone/fn.foo.html
-    // @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
+    // @has - '//section[@id="main-content"]/details/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
     /// See [bar]
     pub fn foo() {}
     // This should refer to subone's `foo`
     // @has issue_55364/subone/fn.bar.html
-    // @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
+    // @has - '//section[@id="main-content"]/details/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
     /// See [foo]
     pub fn bar() {}
 }
@@ -23,27 +23,27 @@ pub mod subone {
 
 // @has issue_55364/subtwo/index.html
 // These foo/bar links in the module's documentation should not reference inside `subtwo`
-// @!has - '//section[@id="main"]/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
-// @!has - '//section[@id="main"]/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
+// @!has - '//section[@id="main-content"]/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
+// @!has - '//section[@id="main-content"]/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
 // Instead it should be referencing the top level functions
-// @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.foo.html"]' 'foo'
-// @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.bar.html"]' 'bar'
+// @has - '//section[@id="main-content"]/details/div[@class="docblock"]//a[@href="../fn.foo.html"]' 'foo'
+// @has - '//section[@id="main-content"]/details/div[@class="docblock"]//a[@href="../fn.bar.html"]' 'bar'
 // Though there should be such links later
-// @has - '//section[@id="main"]/div[@class="item-table"]//div[@class="item-left module-item"]/a[@class="fn"][@href="fn.foo.html"]' 'foo'
-// @has - '//section[@id="main"]/div[@class="item-table"]//div[@class="item-left module-item"]/a[@class="fn"][@href="fn.bar.html"]' 'bar'
+// @has - '//section[@id="main-content"]/div[@class="item-table"]//div[@class="item-left module-item"]/a[@class="fn"][@href="fn.foo.html"]' 'foo'
+// @has - '//section[@id="main-content"]/div[@class="item-table"]//div[@class="item-left module-item"]/a[@class="fn"][@href="fn.bar.html"]' 'bar'
 /// See either [foo] or [bar].
 pub mod subtwo {
 
     // Despite the module's docs referring to the top level foo/bar,
     // this should refer to subtwo's `bar`
     // @has issue_55364/subtwo/fn.foo.html
-    // @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
+    // @has - '//section[@id="main-content"]/details/div[@class="docblock"]//a[@href="fn.bar.html"]' 'bar'
     /// See [bar]
     pub fn foo() {}
     // Despite the module's docs referring to the top level foo/bar,
     // this should refer to subtwo's `foo`
     // @has issue_55364/subtwo/fn.bar.html
-    // @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
+    // @has - '//section[@id="main-content"]/details/div[@class="docblock"]//a[@href="fn.foo.html"]' 'foo'
     /// See [foo]
     pub fn bar() {}
 }
@@ -59,8 +59,8 @@ pub fn bar() {}
 
 // @has issue_55364/subthree/index.html
 // This module should also refer to the top level foo/bar
-// @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.foo.html"]' 'foo'
-// @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.bar.html"]' 'bar'
+// @has - '//section[@id="main-content"]/details/div[@class="docblock"]//a[@href="../fn.foo.html"]' 'foo'
+// @has - '//section[@id="main-content"]/details/div[@class="docblock"]//a[@href="../fn.bar.html"]' 'bar'
 pub mod subthree {
     //! See either [foo][super::foo] or [bar][super::bar]
 }
@@ -68,8 +68,8 @@ pub mod subthree {
 // Next we go *deeper* - In order to ensure it's not just "this or parent"
 // we test `crate::` and a `super::super::...` chain
 // @has issue_55364/subfour/subfive/subsix/subseven/subeight/index.html
-// @has - '//section[@id="main"]/div[@class="item-table"]//div[@class="item-right docblock-short"]//a[@href="../../../../../subone/fn.foo.html"]' 'other foo'
-// @has - '//section[@id="main"]/div[@class="item-table"]//div[@class="item-right docblock-short"]//a[@href="../../../../../subtwo/fn.bar.html"]' 'other bar'
+// @has - '//section[@id="main-content"]/div[@class="item-table"]//div[@class="item-right docblock-short"]//a[@href="../../../../../subone/fn.foo.html"]' 'other foo'
+// @has - '//section[@id="main-content"]/div[@class="item-table"]//div[@class="item-right docblock-short"]//a[@href="../../../../../subtwo/fn.bar.html"]' 'other bar'
 pub mod subfour {
     pub mod subfive {
         pub mod subsix {
diff --git a/src/test/rustdoc/keyword.rs b/src/test/rustdoc/keyword.rs
index 16f7cac5f51..29ceda4f7c1 100644
--- a/src/test/rustdoc/keyword.rs
+++ b/src/test/rustdoc/keyword.rs
@@ -8,7 +8,7 @@
 // @has foo/index.html '//div[@class="sidebar-elems"]//li/a/@href' '#keywords'
 // @has foo/keyword.match.html '//a[@class="keyword"]' 'match'
 // @has foo/keyword.match.html '//span[@class="in-band"]' 'Keyword match'
-// @has foo/keyword.match.html '//section[@id="main"]//div[@class="docblock"]//p' 'this is a test!'
+// @has foo/keyword.match.html '//section[@id="main-content"]//div[@class="docblock"]//p' 'this is a test!'
 // @has foo/index.html '//a/@href' '../foo/index.html'
 // @!has foo/foo/index.html
 // @!has-dir foo/foo
@@ -16,7 +16,7 @@
 /// this is a test!
 mod foo{}
 
-// @has foo/keyword.foo.html '//section[@id="main"]//div[@class="docblock"]//p' 'hello'
+// @has foo/keyword.foo.html '//section[@id="main-content"]//div[@class="docblock"]//p' 'hello'
 #[doc(keyword = "foo")]
 /// hello
 mod bar {}
diff --git a/src/test/rustdoc/struct-implementations-title.rs b/src/test/rustdoc/struct-implementations-title.rs
index 96eb11311d6..5468796f669 100644
--- a/src/test/rustdoc/struct-implementations-title.rs
+++ b/src/test/rustdoc/struct-implementations-title.rs
@@ -3,7 +3,7 @@
 pub struct Struc;
 
 // @has foo/struct.Struc.html
-// @has - '//*[@id="main"]/h2[@id="implementations"]' "Implementations"
+// @has - '//*[@id="main-content"]/h2[@id="implementations"]' "Implementations"
 impl Struc {
     pub const S: u64 = 0;
 }
diff --git a/src/test/rustdoc/trait_alias.rs b/src/test/rustdoc/trait_alias.rs
index c9fccf5a77c..dec7fe3f6a5 100644
--- a/src/test/rustdoc/trait_alias.rs
+++ b/src/test/rustdoc/trait_alias.rs
@@ -14,13 +14,13 @@ use std::fmt::Debug;
 // @has foo/index.html '//a[@class="traitalias"]' 'Foo'
 
 // @has foo/traitalias.CopyAlias.html
-// @has - '//section[@id="main"]/div[@class="docblock item-decl"]/pre' 'trait CopyAlias = Copy;'
+// @has - '//section[@id="main-content"]/div[@class="docblock item-decl"]/pre' 'trait CopyAlias = Copy;'
 pub trait CopyAlias = Copy;
 // @has foo/traitalias.Alias2.html
-// @has - '//section[@id="main"]/div[@class="docblock item-decl"]/pre' 'trait Alias2 = Copy + Debug;'
+// @has - '//section[@id="main-content"]/div[@class="docblock item-decl"]/pre' 'trait Alias2 = Copy + Debug;'
 pub trait Alias2 = Copy + Debug;
 // @has foo/traitalias.Foo.html
-// @has - '//section[@id="main"]/div[@class="docblock item-decl"]/pre' 'trait Foo<T> = Into<T> + Debug;'
+// @has - '//section[@id="main-content"]/div[@class="docblock item-decl"]/pre' 'trait Foo<T> = Into<T> + Debug;'
 pub trait Foo<T> = Into<T> + Debug;
 // @has foo/fn.bar.html '//a[@href="traitalias.Alias2.html"]' 'Alias2'
 pub fn bar<T>() where T: Alias2 {}
diff --git a/src/test/rustdoc/tuple-struct-fields-doc.rs b/src/test/rustdoc/tuple-struct-fields-doc.rs
index 139c5b4391a..2e339fe8264 100644
--- a/src/test/rustdoc/tuple-struct-fields-doc.rs
+++ b/src/test/rustdoc/tuple-struct-fields-doc.rs
@@ -4,11 +4,11 @@
 // @has - '//h2[@id="fields"]' 'Tuple Fields'
 // @has - '//h3[@class="sidebar-title"]/a[@href="#fields"]' 'Tuple Fields'
 // @has - '//*[@id="structfield.0"]' '0: u32'
-// @has - '//*[@id="main"]/div[@class="docblock"]' 'hello'
+// @has - '//*[@id="main-content"]/div[@class="docblock"]' 'hello'
 // @!has - '//*[@id="structfield.1"]'
 // @has - '//*[@id="structfield.2"]' '2: char'
 // @has - '//*[@id="structfield.3"]' '3: i8'
-// @has - '//*[@id="main"]/div[@class="docblock"]' 'not hello'
+// @has - '//*[@id="main-content"]/div[@class="docblock"]' 'not hello'
 pub struct Foo(
     /// hello
     pub u32,