Refine display_size_slider behavior when prefs change

This change observes pref changes and triggers dynamic slider updates.

Since a caller setting prefs is not aware of tick markings, we also make the slider resolve updates to round to the tick to the right of the value.

Change-Id: I8a02ae2c18541a880596d6aefba117ff54234a4e
Reviewed-on: https://chromium-review.googlesource.com/1159400
Commit-Queue: David Tseng <dtseng@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Katie Dektar <katie@chromium.org>
Cr-Commit-Position: refs/heads/master@{#580340}

chrome/browser/resources/settings/device_page/display_size_slider.js

@@ -128,6 +128,16 @@ Polymer({
     'pageup end': 'resetToMaxIndex_',
   },
 
+  /** @override */
+  ready: function() {
+    chrome.settingsPrivate.onPrefsChanged.addListener((prefs) => {
+      prefs.forEach((pref) => {
+        if (pref.key == this.pref.key && this.pref.value != pref.value)
+          this.pref.value = pref.value;
+      });
+    });
+  },
+
   /** @private {boolean} */
   usedMouse_: false,
 
@@ -469,18 +479,20 @@ Polymer({
   updateIndex_: function() {
     if (!this.ticks || this.ticks.length == 0)
       return;
-    if (!this.pref)
+    if (!this.pref || typeof(this.pref.value) != 'number')
       return;
+    let resolvedTick = this.ticks.length - 1;
     for (let i = 0; i < this.ticks.length; i++) {
-      if (this.ticks[i].value == this.pref.value) {
-        this._setIndex(i);
-        this.setAttribute(
-            'aria-valuenow',
-            this.getAriaValueForIndex_(this.ticks, this.index));
-        this.setAttribute(
-            'aria-valuetext', this.getLabelForIndex_(this.ticks, this.index));
+      if (this.ticks[i].value >= this.pref.value) {
+        resolvedTick = i;
+        break;
       }
     }
+    this._setIndex(resolvedTick);
+    this.setAttribute(
+        'aria-valuenow', this.getAriaValueForIndex_(this.ticks, this.index));
+    this.setAttribute(
+        'aria-valuetext', this.getLabelForIndex_(this.ticks, this.index));
   },
 
   /**