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

Author: GuillaumeGomez

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

@@ -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,19 +780,18 @@ 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,
 	 * 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) .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),

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);
     }
 

src/librustdoc/html/templates/scraped_source.html

@@ -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> {# #}

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"})

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",

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)
+assert-property-false: (".scraped-example-list > .scraped-example .rust", {
     "offsetHeight": |smallOffsetHeight|
 }, NEAR)
-store-property: (".scraped-example-list > .scraped-example pre", {"offsetHeight": fullOffsetHeight})
-assert-property: (".scraped-example-list > .scraped-example pre", {
+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)

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| + ")",
         })

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"],
         )
     }