www: Implement copy button for rustup download command

Author: BeniCheni

www/index.html

@@ -25,7 +25,17 @@
 
 <div id="platform-instructions-unix" class="instructions display-none">
   <p>Run the following in your terminal, then follow the onscreen instructions.</p>
-  <pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
+    <div class="copy-container">
+      <pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
+      <button class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button" onclick="handle_copy_button_click()">
+        <div class="copy-icon">
+          <svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" alt="Copy curl command to clipboard to download Rustup">
+            <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><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"></path>
+          </svg>
+        </div>
+        <div id="copy-status-message" class="copy-button-text"></div>
+      </button>
+    </div>
   <p class="other-platforms-help">You appear to be running Unix. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
 </div>
 

www/rustup.css

@@ -105,11 +105,11 @@ hr {
     margin-bottom: 2em;
 }
 
-#platform-instructions-unix > pre,
-#platform-instructions-win32 > pre,
-#platform-instructions-win64 > pre,
-#platform-instructions-default > div > pre,
-#platform-instructions-unknown > div > pre {
+#platform-instructions-unix > div > pre,
+#platform-instructions-win32 > div > pre,
+#platform-instructions-win64 > div > pre,
+#platform-instructions-default > div > div > pre,
+#platform-instructions-unknown > div > div > pre {
     background-color: #515151;
     color: white;
     margin-left: auto;
@@ -121,6 +121,46 @@ hr {
     box-shadow: inset 0px 0px 20px 0px #333333;
     overflow-x: scroll;
     font-size: 0.6em;
+    height: 27px;
+}
+
+#platform-instructions-unix div.copy-container,
+#platform-instructions-win32 div.copy-container,
+#platform-instructions-win64 div.copy-container,
+#platform-instructions-default div.copy-container,
+#platform-instructions-unknown div.copy-container {
+    display: flex;
+    align-items: center;
+}
+
+#platform-instructions-unix button.copy-button,
+#platform-instructions-win32 button.copy-button,
+#platform-instructions-win64 button.copy-button,
+#platform-instructions-default button.copy-button,
+#platform-instructions-unknown button.copy-button {
+    height: 60px;
+    margin: 1px;
+    padding-right: 5px;
+    border-radius: 3px;
+}
+
+#platform-instructions-unix div.copy-icon,
+#platform-instructions-win32 div.copy-icon,
+#platform-instructions-win64 div.copy-icon,
+#platform-instructions-default div.copy-icon,
+#platform-instructions-unknown div.copy-icon {
+    margin-top: 12px;
+}
+
+#platform-instructions-unix div.copy-button-text,
+#platform-instructions-win32 div.copy-button-text,
+#platform-instructions-win64 div.copy-button-text,
+#platform-instructions-default div.copy-button-text,
+#platform-instructions-unknown div.copy-button-text {
+    font-size: 10px;
+    color: green;
+    width: 41px;
+    height: 15px;
 }
 
 #platform-instructions-win32 a.windows-download,

www/rustup.js

@@ -2,6 +2,7 @@
 
 var platforms = ["default", "unknown", "win32", "win64", "unix"];
 var platform_override = null;
+var rustup_install_command = "curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh";
 
 function detect_platform() {
     "use strict";
@@ -164,6 +165,21 @@ function fill_in_bug_report_values() {
     nav_app.textContent = navigator.appVersion;
 }
 
+function clear_copy_status_message() {
+    document.getElementById('copy-status-message').innerText = '';
+}
+
+function handle_copy_button_click() {
+    try {
+        navigator.clipboard.writeText(rustup_install_command).then(function() {
+            document.getElementById('copy-status-message').innerText = 'Copied!'
+        });
+        setTimeout(clear_copy_status_message, 5000);
+    } catch (e) {
+        console.log('Hit a snag when copying to clipboard:', e);
+    }
+}
+
 (function () {
     adjust_for_platform();
     set_up_cycle_button();