Skip to content

Commit b2384db

Browse files
kinnisonkinnison
authored
Merge pull request #2398 from BeniCheni/csp-copy-button
www: Correct UX of the copy button
2 parents 1e309fe + 4f4ca06 commit b2384db

File tree

2 files changed

+83
-12
lines changed

2 files changed

+83
-12
lines changed

‎www/index.html

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<title>rustup.rs - The Rust toolchain installer</title>
66
<meta name="keywords" content="Rust, Rust programming language, rustlang, rust-lang, Mozilla Rust, rustup">
77
<meta name="description" content="The Rust toolchain installer">
8-
98
<link rel="stylesheet" href="normalize.css">
109
<link rel="stylesheet" href="rustup.css">
1110

@@ -27,13 +26,13 @@
2726
<p>Run the following in your terminal, then follow the onscreen instructions.</p>
2827
<div class="copy-container">
2928
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
30-
<button class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button" onclick="handle_copy_button_click()">
29+
<button id="copy-button-unix" class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button">
3130
<div class="copy-icon">
3231
<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">
3332
<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>
3433
</svg>
3534
</div>
36-
<div id="copy-status-message" class="copy-button-text"></div>
35+
<div id="copy-status-message-unix" class="copy-button-text"></div>
3736
</button>
3837
</div>
3938
<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>
@@ -46,7 +45,17 @@
4645
then follow the onscreen instructions.
4746
</p>
4847
<p>If you're a Windows Subsystem for Linux user run the following in your terminal, then follow the onscreen instructions to install Rust.</p>
49-
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
48+
<div class="copy-container">
49+
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
50+
<button id="copy-button-win32" class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button">
51+
<div class="copy-icon">
52+
<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">
53+
<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>
54+
</svg>
55+
</div>
56+
<div id="copy-status-message-win32" class="copy-button-text"></div>
57+
</button>
58+
</div>
5059
<p class="other-platforms-help">You appear to be running Windows 32-bit. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
5160
</div>
5261

@@ -57,7 +66,17 @@
5766
then follow the onscreen instructions.
5867
</p>
5968
<p>If you're a Windows Subsystem for Linux user run the following in your terminal, then follow the onscreen instructions to install Rust.</p>
60-
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
69+
<div class="copy-container">
70+
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
71+
<button id="copy-button-win64" class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button">
72+
<div class="copy-icon">
73+
<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">
74+
<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>
75+
</svg>
76+
</div>
77+
<div id="copy-status-message-win64" class="copy-button-text"></div>
78+
</button>
79+
</div>
6180
<p class="other-platforms-help">You appear to be running Windows 64-bit. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
6281
</div>
6382

@@ -81,7 +100,17 @@
81100
<!-- duplicate the default cross-platform instructions -->
82101
<div>
83102
<p>If you are running Unix,<br/>run the following in your terminal, then follow the onscreen instructions.</p>
84-
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
103+
<div class="copy-container">
104+
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
105+
<button id="copy-button-unknown" class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button">
106+
<div class="copy-icon">
107+
<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">
108+
<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>
109+
</svg>
110+
</div>
111+
<div id="copy-status-message-unknown" class="copy-button-text"></div>
112+
</button>
113+
</div>
85114
</div>
86115

87116
<hr/>
@@ -110,7 +139,17 @@
110139
<div>
111140
<p>To install Rust, if you are running Unix,<br/>run the following
112141
in your terminal, then follow the onscreen instructions.</p>
113-
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
142+
<div class="copy-container">
143+
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
144+
<button id="copy-button-default" class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button">
145+
<div class="copy-icon">
146+
<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">
147+
<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>
148+
</svg>
149+
</div>
150+
<div id="copy-status-message-default" class="copy-button-text"></div>
151+
</button>
152+
</div>
114153
</div>
115154

116155
<hr/>

‎www/rustup.js

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -165,24 +165,56 @@ function fill_in_bug_report_values() {
165165
nav_app.textContent = navigator.appVersion;
166166
}
167167

168-
function clear_copy_status_message() {
169-
document.getElementById('copy-status-message').innerText = '';
168+
function clear_copy_status_message(id) {
169+
document.getElementById(id).innerText = '';
170170
}
171171

172-
function handle_copy_button_click() {
172+
function process_copy_button_click(id) {
173173
try {
174174
navigator.clipboard.writeText(rustup_install_command).then(function() {
175-
document.getElementById('copy-status-message').innerText = 'Copied!'
175+
document.getElementById(id).innerText = 'Copied!';
176176
});
177-
setTimeout(clear_copy_status_message, 5000);
177+
setTimeout(function () {
178+
clear_copy_status_message(id);
179+
}, 5000);
178180
} catch (e) {
179181
console.log('Hit a snag when copying to clipboard:', e);
180182
}
181183
}
182184

185+
function handle_copy_button_click(e) {
186+
switch (e.id) {
187+
case 'copy-button-unix':
188+
process_copy_button_click('copy-status-message-unix');
189+
break;
190+
case 'copy-button-win32':
191+
process_copy_button_click('copy-status-message-win32');
192+
break;
193+
case 'copy-button-win64':
194+
process_copy_button_click('copy-status-message-win64');
195+
break;
196+
case 'copy-button-unknown':
197+
process_copy_button_click('copy-status-message-unknown');
198+
break;
199+
case 'copy-button-default':
200+
process_copy_button_click('copy-status-message-default');
201+
break;
202+
}
203+
}
204+
205+
function set_up_copy_button_clicks() {
206+
var buttons = document.querySelectorAll(".copy-button");
207+
buttons.forEach(function (element) {
208+
element.addEventListener('click', function() {
209+
handle_copy_button_click(element);
210+
});
211+
})
212+
}
213+
183214
(function () {
184215
adjust_for_platform();
185216
set_up_cycle_button();
186217
set_up_default_platform_buttons();
218+
set_up_copy_button_clicks();
187219
fill_in_bug_report_values();
188220
}());

0 commit comments

Comments
 (0)