chrome/browser/resources/chromeos/login/oobe_hid_detection.html

<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<iron-iconset-svg name="oobe-hid-detection" size="24">
  <svg>
    <defs>
      <g id="bluetooth"><path d="M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z"></path></g>
    </defs>
  </svg>
</iron-iconset-svg>

<iron-iconset-svg name="oobe-hid-detection-20" size="20">
  <svg>
    <defs>
      <g id="mouse" fill="none" fill-rule="evenodd">
        <path d="M0 0h20v20H0"></path>
        <path d="M10.833.892V7.5h5.834c0-3.4-2.546-6.2-5.834-6.608zM3.333 12.5c0 3.683 2.984 6.667 6.667 6.667s6.667-2.984 6.667-6.667V9.167H3.333V12.5zM9.167.892C5.88 1.3 3.333 4.1 3.333 7.5h5.834V.892z" fill="#5A5A5A">
        </path>
      </g>
      <g id="keyboard" fill="none" fill-rule="evenodd">
        <path d="M16.667 4.167H3.333c-.92 0-1.658.745-1.658 1.666l-.008 8.334c0 .92.746 1.666 1.666 1.666h13.334c.92 0 1.666-.745 1.666-1.666V5.833c0-.92-.745-1.666-1.666-1.666zm-7.5 2.5h1.666v1.666H9.167V6.667zm0 2.5h1.666v1.666H9.167V9.167zm-2.5-2.5h1.666v1.666H6.667V6.667zm0 2.5h1.666v1.666H6.667V9.167zm-.834 1.666H4.167V9.167h1.666v1.666zm0-2.5H4.167V6.667h1.666v1.666zm7.5 5.834H6.667V12.5h6.666v1.667zm0-3.334h-1.666V9.167h1.666v1.666zm0-2.5h-1.666V6.667h1.666v1.666zm2.5 2.5h-1.666V9.167h1.666v1.666zm0-2.5h-1.666V6.667h1.666v1.666z" fill="#5A5A5A">
        </path>
        <path d="M0 0h20v20H0V0zm0 0h20v20H0V0z" fill="#D8D8D8">
        </path>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

<iron-iconset-svg name="oobe-hid-detection-40" size="40">
  <svg>
    <defs>
      <g id="mouse" fill="none" fill-rule="evenodd">
        <path d="M0 0h40v40H0"></path>
        <path d="M21 1.783V15h11.667c0-6.8-5.092-12.4-11.667-13.217zm-1 35.55c7.183 0 13-5.966 13-13.333v-7H7v7c0 7.367 5.818 13.333 13 13.333zM19 1.78C12.237 2.597 7 8.198 7 15h12V1.78z" fill="#5A5A5A">
        </path>
      </g>
      <g id="keyboard" fill="none" fill-rule="evenodd">
        <path d="M33.333 8.333H6.667c-1.842 0-3.317 1.492-3.317 3.334l-.017 16.666c0 1.842 1.492 3.334 3.334 3.334h26.666c1.842 0 3.334-1.492 3.334-3.334V11.667c0-1.842-1.492-3.334-3.334-3.334zm-15 5h3.334v3.334h-3.334v-3.334zm0 5h3.334v3.334h-3.334v-3.334zm-5-5h3.334v3.334h-3.334v-3.334zm0 5h3.334v3.334h-3.334v-3.334zm-1.666 3.334H8.333v-3.334h3.334v3.334zm0-5H8.333v-3.334h3.334v3.334zm15 11.666H13.333V25h13.334v3.333zm0-6.666h-3.334v-3.334h3.334v3.334zm0-5h-3.334v-3.334h3.334v3.334zm5 5h-3.334v-3.334h3.334v3.334zm0-5h-3.334v-3.334h3.334v3.334z" fill="#5A5A5A">
        </path>
        <path d="M0 0h40v40H0V0zm0 0h40v40H0V0z" fill="#D8D8D8">
        </path>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

<dom-module id="oobe-hid-detection">
  <template>
    <style include="oobe-dialog-host"></style>
    <link rel="stylesheet" href="oobe_hid_detection.css">
    <oobe-dialog has-buttons
        title-key="hidDetectionInvitation"
        subtitle-key="hidDetectionPrerequisites">
      <iron-icon icon="oobe-hid-detection:bluetooth" slot="oobe-icon">
      </iron-icon>
      <div slot="footer" class="flex layout vertical">
        <div class="layout vertical justified hid-selection-entry">
          <div id="hid-mouse-row" class="flex layout horizontal center">
            <hd-iron-icon id="mouse-icon" alt=""
                icon1x="oobe-hid-detection-20:mouse"
                icon2x="oobe-hid-detection-40:mouse">
            </hd-iron-icon>
            <img id="mouse-tick" alt=""
                hidden="[[!tickIsVisible_(mouseState_)]]"
                src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK">
            <div id="mouse-label" aria-live="polite">
              [[getMouseLabel_(locale, mouseState_, pointingDeviceName)]]
            </div>
          </div>
        </div>
        <div class="layout vertical hid-selection-entry">
          <div id="hid-keyboard-row" class="flex layout horizontal center"
              on-tap="openPinDialog_">
            <hd-iron-icon id="keyboard-icon" alt=""
                icon1x="oobe-hid-detection-20:keyboard"
                icon2x="oobe-hid-detection-40:keyboard">
            </hd-iron-icon>
            <img id="keyboard-tick" alt=""
                hidden="[[!tickIsVisible_(keyboardState_)]]"
                src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK">
            <div id="keyboard-label" aria-live="polite">
              [[getKeyboardLabel_(locale, keyboardState_, keyboardDeviceName)]]
            </div>
          </div>
        </div>
      </div>
      <div slot="bottom-buttons" class="flex layout horizontal end-justified">
        <oobe-text-button inverse on-tap="onHIDContinueTap_"
            text-key="hidDetectionContinue"
            disabled="[[!continueButtonEnabled]]"></oobe-text-button>
      </div>
    </oobe-dialog>

    <!-- Popup that displays the PIN for pairing with a bluetooth keyboard. -->
    <oobe-help-dialog id="hid-pin-popup" on-close="onPinDialogClosed_">
      <h1 slot="title">[[pinDialogTitle]]</h1>
      <div slot="content" class="content-padding">
        <div>
          [[i18nDynamic(locale, 'hidDetectionBluetoothPairingCode')]]
        </div>
        <div id="hid-keyboard-pincode"
            class="layout horizontal center-justified pin-code-style">
          <div id="hid-pincode-sym-1"></div>
          <div id="hid-pincode-sym-2"></div>
          <div id="hid-pincode-sym-3"></div>
          <div id="hid-pincode-sym-4"></div>
          <div id="hid-pincode-sym-5"></div>
          <div id="hid-pincode-sym-6"></div>
        </div>
        <div>
          [[i18nDynamic(locale, 'hidDetectionBluetoothPairingCodeExplanation')]]
        </div>
      </div>
    </oobe-help-dialog>
  </template>
</dom-module>