Create CrOS printer status icon element

This element will be used in CrOS Print Preview to display a printer
icon layered with a colored status badge.

This element consist of 3 layers. The first layer is a printer icon.
The second layer is the background badge which is a circle whose color
matches the current background. The third layer is the status badge
which is a circle inside the background badge whose color will indicate
the status of a the printer.

Bug: 1059607
Change-Id: Iafb9b961514f5408c5999dbd71ac82b0ccf60e33
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2234125
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#779130}

chrome/browser/resources/print_preview/print_preview_resources.grd

@@ -52,6 +52,9 @@
         <include name="IDR_PRINT_PREVIEW_UI_PRINT_PREVIEW_DESTINATION_DROPDOWN_CROS_JS"
                  file="${root_gen_dir}/chrome/browser/resources/print_preview/ui/destination_dropdown_cros.js"
                  use_base_dir="false" compress="false" type="BINDATA"/>
+        <include name="IDR_PRINT_PREVIEW_UI_PRINT_PREVIEW_PRINTER_STATUS_ICON_CROS_JS"
+                 file="${root_gen_dir}/chrome/browser/resources/print_preview/ui/printer_status_icon_cros.js"
+                 use_base_dir="false" compress="false" type="BINDATA"/>
       </if>
       <include name="IDR_PRINT_PREVIEW_UI_DESTINATION_SELECT_CSS_JS"
                file="${root_gen_dir}/chrome/browser/resources/print_preview/ui/destination_select_css.js"

chrome/browser/resources/print_preview/ui/BUILD.gn

@@ -56,6 +56,7 @@ js_type_check("closure_compile_module") {
       ":destination_dropdown_cros",
       ":destination_select_cros",
       ":pin_settings",
+      ":printer_status_icon_cros",
     ]
   } else {
     deps += [ ":destination_select" ]
@@ -192,6 +193,12 @@ if (is_chromeos) {
       "//ui/webui/resources/cr_elements/cr_input:cr_input.m",
     ]
   }
+
+  js_library("printer_status_icon_cros") {
+    deps = [
+      "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    ]
+  }
 } else {
   js_library("destination_select") {
     deps = [
@@ -561,6 +568,7 @@ html_to_js("web_components") {
       "destination_dropdown_cros.js",
       "destination_select_cros.js",
       "pin_settings.js",
+      "printer_status_icon_cros.js",
     ]
   } else {
     js_files += [ "destination_select.js" ]

chrome/browser/resources/print_preview/ui/printer_status_icon_cros.html

+<style include="cr-shared-style">
+  div {
+    display: inline;
+    position: relative;
+  }
+
+  .badge {
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+    --status-badge-radius: 8px;
+    --background-badge-radius: 12px;
+    --background-badge-left: 12px;
+    --background-badge-top: 6px;
+  }
+
+  :host-context([dir='rtl']) .badge {
+    --background-badge-left: -4px;
+  }
+
+  #status-badge {
+    background-color: var(--google-grey-500);
+    height: var(--status-badge-radius);
+    left: calc(var(--background-badge-left) + (var(--background-badge-radius) - var(--status-badge-radius))/2);
+    top: calc(var(--background-badge-top) + (var(--background-badge-radius) - var(--status-badge-radius))/2);
+    width: var(--status-badge-radius);
+  }
+
+  :host-context([dir='rtl']) #status-badge {
+    right: calc(var(--background-badge-left) + (var(--background-badge-radius) - var(--status-badge-radius))/2);
+  }
+
+  #background-badge {
+    background-color: var(--google-grey-refresh-100);
+    height: var(--background-badge-radius);
+    left: var(--background-badge-left);
+    top: var(--background-badge-top);
+    width: var(--background-badge-radius);
+  }
+
+  :host-context([dir='rtl']) #background-badge {
+    right: var(--background-badge-left);
+  }
+</style>
+<div>
+  <iron-icon icon="print-preview:print"></iron-icon>
+  <span id="background-badge" class="badge"></span>
+  <span id="status-badge" class="badge"></span>
+</div>

chrome/browser/resources/print_preview/ui/printer_status_icon_cros.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_vars_css.m.js';
+import './icons.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+Polymer({
+  is: 'printer-status-icon-cros',
+
+  _template: html`{__html_template__}`,
+
+});