Diagnostics: Add skeleton for shared css

- Just import the default cros styles
- No other styling yet

Bug: 1125150
Test: None
Change-Id: I7185db001995045d48e45d4479faa23ce6ed9ce1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2401781Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805916}

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -19,5 +19,8 @@ js_library("diagnostics_app") {
 }
 
 html_to_js("web_components") {
-  js_files = [ "diagnostics_app.js" ]
+  js_files = [
+    "diagnostics_app.js",
+    "diagnostics_shared_css.js",
+  ]
 }

chromeos/components/diagnostics_ui/resources/diagnostics_app_resources.grd

@@ -16,6 +16,7 @@
       <include name="IDR_DIAGNOSTICS_APP_ICON" file="app_icon_192.png" type="BINDATA" />
       <include name="IDR_DIAGNOSTICS_APP_INDEX_HTML" file="index.html" type="BINDATA" />
       <include name="IDR_DIAGNOSTICS_APP_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_app.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"/>
     </includes>
   </release>
-</grit>
\ No newline at end of file
+</grit>

chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.html

+<link rel="stylesheet"
+    href="chrome://resources/chromeos/colors/cros_colors.generated.css">
+<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+<link rel="stylesheet" href="chrome://resources/css/md_colors.css">
+<template>
+  <style include="cr-shared-style">
+    html {
+      background-color: var(--cros-bg-color);
+    }
+  </style>
+</template>

chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.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://resources/cr_elements/shared_style_css.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+<dom-module id="diagnostics-shared">{__html_template__}</dom-module>
+`;
+document.body.appendChild(template.content.cloneNode(true));

chromeos/components/diagnostics_ui/resources/index.html

@@ -11,8 +11,9 @@
     <diagnostics-app></diagnostics-app>
 
     <script type="module" src="diagnostics_app.js"></script>
+    <link rel="stylesheet" src="diagnostics_shared_css.js"></script>
     <!-- Below mojo script required to run browser tests -->
     <script src="chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js">
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>