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%.

3 files changed, 68 insertions, 66 deletions

diff --git a/src/librustdoc/html/render.rs b/src/librustdoc/html/render.rs
index c5847d36146..f543568ec1f 100644
--- a/src/librustdoc/html/render.rs
+++ b/src/librustdoc/html/render.rs
@@ -3051,7 +3051,7 @@ fn item_trait(
         let item_type = m.type_();
         let id = cx.derive_id(format!("{}.{}", item_type, name));
         let ns_id = cx.derive_id(format!("{}.{}", name, item_type.name_space()));
-        write!(w, "{extra}<h3 id='{id}' class='method'><code id='{ns_id}'>",
+        write!(w, "<h3 id='{id}' class='method'>{extra}<code id='{ns_id}'>",
                extra = render_spotlight_traits(m)?,
                id = id,
                ns_id = ns_id)?;
@@ -3436,7 +3436,7 @@ fn item_union(w: &mut fmt::Formatter, cx: &Context, it: &clean::Item,
             let id = format!("{}.{}", ItemType::StructField, name);
             write!(w, "<span id=\"{id}\" class=\"{shortty} small-section-header\">\
                            <a href=\"#{id}\" class=\"anchor field\"></a>\
-                           <span class='invisible'><code>{name}: {ty}</code></span>\
+                           <code>{name}: {ty}</code>\
                        </span>",
                    id = id,
                    name = name,
@@ -3991,8 +3991,7 @@ fn render_impl(w: &mut fmt::Formatter, cx: &Context, i: &Impl, link: AssocItemLi
             None => "impl".to_string(),
         });
         if let Some(use_absolute) = use_absolute {
-            write!(w, "<h3 id='{}' class='impl'><span class='in-band'><table class='table-display'>\
-                       <tbody><tr><td><code>", id)?;
+            write!(w, "<h3 id='{}' class='impl'><code class='in-band'>", id)?;
             fmt_impl_for_trait_page(&i.inner_impl(), w, use_absolute)?;
             if show_def_docs {
                 for it in &i.inner_impl().items {
@@ -4006,22 +4005,18 @@ fn render_impl(w: &mut fmt::Formatter, cx: &Context, i: &Impl, link: AssocItemLi
             }
             write!(w, "</code>")?;
         } else {
-            write!(w, "<h3 id='{}' class='impl'><span class='in-band'><table class='table-display'>\
-                       <tbody><tr><td><code>{}</code>",
-                   id, i.inner_impl())?;
+            write!(w, "<h3 id='{}' class='impl'><code class='in-band'>{}</code>",
+                id, i.inner_impl()
+            )?;
         }
         write!(w, "<a href='#{}' class='anchor'></a>", id)?;
-        write!(w, "</td><td><span class='out-of-band'>")?;
         let since = i.impl_item.stability.as_ref().map(|s| &s.since[..]);
+        render_stability_since_raw(w, since, outer_version)?;
         if let Some(l) = (Item { item: &i.impl_item, cx: cx }).src_href() {
-            write!(w, "<div class='ghost'></div>")?;
-            render_stability_since_raw(w, since, outer_version)?;
             write!(w, "<a class='srclink' href='{}' title='{}'>[src]</a>",
                    l, "goto source code")?;
-        } else {
-            render_stability_since_raw(w, since, outer_version)?;
         }
-        write!(w, "</span></td></tr></tbody></table></span></h3>")?;
+        write!(w, "</h3>")?;
         if let Some(ref dox) = cx.shared.maybe_collapsed_doc_value(&i.impl_item) {
             let mut ids = cx.id_map.borrow_mut();
             write!(w, "<div class='docblock'>{}</div>",
@@ -4057,20 +4052,15 @@ fn render_impl(w: &mut fmt::Formatter, cx: &Context, i: &Impl, link: AssocItemLi
                     let ns_id = cx.derive_id(format!("{}.{}", name, item_type.name_space()));
                     write!(w, "<h4 id='{}' class=\"{}{}\">", id, item_type, extra_class)?;
                     write!(w, "{}", spotlight_decl(decl)?)?;
-                    write!(w, "<table id='{}' class='table-display'><tbody><tr><td><code>", ns_id)?;
+                    write!(w, "<code id='{}'>", ns_id)?;
                     render_assoc_item(w, item, link.anchor(&id), ItemType::Impl)?;
                     write!(w, "</code>")?;
+                    render_stability_since_raw(w, item.stable_since(), outer_version)?;
                     if let Some(l) = (Item { cx, item }).src_href() {
-                        write!(w, "</td><td><span class='out-of-band'>")?;
-                        write!(w, "<div class='ghost'></div>")?;
-                        render_stability_since_raw(w, item.stable_since(), outer_version)?;
-                        write!(w, "<a class='srclink' href='{}' title='{}'>[src]</a></span>",
+                        write!(w, "<a class='srclink' href='{}' title='{}'>[src]</a>",
                                l, "goto source code")?;
-                    } else {
-                        write!(w, "</td><td>")?;
-                        render_stability_since_raw(w, item.stable_since(), outer_version)?;
                     }
-                    write!(w, "</td></tr></tbody></table></h4>")?;
+                    write!(w, "</h4>")?;
                 }
             }
             clean::TypedefItem(ref tydef, _) => {
@@ -4082,40 +4072,18 @@ fn render_impl(w: &mut fmt::Formatter, cx: &Context, i: &Impl, link: AssocItemLi
                 write!(w, "</code></h4>")?;
             }
             clean::AssociatedConstItem(ref ty, ref default) => {
-                let mut version = String::new();
-
-                render_stability_since_raw(&mut version, item.stable_since(), outer_version)?;
-
                 let id = cx.derive_id(format!("{}.{}", item_type, name));
                 let ns_id = cx.derive_id(format!("{}.{}", name, item_type.name_space()));
                 write!(w, "<h4 id='{}' class=\"{}{}\">", id, item_type, extra_class)?;
-                if !version.is_empty() {
-                    write!(w, "<table id='{}' class='table-display'><tbody><tr><td><code>", ns_id)?;
-                } else {
-                    write!(w, "<code id='{}'>", ns_id)?;
-                }
+                write!(w, "<code id='{}'>", ns_id)?;
                 assoc_const(w, item, ty, default.as_ref(), link.anchor(&id))?;
-                if !version.is_empty() {
-                    write!(w, "</code>")?;
-                }
-                let src = if let Some(l) = (Item { cx, item }).src_href() {
-                    if !version.is_empty() {
-                        write!(w, "</td><td><span class='out-of-band'>")?;
-                        write!(w, "<div class='ghost'></div>{}", version)?;
-                    }
-                    format!("<a class='srclink' href='{}' title='{}'>[src]</a>",
-                            l, "goto source code")
-                } else {
-                    if !version.is_empty() {
-                        write!(w, "</td><td>{}", version)?;
-                    }
-                    String::new()
-                };
-                if version.is_empty() {
-                    write!(w, "</code>{}</h4>", src)?;
-                } else {
-                    write!(w, "{}</span></td></tr></tbody></table></h4>", src)?;
+                write!(w, "</code>")?;
+                render_stability_since_raw(w, item.stable_since(), outer_version)?;
+                if let Some(l) = (Item { cx, item }).src_href() {
+                    write!(w, "<a class='srclink' href='{}' title='{}'>[src]</a>",
+                            l, "goto source code")?;
                 }
+                write!(w, "</h4>")?;
             }
             clean::AssociatedTypeItem(ref bounds, ref default) => {
                 let id = cx.derive_id(format!("{}.{}", item_type, name));
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;
 }