Rollup merge of #124041 - GuillaumeGomez:fix-copy-path-button, r=notriddle

Fix copy path button

Currently, on all nightly docs, clicking on the "copy path" button triggers a JS error. It's because changes in #123706 forgot to update the JS (it contained an image before but not anymore).

I had to make some small changes in the CSS to fix the display when the button was clicked as well.

r? ``@notriddle``

Author: matthiaskrgr

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

@@ -1627,24 +1627,27 @@ a.tooltip:hover::after {
 	color: var(--copy-path-button-color);
 	background: var(--main-background-color);
 	height: 34px;
+	width: 33px;
 	margin-left: 10px;
 	padding: 0;
 	padding-left: 2px;
 	border: 0;
-	width: 33px;
-	line-height: 0;
 	font-size: 0;
 }
-
-#copy-path:before {
+#copy-path::before {
 	filter: var(--copy-path-img-filter);
 	content: url('clipboard-24048e6d87f63d07.svg');
-	width: 19px;
-	height: 18px;
 }
-#copy-path:hover:before {
+#copy-path:hover::before {
 	filter: var(--copy-path-img-hover-filter);
 }
+#copy-path.clicked::before {
+	/* Checkmark <https://www.svgrepo.com/svg/335033/checkmark> */
+	content: url('data:image/svg+xml,<svg viewBox="-1 -1 23 23" xmlns="http://www.w3.org/2000/svg" \
+		fill="black" height="18px">\
+		<g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"></path>\
+		</g></svg>');
+}
 
 @keyframes rotating {
 	from {

src/librustdoc/html/static/js/main.js

@@ -1798,31 +1798,15 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
         document.execCommand("copy");
         document.body.removeChild(el);
 
-        // There is always one children, but multiple childNodes.
-        but.children[0].style.display = "none";
-
-        let tmp;
-        if (but.childNodes.length < 2) {
-            tmp = document.createTextNode("✓");
-            but.appendChild(tmp);
-        } else {
-            onEachLazy(but.childNodes, e => {
-                if (e.nodeType === Node.TEXT_NODE) {
-                    tmp = e;
-                    return true;
-                }
-            });
-            tmp.textContent = "✓";
-        }
+        but.classList.add("clicked");
 
         if (reset_button_timeout !== null) {
             window.clearTimeout(reset_button_timeout);
         }
 
         function reset_button() {
-            tmp.textContent = "";
             reset_button_timeout = null;
-            but.children[0].style.display = "";
+            but.classList.remove("clicked");
         }
 
         reset_button_timeout = window.setTimeout(reset_button, 1000);

tests/rustdoc-gui/copy-path.goml

@@ -0,0 +1,15 @@
+// Checks that the "copy path" button is not triggering JS error and its display
+// isn't broken.
+go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
+
+// First we store the size of the button before we click on it.
+store-size: ("#copy-path", {"width": width, "height": height})
+click: "#copy-path"
+// We wait for the new text to appear.
+wait-for: "#copy-path.clicked"
+// We check that the size didn't change.
+assert-size: ("#copy-path.clicked", {"width": |width|, "height": |height|})
+// We wait for the button to turn back to its original state.
+wait-for: "#copy-path:not(.clicked)"
+// We check that the size is still the same.
+assert-size: ("#copy-path:not(.clicked)", {"width": |width|, "height": |height|})