chg: move to bootstrap4, toggle legend

Pipfile

@@ -11,7 +11,6 @@ har2tree = {editable = true,git = "https://github.com/viper-framework/har2tree.g
 pysanejs = {editable = true,git = "https://github.com/CIRCL/PySaneJS.git"}
 requests = "*"
 flask = "*"
-flask-bootstrap = "*"
 gunicorn = {extras = ["eventlet"],version = "*"}
 lookyloo = {editable = true,path = "."}
 cchardet = "*"
@@ -19,6 +18,7 @@ redis = "*"
 pylookyloo = {editable = true,path = "./client"}
 beautifulsoup4 = "*"
 Jinja2 = ">=2.10.1" # CVE-2019-10906
+bootstrap-flask = "*"
 
 [requires]
 python_version = "3.6"

Pipfile.lock

@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "e45244dace1dbbaf712a9c3aefea7e4df013992eb9d4ea696998fcbfeeb95027"
+            "sha256": "66ef41ece712d33e666d4684670c5779fac61dad2530d5fc573e08e126663550"
         },
         "pipfile-spec": 6,
         "requires": {
@@ -46,6 +46,14 @@
             "index": "pypi",
             "version": "==4.7.1"
         },
+        "bootstrap-flask": {
+            "hashes": [
+                "sha256:eccca4891d4fe0cd98f7118ef11599356152f53b4545579b67269b7b5bf8f18a",
+                "sha256:fe7de577eb4ea06273760331c3294a13f6063a275e59e899e9ebcc8b8304502c"
+            ],
+            "index": "pypi",
+            "version": "==1.0.10"
+        },
         "cchardet": {
             "hashes": [
                 "sha256:079aa02a14072874d943a671ba778a9def5b0e3cedc2ac9f59308526cfb31472",
@@ -174,13 +182,6 @@
             ],
             "version": "==1.16.0"
         },
-        "dominate": {
-            "hashes": [
-                "sha256:4076735c0745fe771e57b2313dbb4bfeec42731816ee23cee509f66e8912aa51",
-                "sha256:4b9fd42d2824b79761799590697db45bf93daad511b130c50513af38da33df9b"
-            ],
-            "version": "==2.3.5"
-        },
         "ete3": {
             "hashes": [
                 "sha256:870a3d4b496a36fbda4b13c7c6b9dfa7638384539ae93551ec7acb377fb9c385"
@@ -202,13 +203,6 @@
             "index": "pypi",
             "version": "==1.0.2"
         },
-        "flask-bootstrap": {
-            "hashes": [
-                "sha256:cb08ed940183f6343a64e465e83b3a3f13c53e1baabb8d72b5da4545ef123ac8"
-            ],
-            "index": "pypi",
-            "version": "==3.3.7.1"
-        },
         "greenlet": {
             "hashes": [
                 "sha256:000546ad01e6389e98626c1367be58efa613fa82a1be98b0c6fc24b563acc6d0",
@@ -247,7 +241,7 @@
         "har2tree": {
             "editable": true,
             "git": "https://github.com/viper-framework/har2tree.git",
-            "ref": "ef775ee0c788ce80a0bda9efdd0c612c1dddca6c"
+            "ref": "a4dd3cc1a24972acbe808444a31553170c9b82c2"
         },
         "hyperlink": {
             "hashes": [
@@ -489,16 +483,10 @@
         },
         "urllib3": {
             "hashes": [
-                "sha256:61bf29cada3fc2fbefad4fdf059ea4bd1b4a86d2b6d15e1c7c0b582b9752fe39",
+                "sha256:4c291ca23bbb55c76518905869ef34bdd5f0e46af7afe6861e8375643ffee1a0",
-                "sha256:de9529817c93f27c8ccbfead6985011db27bd0ddfcdb2d86f3f663385c6a9c22"
+                "sha256:9a247273df709c4fedb38c711e44292304f73f39ab01beda9f6b9fc375669ac3"
             ],
-            "version": "==1.24.1"
+            "version": "==1.24.2"
-        },
-        "visitor": {
-            "hashes": [
-                "sha256:2c737903b2b6864ebc6167eef7cf3b997126f1aa94bdf590f90f1436d23e480a"
-            ],
-            "version": "==0.1.3"
         },
         "w3lib": {
             "hashes": [

website/web/static/tree.css

@@ -46,6 +46,16 @@
   border: 2px solid;
 }
 
+#legend_container {
+  position: fixed;
+  bottom: 5px;
+  left: 5px;
+  padding-top: 5px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+  padding-left: 5px;
+}
+
 #legend {
   position: fixed;
   bottom: 5px;
@@ -90,3 +100,13 @@
 	font: 15px sans-serif;
 	z-index: 2;
 }
+
+hr {
+  display: block;
+  margin-top: 0.1em;
+  margin-bottom: 0.5em;
+  margin-left: auto;
+  margin-right: auto;
+  border-style: inset;
+  border-width: 1px;
+}

website/web/templates/main.html

@@ -1,17 +1,30 @@
-{% extends "bootstrap/base.html" %}
+<!doctype html>
+<html lang="en">
+  <head>
+    {% block head %}
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
 
-{% block scripts %}
+    {% block styles %}
-    {{ super() }}
+    <!-- Bootstrap CSS -->
-    <script src='{{ url_for('static', filename='FileSaver.js') }}'></script>
+    {{ bootstrap.load_css() }}
-    <script src='{{ url_for('static', filename='d3.v5.min.js') }}'></script>
+	<link rel="stylesheet" href="{{ url_for('static', filename='tree.css') }}">
-{% endblock %}
+    {% endblock %}
 
-{% block head %}
+    <title>Your page title</title>
-    {{ super() }}
+    {% endblock %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='tree.css') }}">
+  </head>
-    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+  <body>
-{% endblock %}
+    <!-- Your page contont -->
+    {% block content %}{% endblock%}
 
-{% block content %}
+    {% block scripts %}
-    {{ super() }}
+    <!-- Optional JavaScript -->
-{% endblock %}
+    {{ bootstrap.load_js() }}
+	<script src='{{ url_for('static', filename='FileSaver.js') }}'></script>
+	<script src='{{ url_for('static', filename='d3.v5.min.js') }}'></script>
+    {% endblock %}
+  </body>
+</html>

website/web/templates/tree.html

@@ -10,54 +10,80 @@
 {% block content %}
 {{super()}}
 <script>
-	var treeData = {{ tree_json | safe }};
+    var treeData = {{ tree_json | safe }};
 </script>
 
 <div id=lookyloo-icon></div>
 <div id=screenshot>
     <img src="{{ url_for('image', tree_uuid=tree_uuid) }}" class="thumbnail" height="300" width="200" overflow="hidden"/>
 </div>
-<div id=legend>
-    <img src="{{ url_for('static', filename='javascript.png') }}"
-         alt="JavaScript" height="20" width="20"> Javascript </br>
 
-    <img src="{{ url_for('static', filename='cookie_received.png') }}"
+<div id="legend_container" class="container">
-         alt="Cookie received" height="20" width="20"> Cookie received</br>
+    <div id=legend class="collapse show">
+        <div>
+            <center>
+            <div style="display: inline">
+                <b>Legend</b>
+            </div>
+            <div style="display: inline;">
+                <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#legend">
+                    <img src="{{ url_for('static', filename='minimize2.jpg') }}" alt="Minimize legend" height="25" width="25">
+                </button>
+            </div>
+            </center>
+        </div>
+        <hr/>
+        <img src="{{ url_for('static', filename='javascript.png') }}"
+             alt="JavaScript" height="20" width="20"> Javascript </br>
 
-    <img src="{{ url_for('static', filename='cookie_read.png') }}"
+        <img src="{{ url_for('static', filename='cookie_received.png') }}"
-         alt="Cookie read" height="20" width="20"> Cookie read</br>
+             alt="Cookie received" height="20" width="20"> Cookie received</br>
 
-    <img src="{{ url_for('static', filename='redirect.png') }}"
+        <img src="{{ url_for('static', filename='cookie_read.png') }}"
-         alt="Redirect" height="20" width="20"> Redirect</br>
+             alt="Cookie read" height="20" width="20"> Cookie read</br>
 
-    <img src="{{ url_for('static', filename='font.png') }}"
+        <img src="{{ url_for('static', filename='redirect.png') }}"
-         alt="Font" height="20" width="20"> Font</br>
+             alt="Redirect" height="20" width="20"> Redirect</br>
 
-    <img src="{{ url_for('static', filename='html.png') }}"
+        <img src="{{ url_for('static', filename='font.png') }}"
-         alt="HTML" height="20" width="20"> HTML</br>
+             alt="Font" height="20" width="20"> Font</br>
 
-    <img src="{{ url_for('static', filename='json.png') }}"
+        <img src="{{ url_for('static', filename='html.png') }}"
-         alt="JSON" height="20" width="20"> JSON</br>
+             alt="HTML" height="20" width="20"> HTML</br>
 
-    <img src="{{ url_for('static', filename='css.png') }}"
+        <img src="{{ url_for('static', filename='json.png') }}"
-         alt="CSS" height="20" width="20"> CSS</br>
+             alt="JSON" height="20" width="20"> JSON</br>
 
-    <img src="{{ url_for('static', filename='exe.png') }}"
+        <img src="{{ url_for('static', filename='css.png') }}"
-        alt="EXE" height="20" width="20"> EXE</br>
+             alt="CSS" height="20" width="20"> CSS</br>
 
-    <img src="{{ url_for('static', filename='img.png') }}"
+        <img src="{{ url_for('static', filename='exe.png') }}"
-        alt="Image" height="20" width="20"> Image</br>
+            alt="EXE" height="20" width="20"> EXE</br>
 
-    <img src="{{ url_for('static', filename='video.png') }}"
+        <img src="{{ url_for('static', filename='img.png') }}"
-        alt="Video" height="20" width="20"> Video</br>
+            alt="Image" height="20" width="20"> Image</br>
 
-    <img src="{{ url_for('static', filename='ifr.png') }}"
+        <img src="{{ url_for('static', filename='video.png') }}"
-        alt="iFrame" height="20" width="20"> iFrame</br>
+            alt="Video" height="20" width="20"> Video</br>
 
-    <img src="{{ url_for('static', filename='wtf.png') }}"
+        <img src="{{ url_for('static', filename='ifr.png') }}"
-        alt="Content type not set/unknown" height="20" width="20"> Content type not set/unknown</br>
+            alt="iFrame" height="20" width="20"> iFrame</br>
 
+        <img src="{{ url_for('static', filename='wtf.png') }}"
+            alt="Content type not set/unknown" height="20" width="20"> Content type not set/unknown</br>
+    </div>
+    <div>
+        <div style="display: inline;">
+        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#legend">
+            <img src="{{ url_for('static', filename='maximize2.jpg') }}" alt="Minimize legend" height="40" width="40">
+        </button>
+        </div>
+        <div style="display: inline">
+            <b>Legend</b>
+        </div>
+    </div>
 </div>
+
 <div id=tree-details><center><b>Tree details</b></center></br>
     <b>Root URL</b>: {{ root_url }}</br>
     <b>Start time</b>: {{ start_time }}</br>