chromium/ash/webui/sanitize_ui/resources/sanitize_done.html

<style include="cr-shared-style sanitize-shared">
  .completed-icon {
    height: 32px;
    width: 32px;
  }

  cr-expand-button {
    background-color: var(--cros-sys-app_base);
    border-radius: var(--cr-card-border-radius);
    margin-bottom: 8px;
    padding: 14px 16px 16px 14px;
  }

  .expand-buttons {
    background-color: var(--cros-sys-app_base_shaded);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    height: 290px;
    padding: 12px;
    overflow-y: scroll;
  }

  .expand-container-icon {
    height: 24px;
    margin-right: 12px;
    width: 24px;
  }

  .expand-div {
    align-items: center;
    display: inline-flex;
  }

  .expand-title {
    color: var(--cros-sys-on_surface);
    font: var(--cros-button-1-font);
    font-family: var(--cros-button-1-font-family);
    font-size: var(--cros-button-1-font-size);
    font-weight: var(--cros-button-1-font-weight);
    line-height: var(--cros-button-1-line-height);
  }

  .sanitize-done-info {
    background-color: var(--cros-sys-secondary_container);
    border-radius: 16px;
  }

  .sanitize-done-rollback {
    color: var(--cros-sys-on_secondary_container);
    font: var(--cros-button-2-font);
    font-family: var(--cros-button-2-font-family);
    font-size: var(--cros-button-2-font-size);
    font-weight: var(--cros-button-2-font-weight);
    line-height: var(--cros-button-2-line-height);
    padding: 12px 12px 16px 12px;
  }

  .secondary-button-container {
    margin-left: auto;
  }

  .list-container {
    align-items: center;
    border-top: var(--cr-separator-line);
    color: var(--cros-sys-on_surface);
    display: flex;
    font: var(--cros-button-1-font);
    font-family: var(--cros-button-1-font-family);
    font-size: var(--cros-button-1-font-size);
    font-weight: var(--cros-button-1-font-weight);
    line-height: var(--cros-button-1-line-height);
    min-height: var(--settings-row-min-height);
    padding-top: 4px;
  }

  .list-container:not(:last-child) {
    padding-bottom: 4px;
  }
</style>

<div slot="body">
  <div class="completed-icon-div">
    <svg class="completed-icon"
        preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 32 32">
      <use href="svg/finished_32.svg#finished_32"></use>
    </svg>
  </div>
  <div id="title" class="title">$i18n{sanitizeDoneTitle}</div>
  <div class="sanitize-description">
    $i18n{sanitizeDoneExplanation}
  </div>
  <div class="sanitize-done-info">
    <div class="sanitize-done-rollback">
      $i18n{sanitizeDoneRollback}
    </div>
    <div class="expand-buttons">
      <cr-expand-button class="expand-container"
          expanded="{{extensionsExpanded_}}"
          id="expandExtensions">
        <div class="expand-div">
          <svg class="expand-container-icon extensions-icon"
               preserveAspectRatio="xMidYMid meet"
               role="img" viewBox="0 0 32 32">
            <use href="svg/extension_off_32.svg#extension_off_32"></use>
          </svg>
          <span class="expand-title">
            $i18n{sanitizeDoneAccordionExtensionsTitle}
          </span>
        </div>
        <template is="dom-if" if="[[extensionsExpanded_]]">
          <div>
            <div class="list-container">
              $i18n{sanitizeDoneAccordionExtensionsReenable}
              <span class="secondary-button-container">
                <cros-button role="button" button-style="secondary"
                    id="extensionsButton" on-click="onExtensionsButtonClick_"
                    aria-label="$i18n{sanitizeDoneButtonExtensions}"
                    label="$i18n{sanitizeDoneButtonExtensions}">
                </cros-button>
              </span>
            </div>
          </div>
        </template>
      </cr-expand-button>
      <cr-expand-button
          class="expand-container"
          expanded="{{chromeOSSettingsInfoExpanded_}}"
          id="expandChromeOsSettingsInfo">
        <div class="expand-div">
          <svg class="expand-container-icon chromeos-icon"
              preserveAspectRatio="xMidYMid meet"
              role="img" viewBox="0 0 24 24">
            <use href="svg/card_settings.svg#card_settings"></use>
          </svg>
          <span class="expand-title">
            $i18n{sanitizeDoneAccordionChromeOsTitle}
          </span>
        </div>
        <template is="dom-if" if="[[chromeOSSettingsInfoExpanded_]]">
          <div>
            <div class="list-container">
              $i18n{sanitizeDoneAccordionChromeOsInput}
              <span class="secondary-button-container">
                <cros-button role="button" button-style="secondary"
                    id="chromeOsInputButton" on-click="onChromeOsInputClick_"
                    aria-label="$i18n{sanitizeDoneButtonChromeOSInput}"
                    label="$i18n{sanitizeDoneButtonChromeOSInput}">
                </cros-button>
              </span>
            </div>
            <div class="list-container">
              $i18n{sanitizeDoneAccordionChromeOsNetwork}
              <span class="secondary-button-container">
                <cros-button role="button" button-style="secondary"
                    id="chromeOsNetworkButton"
                    on-click="onChromeOsNetworkClick_"
                    aria-label="$i18n{sanitizeDoneButtonChromeOSNetwork}"
                    label="$i18n{sanitizeDoneButtonChromeOSNetwork}">
                </cros-button>
              </span>
            </div>
          </div>
        </template>
      </cr-expand-button>
      <cr-expand-button
          class="expand-container"
          expanded="{{chromeSettingsInfoExpanded_}}"
          id="expandChromeSettingsInfo">
        <div class="expand-div">
          <svg class="expand-container-icon chrome-icon"
              preserveAspectRatio="xMidYMid meet"
              role="img" viewBox="0 0 24 24">
            <use href="svg/card_chrome_product.svg#card_chrome_product"></use>
          </svg>
          <span class="expand-title">
            $i18n{sanitizeDoneAccordionChromeTitle}
          </span>
        </div>
        <template is="dom-if" if="[[chromeSettingsInfoExpanded_]]">
          <div>
            <div class="list-container">
              $i18n{sanitizeDoneAccordionChromeSiteContent}
              <span class="secondary-button-container">
                <cros-button role="button" button-style="secondary"
                    id="chromeSiteContentButton"
                    on-click="onChromeSiteContentClick_"
                    label="Chrome Site Content">
                </cros-button>
              </span>
            </div>
            <div class="list-container">
              $i18n{sanitizeDoneAccordionChromeStartup}
              <span class="secondary-button-container">
                <cros-button role="button" button-style="secondary"
                    id="chromeStartupButton" on-click="onChromeStartupClick_"
                    aria-label="$i18n{sanitizeDoneButtonChromeStartup}"
                    label="$i18n{sanitizeDoneButtonChromeStartup}">
                </cros-button>
              </span>
            </div>
            <div class="list-container">
              $i18n{sanitizeDoneAccordionChromeHomepage}
              <span class="secondary-button-container">
                <cros-button role="button" button-style="secondary"
                    id="chromeHomepageButton" on-click="onChromeHomepageClick_"
                    aria-label="$i18n{sanitizeDoneButtonChromeHomepage}"
                    label="$i18n{sanitizeDoneButtonChromeHomepage}">
                </cros-button>
              </span>
            </div>
            <div class="list-container">
              $i18n{sanitizeDoneAccordionChromeLanguages}
              <span class="secondary-button-container">
                <cros-button role="button" button-style="secondary"
                    id="chromeLanguagesButton" on-click="onChromeLanguagesClick_"
                    aria-label="$i18n{sanitizeDoneButtonChromeLanguages}"
                    label="$i18n{sanitizeDoneButtonChromeLanguages}">
                </cros-button>
              </span>
            </div>
          </div>
        </template>
      </cr-expand-button>
    </div>
  </div>
  <div class="button-container done-button-container">
    <cros-button role="button" button-style="primary" id="doneButton"
        label="$i18n{sanitizeDoneButton}" on-click="onDoneClick_">
    </cros-button>
  </div>
</div>