Adds a skeleton text-to-speech settings subpage.

This subpage and link to it are hidden when the
--enable_experimental_accessibility_features flag is on.

Currently the subpage has no functionality, but what exists does match
the UI mock, except that I've also added a description to the link to
the subpage that lets users know they can manage TTS engines from that
page.

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

chrome/app/settings_strings.grdp

@@ -167,6 +167,12 @@
     <message name="IDS_SETTINGS_OPTIONS_IN_MENU_LABEL" desc="Label for checkbox which enables showing accessibility options in the system menu.">
       Always show accessibility options in the system menu
     </message>
+    <message name="IDS_SETTINGS_MANAGE_TTS_SETTINGS" desc="Link to manage text-to-speech settings">
+      Text-to-Speech voice settings
+    </message>
+    <message name="IDS_SETTINGS_TTS_LINK_DESCRIPTION" desc="Description of link to manage text-to-speech settings">
+      Select and customize text-to-speech voices
+    </message>
     <message name="IDS_SETTINGS_LARGE_MOUSE_CURSOR_LABEL" desc="Label for checkbox which enables showing a larger mouse cursor than normal.">
       Show large mouse cursor
     </message>
@@ -338,6 +344,24 @@
     <message name="IDS_SETTINGS_ACCESSIBILITY_TEXT_TO_SPEECH_HEADING" desc="In the settings tab, the heading for accessibility features that enable the computer to speak text from the computer screen.">
       Text-to-Speech
     </message>
+    <message name="IDS_SETTINGS_TEXT_TO_SPEECH_VOICES" desc="Heading describing a collection of listboxes on the text-to-speech settings page. Each listbox is associated with a language, and contains all possible voices for that language">
+      Preferred Voices
+    </message>
+    <message name="IDS_SETTINGS_TEXT_TO_SPEECH_PROPERTIES" desc="Heading describing a collection of input controls for a section of text-to-speech settings on speech properties, including speech pitch and rate">
+      Speech Properties
+    </message>
+    <message name="IDS_SETTINGS_TEXT_TO_SPEECH_RATE" desc="The rate (speed) of speech in text-to-speech settings.">
+      Rate
+    </message>
+    <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_ENGINES" desc="Heading for a section of text-to-speech settings to do per-engine settings">
+      Speech Engines
+    </message>
+    <message name="IDS_SETTINGS_TEXT_TO_SPEECH_INSTALL_ENGINES" desc="A link to install additional text-to-speech engines">
+      Install additional speech engines
+    </message>
   </if>
 
   <if expr="chromeos">

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

@@ -10,6 +10,7 @@
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../settings_page/settings_animated_pages.html">
 <link rel="import" href="../settings_page/settings_subpage.html">
+<link rel="import" href="tts_subpage.html">
 </if>
 
 <dom-module id="settings-a11y-page">
@@ -46,6 +47,16 @@
           </settings-manage-a11y-page>
         </settings-subpage>
       </template>
+      <template is="dom-if" if="[[showExperimentalFeatures_]]">
+        <template is="dom-if" route-path="/manageAccessibility/tts">
+          <settings-subpage
+              associated-control="[[$$('#subpage-trigger')]]"
+              page-title="$i18n{manageTtsSettings}">
+            <settings-tts-subpage>
+            </settings-tts-subpage>
+          </settings-subpage>
+        </template>
+      </template>
     </settings-animated-pages>
 </if>
 

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

@@ -43,6 +43,20 @@ Polymer({
         return map;
       },
     },
+
+    // <if expr="chromeos">
+    /**
+     * Whether to show experimental accessibility features.
+     * Only used in Chrome OS.
+     * @private {boolean}
+     */
+    showExperimentalFeatures_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('showExperimentalA11yFeatures');
+      },
+    },
+    // </if>
   },
 
   // <if expr="chromeos">

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

@@ -6,6 +6,7 @@
     {
       'target_name': 'a11y_page',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '../compiled_resources2.gyp:route',
         '../settings_page/compiled_resources2.gyp:settings_animated_pages',
       ],
@@ -20,5 +21,14 @@
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'tts_subpage',
+      'dependencies': [
+        '<(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'],
+    },
   ],
 }

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

@@ -8,6 +8,7 @@
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="../settings_vars_css.html">
+<link rel="import" href="tts_subpage.html">
 
 <dom-module id="settings-manage-a11y-page">
   <template>
@@ -67,6 +68,21 @@
         </paper-icon-button-light>
       </div>
     </iron-collapse>
+    <template is="dom-if" if="[[showExperimentalFeatures_]]">
+      <div class="settings-box two-line" on-click="onManageTtsSettingsTap_"
+          actionable>
+        <div class="start">
+          $i18n{manageTtsSettings}
+          <div class="secondary" id="appearanceSettingsSecondary">
+            $i18n{ttsSettingsLinkDescription}
+          </div>
+        </div>
+        <paper-icon-button-light class="subpage-arrow">
+          <button aria-label="$i18n{manageTtsSettings}"
+              aria-describedby="appearanceSettingsSecondary"></button>
+        </paper-icon-button-light>
+      </div>
+    </template>
 
     <h2>$i18n{displayHeading}</h2>
     <settings-toggle-button class="first"

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

@@ -98,6 +98,11 @@ Polymer({
     },
   },
 
+  /** @private */
+  onManageTtsSettingsTap_: function() {
+    settings.navigateTo(settings.routes.MANAGE_TTS_SETTINGS);
+  },
+
   /** @private */
   onChromeVoxSettingsTap_: function() {
     chrome.send('showChromeVoxSettings');

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="../controls/settings_slider.html">
+<link rel="import" href="../i18n_setup.html">
+<link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="../settings_vars_css.html">
+
+<dom-module id="settings-tts-subpage">
+  <template>
+    <style include="settings-shared">
+      h2 {
+        -webkit-padding-start: var(--settings-box-row-padding);
+      }
+
+      .settings-box {
+        -webkit-margin-end: var(--settings-box-row-padding);
+        -webkit-margin-start: var(--settings-box-row-indent);
+        -webkit-padding-end: 0;
+        -webkit-padding-start: 0;
+      }
+    </style>
+    <h2>$i18n{textToSpeechVoices}</h2>
+    <div class="settings-box block first">
+    </div>
+
+    <h2>$i18n{textToSpeechProperties}</h2>
+    <div class="settings-box first">
+      <div class="start">$i18n{textToSpeechRate}</div>
+      <settings-slider
+          pref="{{prefs.settings.tts.speech_rate}}"
+          min="0.2" max="8.0">
+      </settings-slider>
+    </div>
+    <div class="settings-box continuation">
+      <div class="start">$i18n{textToSpeechPitch}</div>
+      <settings-slider
+          pref="{{prefs.settings.tts.speech_pitch}}"
+          min="0.2" max="3.0">
+      </settings-slider>
+    </div>
+
+    <h2>$i18n{textToSpeechEngines}</h2>
+    <div class="settings-box block first">
+      <a href="">$i18n{textToSpeechInstallEngines}</a>
+    </div>
+  </template>
+  <script src="tts_subpage.js"></script>
+</dom-module>

chrome/browser/resources/settings/a11y_page/tts_subpage.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 'tts-subpage' is the collapsible section containing
+ * text-to-speech settings.
+ */
+
+Polymer({
+  is: 'settings-tts-subpage',
+
+  properties: {
+    /**
+     * Preferences state.
+     */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+  },
+
+});

chrome/browser/resources/settings/route.js

@@ -47,6 +47,7 @@
  *   MANAGE_ACCESSIBILITY: (undefined|!settings.Route),
  *   MANAGE_PASSWORDS: (undefined|!settings.Route),
  *   MANAGE_PROFILE: (undefined|!settings.Route),
+ *   MANAGE_TTS_SETTINGS: (undefined|!settings.Route),
  *   MULTIDEVICE: (undefined|!settings.Route),
  *   NETWORK_DETAIL: (undefined|!settings.Route),
  *   ON_STARTUP: (undefined|!settings.Route),
@@ -384,6 +385,8 @@ cr.define('settings', function() {
       // <if expr="chromeos">
       r.MANAGE_ACCESSIBILITY =
           r.ACCESSIBILITY.createChild('/manageAccessibility');
+      r.MANAGE_TTS_SETTINGS =
+          r.MANAGE_ACCESSIBILITY.createChild('/manageAccessibility/tts');
       // </if>
 
       r.SYSTEM = r.ADVANCED.createSection('/system', 'system');

chrome/browser/resources/settings/settings_resources.grd

@@ -28,6 +28,12 @@
         <structure name="IDR_SETTINGS_MANAGE_A11Y_PAGE_HTML"
                    file="a11y_page/manage_a11y_page.html"
                    type="chrome_html" />
+        <structure name="IDR_SETTINGS_TTS_SUBPAGE_JS"
+                   file="a11y_page/tts_subpage.js"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_TTS_SUBPAGE_HTML"
+                   file="a11y_page/tts_subpage.html"
+                   type="chrome_html" />
       </if>
       <structure name="IDR_SETTINGS_ABOUT_PAGE_BROWSER_PROXY_HTML"
                  file="about_page/about_page_browser_proxy.html"

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

@@ -246,6 +246,14 @@ void AddA11yStrings(content::WebUIDataSource* html_source) {
     {"audioHeading", IDS_SETTINGS_ACCESSIBILITY_AUDIO_HEADING},
     {"additionalFeaturesTitle",
      IDS_SETTINGS_ACCESSIBILITY_ADDITIONAL_FEATURES_TITLE},
+    {"manageTtsSettings", IDS_SETTINGS_MANAGE_TTS_SETTINGS},
+    {"ttsSettingsLinkDescription", IDS_SETTINGS_TTS_LINK_DESCRIPTION},
+    {"textToSpeechVoices", IDS_SETTINGS_TEXT_TO_SPEECH_VOICES},
+    {"textToSpeechProperties", IDS_SETTINGS_TEXT_TO_SPEECH_PROPERTIES},
+    {"textToSpeechRate", IDS_SETTINGS_TEXT_TO_SPEECH_RATE},
+    {"textToSpeechPitch", IDS_SETTINGS_TEXT_TO_SPEECH_PITCH},
+    {"textToSpeechEngines", IDS_SETTINGS_TEXT_TO_SPEECH_ENGINES},
+    {"textToSpeechInstallEngines", IDS_SETTINGS_TEXT_TO_SPEECH_INSTALL_ENGINES},
 #endif
   };
   AddLocalizedStringsBulk(html_source, localized_strings,