From 4c28627459fd0cb7e77b18085120edc64bc38e8b Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Wed, 28 Aug 2019 16:14:13 +0100
Subject: [PATCH] Added pulse to Background Magic button to draw attention.

---
 src/web/App.mjs                           |  6 ++----
 src/web/html/index.html                   |  2 +-
 src/web/stylesheets/layout/_io.css        | 23 +++++++++++++++++++++++
 src/web/stylesheets/layout/_structure.css |  4 +++-
 src/web/waiters/OutputWaiter.mjs          |  2 ++
 5 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/web/App.mjs b/src/web/App.mjs
index 60491ef4..606b2aff 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -633,7 +633,7 @@ class App {
      * Pops up a message to the user and writes it to the console log.
      *
      * @param {string} str - The message to display (HTML supported)
-     * @param {number} timeout - The number of milliseconds before the alert closes automatically
+     * @param {number} [timeout=0] - The number of milliseconds before the alert closes automatically
      *     0 for never (until the user closes it)
      * @param {boolean} [silent=false] - Don't show the message in the popup, only print it to the
      *     console
@@ -646,14 +646,12 @@ class App {
      * // Pops up a box with the message "Happy Christmas!" that will disappear after 5 seconds.
      * this.alert("Happy Christmas!", 5000);
      */
-    alert(str, timeout, silent) {
+    alert(str, timeout=0, silent=false) {
         const time = new Date();
 
         log.info("[" + time.toLocaleString() + "] " + str);
         if (silent) return;
 
-        timeout = timeout || 0;
-
         this.currentSnackbar = $.snackbar({
             content: str,
             timeout: timeout,
diff --git a/src/web/html/index.html b/src/web/html/index.html
index 13b06d61..419f726d 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -709,7 +709,7 @@
                                 <br>
                                 <pre id="report-bug-info"></pre>
                                 <br>
-                                <a class="btn btn-primary" href="https://github.com/gchq/CyberChef/issues/new" role="button">Raise issue on GitHub</a>
+                                <a class="btn btn-primary" href="https://github.com/gchq/CyberChef/issues/new/choose" role="button">Raise issue on GitHub</a>
                             </div>
                             <div role="tabpanel" class="tab-pane" id="about" style="padding: 20px;">
                                 <h5><strong>What</strong></h5>
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index d7d628cb..2c8be70e 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -337,6 +337,29 @@
     fill: var(--primary-font-colour);
 }
 
+.pulse {
+    box-shadow: 0 0 0 0 rgba(90, 153, 212, .3);
+    animation: pulse 1.5s 1;
+}
+
+.pulse:hover {
+    animation-play-state: paused;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    70% {
+        transform: scale(1.1);
+        box-shadow: 0 0 0 20px rgba(90, 153, 212, 0);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
+    }
+}
+
 #input-find-options,
 #output-find-options {
     display: flex;
diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css
index 77902d09..3eed5e2d 100755
--- a/src/web/stylesheets/layout/_structure.css
+++ b/src/web/stylesheets/layout/_structure.css
@@ -39,7 +39,9 @@ div#output {
 
 .split {
     box-sizing: border-box;
-    overflow: auto;
+    /* overflow: auto;
+    Removed to enable Background Magic button pulse to overflow.
+    Replace this rule if it seems to be causing problems. */
     position: relative;
 }
 
diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs
index 6bbe8f4a..4a08fe8d 100755
--- a/src/web/waiters/OutputWaiter.mjs
+++ b/src/web/waiters/OutputWaiter.mjs
@@ -1083,6 +1083,7 @@ class OutputWaiter {
         magicButton.setAttribute("data-original-title", `<i>${opSequence}</i> will produce <span class="data-text">"${Utils.escapeHtml(Utils.truncate(result), 30)}"</span>`);
         magicButton.setAttribute("data-recipe", JSON.stringify(recipeConfig), null, "");
         magicButton.classList.remove("hidden");
+        magicButton.classList.add("pulse");
     }
 
 
@@ -1092,6 +1093,7 @@ class OutputWaiter {
     hideMagicButton() {
         const magicButton = document.getElementById("magic");
         magicButton.classList.add("hidden");
+        magicButton.classList.remove("pulse");
         magicButton.setAttribute("data-recipe", "");
         magicButton.setAttribute("data-original-title", "Magic!");
     }