From 90ed62add26c7dd0d184298b2fe11795e4245da9 Mon Sep 17 00:00:00 2001
From: Matt C <matt@artemisbot.uk>
Date: Tue, 25 Jul 2017 11:49:23 +0100
Subject: [PATCH 1/4] Fixes gchq/CyberChef#137

Changes data-trigger to focus so scrolling works and sets max height.
---
 src/web/HTMLOperation.js                 | 2 +-
 src/web/stylesheets/utils/_overrides.css | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/web/HTMLOperation.js b/src/web/HTMLOperation.js
index ea0d4397..499faab5 100755
--- a/src/web/HTMLOperation.js
+++ b/src/web/HTMLOperation.js
@@ -51,7 +51,7 @@ HTMLOperation.prototype.toStubHtml = function(removeIcon) {
 
     if (this.description) {
         html += " data-container='body' data-toggle='popover' data-placement='auto right'\
-            data-content=\"" + this.description + "\" data-html='true' data-trigger='hover'";
+            data-content=\"" + this.description + "\" data-html='true' data-trigger='focus' tabindex='0'";
     }
 
     html += ">" + this.name;
diff --git a/src/web/stylesheets/utils/_overrides.css b/src/web/stylesheets/utils/_overrides.css
index 8957071a..e060db7d 100755
--- a/src/web/stylesheets/utils/_overrides.css
+++ b/src/web/stylesheets/utils/_overrides.css
@@ -140,6 +140,8 @@ optgroup {
 .popover {
     background-color: var(--popover-background);
     border-color: var(--popover-border-colour);
+    max-height: 100%;
+    overflow-y: auto;
 }
 
 

From 33ecbfa95b96dbce1e815c08ad0db9a9354f7c5f Mon Sep 17 00:00:00 2001
From: Matt C <matt@artemisbot.uk>
Date: Fri, 28 Jul 2017 21:47:47 +0100
Subject: [PATCH 2/4] Fixed arrow issue

---
 src/web/stylesheets/utils/_overrides.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/web/stylesheets/utils/_overrides.css b/src/web/stylesheets/utils/_overrides.css
index e060db7d..36069cd5 100755
--- a/src/web/stylesheets/utils/_overrides.css
+++ b/src/web/stylesheets/utils/_overrides.css
@@ -140,10 +140,12 @@ optgroup {
 .popover {
     background-color: var(--popover-background);
     border-color: var(--popover-border-colour);
-    max-height: 100%;
-    overflow-y: auto;
 }
 
+.popover-content {
+    max-height: 90vh;
+    overflow-y: auto;
+}
 
 .popover.right>.arrow {
     border-right-color: var(--popover-border-colour);

From 9ee0964d0e223689bb462844b5a244bbab20f8b8 Mon Sep 17 00:00:00 2001
From: Matt C <matt@artemisbot.uk>
Date: Sat, 29 Jul 2017 00:45:41 +0100
Subject: [PATCH 3/4] Fixed hover issue - now allows scrolling

---
 src/web/HTMLOperation.js    |  4 ++--
 src/web/OperationsWaiter.js | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/web/HTMLOperation.js b/src/web/HTMLOperation.js
index 499faab5..aae9f282 100755
--- a/src/web/HTMLOperation.js
+++ b/src/web/HTMLOperation.js
@@ -50,8 +50,8 @@ HTMLOperation.prototype.toStubHtml = function(removeIcon) {
     let html = "<li class='operation'";
 
     if (this.description) {
-        html += " data-container='body' data-toggle='popover' data-placement='auto right'\
-            data-content=\"" + this.description + "\" data-html='true' data-trigger='focus' tabindex='0'";
+        html += " data-container='body' data-placement='auto right'\
+            data-content=\"" + this.description + "\"";
     }
 
     html += ">" + this.name;
diff --git a/src/web/OperationsWaiter.js b/src/web/OperationsWaiter.js
index 992b737e..78319a0e 100755
--- a/src/web/OperationsWaiter.js
+++ b/src/web/OperationsWaiter.js
@@ -155,7 +155,22 @@ OperationsWaiter.prototype.getSelectedOp = function(ops) {
  */
 OperationsWaiter.prototype.opListCreate = function(e) {
     this.manager.recipe.createSortableSeedList(e.target);
-    $("[data-toggle=popover]").popover();
+    // Allows popover to gain focus for eg. pressing buttons/scrolling
+    $(".operation").popover({trigger: "manual", html: true, animation: true})
+        .on("mouseenter", function () {
+            const _this = this;
+            $(this).popover("show");
+            $(".popover").on("mouseleave", function () {
+                $(_this).popover("hide");
+            });
+        }).on("mouseleave", function () {
+            const _this = this;
+            setTimeout(function () {
+                if (!$(".popover:hover").length) {
+                    $(_this).popover("hide");
+                }
+            }, 50);
+        });
 };
 
 

From e8e5eb9c53993521e886b56ad31bfeac7eda3f87 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Tue, 1 Aug 2017 19:23:30 +0000
Subject: [PATCH 4/4] Fixed some edge cases for popover triggering

---
 src/web/HTMLOperation.js    |  4 ++--
 src/web/OperationsWaiter.js | 23 ++++++++++++++++++-----
 src/web/RecipeWaiter.js     |  5 ++---
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/web/HTMLOperation.js b/src/web/HTMLOperation.js
index aae9f282..ea0d4397 100755
--- a/src/web/HTMLOperation.js
+++ b/src/web/HTMLOperation.js
@@ -50,8 +50,8 @@ HTMLOperation.prototype.toStubHtml = function(removeIcon) {
     let html = "<li class='operation'";
 
     if (this.description) {
-        html += " data-container='body' data-placement='auto right'\
-            data-content=\"" + this.description + "\"";
+        html += " data-container='body' data-toggle='popover' data-placement='auto right'\
+            data-content=\"" + this.description + "\" data-html='true' data-trigger='hover'";
     }
 
     html += ">" + this.name;
diff --git a/src/web/OperationsWaiter.js b/src/web/OperationsWaiter.js
index 78319a0e..168cff9e 100755
--- a/src/web/OperationsWaiter.js
+++ b/src/web/OperationsWaiter.js
@@ -155,9 +155,20 @@ OperationsWaiter.prototype.getSelectedOp = function(ops) {
  */
 OperationsWaiter.prototype.opListCreate = function(e) {
     this.manager.recipe.createSortableSeedList(e.target);
-    // Allows popover to gain focus for eg. pressing buttons/scrolling
-    $(".operation").popover({trigger: "manual", html: true, animation: true})
-        .on("mouseenter", function () {
+    this.enableOpsListPopovers(e.target);
+};
+
+
+/**
+ * Sets up popovers, allowing the popover itself to gain focus which enables scrolling
+ * and other interactions.
+ *
+ * @param {Element} el - The element to start selecting from
+ */
+OperationsWaiter.prototype.enableOpsListPopovers = function(el) {
+    $(el).find("[data-toggle=popover]").addBack("[data-toggle=popover]")
+        .popover({trigger: "manual"})
+        .on("mouseenter", function() {
             const _this = this;
             $(this).popover("show");
             $(".popover").on("mouseleave", function () {
@@ -165,8 +176,10 @@ OperationsWaiter.prototype.opListCreate = function(e) {
             });
         }).on("mouseleave", function () {
             const _this = this;
-            setTimeout(function () {
-                if (!$(".popover:hover").length) {
+            setTimeout(function() {
+                // Determine if the popover associated with this element is being hovered over
+                if ($(_this).data("bs.popover") &&
+                    !$(_this).data("bs.popover").$tip.is(":hover")) {
                     $(_this).popover("hide");
                 }
             }, 50);
diff --git a/src/web/RecipeWaiter.js b/src/web/RecipeWaiter.js
index 63233127..ea09d325 100755
--- a/src/web/RecipeWaiter.js
+++ b/src/web/RecipeWaiter.js
@@ -93,7 +93,7 @@ RecipeWaiter.prototype.createSortableSeedList = function(listEl) {
             // Removes popover element and event bindings from the dragged operation but not the
             // event bindings from the one left in the operations list. Without manually removing
             // these bindings, we cannot re-initialise the popover on the stub operation.
-            $(evt.item).popover("destroy");
+            $(evt.item).popover("destroy").removeData("bs.popover").off("mouseenter").off("mouseleave");
             $(evt.clone).off(".popover").removeData("bs.popover");
             evt.item.setAttribute("data-toggle", "popover-disabled");
         },
@@ -120,8 +120,7 @@ RecipeWaiter.prototype.opSortEnd = function(evt) {
 
     // Reinitialise the popover on the original element in the ops list because for some reason it
     // gets destroyed and recreated.
-    $(evt.clone).popover();
-    $(evt.clone).children("[data-toggle=popover]").popover();
+    this.manager.ops.enableOpsListPopovers(evt.clone);
 
     if (evt.item.parentNode.id !== "rec-list") {
         return;