print-management: add placeholder content

- Add placeholder UI elements for image, heading, detail,
  and button.
- Add basic flex styling.
- Update BUILD.gn to include cr-button dependency.

Screenshot: http://screen/4Ftg7dzjJ5EWYPR

Bug: b:283119650
Test: browser_tests --gtest_filter=*PrintManagment*
Change-Id: I4a6e07c9c24c35d0155b2c2761ae0baea30bc87c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4544865
Commit-Queue: Ashley Prasad <ashleydp@google.com>
Reviewed-by: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1146548}

ash/webui/print_management/resources/print_management.html

@@ -103,6 +103,12 @@
     margin-bottom: 0;
     margin-top: 0;
   }
+
+  printer-setup-info {
+    align-items: center;
+    flex: 1 1 auto;
+    height: 100%;
+  }
 </style>
 
 <div class="main-container margin-border">

ash/webui/print_management/resources/printer_setup_info.html

@@ -1 +1,16 @@
-<div></div>
+<style include="print-management-shared print-management-fonts
+    cros-color-overrides">
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    text-align: center;
+    width: 100%;
+  }
+</style>
+<div class="container">
+  <iron-icon icon="print-management:file-generic"></iron-icon>
+  <h2 class="message-heading">No printer jobs</h2>
+  <p class="message-detail">Go to Printer settings to manage your printers</p>
+  <cr-button class="action-button">Manage</cr-button>
+</div>

ash/webui/print_management/resources/printer_setup_info.ts

@@ -2,6 +2,12 @@
 // 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/chromeos/cros_color_overrides.css.js';
+import 'chrome://resources/cr_elements/cr_button/cr_button.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import './print_management_fonts.css.js';
+import './print_management_shared.css.js';
+
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getTemplate} from './printer_setup_info.html.js';

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

@@ -22,6 +22,7 @@ ts_library("build_ts") {
     "../..:build_ts",
     "//ash/webui/print_management/resources:build_ts",
     "//third_party/polymer/v3_0:library",
+    "//ui/webui/resources/cr_elements:build_ts",
     "//ui/webui/resources/js:build_ts",
   ]
 }

chrome/test/data/webui/chromeos/print_management/print_management_test.ts

@@ -11,11 +11,13 @@ import {PrintJobEntryElement} from 'chrome://print-management/print_job_entry.js
 import {PrintManagementElement} from 'chrome://print-management/print_management.js';
 import {PrinterSetupInfoElement} from 'chrome://print-management/printer_setup_info.js';
 import {ActivePrintJobInfo, ActivePrintJobState, CompletedPrintJobInfo, PrinterErrorCode, PrintingMetadataProviderInterface, PrintJobCompletionStatus, PrintJobInfo, PrintJobsObserverRemote} from 'chrome://print-management/printing_manager.mojom-webui.js';
+import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {PromiseResolver} from 'chrome://resources/js/promise_resolver.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
 import {flushTasks} from 'chrome://webui-test/polymer_test_util.js';
+import {isVisible} from 'chrome://webui-test/test_util.js';
 
 export function initPrintJobEntryElement(): PrintJobEntryElement {
   const element = document.createElement('print-job-entry');
@@ -1120,3 +1122,36 @@ suite('PrintJobEntryTest', () => {
         jobEntryTestElement.getFileIconClass(), 'flex-center file-icon-yellow');
   });
 });
+
+suite('PrinterSetupInfoTest', () => {
+  let printerSetupInfoElement: PrinterSetupInfoElement|null = null;
+
+  teardown(() => {
+    if (printerSetupInfoElement) {
+      printerSetupInfoElement.remove();
+    }
+    printerSetupInfoElement = null;
+  });
+
+  function initPrinterSetupInfoElement(): Promise<void> {
+    const element = document.createElement(PrinterSetupInfoElement.is);
+    document.body.appendChild(element);
+    printerSetupInfoElement = element as PrinterSetupInfoElement;
+
+    return flushTasks();
+  }
+
+  // Verify core elements of element rendered.
+  test('ensureBasicLayoutRenders', async () => {
+    await initPrinterSetupInfoElement();
+
+    assertTrue(isVisible(
+        querySelector<IronIconElement>(printerSetupInfoElement!, 'iron-icon')));
+    assertTrue(isVisible(querySelector<HTMLHeadingElement>(
+        printerSetupInfoElement!, '.message-heading')));
+    assertTrue(isVisible(querySelector<HTMLParagraphElement>(
+        printerSetupInfoElement!, '.message-detail')));
+    assertTrue(isVisible(
+        querySelector<CrButtonElement>(printerSetupInfoElement!, 'cr-button')));
+  });
+});