From f068fa9832632d04d1b70da99bc11342a642d086 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Tue, 4 May 2021 15:38:38 -0700
Subject: [PATCH 1/5] Use the same icon for clipboard button that rustdoc
 itself uses

![image](https://user-images.githubusercontent.com/1593513/117078639-18e8c000-acef-11eb-93e7-c1caaec75df0.png)
---
 static/index.js                          | 3 +++
 templates/header/package_navigation.html | 2 +-
 templates/rustdoc/topbar.html            | 2 +-
 templates/style/rustdoc.scss             | 4 ++++
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/static/index.js b/static/index.js
index d7a612eef..244f171e9 100644
--- a/static/index.js
+++ b/static/index.js
@@ -20,6 +20,9 @@ function copyTextHandler() {
 
     temporaryInput.remove();
     crateTitleAndVersion.style.textTransform = oldTransform;
+
+    const clipboard = document.getElementById("clipboard");
+    clipboard.innerHTML = "✓";
 }
 
 (function() {
diff --git a/templates/header/package_navigation.html b/templates/header/package_navigation.html
index a4f65f0b5..e10a10717 100644
--- a/templates/header/package_navigation.html
+++ b/templates/header/package_navigation.html
@@ -27,7 +27,7 @@ <h1 id="crate-title">
                         {{ title }}
                     {%- else -%}
                         {{ metadata.name }} {{ metadata.version }}
-                        {{ "copy" | far(id="clipboard", aria_label="Copy crate name and version information", fa=true) }}
+                        <span id="clipboard" aria-label="Copy crate name and version information">⎘</span>
                     {%- endif -%}
                 </h1>
 
diff --git a/templates/rustdoc/topbar.html b/templates/rustdoc/topbar.html
index 12cae107e..5bade605d 100644
--- a/templates/rustdoc/topbar.html
+++ b/templates/rustdoc/topbar.html
@@ -19,7 +19,7 @@
                 <ul class="pure-menu-list menu-item-divided">
                     <li class="pure-menu-heading" id="crate-title">
                         {{ krate.name }} {{ krate.version }}
-                        {{ "copy" | far(id="clipboard", aria_label="Copy crate name and version information", fw=true) }}
+                        <span id="clipboard" aria-label="Copy crate name and version information">⎘</span>
                     </li>
 
                     <li class="pure-menu-item">
diff --git a/templates/style/rustdoc.scss b/templates/style/rustdoc.scss
index 6f2e8bd76..a71b6a93e 100644
--- a/templates/style/rustdoc.scss
+++ b/templates/style/rustdoc.scss
@@ -6,6 +6,10 @@
     min-height: calc(100vh - #{$top-navbar-height + $footer-height + 2});
 }
 
+#clipboard {
+    cursor: pointer;
+}
+
 // Force the navbar to be left-aligned on rustdoc pages
 body.rustdoc-page > .nav-container > .container {
     margin-left: 0;

From e98c8a6733a74e79efc4177bba43feb1a4305f68 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Tue, 4 May 2021 15:54:33 -0700
Subject: [PATCH 2/5] Reset button from checkmark to copy icon

This is, again, directly copying what rustdoc does.
---
 static/index.js | 48 +++++++++++++++++++++++++++++-------------------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/static/index.js b/static/index.js
index 244f171e9..920aa4ea0 100644
--- a/static/index.js
+++ b/static/index.js
@@ -3,30 +3,40 @@ function formatCrateName(crateTitleAndVersion) {
     return stringParts[0] + ' = "' + stringParts[1] + '"';
 }
 
-function copyTextHandler() {
-    const crateTitleAndVersion = document.getElementById("crate-title");
-    // On rustdoc pages, we use `textTransform: uppercase`, which copies as uppercase.
-    // To avoid that, reset the styles temporarily.
-    const oldTransform = crateTitleAndVersion.style.textTransform;
-    crateTitleAndVersion.style.textTransform = "none";
-    const temporaryInput = document.createElement("input");
+(function() {
+    const clipboard = document.getElementById("clipboard");
+    let resetClipboardTimeout = null;
 
-    temporaryInput.type = "text";
-    temporaryInput.value = formatCrateName(crateTitleAndVersion.innerText);
+    function resetClipboard() {
+        resetClipboardTimeout = null;
+        clipboard.textContent = '⎘';
+    }
 
-    document.body.append(temporaryInput);
-    temporaryInput.select();
-    document.execCommand("copy");
+    function copyTextHandler() {
+        const crateTitleAndVersion = document.getElementById("crate-title");
+        // On rustdoc pages, we use `textTransform: uppercase`, which copies as uppercase.
+        // To avoid that, reset the styles temporarily.
+        const oldTransform = crateTitleAndVersion.style.textTransform;
+        crateTitleAndVersion.style.textTransform = "none";
+        const temporaryInput = document.createElement("input");
 
-    temporaryInput.remove();
-    crateTitleAndVersion.style.textTransform = oldTransform;
+        temporaryInput.type = "text";
+        temporaryInput.value = formatCrateName(crateTitleAndVersion.innerText);
 
-    const clipboard = document.getElementById("clipboard");
-    clipboard.innerHTML = "✓";
-}
+        document.body.append(temporaryInput);
+        temporaryInput.select();
+        document.execCommand("copy");
+
+        temporaryInput.remove();
+        crateTitleAndVersion.style.textTransform = oldTransform;
+
+        clipboard.textContent = "✓";
+        if (resetClipboardTimeout !== null) {
+            clearTimeout(resetClipboardTimeout);
+        }
+        resetClipboardTimeout = setTimeout(resetClipboard, 1000);
+    }
 
-(function() {
-    const clipboard = document.getElementById("clipboard");
     if (clipboard != null) clipboard.addEventListener("click", copyTextHandler);
     for (const e of document.querySelectorAll('a[data-fragment="retain"]')) {
         e.addEventListener('mouseover', () => e.hash = document.location.hash);

From 4113130e09f8e654b2bf43cdb4e703bf64f8baa2 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Sun, 9 May 2021 09:53:02 -0700
Subject: [PATCH 3/5] Use the crates.io clipboard icon

---
 static/index.js                          | 2 +-
 templates/clipboard.svg                  | 1 +
 templates/header/package_navigation.html | 2 +-
 templates/rustdoc/topbar.html            | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 templates/clipboard.svg

diff --git a/static/index.js b/static/index.js
index 920aa4ea0..4bb2f91f4 100644
--- a/static/index.js
+++ b/static/index.js
@@ -9,7 +9,7 @@ function formatCrateName(crateTitleAndVersion) {
 
     function resetClipboard() {
         resetClipboardTimeout = null;
-        clipboard.textContent = '⎘';
+        clipboard.textContent = '📋︎';
     }
 
     function copyTextHandler() {
diff --git a/templates/clipboard.svg b/templates/clipboard.svg
new file mode 100644
index 000000000..93c03391c
--- /dev/null
+++ b/templates/clipboard.svg
@@ -0,0 +1 @@
+{# This icon is copied from crates.io #}<svg width="24" height="25" viewBox="0 0 24 25" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard"><path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/></svg>
\ No newline at end of file
diff --git a/templates/header/package_navigation.html b/templates/header/package_navigation.html
index e10a10717..2eaa8f5c6 100644
--- a/templates/header/package_navigation.html
+++ b/templates/header/package_navigation.html
@@ -27,7 +27,7 @@ <h1 id="crate-title">
                         {{ title }}
                     {%- else -%}
                         {{ metadata.name }} {{ metadata.version }}
-                        <span id="clipboard" aria-label="Copy crate name and version information">⎘</span>
+                        <span id="clipboard" class="fa-svg fa-svg-fw" aria-label="Copy crate name and version information">{%- include "clipboard.svg" -%}</span>
                     {%- endif -%}
                 </h1>
 
diff --git a/templates/rustdoc/topbar.html b/templates/rustdoc/topbar.html
index 5bade605d..8a4621901 100644
--- a/templates/rustdoc/topbar.html
+++ b/templates/rustdoc/topbar.html
@@ -19,7 +19,7 @@
                 <ul class="pure-menu-list menu-item-divided">
                     <li class="pure-menu-heading" id="crate-title">
                         {{ krate.name }} {{ krate.version }}
-                        <span id="clipboard" aria-label="Copy crate name and version information">⎘</span>
+                        <span id="clipboard" class="fa-svg fa-svg-fw" aria-label="Copy crate name and version information">{%- include "clipboard.svg" -%}</span>
                     </li>
 
                     <li class="pure-menu-item">

From f855b9bc02e416a34bac84ef676fa87c44ac3641 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Sun, 9 May 2021 09:59:50 -0700
Subject: [PATCH 4/5] Reset clipboard buttons to original SVG icon

---
 static/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/index.js b/static/index.js
index 4bb2f91f4..da87e4433 100644
--- a/static/index.js
+++ b/static/index.js
@@ -6,10 +6,11 @@ function formatCrateName(crateTitleAndVersion) {
 (function() {
     const clipboard = document.getElementById("clipboard");
     let resetClipboardTimeout = null;
+    let resetClipboardIcon = clipboard.innerHTML;
 
     function resetClipboard() {
         resetClipboardTimeout = null;
-        clipboard.textContent = '📋︎';
+        clipboard.innerHTML = resetClipboardIcon;
     }
 
     function copyTextHandler() {

From 8f60d6c3fe00f2acf5edaa204925ce8b05fb2f62 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Thu, 13 May 2021 11:22:22 -0700
Subject: [PATCH 5/5] Switch clipboard buttons to `title`

This way, sighted users can see the label, too.
---
 templates/header/package_navigation.html | 2 +-
 templates/rustdoc/topbar.html            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/header/package_navigation.html b/templates/header/package_navigation.html
index 2eaa8f5c6..71b28b337 100644
--- a/templates/header/package_navigation.html
+++ b/templates/header/package_navigation.html
@@ -27,7 +27,7 @@ <h1 id="crate-title">
                         {{ title }}
                     {%- else -%}
                         {{ metadata.name }} {{ metadata.version }}
-                        <span id="clipboard" class="fa-svg fa-svg-fw" aria-label="Copy crate name and version information">{%- include "clipboard.svg" -%}</span>
+                        <span id="clipboard" class="fa-svg fa-svg-fw" title="Copy crate name and version information">{%- include "clipboard.svg" -%}</span>
                     {%- endif -%}
                 </h1>
 
diff --git a/templates/rustdoc/topbar.html b/templates/rustdoc/topbar.html
index 8a4621901..5a99abdd2 100644
--- a/templates/rustdoc/topbar.html
+++ b/templates/rustdoc/topbar.html
@@ -19,7 +19,7 @@
                 <ul class="pure-menu-list menu-item-divided">
                     <li class="pure-menu-heading" id="crate-title">
                         {{ krate.name }} {{ krate.version }}
-                        <span id="clipboard" class="fa-svg fa-svg-fw" aria-label="Copy crate name and version information">{%- include "clipboard.svg" -%}</span>
+                        <span id="clipboard" class="fa-svg fa-svg-fw" title="Copy crate name and version information">{%- include "clipboard.svg" -%}</span>
                     </li>
 
                     <li class="pure-menu-item">