<style include="settings-shared input-device-settings-shared">
.settings-box:first-of-type {
border-top: none;
}
:host([allow-scroll-settings_]) .settings-box,
:host([allow-scroll-settings_]) #mouseAcceleration,
#mouseControlledScrolling {
margin-left: var(--cr-section-indent-width);
}
:host([allow-scroll-settings_]) #mouseReverseScrollRow {
border-top: none;
}
.subsection-subtitle {
padding-top: 15px;
}
</style>
<div id="mouse">
<per-device-subsection-header
id="subsectionHeader"
device-key="[[mouse.deviceKey]]"
name="[[mouse.name]]"
battery-info="[[mouse.batteryInfo]]"
icon="os-settings:device-mouse">
</per-device-subsection-header>
<template is="dom-if" if="[[showSwapToggleButton(
customizationRestriction, isPeripheralCustomizationEnabled_)]]">
<settings-toggle-button id="mouseSwapToggleButton"
label="$i18n{mouseSwapButtonsLabel}" pref="{{primaryRightPref}}">
</settings-toggle-button>
</template>
<template is="dom-if" if="[[showInstallAppRow(mouse.appInfo)]]">
<per-device-install-row app-info="[[mouse.appInfo]]">
</per-device-install-row>
</template>
<div class="subsection">
<template is="dom-if" if="[[allowScrollSettings_]]">
<h2 class="subsection-subtitle">$i18n{mouseCursor}</h2>
</template>
<template is="dom-if" if="[[!isPeripheralCustomizationEnabled_]]">
<div class="settings-box">
<div class="start settings-box-text" id="mouseSwapButtonLabel">
$i18n{mouseSwapButtonsLabel}
</div>
<settings-dropdown-menu id="mouseSwapButtonDropdown"
aria-describedby="mouseName"
label="$i18n{mouseSwapButtonsLabel}"
pref="{{primaryRightPref}}"
menu-options="[[swapPrimaryOptions]]"
deep-link-focus-id$="[[Setting.kMouseSwapPrimaryButtons]]">
</settings-dropdown-menu>
</div>
</template>
<settings-toggle-button id="mouseAcceleration"
class="hr"
pref="{{accelerationPref}}"
label="[[getCursorAccelerationString()]]"
sub-label="[[getMouseAccelerationDescription()]]"
aria-describedby="mouseName"
deep-link-focus-id$="[[Setting.kMouseAcceleration]]">
</settings-toggle-button>
<div class="settings-box">
<div class="start" id="mouseSpeedLabel" aria-hidden="true">
[[getCursorSpeedString()]]
</div>
<settings-slider id="mouseSpeedSlider"
pref="{{sensitivityPref}}"
ticks="[[sensitivityValues_]]"
aria-describedby="mouseName"
label-aria="[[getCursorSpeedString()]]"
label-min="$i18n{pointerSlow}"
label-max="$i18n{pointerFast}"
deep-link-focus-id$="[[Setting.kMouseSpeed]]">
</settings-slider>
</div>
<template is="dom-if" if="[[allowScrollSettings_]]">
<h2 class="hr">$i18n{mouseScrolling}</h2>
</template>
<div class="settings-box bottom-divider" id="mouseReverseScrollRow"
on-click="onMouseReverseScrollRowClicked_" actionable-row>
<div class="start settings-box-text">
<localized-link
aria-describedby="mouseName"
on-click="onLearnMoreLinkClicked_"
id="enableMouseReverseScrollingLabel"
localized-string="$i18n{mouseReverseScrollLabel}"
link-url="$i18n{naturalScrollLearnMoreLink}">
</localized-link>
<div class="secondary" hidden="[[!isRevampWayfindingEnabled_]]">
$i18n{mouseReverseScrollDescription}
</div>
</div>
<cr-toggle id="mouseReverseScroll"
checked="{{reverseScrollValue}}"
aria-describedby="mouseName"
aria-label=
"[[getLabelWithoutLearnMore('mouseReverseScrollLabel')]]"
deep-link-focus-id$="[[Setting.kMouseReverseScrolling]]">
</cr-toggle>
</div>
<template is="dom-if" if="[[allowScrollSettings_]]" restamp>
<div class="settings-box bottom-divider" id="mouseControlledScrollingRow"
on-click="onMouseControlledScrollingRowClicked_" actionable-row>
<div class="start settings-box-text">
<localized-link
aria-describedby="mouseName"
on-click="onLearnMoreLinkClicked_"
id="enableMouseControlledScrollingLabel"
localized-string="$i18n{mouseControlledScrollingLabel}"
link-url="$i18n{controlledScrollingLearnMoreLink}">
</localized-link>
</div>
<cr-toggle id="mouseControlledScrolling"
checked="{{!scrollAccelerationValue}}"
aria-describedby="mouseName"
aria-label=
"[[getLabelWithoutLearnMore('mouseControlledScrollingLabel')]]"
deep-link-focus-id$="[[Setting.kMouseScrollAcceleration]]">
</cr-toggle>
</div>
<div class="settings-box">
<div class="start" id="mouseScrollSpeedLabel" aria-hidden="true">
$i18n{mouseScrollSpeed}
</div>
<settings-slider id="mouseScrollSpeedSlider"
pref="{{scrollSensitivityPref}}"
ticks="[[sensitivityValues_]]"
aria-describedby="mouseName"
label-aria="$i18n{mouseScrollSpeed}"
label-min="$i18n{pointerSlow}"
label-max="$i18n{pointerFast}"
disabled="[[mouse.settings.scrollAcceleration]]"
aria-disabled="[[mouse.settings.scrollAcceleration]]">
</settings-slider>
</div>
</template>
<template is="dom-if" if="[[showCustomizeButtonRow(
customizationRestriction,isPeripheralCustomizationEnabled_)]]">
<cr-link-row id="customizeMouseButtons"
class="hr bottom-divider" on-click="onCustomizeButtonsClick"
aria-describedby="mouseName"
label="$i18n{customizeMouseButtonsTitle}">
</cr-link-row>
</template>
<template is="dom-if" if="[[isCompanionAppInstalled(mouse.appInfo)]]">
<per-device-app-installed-row id="AppInstalledRow"
app-info="[[mouse.appInfo]]">
</per-device-app-installed-row>
</template>
</div>
</div>