Diagnostics: Routine section styling

Screenshot: http://shortn/_Y2KIJpUWPu

Spec: https://carbon.googleplex.com/cros-ux/pages/diagnostics/mvp#8834837d-1583-4a5f-b1a5-b0eef63be7ac

Notes:
 - Styling for "queued" state is currently not represented in
 the spec which makes it subject to further change.
 - "Stopped" badge state will be added in a follow-up CL that implements
 routine cancellation.

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I9144ef846a7553042d16edd5a075f5158a4ae9f7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2567932
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#842707}

chrome/test/data/webui/chromeos/diagnostics/BUILD.gn

@@ -241,6 +241,7 @@ js_library("routine_section_test") {
     "//chromeos/components/diagnostics_ui/resources:routine_result_entry",
     "//chromeos/components/diagnostics_ui/resources:routine_section",
     "//chromeos/components/diagnostics_ui/resources:text_badge",
+    "//third_party/polymer/v3_0/components-chromium/iron-collapse:iron-collapse",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
   ]
 }

chrome/test/data/webui/chromeos/diagnostics/diagnostics_test_utils.js

@@ -95,19 +95,6 @@ export function getToggleTestReportButtonFromSection(element) {
   return button;
 }
 
-/**
- * Helper function for getting the Show/Hide Tests Report button from a
- * routine-section.
- * @param {?RoutineSectionElement} element
- * @return {!CrButtonElement}
- */
-export function getLearnMoreButtonFromSection(element) {
-  const button =
-      /** @type {!CrButtonElement} */ (element.$$('#learnMoreButton'));
-  assertTrue(!!button);
-  return button;
-}
-
 /**
  * Helper function to check if a substring exists in an element.
  * @param {?Element} element

chrome/test/data/webui/chromeos/diagnostics/routine_result_entry_test.js

@@ -10,7 +10,9 @@ import {BadgeType} from 'chrome://diagnostics/text_badge.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
-import {flushTasks} from '../../test_util.m.js';
+import {flushTasks, isVisible} from '../../test_util.m.js';
+
+import * as dx_utils from './diagnostics_test_utils.js';
 
 export function routineResultEntryTestSuite() {
   /** @type {?RoutineResultEntryElement} */
@@ -124,9 +126,12 @@ export function routineResultEntryTestSuite() {
               'routineEntryText',
               loadTimeData.getString('cpuStressRoutineText')));
 
-      // Status should be empty if the test is not started.
-      // TODO(joonbug): Utilize isVisible util function.
-      assertTrue(getStatusBadge().hidden);
+      // Status should be queued if the test is not started.
+      assertTrue(isVisible(getStatusBadge()));
+      assertEquals(getStatusBadge().badgeType, BadgeType.QUEUED);
+      dx_utils.assertTextContains(
+          getStatusBadge().value,
+          loadTimeData.getString('testQueuedBadgeText'));
     });
   });
 
@@ -142,8 +147,10 @@ export function routineResultEntryTestSuite() {
               loadTimeData.getString('cpuStressRoutineText')));
 
       // Status should be running.
-      assertEquals(getStatusBadge().value, 'RUNNING');
-      assertEquals(getStatusBadge().badgeType, BadgeType.DEFAULT);
+      dx_utils.assertTextContains(
+          getStatusBadge().value,
+          loadTimeData.getString('testRunningBadgeText'));
+      assertEquals(getStatusBadge().badgeType, BadgeType.RUNNING);
     });
   });
 

chrome/test/data/webui/chromeos/diagnostics/routine_section_test.js

@@ -14,7 +14,7 @@ import {BadgeType} from 'chrome://diagnostics/text_badge.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
-import {flushTasks} from '../../test_util.m.js';
+import {flushTasks, isVisible} from '../../test_util.m.js';
 
 import * as dx_utils from './diagnostics_test_utils.js';
 
@@ -105,14 +105,6 @@ export function routineSectionTestSuite() {
     return button;
   }
 
-  /**
-   * Returns the learn more help button.
-   * @return {!CrButtonElement}
-   */
-  function getLearnMoreButton() {
-    return dx_utils.getLearnMoreButtonFromSection(routineSectionElement);
-  }
-
   /**
    * Returns the status badge.
    * @return {!TextBadgeElement}
@@ -124,11 +116,14 @@ export function routineSectionTestSuite() {
 
   /**
    * Returns the status text.
-   * TODO(joonbug): Update this type for use with assertElementContainsText
-   * @return {?Element}
+   * @return {!HTMLElement}
    */
   function getStatusTextElement() {
-    return routineSectionElement.$$('#testStatusText');
+    const statusText =
+        /** @type {!HTMLElement} */ (
+            routineSectionElement.$$('#testStatusText'));
+    assertTrue(!!statusText);
+    return statusText;
   }
 
   /**
@@ -165,6 +160,14 @@ export function routineSectionTestSuite() {
     return dx_utils.getResultEntries(getResultList());
   }
 
+  /**
+   * Returns whether the "result list" section is expanded or not.
+   * @return {boolean}
+   */
+  function isIronCollapseOpen() {
+    return routineSectionElement.$.collapse.opened;
+  }
+
   test('ElementRenders', () => {
     return initializeRoutineSection([]).then(() => {
       // Verify the element rendered.
@@ -198,32 +201,29 @@ export function routineSectionTestSuite() {
       chromeos.diagnostics.mojom.RoutineType.kCpuFloatingPoint,
     ];
 
-    // TODO(joonbug): Use visibility assert over testing .hidden attr.
     return initializeRoutineSection(routines)
         .then(() => {
           // Hidden by default.
-          assertTrue(getResultList().hidden);
-          assertTrue(getToggleTestReportButton().hidden);
+          assertFalse(isIronCollapseOpen());
+          assertFalse(isVisible(getToggleTestReportButton()));
           return clickRunTestsButton();
         })
         .then(() => {
           // Report is still hidden by default, but toggle button is visible.
-          assertTrue(getResultList().hidden);
-          assertFalse(getToggleTestReportButton().hidden);
+          assertFalse(isIronCollapseOpen());
+          assertTrue(isVisible(getToggleTestReportButton()));
           return clickToggleTestReportButton();
         })
         .then(() => {
           // Report is visible when button is clicked.
-          assertFalse(getResultList().hidden);
-          assertFalse(getToggleTestReportButton().hidden);
-          assertFalse(getLearnMoreButton().hidden);
+          assertTrue(isIronCollapseOpen());
+          assertTrue(isVisible(getToggleTestReportButton()));
           return clickToggleTestReportButton();
         })
         .then(() => {
           // Report is hidden when button is clicked again.
-          assertTrue(getResultList().hidden);
-          assertTrue(getLearnMoreButton().hidden);
-          assertFalse(getToggleTestReportButton().hidden);
+          assertFalse(isIronCollapseOpen());
+          assertTrue(isVisible(getToggleTestReportButton()));
         });
   });
 
@@ -233,18 +233,17 @@ export function routineSectionTestSuite() {
       chromeos.diagnostics.mojom.RoutineType.kBatteryCharge,
     ];
 
-    // TODO(joonbug): Use visibility assert over testing .hidden attr.
     return initializeRoutineSection(routines)
         .then(() => {
           // Hidden by default.
-          assertTrue(getResultList().hidden);
-          assertTrue(getToggleTestReportButton().hidden);
+          assertFalse(isIronCollapseOpen());
+          assertFalse(isVisible(getToggleTestReportButton()));
           return clickRunTestsButton();
         })
         .then(() => {
           // Report is hidden by default and so is toggle button.
-          assertTrue(getResultList().hidden);
-          assertTrue(getToggleTestReportButton().hidden);
+          assertFalse(isIronCollapseOpen());
+          assertFalse(isVisible(getToggleTestReportButton()));
         });
   });
 
@@ -365,15 +364,16 @@ export function routineSectionTestSuite() {
     return initializeRoutineSection(routines)
         .then(() => {
           // Hidden by default.
-          assertTrue(getStatusBadge().hidden);
-          assertTrue(getStatusTextElement().hidden);
+          assertFalse(isVisible(getStatusBadge()));
+          assertFalse(isVisible(getStatusTextElement()));
           return clickRunTestsButton();
         })
         .then(() => {
           // Badge is visible with test running.
           assertFalse(getStatusBadge().hidden);
-          assertEquals(getStatusBadge().badgeType, BadgeType.DEFAULT);
-          assertEquals(getStatusBadge().value, 'Test running');
+          assertEquals(getStatusBadge().badgeType, BadgeType.RUNNING);
+          dx_utils.assertTextContains(
+              getStatusBadge().value, loadTimeData.getString('testRunning'));
 
           // Text is visible describing which test is being run.
           assertFalse(getStatusTextElement().hidden);
@@ -424,8 +424,9 @@ export function routineSectionTestSuite() {
         .then(() => {
           // Badge is visible with test running.
           assertFalse(getStatusBadge().hidden);
-          assertEquals(getStatusBadge().badgeType, BadgeType.DEFAULT);
-          assertEquals(getStatusBadge().value, 'Test running');
+          assertEquals(getStatusBadge().badgeType, BadgeType.RUNNING);
+          dx_utils.assertTextContains(
+              getStatusBadge().value, loadTimeData.getString('testRunning'));
 
           // Text is visible describing which test is being run.
           assertFalse(getStatusTextElement().hidden);
@@ -443,8 +444,9 @@ export function routineSectionTestSuite() {
           // Badge is still visible with "test running", even though first one
           // failed.
           assertFalse(getStatusBadge().hidden);
-          assertEquals(getStatusBadge().badgeType, BadgeType.DEFAULT);
-          assertEquals(getStatusBadge().value, 'Test running');
+          assertEquals(getStatusBadge().badgeType, BadgeType.RUNNING);
+          dx_utils.assertTextContains(
+              getStatusBadge().value, loadTimeData.getString('testRunning'));
 
           // Text is visible describing which test is being run.
           assertFalse(getStatusTextElement().hidden);

chrome/test/data/webui/chromeos/diagnostics/text_badge_test.js

@@ -9,6 +9,8 @@ import {BadgeType} from 'chrome://diagnostics/text_badge.js';
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 import {flushTasks} from '../../test_util.m.js';
 
+import * as dx_utils from './diagnostics_test_utils.js';
+
 export function textBadgeTestSuite() {
   /** @type {?TextBadgeElement} */
   let textBadgeElement = null;
@@ -27,9 +29,8 @@ export function textBadgeTestSuite() {
   /**
    * @param {!BadgeType} badgeType
    * @param {string} value
-   * @param {boolean=} hidden
    */
-  function initializeBadge(badgeType, value, hidden = false) {
+  function initializeBadge(badgeType, value) {
     assertFalse(!!textBadgeElement);
 
     textBadgeElement =
@@ -37,29 +38,18 @@ export function textBadgeTestSuite() {
     assertTrue(!!textBadgeElement);
     textBadgeElement.badgeType = badgeType;
     textBadgeElement.value = value;
-    textBadgeElement.hidden = hidden || false;
     document.body.appendChild(textBadgeElement);
 
     return flushTasks();
   }
 
   test('InitializeBadge', () => {
-    const badgeType = BadgeType.DEFAULT;
+    const badgeType = BadgeType.QUEUED;
     const value = 'Test value';
     return initializeBadge(badgeType, value).then(() => {
       const textBadge = textBadgeElement.$$('#textBadge');
       assertEquals(badgeType, textBadge.getAttribute('class'));
-      assertEquals(value, textBadge.textContent.trim());
-      assertFalse(textBadge.hidden);
-    });
-  });
-
-  test('InitializeBadgeHidden', () => {
-    const badgeType = BadgeType.DEFAULT;
-    const value = 'Test value';
-    const hidden = true;
-    return initializeBadge(badgeType, value, hidden).then(() => {
-      assertTrue(textBadgeElement.$$('#textBadge').hidden);
+      dx_utils.assertTextContains(textBadge.textContent, value);
     });
   });
 }

chromeos/chromeos_strings.grd

@@ -681,7 +681,7 @@ Try tapping the mic to ask me anything.
         <ph name="TEMPERATURE_C">$1<ex>25</ex></ph>° C
       </message>
       <message name="IDS_DIANOSTICS_LEARN_MORE_LABEL" desc="The label for the button that links to a help support article to learn more about the test routines being run.">
-        Learn more in the Help Center
+        Learn more in Help Center
       </message>
       <message name="IDS_DIAGNOSTICS_LEARN_MORE_LABEL_SHORT" desc="The label for the text link that leads to a help support article to learn more about the test routines being run.">
         Learn more
@@ -746,6 +746,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_DIAGNOSTICS_TEST_SUCCESS_BADGE_TEXT" desc="The text displayed to indicate that a test passed.">
         SUCCESS
       </message>
+      <message name="IDS_DIAGNOSTICS_TEST_QUEUED_BADGE_TEXT" desc="The text displayed to indicate that a test is currently queued.">
+        QUEUED
+      </message>
       <message name="IDS_DIAGNOSTICS_TEST_RUNNING_TEXT" desc="The text displayed while a test is running.">
         Test running
       </message>

chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_TEST_QUEUED_BADGE_TEXT.png.sha1

+d96a5f3d329ed440bd46454f60530a8c4da01611
\ No newline at end of file

chromeos/chromeos_strings_grd/IDS_DIANOSTICS_LEARN_MORE_LABEL.png.sha1

-99d733189f12c848ba779e277aa6ea9f7c9557b7
\ No newline at end of file
+d96a5f3d329ed440bd46454f60530a8c4da01611
\ No newline at end of file

chromeos/components/diagnostics_ui/diagnostics_ui.cc

@@ -89,6 +89,7 @@ void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
       {"stopTestButtonText", IDS_DIAGNOSTICS_STOP_TEST_BUTTON_TEXT},
       {"testFailure", IDS_DIAGNOSTICS_TEST_FAILURE_TEXT},
       {"testFailedBadgeText", IDS_DIAGNOSTICS_TEST_FAILURE_BADGE_TEXT},
+      {"testQueuedBadgeText", IDS_DIAGNOSTICS_TEST_QUEUED_BADGE_TEXT},
       {"testRunning", IDS_DIAGNOSTICS_TEST_RUNNING_TEXT},
       {"testRunningBadgeText", IDS_DIAGNOSTICS_TEST_RUNNING_BADGE_TEXT},
       {"testSuccess", IDS_DIAGNOSTICS_TEST_SUCCESS_TEXT},

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

@@ -47,9 +47,9 @@
   }
 
   .spacing {
-    margin: 14px 0px;
-    padding-inline-end: 15px;
-    padding-inline-start: 15px;
+    margin-bottom: 16px;
+    margin-top: 12px;
+    padding-inline: 20px;
   }
 
   .top-section {

chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.html

@@ -5,6 +5,8 @@
       --diagnostics-header-font-family: Roboto, sans-serif;
       --diagnostics-data-point-font-family: Roboto, sans-serif;
       --diagnostics-overview-font-family: Roboto, sans-serif;
+      --diagnostics-text-badge-font-family: Roboto, sans-serif;
+      --diagnostics-routine-name-font-family: Roboto, sans-serif;
 
       --diagnostics-default-font-size: 14px;
       --diagnostics-header-font-size: 22px;
@@ -14,6 +16,8 @@
       --diagnostics-chart-label-font-size: 15px;
       --diagnostics-chart-tick-font-size: 12px;
       --diagnostics-chart-legend-font-size: 12px;
+      --diagnostics-text-badge-font-size: 11px;
+      --diagnostics-routine-name-font-size: 13px;
 
       --diagnostics-default-font-weight: 500;
       --diagnostics-header-font-weight: 600;
@@ -26,6 +30,7 @@
       --diagnostics-overview-text-color: var(--google-grey-900);
       --diagnostics-data-point-title-color: var(--google-grey-900);
       --diagnostics-data-point-subtitle-color: var(--google-grey-700);
+      --diagnostics-routine-name-color: var(--google-grey-900);
 
       --diagnostics-default-font: {
           font-family: var(--diagnostics-default-font-family);
@@ -69,6 +74,14 @@
           font-family: var(--diagnostics-header-font-family);
           font-size: var(--diagnostics-chart-legend-font-size);
       };
+      --diagnostics-text-badge-font: {
+          font-family: var(--diagnostics-text-badge-font-family);
+          font-size: var(--diagnostics-text-badge-font-size);
+      };
+      --diagnostics-routine-name-font: {
+          font-family: var(--diagnostics-routine-name-font-family);
+          font-size: var(--diagnostics-routine-name-font-size);
+      };
     }
   </style>
 </template>
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/routine_result_entry.html

 <style include="diagnostics-shared">
   .entryRow {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    align-items: center;
+    column-gap: 15px;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    height: 40px;
+  }
+
+  #routine {
+    @apply --diagnostics-routine-name-font;
+    color: var(--diagnostics-routine-name-color);
   }
 </style>
 
 <div class="entryRow">
-  <div id="routine">[[routineType_]]</div>
-  <text-badge id="status" badge-type="[[getBadgeType_(item.progress, item.result)]]"
-  		value="[[getBadgeText_(item.progress, item.result)]]"
-  		hidden="[[!isTestStarted_(item.progress)]]">
+  <text-badge id="status" badge-type="[[badgeType_]]" value="[[badgeText_]]">
   </text-badge>
+  <div id="routine">[[routineType_]]</div>
 </div>

chromeos/components/diagnostics_ui/resources/routine_result_entry.js

@@ -86,8 +86,22 @@ Polymer({
       type: String,
       computed: 'getRunningRoutineString_(item.routine)',
     },
+
+    /** @private {!BadgeType} */
+    badgeType_: {
+      type: String,
+      value: BadgeType.QUEUED,
+    },
+
+    /** @private {string} */
+    badgeText_: {
+      type: String,
+      value: '',
+    },
   },
 
+  observers: ['entryStatusChanged_(item.progress, item.result)'],
+
   /**
    * Get the localized string name for the routine.
    * @param {!RoutineType} routine
@@ -98,44 +112,40 @@ Polymer({
   },
 
   /**
-   * @protected
+   * @private
    */
-  getBadgeText_() {
-    if (this.item.progress === ExecutionProgress.kRunning) {
-      return loadTimeData.getString('testRunningBadgeText');
-    }
-
-    if (this.item.result &&
-        getSimpleResult(this.item.result) ===
-            chromeos.diagnostics.mojom.StandardRoutineResult.kTestPassed) {
-      return loadTimeData.getString('testSucceededBadgeText');
-    }
-
-    return loadTimeData.getString('testFailedBadgeText');
-  },
-
-  /**
-   * @protected
-   */
-  getBadgeType_() {
-    if (this.item.progress === ExecutionProgress.kRunning) {
-      return BadgeType.DEFAULT;
-    }
-
-    if (this.item.result &&
-        getSimpleResult(this.item.result) ===
-            chromeos.diagnostics.mojom.StandardRoutineResult.kTestPassed) {
-      return BadgeType.SUCCESS;
+  entryStatusChanged_() {
+    // TODO(michaelcheco): Display "STOPPED" state when routines are cancelled.
+    switch (this.item.progress) {
+      case ExecutionProgress.kNotStarted:
+        this.setBadgeTypeAndText_(
+            BadgeType.QUEUED, loadTimeData.getString('testQueuedBadgeText'));
+        break;
+      case ExecutionProgress.kRunning:
+        this.setBadgeTypeAndText_(
+            BadgeType.RUNNING, loadTimeData.getString('testRunningBadgeText'));
+        break;
+      case ExecutionProgress.kCompleted:
+        const testPassed = this.item.result &&
+            getSimpleResult(this.item.result) ===
+                chromeos.diagnostics.mojom.StandardRoutineResult.kTestPassed;
+        const badgeType = testPassed ? BadgeType.SUCCESS : BadgeType.ERROR;
+        const badgeText = loadTimeData.getString(
+            testPassed ? 'testSucceededBadgeText' : 'testFailedBadgeText');
+        this.setBadgeTypeAndText_(badgeType, badgeText);
+        break;
+      default:
+        assertNotReached();
     }
-    return BadgeType.ERROR;
   },
 
   /**
-   * @protected
-   * @return {boolean}
+   * @param {!BadgeType} badgeType
+   * @param {string} badgeText
+   * @private
    */
-  isTestStarted_() {
-    return this.item.progress !== ExecutionProgress.kNotStarted;
+  setBadgeTypeAndText_(badgeType, badgeText) {
+    this.setProperties({badgeType_: badgeType, badgeText_: badgeText});
   },
 
   /** @override */

chromeos/components/diagnostics_ui/resources/routine_result_list.html

 <style include="diagnostics-shared">
   #resultListContainer {
-    background-color: var(--google-grey-100);
+    background-color: rgba(var(--google-grey-200-rgb), .38);
     border-radius: 20px;
     padding: 15px;
   }

chromeos/components/diagnostics_ui/resources/routine_section.html

 <style include="diagnostics-shared">
   .learn-more-button {
     background-color: rgba(var(--google-blue-600), .06);
-    border-radius: 5x;
+    border-radius: 5px;
     height: 40px;
-    padding: 5px 10px;
+    margin-top: 12px;
+    padding: 6px 8px;
   }
 
   #learnMoreText {
     color: var(--google-blue-600);
     cursor: pointer;
   }
+
+  .result-list {
+    border-radius: 8px;
+    margin: 8px 0;
+  }
+
+  .routine-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .routine-section-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .routine-status-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #testStatusBadge {
+    margin-bottom: 4px;
+  }
+
+  #testStatusText {
+    @apply --diagnostics-routine-name-font;
+    color: var(--google-grey-700);
+  }
+
+  #toggleReportButton {
+    margin-right: 8px;
+  }
 </style>
 
-<div id="routineSection">
-  <cr-button id="runTestsButton" class="action-button" on-click="onRunTestsClicked_"
-      disabled="[[isTestRunning]]">
-    [[runTestsButtonText]]
-  </cr-button>
-  <cr-button id="toggleReportButton" class="action-button" on-click="onToggleReportClicked_"
-      hidden="[[isResultButtonHidden_(executionStatus_)]]">
-    [[getReportToggleButtonText_(isReportListHidden_)]]
-  </cr-button>
-  <text-badge id="testStatusBadge" badge-type="[[getBadgeType_(executionStatus_)]]"
-      hidden="[[isStatusHidden_(executionStatus_)]]"
-      value="[[getBadgeText_(executionStatus_)]]">
-  </text-badge>
-  <span id="testStatusText" hidden$="[[isStatusHidden_(executionStatus_)]]">
-    [[getTextStatus_(executionStatus_, currentTestName_)]]
-  </span>
-  <span id="learnMoreText" hidden$="[[isLearnMoreHidden_(executionStatus_)]]"
-      on-click="onLearnMoreClicked_">
-    [[i18n('learnMoreShort')]]
-  </span>
-  <routine-result-list id="resultList" hidden="[[isReportListHidden_]]"></routine-result-list>
-  <cr-button id="learnMoreButton" class="learn-more-button" on-click="onLearnMoreClicked_"
-      hidden="[[isReportListHidden_]]">
-      [[i18n('learnMore')]]
-  </cr-button>
+<div class="routine-section-container">
+  <div id="routineSection" class="routine-container">
+    <div class="routine-status-container">
+      <text-badge id="testStatusBadge"
+          badge-type="[[getBadgeType_(executionStatus_)]]"
+          hidden="[[isStatusHidden_(executionStatus_)]]"
+          value="[[getBadgeText_(executionStatus_)]]">
+      </text-badge>
+      <span id="testStatusText"
+          hidden$="[[isStatusHidden_(executionStatus_)]]">
+        [[getTextStatus_(executionStatus_, currentTestName_)]]
+      </span>
+      <span id="learnMoreText"
+          hidden$="[[isLearnMoreHidden_(executionStatus_)]]"
+          on-click="onLearnMoreClicked_">
+        [[i18n('learnMoreShort')]]
+      </span>
+    </div>
+    <div>
+      <cr-button id="toggleReportButton" on-click="onToggleReportClicked_"
+          hidden="[[isResultButtonHidden_(executionStatus_)]]">
+        [[getReportToggleButtonText_(opened)]]
+      </cr-button>
+      <cr-button id="runTestsButton" on-click="onRunTestsClicked_"
+          disabled="[[isTestRunning]]">
+          [[runTestsButtonText]]
+      </cr-button>
+    </div>
+  </div>
+  <iron-collapse id="collapse" opened="{{opened}}">
+    <div class="result-list">
+      <routine-result-list id="resultList"></routine-result-list>
+    </div>
+    <cr-button id="learnMoreButton" class="learn-more-button"
+        on-click="onLearnMoreClicked_">
+        [[i18n('learnMore')]]
+    </cr-button>
+  </iron-collapse>
 </div>

chromeos/components/diagnostics_ui/resources/routine_section.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';
 import './routine_result_list.js';
@@ -79,12 +80,6 @@ Polymer({
       notify: true,
     },
 
-    /** @private {boolean} */
-    isReportListHidden_: {
-      type: Boolean,
-      value: true,
-    },
-
     /** @type {boolean} */
     isPowerRoutine: {
       type: Boolean,
@@ -166,7 +161,7 @@ Polymer({
   /** @private */
   onToggleReportClicked_() {
     // Toggle report list visibility
-    this.isReportListHidden_ = !this.isReportListHidden_;
+    this.$.collapse.toggle();
   },
 
   /** @private */
@@ -192,10 +187,13 @@ Polymer({
     return this.executionStatus_ === ExecutionProgress.kNotStarted;
   },
 
-  /** @protected */
-  getReportToggleButtonText_() {
-    return loadTimeData.getString(
-        this.isReportListHidden_ ? 'seeReportText' : 'hideReportText');
+  /**
+   * @param {boolean} opened Whether the section is expanded or not.
+   * @return {string} button text.
+   * @protected
+   */
+  getReportToggleButtonText_(opened) {
+    return loadTimeData.getString(opened ? 'hideReportText' : 'seeReportText');
   },
 
   /** @protected */
@@ -206,7 +204,7 @@ Polymer({
       }
       return BadgeType.SUCCESS;
     }
-    return BadgeType.DEFAULT;
+    return BadgeType.RUNNING;
   },
 
   /** @protected */

chromeos/components/diagnostics_ui/resources/text_badge.html

 <style include="diagnostics-shared">
-  #textBadge {
-    padding: 3px 5px;
-    border-radius: 3px;
+  .error {
+    background-color: var(--google-red-50);
+    color: var(--google-red-600);
+    margin-right: 14px;
+  }
+
+  .queued {
+    background-color: var(--google-grey-200);
+    color: var(--google-grey-600);
+    margin-right: 7px;
   }
 
-  .default {
-    background-color: var(--google-blue-100);
-    color: var(--google-blue-500);
+  .running {
+    background-color: var(--google-blue-50);
+    color: var(--google-blue-600);
   }
 
   .success {
-    background-color: var(--google-green-100);
-    color: var(--google-green-500);
+    background-color: var(--google-green-50);
+    color: var(--google-green-600);
   }
 
-  .error {
-    background-color: var(--google-red-100);
-    color: var(--google-red-500);
+  #textBadge {
+    @apply --diagnostics-text-badge-font;
+    border-radius: 4px;
+    height: 20px;
+    padding: 2px 6px;
+    text-transform: uppercase;
   }
 </style>
 

chromeos/components/diagnostics_ui/resources/text_badge.js

@@ -12,8 +12,9 @@ import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bun
  * @enum {string}
  */
 export const BadgeType = {
-  DEFAULT: 'default',
   ERROR: 'error',
+  QUEUED: 'queued',
+  RUNNING: 'running',
   SUCCESS: 'success',
 };
 
@@ -30,7 +31,7 @@ Polymer({
     /** @type {!BadgeType} */
     badgeType: {
       type: String,
-      value: BadgeType.DEFAULT,
+      value: BadgeType.QUEUED,
     },
 
     /** @type {string} */