Add copy-to-clipboard button to the build console output (#8960)

* Add copy-to-clipboard button to the build console output

* Fix copy button did not work with progressive output

* Use getElementById instead of querySelector

* Update copyButton documentation

* Update core/src/main/resources/lib/layout/copyButton.jelly

Co-authored-by: Alexander Brandes <brandes.alexander@web.de>

---------

Co-authored-by: Alexander Brandes <brandes.alexander@web.de>
Co-authored-by: Alexander Brandes <mc.cache@web.de>

core/src/main/resources/hudson/model/Run/console.jelly

@@ -33,7 +33,10 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
      <l:breadcrumb title="${%Console Output}" />
     <l:main-panel>
-      <t:buildCaption>${%Console Output}</t:buildCaption>
+      <t:buildCaption>
+        ${%Console Output}
+        <l:copyButton message="${%successfullyCopied}" tooltip="${%clickToCopy}" ref="out"/>
+      </t:buildCaption>
       <j:set var="threshold" value="${h.getSystemProperty('hudson.consoleTailKB')?:'150'}" />
       <!-- Show at most last 150KB (can override with system property) unless consoleFull is set -->
       <j:set var="offset" value="${empty(consoleFull) ? it.logText.length()-threshold*1024 : 0}" />
@@ -60,7 +63,7 @@ THE SOFTWARE.
         </j:when>
         <!-- output is completed now. -->
         <j:otherwise>
-          <pre class="console-output">
+          <pre class="console-output" id="out">
             <st:getOutput var="output" />
             <j:whitespace>${it.writeLogTo(offset,output)}</j:whitespace>
           </pre>

core/src/main/resources/hudson/model/Run/console.properties

@@ -21,3 +21,5 @@
 # THE SOFTWARE.
 
 skipSome=Skipping {0,number,integer} KB.. <a href="{1}">Full Log</a>
+clickToCopy=Click to copy
+successfullyCopied=Copied to clipboard

core/src/main/resources/lib/layout/copyButton.jelly

@@ -26,7 +26,7 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:i="jelly:fmt" xmlns:x="jelly:xml">
   <st:documentation>
-    Button that copies text into the user's clipboard upon click
+    Button that copies text into the user's clipboard upon click, either <code>text</code> or <code>ref</code> is required.
 
     <st:attribute name="text" use="required">
       Text to be copied into the clipboard.
@@ -43,11 +43,16 @@ THE SOFTWARE.
     <st:attribute name="clazz">
       Additional CSS class names
     </st:attribute>
+    <st:attribute name="ref" use="required">
+      The id of the target element to be copied
+      @since TODO
+    </st:attribute>
   </st:documentation>
 
   <!-- 'copy-button' class is for backwards compatability -->
   <button class="copy-button jenkins-button ${attrs.iconOnly == 'true' ? 'jenkins-button--tertiary' : ''} jenkins-copy-button ${attrs.clazz}"
           text="${attrs.text}"
+          ref="${attrs.ref}"
           message="${attrs.message ?: '%Copied'}"
           tooltip="${attrs.tooltip ?: '%Copy'}"
           type="button">

core/src/main/resources/lib/layout/copyButton/copyButton.js

@@ -5,9 +5,18 @@ Behaviour.specify(
   function (copyButton) {
     copyButton.addEventListener("click", () => {
       if (isSecureContext) {
+        var text = copyButton.getAttribute("text");
+        if (copyButton.hasAttribute("ref")) {
+          var ref = copyButton.getAttribute("ref");
+          var target = document.getElementById(ref);
+          if (target) {
+            text = target.innerText;
+          }
+        }
+
         // Copy the text to the clipboard
         navigator.clipboard
-          .writeText(copyButton.getAttribute("text"))
+          .writeText(text)
           .then(() => {
             // Show the completion message
             hoverNotification(copyButton.getAttribute("message"), copyButton);