per_device_touchpad_subsection.html

<style include="settings-shared">
  h2 {
    padding-inline-start: var(--cr-section-padding);
  }

  .subsection {
    padding-inline-end: var(--cr-section-padding);
    padding-inline-start: var(--cr-section-indent-padding);
  }

  .subsection > settings-toggle-button,
  .subsection > .settings-box  {
    padding-inline-end: 0;
    padding-inline-start: 0;
  }
</style>
<div id="touchpad">
  <h2>[[getTouchpadName(touchpad.name)]]</h2>
  <div class="subsection">
    <settings-toggle-button id="enableTapToClick"
        pref="{{enableTapToClickPref}}"
        label="$i18n{touchpadTapToClickEnabledLabel}"
        deep-link-focus-id$="[[Setting.kTouchpadTapToClick]]">
    </settings-toggle-button>
    <settings-toggle-button id="enableTapDragging"
        class="hr"
        pref="{{enableTapDraggingPref}}"
        label="$i18n{tapDraggingLabel}"
        deep-link-focus-id$="[[Setting.kTouchpadTapDragging]]">
    </settings-toggle-button>
    <settings-toggle-button id="touchpadAcceleration"
        class="hr"
        pref="{{accelerationPref}}"
        label="$i18n{touchpadAccelerationLabel}"
        deep-link-focus-id$="[[Setting.kTouchpadAcceleration]]">
    </settings-toggle-button>
    <div class="settings-box">
      <div class="start" id="touchpadSpeedLabel" aria-hidden="true">
        $i18n{touchpadSpeed}
      </div>
        <settings-slider id="touchpadSensitivity"
            pref="{{sensitivityPref}}"
            ticks="[[sensitivityValues_]]"
            label-aria="$i18n{touchpadSpeed}"
            label-min="$i18n{pointerSlow}"
            label-max="$i18n{pointerFast}"
            deep-link-focus-id$="[[Setting.kTouchpadSpeed]]">
        </settings-slider>
    </div>
    <template is="dom-if" if="[[allowScrollSettings_]]" restamp>
      <settings-toggle-button id="touchpadScrollAcceleration"
          class="hr"
          pref="{{scrollAccelerationPref}}"
          label="$i18n{touchpadScrollAccelerationLabel}"
          deep-link-focus-id$="[[Setting.kTouchpadScrollAcceleration]]">
      </settings-toggle-button>
      <div class="settings-box">
        <div class="start" id="touchpadScrollSpeedLabel" aria-hidden="true">
          $i18n{touchpadScrollSpeed}
        </div>
        <settings-slider id="touchpadScrollSpeedSlider"
            pref="{{scrollSensitivityPref}}"
            ticks="[[sensitivityValues_]]"
            label-aria="$i18n{touchpadScrollSpeed}"
            label-min="$i18n{pointerSlow}"
            label-max="$i18n{pointerFast}">
        </settings-slider>
      </div>
    </template>
    <template is="dom-if" if="[[touchpad.isHaptic]]" restamp>
      <div class="settings-box">
        <div class="start" id="touchpadHapticClickSensitivityLabel"
            aria-hidden="true">
          $i18n{touchpadHapticClickSensitivityLabel}
        </div>
        <settings-slider id="touchpadHapticClickSensitivity"
            pref="{{hapticClickSensitivityPref}}"
            ticks="[[hapticClickSensitivityValues_]]"
            label-aria="$i18n{touchpadHapticClickSensitivityLabel}"
            label-min="$i18n{touchpadHapticLightClickLabel}"
            label-max="$i18n{touchpadHapticFirmClickLabel}"
            deep-link-focus-id$=
              "[[Setting.kTouchpadHapticClickSensitivity]]">
        </settings-slider>
      </div>
      <div class="settings-box two-line" id="touchpadHapticFeedbackRow"
          on-click="onTouchpadHapticFeedbackRowClicked_">
        <div class="start settings-box-text">
          <div>$i18n{touchpadHapticFeedbackTitle}</div>
          <div class="secondary">
            <localized-link
              on-click="onLearnMoreLinkClicked_"
              id="touchpadHapticFeedbackSecondary"
              localized-string="$i18n{touchpadHapticFeedbackSecondaryText}"
              link-url="$i18n{hapticFeedbackLearnMoreLink}">
            </localized-link>
          </div>
        </div>
        <cr-toggle id="touchpadHapticFeedbackToggle"
            checked="{{hapticFeedbackValue}}"
            aria-labelledby="touchpadHapticFeedbackRow"
            deep-link-focus-id$="[[Setting.kTouchpadHapticFeedback]]">
        </cr-toggle>
      </div>
    </template>
    <div class="settings-box" id="reverseScrollRow"
          on-click="onTouchpadReverseScrollRowClicked_">
      <div class="start settings-box-text">
        <localized-link
            on-click="onLearnMoreLinkClicked_"
            id="enableReverseScrollingLabel"
            localized-string="$i18n{touchPadScrollLabel}"
            link-url="$i18n{naturalScrollLearnMoreLink}">
        </localized-link>
      </div>
      <cr-toggle id="enableReverseScrollingToggle"
          checked="{{reverseScrollValue}}"
          aria-labelledby="enableReverseScrollingLabel"
          deep-link-focus-id$="[[Setting.kTouchpadReverseScrolling]]">
      </cr-toggle>
    </div>
  </div>
</div>