Increase maximum speech rate and use range for selection in STS.

This will help users customize for maximum productivity by
allowing them to hear more words per minute.

Bug: 819306
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I2c760ddd66358d5cf4a96e3fc7f62aa95a14bc24
Reviewed-on: https://chromium-review.googlesource.com/952209Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Commit-Queue: Katie Dektar <katie@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542280}

chrome/browser/resources/chromeos/select_to_speak/options.css

@@ -142,10 +142,45 @@ label {
 }
 
 .highlight {
+    height: 20px;
     opacity: .3;
-    z-index: 10;
-    top: -40px;
     position: relative;
-    height: 20px;
+    top: -40px;
     width: 100%;
+    z-index: 10;
+}
+
+.slider {
+    -webkit-appearance: none;
+    padding: 15px 0 15px 0;
+    width: 200px;
+}
+
+.slider::-webkit-slider-runnable-track {
+    background: #bbb;
+    border: none;
+    border-radius: 1px;
+    height: 2px;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -webkit-transition: .200ms;
+    appearance: none;
+    background: rgb(51, 103, 214);
+    border-radius: 50%;
+    height: 10px;
+    margin-top: -3px;
+    transition: width .200ms, height .200ms, margin-top .200ms;
+    width: 10px;
+}
+
+.slider:active::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    background: rgb(51, 103, 214);
+    border-radius: 50%;
+    height: 20px;
+    margin-top: -10px;
+    width: 20px;
 }

chrome/browser/resources/chromeos/select_to_speak/options.html

@@ -23,25 +23,21 @@
       </div>
 
       <div class="option">
-        <span class="i18n" msgid="options_rate_description"
-              id="rate_description"></span>
-        <select id="rate" aria-labelledby="rate_description">
+        <label class="i18n" msgid="options_rate_description"
+              id="rate_description"></label>
+        <div class="example">
           <!-- If these options are changed, make sure to update the
                SelectToSpeak.speechRateToEnum_ function and add new
                enums in tools/metrics/histograms/enums.xml -->
-          <option value="0.5" class="i18n" msgid="options_rate_slowest">
-          </option>
-          <option value="0.75" class="i18n" msgid="options_rate_slow">
-          </option>
-          <option value="1.0" class="i18n" msgid="options_rate_normal">
-          </option>
-          <option value="1.25" class="i18n" msgid="options_rate_fast">
-          </option>
-          <option value="1.5" class="i18n" msgid="options_rate_faster">
-          </option>
-          <option value="2.0" class="i18n" msgid="options_rate_fastest">
-          </option>
-        </select>
+          <input type="range" min="0.5" max="5.0" step=".25" id="rate"
+                 aria-labelledby="rate_description" class="slider">
+          <div style="line-height:0px; margin-top:-1.5em">
+            <span class="i18n" msgid="options_rate_slowest"
+                  style="float:left"></span>
+            <span class="i18n" msgid="options_rate_fastest"
+                  style="float:right"></span>
+          </div>
+        </div>
       </div>
 
       <div class="option">
@@ -65,11 +61,11 @@
 
       <h2 class="i18n" msgid="options_highlight"></h2>
       <div class="option">
-        <input id="wordHighlight" type="checkbox" class="checkbox pref"
-           name="wordHighlight" aria-labeledby="wordHighlightLabel">
         <label id="wordHighlightLabel" class="i18n"
                msgid="options_highlight_description">
         </label>
+        <input id="wordHighlight" type="checkbox" class="checkbox"
+           name="wordHighlight" aria-labeledby="wordHighlightLabel">
         <div class="sub-option hidden" id="highlightSubOption">
           <span class="i18n" msgid="options_highlight_color_description"
                 id="highlight_color_description"></span>

chrome/browser/resources/chromeos/select_to_speak/select_to_speak_options.js

@@ -21,7 +21,7 @@ SelectToSpeakOptionsPage.prototype = {
       this.populateVoiceList_('voice');
     }.bind(this));
     this.syncSelectControlToPref_('voice', 'voice');
-    this.syncSelectControlToPref_('rate', 'rate');
+    this.syncRangeControlToPref_('rate', 'rate');
     this.syncSelectControlToPref_('pitch', 'pitch');
     this.syncCheckboxControlToPref_(
         'wordHighlight', 'wordHighlight', function(checked) {
@@ -146,10 +146,10 @@ SelectToSpeakOptionsPage.prototype = {
    * pref, sync them both ways.
    * @param {string} selectId The id of the select element.
    * @param {string} pref The name of a chrome.storage pref.
-   * @param {?function(string): undefined=} onChange Optional change
+   * @param {?function(string): undefined=} opt_onChange Optional change
    *     listener to call when the setting has been changed.
    */
-  syncSelectControlToPref_: function(selectId, pref, onChange) {
+  syncSelectControlToPref_: function(selectId, pref, opt_onChange) {
     var element = document.getElementById(selectId);
 
     function updateFromPref() {
@@ -162,8 +162,8 @@ SelectToSpeakOptionsPage.prototype = {
             break;
           }
         }
-        if (onChange) {
-          onChange(value);
+        if (opt_onChange) {
+          opt_onChange(value);
         }
       });
     }
@@ -180,6 +180,39 @@ SelectToSpeakOptionsPage.prototype = {
     chrome.storage.onChanged.addListener(updateFromPref);
   },
 
+  /**
+   * Given the id of an HTML range element and the name of a chrome.storage
+   * pref, sync them both ways.
+   * @param {string} rangeId The id of the range element.
+   * @param {string} pref The name of a chrome.storage pref.
+   * @param {?function(string): undefined=} opt_onChange Optional change
+   *     listener to call when the setting has been changed.
+   */
+  syncRangeControlToPref_: function(rangeId, pref, opt_onChange) {
+    var element = document.getElementById(rangeId);
+
+    function updateFromPref() {
+      chrome.storage.sync.get(pref, function(items) {
+        var value = items[pref];
+        element.value = value;
+        if (opt_onChange) {
+          opt_onChange(value);
+        }
+      });
+    }
+
+    element.addEventListener('change', function() {
+      var newValue = element.value;
+      var setParams = {};
+      setParams[pref] = newValue;
+      chrome.storage.sync.set(setParams);
+    });
+
+    element.updateFunction = updateFromPref;
+    updateFromPref();
+    chrome.storage.onChanged.addListener(updateFromPref);
+  },
+
   /**
    * Sets up the highlight listeners and preferences.
    */

chrome/browser/resources/chromeos/select_to_speak/strings/select_to_speak_strings.grd

@@ -138,18 +138,6 @@
       <message desc="Label for the slowest synthesized speech rate in the Select-to-speak options dialog." name="IDS_SELECT_TO_SPEAK_OPTIONS_RATE_SLOWEST">
         Slowest
       </message>
-      <message desc="Label for slow synthesized speech rate in the Select-to-speak options dialog." name="IDS_SELECT_TO_SPEAK_OPTIONS_RATE_SLOW">
-        Slow
-      </message>
-      <message desc="Label for a normal synthesized speech rate in the Select-to-speak options dialog." name="IDS_SELECT_TO_SPEAK_OPTIONS_RATE_NORMAL">
-        Normal
-      </message>
-      <message desc="Label for fast synthesized speech rate in the Select-to-speak options dialog." name="IDS_SELECT_TO_SPEAK_OPTIONS_RATE_FAST">
-        Fast
-      </message>
-      <message desc="Label for faster synthesized speech rate in the Select-to-speak options dialog." name="IDS_SELECT_TO_SPEAK_OPTIONS_RATE_FASTER">
-        Faster
-      </message>
       <message desc="Label for the fastest synthesized speech rate in the Select-to-speak options dialog." name="IDS_SELECT_TO_SPEAK_OPTIONS_RATE_FASTEST">
         Fastest
       </message>

tools/metrics/histograms/enums.xml

@@ -7743,9 +7743,22 @@ Called by update_net_error_codes.py.-->
   <int value="50" label="0.5: Slowest"/>
   <int value="75" label="0.75: Slow"/>
   <int value="100" label="1.0: Normal"/>
-  <int value="125" label="1.25: Fast"/>
-  <int value="150" label="1.5: Faster"/>
-  <int value="200" label="2.0: Fastest"/>
+  <int value="125" label="1.25"/>
+  <int value="150" label="1.5"/>
+  <int value="175" label="1.75"/>
+  <int value="200" label="2.0"/>
+  <int value="225" label="2.25"/>
+  <int value="250" label="2.5"/>
+  <int value="275" label="2.75"/>
+  <int value="300" label="3.0"/>
+  <int value="325" label="3.25"/>
+  <int value="350" label="3.5"/>
+  <int value="375" label="3.75"/>
+  <int value="400" label="4.0"/>
+  <int value="425" label="4.25"/>
+  <int value="450" label="4.5"/>
+  <int value="475" label="4.75"/>
+  <int value="500" label="5.0: Fastest"/>
 </enum>
 
 <enum name="CrosSelectToSpeakStartSpeechMethod">