Simplify foreign type rendering.

Simplified foreign type rendering by switching from tables to flexbox. Also, removed some seemingly extraneous elements like “ghost” spans.

Reduces element count on std::iter::Iterator by 30%.

2 files changed, 49 insertions, 15 deletions

diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index 02ffcf478f9..b376ab80412 100644
--- a/src/librustdoc/html/static/main.js
+++ b/src/librustdoc/html/static/main.js
@@ -2409,8 +2409,17 @@ if (!DOMTokenList.prototype.remove) {
             e.remove();
         });
         onEachLazy(main.childNodes, function(e) {
+            // Unhide the actual content once loading is complete. Headers get
+            // flex treatment for their horizontal layout, divs get block treatment
+            // for vertical layout (column-oriented flex layout for divs caused
+            // errors in mobile browsers).
             if (e.tagName === "H2" || e.tagName === "H3") {
-                e.nextElementSibling.style.display = "block";
+                let nextTagName = e.nextElementSibling.tagName;
+                if (nextTagName == "H2" || nextTagName == "H3") {
+                    e.nextElementSibling.style.display = "flex";
+                } else {
+                    e.nextElementSibling.style.display = "block";
+                }
             }
         });
     }
diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css
index 0b0acafb755..9cb7963ad00 100644
--- a/src/librustdoc/html/static/rustdoc.css
+++ b/src/librustdoc/html/static/rustdoc.css
@@ -90,8 +90,9 @@ h2, h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.t
 	border-bottom: 1px solid;
 }
 h3.impl, h3.method, h4.method, h3.type, h4.type, h4.associatedconstant {
+	flex-basis: 100%;
 	font-weight: 600;
-	margin-top: 10px;
+	margin-top: 16px;
 	margin-bottom: 10px;
 	position: relative;
 }
@@ -357,7 +358,8 @@ nav.sub {
 #main > .docblock h3, #main > .docblock h4, #main > .docblock h5 { font-size: 1em; }
 
 #main > h2 + div, #main > h2 + h3, #main > h3 + div {
-	display: none;
+	display: none; /* Changed to flex or block via js once the page is loaded */
+	flex-wrap: wrap;
 }
 
 .docblock h1 { font-size: 1em; }
@@ -391,7 +393,7 @@ h4 > code, h3 > code, .invisible > code {
 }
 
 .in-band, code {
-	z-index: 5;
+	z-index: -5;
 }
 
 .invisible {
@@ -535,6 +537,10 @@ h4 > code, h3 > code, .invisible > code {
 	margin-top: -8px;
 }
 
+.impl-items {
+	flex-basis: 100%;
+}
+
 #main > .stability {
 	margin-top: 0;
 }
@@ -781,6 +787,33 @@ body.blur > :not(#help) {
 	top: 0;
 }
 
+.impl-items .since, .impl .since {
+	flex-grow: 0;
+	padding-left: 12px;
+	padding-right: 2px;
+	position: initial;
+}
+
+.impl-items .srclink, .impl .srclink {
+	flex-grow: 0;
+	/* Override header settings otherwise it's too bold */
+	font-size: 17px;
+	font-weight: normal;
+}
+
+.impl-items code, .impl code {
+	flex-grow: 1;
+}
+
+.impl-items h4, h4.impl, h3.impl {
+	display: flex;
+	flex-basis: 100%;
+	font-size: 16px;
+	margin-bottom: 12px;
+	/* Push the src link out to the right edge consistently */
+	justify-content: space-between;
+}
+
 .variants_table {
 	width: 100%;
 }
@@ -868,15 +901,6 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
 	margin-left: 20px;
 }
 
-.ghost {
-	display: none;
-}
-
-.ghost + .since {
-	position: initial;
-	display: table-cell;
-}
-
 .since + .srclink {
 	display: table-cell;
 	padding-left: 10px;
@@ -1116,7 +1140,7 @@ span.since {
 	margin-left: 5px;
 	top: -5px;
 	left: 105%;
-	z-index: 1;
+	z-index: 10;
 }
 
 .tooltip:hover .tooltiptext {
@@ -1358,8 +1382,9 @@ h3.important {
 	margin-top: 16px;
 }
 
-.content > .methods > div.important-traits {
+.content > .methods > .method > div.important-traits {
 	position: absolute;
+	font-weight: 400;
 	left: -42px;
 	margin-top: 2px;
 }