Started updating Bootstrap to v4

package-lock.json

@@ -1267,9 +1267,9 @@
       }
     },
     "bootstrap": {
-      "version": "3.3.7",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz",
-      "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E="
+      "integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA=="
     },
     "bootstrap-colorpicker": {
       "version": "2.5.2",
@@ -8672,6 +8672,11 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.12.9",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.9.tgz",
+      "integrity": "sha1-DfvC3/lsRRuzMu3Pz6r1ZtMx1bM="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",

package.json

@@ -71,7 +71,7 @@
   "dependencies": {
     "babel-polyfill": "^6.26.0",
     "bignumber.js": "^6.0.0",
-    "bootstrap": "^3.3.7",
+    "bootstrap": "^4.0.0",
     "bootstrap-colorpicker": "^2.5.2",
     "bootstrap-switch": "^3.3.4",
     "crypto-api": "^0.8.0",
@@ -98,6 +98,7 @@
     "node-md6": "^0.1.0",
     "nwmatcher": "^1.4.3",
     "otp": "^0.1.3",
+    "popper.js": "^1.12.9",
     "sladex-blowfish": "^0.8.1",
     "sortablejs": "^1.7.0",
     "split.js": "^1.3.5",

src/web/HTMLOperation.js

@@ -50,8 +50,9 @@ HTMLOperation.prototype.toStubHtml = function(removeIcon) {
     let html = "<li class='operation'";
 
     if (this.description) {
-        html += " data-container='body' data-toggle='popover' data-placement='auto right'\
+        html += " data-container='body' data-toggle='popover' data-placement='right'\
-            data-content=\"" + this.description + "\" data-html='true' data-trigger='hover'";
+            data-content=\"" + this.description + "\" data-html='true' data-trigger='hover'\
+            data-boundary='viewport'";
     }
 
     html += ">" + this.name;

src/web/OperationsWaiter.js

@@ -179,7 +179,7 @@ OperationsWaiter.prototype.enableOpsListPopovers = function(el) {
             setTimeout(function() {
                 // Determine if the popover associated with this element is being hovered over
                 if ($(_this).data("bs.popover") &&
-                    ($(_this).data("bs.popover").$tip && !$(_this).data("bs.popover").$tip.is(":hover"))) {
+                    ($(_this).data("bs.popover").tip && !$($(_this).data("bs.popover").tip).is(":hover"))) {
                     $(_this).popover("hide");
                 }
             }, 50);

src/web/html/index.html

@@ -108,15 +108,15 @@
             <span id="alert-content"></span>
         </div>
         <div id="content-wrapper">
-            <div id="banner">
+            <div id="banner" class="row">
-                <div class="col-md-4" style="text-align: left; padding-left: 10px;">
+                <div class="col" style="text-align: left; padding-left: 10px;">
                     <% if (htmlWebpackPlugin.options.inline) { %>
                         <span>Version <%= htmlWebpackPlugin.options.version %></span>
                     <% } else { %>
                         <a href="cyberchef.htm" download>Download CyberChef<img aria-hidden="true" src="<%- require('../static/images/download-24x24.png') %>" alt="Download Icon"/></a>
                     <% } %>
                 </div>
-                <div class="col-md-4" style="text-align: center;">
+                <div class="col" style="text-align: center;">
                     <span id="notice">
                         <script type="text/javascript">
                             // Must be text/javascript rather than application/javascript otherwise IE won't recognise it...
@@ -128,7 +128,7 @@
                         <noscript>JavaScript is not enabled. Good luck.</noscript>
                     </span>
                 </div>
-                <div class="col-md-4" style="text-align: right; padding-right: 0;">
+                <div class="col" style="text-align: right; padding-right: 0;">
                     <a href="#" id="options">Options<img aria-hidden="true" src="<%- require('../static/images/settings-22x22.png') %>" alt="Settings Icon"/></a>
                     <a href="#" id="support" data-toggle="modal" data-target="#support-modal">About / Support<img aria-hidden="true" src="<%- require('../static/images/help-22x22.png') %>" alt="Question Mark Icon"/></a>
                 </div>

src/web/stylesheets/index.js

@@ -10,7 +10,7 @@
 import "highlight.js/styles/vs.css";
 
 /* Frameworks */
-import "./vendors/bootstrap.less";
+import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
 import "bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
 

src/web/stylesheets/layout/_banner.css

@@ -14,6 +14,7 @@
     border-bottom: 1px solid var(--primary-border-colour);
     color: var(--banner-font-colour);
     background-color: var(--banner-bg-colour);
+    margin: 0;
 }
 
 #banner img {

src/web/stylesheets/utils/_overrides.css

@@ -143,8 +143,8 @@ optgroup {
     border-color: var(--popover-border-colour);
 }
 
-.popover-content {
+.popover-body {
-    max-height: 90vh;
+    max-height: 95vh;
     overflow-y: auto;
 }