UI: adapt to core changes * Update task and show_all/hide_all icons names * Fix _onChipClick() to change focus to tasks tab * Fix tasks failing to render task-hints Screenshots: https://imgur.com/a/RBB2qtd Change-Id: I6b212ff1a86e0fc330a98e9fda17c289cd91186d

diff --git a/gr-task-plugin/gr-task-chip.js b/gr-task-plugin/gr-task-chip.js
index a0c5b94..81489f5 100644
--- a/gr-task-plugin/gr-task-chip.js
+++ b/gr-task-plugin/gr-task-chip.js

@@ -43,7 +43,7 @@
         .shadowRoot.querySelector('main')
         .querySelector('gr-change-view')
         .shadowRoot.querySelector('#mainContent')
-        .querySelector('#primaryTabs');
+        .querySelector('#tabs');
   }
 
   _setTasksTabActive() {

diff --git a/gr-task-plugin/gr-task-plugin-tasks_html.js b/gr-task-plugin/gr-task-plugin-tasks_html.js
index 60fbd32..f0f1541 100644
--- a/gr-task-plugin/gr-task-plugin-tasks_html.js
+++ b/gr-task-plugin/gr-task-plugin-tasks_html.js

@@ -35,24 +35,39 @@
           cursor: pointer;
           text-decoration: underline;
         }
+        gr-icon.close {
+          color: var(--error-foreground);
+        }
+        gr-icon.block {
+          color: var(--error-foreground);
+        }
+        gr-icon.pause {
+          color: var(--warning-foreground);
+        }
+        gr-icon.play_arrow {
+          color: var(--success-foreground);
+        }
+        gr-icon.check_circle {
+          color: var(--success-foreground);
+        }
+        li {
+          margin: 3px 0;
+        }
       </style>
       <template is="dom-if" if="[[task.icon.id]]">
         <gr-tooltip-content
             has-tooltip
-            title="In Progress">
-            <iron-icon
-              icon="gr-icons:hourglass"
-              class="green"
-              hidden$="[[!task.in_progress]]">
-            </iron-icon>
+            title="In Progress"
+            hidden="[[!task.in_progress]]">
+            <gr-icon
+              icon="hourglass_empty"
+              class="hourglass_empty">
+            </gr-icon>
         </gr-tooltip-content>
         <gr-tooltip-content
             has-tooltip
             title$="[[task.icon.tooltip]]">
-            <iron-icon
-              icon="[[task.icon.id]]"
-              class$="[[task.icon.color]]">
-            </iron-icon>
+            <gr-icon class$="[[task.icon.id]]" filled icon="[[task.icon.id]]"></gr-icon>
         </gr-tooltip-content>
       </template>
       <template is="dom-if" if="[[task.change]]">
@@ -64,11 +79,11 @@
         </template>
       </template>
       <template is="dom-if" if="[[task.hint]]">
-        <gr-linked-text style="display: -webkit-inline-box;"
+        <gr-formatted-text style="display: -webkit-inline-box;"
           pre=""
           content="[[task.hint]]"
           config="[[config]]">
-        </gr-linked-text>
+        </gr-formatted-text>
       </template>
     </li>
   </template>

diff --git a/gr-task-plugin/gr-task-plugin.js b/gr-task-plugin/gr-task-plugin.js
index 2bff130..97eb5de 100644
--- a/gr-task-plugin/gr-task-plugin.js
+++ b/gr-task-plugin/gr-task-plugin.js

@@ -135,33 +135,27 @@
     const icon = {};
     switch (task.status) {
       case 'FAIL':
-        icon.id = 'gr-icons:close';
-        icon.color = 'red';
+        icon.id = 'close';
         icon.tooltip = 'Failed';
         break;
       case 'READY':
-        icon.id = 'gr-icons:playArrow';
-        icon.color = 'green';
+        icon.id = 'play_arrow';
         icon.tooltip = 'Ready';
         break;
       case 'INVALID':
-        icon.id = 'gr-icons:abandon';
-        icon.color = 'red';
+        icon.id = 'block';
         icon.tooltip = 'Invalid';
         break;
       case 'WAITING':
-        icon.id = 'gr-icons:pause';
-        icon.color = 'orange';
+        icon.id = 'pause';
         icon.tooltip = 'Waiting';
         break;
       case 'DUPLICATE':
-        icon.id = 'gr-icons:check';
-        icon.color = 'green';
+        icon.id = 'check_circle';
         icon.tooltip = 'Duplicate';
         break;
       case 'PASS':
-        icon.id = 'gr-icons:check-circle';
-        icon.color = 'green';
+        icon.id = 'check_circle';
         icon.tooltip = 'Passed';
         break;
     }

diff --git a/gr-task-plugin/gr-task-plugin_html.js b/gr-task-plugin/gr-task-plugin_html.js
index e0ea9cd..015fb45 100644
--- a/gr-task-plugin/gr-task-plugin_html.js
+++ b/gr-task-plugin/gr-task-plugin_html.js

@@ -64,10 +64,10 @@
       cursor: pointer;
       text-decoration: underline;
     }
-    .show-all-button iron-icon {
+    .show-all-button gr-icon {
       color: inherit;
-      --iron-icon-height: 18px;
-      --iron-icon-width: 18px;
+      --gr-icon-height: 18px;
+      --gr-icon-width: 18px;
     }
     .no-margins { margin: 0 0 0 0; }
     .task-list-item {
@@ -96,16 +96,10 @@
             on-click="_show_all_tap">All ([[_all_count]])</span>
         &nbsp;| Needed + Blocked ([[_ready_count]], [[_fail_count]])</p>
     </template>
-    <gr-button link="" class="show-all-button" on-click="_switch_expand"
-    >[[_computeShowAllLabelText(_expand_all)]]
-    <iron-icon
-      icon="gr-icons:expand-more"
-      hidden$="[[_expand_all]]"
-    ></iron-icon
-    ><iron-icon
-      icon="gr-icons:expand-less"
-      hidden$="[[!_expand_all]]"
-    ></iron-icon>
+    <gr-button link="" class="show-all-button" on-click="_switch_expand">
+      [[_computeShowAllLabelText(_expand_all)]]
+      <gr-icon icon="expand_more" hidden$="[[_expand_all]]"></gr-icon>
+      <gr-icon icon="expand_less" hidden$="[[!_expand_all]]"></gr-icon>
     </gr-button>
   </div>
   <div hidden$="[[!_expand_all]]" style="padding-bottom: 12px">