test_dashboard: highlight the displayed mock in search results

Author: alexcjohnson

devtools/test_dashboard/devtools.js

@@ -202,7 +202,7 @@ function searchMocks(e) {
 
     results.forEach(function(r) {
         var result = document.createElement('span');
-        result.className = 'search-result';
+        result.className = getResultClass(r.name);
         result.innerText = r.name;
 
         result.addEventListener('click', function() {
@@ -212,6 +212,10 @@ function searchMocks(e) {
             // Clear plots and plot selected.
             Tabs.purge();
             Tabs.plotMock(mockName);
+
+            mocksList.querySelectorAll('span').forEach(function(el) {
+                el.className = getResultClass(el.innerText);
+            });
         });
 
         mocksList.appendChild(result);
@@ -222,8 +226,16 @@ function searchMocks(e) {
     });
 }
 
+function getNameFromHash() {
+    return window.location.hash.replace(/^#/, '');
+}
+
+function getResultClass(name) {
+    return 'search-result' + (getNameFromHash() === name ? ' search-result__selected' : '');
+}
+
 function plotFromHash() {
-    var initialMock = window.location.hash.replace(/^#/, '');
+    var initialMock = getNameFromHash();
 
     if(initialMock.length > 0) {
         Tabs.plotMock(initialMock);

devtools/test_dashboard/style.css

@@ -56,6 +56,9 @@ header span{
   color: #fff;
   background-color: #4983EC;
 }
+.search-result__selected{
+  background-color: #DDDDEE;
+}
 #plots{
   overflow: scroll;
 }