Add tts preview functionality to the TTS settings subpage.

This uses window.speechSynthesis, which should be using the TTS
engine and voice prefs selected by the user.

Bug: 823359
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I2b8cd29a2b1fd1da2a5cb002aeb877ed2e615196
Reviewed-on: https://chromium-review.googlesource.com/996764
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@{#550199}

chrome/app/settings_strings.grdp

@@ -365,6 +365,18 @@
     <message name="IDS_SETTINGS_TEXT_TO_SPEECH_PITCH" desc="The pitch of speech in text-to-speech settings.">
       Pitch
     </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>
+    <message name="IDS_SETTINGS_TEXT_TO_SPEECH_PREVIEW_INPUT_LABEL" desc="The label for sample input for a section of the text-to-speech settings page where a user can preview text to speech.">
+      Text to preview
+    </message>
+    <message name="IDS_SETTINGS_TEXT_TO_SPEECH_PREVIEW_INPUT" desc="The sample input for a section of the text-to-speech settings page where a user can preview text to speech. Users will hear this read aloud.">
+      Hi there! I'm your text-to-speech voice.
+    </message>
+    <message name="IDS_SETTINGS_TEXT_TO_SPEECH_PREVIEW_PLAY" desc="A button on the text-to-speech settings page to start playing a preview of text to speech">
+      Play
+    </message>
     <message name="IDS_SETTINGS_TEXT_TO_SPEECH_ENGINES" desc="Heading for a section of text-to-speech settings to do per-engine settings">
       Speech Engines
     </message>

chrome/browser/resources/settings/a11y_page/compiled_resources2.gyp

@@ -24,11 +24,16 @@
     {
       'target_name': 'tts_subpage',
       'dependencies': [
+        'externs',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '../settings_page/compiled_resources2.gyp:settings_animated_pages',
         '../compiled_resources2.gyp:route',
       ],
        'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'externs',
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
   ],
 }

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

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Stub methods to allow the closure compiler to compile
+ * successfully for external dependencies which cannot be included in
+ * compiled_resources2.gyp.
+ */
+
+/**
+ * @constructor
+ */
+Window.prototype.speechSynthesis = function() {};
+
+/**
+ * @type {function(Object)}
+ */
+Window.prototype.speechSynthesis.speak = function(utterance) {};
+
+/**
+ * @constructor
+ */
+Window.prototype.SpeechSynthesisUtterance = function() {};

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

@@ -5,6 +5,8 @@
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="../settings_vars_css.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">
 
 <dom-module id="settings-tts-subpage">
   <template>
@@ -39,7 +41,18 @@
           min="0.2" max="3.0">
       </settings-slider>
     </div>
-
+    <h2>$i18n{textToSpeechPreviewHeading}</h2>
+    <div class="settings-box first">
+      <div class="start">
+        <paper-textarea id="previewInput" type="text"
+            label="$i18n{textToSpeechPreviewInputLabel}"
+            always-float-label value="$i18n{textToSpeechPreviewInput}">
+        </paper-textarea>
+      </div>
+      <paper-button on-click="onPreviewTtsClick_">
+          $i18n{textToSpeechPreviewPlay}
+      </paper-button>
+    </div>
     <h2>$i18n{textToSpeechEngines}</h2>
     <div class="settings-box block first">
       <a href="">$i18n{textToSpeechInstallEngines}</a>

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

@@ -25,4 +25,13 @@ Polymer({
     settings.navigateTo(settings.routes.MANAGE_GOOGLE_TTS_ENGINE_SETTINGS);
   },
 
+  /** @private */
+  onPreviewTtsClick_: function() {
+    let utter = new window.SpeechSynthesisUtterance();
+    if (!utter)
+      return;
+    utter.text = this.$.previewInput.value;
+    window.speechSynthesis.speak(utter);
+  },
+
 });

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

@@ -241,6 +241,11 @@ void AddA11yStrings(content::WebUIDataSource* html_source) {
     {"textToSpeechProperties", IDS_SETTINGS_TEXT_TO_SPEECH_PROPERTIES},
     {"textToSpeechRate", IDS_SETTINGS_TEXT_TO_SPEECH_RATE},
     {"textToSpeechPitch", IDS_SETTINGS_TEXT_TO_SPEECH_PITCH},
+    {"textToSpeechPreviewHeading", IDS_SETTINGS_TEXT_TO_SPEECH_PREVIEW_HEADING},
+    {"textToSpeechPreviewInputLabel",
+     IDS_SETTINGS_TEXT_TO_SPEECH_PREVIEW_INPUT_LABEL},
+    {"textToSpeechPreviewInput", IDS_SETTINGS_TEXT_TO_SPEECH_PREVIEW_INPUT},
+    {"textToSpeechPreviewPlay", IDS_SETTINGS_TEXT_TO_SPEECH_PREVIEW_PLAY},
     {"textToSpeechEngines", IDS_SETTINGS_TEXT_TO_SPEECH_ENGINES},
     {"textToSpeechInstallEngines", IDS_SETTINGS_TEXT_TO_SPEECH_INSTALL_ENGINES},
     {"manageGoogleTtsEngineSettings",