Change search result panel to stay open until search cleared

Author: mdtusz

devtools/test_dashboard/devtools.js

@@ -1,5 +1,5 @@
 var Fuse = require('fuse.js');
-var mocks = require('./mocks.json');
+var mocks = require('../../build/test_dashboard_mocks.json');
 
 
 // Our gracious testing object
@@ -127,6 +127,7 @@ var f = new Fuse(mocks, {
 
 var searchBar = document.getElementById('mocks-search');
 var mocksList = document.getElementById('mocks-list');
+var plotArea = document.getElementById('plots');
 
 searchBar.addEventListener('keyup', function(e) {
 
@@ -148,15 +149,11 @@ searchBar.addEventListener('keyup', function(e) {
             // Clear plots and plot selected.
             Tabs.purge();
             Tabs.plotMock(r.file.slice(0, -5));
-
-            // Clear results.
-            while(mocksList.firstChild) {
-                mocksList.removeChild(mocksList.firstChild);
-            }
-
-            e.target.value = '';
         });
 
         mocksList.appendChild(result);
+
+        var listWidth = mocksList.getBoundingClientRect.width;
+        plotArea.setAttribute('width', window.innerWidth - listWidth);
     });
 });

devtools/test_dashboard/style.css

@@ -1,11 +1,17 @@
 html, body{
   margin: 0;
-  padding: 0;
+  padding: 40px 0 0 0;
   font-family: helvetica, arial, sans-serif;
+  background-color: #fafafa;
 }
 header{
+  position: fixed;
+  top: 0;
   height: 40px;
+  width: 100%;
   border-bottom: 1px solid #4983EC;
+  background-color: #ffffff;
+  z-index: 100000;
 }
 header img{
   height: 100%;
@@ -28,14 +34,16 @@ header span{
   line-height: 40px;
 }
 #mocks-list{
-  position: absolute;
+  position: fixed;
   right: 0px;
   top: 40px;
+  bottom: 0px;
   z-index: 100000;
   background-color: #fff;
   border-left: 1px solid #4983EC;
   border-bottom: 1px solid #4983EC;
   border-top: 1px solid #4983EC;
+  overflow: scroll;
 }
 .search-result{
   display: block;
@@ -48,6 +56,9 @@ header span{
   color: #fff;
   background-color: #4983EC;
 }
+#plots{
+  width: 100%;
+}
 .dashboard-plot{
   margin-bottom: 30px;
   max-width: 940px;