Ferris gets ugly background when hovered over on short code snippets

[NeatNit]

Most of the text of this post is irrelevant. The screenshots are still relevant though. See #4529 (comment) and future comments.

• I have searched open and closed issues and pull requests for duplicates, using these search terms:
  • chapter 9.1
• I HAVEN'T checked the latest main branch to see if this has already been fixed, because I don't know what to look for!

URL to the section(s) of the book with this problem: https://doc.rust-lang.org/book/ch09-01-unrecoverable-errors-with-panic.html

Description of the problem:
The first code example is rendered strangely in Chapter 9.1:

Note the buttons on the top-right. Ferris has somehow become one of the buttons!

The second example on that page is rendered more normally:

The HTML in the DOM for the broken example is:

<pre class="playground">
    <div class="buttons">
        <button class="clip-button" title="Copy to clipboard" aria-label="Copy to clipboard"><i class="tooltiptext"></i></button>
        <button class="fa fa-play play-button" hidden="" title="Run this code" aria-label="Run this code"></button>
        <a href="ch00-00-introduction.html#ferris" target="_blank">
            <img src="img/ferris/panics.svg" title="This code panics!" class="ferris ferris-small">
        </a>
    </div>
    <!-- ... -->
</pre>

And the working example is:

<pre class="playground">
    <div class="buttons">
        <button class="clip-button" title="Copy to clipboard" aria-label="Copy to clipboard"><i class="tooltiptext"></i></button>
        <button class="fa fa-play play-button" hidden="" title="Run this code" aria-label="Run this code"></button>
    </div>
    <div class="ferris-container">
        <a href="ch00-00-introduction.html#ferris" target="_blank">
            <img src="img/ferris/panics.svg" title="This code panics!" class="ferris ferris-large">
        </a>
    </div>
    <!-- ... -->
</pre>

Suggested fix:
Find and fix the JavaScript bug that's rendering the first box incorrectly.

[NeatNit]

Same here https://doc.rust-lang.org/book/ch17-00-async-await.html and probably a few other places.

[NeatNit]

Okay, turns out this is deliberate:

book/ferris.js

Lines 47 to 50 in 555182e

	/** @type {'small' | 'large'} */
	let size = numLines < 4 ? "small" : "large";
	let container = prepareFerrisContainer(codeBlock, size == "small");

book/ferris.js

Lines 64 to 68 in 555182e

	function prepareFerrisContainer(element, useButtons) {
	let foundButtons = element.parentElement?.querySelector(".buttons");
	if (useButtons && foundButtons) {
	return foundButtons;
	}

I would close this issue, but I still feel that the result looks wrong (especially when Ferris is hovered over) so I'll leave it to your judgement.

[NeatNit]

Alright, I dug deeper and found the cause and the solution.

The cause: mdBook's chrome.css affects our Ferris:

pre > .buttons :hover {
    color: var(--sidebar-active);
    border-color: var(--icons-hover);
    background-color: var(--theme-hover);
}

https://github.com/rust-lang/mdBook/blob/780fd83cacef0471e876f596949aaf71a2dc2b10/crates/mdbook-html/front-end/css/chrome.css#L238-L242

See HTML in initial issue for reference. This rule is applied to <a> and to <img>, both of which we don't want.

The solution: add the following rule to ferris.css:

pre > .buttons :hover:not(button) {
  background-color: transparent;
}

I was planning to make pull requests for each of my issues (that I know what to do with) after I finish the whole book... But I think this one I'll do right now.