From 95298fb7a8ecac72af0b84ca91149e106da71697 Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Fri, 21 May 2021 10:33:56 -0700 Subject: [PATCH 1/4] Make invisible closed toggles that haven't been used. This reduces clutter on the page, while still supporting the "auto hide X" settings and the "collapse all docs" button. --- src/librustdoc/html/static/main.js | 6 ++++++ src/librustdoc/html/static/rustdoc.css | 12 +++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js index 1a15a444a701a..ea0ab82e5eb98 100644 --- a/src/librustdoc/html/static/main.js +++ b/src/librustdoc/html/static/main.js @@ -862,6 +862,12 @@ function hideThemeButtonState() { displayHelp(true, ev); }); + onEachLazy(document.getElementsByTagName("summary"), function(el) { + el.addEventListener("click", function(ev) { + addClass(el, "used"); + }); + }) + onEachLazy(document.getElementsByTagName("a"), function(el) { // For clicks on internal links ( tags with a hash property), we expand the section we're // jumping to *before* jumping there. We can't do this in onHashChange, because it changes diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index d8684641a3045..28a4ead572a42 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -1487,11 +1487,21 @@ details.rustdoc-toggle[open] > summary.hideme > span { display: none; } -details.rustdoc-toggle[open] > summary::before { +/* If a toggle has been used to open a section, we should make sure */ +/* there's a [-] so it can be closed again. But if a toggle is open */ +/* and has never been used, don't show it. This minimizes clutter on */ +/* the page while still supporting the "auto hide " settings and */ +/* the expand/collapse all functionality. */ +details.rustdoc-toggle[open] > summary.used::before { content: "[−]"; display: inline; } +details.rustdoc-toggle[open] > summary::before { + content: ""; + display: inline; +} + details.undocumented > summary::before { content: "[+] Show hidden undocumented items"; cursor: pointer; From c1cbe6b20dae31611ae5f4e84df1d179cbd92523 Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Tue, 8 Jun 2021 15:20:06 -0700 Subject: [PATCH 2/4] Remove stability marker arrow. This was originally introduced in # 51387, to solve a UI problem: in a list of collapsed methods, it was not clear whether the stability marker attached to the item above it or the one below it. That problem has now been solved in a couple of different ways: - The margin between the stability marker and the item it annotates is much smaller, indicating their relationship. - Stability markers are now collapsed along with the docblock. Also, the arrow made our CSS fragile, since it was positioned absolutely and needed to line up horizontally with the beginning of the item (or with the link icon). Aligning this with the rest of the docblock makes getting the CSS right a lot easier. --- src/librustdoc/html/static/main.js | 4 ++-- src/librustdoc/html/static/rustdoc.css | 10 +--------- src/librustdoc/html/static/themes/ayu.css | 2 -- src/librustdoc/html/static/themes/dark.css | 2 -- src/librustdoc/html/static/themes/light.css | 2 -- 5 files changed, 3 insertions(+), 17 deletions(-) diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js index ea0ab82e5eb98..a04eaa7f0b270 100644 --- a/src/librustdoc/html/static/main.js +++ b/src/librustdoc/html/static/main.js @@ -863,10 +863,10 @@ function hideThemeButtonState() { }); onEachLazy(document.getElementsByTagName("summary"), function(el) { - el.addEventListener("click", function(ev) { + el.addEventListener("click", function() { addClass(el, "used"); }); - }) + }); onEachLazy(document.getElementsByTagName("a"), function(el) { // For clicks on internal links ( tags with a hash property), we expand the section we're diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 28a4ead572a42..50fcdadf23134 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -580,7 +580,7 @@ nav.sub { .content .item-info { position: relative; - margin-left: 33px; + margin-left: 24px; /* same as .docblock */ margin-top: -13px; } @@ -588,14 +588,6 @@ nav.sub { margin-top: initial; } -.content .item-info::before { - content: '⬑'; - font-size: 25px; - position: absolute; - top: -6px; - left: -19px; -} - .content .impl-items .method, .content .impl-items > .type, .impl-items > .associatedconstant, .impl-items > .associatedtype, .content .impl-items details > summary > .type, .impl-items details > summary > .associatedconstant, diff --git a/src/librustdoc/html/static/themes/ayu.css b/src/librustdoc/html/static/themes/ayu.css index d220d8708a123..034fd3151de21 100644 --- a/src/librustdoc/html/static/themes/ayu.css +++ b/src/librustdoc/html/static/themes/ayu.css @@ -165,8 +165,6 @@ pre, .rustdoc.source .example-wrap { color: #c5c5c5; } -.content .item-info::before { color: #ccc; } - .content span.foreigntype, .content a.foreigntype { color: #ef57ff; } .content span.union, .content a.union { color: #98a01c; } .content span.constant, .content a.constant, diff --git a/src/librustdoc/html/static/themes/dark.css b/src/librustdoc/html/static/themes/dark.css index 6385a763f2ef7..752ec81fcee27 100644 --- a/src/librustdoc/html/static/themes/dark.css +++ b/src/librustdoc/html/static/themes/dark.css @@ -138,8 +138,6 @@ a.result-static:focus { background-color: #0063cc; } a.result-primitive:focus { background-color: #00708a; } a.result-keyword:focus { background-color: #884719; } -.content .item-info::before { color: #ccc; } - .content span.enum, .content a.enum, .block a.current.enum { color: #82b089; } .content span.struct, .content a.struct, .block a.current.struct { color: #2dbfb8; } .content span.type, .content a.type, .block a.current.type { color: #ff7f00; } diff --git a/src/librustdoc/html/static/themes/light.css b/src/librustdoc/html/static/themes/light.css index c19d5bfc317f7..6ac824dd76c05 100644 --- a/src/librustdoc/html/static/themes/light.css +++ b/src/librustdoc/html/static/themes/light.css @@ -136,8 +136,6 @@ a.result-static:focus { background-color: #c3e0ff; } a.result-primitive:focus { background-color: #9aecff; } a.result-keyword:focus { background-color: #f99650; } -.content .item-info::before { color: #ccc; } - .content span.enum, .content a.enum, .block a.current.enum { color: #508157; } .content span.struct, .content a.struct, .block a.current.struct { color: #ad448e; } .content span.type, .content a.type, .block a.current.type { color: #ba5d00; } From 4f46baf0abfdf37cc20e03729c00088ff31f5d81 Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Sun, 13 Jun 2021 15:22:52 -0700 Subject: [PATCH 3/4] Improve visual separation of methods. When methods are toggled open, add a border-top, some background highlighting, and tweak the spacing. Also remove the `pub fn` in front of the method name. --- src/librustdoc/html/render/mod.rs | 3 +- src/librustdoc/html/static/main.js | 2 ++ src/librustdoc/html/static/rustdoc.css | 31 +++++++-------------- src/librustdoc/html/static/themes/dark.css | 7 ++++- src/librustdoc/html/static/themes/light.css | 7 ++++- 5 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs index 2e940a31c2aff..e3377a6ec5662 100644 --- a/src/librustdoc/html/render/mod.rs +++ b/src/librustdoc/html/render/mod.rs @@ -918,10 +918,9 @@ fn render_assoc_item( w.reserve(header_len + "{".len() + "".len()); write!( w, - "{}{}{}{}{}{}{}fn {name}\ + "{}{}{}{}{}{}{name}\ {generics}{decl}{notable_traits}{where_clause}", indent_str, - vis, constness, asyncness, unsafety, diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js index a04eaa7f0b270..97d23162ab030 100644 --- a/src/librustdoc/html/static/main.js +++ b/src/librustdoc/html/static/main.js @@ -386,6 +386,7 @@ function hideThemeButtonState() { while (elem) { if (elem.tagName === "DETAILS") { elem.open = true; + addClass(elem, "used"); } elem = elem.parentNode; } @@ -865,6 +866,7 @@ function hideThemeButtonState() { onEachLazy(document.getElementsByTagName("summary"), function(el) { el.addEventListener("click", function() { addClass(el, "used"); + addClass(el.parentElement, "used"); }); }); diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 50fcdadf23134..1785438273aa6 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -146,13 +146,6 @@ h2, h3, h4 { margin-bottom: 10px; position: relative; } -.impl, .method.trait-impl, -.type.trait-impl, -.associatedconstant.trait-impl, -.associatedtype.trait-impl { - padding-left: 15px; -} - div.impl-items > div { padding-left: 0; } @@ -581,20 +574,12 @@ nav.sub { .content .item-info { position: relative; margin-left: 24px; /* same as .docblock */ - margin-top: -13px; } .sub-variant > div > .item-info { margin-top: initial; } -.content .impl-items .method, .content .impl-items > .type, .impl-items > .associatedconstant, -.impl-items > .associatedtype, .content .impl-items details > summary > .type, -.impl-items details > summary > .associatedconstant, -.impl-items details > summary > .associatedtype { - margin-left: 20px; -} - .content .impl-items .docblock, .content .impl-items .item-info { margin-bottom: .6em; } @@ -919,7 +904,6 @@ body.blur > :not(#help) { 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; } @@ -1450,16 +1434,20 @@ details.rustdoc-toggle > summary.hideme::before { position: relative; } +details.rustdoc-toggle[open].used > summary:not(.hideme)::before, details.rustdoc-toggle > summary:not(.hideme)::before { position: absolute; left: -23px; top: 3px; } -.impl-items > details.rustdoc-toggle > summary:not(.hideme)::before, -.undocumented > details.rustdoc-toggle > summary:not(.hideme)::before { - position: absolute; - left: -2px; +details.rustdoc-toggle[open] { + margin-left: 0px; +} + +.impl-items .method { + padding: 2px 6px; + margin-bottom: 6px; } /* When a "hideme" summary is open and the "Expand description" or "Show @@ -1473,6 +1461,7 @@ details.rustdoc-toggle[open] > summary.hideme { details.rustdoc-toggle, details.undocumented { position: relative; + margin: 12px 0px; } details.rustdoc-toggle[open] > summary.hideme > span { @@ -1484,7 +1473,7 @@ details.rustdoc-toggle[open] > summary.hideme > span { /* and has never been used, don't show it. This minimizes clutter on */ /* the page while still supporting the "auto hide " settings and */ /* the expand/collapse all functionality. */ -details.rustdoc-toggle[open] > summary.used::before { +details.rustdoc-toggle[open].used > summary::before { content: "[−]"; display: inline; } diff --git a/src/librustdoc/html/static/themes/dark.css b/src/librustdoc/html/static/themes/dark.css index 752ec81fcee27..d13ce902e3a71 100644 --- a/src/librustdoc/html/static/themes/dark.css +++ b/src/librustdoc/html/static/themes/dark.css @@ -28,6 +28,11 @@ pre, .rustdoc.source .example-wrap { background-color: #2A2A2A; } +details.method-toggle[open] .method { + background-color: #2A2A2A; + border-top: 2px solid #bb7410; +} + .sidebar { background-color: #505050; } @@ -280,7 +285,7 @@ a.test-arrow:hover{ color: #999; } -:target > code, :target > .in-band { +:target, :target > .in-band { background-color: #494a3d; border-right: 3px solid #bb7410; } diff --git a/src/librustdoc/html/static/themes/light.css b/src/librustdoc/html/static/themes/light.css index 6ac824dd76c05..b5c5377973e88 100644 --- a/src/librustdoc/html/static/themes/light.css +++ b/src/librustdoc/html/static/themes/light.css @@ -30,6 +30,11 @@ pre, .rustdoc.source .example-wrap { background-color: #F5F5F5; } +details.method-toggle[open] .method { + background-color: #F5F5F5; + border-top: 2px solid #ffb44c; +} + .sidebar { background-color: #F1F1F1; } @@ -273,7 +278,7 @@ a.test-arrow:hover{ color: #999; } -:target > code, :target > .in-band { +:target, :target > .in-band { background: #FDFFD3; border-right: 3px solid #ffb44c; } From 9c4cd9e4f9b731aac6c581ef9e914e11d33d9459 Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Sat, 19 Jun 2021 19:11:38 -0700 Subject: [PATCH 4/4] Tweaks from feedback Give same highlighting to closed blocks. Smaller font size and weight for fn qualifiers, and same for `where` clauses. Use a darker highlight for the part of the bar directly over the function name. --- src/librustdoc/html/render/mod.rs | 3 ++- src/librustdoc/html/static/rustdoc.css | 13 +++++++++++++ src/librustdoc/html/static/themes/dark.css | 7 +++++-- src/librustdoc/html/static/themes/light.css | 7 +++++-- 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs index e3377a6ec5662..7985de9a8c16f 100644 --- a/src/librustdoc/html/render/mod.rs +++ b/src/librustdoc/html/render/mod.rs @@ -918,9 +918,10 @@ fn render_assoc_item( w.reserve(header_len + "{".len() + "".len()); write!( w, - "{}{}{}{}{}{}{name}\ + "{}{}{}{}{}{}{}fn {name}\ {generics}{decl}{notable_traits}{where_clause}", indent_str, + vis, constness, asyncness, unsafety, diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 1785438273aa6..b1a28e0f70e83 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -146,6 +146,12 @@ h2, h3, h4 { margin-bottom: 10px; position: relative; } + +.fnqualifiers { + font-weight: 400; + font-size: 0.8em; /* match with "where" clauses */ +} + div.impl-items > div { padding-left: 0; } @@ -546,6 +552,7 @@ nav.sub { .content .where.fmt-newline { display: block; font-size: 0.8em; + font-weight: 400; } .content .methods > div:not(.notable-traits):not(.method) { @@ -1450,6 +1457,12 @@ details.rustdoc-toggle[open] { margin-bottom: 6px; } +.fnname { + border-top-width: 2px; + border-top-style: solid; + padding-top: 3px; +} + /* When a "hideme" summary is open and the "Expand description" or "Show methods" text is hidden, we want the [-] toggle that remains to not affect the layout of the items to its right. To do that, we use diff --git a/src/librustdoc/html/static/themes/dark.css b/src/librustdoc/html/static/themes/dark.css index d13ce902e3a71..c53a255d39bfa 100644 --- a/src/librustdoc/html/static/themes/dark.css +++ b/src/librustdoc/html/static/themes/dark.css @@ -28,7 +28,7 @@ pre, .rustdoc.source .example-wrap { background-color: #2A2A2A; } -details.method-toggle[open] .method { +details.method-toggle .method { background-color: #2A2A2A; border-top: 2px solid #bb7410; } @@ -161,7 +161,10 @@ a.result-keyword:focus { background-color: #884719; } .content span.fn, .content a.fn, .block a.current.fn, .content span.method, .content a.method, .block a.current.method, .content span.tymethod, .content a.tymethod, .block a.current.tymethod, -.content .fnname{ color: #2BAB63; } +.content .fnname{ + color: #2BAB63; + border-color: #2BAB63; +} .content span.keyword, .content a.keyword, .block a.current.keyword { color: #de5249; } pre.rust .comment { color: #8d8d8b; } diff --git a/src/librustdoc/html/static/themes/light.css b/src/librustdoc/html/static/themes/light.css index b5c5377973e88..5480887735e9d 100644 --- a/src/librustdoc/html/static/themes/light.css +++ b/src/librustdoc/html/static/themes/light.css @@ -30,7 +30,7 @@ pre, .rustdoc.source .example-wrap { background-color: #F5F5F5; } -details.method-toggle[open] .method { +details.method-toggle .method { background-color: #F5F5F5; border-top: 2px solid #ffb44c; } @@ -159,7 +159,10 @@ a.result-keyword:focus { background-color: #f99650; } .content span.fn, .content a.fn, .block a.current.fn, .content span.method, .content a.method, .block a.current.method, .content span.tymethod, .content a.tymethod, .block a.current.tymethod, -.content .fnname { color: #9a6e31; } +.content .fnname { + color: #9a6e31; + border-color: #9a6e31; +} .content span.keyword, .content a.keyword, .block a.current.keyword { color: #de5249; } pre.rust .comment { color: #8E908C; }