UI: Indent sub-tasks

Indent the sub-tasks, so that we can show a tree like structure in
UI. This makes it eaiser to understand the on why tasks are waiting.

Change-Id: I9bf11e609343b6e5caef0e112a07a7732e9b518e
diff --git a/gr-task-plugin/gr-task-plugin.html b/gr-task-plugin/gr-task-plugin.html
index 36813a0..cb56bbf 100644
--- a/gr-task-plugin/gr-task-plugin.html
+++ b/gr-task-plugin/gr-task-plugin.html
@@ -79,7 +79,7 @@
   <template>
     <template is="dom-repeat" as="task" items="[[tasks]]">
       <template is="dom-if" if="[[_can_show(show_all, task)]]">
-        <li>
+        <li style="padding: 0.2em;">
           <style>
             /* Matching colors with core code. */
             .green {
@@ -111,9 +111,11 @@
           [[task.message]]
         </li>
       </template>
+      <ul style="list-style-type:none; margin: 0 0 0 0; padding: 0 0 0 2em;">
       <gr-task-plugin-tasks
           tasks="[[task.sub_tasks]]"
           show_all$="[[show_all]]"> </gr-task-plugin-tasks>
+      </ul>
     </template>
   </template>
   <script>
diff --git a/gr-task-plugin/gr-task-plugin.js b/gr-task-plugin/gr-task-plugin.js
index e49f493..50c49ef 100644
--- a/gr-task-plugin/gr-task-plugin.js
+++ b/gr-task-plugin/gr-task-plugin.js
@@ -130,7 +130,7 @@
       return icon;
     },
 
-    _computeShowOnNeedsAndBlockedFilter(task) {
+    _isFailOrReadyOrInvalid(task) {
       switch (task.status) {
         case 'FAIL':
         case 'READY':
@@ -140,6 +140,12 @@
       return false;
     },
 
+    _computeShowOnNeedsAndBlockedFilter(task) {
+      return this._isFailOrReadyOrInvalid(task) ||
+        (task.sub_tasks && task.sub_tasks.some(t =>
+          this._computeShowOnNeedsAndBlockedFilter(t)));
+    },
+
     _compute_counts(task) {
       this._all_count++;
       switch (task.status) {