chrome/browser/resources/settings/languages_page/languages_page.html

<style include="cr-shared-style settings-shared action-link iron-flex">
  cr-action-menu.complex .dropdown-item {
    min-height: 36px;
  }

  cr-action-menu:not(.complex) hr {
    display: none;
  }

  cr-action-menu.complex hr {
    /* Override user-agent border and margin. */
    border: none;
    border-top: var(--cr-separator-line);
    margin: 6px 0 0 0;
  }

  div.list-item.non-target .target-info {
    display: none;
  }

  /* Any .target.target-info following another .target element needs to
  be hidden. We only want to show the _first_ .target-info of the list.
  This is a way to do a :first-of-class selector. */
  div.list-item.target ~  div.list-item.target .target-info {
    display: none;
  }

<if expr="is_win">
  .explain-selected {
    color: var(--google-green-700);
    font-weight: initial;
  }

  @media (prefers-color-scheme: dark) {
    .explain-selected {
      color: var(--google-green-300);
    }
  }

  #uiLanguageItem:focus {
    background-color: transparent;
  }

  #uiLanguageItem span {
    line-height: 20px;
  }

  #uiLanguageItem iron-icon.policy {
    margin-inline-start: 20px;
    margin-inline-end: 0;
  }

  #restartButton {
    margin-inline-start: var(--cr-controlled-by-spacing);
  }
</if>

  #offerTranslations:focus {
    background-color: transparent;
  }
</style>
<div id="languagesSection">
  <div class="cr-row continuation">
    <h2 class="flex">
      $i18n{preferredLanguagesDesc}
    </h2>
    <cr-button id="addLanguages" class="header-aligned-button"
        disabled="[[!canEnableSomeSupportedLanguage_(languages)]]"
        on-click="onAddLanguagesClick_">
      $i18n{addLanguages}
    </cr-button>
  </div>
  <div class="list-frame vertical-list" role="list">
    <template is="dom-repeat" items="[[languages.enabled]]">
      <div class$="list-item [[getLanguageItemClass_(
          item.language.code, language.prospectiveUILanguage)]]
          [[isTranslationTarget_(item.language.code,
          languages.translateTarget)]]" role="listitem">
        <div class="start cr-padded-text">
          <div title="[[item.language.nativeDisplayName]]">
            [[formatIndex_(index)]]. [[item.language.displayName]]
          </div>
          <div class="target-info secondary">
            $i18n{translateTargetLabel}
          </div>
<if expr="is_win">
          <div class="explain-selected"
              hidden="[[!isProspectiveUiLanguage_(
                  item.language.code,
                  languages.prospectiveUILanguage)]]">
            $i18n{isDisplayedInThisLanguage}
          </div>
</if> <!-- is_win -->
        </div>
<if expr="is_win">
        <template is="dom-if" if="[[isRestartRequired_(
            item.language.code, languages.prospectiveUILanguage)]]"
            restamp>
          <cr-button id="restartButton" on-click="onRestartClick_">
            $i18n{restart}
          </cr-button>
        </template>
</if> <!-- is_win -->
        <cr-icon-button class="icon-more-vert"
            title="$i18n{moreActions}"
            id="more-[[item.language.code]]"
            on-click="onDotsClick_">
        </cr-icon-button>
      </div>
    </template>
  </div>
  <template is="dom-if" if="[[!enableDesktopDetailedLanguageSettings_]]">
    <settings-toggle-button id="offerTranslateOtherLanguages"
        pref="{{prefs.translate.enabled}}" label="$i18n{offerToEnableTranslate}"
        on-settings-boolean-control-change="onTranslateToggleChange_">
    </settings-toggle-button>
  </template>
  <cr-lazy-render id="menu">
    <template>
      <cr-action-menu role-description="$i18n{menu}"
<if expr="is_win">
          on-close="onCloseMenu_"
</if>
          class$="[[getMenuClass_(prefs.translate.enabled.value)]]">
<if expr="is_win">
        <cr-checkbox id="uiLanguageItem"
            class="dropdown-item"
            checked="[[isProspectiveUiLanguage_(
                detailLanguage_.language.code,
                languages.prospectiveUILanguage)]]"
            on-change="onUiLanguageChange_"
            disabled="[[disableUiLanguageCheckbox_(
                detailLanguage_, languages.prospectiveUILanguage)]]" noink>
          <span>
            $i18n{displayInThisLanguage}
          </span>
          <iron-icon class="policy" icon="cr20:domain"
              hidden$="[[!detailLanguage_.language.isProhibitedLanguage]]">
          </iron-icon>
        </cr-checkbox>
</if> <!-- is_win -->
        <template is="dom-if" if="[[!enableDesktopDetailedLanguageSettings_]]">
          <cr-checkbox id="offerTranslations"
              class="dropdown-item"
              checked="[[detailLanguage_.translateEnabled]]"
              on-change="onTranslateCheckboxChange_"
              hidden="[[!prefs.translate.enabled.value]]"
              disabled="[[disableTranslateCheckbox_(
                  detailLanguage_, languages.translateTarget)]]" noink>
            $i18n{offerToTranslateInThisLanguage} </cr-checkbox>
          <hr hidden="[[!shouldShowDialogSeparator_(languages.enabled.*)]]">
        </template>
        <button class="dropdown-item" role="menuitem"
            on-click="onMoveToTopClick_"
            hidden="[[isNthLanguage_(
                0, detailLanguage_, languages.enabled.*)]]">
          $i18n{moveToTop}
        </button>
        <button class="dropdown-item" role="menuitem"
            on-click="onMoveUpClick_"
            hidden="[[!showMoveUp_(detailLanguage_, languages.enabled.*)]]">
          $i18n{moveUp}
        </button>
        <button class="dropdown-item" role="menuitem"
            on-click="onMoveDownClick_"
            hidden="[[!showMoveDown_(
                detailLanguage_, languages.enabled.*)]]">
          $i18n{moveDown}
        </button>
        <button class="dropdown-item" role="menuitem"
            on-click="onRemoveLanguageClick_"
            disabled="[[!detailLanguage_.removable]]">
          $i18n{removeLanguage}
        </button>
      </cr-action-menu>
    </template>
  </cr-lazy-render>
</div>
<template is="dom-if" if="[[showAddLanguagesDialog_]]" restamp>
  <settings-add-languages-dialog languages="[[addLanguagesDialogLanguages_]]"
      language-helper="[[languageHelper]]"
      on-languages-added="onLanguagesAdded_"
      on-close="onAddLanguagesDialogClose_">
  </settings-add-languages-dialog>
</template>
<template is="dom-if" if="[[showManagedLanguageDialog_]]" restamp>
  <managed-dialog on-close="onManagedLanguageDialogClosed_"
      title="[[i18n('languageManagedDialogTitle')]]"
      body="[[i18n('languageManagedDialogBody')]]">
  </managed-dialog>
</template>
<template is="dom-if" if="[[shouldShowRelaunchDialog]]" restamp>
  <relaunch-confirmation-dialog restart-type="[[restartTypeEnum.RESTART]]"
      on-close="onRelaunchDialogClose">
  </relaunch-confirmation-dialog>
</template>