Add infoboxes on the tree view

lookyloo/__init__.py

@@ -28,7 +28,7 @@ def load_tree(report_dir):
     ct = CrawledTree(har_files)
     ct.find_parents()
     ct.join_trees()
-    return ct.jsonify()
+    return ct.jsonify(), ct.start_time.isoformat(), ct.user_agent, ct.root_url
 
 
 @app.route('/scrape', methods=['GET', 'POST'])
@@ -66,8 +66,9 @@ def get_report_dirs():
 @app.route('/tree/<int:tree_id>', methods=['GET'])
 def tree(tree_id):
     report_dir = get_report_dirs()[tree_id]
-    tree_json = load_tree(report_dir)
+    tree_json, start_time, user_agent, root_url = load_tree(report_dir)
-    return render_template('tree.html', tree_json=tree_json)
+    return render_template('tree.html', tree_json=tree_json, start_time=start_time,
+                           user_agent=user_agent, root_url=root_url)
 
 
 @app.route('/', methods=['GET'])

lookyloo/static/tree.css

@@ -13,3 +13,39 @@
   stroke: #ccc;
   stroke-width: 2px;
 }
+
+#lookyloo-icon {
+  position: fixed;
+  top: 5px;
+  left: 5px;
+  background-image: url("lookyloo.jpeg");
+  background-size: cover;
+  width: 200px;
+  height: 110px;
+  resize: both;
+  border: 2px solid;
+}
+
+#legend {
+  position: fixed;
+  bottom: 5px;
+  left: 5px;
+  background: white;
+  border: 2px solid;
+  padding-top: 5px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+  padding-left: 5px;
+}
+
+#tree-details {
+  position: fixed;
+  bottom: 5px;
+  right: 5px;
+  background: white;
+  border: 2px solid;
+  padding-top: 5px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+  padding-left: 5px;
+}

lookyloo/static/tree.js

@@ -334,4 +334,3 @@ function update(source) {
     update(d);
   }
 }
-

lookyloo/templates/main.html

@@ -10,3 +10,7 @@
     {{ super() }}
     <link rel="stylesheet" href="{{ url_for('static', filename='tree.css') }}">
 {% endblock %}
+
+{% block content %}
+    {{ super() }}
+{% endblock %}

lookyloo/templates/tree.html

@@ -5,7 +5,32 @@
 
 
 {% block content %}
+{{super()}}
 <script>
 	var treeData = {{ tree_json | safe }};
 </script>
-{% endblock %}
+
+<div id=lookyloo-icon></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') }}"
+         alt="Cookie received" height="20" width="20"> Cookie received</br>
+
+    <img src="{{ url_for('static', filename='cookie_read.png') }}"
+         alt="Cookie read" height="20" width="20"> Cookie read</br>
+
+    <img src="{{ url_for('static', filename='redirect.png') }}"
+         alt="Redirect" height="20" width="20"> Redirect</br>
+
+    <img src="{{ url_for('static', filename='cookie_in_url.png') }}"
+         alt="Cookie in URL" height="20" width="20"> Cookie in URL</br>
+</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>
+    <b>User Agent</b>: {{ user_agent }}</br>
+</div>
+
+{% endblock content %}