Diagnostics: TextBadge polymer element

http://screen/Be2cQHGk3cZmE5f

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I6f6ef200659fdcd7e72a56d1d87328c72342ccb6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2530750
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826876}

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

@@ -31,6 +31,7 @@ js_type_check("closure_compile") {
     ":routine_result_entry_test",
     ":routine_result_list_test",
     ":routine_section_test",
+    ":text_badge_test",
   ]
 }
 
@@ -230,3 +231,11 @@ js_library("routine_section_test") {
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
   ]
 }
+
+js_library("text_badge_test") {
+  deps = [
+    "../..:chai_assert",
+    "../..:test_util.m",
+    "//chromeos/components/diagnostics_ui/resources:text_badge",
+  ]
+}

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

@@ -22,6 +22,7 @@ import {fakeRoutineListExecutorTestSuite} from './routine_list_executor_test.js'
 import {routineResultEntryTestSuite} from './routine_result_entry_test.js';
 import {routineResultListTestSuite} from './routine_result_list_test.js';
 import {routineSectionTestSuite} from './routine_section_test.js';
+import {textBadgeTestSuite} from './text_badge_test.js';
 
 window.test_suites_list = [];
 
@@ -47,3 +48,4 @@ runSuite('RoutineListExecutor', fakeRoutineListExecutorTestSuite);
 runSuite('RoutineResultEntry', routineResultEntryTestSuite);
 runSuite('RoutineResultList', routineResultListTestSuite);
 runSuite('RoutineSection', routineSectionTestSuite);
+runSuite('TextBadge', textBadgeTestSuite);

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

@@ -56,7 +56,7 @@ const debug_suites_list = [
   'FakeMojoInterface', 'FakeObservables', 'FakeSystemDataProvider',
   'FakeSystemRoutineContoller', 'MemoryCard', 'OverviewCard', 'PercentBarChart',
   'RealtimeCpuChart', 'RoutineListExecutor', 'RoutineResultEntry',
-  'RoutineResultList', 'RoutineSection'
+  'RoutineResultList', 'RoutineSection', 'TextBadge'
 ];
 
 TEST_F('DiagnosticsApp', 'BrowserTest', function() {

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'chrome://diagnostics/text_badge.js';
+
+import {BadgeType} from 'chrome://diagnostics/text_badge.js';
+
+import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
+import {flushTasks} from '../../test_util.m.js';
+
+export function textBadgeTestSuite() {
+  /** @type {?TextBadgeElement} */
+  let textBadgeElement = null;
+
+  setup(() => {
+    document.body.innerHTML = '';
+  });
+
+  teardown(() => {
+    if (textBadgeElement) {
+      textBadgeElement.remove();
+    }
+    textBadgeElement = null;
+  });
+
+  /**
+   * @param {!BadgeType} badgeType
+   * @param {string} value
+   * @param {boolean=} hidden
+   */
+  function initializeBadge(badgeType, value, hidden = false) {
+    assertFalse(!!textBadgeElement);
+
+    textBadgeElement =
+        /** @type {!TextBadgeElement} */ (document.createElement('text-badge'));
+    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 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);
+    });
+  });
+}

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -31,6 +31,7 @@ js_type_check("closure_compile_module") {
     ":routine_result_entry",
     ":routine_result_list",
     ":routine_section",
+    ":text_badge",
   ]
 }
 
@@ -175,6 +176,12 @@ js_library("routine_section") {
   ]
 }
 
+js_library("text_badge") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 html_to_js("web_components") {
   js_files = [
     "battery_status_card.js",
@@ -191,5 +198,6 @@ html_to_js("web_components") {
     "routine_result_entry.js",
     "routine_result_list.js",
     "routine_section.js",
+    "text_badge.js",
   ]
 }

chromeos/components/diagnostics_ui/resources/diagnostics_app_resources.grd

@@ -39,6 +39,7 @@
       <include name="IDR_DIAGNOSTICS_SHARED_CSS_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.js" use_base_dir="false" type="BINDDATA"/>
       <include name="IDR_DIAGNOSTICS_SYSTEM_DATA_PROVIDER_MOJO_LITE_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/mojom/system_data_provider.mojom-lite.js" use_base_dir="false" type="BINDATA" />
       <include name="IDR_DIAGNOSTICS_SYSTEM_ROUTINE_CONTROLLER_MOJO_LITE_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/mojom/system_routine_controller.mojom-lite.js" use_base_dir="false" type="BINDATA" />
+      <include name="IDR_DIAGNOSTICS_TEXT_BADGE_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/text_badge.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_TYPES_JS" file="diagnostics_types.js" type="BINDATA"/>
       <include name="IDR_D3_SRC_D3_MIN_JS" file="../../../../third_party/d3/src/d3.min.js" type="BINDATA" />
     </includes>

chromeos/components/diagnostics_ui/resources/text_badge.html

+<style include="diagnostics-shared">
+  #textBadge {
+    padding: 3px 5px;
+    border-radius: 3px;
+  }
+
+  .default {
+    background-color: var(--google-blue-100);
+    color: var(--google-blue-500);
+  }
+
+  .success {
+    background-color: var(--google-green-100);
+    color: var(--google-green-500);
+  }
+
+  .error {
+    background-color: var(--google-red-100);
+    color: var(--google-red-500);
+  }
+</style>
+
+<span id="textBadge" class$="[[badgeType]]" hidden$="[[hidden]]">[[value]]</span>
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/text_badge.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import './diagnostics_fonts_css.js';
+import './diagnostics_shared_css.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/**
+ * Badge style class type.
+ * @enum {string}
+ */
+export const BadgeType = {
+  DEFAULT: 'default',
+  ERROR: 'error',
+  SUCCESS: 'success',
+};
+
+/**
+ * @fileoverview
+ * 'text-badge' displays a text-based rounded badge.
+ */
+Polymer({
+  is: 'text-badge',
+
+  _template: html`{__html_template__}`,
+
+  properties: {
+    /** @type {!BadgeType} */
+    badgeType: {
+      type: String,
+      value: BadgeType.DEFAULT,
+    },
+
+    /** @type {string} */
+    value: {
+      type: String,
+      value: '',
+    },
+
+    /** @type {boolean} */
+    hidden: {
+      type: Boolean,
+      value: false,
+    },
+  },
+});