chrome/browser/resources/certificate_manager/certificate_provisioning_details_dialog.html

<style include="certificate-shared">
  .button-box {
    align-items: center;
    min-height: 48px;
  }

  .label {
    color: var(--cr-secondary-text-color);
    font-size: 85%;
  }

  /* A row with two lines of text.
   * Consistnt with chrome/browser/resources/settings/settings_shared_css.html
   * (which can not be imported here).
   */
  .two-line {
    min-height: var(--settings-row-two-line-min-height);
  }

  .value {
    color: var(--cr-primary-text-color);
    word-wrap: break-word;
  }
</style>
<cr-dialog id="dialog" show-on-attach show-close-button close-text="$i18n{close}">
  <div slot="title">
    $i18n{certificateProvisioningDetails}
  </div>
  <div slot="body">
    <div class="two-line">
      <div class="label" aria-describedby="certProfileName">
        $i18n{certificateProvisioningProfileName}
      </div>
      <div class="value" id="certProfileName" aria-hidden="true">
        [[model.certProfileName]]
      </div>
    </div>
    <div class="two-line">
      <div class="label" aria-describedby="certProfileId">
        $i18n{certificateProvisioningProfileId}
      </div>
      <div class="value" id="certProfileId" aria-hidden="true">
        [[model.certProfileId]]
      </div>
    </div>
    <div class="two-line">
      <div class="label" aria-describedby="processId">
        $i18n{certificateProvisioningProcessId}
      </div>
      <div class="value" id="processId" aria-hidden="true">
        [[model.processId]]
      </div>
    </div>
    <div class="button-box">
      <div class="two-line flex">
        <div class="label" aria-describedby="status">
          $i18n{certificateProvisioningStatus}
        </div>
        <span class="value" id="status" aria-hidden="true">
          [[model.status]]
        </span>
      </div>
      <cr-button id="refresh" role="button" on-click="onRefresh_">
        $i18n{certificateProvisioningRefresh}
      </cr-button>
    </div>
    <div class="two-line">
      <div class="label" aria-describedby="timeSinceLastUpdate">
        $i18n{certificateProvisioningLastUpdate}
      </div>
      <div class="value" id="timeSinceLastUpdate" aria-hidden="true">
        [[model.timeSinceLastUpdate]]
      </div>
    </div>
    <div class="two-line" hidden$="[[shouldHideLastFailedStatus_(model.lastUnsuccessfulMessage)]]">
      <div class="label" aria-describedby="lastFailedStatus">
        $i18n{certificateProvisioningLastUnsuccessfulStatus}
      </div>
      <div class="value" id="lastFailedStatus" aria-hidden="true">
        [[model.lastUnsuccessfulMessage]]
      </div>
    </div>
    <cr-button id="reset" role="button" on-click="onReset_">
      $i18n{certificateProvisioningReset}
    </cr-button>
    <hr></hr>
    <cr-expand-button expanded="{{advancedExpanded_}}"
        aria-expanded$="[[boolToString_(advancedOpened)]]">
      <div>$i18n{certificateProvisioningAdvancedSectionTitle}</div>
    </cr-expand-button>
    <cr-collapse id="advancedInfo" opened="[[advancedExpanded_]]">
      <div class="two-line">
        <div class="label" aria-describedby="stateId">
          $i18n{certificateProvisioningStatusId}
        </div>
        <div class="value" id="stateId" aria-hidden="true">
          [[model.stateId]]
        </div>
      </div>
      <div class="two-line">
        <div class="label" aria-describedby="publicKey">
          $i18n{certificateProvisioningPublicKey}
        </div>
        <div class="value" id="publicKey" aria-hidden="true">
          [[model.publicKey]]
        </div>
      </div>
    </cr-collapse>
  </div>
</cr-dialog>