Add buttons to copy and clear interaction stack

app/styles/base.css

@@ -888,6 +888,7 @@ select:active {
 
 .noVNC_info_item_label {
   display: inline-block;
+  width: 100%;
   margin-bottom: 15px;
   font-weight: 600;
   font-size: 14px;
@@ -895,6 +896,15 @@ select:active {
   color: rgba(0, 0, 0, .5);
 }
 
+.noVNC_info_item button {
+  display: inline-block;
+  padding: 4px 4px;
+  margin: 10px 5px 20px 0;
+  vertical-align: middle;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+}
+
 #noVNC_mouse_coordinates,
 #noVNC_click_stack {
   width: 100%;

app/ui.js

@@ -720,6 +720,39 @@ const UI = {
     },
 
     trackClicks() {
+        document.getElementById('noVNC_click_stack_copy').addEventListener('click', function() {
+            let text = JSON.stringify(UI.canvasInteractionEvents);
+            if (!navigator.clipboard) {
+                var textArea = document.createElement("textarea");
+                textArea.value = text;
+                textArea.style.position="fixed";  //avoid scrolling to bottom
+                document.body.appendChild(textArea);
+                textArea.focus();
+                textArea.select();
+
+                try {
+                    var successful = document.execCommand('copy');
+                    var msg = successful ? 'successful' : 'unsuccessful';
+                    console.log('Fallback: Copying text command was ' + msg);
+                } catch (err) {
+                    console.error('Fallback: Oops, unable to copy', err);
+                }
+
+                document.body.removeChild(textArea);
+                return;
+            }
+            navigator.clipboard.writeText(text).then(function() {
+                console.log('Async: Copying to clipboard was successful!');
+            }, function(err) {
+                console.error('Async: Could not copy text: ', err);
+            });
+        });
+
+        document.getElementById('noVNC_click_stack_clear').addEventListener('click', function() {
+            UI.canvasInteractionEvents = Array();
+            UI.updateInteractionStackUI();
+        });
+
         UI.rfb.canvas.addEventListener('mouseup', function(e) {
             let scaleRatioX = UI.rfb.canvas.width / UI.rfb.canvas.clientWidth;
             let scaleRatioY = UI.rfb.canvas.height / UI.rfb.canvas.clientHeight;

vnc.html

@@ -335,8 +335,10 @@
                 (0, 0)
             </div>
         </div>
-        <div class="noVNC_info_item noVNC_click_stack_container">
+        <div class="noVNC_info_item">
             <span class="noVNC_info_item_label">Interaction stack</span>
+            <button id="noVNC_click_stack_copy">Copy stack to clipboard</button>
+            <button id="noVNC_click_stack_clear">Clear stack</button>
             <ol id="noVNC_click_stack">
             </ol>
         </div>