chromium/chrome/browser/resources/ash/settings/os_people_page/os_sync_subpage.html

<style include="cr-shared-style settings-shared iron-flex">
  #sync-separator {
    border-bottom: var(--cr-separator-line);
  }

  #create-password-box {
    /* In order to line up with the encryption radio box text. */
    margin-inline-start: var(--cr-section-indent-width);
  }

  #create-password-box {
    margin-bottom: 1em;
  }

  #create-password-box .list-item {
    margin-bottom: var(--cr-form-field-bottom-spacing);
  }

  cr-input {
    --cr-input-width: var(--cr-default-input-max-width);
  }

  #existingPassphrase {
    border-bottom: var(--cr-separator-line);
    border-top: var(--cr-separator-line);
    /* This particular list frame is not indented. */
    padding-inline-start: var(--cr-section-padding);
  }

  #submitExistingPassphrase {
    /* The submit button for the existing passphrase is on the same line. */
    margin-inline-start: 16px;
  }

  #passphraseRecoverHint {
    align-items: center;
  }

  #other-sync-items {
    padding-bottom: 8px;
  }

  .passphrase-reset-icon {
    margin-inline-end: 8px;
  }

  #disabled-by-admin-icon {
    text-align: center;
    width: 40px;
  }

  #toast {
    left: 0;
    z-index: 1;
  }

  :host-context([dir='rtl']) #toast {
    left: auto;
    right: 0;
  }

  cr-link-row {
    padding-inline-end: 0;
    padding-inline-start: 0;
  }
</style>

<div class="cr-row first" hidden="[[!syncDisabledByAdmin_]]">
  <iron-icon id="disabled-by-admin-icon" icon="cr20:domain"></iron-icon>
  <div class="flex cr-padded-text">
    $i18n{syncDisabledByAdministrator}
  </div>
</div>

<template is="dom-if" if="[[showExistingPassphraseBelowAccount_]]"
    on-dom-change="focusPassphraseInput_">
  <div id="existingPassphrase" class="list-frame">
    <div id="existingPassphraseTitle" class="list-item">
        <div class="start cr-padded-text">
          <div>$i18n{existingPassphraseTitle}</div>
          <div id="enterPassphraseLabel" class="secondary"
              inner-h-t-m-l="[[enterPassphraseLabel_]]">
          </div>
        </div>
    </div>
    <div id="existingPassphraseContainer" class="list-item">
      <cr-input id="existingPassphraseInput" type="password"
          value="{{existingPassphrase_}}"
          placeholder="$i18n{passphrasePlaceholder}"
          error-message="$i18n{incorrectPassphraseError}"
          on-keypress="onSubmitExistingPassphraseClick_">
        <cr-button id="submitExistingPassphrase" slot="suffix"
            on-click="onSubmitExistingPassphraseClick_"
            class="action-button" disabled="[[!existingPassphrase_]]">
          $i18n{submitPassphraseButton}
        </cr-button>
      </cr-input>
    </div>
    <div id="passphraseRecoverHint" class="list-item">
      <div class="cr-padded-text">$i18nRaw{passphraseRecover}</div>
    </div>
  </div>
</template>

<div id="sync-separator" hidden="[[!syncSectionDisabled_]]"></div>

<div id="sync-section" hidden="[[syncSectionDisabled_]]">
  <div class="cr-row first">
    <h2 class="cr-title-text">$i18n{sync}</h2>
  </div>

  <div id="[[pageStatusEnum_.SPINNER]]" class="cr-row first cr-padded-text"
      hidden$="[[!isStatus_(pageStatusEnum_.SPINNER, pageStatus_)]]">
    $i18n{syncLoading}
  </div>
  <div id="[[pageStatusEnum_.CONFIGURE]]"
      hidden$="[[!isStatus_(pageStatusEnum_.CONFIGURE, pageStatus_)]]">
    <div id="other-sync-items" class="list-frame">
      <cr-link-row id="syncAdvancedRow"
          label="[[getSyncAdvancedTitle_()]]"
          role-description="$i18n{subpageArrowRoleDescription}"
          on-click="onSyncAdvancedClick_">
      </cr-link-row>

      <cr-link-row id="syncBrowserLink" class="hr"
          label="$i18n{manageBrowserSyncedDataTitle}"
          hidden="[[!showSyncSettingsRevamp_]]"
          on-click="onManageChromeBrowserSyncClick_"
          external>
      </cr-link-row>

      <cr-link-row id="syncDashboardLink" class="hr"
          label="$i18n{manageSyncedDataTitle}"
          sub-label="[[getManageSyncedDataSubtitle_()]]"
          on-click="onSyncDashboardLinkClick_"
          hidden="[[syncStatus.supervisedUser]]"
          external>
      </cr-link-row>

      <cr-expand-button id="encryptionDescription"
          hidden="[[syncPrefs.passphraseRequired]]"
          expanded="{{encryptionExpanded_}}"
          class="hr">
        $i18n{encryptionOptionsTitle}
        <div class="secondary">
          $i18n{syncDataEncryptedText}
          <div on-click="onResetSyncClick_"
              hidden="[[!syncPrefs.encryptAllData]]">
            <iron-icon icon="cr:info-outline"
                class="passphrase-reset-icon">
            </iron-icon>
            $i18nRaw{passphraseResetHintEncryption}
          </div>
        </div>
      </cr-expand-button>

      <iron-collapse id="encryptionCollapse"
          opened="[[encryptionExpanded_]]">
        <os-settings-sync-encryption-options
            sync-status="[[syncStatus]]" sync-prefs="{{syncPrefs}}"
            existing-passphrase-label="[[existingPassphraseLabel_]]"
            on-passphrase-changed="onPassphraseChanged_">
        </os-settings-sync-encryption-options>
      </iron-collapse>

    </div>
  </div>
</div>

<div class="cr-row first">
  <h2 class="cr-title-text">
    $i18n{nonPersonalizedServicesSectionLabel}
  </h2>
</div>
<if expr="_google_chrome">
<os-settings-personalization-options class="list-frame" prefs="{{prefs}}">
</os-settings-personalization-options>
</if>