Add copy button for log entries

Easy way to copy error (and other) messages

Author: JohannesDeml

Assets/WebGLTemplates/Develop/debug-console.css

@@ -10,27 +10,62 @@
     font-family: "Lucida Console", "Courier New", monospace;
 }
 
-#debugConsole p {
+#debugConsole .entry {
     padding: 8px 4px;
     color: rgb(41, 41, 41);
     background-color: rgba(230, 230, 230, 0.9);
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #3d3d3d;
 }
 
-#debugConsole p.info {
+#debugConsole .entry.info {
     color: rgb(41, 50, 60);
     background-color: rgba(172, 204, 224, 0.9);
 }
 
-#debugConsole p.warn {
+#debugConsole .entry.warn {
     color: rgb(82, 70, 3);
     background-color: rgba(231, 196, 41, 0.9);
 }
 
-#debugConsole .error {
+#debugConsole .entry.error {
     color: rgb(97, 15, 9);
     background-color: rgba(221, 46, 46, 0.9);
 }
 
+#debugConsole .entry .copy-button {
+    position: relative;
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    border: 0;
+    background: none;
+}
+
+#debugConsole .entry .copy-button:before {
+    content: 'copied';
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+    width: 60px;
+    height: 20px;
+    padding-top: 4px;
+    text-align: center;
+    color: white;
+    background: #333;
+    border-radius: 10px;
+    opacity: 0;
+    transition: all 0.3s ease-out;
+}
+
+#debugConsole .entry .copy-button.active:before {
+    opacity: 1;
+    right: 30px;
+    transition: all 0.2s ease-out;
+}
+
 /* Debug console toggle button */
 .debugToggleMenu {
     z-index: 101;
@@ -93,4 +128,48 @@
 
 #startupTime dt:after{
     content: ':';
-}
+}
+
+/* Copy icon from https://css.gg/copy */
+.gg-copy {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    transform: scale(var(--ggs,1));
+    width: 14px;
+    height: 18px;
+    border: 2px solid;
+    margin-top: -4px
+}
+
+.gg-copy::after,
+.gg-copy::before {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    position: absolute
+}
+
+.gg-copy::before {
+    background:
+            linear-gradient( to left,
+            currentColor 5px, transparent 0)
+            no-repeat right top/5px 2px,
+            linear-gradient( to left,
+            currentColor 5px, transparent 0)
+            no-repeat left bottom/ 2px 5px;
+    box-shadow: inset -4px -4px 0 -2px;
+    bottom: -6px;
+    right: -6px;
+    width: 14px;
+    height: 18px
+}
+
+.gg-copy::after {
+    width: 6px;
+    height: 2px;
+    background: currentColor;
+    left: 2px;
+    top: 2px;
+    box-shadow: 0 4px 0,0 8px 0
+} 

Assets/WebGLTemplates/Develop/debug-console.js

@@ -5,11 +5,31 @@ function initialzeDebugConsole() {
     document.body.appendChild(consoleDiv);
 
     divLog = (message, className) => {
-        var entry = document.createElement('p');
-        entry.className = className;
-        entry.innerHTML = message;
+        var entry = document.createElement('div');
+        entry.classList.add('entry', className);
         consoleDiv.appendChild(entry);
         consoleDiv.scrollTop = consoleDiv.scrollHeight;
+        
+        var text = document.createElement('p');
+        text.innerHTML = message;
+        entry.appendChild(text);
+        
+        var copyButton = document.createElement('button');
+        copyButton.className = 'copy-button';
+        copyButton.title = 'copy to clipboard';
+        entry.appendChild(copyButton);
+        
+        var copyIcon = document.createElement('div');
+        copyIcon.classList.add('icon', 'gg-copy');
+        copyButton.appendChild(copyIcon);
+        copyButton.addEventListener('click', function () {
+            navigator.clipboard.writeText(message);
+
+            copyButton.classList.add('active');
+            setTimeout(function () {
+                copyButton.classList.remove('active');
+            }, 1500);
+        });
     };
 
     defaultConsoleLog = console.log;