Update the default style of the caption settings preview

This CL updates the default style of the caption settings preview text
to better reflect the actual style of the captions when no custom
caption settings are specified.

Bug: 1046441
Change-Id: I66fc357d86dadfb9a756d6e77d78a01c0a85eb5a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2028160
Commit-Queue: Evan Liu <evliu@google.com>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#737097}

chrome/browser/resources/settings/a11y_page/BUILD.gn

@@ -16,6 +16,7 @@ js_library("captions_subpage") {
   deps = [
     "../appearance_page:fonts_browser_proxy",
     "../controls:settings_dropdown_menu",
+    "../prefs:prefs_behavior",
     "//ui/webui/resources/cr_elements/cr_slider:cr_slider",
     "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:web_ui_listener_behavior",

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

@@ -4,12 +4,14 @@
 <link rel="import" href="../controls/settings_dropdown_menu.html">
 <link rel="import" href="../controls/settings_slider.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
+<link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-captions">
   <template>
     <style include="settings-shared">
       .preview-box {
+        all: initial;
         align-items: center;
         background-image:
           url(chrome://theme/IDR_ACCESSIBILITY_CAPTIONS_PREVIEW_BACKGROUND);
@@ -28,7 +30,8 @@
     <div class="preview-box">
       <span style="
           font-size:[[prefs.accessibility.captions.text_size.value]];
-          font-family:[[prefs.accessibility.captions.text_font.value]];
+          font-family:[[getFontFamily_(
+              prefs.accessibility.captions.text_font.value)]];
           background-color: [[computeBackgroundColor_(
               prefs.accessibility.captions.background_opacity.value,
               prefs.accessibility.captions.background_color.value)]];

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

@@ -12,7 +12,11 @@
 Polymer({
   is: 'settings-captions',
 
-  behaviors: [I18nBehavior, WebUIListenerBehavior],
+  behaviors: [
+    I18nBehavior,
+    WebUIListenerBehavior,
+    PrefsBehavior,
+  ],
 
   properties: {
     prefs: {
@@ -212,15 +216,32 @@ Polymer({
     this.textFontOptions_ = fontMenuOptions;
   },
 
+  /**
+   * Get the font family as a CSS property value.
+   * @return {string}
+   * @private
+   */
+  getFontFamily_() {
+    const fontFamily = this.getPref('accessibility.captions.text_font').value;
+
+    // Return the preference value or the default font family for
+    // video::-webkit-media-text-track-container defined in mediaControls.css.
+    return /** @type {string} */ (fontFamily || 'sans-serif');
+  },
+
   /**
    * Get the background color as a RGBA string.
    * @return {string}
    * @private
    */
   computeBackgroundColor_() {
-    return this.formatRGAString_(
-        'prefs.accessibility.captions.background_color.value',
-        'prefs.accessibility.captions.background_opacity.value');
+    const backgroundColor = this.formatRGAString_(
+        'accessibility.captions.background_color',
+        'accessibility.captions.background_opacity');
+
+    // Return the preference value or the default background color for
+    // video::cue defined in mediaControls.css.
+    return backgroundColor || 'rgba(0, 0, 0, 0.8)';
   },
 
   /**
@@ -229,9 +250,13 @@ Polymer({
    * @private
    */
   computeTextColor_() {
-    return this.formatRGAString_(
-        'prefs.accessibility.captions.text_color.value',
-        'prefs.accessibility.captions.text_opacity.value');
+    const textColor = this.formatRGAString_(
+      'accessibility.captions.text_color',
+      'accessibility.captions.text_opacity');
+
+    // Return the preference value or the default text color for
+    // video::-webkit-media-text-track-container defined in mediaControls.css.
+    return textColor || 'rgba(255, 255, 255, 1)';
   },
 
   /**
@@ -244,8 +269,14 @@ Polymer({
    * @private
    */
   formatRGAString_(colorPreference, opacityPreference) {
-    return 'rgba(' + this.get(colorPreference) + ',' +
-        parseInt(this.get(opacityPreference), 10) / 100.0 + ')';
+    const color = this.getPref(colorPreference).value;
+
+    if (!color) {
+      return '';
+    }
+
+    return 'rgba(' + color + ',' +
+        parseInt(this.getPref(opacityPreference).value, 10) / 100.0 + ')';
   },
 
   /**