Fix select-to-speak settings page display at small zoom levels.

Bug: 790964
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I6f8a4eb0cddd8bd695723645fbab551f3935fbd5
Reviewed-on: https://chromium-review.googlesource.com/803899
Commit-Queue: Dominic Mazzoni <dmazzoni@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521103}

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

@@ -45,7 +45,6 @@ h2 {
     background-color: #fff;
     border: 1px solid #ddd;
     font-size: 13px;
-    line-height: 60px;
     min-height: 60px;
     padding: 0 20px;
     vertical-align: middle;
@@ -100,9 +99,19 @@ h2 {
     padding: 0 20px;
 }
 
+label {
+    line-height: 60px;
+    vertical-align: middle;
+}
+
 .example {
     display: inline-block;
+    float: right;
+    font-size: 1em;
+    height: 60px;
+    line-height: 60px;
     padding: 0 3px;
+    vertical-align: middle;
 }
 
 .dark {
@@ -110,10 +119,15 @@ h2 {
     color: white;
 }
 
+.light {
+    background: white;
+}
+
 .highlight {
     opacity: .3;
     z-index: 10;
-    top: -45px;
+    top: -40px;
     position: relative;
-    height: 2em;
+    height: 20px;
+    width: 100%;
 }

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

@@ -70,12 +70,14 @@
                   msgid="options_highlight_color_pink">
           </option>
         </select>
-        <div style="float:right">
-          <span class="i18n example dark" msgid="options_highlight_dark">
-          </span>
-          <span class="i18n example" msgid="options_highlight_light">
-          </span>
-          <div class="highlight" id="highlightExample">
+        <div class="example dark">
+          <span class="i18n" msgid="options_highlight_dark"></span>
+          <div class="highlight">
+          </div>
+        </div>
+        <div class="example light">
+          <span class="i18n" msgid="options_highlight_light"></span>
+          <div class="highlight">
           </div>
         </div>
       </div>

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

@@ -158,8 +158,10 @@ SelectToSpeakOptionsPage.prototype = {
    */
   setUpHighlightListener_: function() {
     let onChange = function(value) {
-      let example = document.getElementById('highlightExample');
-      example.style.background = value;
+      let examples = document.getElementsByClassName('highlight');
+      for (let i = 0; i < examples.length; i++) {
+        examples[i].style.background = value;
+      }
     };
 
     this.syncSelectControlToPref_('highlightColor', 'highlightColor', onChange);