<style include="cr-shared-style settings-shared settings-page-styles iron-flex">
:host {
--about-page-image-space: 10px;
}
.info-sections {
padding: var(--cr-section-vertical-padding) var(--cr-section-padding);
}
.info-section {
margin-bottom: 12px;
}
.product-title {
font-size: 153.85%; /* 20px / 13px */
font-weight: 400;
margin-bottom: auto;
margin-top: auto;
}
img {
margin-inline-end: var(--about-page-image-space);
}
.icon-container {
margin-inline-end: var(--about-page-image-space);
min-width: 32px; /* The width of the product-logo img. */
text-align: center;
}
iron-icon[icon='settings:check-circle'] {
fill: var(--cr-checked-color);
}
iron-icon[icon='cr:error'] {
fill: var(--settings-error-color);
}
cr-button {
white-space: nowrap;
}
</style>
<settings-section page-title="$i18n{aboutPageTitle}" section="about">
<div class="cr-row two-line first">
<img id="product-logo" on-click="onProductLogoClick_"
srcset="chrome://theme/current-channel-logo@1x 1x,
chrome://theme/current-channel-logo@2x 2x"
alt="$i18n{aboutProductLogoAlt}"
role="presentation">
<div class="product-title">$i18n{aboutProductTitle}</div>
</div>
<div class="cr-row two-line">
<!-- Set the icon from the iconset (when it's obsolete/EOL and
when update is done) or set the src (when it's updating). -->
<if expr="not chromeos_ash">
<div class="icon-container"
hidden="[[!shouldShowIcons_(showUpdateStatus_)]]">
<iron-icon
icon$="[[getUpdateStatusIcon_(
obsoleteSystemInfo_, currentUpdateStatusEvent_)]]"
src="[[getThrobberSrcIfUpdating_(
obsoleteSystemInfo_, currentUpdateStatusEvent_)]]">
</iron-icon>
</div>
</if>
<div class="flex cr-padded-text">
<if expr="not chromeos_ash">
<div id="updateStatusMessage" hidden="[[!showUpdateStatus_]]">
<div role="alert" aria-live="polite"
inner-h-t-m-l="[[getUpdateStatusMessage_(
currentUpdateStatusEvent_)]]">
</div>
<a hidden$="[[!shouldShowLearnMoreLink_(
currentUpdateStatusEvent_)]]" target="_blank"
href="https://support.google.com/chrome?p=update_error"
aria-label="$i18nPolymer{aboutLearnMoreUpdatingErrors}">
$i18n{learnMore}
</a>
</div>
<span id="deprecationWarning"
hidden="[[!obsoleteSystemInfo_.obsolete]]">
$i18n{aboutObsoleteSystem}
<a href="$i18n{aboutObsoleteSystemURL}" target="_blank"
aria-label="$i18nPolymer{aboutLearnMoreSystemRequirements}">
$i18n{learnMore}
</a>
</span>
</if>
<div class="secondary">$i18n{aboutBrowserVersion}</div>
</div>
<if expr="not chromeos_ash">
<div class="separator" hidden="[[!showButtonContainer_]]"></div>
<span id="buttonContainer" hidden="[[!showButtonContainer_]]">
<cr-button id="relaunch" hidden="[[!showRelaunch_]]"
on-click="onRelaunchClick_">
$i18n{aboutRelaunch}
</cr-button>
</span>
</if>
</div>
<if expr="_google_chrome and is_macosx">
<template is="dom-if" if="[[!promoteUpdaterStatus_.hidden]]">
<div id="promoteUpdater"
class$="cr-row [[getPromoteUpdaterClass_(promoteUpdaterStatus_.disabled)]]"
actionable$="[[promoteUpdaterStatus_.actionable]]"
on-click="onPromoteUpdaterClick_">
<div class="flex">
[[promoteUpdaterStatus_.text]]
<a href="https://support.google.com/chrome/answer/95414"
target="_blank" id="updaterLearnMore"
on-click="onLearnMoreClick_"
aria-label="$i18nPolymer{aboutLearnMoreUpdating}">
$i18n{learnMore}
</a>
</div>
<cr-icon-button class="subpage-arrow"
hidden$="[[!promoteUpdaterStatus_.actionable]]"
disabled="[[promoteUpdaterStatus_.disabled]]"
aria-label$="[[promoteUpdaterStatus_.text]]"></cr-icon-button>
</div>
</template>
</if>
<template is="dom-if" if="[[!showGetTheMostOutOfChromeSection_]]">
<cr-link-row class="hr" id="help" on-click="onHelpClick_"
label="$i18n{aboutGetHelpUsingChrome}"
external></cr-link-row>
</template>
<if expr="_google_chrome">
<template is="dom-if" if="[[!showGetTheMostOutOfChromeSection_]]">
<cr-link-row class="hr" id="reportIssue" on-click="onReportIssueClick_"
hidden="[[!prefs.feedback_allowed.value]]"
label="$i18n{aboutReportAnIssue}" external></cr-link-row>
</template>
<cr-link-row class="hr" id="privacyPolicy"
on-click="onPrivacyPolicyClick_" label="$i18n{aboutPrivacyPolicy}"
external></cr-link-row>
</if>
<cr-link-row class="hr" on-click="onManagementPageClick_"
start-icon="[[managedByIcon_]]" label="$i18n{managementPage}"
role-description="$i18n{subpageArrowRoleDescription}"
hidden$="[[!isManaged_]]"></cr-link-row>
</settings-section>
<if expr="_google_chrome">
<template is="dom-if" if="[[showGetTheMostOutOfChromeSection_]]">
<get-most-chrome-section></get-most-chrome-section>
<settings-section page-title="Get Help">
<cr-link-row id="help" on-click="onHelpClick_"
label="$i18n{aboutGetHelpUsingChrome}"
external></cr-link-row>
<cr-link-row class="hr" id="reportIssue" on-click="onReportIssueClick_"
hidden="[[!prefs.feedback_allowed.value]]"
label="$i18n{aboutReportAnIssue}" external></cr-link-row>
</settings-section>
</template>
</if>
<settings-section>
<div class="info-sections">
<div class="info-section">
<div class="secondary">$i18n{aboutProductTitle}</div>
<div class="secondary">$i18n{aboutProductCopyright}</div>
</div>
<div class="info-section">
<div class="secondary">$i18nRaw{aboutProductLicense}</div>
</div>
<if expr="_google_chrome or _is_chrome_for_testing_branded">
<div class="secondary">
<a id="tos" href="$i18n{aboutTermsURL}">$i18n{aboutProductTos}</a>
</div>
</if>
<if expr="not chromeos_ash">
<template is="dom-if" if="[[shouldShowRelaunchDialog]]" restamp>
<relaunch-confirmation-dialog restart-type="[[restartTypeEnum.RELAUNCH]]"
on-close="onRelaunchDialogClose"></relaunch-confirmation-dialog>
</template>
</if>
</div>
</settings-section>