Fix CPS-sandbox issues with tts_demo extension

This CL is fixing the errors while loading the tts_demo
in recent chrome version. The demo is no longer working
due to restriction with the sandbox policies.

see:
   https://stackoverflow.com/questions/36324333/refused-to-execute-inline-event-handler-because-it-violates-csp-sandbox

The previous JS code for the click/focus handlers were not
executed since they are inlined handlers.

Bug: 1133813
Change-Id: I2e6df706a1f43257a1a3e254ddb955fa000220a7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2490262
Commit-Queue: Etienne Bergeron <etienneb@chromium.org>
Reviewed-by: Devlin <rdevlin.cronin@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#820293}

chrome/common/extensions/docs/examples/extensions/ttsdemo/ttsdemo.html

@@ -98,8 +98,8 @@
       <textarea id="srctext" rows="6" cols="40">This is a demo of text-to-speech in Chrome.</textarea>
 
       <p>
-        <button class="large_button" onclick="speakUserText()">Speak</button>
-        <button class="large_button" onclick="stop()">Stop</button>
+        <button class="large_button" id="speakUserTextButton">Speak</button>
+        <button class="large_button" id="stopButton">Stop</button>
       </p>
 
       <div class="box" id="ttsStatusBox">
@@ -112,12 +112,12 @@
 
       <p>
 
-      <span tabindex="0" class="tabbable" onfocus='speak("Alpha");'>Alpha</span>
-      <span tabindex="0" class="tabbable" onfocus='speak("Bravo");'>Bravo</span>
-      <span tabindex="0" class="tabbable" onfocus='speak("Charlie");'>Charlie</span>
-      <span tabindex="0" class="tabbable" onfocus='speak("Delta");'>Delta</span>
-      <span tabindex="0" class="tabbable" onfocus='speak("Echo");'>Echo</span>
-      <span tabindex="0" class="tabbable" onfocus='speak("Foxtrot");'>Foxtrot</span>
+      <span tabindex="0" class="tabbable" id="speakAlpha">Alpha</span>
+      <span tabindex="0" class="tabbable" id="speakBravo">Bravo</span>
+      <span tabindex="0" class="tabbable" id="speakCharlie">Charlie</span>
+      <span tabindex="0" class="tabbable" id="speakDelta">Delta</span>
+      <span tabindex="0" class="tabbable" id="speakEcho">Echo</span>
+      <span tabindex="0" class="tabbable" id="speakFoxtrot">Foxtrot</span>
 
     </div>
   </div>

chrome/common/extensions/docs/examples/extensions/ttsdemo/ttsdemo.js

@@ -23,6 +23,25 @@ function load() {
   voices = document.getElementById('voices');
   voiceInfo = document.getElementById('voiceInfo');
 
+  document.getElementById('speakUserTextButton')
+      .addEventListener('click', speakUserText);
+  document.getElementById('stopButton')
+      .addEventListener('click', stop);
+
+  const speechOptions = [
+    { id: 'speakAlpha', text: 'Alpha' },
+    { id: 'speakBravo', text: 'Bravo' },
+    { id: 'speakCharlie', text: 'Charlie' },
+    { id: 'speakDelta', text: 'Delta' },
+    { id: 'speakEcho', text: 'Echo' },
+    { id: 'speakFoxtrot', text: 'Foxtrot' },
+  ];
+
+  for (const option of speechOptions) {
+    document.getElementById(option.id)
+        .addEventListener('focus', function(){ speak(option.text); });
+  }
+
   chrome.tts.getVoices(function(va) {
     voiceArray = va;
     for (var i = 0; i < voiceArray.length; i++) {