UI change for adjustable large cursor

chrome/browser/resources/settings/a11y_page/manage_a11y_page.html

Index: chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
diff --git a/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html b/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
index bae3a89445623f7e086756dcc420b09334f91fb4..df5688f8959aafa22a8914ec99036e7972435ac4 100644
--- a/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
+++ b/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
@@ -18,6 +18,10 @@
         -webkit-margin-start: 16px;
       }
 
+      .sub-item > .start {
+        -webkit-margin-start: 56px;

[Dan Beam, 2017/03/25 06:55:49]

what's this doing?  can this be made up of other variables?  it just looks like
it's a few spacing variables combined

[yawano, 2017/03/27 10:52:15]

We had the exact variable for indent. Thank you!

+      }
+
       h2 ~ .settings-box {
         -webkit-margin-end: var(--settings-box-row-padding);
         -webkit-margin-start: var(--settings-box-row-indent);
@@ -149,12 +153,14 @@
           label="$i18n{largeMouseCursorLabel}">
       </settings-toggle-button>
       <template is="dom-if" if="[[enableAdjustableLargeCursor_]]">
-        <div class="list-item">
-          <div>$i18n{largeMouseCursorSizeLabel}</div>
+        <div class="list-item sub-item">
+          <div class="start">$i18n{largeMouseCursorSizeLabel}</div>
           <settings-slider
-             disabled="[[!prefs.settings.a11y.large_cursor_enabled.value]]"
+             disabled$="[[!prefs.settings.a11y.large_cursor_enabled.value]]"
              pref="{{prefs.settings.a11y.large_cursor_dip_size}}"
-             min="25" max="64"></settings-slider>
+             min="25" max="64" label-min="$i18n{largeMouseCursorSizeSmallLabel}"
+             label-max="$i18n{largeMouseCursorSizeLargeLabel}">
+          </settings-slider>
         </div>
       </template>
       <settings-toggle-button