Diagnostics: Add support for custom fonts

Screenshots:
 - Diagnostics Page (before) http://shortn/_khK2BurTJp
 - Diagnostics Page (after) http://shortn/_vc4huCgyEv

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

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -105,6 +105,7 @@ html_to_js("web_components") {
     "cpu_card.js",
     "diagnostics_app.js",
     "diagnostics_card.js",
+    "diagnostics_fonts_css.js",
     "diagnostics_shared_css.js",
     "memory_card.js",
     "overview_card.js",

chromeos/components/diagnostics_ui/resources/diagnostics_app_resources.grd

@@ -23,6 +23,7 @@
       <include name="IDR_DIAGNOSTICS_FAKE_DATA_JS" file="fake_data.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_FAKE_METHOD_RESOLVER_JS" file="fake_method_resolver.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_FAKE_SYSTEM_DATA_PROVIDER_JS" file="fake_system_data_provider.js" type="BINDATA"/>
+      <include name="IDR_DIAGNOSTICS_FONTS_CSS_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_MEMORY_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/memory_card.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_MOJO_INTERFACE_PROVIDER_JS" file="mojo_interface_provider.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_OVERVIEW_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/overview_card.js" use_base_dir="false" type="BINDATA"/>

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

-<style include="diagnostics-shared">
+<style include="diagnostics-shared diagnostics-fonts">
+  .title-container {
+    @apply --diagnostics-default-font;
+  }
 </style>
 
 <div id="card-wrapper">

chromeos/components/diagnostics_ui/resources/diagnostics_card.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 './diagnostics_fonts_css.js';
 import './diagnostics_shared_css.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.html

+<template>
+  <style>
+    :host {
+      --diagnostics-default-font-family: "Google Sans", Roboto, sans-serif;
+      --diagnostics-default-font-size: 22px;
+      --diagnostics-default-font-weight: 500; /* medium */
+      --diagnostics-default-text-color: var(--google-grey-900);
+      --diagnostics-default-font: {
+          font-family: var(--diagnostics-default-font-family);
+          font-size: var(--diagnostics-default-font-size);
+          font-weight: var(--diagnostics-default-font-weight);
+      };
+    }
+  </style>
+</template>
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/diagnostics_fonts_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/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+<dom-module id="diagnostics-fonts">{__html_template__}</dom-module>
+`;
+document.body.appendChild(template.content.cloneNode(true));
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.html

@@ -3,7 +3,7 @@
 <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">
+  <style include="cr-shared-style diagnostics-fonts">
     html {
       background-color: var(--cros-bg-color);
     }