[Live Caption] Consolidate all captions settings, including caption

style preferences and Live Caption, on one settings subpage.

This CL makes some adjustments to the captions subpage in settings
according to the latest UX spec (https://docs.google.com/presentation/d/1YO10r3-ybP-L9uTNCClAQO9Er0gjwWMOLVKY98u59qU/edit#slide=id.g8ea378aef4_0_0):
 - Rename some strings
 - Change some indentations and spacing
 - Add the Live Caption toggle

The Live Caption toggle is removed from the a11y page for operating
systems that show the captions subpage (ChromeOS, Linux, some versions
of Windows). For operating systems that do not show the captions subpage
(MacOS, some versions of Windows) the Live Caption toggle is still shown
on the a11y page.

Bug: 1055150, 1111002
Change-Id: If4cb2b236ef0561a9cb75d7d921ede9fccf401af
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2468756Reviewed-by: Evan Liu <evliu@google.com>
Reviewed-by: Avi Drissman <avi@chromium.org>
Commit-Queue: Abigail Klein <abigailbklein@google.com>
Cr-Commit-Position: refs/heads/master@{#817139}

chrome/app/shared_settings_strings.grdp

@@ -10,17 +10,14 @@
   </message>
 
   <!-- Caption Subpage (strings used by the <settings-captions> element) -->
-  <message name="IDS_SETTINGS_CAPTIONS" desc="Section title for caption style setting that is supported by some apps">
-    Caption preferences
-  </message>
-  <message name="IDS_SETTINGS_CAPTIONS_SUBTITLE" desc="Settings subcopy for Caption preferences. Disclaimer that not all apps support the system caption style. Some apps don't use the web captioning standard and have their own captioning platform.">
-    Customize caption size and style for apps that support this setting
+  <message name="IDS_SETTINGS_CAPTIONS" desc="Title of the subpage for settings related to captions">
+    Captions
   </message>
-  <message name="IDS_SETTINGS_CAPTIONS_SETTINGS" desc="Name of settings section of the caption settings page.">
-    Settings
+  <message name="IDS_SETTINGS_CAPTIONS_PREFERENCES_TITLE" desc="Section title for caption style setting that is supported by some apps and sites">
+    Caption preferences
   </message>
-  <message name="IDS_SETTINGS_CAPTIONS_PREVIEW" desc="Name of preview section of the caption settings page.">
-    Preview
+  <message name="IDS_SETTINGS_CAPTIONS_PREFERENCES_SUBTITLE" desc="Section subtitle for Caption preferences. Disclaimer that not all apps and sites support the system caption style. Some apps and sites don't use the web captioning standard and have their own captioning platform.">
+    Customize caption size and style for apps and sites that support this setting
   </message>
   <message name="IDS_SETTINGS_CAPTIONS_TEXT_SIZE" desc="Name of the caption text size preference. Text size will apply to captions and alo Live Caption when it's enabled.">
     Text size (Also applies to Live Caption)

chrome/app/shared_settings_strings_grdp/IDS_SETTINGS_CAPTIONS.png.sha1

-33ab32d6f786c17ce3efef4a0a1dc59e57d6a381
\ No newline at end of file
+90481ef2c5aa1974b3ff448a8d351f04b3749f1c
\ No newline at end of file

chrome/app/shared_settings_strings_grdp/IDS_SETTINGS_CAPTIONS_PREFERENCES_SUBTITLE.png.sha1

+2fc24641bfdba5e4c51c0bd7e8daefad60578f2f
\ No newline at end of file

chrome/app/shared_settings_strings_grdp/IDS_SETTINGS_CAPTIONS_PREFERENCES_TITLE.png.sha1

+f16d71242a445cc1d5049f3a37c8ed9c999ecd6c
\ No newline at end of file

chrome/app/shared_settings_strings_grdp/IDS_SETTINGS_CAPTIONS_SUBTITLE.png.sha1

-3a7ffbc39fcd794af75600f0c61c777fdb4856d8
\ No newline at end of file

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

@@ -19,6 +19,7 @@ js_library("captions_subpage") {
     "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:web_ui_listener_behavior",
   ]
+  externs_list = [ "$externs_path/metrics_private.js" ]
 }
 
 js_type_check("closure_compile_module") {

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

@@ -10,19 +10,28 @@
         </cr-link-row>
 </if>
 <if expr="not chromeos">
-        <cr-link-row class="hr" id="captions"
-            label="$i18n{captionsTitle}"
-            sub-label="$i18n{captionsSubtitle}"
-            on-click="onCaptionsClick_"
-            external$="[[captionSettingsOpensExternally_]]">
-        </cr-link-row>
-        <template is="dom-if" if="[[enableLiveCaption_]]">
-          <settings-toggle-button
-              pref="{{prefs.accessibility.captions.live_caption_enabled}}"
-              on-change="onA11yLiveCaptionChange_"
-              label="$i18n{captionsEnableLiveCaptionTitle}"
-              sub-label="[[enableLiveCaptionSubtitle_]]">
-          </settings-toggle-button>
+        <template is="dom-if" if="[[captionSettingsOpensExternally_]]">
+          <cr-link-row class="hr" id="captions"
+              label="$i18n{captionsPreferencesTitle}"
+              sub-label="$i18n{captionsPreferencesSubtitle}"
+              on-click="onCaptionsClick_"
+              external$="[[captionSettingsOpensExternally_]]">
+          </cr-link-row>
+          <template is="dom-if" if="[[enableLiveCaption_]]">
+            <settings-toggle-button
+                pref="{{prefs.accessibility.captions.live_caption_enabled}}"
+                on-change="onA11yLiveCaptionChange_"
+                label="$i18n{captionsEnableLiveCaptionTitle}"
+                sub-label="[[enableLiveCaptionSubtitle_]]">
+            </settings-toggle-button>
+          </template>
+        </template>
+        <template is="dom-if" if="[[!captionSettingsOpensExternally_]]">
+          <cr-link-row class="first"
+              label="$i18n{captionsTitle}"
+              on-click="onCaptionsClick_"
+              role-description="$i18n{subpageArrowRoleDescription}">
+          </cr-link-row>
         </template>
         <settings-toggle-button
             class="hr"

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

@@ -215,25 +215,10 @@ Polymer({
 
   /** @private */
   onCaptionsClick_() {
-    // Open the system captions dialog for Mac.
-    // <if expr="is_macosx">
-    CaptionsBrowserProxyImpl.getInstance().openSystemCaptionsDialog();
-    // </if>
-
-    // Open the system captions dialog for Windows 10+ or navigate to the
-    // caption settings page for older versions of Windows
-    // <if expr="is_win">
-    if (loadTimeData.getBoolean('isWindows10OrNewer')) {
+    if (this.captionSettingsOpensExternally_) {
       CaptionsBrowserProxyImpl.getInstance().openSystemCaptionsDialog();
     } else {
       Router.getInstance().navigateTo(routes.CAPTIONS);
     }
-    // </if>
-
-    // Navigate to the caption settings page for Linux as they do not have
-    // system caption settings.
-    // <if expr="is_linux">
-    Router.getInstance().navigateTo(routes.CAPTIONS);
-    // </if>
   },
 });

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

@@ -23,14 +23,43 @@
         background-size: cover;
         display: flex;
         justify-content: center;
-        margin: 0 var(--cr-section-padding) var(--cr-section-padding);
+        margin: var(--cr-section-padding);
+        margin-inline-start: var(--cr-section-indent-padding);
         min-height: 112px;
         padding: 20px;
         text-align: center;
       }
+
+      /* Override the default padding-top of the h2 so that there is not too
+         much padding between the subpage title and the section title. */
+      h2.less-top-padding {
+        padding-top: var(--cr-section-vertical-padding);
+      }
+
+      /* Override the default min-height of a cr-row element so that there is
+         not too much padding between the title and the subtitle. */
+      .cr-row-subtitle {
+        min-height: 0;
+      }
+
+      /* Override the default cr-row padding so that it does not have an indent.
+         Add margin-top to give space between itself and the previous item. */
+      .new-section {
+        margin-top: var(--cr-section-padding);
+        padding: 0;
+      }
+
+      /* Ensure the toggle button stretches the width of its container despite
+         removing its parent's padding. */
+      #liveCaptionToggleButton {
+        width: 100%;
+      }
     </style>
     <div class="cr-row first">
-      <h2>$i18n{captionsPreview}</h2>
+      <h2 class="start less-top-padding">$i18n{captionsPreferencesTitle}</h2>
+    </div>
+    <div class="cr-row cr-row-subtitle first">
+      <div class="start">$i18n{captionsPreferencesSubtitle}</div>
     </div>
     <div class="preview-box">
       <span style="
@@ -49,9 +78,6 @@
         $i18n{quickBrownFox}
       </span>
     </div>
-    <div class="cr-row continuation">
-      <h2 class="start">$i18n{captionsSettings}</h2>
-    </div>
     <div class="list-frame">
       <div class="list-item underbar first">
         <div class="start cr-padded-text" aria-hidden="true">
@@ -124,6 +150,16 @@
         </settings-dropdown-menu>
       </div>
     </div>
+    <template is="dom-if" if="[[enableLiveCaption_]]">
+      <div class="cr-row new-section">
+        <settings-toggle-button id="liveCaptionToggleButton"
+            pref="{{prefs.accessibility.captions.live_caption_enabled}}"
+            on-change="onA11yLiveCaptionChange_"
+            label="$i18n{captionsEnableLiveCaptionTitle}"
+            sub-label="$i18n{captionsEnableLiveCaptionSubtitle}">
+        </settings-toggle-button>
+      </div>
+    </template>
   </template>
   <script src="captions_subpage.js"></script>
 </dom-module>

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

@@ -167,6 +167,14 @@ Polymer({
         ];
       },
     },
+
+    /** @private */
+    enableLiveCaption_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('enableLiveCaption');
+      },
+    },
   },
 
   /** @private {?settings.FontsBrowserProxy} */
@@ -269,6 +277,16 @@ Polymer({
     }
 
     return `${+ size.slice(0, -1) / 100}%`;
-  }
+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onA11yLiveCaptionChange_(event) {
+    const a11yLiveCaptionOn = event.target.checked;
+    chrome.metricsPrivate.recordBoolean(
+        'Accessibility.LiveCaption.ToggleEnabled', a11yLiveCaptionOn);
+  },
 });
 })();

chrome/browser/resources/settings/chromeos/os_a11y_page/manage_a11y_page.html

@@ -312,20 +312,10 @@
     <template is="dom-if" if="[[!isKioskModeActive_]]">
       <cr-link-row id="captionsSubpageButton" class="first"
           label="$i18n{captionsTitle}"
-          sub-label="$i18n{captionsSubtitle}"
           on-click="onCaptionsClick_"
           role-description="$i18n{subpageArrowRoleDescription}">
       </cr-link-row>
     </template>
-    <template is="dom-if" if="[[enableLiveCaption_]]">
-      <settings-toggle-button
-          pref="{{prefs.accessibility.captions.live_caption_enabled}}"
-          on-change="onA11yLiveCaptionChange_"
-          label="$i18n{captionsEnableLiveCaptionTitle}"
-          sub-label="$i18n{captionsEnableLiveCaptionSubtitle}"
-          deep-link-focus-id$="[[Setting.kLiveCaptions]]">
-      </settings-toggle-button>
-    </template>
     <settings-toggle-button
         class="hr"
         pref="{{prefs.settings.a11y.mono_audio}}"

chrome/browser/resources/settings/chromeos/os_a11y_page/manage_a11y_page.js

@@ -169,14 +169,6 @@ Polymer({
       }
     },
 
-    /** @private */
-    enableLiveCaption_: {
-      type: Boolean,
-      value: function() {
-        return loadTimeData.getBoolean('enableLiveCaption');
-      },
-    },
-
     /**
      * Whether a setting for enabling shelf navigation buttons in tablet mode
      * should be displayed in the accessibility settings.
@@ -265,7 +257,6 @@ Polymer({
         chromeos.settings.mojom.Setting.kMonoAudio,
         chromeos.settings.mojom.Setting.kStartupSound,
         chromeos.settings.mojom.Setting.kEnableSwitchAccess,
-        chromeos.settings.mojom.Setting.kLiveCaptions,
         chromeos.settings.mojom.Setting.kEnableCursorColor,
       ]),
     },
@@ -513,16 +504,6 @@ Polymer({
         enabled);
   },
 
-  /**
-   * @param {!Event} event
-   * @private
-   */
-  onA11yLiveCaptionChange_(event) {
-    const a11yLiveCaptionOn = event.target.checked;
-    chrome.metricsPrivate.recordBoolean(
-        'Accessibility.LiveCaption.ToggleEnabled', a11yLiveCaptionOn);
-  },
-
   /** @private */
   onA11yCursorColorChange_() {
     // Custom cursor color is enabled when the color is not set to black.

chrome/browser/ui/webui/settings/chromeos/accessibility_section.cc

@@ -557,10 +557,6 @@ void AccessibilitySection::AddLoadTimeData(
        IDS_SETTINGS_A11Y_TABLET_MODE_SHELF_BUTTONS_LABEL},
       {"tabletModeShelfNavigationButtonsSettingDescription",
        IDS_SETTINGS_A11Y_TABLET_MODE_SHELF_BUTTONS_DESCRIPTION},
-      {"captionsEnableLiveCaptionTitle",
-       IDS_SETTINGS_CAPTIONS_ENABLE_LIVE_CAPTION_TITLE},
-      {"captionsEnableLiveCaptionSubtitle",
-       IDS_SETTINGS_CAPTIONS_ENABLE_LIVE_CAPTION_SUBTITLE},
       {"caretBrowsingTitle", IDS_SETTINGS_ENABLE_CARET_BROWSING_TITLE},
       {"caretBrowsingSubtitle", IDS_SETTINGS_ENABLE_CARET_BROWSING_SUBTITLE},
   };
@@ -582,8 +578,6 @@ void AccessibilitySection::AddLoadTimeData(
   html_source->AddString("tabletModeShelfNavigationButtonsLearnMoreUrl",
                          chrome::kTabletModeGesturesLearnMoreURL);
 
-  html_source->AddBoolean("enableLiveCaption", AreLiveCaptionsAllowed());
-
   html_source->AddBoolean("showExperimentalAccessibilityCursorColor",
                           IsCursorColorAllowed());
 

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

@@ -30,10 +30,6 @@
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/webui/web_ui_util.h"
 
-#if defined(OS_CHROMEOS)
-#include "ui/base/l10n/l10n_util.h"
-#endif
-
 namespace settings {
 #if defined(OS_CHROMEOS)
 namespace {
@@ -52,9 +48,9 @@ base::string16 GetHelpUrlWithBoard(const std::string& original_url) {
 void AddCaptionSubpageStrings(content::WebUIDataSource* html_source) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
       {"captionsTitle", IDS_SETTINGS_CAPTIONS},
-      {"captionsSubtitle", IDS_SETTINGS_CAPTIONS_SUBTITLE},
-      {"captionsSettings", IDS_SETTINGS_CAPTIONS_SETTINGS},
-      {"captionsPreview", IDS_SETTINGS_CAPTIONS_PREVIEW},
+      {"captionsPreferencesTitle", IDS_SETTINGS_CAPTIONS_PREFERENCES_TITLE},
+      {"captionsPreferencesSubtitle",
+       IDS_SETTINGS_CAPTIONS_PREFERENCES_SUBTITLE},
       {"captionsTextSize", IDS_SETTINGS_CAPTIONS_TEXT_SIZE},
       {"captionsTextFont", IDS_SETTINGS_CAPTIONS_TEXT_FONT},
       {"captionsTextColor", IDS_SETTINGS_CAPTIONS_TEXT_COLOR},
@@ -82,8 +78,15 @@ void AddCaptionSubpageStrings(content::WebUIDataSource* html_source) {
       {"captionsColorCyan", IDS_SETTINGS_CAPTIONS_COLOR_CYAN},
       {"captionsColorMagenta", IDS_SETTINGS_CAPTIONS_COLOR_MAGENTA},
       {"captionsDefaultSetting", IDS_SETTINGS_CAPTIONS_DEFAULT_SETTING},
+      {"captionsEnableLiveCaptionTitle",
+       IDS_SETTINGS_CAPTIONS_ENABLE_LIVE_CAPTION_TITLE},
+      {"captionsEnableLiveCaptionSubtitle",
+       IDS_SETTINGS_CAPTIONS_ENABLE_LIVE_CAPTION_SUBTITLE},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
+
+  html_source->AddBoolean("enableLiveCaption",
+                          base::FeatureList::IsEnabled(media::kLiveCaption));
 }
 
 void AddPersonalizationOptionsStrings(content::WebUIDataSource* html_source) {