chrome/browser/resources/chromeos/emulator/input_device_settings.html

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

<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="icons.html">
<link rel="import" href="shared_styles.html">

<dom-module id="input-device-settings">
  <template>
    <!-- TODO(michaelpg): Wrap the line below to fit within the 80-char limit.
         See https://github.com/Polymer/polymer/pull/3668. -->
    <style include="device-emulator-shared-styles iron-flex iron-flex-alignment iron-positioning">
      .content > *:not(:first-child) {
        margin-top: 10px;
      }

      cr-toggle {
        display: inline-block;
        padding-inline-end: 8px;
      }
    </style>
    <div class="layout vertical">
      <div class="element-label">
        <paper-icon-button icon="device-emulator:mouse"></paper-icon-button>
        Input Devices
      </div>
      <div class="content">
        <div>
          <cr-toggle id="touchpad" on-change="onTouchpadChange"></cr-toggle>
          <span>Touchpad</span>
        </div>
        <div>
          <cr-toggle id="mouse" on-change="onMouseChange"></cr-toggle>
          <span>Mouse</span>
        </div>
        <iron-collapse id="changeDescription">
          Any existing Settings windows must be reloaded to reflect these
          changes.
        </iron-collapse>
      </div>
    </div>
  </template>
  <script src="input_device_settings.js"></script>
</dom-module>