chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_elements.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="cups_printer_dialog_util.html">
<link rel="import" href="cups_printer_shared_css.html">
<link rel="import" href="cups_printers_browser_proxy.html">

<dom-module id="add-printer-list">
  <template>
    <style include="cups-printer-shared">
      .list-item {
        padding: 0 20px;
      }
    </style>
    <div>
      <array-selector id="arraySelector" items="[[printers]]"
          selected="{{selectedPrinter}}">
      </array-selector>
      <template is="dom-repeat" items="[[printers]]" sort="sort_">
        <button class="list-item" on-click="onSelect_">
          [[item.printerName]]
        </button>
      </template>
    </div>
  </template>
</dom-module>

<dom-module id="add-printer-dialog">
  <template>
    <style include="settings-shared">
      #dialog {
        /* Force a bottom border regardless of scroll state. */
        --cr-dialog-body-border-bottom: 1px solid var(--paper-grey-300);
      }
      #dialog [slot=body] {
        height: 350px;
        padding-inline-end: 0;
        padding-inline-start: 0;
      }
    </style>

    <cr-dialog id="dialog" close-text="$i18n{close}">
      <div slot="title">
        <slot name="dialog-title"></slot>
      </div>
      <div slot="body">
        <slot name="dialog-body"></slot>
      </div>
      <div slot="button-container">
        <slot name="dialog-buttons"></slot>
      </div>
    </cr-dialog>
  </template>
  <script src="cups_add_printer_dialog_elements.js"></script>
</dom-module>

<dom-module id="printer-dialog-error">
  <template>
    <style>
      #error-wrap {
        display: flex;
      }

      #error-container {
        height: 20px;
        margin-top: 10px;
      }

      #error-icon {
       --iron-icon-fill-color: var(--google-red-600);
      }

      #error-message {
        color: var(--google-red-600);
        font-size: 10px;
        margin-inline-start: 5px;
      }
    </style>
    <div id="error-container" hidden="[[!errorText]]">
      <div id="error-wrap">
        <iron-icon id="error-icon" icon="cr:warning"></iron-icon>
        <div id="error-message">
          [[errorText]]
        </div>
      </div>
    </div>
  </template>
</dom-module>