Diagnostics: Add a skeleton routine-section

- Currently empty element
- Will later add the test section of a diagnostics card such as
  button to run tests and a routine-result-list to show results.

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I64597f5f89c478f74a7900d46b415948d3c1d27a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2461636
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#815662}

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

@@ -23,6 +23,7 @@ GEN('#include "content/public/test/browser_test.h"');
  ['FakeMethodProvider', 'diagnostics/fake_method_provider_test.js'],
  ['RoutineResultEntry', 'diagnostics/routine_result_entry_test.js'],
  ['RoutineResultList', 'diagnostics/routine_result_list_test.js'],
+ ['RoutineSection', 'diagnostics/routine_section_test.js'],
  ['PercentBarChart', 'diagnostics/percent_bar_chart_test.js'], [
    'FakeSystemRoutineController',
    'diagnostics/fake_system_routine_controller_test.js'

chrome/test/data/webui/chromeos/diagnostics/routine_section_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.
+
+// TODO(jimmyxgong): Use es6 module for mojo binding (crbug/1004256).
+import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+import 'chrome://diagnostics/routine_section.js';
+import {flushTasks} from 'chrome://test/test_util.m.js';
+
+suite('RoutineSectionTest', () => {
+  /** @type {?HTMLElement} */
+  let routineSectionElement = null;
+
+  setup(function() {
+    PolymerTest.clearBody();
+  });
+
+  teardown(function() {
+    if (routineSectionElement) {
+      routineSectionElement.remove();
+    }
+    routineSectionElement = null;
+  });
+
+  function initializeRoutineSection() {
+    assertFalse(!!routineSectionElement);
+
+    // Add the entry to the DOM.
+    routineSectionElement = document.createElement('routine-section');
+    assertTrue(!!routineSectionElement);
+    document.body.appendChild(routineSectionElement);
+
+    return flushTasks();
+  }
+
+  test('ElementRenders', () => {
+    return initializeRoutineSection().then(() => {
+      // Verify the element rendered.
+      assertTrue(!!routineSectionElement.$$('#routineSection'));
+    });
+  });
+});

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -28,6 +28,7 @@ js_type_check("closure_compile_module") {
     ":realtime_cpu_chart",
     ":routine_result_entry",
     ":routine_result_list",
+    ":routine_section",
   ]
 }
 
@@ -147,6 +148,12 @@ js_library("routine_result_list") {
   ]
 }
 
+js_library("routine_section") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 html_to_js("web_components") {
   js_files = [
     "battery_status_card.js",
@@ -162,5 +169,6 @@ html_to_js("web_components") {
     "realtime_cpu_chart.js",
     "routine_result_entry.js",
     "routine_result_list.js",
+    "routine_section.js",
   ]
 }

chromeos/components/diagnostics_ui/resources/diagnostics_app_resources.grd

@@ -33,6 +33,7 @@
       <include name="IDR_DIAGNOSTICS_REALTIME_CPU_CHART_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/realtime_cpu_chart.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_ROUTINE_RESULT_ENTRY_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/routine_result_entry.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_ROUTINE_RESULT_LIST_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/routine_result_list.js" use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_DIAGNOSTICS_ROUTINE_SECTION_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/routine_section.js" use_base_dir="false" type="BINDATA"/>
       <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_TYPES_JS" file="diagnostics_types.js" type="BINDATA"/>
     </includes>

chromeos/components/diagnostics_ui/resources/routine_section.html

+<style include="diagnostics-shared">
+</style>
+
+<div id="routineSection">
+</div>

chromeos/components/diagnostics_ui/resources/routine_section.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_card.js';
+import './diagnostics_shared_css.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/**
+ * @fileoverview
+ * 'routine-section' has a button to run tests and displays their results.
+ */
+Polymer({
+  is: 'routine-section',
+
+  _template: html`{__html_template__}`,
+
+  properties: {},
+
+  /** @override */
+  created() {},
+});