From 01471bdcde9bb44d2a8f3a243f645e6044f31bc6 Mon Sep 17 00:00:00 2001
From: Shing Lyu <shing.lyu@gmail.com>
Date: Wed, 19 Oct 2016 11:44:48 +0800
Subject: [PATCH] Various layout fix to improve readability

---
 etc/layout_viewer/css/main.css | 18 +++++++++++++-----
 etc/layout_viewer/viewer.html  | 27 +++++++++------------------
 2 files changed, 22 insertions(+), 23 deletions(-)
diff --git a/etc/layout_viewer/css/main.css b/etc/layout_viewer/css/main.css
index ad0566acc48..33b85a97249 100644
--- a/etc/layout_viewer/css/main.css
+++ b/etc/layout_viewer/css/main.css
@@ -1,9 +1,17 @@
-body {
-    padding-top: 70px;
-    padding-bottom: 30px;
-}
-
 .primary {
     border: 1px solid gray;
     border-radius: 8px;
 }
+
+.list-group-item {
+  overflow-wrap: break-word;
+}
+
+#trace-tree {
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.hidden-glyphicon {
+  visibility:hidden;
+}
diff --git a/etc/layout_viewer/viewer.html b/etc/layout_viewer/viewer.html
index 09db3e0fc7f..7e80756ade7 100644
--- a/etc/layout_viewer/viewer.html
+++ b/etc/layout_viewer/viewer.html
@@ -24,24 +24,15 @@
         <![endif]-->
     </head>
     <body>
-
-        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-            <div class="container">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                        <span class="sr-only">Toggle navigation</span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                    </button>
-                    <a class="navbar-brand" href="#">Servo Layout Debugger</a>
-                </div>
-            </div>
-        </div>
-
         <div class="container" role="main">
             <div class="row">
-                <div class="col-sm-3">
+                <div class="col-sm-12">
+                  <h1> Servo Layout Viewer </h1>
+                  <p> Check the <a href="https://github.com/servo/servo/blob/master/etc/layout_viewer/README.md">README</a> for instructions.</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-4">
                     <div class="row">
                         <div class="col-sm-12">
                             <div class="well">
@@ -62,7 +53,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-sm-9">
+                <div class="col-sm-8">
                     <div class="row">
                         <div class="col-sm-12">
                             <div class='panel panel-default'>
@@ -208,7 +199,7 @@
                     }
 
                     update_flow_tree_bgcolor(node.flow_tree, node_color_hash);
-                    $('#flow-tree').treeview({data: [node.flow_tree], levels: 100});
+                    $('#flow-tree').treeview({data: [node.flow_tree], levels: 100, enableLinks: true, emptyIcon: "glyphicon glyphicon-unchecked hidden-glyphicon"});
                 });
             }
 
