| <style> |
| #error-log { |
| white-space: pre; |
| } |
| |
| #img-rect-illustration { |
| align-self: center; |
| height: 180px; |
| margin-bottom: 80px; |
| width: 448px; |
| } |
| |
| #img-square-illustration { |
| align-self: center; |
| height: 180px; |
| margin-bottom: 80px; |
| width: 180px; |
| } |
| |
| #icon { |
| fill: var(--cros-icon-color-prominent); |
| height: 32px; |
| margin-top: 28px; |
| width: 32px; |
| } |
| |
| #main { |
| box-sizing: border-box; |
| display: flex; |
| flex-direction: column; |
| height: 608px; |
| justify-content: space-between; |
| padding: 0 64px; |
| width: 768px; |
| } |
| |
| #main-title { |
| color: var(--cros-text-color-primary); |
| font-family: 'Google Sans'; |
| font-size: 28px; |
| line-height: 1; |
| margin: 36px 0 14px; |
| } |
| |
| #status-container { |
| color: var(--cros-text-color-secondary); |
| flex-grow: 1; |
| font-family: Roboto; |
| font-size: 13px; |
| line-height: 18px; |
| } |
| |
| #progress-message { |
| height: 36px; |
| } |
| |
| #progress-submessage { |
| color: var(--google-grey-600); |
| flex-grow: 1; |
| font-family: Roboto; |
| font-size: 13px; |
| line-height: 18px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| paper-progress { |
| --paper-progress-active-color: var(--cros-icon-color-prominent); |
| --paper-progress-container-color: rgba(var(--google-blue-600-rgb), .24); |
| margin-top: 36px; |
| width: 100%; |
| } |
| |
| #log-storage-message { |
| color: var(--cros-text-color-secondary); |
| flex-grow: 1; |
| font-family: Roboto; |
| font-size: 13px; |
| line-height: 18px; |
| } |
| |
| #bottom-container { |
| text-align: center; |
| } |
| |
| #button-container { |
| display: flex; |
| gap: 8px; |
| justify-content: flex-end; |
| margin: 32px 0; |
| } |
| |
| a[href] { |
| color: var(--cr-link-color); |
| text-decoration: none; |
| } |
| </style> |
| |
| <div id="main"> |
| <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116 121"> |
| <path fill-rule="evenodd" d="M33.525 111.127C18.692 103.147 9.128 87.46 8.81 66.719c-1.433.726-3.064.848-4.943.163-5.377-1.96-4.169-8.51-2.197-14.348 1.633-4.835 7.21-8.365 9.942-9.103C17.969 19.072 32.883 0 58 0c25.416 0 40.433 18.285 46.611 43.495 2.8.862 8.129 4.332 9.719 9.04 1.972 5.838 3.18 12.386-2.197 14.347-1.878.685-3.51.563-4.942-.163-.29 20.873-9.852 36.5-24.678 44.438.894.72 1.4 1.651 1.4 2.843 0 3.866 1.882 7-11.913 7-10.067 0-11.785-2.13-11.98-4.447-.668-.422-1.342-1.053-2.02-1.053-.68 0-1.355.682-2.025 1.103C55.76 118.901 53.994 121 44 121c-13.795 0-11.914-3.134-11.914-7 0-1.208.521-2.15 1.439-2.873zM58 107c28.664 0 39-20.35 39-47.4 0-22.444-9.4-43.056-25-46.497C67 12 63.5 24 58 24s-9.5-12-14-10.897C28.334 16.943 19 38.342 19 59.6 19 85.125 29.336 107 58 107zM40 47a6 6 0 110-12 6 6 0 010 12zm36 0a6 6 0 110-12 6 6 0 010 12zm-16.914 3.24l8.234 3.613a2.78 2.78 0 01.934 4.442l-8.188 8.802a2.85 2.85 0 01-4.166-.006l-8.16-8.824a2.77 2.77 0 01.18-3.945c.222-.2.476-.365.75-.487l8.114-3.591a2.856 2.856 0 012.302-.004z"></path> |
| </svg> |
| <div id="status-container" role="status" aria-atomic="false"> |
| <div id="main-title">[[getTitle_(state_)]]</div> |
| |
| <!-- Prompt message. Has Learn More link.--> |
| <div id="prompt-message" hidden="[[!isState_(state_, State.PROMPT)]]"> |
| <span>[[getProgressMessage_(state_)]] </span> |
| <a href="$i18n{learnMoreUrl}" target="_blank">$i18n{learnMore}</a> |
| </div> |
| <!-- Progress message. --> |
| <div id="progress-message" hidden="[[isProgressMessageHidden_(state_)]]"> |
| <span>[[getProgressMessage_(state_)]]</span> |
| <!-- Progress submessage. --> |
| <div id = "progress-submessage" |
| hidden="[[!isState_(state_, State.UPGRADING)]]"> |
| <span>[[lastProgressLine_]]</span> |
| </div> |
| </div> |
| <!-- Progress bar containers. Depending on the current state, only one |
| of them is visible. --> |
| <div id="backup-progress-bar" hidden="[[!isState_(state_, State.BACKUP)]]"> |
| <paper-progress class="progress-bar" value="[[backupProgress_]]"> |
| </paper-progress> |
| </div> |
| <div id="restore-progress-bar" |
| hidden="[[!isState_(state_, State.RESTORE)]]"> |
| <paper-progress class="progress-bar" value="[[restoreProgress_]]"> |
| </paper-progress> |
| </div> |
| <div id="upgrade-progress-bar" |
| hidden="[[!isState_(state_, State.UPGRADING)]]"> |
| <paper-progress class="progress-bar" indeterminate> |
| </paper-progress> |
| </div> |
| <div id="canceling-progress-bar" |
| hidden="[[!isState_(state_, State.CANCELING)]]"> |
| <paper-progress class="progress-bar" indeterminate></paper-progress> |
| </div> |
| <div id="upgrade-error-message" hidden="[[isErrorLogsHidden_(state_)]]"> |
| <textarea id="error-log" rows="20" cols="80" readonly> |
| [[getErrorLogs_(state_)]] |
| </textarea> |
| </div> |
| </div> |
| |
| <img id="[[getIllustrationStyle_(state_)]]" |
| src="[[getIllustrationURI_(state_)]]" alt="" |
| hidden="[[hideIllustration_(state_)]]"> |
| <div id="log-storage-message-error" hidden="[[isLogsMessageHidden_(state_)]]"> |
| <span>[[getLogMessage_(state_, logFileName_)]]</span> |
| </div> |
| <div id="backup-checkbox" hidden="[[!isState_(state_, State.PROMPT)]]"> |
| <cr-checkbox checked="{{backupCheckboxChecked_}}" > |
| <p class="checkbox-text"> |
| $i18n{backupCheckboxMessage} |
| <a href="#" on-click="onChangeLocationButtonClick_" |
| style="text-decoration: none"> |
| $i18n{backupChangeLocation}</a> |
| </p> |
| </cr-checkbox> |
| </div> |
| <div id="button-container"> |
| <cr-button id="cancel-button" on-click="onCancelButtonClick_" |
| hidden="[[!canCancel_(state_)]]"> |
| [[getCancelButtonLabel_(state_)]] |
| </cr-button> |
| <cr-button class="action-button" on-click="onActionButtonClick_" |
| aria-describedby="title" aria-details="prompt-message" |
| hidden="[[!canDoAction_(state_)]]"> |
| [[getActionButtonLabel_(state_)]] |
| </cr-button> |
| </div> |
| </div> |