Update caption settings page UI

This CL contains the following changes:
 - Add a background image behind the caption preview text
 - Move the preview section to the top of the page
 - Remove the top padding of the preview section
 - Replace the opacity sliders with dropdowns

Bug: 1009561
Change-Id: I659bccfbd5bac27f63afba0e4f899fb94a2e5d84
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1831943Reviewed-by: Colin Blundell <blundell@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Commit-Queue: Evan Liu <evliu@google.com>
Cr-Commit-Position: refs/heads/master@{#703846}

chrome/app/settings_strings.grdp

@@ -192,11 +192,14 @@
   <message name="IDS_SETTINGS_CAPTIONS_BACKGROUND_OPACITY" desc="Name of the caption background opacity preference.">
     Background opacity
   </message>
-  <message name="IDS_SETTINGS_CAPTIONS_OPACITY_MIN" desc="Value of the minimum captions text opacity setting.">
-    0
+  <message name="IDS_SETTINGS_CAPTIONS_OPACITY_OPAQUE" desc="Name of the opaque opacity preference.">
+    Opaque
   </message>
-  <message name="IDS_SETTINGS_CAPTIONS_OPACITY_MAX" desc="Value of the maximum captions text opacity setting.">
-    100
+  <message name="IDS_SETTINGS_CAPTIONS_OPACITY_SEMI_TRANSPARENT" desc="Name of the semi-transparent opacity preference.">
+    Semi-transparent
+  </message>
+  <message name="IDS_SETTINGS_CAPTIONS_OPACITY_TRANSPARENT" desc="Name of the transparent opacity preference.">
+    Transparent
   </message>
   <message name="IDS_SETTINGS_CAPTIONS_TEXT_SHADOW" desc="Name of the caption text shadow preference.">
     Text shadow

chrome/app/settings_strings_grdp/IDS_SETTINGS_CAPTIONS.png.sha1

-39f3d045711d6364907ad1e709fa85cfac133726
\ No newline at end of file
+9e5cc39d8f7e3468604037bee09decfa463359ff
\ No newline at end of file

chrome/app/theme/theme_resources.grd

@@ -25,6 +25,9 @@
       <!-- KEEP THESE IN ALPHABETICAL ORDER!  DO NOT ADD TO RANDOM PLACES JUST
            BECAUSE YOUR RESOURCES ARE FUNCTIONALLY RELATED OR FALL UNDER THE
            SAME CONDITIONALS. -->
+      <if expr="is_linux or is_win or chromeos">
+        <structure type="chrome_scaled_image" name="IDR_ACCESSIBILITY_CAPTIONS_PREVIEW_BACKGROUND" file="common/captions-preview-bg.png" />
+      </if>
       <if expr="toolkit_views and not is_macosx">
         <structure type="chrome_scaled_image" name="IDR_APP_WINDOW_CLOSE" file="common/app_window_close.png" />
         <structure type="chrome_scaled_image" name="IDR_APP_WINDOW_CLOSE_H" file="common/app_window_close_hover.png" />

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

@@ -10,16 +10,37 @@
     <style include="settings-shared">
       .preview-box {
         align-items: center;
-        border: var(--cr-separator-line);
-        border-radius: var(--cr-card-border-radius);
+        background-image:
+          url(chrome://theme/IDR_ACCESSIBILITY_CAPTIONS_PREVIEW_BACKGROUND);
+        background-position: center;
+        background-size: cover;
         display: flex;
         height: 112px;
         justify-content: center;
-        margin: var(--cr-section-padding);
+        margin: 0 var(--cr-section-padding) var(--cr-section-padding);
         text-align: center;
       }
     </style>
     <div class="settings-box first">
+      <h2 class="start">$i18n{captionsPreview}</h2>
+    </div>
+    <div class="preview-box">
+      <span style="
+          font-size:[[prefs.accessibility.captions.text_size.value]];
+          font-family:[[prefs.accessibility.captions.text_font.value]];
+          background-color: [[computeBackgroundColor_(
+              prefs.accessibility.captions.background_opacity.value,
+              prefs.accessibility.captions.background_color.value)]];
+          color: [[computeTextColor_(
+              prefs.accessibility.captions.text_opacity.value,
+              prefs.accessibility.captions.text_color.value)]];
+          text-shadow: [[prefs.accessibility.captions.text_shadow.value]];
+          padding: [[computePadding_(
+              prefs.accessibility.captions.text_size.value)]]">
+        $i18n{quickBrownFox}
+      </span>
+    </div>
+    <div class="settings-box continuation">
       <h2 class="start">$i18n{captionsSettings}</h2>
     </div>
     <div class="list-frame">
@@ -49,12 +70,11 @@
       </div>
       <div class="list-item underbar">
         <div class="start settings-box-text">$i18n{captionsTextOpacity}</div>
-        <settings-slider id="captionsTextOpacity"
-            ticks="[[textOpacityRange_]]"
-            label-min="$i18n{captionsOpacityMin}"
-            label-max="$i18n{captionsOpacityMax}"
-            pref="{{prefs.accessibility.captions.text_opacity}}">
-        </settings-slider>
+        <settings-dropdown-menu id="captionsTextOpacity"
+            label="$i18n{captionsTextOpacity}"
+            pref="{{prefs.accessibility.captions.text_opacity}}"
+            menu-options="[[textOpacityOptions_]]">
+        </settings-dropdown-menu>
       </div>
       <div class="list-item underbar">
         <div class="start settings-box-text">$i18n{captionsTextShadow}</div>
@@ -78,33 +98,13 @@
         <div class="start settings-box-text">
           $i18n{captionsBackgroundOpacity}
         </div>
-        <settings-slider id="captionsBackgroundOpacity"
-            ticks="[[textOpacityRange_]]"
-            label-min="$i18n{captionsOpacityMin}"
-            label-max="$i18n{captionsOpacityMax}"
-            pref="{{prefs.accessibility.captions.background_opacity}}">
-        </settings-slider>
+        <settings-dropdown-menu id="captionsBackgroundOpacity"
+            label="$i18n{captionsBackgroundOpacity}"
+            pref="{{prefs.accessibility.captions.background_opacity}}"
+            menu-options="[[backgroundOpacityOptions_]]">
+        </settings-dropdown-menu>
       </div>
     </div>
-    <div class="settings-box continuation">
-      <h2 class="start">$i18n{captionsPreview}</h2>
-    </div>
-    <div class="preview-box">
-      <span style="
-          font-size:[[prefs.accessibility.captions.text_size.value]];
-          font-family:[[prefs.accessibility.captions.text_font.value]];
-          background-color: [[computeBackgroundColor_(
-              prefs.accessibility.captions.background_opacity.value,
-              prefs.accessibility.captions.background_color.value)]];
-          color: [[computeTextColor_(
-              prefs.accessibility.captions.text_opacity.value,
-              prefs.accessibility.captions.text_color.value)]];
-          text-shadow: [[prefs.accessibility.captions.text_shadow.value]];
-          padding: [[computePadding_(
-              prefs.accessibility.captions.text_size.value)]]">
-        $i18n{quickBrownFox}
-      </span>
-    </div>
   </template>
   <script src="captions_subpage.js"></script>
 </dom-module>

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

@@ -9,21 +9,6 @@
 (function() {
 'use strict';
 
-
-/** @type {!Array<number>} */
-const TEXT_OPACITY_RANGE = [
-  0,  5,  10, 15, 20, 25, 30, 35, 40, 45, 50,
-  55, 60, 65, 70, 75, 80, 85, 90, 95, 100
-];
-
-/**
- * @param {!Array<number>} ticks
- * @return {!Array<!cr_slider.SliderTick>}
- */
-function ticksWithLabels(ticks) {
-  return ticks.map(x => ({label: `${x}`, value: x}));
-}
-
 Polymer({
   is: 'settings-captions',
 
@@ -36,34 +21,26 @@ Polymer({
     },
 
     /**
-     * List of fonts populated by the fonts browser proxy.
-     * @private {!DropdownMenuOptionList} */
-    textFontOptions_: Object,
-
-    /**
-     * Reasonable, text opacity range.
-     * @private {!Array<!cr_slider.SliderTick>}
-     */
-    textOpacityRange_: {
-      readOnly: true,
-      type: Array,
-      value: ticksWithLabels(TEXT_OPACITY_RANGE),
-    },
-
-    /**
-     * List of options for the text size drop-down menu.
+     * List of options for the background opacity drop-down menu.
      * @type {!DropdownMenuOptionList}
      */
-    textSizeOptions_: {
+    backgroundOpacityOptions_: {
       readOnly: true,
       type: Array,
       value: function() {
         return [
-          {value: '25%', name: loadTimeData.getString('verySmall')},
-          {value: '50%', name: loadTimeData.getString('small')},
-          {value: '', name: loadTimeData.getString('medium')}, // Default = 100%
-          {value: '150%', name: loadTimeData.getString('large')},
-          {value: '200%', name: loadTimeData.getString('veryLarge')},
+          {
+            value: 100, // Default
+            name: loadTimeData.getString('captionsOpacityOpaque')
+          },
+          {
+            value: 50,
+            name: loadTimeData.getString('captionsOpacitySemiTransparent')
+          },
+          {
+            value: 0,
+            name: loadTimeData.getString('captionsOpacityTransparent')
+          },
         ];
       },
     },
@@ -77,18 +54,30 @@ Polymer({
       type: Array,
       value: function() {
         return [
-          {value: '', name: loadTimeData.getString('captionsDefaultSetting')},
-          {value: '0,0,0', name: loadTimeData.getString('captionsColorBlack')},
+          {
+            value: '',
+            name: loadTimeData.getString('captionsDefaultSetting')
+          },
+          {
+            value: '0,0,0',
+            name: loadTimeData.getString('captionsColorBlack')
+          },
           {
             value: '255,255,255',
             name: loadTimeData.getString('captionsColorWhite')
           },
-          {value: '255,0,0', name: loadTimeData.getString('captionsColorRed')},
+          {
+            value: '255,0,0',
+            name: loadTimeData.getString('captionsColorRed')
+          },
           {
             value: '0,255,0',
             name: loadTimeData.getString('captionsColorGreen')
           },
-          {value: '0,0,255', name: loadTimeData.getString('captionsColorBlue')},
+          {
+            value: '0,0,255',
+            name: loadTimeData.getString('captionsColorBlue')
+          },
           {
             value: '255,255,0',
             name: loadTimeData.getString('captionsColorYellow')
@@ -105,6 +94,36 @@ Polymer({
       },
     },
 
+    /**
+     * List of fonts populated by the fonts browser proxy.
+     * @private {!DropdownMenuOptionList} */
+    textFontOptions_: Object,
+
+    /**
+     * List of options for the text opacity drop-down menu.
+     * @type {!DropdownMenuOptionList}
+     */
+    textOpacityOptions_: {
+      readOnly: true,
+      type: Array,
+      value: function() {
+        return [
+          {
+            value: 100, // Default
+            name: loadTimeData.getString('captionsOpacityOpaque')
+          },
+          {
+            value: 50,
+            name: loadTimeData.getString('captionsOpacitySemiTransparent')
+          },
+          {
+            value: 10,
+            name: loadTimeData.getString('captionsOpacityTransparent')
+          },
+        ];
+      },
+    },
+
     /**
      * List of options for the text shadow drop-down menu.
      * @type {!DropdownMenuOptionList}
@@ -135,6 +154,24 @@ Polymer({
         ];
       },
     },
+
+    /**
+     * List of options for the text size drop-down menu.
+     * @type {!DropdownMenuOptionList}
+     */
+    textSizeOptions_: {
+      readOnly: true,
+      type: Array,
+      value: function() {
+        return [
+          {value: '25%', name: loadTimeData.getString('verySmall')},
+          {value: '50%', name: loadTimeData.getString('small')},
+          {value: '', name: loadTimeData.getString('medium')}, // Default = 100%
+          {value: '150%', name: loadTimeData.getString('large')},
+          {value: '200%', name: loadTimeData.getString('veryLarge')},
+        ];
+      },
+    },
   },
 
   /** @private {?settings.FontsBrowserProxy} */

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

@@ -208,8 +208,10 @@ void AddA11yStrings(content::WebUIDataSource* html_source) {
     {"captionsTextColor", IDS_SETTINGS_CAPTIONS_TEXT_COLOR},
     {"captionsTextOpacity", IDS_SETTINGS_CAPTIONS_TEXT_OPACITY},
     {"captionsBackgroundOpacity", IDS_SETTINGS_CAPTIONS_BACKGROUND_OPACITY},
-    {"captionsOpacityMin", IDS_SETTINGS_CAPTIONS_OPACITY_MIN},
-    {"captionsOpacityMax", IDS_SETTINGS_CAPTIONS_OPACITY_MAX},
+    {"captionsOpacityOpaque", IDS_SETTINGS_CAPTIONS_OPACITY_OPAQUE},
+    {"captionsOpacitySemiTransparent",
+     IDS_SETTINGS_CAPTIONS_OPACITY_SEMI_TRANSPARENT},
+    {"captionsOpacityTransparent", IDS_SETTINGS_CAPTIONS_OPACITY_TRANSPARENT},
     {"captionsTextShadow", IDS_SETTINGS_CAPTIONS_TEXT_SHADOW},
     {"captionsTextShadowNone", IDS_SETTINGS_CAPTIONS_TEXT_SHADOW_NONE},
     {"captionsTextShadowRaised", IDS_SETTINGS_CAPTIONS_TEXT_SHADOW_RAISED},