<style include="cr-shared-style action-link md-select shared-style cr-icons">
iron-icon {
--iron-icon-height: var(--cr-icon-size);
--iron-icon-width: var(--cr-icon-size);
}
.link-icon-button {
margin-inline-start: 6px;
}
#section-heading {
--md-select-width: 160px;
align-items: center;
display: flex;
}
#section-heading-heading {
display: flex;
flex: 1;
}
#section-heading .link-icon-button {
margin-inline-start: 6px;
}
#hostAccess {
margin-inline-start: 12px;
width: 100%;
}
#hosts {
margin-bottom: 0;
padding-inline-start: calc(
var(--cr-section-indent-padding) - var(--cr-section-padding));
}
#hosts li {
align-items: center;
border-top: var(--cr-separator-line);
display: flex;
height: var(--cr-section-min-height);
}
#hosts li:first-child {
border-top: none;
}
#add-host {
font-weight: 500;
width: 100%;
}
#permissions-mode {
color: var(--cr-primary-text-color);
margin-top: 12px;
}
#new-permissions-mode {
color: var(--cr-primary-text-color);
margin-top: 12px;
padding-inline-start: calc(
var(--cr-section-indent-padding) - var(--cr-section-padding));
}
#new-section-heading {
align-items: flex-start;
display: flex;
flex-direction: column;
}
#new-section-heading-title {
display: flex;
}
#new-section-heading-subtext {
color: var(--cr-secondary-text-color);
margin-top: 3px;
}
#host-access-row {
display: flex;
justify-content: space-between;
margin-top: 18px;
width: 100%;
}
.site {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.site-favicon {
margin-inline-end: calc(
var(--cr-section-padding) + var(--cr-icon-ripple-margin));
}
</style>
<template is="dom-if" if="[[!enableEnhancedSiteControls]]">
<div id="permissions-mode">
<div id="section-heading">
<div id="section-heading-heading">
<span id="section-heading-text">
$i18n{hostPermissionsHeading}
</span>
<a class="link-icon-button"
aria-label="$i18n{permissionsLearnMoreLabel}"
href="$i18n{hostPermissionsLearnMoreLink}" target="_blank"
on-click="onLearnMoreClick_">
<iron-icon icon="cr:help-outline"></iron-icon>
</a>
</div>
<div>
<select id="hostAccess" class="md-select"
on-change="onHostAccessChange_"
value="[[permissions.hostAccess]]"
aria-labelledby="section-heading-text">
<option value="[[HostAccess_.ON_CLICK]]">
$i18n{hostAccessOnClick}
</option>
<option value="[[HostAccess_.ON_SPECIFIC_SITES]]">
$i18n{hostAccessOnSpecificSites}
</option>
<option value="[[HostAccess_.ON_ALL_SITES]]">
$i18n{hostAccessOnAllSites}
</option>
</select>
</div>
</div>
</div>
</template>
<template is="dom-if" if="[[enableEnhancedSiteControls]]">
<div id="new-permissions-mode">
<div id="new-section-heading">
<div id="new-section-heading-title">
<span id="new-section-heading-text">
$i18n{newHostPermissionsHeading}
</span>
<a class="link-icon-button"
aria-label="$i18n{permissionsLearnMoreLabel}"
href="$i18n{hostPermissionsLearnMoreLink}" target="_blank"
on-click="onLearnMoreClick_">
<iron-icon icon="cr:help-outline"></iron-icon>
</a>
</div>
<span id="new-section-heading-subtext">
$i18n{hostPermissionsSubHeading}
</span>
<div id="host-access-row">
<select id="newHostAccess" class="md-select"
on-change="onHostAccessChange_"
value="[[permissions.hostAccess]]"
aria-labelledby="new-section-heading-text">
<option value="[[HostAccess_.ON_CLICK]]">
$i18n{hostAccessAskOnEveryVisit}
</option>
<option value="[[HostAccess_.ON_SPECIFIC_SITES]]">
$i18n{hostAccessAllowOnSpecificSites}
</option>
<option value="[[HostAccess_.ON_ALL_SITES]]">
$i18n{hostAccessAllowOnAllSites}
</option>
</select>
<cr-button id="add-site-button"
hidden="[[!showSpecificSites_(permissions.*)]]"
on-click="onAddHostClick_">
$i18n{add}
</cr-button>
</div>
</div>
</div>
</template>
<template is="dom-if" if="[[showSpecificSites_(permissions.*)]]">
<ul id="hosts">
<template is="dom-repeat"
items="[[getRuntimeHosts_(permissions.hosts)]]">
<li>
<div class="site-favicon"
style$="background-image:[[getFaviconUrl_(item)]]"
hidden$="[[!enableEnhancedSiteControls]]"></div>
<div class="site">[[item]]</div>
<cr-icon-button class="icon-edit edit-host"
on-click="onEditHostClick_"
hidden$="[[!enableEnhancedSiteControls]]"></cr-icon-button>
<cr-icon-button class="icon-delete-gray remove-host"
on-click="onDeleteHostClick_"
hidden$="[[!enableEnhancedSiteControls]]"></cr-icon-button>
<cr-icon-button class="icon-more-vert open-edit-host"
on-click="onOpenEditHostClick_"
title="$i18n{hostPermissionsEdit}"
hidden$="[[enableEnhancedSiteControls]]"></cr-icon-button>
</li>
</template>
<li hidden$="[[enableEnhancedSiteControls]]">
<a id="add-host" is="action-link" on-click="onAddHostClick_">
$i18n{itemSiteAccessAddHost}
</a>
</li>
</ul>
</template>
<cr-action-menu id="hostActionMenu" role-description="$i18n{menu}">
<button class="dropdown-item" id="action-menu-edit"
on-click="onActionMenuEditClick_">
$i18n{hostPermissionsEdit}
</button>
<button class="dropdown-item" id="action-menu-remove"
on-click="onActionMenuRemoveClick_">
$i18n{remove}
</button>
</cr-action-menu>
<template is="dom-if" if="[[showHostDialog_]]" restamp>
<extensions-runtime-hosts-dialog
delegate="[[delegate]]" item-id="[[itemId]]"
enable-enhanced-site-controls="[[enableEnhancedSiteControls]]"
current-site="[[hostDialogModel_]]"
update-host-access="[[dialogShouldUpdateHostAccess_(oldHostAccess_)]]"
on-close="onHostDialogClose_"
on-cancel="onHostDialogCancel_">
</extensions-runtime-hosts-dialog>
</template>
<template is="dom-if" if="[[showRemoveSiteDialog_]]" restamp>
<cr-dialog id="removeSitesDialog" on-cancel="onRemoveSitesWarningCancel_"
show-on-attach>
<div slot="title">$i18n{removeSitesDialogTitle}</div>
<div slot="button-container">
<cr-button class="cancel-button" on-click="onRemoveSitesWarningCancel_">
$i18n{cancel}
</cr-button>
<cr-button class="action-button" on-click="onRemoveSitesWarningConfirm_">
$i18n{remove}
</cr-button>
</div>
</cr-dialog>
</template>
Codebase Browser
chromium