mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify CSS but wrapping scraped example into a div and move the title out of the code block

Browse Source
This commit is contained in:
Guillaume Gomez 2024-09-02 15:59:00 +02:00
parent 01d8235ae1
commit e3af6dc239
8 changed files with 93 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/librustdoc/html/static/css/rustdoc.css
View File

@ -34,7 +34,6 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
</g></svg>');
--button-left-margin: 4px;
--button-border-radius: 2px;
--pre-line-height: 1.5rem;
}
/* See FiraSans-LICENSE.txt for the Fira Sans license. */
@ -366,7 +365,7 @@ code, pre, .code-header {
}
pre {
padding: 14px;
line-height: var(--pre-line-height); /* https://github.com/rust-lang/rust/issues/105906 */
line-height: 1.5; /* https://github.com/rust-lang/rust/issues/105906 */
}
pre.item-decl {
overflow-x: auto;
@ -379,7 +378,7 @@ pre.item-decl {
.src .content pre {
padding: 20px;
}
.rustdoc.src .example-wrap pre.src-line-numbers {
.rustdoc.src .example-wrap .src-line-numbers {
padding: 20px 0 20px 4px;
}
@ -766,6 +765,10 @@ both the code example and the line numbers, so we need to remove the radius in t
border-bottom-left-radius: 0;
}
.rustdoc .scraped-example {
position: relative;
}
/* For the last child of a div, the margin will be taken care of
by the margin-top of the next item. */
.rustdoc .example-wrap:last-child {
@ -777,7 +780,7 @@ both the code example and the line numbers, so we need to remove the radius in t
flex-grow: 1;
}
.scraped-example:not(.expanded) {
.scraped-example:not(.expanded) .example-wrap {
/* 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,
@ -785,11 +788,10 @@ both the code example and the line numbers, so we need to remove the radius in t
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) .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;
}
@ -798,7 +800,7 @@ both the code example and the line numbers, so we need to remove the radius in t
}
.rustdoc .example-wrap pre.example-line-numbers,
.rustdoc .example-wrap pre.src-line-numbers {
.rustdoc .example-wrap .src-line-numbers {
min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */
flex-grow: 0;
text-align: right;
@ -808,7 +810,7 @@ both the code example and the line numbers, so we need to remove the radius in t
color: var(--src-line-numbers-span-color);
}
.rustdoc .scraped-example pre.src-line-numbers {
.rustdoc .scraped-example .src-line-numbers {
padding: 14px 0;
}
.src-line-numbers a, .src-line-numbers span {
@ -2268,24 +2270,6 @@ in src-script.js and main.js
margin: 0;
padding: var(--nav-sub-mobile-padding);
}
.example-wrap.scraped-example {
flex-wrap: wrap;
}
.example-wrap .scraped-example-title {
width: 100%;
}
.example-wrap.scraped-example .rust {
/* Dirty hacky to force it to remain on the same line as the line numbers. */
width: 10px;
}
.example-wrap.scraped-example .button-holder {
top: calc(var(--pre-line-height) + 4px);
}
.scraped-example:not(.expanded)::before {
/* The gradient effect needs to be moved under the title */
top: var(--pre-line-height);
}
}
@ -2310,12 +2294,6 @@ in src-script.js and main.js
.item-table > li > div {
overflow-wrap: anywhere;
}
/* Starting this width, the "title" of scraped example will be in the code block so we can
put the background gradient at the top. */
.scraped-example:not(.expanded)::before {
top: 0;
}
}
@media print {
@ -2397,20 +2375,21 @@ in src-script.js and main.js
color: var(--scrape-example-help-hover-color);
}
.scraped-example:not(.expanded)::before,
.scraped-example:not(.expanded)::after {
.scraped-example:not(.expanded) .example-wrap::before,
.scraped-example:not(.expanded) .example-wrap::after {
content: " ";
width: 100%;
height: 5px;
position: absolute;
z-index: 1;
}
.scraped-example:not(.expanded)::before {
.scraped-example:not(.expanded) .example-wrap::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)::after {
.scraped-example:not(.expanded) .example-wrap::after {
bottom: 0;
background: linear-gradient(to top,
var(--scrape-example-code-wrapper-background-start),

4
src/librustdoc/html/static/js/scrape-examples.js
View File

@ -13,7 +13,7 @@
// Scroll code block to the given code location
function scrollToLoc(elt, loc, isHidden) {
const lines = elt.querySelector(".src-line-numbers");
const lines = elt.querySelector(".src-line-numbers > pre");
let scrollOffset;
// If the block is greater than the size of the viewer,
@ -32,7 +32,7 @@
scrollOffset = offsetMid - halfHeight;
}
lines.scrollTo(0, scrollOffset);
lines.parentElement.scrollTo(0, scrollOffset);
elt.querySelector(".rust").scrollTo(0, scrollOffset);
}

54
src/librustdoc/html/templates/scraped_source.html
View File

@ -1,29 +1,33 @@
<div class="example-wrap scraped-example{% if !info.needs_expansion +%} expanded{% endif %}" data-locs="{{info.locations}}">
<div class="scraped-example{% if !info.needs_expansion +%} expanded{% endif %}" data-locs="{{info.locations}}"> {# #}
<div class="scraped-example-title">
{{info.name +}} (<a href="{{info.url}}">{{info.title}}</a>) {# #}
</div>
{# 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. #}
<div data-nosnippet><pre class="src-line-numbers">
{% for line in lines.clone() %}
{# ~#}
<span>{{line|safe}}</span>
{% endfor %}
</pre></div> {# #}
<pre class="rust"> {# #}
<code>
{{code_html|safe}}
</code> {# #}
</pre> {# #}
{% if info.needs_prev_next_buttons || info.needs_expansion %}
<div class="button-holder">
{% if info.needs_prev_next_buttons %}
<button class="prev">&pr;</button> {# #}
<button class="next">&sc;</button>
{% endif %}
{% if info.needs_expansion %}
<button class="expand">&varr;</button>
{% endif %}
</div>
{% endif %}
<div class="example-wrap"> {# #}
{# 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. #}
<div class="src-line-numbers" data-nosnippet> {# #}
<pre>
{% for line in lines.clone() %}
{# ~#}
<span>{{line|safe}}</span>
{% endfor %}
</pre> {# #}
</div> {# #}
<pre class="rust"> {# #}
<code>
{{code_html|safe}}
</code> {# #}
</pre> {# #}
{% if info.needs_prev_next_buttons || info.needs_expansion %}
<div class="button-holder">
{% if info.needs_prev_next_buttons %}
<button class="prev">&pr;</button> {# #}
<button class="next">&sc;</button>
{% endif %}
{% if info.needs_expansion %}
<button class="expand">&varr;</button>
{% endif %}
</div>
{% endif %}
</div> {# #}
</div> {# #}

4
tests/rustdoc-gui/code-example-buttons.goml
View File

@ -111,7 +111,7 @@ call-function: ("check-buttons-position", {"pre_selector": ".example-wrap"})
go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
// We should work as well for scraped examples.
call-function: ("check-buttons-position", {"pre_selector": ".example-wrap.scraped-example"})
call-function: ("check-buttons-position", {"pre_selector": ".scraped-example .example-wrap"})
// And also when the scraped example "title" goes above.
set-window-size: (600, 600)
call-function: ("check-buttons-position", {"pre_selector": ".example-wrap.scraped-example"})
call-function: ("check-buttons-position", {"pre_selector": ".scraped-example .example-wrap"})

2
tests/rustdoc-gui/docblock-code-block-line-number.goml
View File

@ -109,7 +109,7 @@ assert-local-storage: {"rustdoc-line-numbers": "true" }
go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
assert-css: (
".scraped-example pre.src-line-numbers",
".scraped-example .src-line-numbers",
{
// There should not be a radius on the right of the line numbers.
"border-top-left-radius": "6px",

37
tests/rustdoc-gui/scrape-examples-button-focus.goml
View File

@ -4,29 +4,52 @@ go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test.html"
// The next/prev buttons vertically scroll the code viewport between examples
move-cursor-to: ".scraped-example-list > .scraped-example"
store-property: (".scraped-example-list > .scraped-example pre", {"scrollTop": initialScrollTop})
store-property: (".scraped-example-list > .scraped-example .src-line-numbers", {
"scrollTop": initialScrollTop,
})
assert-property: (".scraped-example-list > .scraped-example .rust", {
"scrollTop": |initialScrollTop|,
})
focus: ".scraped-example-list > .scraped-example .next"
press-key: "Enter"
assert-property-false: (".scraped-example-list > .scraped-example pre", {
assert-property-false: (".scraped-example-list > .scraped-example .src-line-numbers", {
"scrollTop": |initialScrollTop|
}, NEAR)
assert-property-false: (".scraped-example-list > .scraped-example .rust", {
"scrollTop": |initialScrollTop|
}, NEAR)
focus: ".scraped-example-list > .scraped-example .prev"
press-key: "Enter"
assert-property: (".scraped-example-list > .scraped-example pre", {
assert-property: (".scraped-example-list > .scraped-example .src-line-numbers", {
"scrollTop": |initialScrollTop|
}, NEAR)
assert-property: (".scraped-example-list > .scraped-example .rust", {
"scrollTop": |initialScrollTop|
}, NEAR)
// The expand button increases the scrollHeight of the minimized code viewport
store-property: (".scraped-example-list > .scraped-example pre", {"offsetHeight": smallOffsetHeight})
assert-property-false: (".scraped-example-list > .scraped-example pre", {
assert-property-false: (".scraped-example-list > .scraped-example .src-line-numbers", {
"scrollHeight": |smallOffsetHeight|
}, NEAR)
assert-property-false: (".scraped-example-list > .scraped-example .rust", {
"scrollHeight": |smallOffsetHeight|
}, NEAR)
focus: ".scraped-example-list > .scraped-example .expand"
press-key: "Enter"
assert-property-false: (".scraped-example-list > .scraped-example pre", {
assert-property-false: (".scraped-example-list > .scraped-example .src-line-numbers", {
"offsetHeight": |smallOffsetHeight|
}, NEAR)
store-property: (".scraped-example-list > .scraped-example pre", {"offsetHeight": fullOffsetHeight})
assert-property: (".scraped-example-list > .scraped-example pre", {
assert-property-false: (".scraped-example-list > .scraped-example .rust", {
"offsetHeight": |smallOffsetHeight|
}, NEAR)
store-property: (".scraped-example-list > .scraped-example .src-line-numbers", {
"offsetHeight": fullOffsetHeight,
})
assert-property: (".scraped-example-list > .scraped-example .rust", {
"offsetHeight": |fullOffsetHeight|,
"scrollHeight": |fullOffsetHeight|,
})
assert-property: (".scraped-example-list > .scraped-example .src-line-numbers", {
"scrollHeight": |fullOffsetHeight|
}, NEAR)

4
tests/rustdoc-gui/scrape-examples-color.goml
View File

@ -67,11 +67,11 @@ define-function: (
[theme, background_color_start, background_color_end],
block {
call-function: ("switch-theme", {"theme": |theme|})
assert-css: (".scraped-example:not(.expanded)::before", {
assert-css: (".scraped-example:not(.expanded) .example-wrap::before", {
"background-image": "linear-gradient(" + |background_color_start| + ", " +
|background_color_end| + ")",
})
assert-css: (".scraped-example:not(.expanded)::after", {
assert-css: (".scraped-example:not(.expanded) .example-wrap::after", {
"background-image": "linear-gradient(to top, " + |background_color_start| + ", " +
|background_color_end| + ")",
})

28
tests/rustdoc-gui/scrape-examples-layout.goml
View File

@ -36,13 +36,13 @@ assert-property: (
)
// The "title" should be located at the right bottom corner of the code example.
store-position: (".example-wrap.scraped-example", {"x": x, "y": y})
store-size: (".example-wrap.scraped-example", {"width": width, "height": height})
store-size: (".example-wrap.scraped-example .scraped-example-title", {
store-position: (".scraped-example .example-wrap", {"x": x, "y": y})
store-size: (".scraped-example .example-wrap", {"width": width, "height": height})
store-size: (".scraped-example .scraped-example-title", {
"width": title_width,
"height": title_height,
})
assert-position: (".example-wrap.scraped-example .scraped-example-title", {
assert-position: (".scraped-example .scraped-example-title", {
"x": |x| + |width| - |title_width| - 5,
"y": |y| + |height| - |title_height| - 8,
})
@ -57,36 +57,32 @@ assert-position: (".scraped-example", {"y": 226})
assert-position: (".scraped-example .prev", {"y": 226 + |offset_y|})
// Gradient background should be at the top of the code block.
assert-css: (".scraped-example::before", {"top": "0px"})
assert-css: (".scraped-example::after", {"bottom": "0px"})
assert-css: (".scraped-example .example-wrap::before", {"top": "0px"})
assert-css: (".scraped-example .example-wrap::after", {"bottom": "0px"})
// Then with mobile
set-window-size: (600, 600)
store-size: (".example-wrap.scraped-example .scraped-example-title", {"height": title_height})
store-size: (".scraped-example .scraped-example-title", {"height": title_height})
assert-position: (".scraped-example", {"y": 284})
assert-position: (".scraped-example .prev", {"y": 284 + |offset_y| + |title_height|})
// Gradient background should be at the top of the code block, which is now below the "title".
assert-css: (".scraped-example::before", {"top": |title_height| + "px"})
assert-css: (".scraped-example::after", {"bottom": "0px"})
define-function: (
"check_title_and_code_position",
[],
block {
// Title should be above the code.
store-position: (".example-wrap.scraped-example .src-line-numbers", {"x": x, "y": y})
store-size: (".example-wrap.scraped-example .scraped-example-title", { "height": title_height })
store-position: (".scraped-example .example-wrap .src-line-numbers", {"x": x, "y": y})
store-size: (".scraped-example .scraped-example-title", { "height": title_height })
assert-position: (".example-wrap.scraped-example .scraped-example-title", {
assert-position: (".scraped-example .scraped-example-title", {
"x": |x|, // same X position.
"y": |y| - |title_height|,
})
// Line numbers should be right beside the code.
compare-elements-position: (
".example-wrap.scraped-example .src-line-numbers",
".example-wrap.scraped-example .rust",
".scraped-example .example-wrap .src-line-numbers",
".scraped-example .example-wrap .rust",
["y"],
)
}