Improve test result dropdown UI.

am: 1699931408

Change-Id: I42d9383754d7f1a3a9235e3ced93d5152ef9afb3

4 files changed, 68 insertions, 31 deletions

diff --git a/src/main/webapp/css/common.css b/src/main/webapp/css/common.css
index 974f129..2b43210 100644
--- a/src/main/webapp/css/common.css
+++ b/src/main/webapp/css/common.css
@@ -16,10 +16,28 @@
 .container {
     min-height: 80%;
 }
-
 @media only screen and (min-width: 993px) {
     .wide.container {
         width: 80%;
         max-width: 1600px;
     }
 }
+.TEST_CASE_RESULT_PASS {
+    background-color: #7FFF00;
+}
+.TEST_CASE_RESULT_FAIL {
+    background-color: #ff4d4d;
+}
+.TEST_CASE_RESULT_SKIP {
+    background-color: #A8A8A8;
+}
+.TEST_CASE_RESULT_EXCEPTION {
+    background-color: black;
+}
+.TEST_CASE_RESULT_TIMEOUT {
+    background-color: #9900CC;
+}
+.UNKNOWN_RESULT {
+    background-color: white;
+    border: 1px #A8A8A8 solid;
+}
diff --git a/src/main/webapp/css/show_table.css b/src/main/webapp/css/show_table.css
index 76d4379..627d859 100644
--- a/src/main/webapp/css/show_table.css
+++ b/src/main/webapp/css/show_table.css
@@ -135,22 +135,3 @@ div.status-icon {
 .test-case-status.width-1 {
     width: calc(100% - 18px);
 }
-.TEST_CASE_RESULT_PASS {
-    background-color: #7FFF00;
-}
-.TEST_CASE_RESULT_FAIL {
-    background-color: #ff4d4d;
-}
-.TEST_CASE_RESULT_SKIP {
-    background-color: #A8A8A8;
-}
-.TEST_CASE_RESULT_EXCEPTION {
-    background-color: black;
-}
-.TEST_CASE_RESULT_TIMEOUT {
-    background-color: #9900CC;
-}
-.UNKNOWN_RESULT {
-    background-color: white;
-    border: 1px #A8A8A8 solid;
-}
diff --git a/src/main/webapp/css/test_results.css b/src/main/webapp/css/test_results.css
index 5be42da..d9e54a4 100644
--- a/src/main/webapp/css/test_results.css
+++ b/src/main/webapp/css/test_results.css
@@ -39,12 +39,32 @@ li.test-run-container.active {
     border-radius: 0 0 10px 10px;
 }
 .test-case-container {
-    border: 1px solid lightgray;
-    background: white;
-    padding: 10px;
-    margin-bottom: 25px;
+    font-weight: 400;
+    padding: 10px 15px 15px;
     max-height: 33%;
     overflow: auto;
+    box-shadow: inset 0 5px 7px -5px lightgrey;
+}
+.row .col.test-col {
+    padding: 0;
+}
+.row .col.test-col.bordered {
+    border-right: 1px solid lightgray;
+}
+.row .col.test-col.left-most {
+    border-radius: 0 0 0 10px;
+}
+.row .col.test-col.right-most {
+    border-radius: 0 0 10px 0;
+}
+.row .col.test-col.left-most.right-most {
+    border-radius: 0 0 10px 10px;
+}
+.test-result-label {
+    text-transform: capitalize;
+    border-bottom: 1px solid lightgray;
+    padding: 4px 15px;
+    margin: 0;
 }
 .indicator {
     color: white;
@@ -59,6 +79,9 @@ li.test-run-container.active {
 .indicator.padded {
     margin-right: 5px;
 }
+.test-col .indicator {
+    margin-top: 2px;
+}
 .material-icons.expand-arrow {
     right: 3px;
     bottom: 0px;
diff --git a/src/main/webapp/js/test_results.js b/src/main/webapp/js/test_results.js
index 8f923fb..2e9fc13 100644
--- a/src/main/webapp/js/test_results.js
+++ b/src/main/webapp/js/test_results.js
@@ -69,20 +69,35 @@
    */
   function displayTestDetails(container, data, lineHeight) {
     var nCol = data.length;
-    var width = 12 / nCol;
+    var width = 's' + (12 / nCol);
     test = container;
     var maxLines = 0;
-    data.forEach(function (column) {
+    data.forEach(function (column, index) {
       if (column.data == undefined || column.name == undefined) {
         return;
       }
-      var colContainer =
-        $('<div class="col s' + width + ' test-col"></div>');
+      var classes = 'col test-col grey lighten-5 ' + width;
+      if (index != nCol -1) {
+        classes += ' bordered';
+      }
+      if (index == 0) {
+        classes += ' left-most';
+      }
+      if (index == nCol - 1) {
+        classes += ' right-most';
+      }
+      var colContainer = $('<div class="' + classes + '"></div>');
       var col = $('<div class="test-case-container"></div>');
       colContainer.appendTo(container);
       var count = column.data.length;
-      $('<h5>' + getNickname(column.name) + ' (' + count + ')' + '</h5>')
-        .appendTo(colContainer).css('text-transform', 'capitalize');
+      var head = $('<h5 class="test-result-label white"></h5>')
+        .text(getNickname(column.name))
+        .appendTo(colContainer)
+        .css('text-transform', 'capitalize');
+      $('<div class="indicator right center"></div>')
+        .text(count)
+        .addClass(column.name)
+        .appendTo(head);
       col.appendTo(colContainer);
       var list = $('<ul></ul>').appendTo(col);
       column.data.forEach(function (testCase) {
@@ -243,7 +258,7 @@
       expand.text('expand_more');
       expand.appendTo(div);
       var body = $('<div></div>')
-        .addClass('collapsible-body test-results row grey lighten-4')
+        .addClass('collapsible-body test-results row')
         .appendTo(li);
       if (metadata.testDetails != undefined) {
         expand.addClass('rotate');