Settings WebUI: add 0 as a valid minimum font size and show tick labels on font sliders

The preference minimum font size has a default value of 0. The preference is exposed
in the UI on the appearance fonts page in settings via a slider. The allowable values
for the preference excluded the default value of 0.

The settings slider code was changed to ensure the value of the preference was also
an allowable value. When the font settings page loaded, the preference was then
updated to the closest allowable value. If the preference is set to the default value,
the closest allowable value is 6px.

This change adds 0 as an allowable value which will allow a user to turn off the
effects of a minimum font size.

Bug: 944002
Change-Id: Ifc1c72e3673eef60e62f3edecd07ccba6b67928a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1573238
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#652297}

chrome/browser/resources/settings/appearance_page/BUILD.gn

@@ -18,6 +18,7 @@ js_library("appearance_fonts_page") {
   deps = [
     ":fonts_browser_proxy",
     "../controls:settings_dropdown_menu",
+    "//ui/webui/resources/cr_elements/cr_slider:cr_slider",
     "//ui/webui/resources/js:cr",
     "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:web_ui_listener_behavior",

chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js

@@ -13,7 +13,15 @@ const FONT_SIZE_RANGE = [
 
 /** @type {!Array<number>} */
 const MINIMUM_FONT_SIZE_RANGE =
-    [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24];
+    [0, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24];
+
+/**
+ * @param {!Array<number>} ticks
+ * @return {!Array<!cr_slider.SliderTick>}
+ */
+function ticksWithLabels(ticks) {
+  return ticks.map(x => ({label: `${x}`, value: x}));
+}
 
 /**
  * 'settings-appearance-fonts-page' is the settings page containing appearance
@@ -41,22 +49,22 @@ Polymer({
 
     /**
      * Common font sizes.
-     * @private {!Array<number>}
+     * @private {!Array<!cr_slider.SliderTick>}
      */
     fontSizeRange_: {
       readOnly: true,
       type: Array,
-      value: FONT_SIZE_RANGE,
+      value: ticksWithLabels(FONT_SIZE_RANGE),
     },
 
     /**
      * Reasonable, minimum font sizes.
-     * @private {!Array<number>}
+     * @private {!Array<!cr_slider.SliderTick>}
      */
     minimumFontSizeRange_: {
       readOnly: true,
       type: Array,
-      value: MINIMUM_FONT_SIZE_RANGE,
+      value: ticksWithLabels(MINIMUM_FONT_SIZE_RANGE),
     },
 
     /**