From 0d156f223a3fb389f813d8fdb0b588f95b3868aa Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Fri, 30 Aug 2024 18:27:11 +0200 Subject: [PATCH] Unify scraped examples with other code examples --- src/librustdoc/html/render/mod.rs | 33 ++--- src/librustdoc/html/sources.rs | 57 ++++++--- src/librustdoc/html/static/css/noscript.css | 4 + src/librustdoc/html/static/css/rustdoc.css | 115 +++++++----------- src/librustdoc/html/static/js/main.js | 9 +- .../html/static/js/scrape-examples.js | 3 +- .../html/templates/scraped_source.html | 29 +++++ src/librustdoc/html/templates/source.html | 14 +-- 8 files changed, 134 insertions(+), 130 deletions(-) create mode 100644 src/librustdoc/html/templates/scraped_source.html diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs index 47f321a4c4a..0a18944977f 100644 --- a/src/librustdoc/html/render/mod.rs +++ b/src/librustdoc/html/render/mod.rs @@ -2445,28 +2445,6 @@ fn render_call_locations(mut w: W, cx: &mut Context<'_>, item: &c let needs_expansion = line_max - line_min > NUM_VISIBLE_LINES; let locations_encoded = serde_json::to_string(&line_ranges).unwrap(); - write!( - &mut w, - "
\ -
\ - {name} ({title})\ -
\ -
", - expanded_cls = if needs_expansion { "" } else { "expanded" }, - name = call_data.display_name, - url = init_url, - title = init_title, - // The locations are encoded as a data attribute, so they can be read - // later by the JS for interactions. - locations = Escape(&locations_encoded) - ) - .unwrap(); - - if line_ranges.len() > 1 { - w.write_str(r#" "#) - .unwrap(); - } - // Look for the example file in the source map if it exists, otherwise return a dummy span let file_span = (|| { let source_map = tcx.sess.source_map(); @@ -2497,9 +2475,16 @@ fn render_call_locations(mut w: W, cx: &mut Context<'_>, item: &c cx, &cx.root_path(), highlight::DecorationInfo(decoration_info), - sources::SourceContext::Embedded { offset: line_min, needs_expansion }, + sources::SourceContext::Embedded(sources::ScrapedInfo { + needs_prev_next_buttons: line_ranges.len() > 1, + needs_expansion, + offset: line_min, + name: &call_data.display_name, + url: init_url, + title: init_title, + locations: locations_encoded, + }), ); - w.write_str("
").unwrap(); true }; diff --git a/src/librustdoc/html/sources.rs b/src/librustdoc/html/sources.rs index 22f115f92cc..2c5fc3bf66f 100644 --- a/src/librustdoc/html/sources.rs +++ b/src/librustdoc/html/sources.rs @@ -289,9 +289,34 @@ pub(crate) fn clean_path(src_root: &Path, p: &Path, mut f: F, mut parent: } } -pub(crate) enum SourceContext { +pub(crate) struct ScrapedInfo<'a> { + pub(crate) offset: usize, + pub(crate) needs_prev_next_buttons: bool, + pub(crate) name: &'a str, + pub(crate) url: &'a str, + pub(crate) title: &'a str, + pub(crate) locations: String, + pub(crate) needs_expansion: bool, +} + +#[derive(Template)] +#[template(path = "scraped_source.html")] +struct ScrapedSource<'a, Code: std::fmt::Display> { + info: ScrapedInfo<'a>, + lines: RangeInclusive, + code_html: Code, +} + +#[derive(Template)] +#[template(path = "source.html")] +struct Source { + lines: RangeInclusive, + code_html: Code, +} + +pub(crate) enum SourceContext<'a> { Standalone, - Embedded { offset: usize, needs_expansion: bool }, + Embedded(ScrapedInfo<'a>), } /// Wrapper struct to render the source code of a file. This will do things like @@ -303,23 +328,8 @@ pub(crate) fn print_src( context: &Context<'_>, root_path: &str, decoration_info: highlight::DecorationInfo, - source_context: SourceContext, + source_context: SourceContext<'_>, ) { - #[derive(Template)] - #[template(path = "source.html")] - struct Source { - embedded: bool, - needs_expansion: bool, - lines: RangeInclusive, - code_html: Code, - } - let lines = s.lines().count(); - let (embedded, needs_expansion, lines) = match source_context { - SourceContext::Standalone => (false, false, 1..=lines), - SourceContext::Embedded { offset, needs_expansion } => { - (true, needs_expansion, (1 + offset)..=(lines + offset)) - } - }; let current_href = context .href_from_span(clean::Span::new(file_span), false) .expect("only local crates should have sources emitted"); @@ -332,5 +342,14 @@ struct Source { ); Ok(()) }); - Source { embedded, needs_expansion, lines, code_html: code }.render_into(&mut writer).unwrap(); + let lines = s.lines().count(); + match source_context { + SourceContext::Standalone => { + Source { lines: (1..=lines), code_html: code }.render_into(&mut writer).unwrap() + } + SourceContext::Embedded(info) => { + let lines = (1 + info.offset)..=(lines + info.offset); + ScrapedSource { info, lines, code_html: code }.render_into(&mut writer).unwrap(); + } + }; } diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 86e8edad703..e62b16267f1 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -59,6 +59,8 @@ nav.sub { --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); --copy-path-img-hover-filter: invert(35%); + --code-example-button-color: #7f7f7f; + --code-example-button-hover-color: #595959; --codeblock-error-hover-color: rgb(255, 0, 0); --codeblock-error-color: rgba(255, 0, 0, .5); --codeblock-ignore-hover-color: rgb(255, 142, 0); @@ -162,6 +164,8 @@ nav.sub { --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); --copy-path-img-hover-filter: invert(65%); + --code-example-button-color: #7f7f7f; + --code-example-button-hover-color: #a5a5a5; --codeblock-error-hover-color: rgb(255, 0, 0); --codeblock-error-color: rgba(255, 0, 0, .5); --codeblock-ignore-hover-color: rgb(255, 142, 0); diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 28df8d3f011..1fad3cfd41e 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -760,15 +760,30 @@ ul.block, .block li { flex-grow: 1; } -.rustdoc:not(.src) .example-wrap pre { +.scraped-example:not(.expanded) { + /* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number + * of lines shown in the un-expanded example code viewer. This pre needs to have + * a max-height equal to line-height * N. The line-height is currently 1.5em, + * and we include additional 10px for padding. */ + max-height: calc(1.5em * 5 + 10px); +} + +.rustdoc:not(.src) .scraped-example:not(.expanded) pre.src-line-numbers, +.rustdoc:not(.src) .scraped-example:not(.expanded) pre.rust { + padding-bottom: 0; + /* See above comment, should be the same max-height. */ + max-height: calc(1.5em * 5 + 10px); overflow: auto hidden; } +.rustdoc:not(.src) .example-wrap pre { + overflow: auto; +} + .rustdoc .example-wrap pre.example-line-numbers, .rustdoc .example-wrap pre.src-line-numbers { - flex-grow: 0; min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */ - overflow: initial; + flex-grow: 0; text-align: right; -webkit-user-select: none; user-select: none; @@ -776,7 +791,7 @@ ul.block, .block li { color: var(--src-line-numbers-span-color); } -.rustdoc .example-wrap pre.src-line-numbers { +.rustdoc .scraped-example pre.src-line-numbers { padding: 14px 0; } .src-line-numbers a, .src-line-numbers span { @@ -1488,17 +1503,23 @@ instead, we check that it's not a "finger" cursor. .example-wrap .button-holder.keep-visible { visibility: visible; } -.example-wrap .button-holder .copy-button, .example-wrap .test-arrow { +.example-wrap .button-holder > * { background: var(--main-background-color); cursor: pointer; border-radius: var(--button-border-radius); height: var(--copy-path-height); width: var(--copy-path-width); + border: 0; + color: var(--code-example-button-color); +} +.example-wrap .button-holder > *:hover { + color: var(--code-example-button-hover-color); +} +.example-wrap .button-holder > *:not(:first-child) { + margin-left: var(--button-left-margin); } .example-wrap .button-holder .copy-button { - margin-left: var(--button-left-margin); padding: 2px 0 0 4px; - border: 0; } .example-wrap .button-holder .copy-button::before, .example-wrap .test-arrow::before { @@ -2334,99 +2355,41 @@ in src-script.js and main.js color: var(--scrape-example-help-hover-color); } -.scraped-example { - /* So .scraped-example-title can be positioned absolutely */ - position: relative; -} - -.scraped-example .code-wrapper { - position: relative; - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; -} - -.scraped-example:not(.expanded) .code-wrapper { - /* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number - * of lines shown in the un-expanded example code viewer. This pre needs to have - * a max-height equal to line-height * N. The line-height is currently 1.5em, - * and we include additional 10px for padding. */ - max-height: calc(1.5em * 5 + 10px); -} - -.scraped-example:not(.expanded) .code-wrapper pre { - overflow-y: hidden; - padding-bottom: 0; - /* See above comment, should be the same max-height. */ - max-height: calc(1.5em * 5 + 10px); -} - -.more-scraped-examples .scraped-example:not(.expanded) .code-wrapper, -.more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre { - /* See above comment, except this height is based on HIDDEN_MAX_LINES. */ - max-height: calc(1.5em * 10 + 10px); -} - -.scraped-example .code-wrapper .next, -.scraped-example .code-wrapper .prev, -.scraped-example .code-wrapper .expand { - color: var(--main-color); - position: absolute; - top: 0.25em; - z-index: 1; - padding: 0; - background: none; - border: none; - /* iOS button gradient: https://stackoverflow.com/q/5438567 */ - -webkit-appearance: none; - opacity: 1; -} -.scraped-example .code-wrapper .prev { - right: 2.25em; -} -.scraped-example .code-wrapper .next { - right: 1.25em; -} -.scraped-example .code-wrapper .expand { - right: 0.25em; -} - -.scraped-example:not(.expanded) .code-wrapper::before, -.scraped-example:not(.expanded) .code-wrapper::after { +.scraped-example:not(.expanded)::before, +.scraped-example:not(.expanded)::after { content: " "; width: 100%; height: 5px; position: absolute; z-index: 1; } -.scraped-example:not(.expanded) .code-wrapper::before { +.scraped-example:not(.expanded)::before { top: 0; background: linear-gradient(to bottom, var(--scrape-example-code-wrapper-background-start), var(--scrape-example-code-wrapper-background-end)); } -.scraped-example:not(.expanded) .code-wrapper::after { +.scraped-example:not(.expanded)::after { bottom: 0; background: linear-gradient(to top, var(--scrape-example-code-wrapper-background-start), var(--scrape-example-code-wrapper-background-end)); } -.scraped-example .code-wrapper .example-wrap { +.scraped-example:not(.expanded) { width: 100%; overflow-y: hidden; margin-bottom: 0; } -.scraped-example:not(.expanded) .code-wrapper .example-wrap { +.scraped-example:not(.expanded) { overflow-x: hidden; } -.scraped-example .example-wrap .rust span.highlight { +.scraped-example .rust span.highlight { background: var(--scrape-example-code-line-highlight); } -.scraped-example .example-wrap .rust span.highlight.focus { +.scraped-example .rust span.highlight.focus { background: var(--scrape-example-code-line-highlight-focus); } @@ -2520,6 +2483,8 @@ by default. --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); --copy-path-img-hover-filter: invert(35%); + --code-example-button-color: #7f7f7f; + --code-example-button-hover-color: #595959; --codeblock-error-hover-color: rgb(255, 0, 0); --codeblock-error-color: rgba(255, 0, 0, .5); --codeblock-ignore-hover-color: rgb(255, 142, 0); @@ -2622,6 +2587,8 @@ by default. --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); --copy-path-img-hover-filter: invert(65%); + --code-example-button-color: #7f7f7f; + --code-example-button-hover-color: #a5a5a5; --codeblock-error-hover-color: rgb(255, 0, 0); --codeblock-error-color: rgba(255, 0, 0, .5); --codeblock-ignore-hover-color: rgb(255, 142, 0); @@ -2731,6 +2698,8 @@ Original by Dempfi (https://github.com/dempfi/ayu) --copy-path-button-color: #fff; --copy-path-img-filter: invert(70%); --copy-path-img-hover-filter: invert(100%); + --code-example-button-color: #b2b2b2; + --code-example-button-hover-color: #fff; --codeblock-error-hover-color: rgb(255, 0, 0); --codeblock-error-color: rgba(255, 0, 0, .5); --codeblock-ignore-hover-color: rgb(255, 142, 0); diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 75f2a1418cd..848ffc28653 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -1855,8 +1855,13 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm // Since the button will be added, no need to keep this listener around. elem.removeEventListener("mouseover", addCopyButton); - const parent = document.createElement("div"); - parent.className = "button-holder"; + // If this is a scrapped example, there will already be a "button-holder" element. + let parent = elem.querySelector(".button-holder"); + if (!parent) { + parent = document.createElement("div"); + parent.className = "button-holder"; + } + const runButton = elem.querySelector(".test-arrow"); if (runButton !== null) { // If there is a run button, we move it into the same div. diff --git a/src/librustdoc/html/static/js/scrape-examples.js b/src/librustdoc/html/static/js/scrape-examples.js index 7a3a9c5f340..709a774892f 100644 --- a/src/librustdoc/html/static/js/scrape-examples.js +++ b/src/librustdoc/html/static/js/scrape-examples.js @@ -24,8 +24,7 @@ const line = Math.max(0, loc[0] - 1); scrollOffset = lines.children[line].offsetTop; } else { - const wrapper = elt.querySelector(".code-wrapper"); - const halfHeight = wrapper.offsetHeight / 2; + const halfHeight = elt.offsetHeight / 2; const offsetTop = lines.children[loc[0]].offsetTop; const lastLine = lines.children[loc[1]]; const offsetBot = lastLine.offsetTop + lastLine.offsetHeight; diff --git a/src/librustdoc/html/templates/scraped_source.html b/src/librustdoc/html/templates/scraped_source.html new file mode 100644 index 00000000000..01abdd607e2 --- /dev/null +++ b/src/librustdoc/html/templates/scraped_source.html @@ -0,0 +1,29 @@ +
+ {# https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#data-nosnippet-attr + Do not show "1 2 3 4 5 ..." in web search results. #} + 
+        {% for line in lines.clone() %}
+            {# ~#}
+            {{line|safe}}
+        {% endfor %}
+
{# #} + 
 {# #}
+        
+            {{code_html|safe}}
+         {# #}
+
{# #} +
+ {{info.name +}} ({{info.title}}) {# #} +
+ {% if info.needs_prev_next_buttons || info.needs_expansion %} +
+ {% if info.needs_prev_next_buttons %} + {# #} + + {% endif %} + {% if info.needs_expansion %} + + {% endif %} +
+ {% endif %} +
{# #} diff --git a/src/librustdoc/html/templates/source.html b/src/librustdoc/html/templates/source.html index 42d01277db2..60a47f1b5de 100644 --- a/src/librustdoc/html/templates/source.html +++ b/src/librustdoc/html/templates/source.html @@ -1,21 +1,15 @@ -
{# #} +
{# https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#data-nosnippet-attr Do not show "1 2 3 4 5 ..." in web search results. #} 
         {% for line in lines.clone() %}
-            {% if embedded %}
-                {{line|safe}}
-            {%~ else %}
-                {{line|safe}}
-            {%~ endif %}
+            {# ~#}
+            {{line|safe}}
         {% endfor %}
{# #} 
 {# #}
         
-            {% if needs_expansion %}
-                
-            {% endif %}
             {{code_html|safe}}
          {# #}
{# #} -
+
{# #}