diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index e936e1ca07e..1b9dfdf3fdd 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1474,7 +1474,20 @@ a.test-arrow:hover { .example-wrap:hover > .test-arrow { padding: 2px 7px; } -.example-wrap:hover > .test-arrow, .example-wrap:hover > .button-holder { +/* +On iPad, the ":hover" state sticks around, making things work not greatly. Do work around +it, we move it into this media query. More information can be found at: +https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/ + +However, using `@media (hover: hover)` makes this rule never to be applied in GUI tests, so +instead, we check that it's not a "finger" cursor. +*/ +@media not (pointer: coarse) { + .example-wrap:hover > .test-arrow, .example-wrap:hover > .button-holder { + visibility: visible; + } +} +.example-wrap .button-holder.keep-visible { visibility: visible; } .example-wrap .button-holder .copy-button { diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 40d65ae7910..e0ea234f9e7 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -1829,14 +1829,22 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm copyContentToClipboard(codeElem.textContent); } - function addCopyButton(event) { + function getExampleWrap(event) { let elem = event.target; while (!hasClass(elem, "example-wrap")) { elem = elem.parentElement; if (elem.tagName === "body" || hasClass(elem, "docblock")) { - return; + return null; } } + return elem; + } + + function addCopyButton(event) { + const elem = getExampleWrap(event); + if (elem === null) { + return; + } // Since the button will be added, no need to keep this listener around. elem.removeEventListener("mouseover", addCopyButton); @@ -1858,7 +1866,20 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm parent.appendChild(copyButton); } + function showHideCodeExampleButtons(event) { + const elem = getExampleWrap(event); + if (elem === null) { + return; + } + const buttons = elem.querySelector(".button-holder"); + if (buttons === null) { + return; + } + buttons.classList.toggle("keep-visible"); + } + onEachLazy(document.querySelectorAll(".docblock .example-wrap"), elem => { elem.addEventListener("mouseover", addCopyButton); + elem.addEventListener("click", showHideCodeExampleButtons); }); }());