Skip to content

Commit 0d156f2

Browse files
Unify scraped examples with other code examples
1 parent 0d63418 commit 0d156f2

File tree

8 files changed

+134
-130
lines changed

8 files changed

+134
-130
lines changed

src/librustdoc/html/render/mod.rs

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2445,28 +2445,6 @@ fn render_call_locations<W: fmt::Write>(mut w: W, cx: &mut Context<'_>, item: &c
24452445
let needs_expansion = line_max - line_min > NUM_VISIBLE_LINES;
24462446
let locations_encoded = serde_json::to_string(&line_ranges).unwrap();
24472447

2448-
write!(
2449-
&mut w,
2450-
"<div class=\"scraped-example {expanded_cls}\" data-locs=\"{locations}\">\
2451-
<div class=\"scraped-example-title\">\
2452-
{name} (<a href=\"{url}\">{title}</a>)\
2453-
</div>\
2454-
<div class=\"code-wrapper\">",
2455-
expanded_cls = if needs_expansion { "" } else { "expanded" },
2456-
name = call_data.display_name,
2457-
url = init_url,
2458-
title = init_title,
2459-
// The locations are encoded as a data attribute, so they can be read
2460-
// later by the JS for interactions.
2461-
locations = Escape(&locations_encoded)
2462-
)
2463-
.unwrap();
2464-
2465-
if line_ranges.len() > 1 {
2466-
w.write_str(r#"<button class="prev">&pr;</button> <button class="next">&sc;</button>"#)
2467-
.unwrap();
2468-
}
2469-
24702448
// Look for the example file in the source map if it exists, otherwise return a dummy span
24712449
let file_span = (|| {
24722450
let source_map = tcx.sess.source_map();
@@ -2497,9 +2475,16 @@ fn render_call_locations<W: fmt::Write>(mut w: W, cx: &mut Context<'_>, item: &c
24972475
cx,
24982476
&cx.root_path(),
24992477
highlight::DecorationInfo(decoration_info),
2500-
sources::SourceContext::Embedded { offset: line_min, needs_expansion },
2478+
sources::SourceContext::Embedded(sources::ScrapedInfo {
2479+
needs_prev_next_buttons: line_ranges.len() > 1,
2480+
needs_expansion,
2481+
offset: line_min,
2482+
name: &call_data.display_name,
2483+
url: init_url,
2484+
title: init_title,
2485+
locations: locations_encoded,
2486+
}),
25012487
);
2502-
w.write_str("</div></div>").unwrap();
25032488

25042489
true
25052490
};

src/librustdoc/html/sources.rs

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -289,9 +289,34 @@ where
289289
}
290290
}
291291

292-
pub(crate) enum SourceContext {
292+
pub(crate) struct ScrapedInfo<'a> {
293+
pub(crate) offset: usize,
294+
pub(crate) needs_prev_next_buttons: bool,
295+
pub(crate) name: &'a str,
296+
pub(crate) url: &'a str,
297+
pub(crate) title: &'a str,
298+
pub(crate) locations: String,
299+
pub(crate) needs_expansion: bool,
300+
}
301+
302+
#[derive(Template)]
303+
#[template(path = "scraped_source.html")]
304+
struct ScrapedSource<'a, Code: std::fmt::Display> {
305+
info: ScrapedInfo<'a>,
306+
lines: RangeInclusive<usize>,
307+
code_html: Code,
308+
}
309+
310+
#[derive(Template)]
311+
#[template(path = "source.html")]
312+
struct Source<Code: std::fmt::Display> {
313+
lines: RangeInclusive<usize>,
314+
code_html: Code,
315+
}
316+
317+
pub(crate) enum SourceContext<'a> {
293318
Standalone,
294-
Embedded { offset: usize, needs_expansion: bool },
319+
Embedded(ScrapedInfo<'a>),
295320
}
296321

297322
/// Wrapper struct to render the source code of a file. This will do things like
@@ -303,23 +328,8 @@ pub(crate) fn print_src(
303328
context: &Context<'_>,
304329
root_path: &str,
305330
decoration_info: highlight::DecorationInfo,
306-
source_context: SourceContext,
331+
source_context: SourceContext<'_>,
307332
) {
308-
#[derive(Template)]
309-
#[template(path = "source.html")]
310-
struct Source<Code: std::fmt::Display> {
311-
embedded: bool,
312-
needs_expansion: bool,
313-
lines: RangeInclusive<usize>,
314-
code_html: Code,
315-
}
316-
let lines = s.lines().count();
317-
let (embedded, needs_expansion, lines) = match source_context {
318-
SourceContext::Standalone => (false, false, 1..=lines),
319-
SourceContext::Embedded { offset, needs_expansion } => {
320-
(true, needs_expansion, (1 + offset)..=(lines + offset))
321-
}
322-
};
323333
let current_href = context
324334
.href_from_span(clean::Span::new(file_span), false)
325335
.expect("only local crates should have sources emitted");
@@ -332,5 +342,14 @@ pub(crate) fn print_src(
332342
);
333343
Ok(())
334344
});
335-
Source { embedded, needs_expansion, lines, code_html: code }.render_into(&mut writer).unwrap();
345+
let lines = s.lines().count();
346+
match source_context {
347+
SourceContext::Standalone => {
348+
Source { lines: (1..=lines), code_html: code }.render_into(&mut writer).unwrap()
349+
}
350+
SourceContext::Embedded(info) => {
351+
let lines = (1 + info.offset)..=(lines + info.offset);
352+
ScrapedSource { info, lines, code_html: code }.render_into(&mut writer).unwrap();
353+
}
354+
};
336355
}

src/librustdoc/html/static/css/noscript.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ nav.sub {
5959
--copy-path-button-color: #999;
6060
--copy-path-img-filter: invert(50%);
6161
--copy-path-img-hover-filter: invert(35%);
62+
--code-example-button-color: #7f7f7f;
63+
--code-example-button-hover-color: #595959;
6264
--codeblock-error-hover-color: rgb(255, 0, 0);
6365
--codeblock-error-color: rgba(255, 0, 0, .5);
6466
--codeblock-ignore-hover-color: rgb(255, 142, 0);
@@ -162,6 +164,8 @@ nav.sub {
162164
--copy-path-button-color: #999;
163165
--copy-path-img-filter: invert(50%);
164166
--copy-path-img-hover-filter: invert(65%);
167+
--code-example-button-color: #7f7f7f;
168+
--code-example-button-hover-color: #a5a5a5;
165169
--codeblock-error-hover-color: rgb(255, 0, 0);
166170
--codeblock-error-color: rgba(255, 0, 0, .5);
167171
--codeblock-ignore-hover-color: rgb(255, 142, 0);

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

Lines changed: 42 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -760,23 +760,38 @@ ul.block, .block li {
760760
flex-grow: 1;
761761
}
762762

763-
.rustdoc:not(.src) .example-wrap pre {
763+
.scraped-example:not(.expanded) {
764+
/* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number
765+
* of lines shown in the un-expanded example code viewer. This pre needs to have
766+
* a max-height equal to line-height * N. The line-height is currently 1.5em,
767+
* and we include additional 10px for padding. */
768+
max-height: calc(1.5em * 5 + 10px);
769+
}
770+
771+
.rustdoc:not(.src) .scraped-example:not(.expanded) pre.src-line-numbers,
772+
.rustdoc:not(.src) .scraped-example:not(.expanded) pre.rust {
773+
padding-bottom: 0;
774+
/* See above comment, should be the same max-height. */
775+
max-height: calc(1.5em * 5 + 10px);
764776
overflow: auto hidden;
765777
}
766778

779+
.rustdoc:not(.src) .example-wrap pre {
780+
overflow: auto;
781+
}
782+
767783
.rustdoc .example-wrap pre.example-line-numbers,
768784
.rustdoc .example-wrap pre.src-line-numbers {
769-
flex-grow: 0;
770785
min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */
771-
overflow: initial;
786+
flex-grow: 0;
772787
text-align: right;
773788
-webkit-user-select: none;
774789
user-select: none;
775790
padding: 14px 8px;
776791
color: var(--src-line-numbers-span-color);
777792
}
778793

779-
.rustdoc .example-wrap pre.src-line-numbers {
794+
.rustdoc .scraped-example pre.src-line-numbers {
780795
padding: 14px 0;
781796
}
782797
.src-line-numbers a, .src-line-numbers span {
@@ -1488,17 +1503,23 @@ instead, we check that it's not a "finger" cursor.
14881503
.example-wrap .button-holder.keep-visible {
14891504
visibility: visible;
14901505
}
1491-
.example-wrap .button-holder .copy-button, .example-wrap .test-arrow {
1506+
.example-wrap .button-holder > * {
14921507
background: var(--main-background-color);
14931508
cursor: pointer;
14941509
border-radius: var(--button-border-radius);
14951510
height: var(--copy-path-height);
14961511
width: var(--copy-path-width);
1512+
border: 0;
1513+
color: var(--code-example-button-color);
14971514
}
1498-
.example-wrap .button-holder .copy-button {
1515+
.example-wrap .button-holder > *:hover {
1516+
color: var(--code-example-button-hover-color);
1517+
}
1518+
.example-wrap .button-holder > *:not(:first-child) {
14991519
margin-left: var(--button-left-margin);
1520+
}
1521+
.example-wrap .button-holder .copy-button {
15001522
padding: 2px 0 0 4px;
1501-
border: 0;
15021523
}
15031524
.example-wrap .button-holder .copy-button::before,
15041525
.example-wrap .test-arrow::before {
@@ -2334,99 +2355,41 @@ in src-script.js and main.js
23342355
color: var(--scrape-example-help-hover-color);
23352356
}
23362357

2337-
.scraped-example {
2338-
/* So .scraped-example-title can be positioned absolutely */
2339-
position: relative;
2340-
}
2341-
2342-
.scraped-example .code-wrapper {
2343-
position: relative;
2344-
display: flex;
2345-
flex-direction: row;
2346-
flex-wrap: wrap;
2347-
width: 100%;
2348-
}
2349-
2350-
.scraped-example:not(.expanded) .code-wrapper {
2351-
/* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number
2352-
* of lines shown in the un-expanded example code viewer. This pre needs to have
2353-
* a max-height equal to line-height * N. The line-height is currently 1.5em,
2354-
* and we include additional 10px for padding. */
2355-
max-height: calc(1.5em * 5 + 10px);
2356-
}
2357-
2358-
.scraped-example:not(.expanded) .code-wrapper pre {
2359-
overflow-y: hidden;
2360-
padding-bottom: 0;
2361-
/* See above comment, should be the same max-height. */
2362-
max-height: calc(1.5em * 5 + 10px);
2363-
}
2364-
2365-
.more-scraped-examples .scraped-example:not(.expanded) .code-wrapper,
2366-
.more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre {
2367-
/* See above comment, except this height is based on HIDDEN_MAX_LINES. */
2368-
max-height: calc(1.5em * 10 + 10px);
2369-
}
2370-
2371-
.scraped-example .code-wrapper .next,
2372-
.scraped-example .code-wrapper .prev,
2373-
.scraped-example .code-wrapper .expand {
2374-
color: var(--main-color);
2375-
position: absolute;
2376-
top: 0.25em;
2377-
z-index: 1;
2378-
padding: 0;
2379-
background: none;
2380-
border: none;
2381-
/* iOS button gradient: https://stackoverflow.com/q/5438567 */
2382-
-webkit-appearance: none;
2383-
opacity: 1;
2384-
}
2385-
.scraped-example .code-wrapper .prev {
2386-
right: 2.25em;
2387-
}
2388-
.scraped-example .code-wrapper .next {
2389-
right: 1.25em;
2390-
}
2391-
.scraped-example .code-wrapper .expand {
2392-
right: 0.25em;
2393-
}
2394-
2395-
.scraped-example:not(.expanded) .code-wrapper::before,
2396-
.scraped-example:not(.expanded) .code-wrapper::after {
2358+
.scraped-example:not(.expanded)::before,
2359+
.scraped-example:not(.expanded)::after {
23972360
content: " ";
23982361
width: 100%;
23992362
height: 5px;
24002363
position: absolute;
24012364
z-index: 1;
24022365
}
2403-
.scraped-example:not(.expanded) .code-wrapper::before {
2366+
.scraped-example:not(.expanded)::before {
24042367
top: 0;
24052368
background: linear-gradient(to bottom,
24062369
var(--scrape-example-code-wrapper-background-start),
24072370
var(--scrape-example-code-wrapper-background-end));
24082371
}
2409-
.scraped-example:not(.expanded) .code-wrapper::after {
2372+
.scraped-example:not(.expanded)::after {
24102373
bottom: 0;
24112374
background: linear-gradient(to top,
24122375
var(--scrape-example-code-wrapper-background-start),
24132376
var(--scrape-example-code-wrapper-background-end));
24142377
}
24152378

2416-
.scraped-example .code-wrapper .example-wrap {
2379+
.scraped-example:not(.expanded) {
24172380
width: 100%;
24182381
overflow-y: hidden;
24192382
margin-bottom: 0;
24202383
}
24212384

2422-
.scraped-example:not(.expanded) .code-wrapper .example-wrap {
2385+
.scraped-example:not(.expanded) {
24232386
overflow-x: hidden;
24242387
}
24252388

2426-
.scraped-example .example-wrap .rust span.highlight {
2389+
.scraped-example .rust span.highlight {
24272390
background: var(--scrape-example-code-line-highlight);
24282391
}
2429-
.scraped-example .example-wrap .rust span.highlight.focus {
2392+
.scraped-example .rust span.highlight.focus {
24302393
background: var(--scrape-example-code-line-highlight-focus);
24312394
}
24322395

@@ -2520,6 +2483,8 @@ by default.
25202483
--copy-path-button-color: #999;
25212484
--copy-path-img-filter: invert(50%);
25222485
--copy-path-img-hover-filter: invert(35%);
2486+
--code-example-button-color: #7f7f7f;
2487+
--code-example-button-hover-color: #595959;
25232488
--codeblock-error-hover-color: rgb(255, 0, 0);
25242489
--codeblock-error-color: rgba(255, 0, 0, .5);
25252490
--codeblock-ignore-hover-color: rgb(255, 142, 0);
@@ -2622,6 +2587,8 @@ by default.
26222587
--copy-path-button-color: #999;
26232588
--copy-path-img-filter: invert(50%);
26242589
--copy-path-img-hover-filter: invert(65%);
2590+
--code-example-button-color: #7f7f7f;
2591+
--code-example-button-hover-color: #a5a5a5;
26252592
--codeblock-error-hover-color: rgb(255, 0, 0);
26262593
--codeblock-error-color: rgba(255, 0, 0, .5);
26272594
--codeblock-ignore-hover-color: rgb(255, 142, 0);
@@ -2731,6 +2698,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
27312698
--copy-path-button-color: #fff;
27322699
--copy-path-img-filter: invert(70%);
27332700
--copy-path-img-hover-filter: invert(100%);
2701+
--code-example-button-color: #b2b2b2;
2702+
--code-example-button-hover-color: #fff;
27342703
--codeblock-error-hover-color: rgb(255, 0, 0);
27352704
--codeblock-error-color: rgba(255, 0, 0, .5);
27362705
--codeblock-ignore-hover-color: rgb(255, 142, 0);

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1855,8 +1855,13 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
18551855
// Since the button will be added, no need to keep this listener around.
18561856
elem.removeEventListener("mouseover", addCopyButton);
18571857

1858-
const parent = document.createElement("div");
1859-
parent.className = "button-holder";
1858+
// If this is a scrapped example, there will already be a "button-holder" element.
1859+
let parent = elem.querySelector(".button-holder");
1860+
if (!parent) {
1861+
parent = document.createElement("div");
1862+
parent.className = "button-holder";
1863+
}
1864+
18601865
const runButton = elem.querySelector(".test-arrow");
18611866
if (runButton !== null) {
18621867
// If there is a run button, we move it into the same div.

src/librustdoc/html/static/js/scrape-examples.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@
2424
const line = Math.max(0, loc[0] - 1);
2525
scrollOffset = lines.children[line].offsetTop;
2626
} else {
27-
const wrapper = elt.querySelector(".code-wrapper");
28-
const halfHeight = wrapper.offsetHeight / 2;
27+
const halfHeight = elt.offsetHeight / 2;
2928
const offsetTop = lines.children[loc[0]].offsetTop;
3029
const lastLine = lines.children[loc[1]];
3130
const offsetBot = lastLine.offsetTop + lastLine.offsetHeight;

0 commit comments

Comments
 (0)