Changes the sliders on tts settings to have value, marked points.

Per UI review, the TTS settings page sliders should have their current
values shown on the screen and dots showing that they have steps, similar
to the slider in the display settings page.

Bug: 823359
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I9a52d25c11a95439f90e767a02744c162f693605
Reviewed-on: https://chromium-review.googlesource.com/1054558
Commit-Queue: Katie Dektar <katie@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: David Tseng <dtseng@chromium.org>
Cr-Commit-Position: refs/heads/master@{#559320}

chrome/app/settings_strings.grdp

@@ -385,6 +385,12 @@
     <message name="IDS_SETTINGS_TEXT_TO_SPEECH_VOLUME_MAXIMUM_LABEL" desc="A label for the maximum side of a slider allowing users to change their text-to-speech speech volume">
       Loudest
     </message>
+    <message name="IDS_SETTINGS_PERCENTAGE" desc="A number displayed as a percentage">
+      <ph name="PERCENTAGE">$1<ex>120</ex>%</ph>
+    </message>
+    <message name="IDS_SETTINGS_DEFAULT_PERCENTAGE" desc="A number displayed as a percentage, which is the normal or default.">
+      <ph name="PERCENTAGE">$1<ex>120</ex>%</ph> (normal)
+    </message>
     <message name="IDS_SETTINGS_TEXT_TO_SPEECH_PREVIEW_HEADING" desc="The heading for a section of the text-to-speech settings page where a user can preview text to speech">
       Preview
     </message>

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

@@ -34,6 +34,7 @@ js_library("tts_subpage") {
     ":externs",
     "..:route",
     "../settings_page:settings_animated_pages",
+    "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:load_time_data",
     "//ui/webui/resources/js:web_ui_listener_behavior",
   ]

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-textarea.html">
-<link rel="import" href="../controls/settings_slider.html">
+<link rel="import" href="../device_page/display_size_slider.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../languages_page/languages_browser_proxy.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -42,36 +43,30 @@
     <h2>$i18n{textToSpeechProperties}</h2>
     <div class="settings-box first">
       <div class="start">$i18n{textToSpeechRate}</div>
-      <!-- Rate goes from 0.5 to 10 with a step of ~0.5.
-           TODO(katie): May want to make non-linear scale
-           in JS to describe this, rather than a linear scale. -->
-      <settings-slider
+      <display-size-slider
           pref="{{prefs.settings.tts.speech_rate}}"
-          min="1" max="20" scale="2"
-          label-min="$i18n{textToSpeechRateMinimumLabel}"
-          label-max="$i18n{textToSpeechRateMaximumLabel}">
-      </settings-slider>
+          ticks="[[speechRateTicks_()]]"
+          min-label="$i18n{textToSpeechRateMinimumLabel}"
+          max-label="$i18n{textToSpeechRateMaximumLabel}">
+      </display-size-slider>
     </div>
     <div class="settings-box continuation">
       <div class="start">$i18n{textToSpeechPitch}</div>
-      <!-- Pitch goes from 0.1 to 2.0 with a step of ~0.1 -->
-      <settings-slider
+      <display-size-slider
           pref="{{prefs.settings.tts.speech_pitch}}"
-          min="1" max="20" scale="10"
-          label-min="$i18n{textToSpeechPitchMinimumLabel}"
-          label-max="$i18n{textToSpeechPitchMaximumLabel}">
-      </settings-slider>
+          ticks="[[speechPitchTicks_()]]"
+          min-label="$i18n{textToSpeechPitchMinimumLabel}"
+          max-label="$i18n{textToSpeechPitchMaximumLabel}">
+      </display-size-slider>
     </div>
     <div class="settings-box continuation">
       <div class="start">$i18n{textToSpeechVolume}</div>
-      <!-- Volume goes from 0.1 to 1.0 with a step of ~0.05.
-           TODO(katie): Does it make sense to include values lower than 0.5? -->
-      <settings-slider
+      <display-size-slider
           pref="{{prefs.settings.tts.speech_volume}}"
-          min="1" max="20" scale="20"
-          label-min="$i18n{textToSpeechVolumeMinimumLabel}"
-          label-max="$i18n{textToSpeechVolumeMaximumLabel}">
-      </settings-slider>
+          ticks="[[speechVolumeTicks_()]]"
+          min-label="$i18n{textToSpeechVolumeMinimumLabel}"
+          max-label="$i18n{textToSpeechVolumeMaximumLabel}">
+      </display-size-slider>
     </div>
     <h2>$i18n{textToSpeechPreviewHeading}</h2>
     <div class="settings-box first">

chrome/browser/resources/settings/a11y_page/tts_subpage.js

@@ -10,7 +10,7 @@
 Polymer({
   is: 'settings-tts-subpage',
 
-  behaviors: [WebUIListenerBehavior],
+  behaviors: [WebUIListenerBehavior, I18nBehavior],
 
   properties: {
     /**
@@ -41,6 +41,60 @@ Polymer({
     chrome.send('getTtsExtensions');
   },
 
+  /**
+   * Ticks for the Speech Rate slider. Non-linear as we expect people
+   * to want more control near 1.0.
+   * @return Array<{value: number, label: string}>
+   * @private
+   */
+  speechRateTicks_: function() {
+    return Array.from(Array(16).keys()).map(x => {
+      return x <= 4 ?
+          // Linear from rates 0.6 to 1.0
+          this.initTick_(x / 10 + .6) :
+          // Power function above 1.0 gives more control at lower values.
+          this.initTick_(Math.pow(x - 3, 2) / 20 + 1);
+    });
+  },
+
+  /**
+   * Ticks for the Speech Pitch slider. Valid pitches are between 0 and 2,
+   * exclusive of 0.
+   * @return Array<{value: number, label: string}>
+   * @private
+   */
+  speechPitchTicks_: function() {
+    return Array.from(Array(10).keys()).map(x => {
+      return this.initTick_(x * .2 + .2);
+    });
+  },
+
+  /**
+   * Ticks for the Speech Volume slider. Valid volumes are between 0 and
+   * 1 (100%), but volumes lower than .2 are excluded as being too quiet.
+   * The values are linear between .2 and 1.0.
+   * @return Array<{value: number, label: string}>
+   * @private
+   */
+  speechVolumeTicks_: function() {
+    return Array.from(Array(9).keys()).map(x => {
+      return this.initTick_(x * .1 + .2);
+    });
+  },
+
+  /**
+   * Initializes i18n labels for ticks arrays.
+   * @param {number} tick The value to make a tick for.
+   * @return {{value: number, label: string}}
+   * @private
+   */
+  initTick_: function(tick) {
+    let value = (100 * tick).toFixed(0);
+    let label = value === '100' ? this.i18n('defaultPercentage', value) :
+                                  this.i18n('percentage', value);
+    return {label: label, value: tick};
+  },
+
   /**
    * Populates the list of languages and voices for the UI to use in display.
    * @param {Array<TtsHandlerVoice>} voices

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

@@ -82,6 +82,7 @@
         transform: translateX(-50%);
         transition: margin-top 200ms cubic-bezier(0, 0, 0.2, 1);
         vertical-align: middle;
+        white-space: nowrap;
         width: auto;
       }
 

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -258,6 +258,8 @@ void AddA11yStrings(content::WebUIDataSource* html_source) {
      IDS_SETTINGS_TEXT_TO_SPEECH_VOLUME_MINIMUM_LABEL},
     {"textToSpeechVolumeMaximumLabel",
      IDS_SETTINGS_TEXT_TO_SPEECH_VOLUME_MAXIMUM_LABEL},
+    {"percentage", IDS_SETTINGS_PERCENTAGE},
+    {"defaultPercentage", IDS_SETTINGS_DEFAULT_PERCENTAGE},
     {"textToSpeechPreviewHeading", IDS_SETTINGS_TEXT_TO_SPEECH_PREVIEW_HEADING},
     {"textToSpeechPreviewInputLabel",
      IDS_SETTINGS_TEXT_TO_SPEECH_PREVIEW_INPUT_LABEL},