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

<style include="cr-shared-style settings-shared iron-flex">
  /* Override the default padding of a cr-row to 0. The template inside has
     left and right padding. */
  .cr-row-with-template {
    padding: 0;
  }

  /* Ensure the toggle button stretches the width of its container despite
     removing its parent's padding. */
  #liveCaptionToggleButton {
    width: 100%;
  }

  .language-dropdown {
    margin-inline-start: auto;
  }

  /* Ensure the toggle button stretches the width of its container despite
     removing its parent's padding. */
  #liveTranslateToggleButton {
    width: 100%;
  }

  #captionsLanguageLabel {
    color: var(--cr-secondary-text-color);
  }
</style>
<template is="dom-if" if="[[!enableLiveCaptionMultiLanguage_]]">
  <div class="cr-row cr-row-with-template first">
    <settings-toggle-button id="liveCaptionToggleButton"
        pref="{{prefs.accessibility.captions.live_caption_enabled}}"
        on-change="onLiveCaptionEnabledChanged_"
        label="$i18n{captionsEnableLiveCaptionTitle}"
        sub-label="[[enableLiveCaptionSubtitle_]]">
    </settings-toggle-button>
  </div>
  <cr-collapse
      opened="[[prefs.accessibility.captions.live_caption_enabled.value]]">
    <settings-toggle-button id="maskOffensiveWordsToggleButton"
        pref=
            "{{prefs.accessibility.captions.live_caption_mask_offensive_words}}"
        on-change="onLiveCaptionMaskOffensiveWordsChanged_"
        label="$i18n{captionsMaskOffensiveWordsTitle}">
    </settings-toggle-button>
  </cr-collapse>
</template>
<if expr="not is_chromeos">
<template is="dom-if" if="[[enableLiveCaptionMultiLanguage_]]">
  <div class="cr-row cr-row-with-template first">
    <settings-toggle-button id="liveCaptionToggleButton"
        pref="{{prefs.accessibility.captions.live_caption_enabled}}"
        on-change="onLiveCaptionEnabledChanged_"
        label="$i18n{captionsEnableLiveCaptionTitle}"
        sub-label="$i18n{captionsEnableLiveCaptionSubtitle}">
    </settings-toggle-button>
  </div>
  <cr-collapse
      opened="[[prefs.accessibility.captions.live_caption_enabled.value]]">
    <div class="cr-row continuation">
      <div class="start cr-padded-text" aria-hidden="true">
        $i18n{captionsLanguage}
      </div>
      <settings-dropdown-menu
          class="language-dropdown"
          label="$i18n{captionsLanguage}"
          pref="{{prefs.accessibility.captions.live_caption_language}}"
          menu-options="[[languageOptions_]]">
      </settings-dropdown-menu>
    </div>
    <div class="cr-row continuation">
      <div class="flex settings-box-text">
        $i18n{captionsManageLanguagesTitle}
        <div class="secondary">$i18n{captionsManageLanguagesSubtitle}</div>
      </div>
      <cr-button id="addLanguage" on-click="onAddLanguagesClick_">
        $i18n{addLanguages}
      </cr-button>
    </div>
    <div class="list-frame">
      <div id="languageList" class="vertical-list" role="list">
        <template is="dom-repeat" items="[[installedLanguagePacks_]]">
          <div class="list-item" role="listitem">
            <div class="start cr-padded-text">[[item.displayName]]</div>
            <span aria-live="polite" role="region"
                  class="cr-secondary-text cr-row-gap">
              [[item.downloadProgress]]
            </span>
            <cr-icon-button class="icon-delete-gray"
                aria-label="[[i18n('removeLanguageAriaLabel',
                              item.displayName)]]"
                on-click="onRemoveLanguageClick_">
            </cr-icon-button>
          </div>
        </template>
      </div>
    </div>
    <settings-toggle-button id="maskOffensiveWordsToggleButton"
        pref=
            "{{prefs.accessibility.captions.live_caption_mask_offensive_words}}"
        on-change="onLiveCaptionMaskOffensiveWordsChanged_"
        label="$i18n{captionsMaskOffensiveWordsTitle}">
    </settings-toggle-button>
    <template is="dom-if" if="[[enableLiveTranslate_]]">
      <settings-live-translate prefs="{{prefs}}"
          languages="{{languages}}"
          language-helper="[[languageHelper]]">
      </settings-live-translate>
    </template>
  </cr-collapse>
</template>
<template is="dom-if" if="[[showAddLanguagesDialog_]]" restamp>
  <settings-add-languages-dialog
      languages="[[filterAvailableLanguagePacks_(availableLanguagePacks_,
                   installedLanguagePacks_)]]"
      language-helper="[[languageHelper]]" id="addLanguagesDialog"
      on-close="onAddLanguagesDialogClose_"
      on-languages-added="onLanguagesAdded_">
  </settings-add-languages-dialog>
</template>
</if>