feat: add 'copy css' button to tools/border-image-generator (mdn#174)

* feat: add 'click to copy CSS' button to tools/border-image-generator

* fix: replace `mousedown` listener with `onclick`

* `mousedown` triggers for both right and middle-clicks, which does not align with the UX of a button. `onclick` is a more 'canonical' option.

* fix: correct `click` listener typo

* Fix code style

---------

Co-authored-by: Vadim Makeev <vmakeev@mozilla.com>

Author: webcrawls

tools/border-image-generator/index.html

@@ -148,7 +148,9 @@
         </div>
 
         <div id="output" class="category">
-          <div class="title">CSS Code</div>
+          <div class="title">
+            CSS Code <button type="button" id="copy-css">Click to Copy</button>
+          </div>
           <div class="css-property">
             <span class="name"> border-image-slice: </span>
             <span id="out-border-slice" class="value"> </span>

tools/border-image-generator/script.js

@@ -1267,6 +1267,25 @@ var BorderImage = (function BorderImage() {
       }
     };
 
+    var initCodeOutput = function initCodeOutput() {
+      var copyButton = getElemById("copy-css");
+
+      var copy = function copy() {
+        let output = "";
+
+        for (const property of document.querySelectorAll(".css-property")) {
+          const name = property.querySelector(".name").innerText;
+          const value = property.querySelector(".value").innerText;
+
+          output += name + " " + value + "\n";
+        }
+
+        navigator.clipboard.writeText(output);
+      };
+
+      copyButton.addEventListener("click", copy);
+    };
+
     var init = function init() {
       var gallery = (subject = getElemById("subject"));
       preview = getElemById("preview");
@@ -1281,6 +1300,7 @@ var BorderImage = (function BorderImage() {
       initBorderSliceControls();
       initBorderWidthControls();
       initBorderOutsetControls();
+      initCodeOutput();
 
       var elem = document.querySelectorAll(".guideline");
       var size = elem.length;

tools/border-image-generator/styles.css

@@ -972,6 +972,25 @@ body[data-move="Y"] {
   color: #aaa;
 }
 
+#output .title #copy-css {
+  float: right;
+
+  background-color: unset;
+  color: inherit;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-shadow: 0 0 3px 0 #bababa;
+}
+
+#controls .category:hover #copy-css:not(:hover) {
+  color: #aaa;
+}
+
+#output .title #copy-css:hover {
+  cursor: pointer;
+  color: #777;
+}
+
 #output .css-property {
   width: 100%;
   margin: 0;