blob: f52326d1ad8838288536aa01749f68cf8ce6d359 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_page_host_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="icons.html">
<link rel="import" href="management_browser_proxy.html">
<dom-module id="management-ui">
<template>
<style include="cr-icons cr-hidden-style cr-page-host-style
cr-shared-style">
:host {
color: var(--cr-secondary-text-color);
display: flex;
flex-direction: column;
height: 100%;
}
a {
color: var(--cr-link-color);
text-decoration: none;
}
cr-toolbar {
flex-shrink: 0;
}
main {
height: 100%;
overflow: overlay;
}
.sections-container {
@apply --cr-centered-card-container;
height: 100%;
}
.card {
@apply --cr-card-elevation;
background-color: var(--cr-card-background-color);
margin: 0 3px;
min-height: 100%;
}
.page-subtitle {
align-items: center;
box-sizing: border-box;
flex-direction: row;
justify-content: start;
min-height: 73px;
padding-bottom: 24px;
padding-top: 6px;
}
.page-subtitle cr-icon-button {
margin-inline-end: 10px;
margin-inline-start: -10px;
}
.overview-section div + div {
margin-top: 16px;
}
.overview-container img {
float: left;
margin-inline-end: 10px;
vertical-align: top;
width: 20%;
}
.overview-container div {
display: block;
overflow: hidden;
width: auto;
}
.overview-messages {
margin-top: 0;
}
.overview-messages li {
margin-top: 8px;
}
th {
font-weight: 500;
}
.subtitle {
margin-top: 16px;
}
section {
@apply --cr-section;
align-items: flex-start;
border-top: none;
flex-direction: column;
justify-content: center;
padding-bottom: 12px;
padding-top: 12px;
}
section:not(.page-subtitle) h2 {
font-size: 100%;
margin: 0;
}
.report iron-icon {
height: 20px;
margin-inline-end: 16px;
width: 20px;
}
.report {
align-items: start;
display: flex;
margin-top: 16px;
}
.content-indented {
padding-inline-start: 24px;
}
table {
border-spacing: 0 16px;
box-sizing: border-box;
width: 100%;
}
th,
td {
text-align: start;
}
td > div {
align-items: center;
display: flex;
}
.extension-name,
.protection-name {
width: 40%;
}
.extension-name span {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.extension-permissions,
.protection-permissions {
width: 60%;
}
.protection-name,
.protection-permissions {
vertical-align: top;
}
.extension-name img {
height: 20px;
margin-inline-end: 12px;
width: 20px;
}
.extension-permissions ul,
.report ul {
list-style: none;
margin: 0;
padding: 0;
}
</style>
<cr-toolbar page-name="$i18n{toolbarTitle}" role="banner"
on-search-changed="onSearchChanged_" clear-label="$i18n{clearSearch}"
search-prompt="$i18n{searchPrompt}">
</cr-toolbar>
<main id="mainContent">
<div class="sections-container">
<div class="card">
<section hidden="[[!managed_]]" class="page-subtitle">
<cr-icon-button class="icon-arrow-back" id="closeButton"
on-click="onTapBack_" aria-label="$i18n{backButton}">
</cr-icon-button>
<h2 class="cr-title-text">
[[subtitle_]]
</h2>
</section>
<section class="overview-section" hidden="[[!managementOverview_]]">
<if expr="not chromeos">
<div inner-h-t-m-l="[[managementNoticeHtml_]]"></div>
</if>
<if expr="chromeos">
<div class="overview-container">
<img src="[[customerLogo_]]" alt="" aria-hidden="true"
hidden="[[!customerLogo_]]">
<div>[[managementOverview_]]</div>
</div>
</if>
</section>
<template is="dom-if"
if="[[showThreatProtectionInfo_(threatProtectionInfo_)]]">
<section>
<h2 class="cr-title-text">$i18n{threatProtectionTitle}</h2>
<div class="subtitle">
[[threatProtectionInfo_.description]]
</div>
<table class="content-indented">
<tr>
<th class="protection-name">$i18n{extensionName}</th>
<th class="protection-permissions">
$i18n{extensionPermissions}
</th>
</tr>
<template is="dom-repeat"
items="[[threatProtectionInfo_.info]]">
<tr>
<td class="protection-name">[[i18n(item.title)]]</td>
<td class="protection-permissions">
[[i18n(item.permission)]]
</td>
</tr>
</template>
</table>
</section>
</template>
<if expr="chromeos">
<div hidden="[[!localTrustRoots_]]">
<section>
<h2 class="cr-title-text">$i18n{localTrustRoots}</h2>
<div class="subtitle" id="trust-roots-configuration">
[[localTrustRoots_]]</div>
</section>
</div>
<template is="dom-if"
if="[[showDeviceReportingInfo_(deviceReportingInfo_)]]">
<section>
<h2 class="cr-title-text">$i18n{deviceReporting}</h2>
<div class="subtitle">
$i18n{deviceConfiguration}
</div>
<div class="content-indented">
<template is="dom-repeat" items="[[deviceReportingInfo_]]">
<div class="report">
<iron-icon icon="[[getIconForDeviceReportingType_(
item.reportingType)]]"></iron-icon>
[[i18n(item.messageId)]]
</div>
</template>
</div>
</section>
</template>
</if>
<if expr="not chromeos">
<template is="dom-if"
if="[[showBrowserReportingInfo_(browserReportingInfo_)]]">
<section>
<h2 class="cr-title-text">$i18n{browserReporting}</h2>
<div class="subtitle">
$i18n{browserReportingExplanation}
</div>
<div>
<template is="dom-repeat" items="[[browserReportingInfo_]]">
<div class="report">
<iron-icon icon="[[item.icon]]"></iron-icon>
<ul>
<template is="dom-repeat" items="[[item.messageIds]]"
as="messageId">
<li inner-h-t-m-l="[[i18nAdvanced(messageId)]]"></li>
</template>
</ul>
</div>
</template>
</div>
</section>
</template>
</if>
<template is="dom-if"
if="[[showExtensionReportingInfo_(extensions_)]]">
<section class="extension-reporting">
<h2 class="cr-title-text">$i18n{extensionReporting}</h2>
<div class="subtitle">
[[extensionReportingSubtitle_]]
</div>
<table class="content-indented">
<tr>
<th class="extension-name">$i18n{extensionName}</th>
<th class="extension-permissions">
$i18n{extensionPermissions}
</th>
</tr>
<template is="dom-repeat" items="[[extensions_]]">
<tr>
<td class="extension-name">
<div title="[[item.name]]" role="presentation">
<img src="[[item.icon]]" alt="" aria-hidden="true">
<span>[[item.name]]</span>
</div>
</td>
<td class="extension-permissions">
<ul>
<template is="dom-repeat" items="[[item.permissions]]"
as="permission">
<li>[[permission]]</li>
</template>
</ul>
</td>
</tr>
</template>
</table>
</section>
</template>
</div>
</div>
</main>
</template>
<script src="management_ui.js"></script>
</dom-module>