chromium/chrome/browser/resources/ash/extended_updates/app.html

<!--
Copyright 2024 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<style include="oobe-dialog-host-styles cr-shared-style">
  /* Main dialog container styles. */
  :host-context([orientation=vertical]) {
    --oobe-adaptive-dialog-header-top-padding: 0px;
  }

  #extendedUpdatesDialog {
    --oobe-adaptive-dialog-icon-size: 40px;

    background-color: var(--cros-sys-app_base_shaded);
  }

  .dialog-icon {
    color: var(--cros-sys-primary);
  }

  #dialogContent {
    border-radius: 16px;
  }

  #dialogHeading {
    font: var(--cros-display-3_regular-font);
  }

  .dialog-description {
    color: var(--cros-sys-on_surface_variant);
    font: var(--cros-body-1-font);
    margin: 0;
  }

  #dialogDescriptionFirst {
    margin-bottom: 12px;
  }

  .detail-card {
    --iron-icon-width: 32px;

    align-items: start;
    background-color: var(--cros-sys-base_elevated);
    display: flex;
    flex-direction: row;
    padding: 18px 60px 18px 20px;
  }

  #securityCard {
    border-radius: 16px 16px 2px 2px;
    margin-bottom: 1px;
  }

  #androidCard {
    border-radius: 2px 2px 16px 16px;
  }

  .detail-description {
    color: var(--cros-sys-on_surface);
    font: var(--cros-button-1-font);
    margin: 0;
  }

  .detail-icon {
    color: var(--cros-sys-primary);
    flex-shrink: 0;
    height: 32px;
    margin-right: 20px;
    width: 32px;
  }

  #cancelButton {
    margin-right: 8px;
  }

  /* Confirmation popup styles. */

  #popupDialog {
    --cr-dialog-width: 368px;
    --cr-primary-text-color: var(--cros-sys-on_surface);
    --cr-secondary-text-color: var(--cros-sys-on_surface_variant);
  }

  #popupTitle {
    font: var(--cros-display-7-font);
  }

  #popupDescription {
    font: var(--cros-body-1-font);
  }

  #popupCancelButton {
    margin-right: 8px;
  }

</style>

<!-- TODO(b/335461104): Split into smaller components. -->
<oobe-adaptive-dialog id="extendedUpdatesDialog" role="dialog">
  <iron-icon class="dialog-icon" icon="extended-updates-icons40:chrome"
    slot="icon" aria-hidden="true">
  </iron-icon>
  <h1 id="dialogHeading" slot="title">$i18n{dialogHeading}</h1>
  <div slot="subtitle">
    <p id="dialogDescriptionFirst" class="dialog-description">
      $i18n{dialogDescriptionP1}
    </p>
    <p id="dialogDescriptionSecond" class="dialog-description">
      <localized-link localized-string="$i18n{dialogDescriptionP2}">
      </localized-link>
    </p>
  </div>
  <div id="dialogContent" slot="content" class="landscape-vertical-centered">
    <div id="detailsCard">
      <div id="securityCard" class="detail-card">
        <iron-icon icon="extended-updates-icons32:checked"
          class="dialog-icon detail-icon" aria-hidden="true">
        </iron-icon>
        <h2 id="securityDescription" class="detail-description">
          $i18n{securityDescription}
        </h2>
      </div>
      <div id="androidCard" class="detail-card">
        <iron-icon icon="extended-updates-icons32:removed"
          class="dialog-icon detail-icon" aria-hidden="true">
        </iron-icon>
        <div id="androidCardContent">
          <h2 id="androidDescription" class="detail-description">
            $i18n{androidDescription}
          </h2>
          <android-apps-list apps="[[apps]]"></android-apps-list>
        </div>
      </div>
    </div>
  </div>
  <div slot="bottom-buttons" class="bottom-buttons-container">
    <cros-button
      id="cancelButton" label="$i18n{cancelButton}" button-style="secondary"
      on-click="onCancelButtonClick_"></cros-button>
    <cros-button
      id="enableButton" label="$i18n{enableButton}" button-style="primary"
      on-click="onEnableButtonClick_"></cros-button>
  </div>
</oobe-adaptive-dialog>

<template is="dom-if" if="[[showPopup_]]" restamp>
  <!-- TODO(b/332618847): Convert to <cros-dialog> once available. -->
  <cr-dialog
    id="popupDialog" show-on-attach hide-backdrop$="[[shouldHideBackdrop_]]"
  >
    <div id="popupTitle" slot="title">$i18n{popupTitle}</div>
    <div id="popupDescription" slot="body">
      $i18n{popupDescription}
    </div>
    <div id="popupActions" slot="button-container">
      <cros-button
        id="popupCancelButton"
        label="$i18n{cancelButton}"
        button-style="secondary"
        on-click="onPopupCancelButtonClick_">
      </cros-button>
      <cros-button
        id="popupConfirmButton"
        label="$i18n{popupConfirmButton}"
        button-style="primary"
        on-click="onPopupConfirmButtonClick_">
      </cros-button>
    </div>
  </cr-dialog>
</template>