<style>
#dialog:focus-visible {
outline: none;
}
.title-icon {
display: none;
}
#title-icon-install, #title-icon-installed {
fill: var(--cros-sys-primary);
}
#title-icon-error, #title-icon-connection-error {
fill: var(--cros-sys-on_error_container);
}
#title {
color: var(--cros-sys-on_surface);
font: var(--cros-display-6-font);
padding-top: 14px;
margin: 0;
}
#content-card {
background-color: var(--cros-sys-base_elevated);
border-radius: 16px;
margin: 24px 0px;
overflow: hidden;
}
#essential-details {
display: flex;
flex-direction: row;
min-height: 68px;
padding: 0px 24px;
}
#app-icon {
margin-inline-end: 14px;
margin-block: auto;
box-shadow: 0px 0px 4px 0px var(--cros-sys-shadow_key),
0px 1px 2px 0px var(--cros-sys-shadow_ambient);
border-radius: 100%;
}
#name-and-url {
margin-block: auto;
margin: 14px 0px;
}
#name {
margin: 0 0 2px 0;
font: var(--cros-button-1-font);
color: var(--cros-sys-on_surface);
}
#url {
margin: 0;
font: var(--cros-annotation-1-font);
color: var(--cros-sys-on_surface);
overflow-wrap: anywhere;
}
#url-link {
color: var(--cros-sys-primary);
}
hr {
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: var(--cros-sys-app_base_shaded);
margin: 0;
}
#description-and-screenshots {
padding: 0px 20px 0px 20px;
}
#description {
font: var(--cros-annotation-1-font);
color: var(--cros-sys-on_surface_variant);
overflow-wrap: break-word;
padding: 12px 0px;
margin: 0px;
}
#screenshot-container {
margin-bottom: 20px;
border-radius: 16px;
/* TODO(b/343106164): Show animation instead of solid color. */
background-color: var(--cros-sys-inverse_on_surface);
}
#screenshot {
border-radius: 16px;
/* Hide until screenshot has loaded. */
display: none;
}
#error-message {
color: var(--cros-sys-on_surface);
font: var(--cros-body-1-font);
margin-top: 10px;
margin-bottom: 32px;
}
div[slot=button-container] {
display: flex;
justify-content: flex-end;
height: 36px;
}
.action-button {
margin-inline-start: 8px;
}
</style>
<cr-dialog
id="dialog"
role="dialog"
aria-labelledby="title"
autofocus
tabindex="-1">
<svg class="title-icon" id="title-icon-install" xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></svg>
<svg class="title-icon" id="title-icon-installed" xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="m437-398 227-226-57-57-170 170-85-85-56 56 141 142ZM40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"></svg>
<svg class="title-icon" id="title-icon-error" xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"></svg>
<svg class="title-icon" id="title-icon-connection-error" xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="m676-140-56-56 84-84-84-84 56-56 84 84 84-84 57 56-84 84 83 84-56 56-84-83-84 83Zm-196 20L0-600q95-97 219.5-148.5T480-800q136 0 260.5 51.5T960-600L822-463q-14-14-28-28.5T766-520l78-78q-79-60-172-91t-192-31q-99 0-192 31t-172 91l364 364 40-40 28.5 28.5L577-217l-97 97Zm0-357Z"></svg>
<h1 id="title"></h1>
<div id="content-card" style="display: none">
<div id="essential-details">
<img id="app-icon" is="cr-auto-img" width="32" height="32">
<div id="name-and-url">
<p id="name"></p>
<p id="url">$i18n{appDetails}
<a id="url-link" target="_blank"></a>
</p>
</div>
</div>
<hr id="divider" hidden aria-hidden="true">
<div id="description-and-screenshots" hidden>
<p id="description"></p>
<div id="screenshot-container" hidden>
<img id="screenshot" is="cr-auto-img" width="408" alt="">
</div>
</div>
</div>
<p id="error-message" style="display: none"></p>
<div slot="button-container">
<cros-button
class="cancel-button"
label="$i18n{cancel}"
button-style="secondary">
</cros-button>
<cros-button
class="action-button"
label="$i18n{install}">
<!-- Spinner icon from //ui/webui/resources/images/throbber_medium.svg,
download and open in icons from https://fonts.google.com/icons. -->
<svg class="action-icon" id="action-icon-install" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" slot="leading-icon"><path fill="currentColor" d="M480-336 288-528l51-51 105 105v-342h72v342l105-105 51 51-192 192ZM263.717-192Q234-192 213-213.15T192-264v-72h72v72h432v-72h72v72q0 29.7-21.162 50.85Q725.676-192 695.96-192H263.717Z"></svg>
<svg class="action-icon" id="action-icon-installing" version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><style>@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes fillunfill{0%{stroke-dashoffset:58.8}50%{stroke-dashoffset:0}to{stroke-dashoffset:-58.4}}@keyframes rot{0%{transform:rotate(0deg)}to{transform:rotate(-360deg)}}@keyframes colors{0%,to{stroke:currentColor}}</style><g style="animation-duration:1568.63ms;animation-iteration-count:infinite;animation-name:rotate;animation-timing-function:linear;transform-origin:50% 50%;width:28px;height:28px"><path fill="none" d="M14 1.5A12.5 12.5 0 1 1 1.5 14" stroke-width="3" stroke-linecap="round" style="animation-duration:1333ms,5332ms,5332ms;animation-fill-mode:forwards;animation-iteration-count:infinite,infinite,infinite;animation-name:fillunfill,rot,colors;animation-play-state:running,running,running;animation-timing-function:cubic-bezier(.4,0,.2,1),steps(4),linear;transform-origin:50% 50%" stroke-dasharray="58.9" stroke-dashoffset="58.9"></g></svg>
<svg class="action-icon" id="action-icon-open-app" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M216-144q-29.7 0-50.85-21.15Q144-186.3 144-216v-528q0-29.7 21.15-50.85Q186.3-816 216-816h264v72H216v528h528v-264h72v264q0 29.7-21.15 50.85Q773.7-144 744-144H216Zm171-192-51-51 357-357H576v-72h240v240h-72v-117L387-336Z"></svg>
<svg class="action-icon" id="action-icon-try-again" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-192q-120 0-204-84t-84-204q0-120 84-204t204-84q65 0 120.5 27t95.5 72v-99h72v240H528v-72h131q-29-44-76-70t-103-26q-90 0-153 63t-63 153q0 90 63 153t153 63q84 0 144-55.5T693-456h74q-9 112-91 188t-196 76Z"></svg>
</cros-button>
</div>
</cr-dialog>
Codebase Browser
chromium