From e3af6dc23915f027b9de0721aae86f794a053627 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 2 Sep 2024 15:59:00 +0200 Subject: [PATCH] Simplify CSS but wrapping scraped example into a div and move the title out of the code block --- src/librustdoc/html/static/css/rustdoc.css | 51 ++++++------------ .../html/static/js/scrape-examples.js | 4 +- .../html/templates/scraped_source.html | 54 ++++++++++--------- tests/rustdoc-gui/code-example-buttons.goml | 4 +- .../docblock-code-block-line-number.goml | 2 +- .../scrape-examples-button-focus.goml | 37 ++++++++++--- tests/rustdoc-gui/scrape-examples-color.goml | 4 +- tests/rustdoc-gui/scrape-examples-layout.goml | 28 +++++----- 8 files changed, 93 insertions(+), 91 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 6b31c596c40..fa5a936d3f4 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -34,7 +34,6 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\ '); --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), diff --git a/src/librustdoc/html/static/js/scrape-examples.js b/src/librustdoc/html/static/js/scrape-examples.js index 709a774892f..06e42814d33 100644 --- a/src/librustdoc/html/static/js/scrape-examples.js +++ b/src/librustdoc/html/static/js/scrape-examples.js @@ -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); } diff --git a/src/librustdoc/html/templates/scraped_source.html b/src/librustdoc/html/templates/scraped_source.html index 4b5d3f2d10a..e1fc2e69378 100644 --- a/src/librustdoc/html/templates/scraped_source.html +++ b/src/librustdoc/html/templates/scraped_source.html @@ -1,29 +1,33 @@ -
+
{# #}
{{info.name +}} ({{info.title}}) {# #}
- {# 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}}
-         {# #}
-
{# #} - {% if info.needs_prev_next_buttons || info.needs_expansion %} -
- {% if info.needs_prev_next_buttons %} - {# #} - - {% endif %} - {% if info.needs_expansion %} - - {% endif %} -
- {% endif %} +
{# #} + {# 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}}
+             {# #}
+
{# #} + {% 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/tests/rustdoc-gui/code-example-buttons.goml b/tests/rustdoc-gui/code-example-buttons.goml index a6c8a862d1a..c62683b45da 100644 --- a/tests/rustdoc-gui/code-example-buttons.goml +++ b/tests/rustdoc-gui/code-example-buttons.goml @@ -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"}) diff --git a/tests/rustdoc-gui/docblock-code-block-line-number.goml b/tests/rustdoc-gui/docblock-code-block-line-number.goml index 36a17b1c833..71ef041c684 100644 --- a/tests/rustdoc-gui/docblock-code-block-line-number.goml +++ b/tests/rustdoc-gui/docblock-code-block-line-number.goml @@ -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", diff --git a/tests/rustdoc-gui/scrape-examples-button-focus.goml b/tests/rustdoc-gui/scrape-examples-button-focus.goml index 4950a48bf0c..442a3a4dcad 100644 --- a/tests/rustdoc-gui/scrape-examples-button-focus.goml +++ b/tests/rustdoc-gui/scrape-examples-button-focus.goml @@ -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) diff --git a/tests/rustdoc-gui/scrape-examples-color.goml b/tests/rustdoc-gui/scrape-examples-color.goml index 8baf2edb79b..b0faca190a5 100644 --- a/tests/rustdoc-gui/scrape-examples-color.goml +++ b/tests/rustdoc-gui/scrape-examples-color.goml @@ -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| + ")", }) diff --git a/tests/rustdoc-gui/scrape-examples-layout.goml b/tests/rustdoc-gui/scrape-examples-layout.goml index 063e103458d..f0023f7022a 100644 --- a/tests/rustdoc-gui/scrape-examples-layout.goml +++ b/tests/rustdoc-gui/scrape-examples-layout.goml @@ -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"], ) }