<style include="cr-shared-style os-settings-icons settings-shared iron-flex">
#networkListDiv {
min-height: var(--cr-section-two-line-min-height);
}
:host(:not([is-showing-vpn_], [is-showing-tether_])) #networkListDiv {
margin-top: var(--cr-section-vertical-margin);
}
#cellularNetworkList {
/* No extra margin-top when displaying the cellular network list. */
margin-top: calc(-1*var(--cr-section-vertical-margin));
}
#instant-tether-notifications-toggle {
border-bottom: var(--cr-separator-line);
min-height: var(--cr-section-min-height);
}
#your-device-hotspots-header {
color: var(--cros-text-color-primary);
font: var(--cros-button-1-font);
margin-bottom: 5px;
}
/* Set padding on children instead of the container itself to ensure that
separator lines can fill the entire width of the page. */
#networkListDiv > * {
/* network-list is padded to the right to allow space for a ripple */
padding-inline-end: calc(var(--cr-section-padding) -
var(--cr-icon-ripple-padding));
padding-inline-start: var(--cr-section-padding);
}
.add-button {
margin-inline-end: 20px;
}
.vpn-header {
margin-bottom: 8px;
margin-inline-end: 12px;
margin-inline-start: 4px;
margin-top: 8px;
}
.no-networks {
min-height: var(--cr-section-two-line-min-height);
}
network-list {
flex: 1;
}
network-always-on-vpn {
width: 100%;
}
#gmscore-notifications-container {
border-top: var(--cr-separator-line);
margin: 10px 0;
padding-bottom: var(--cr-section-padding);
padding-top: var(--cr-section-padding);
}
#gmscore-notifications-container[no-networks-text-below] {
border-bottom: var(--cr-separator-line);
margin-top: 0;
}
#gmscore-notifications-device-string {
margin-top: 5px;
}
#gmscore-notifications-instructions {
margin: 0;
padding-inline-start: 15px;
}
#cellularNetworkList {
padding-inline-end: 0;
padding-inline-start: 0;
}
</style>
<template is="dom-if" if="[[shouldShowBluetoothDisabledTetherErrorMessage_(deviceState)]]">
<div id="networkListDiv" class="layout horizontal center">
<localized-link
localized-string="[[getBluetoothDisabledErrorMessageForTether_()]]">
</localized-link>
</div>
</template>
<template is="dom-if" if="[[enableToggleIsVisible_(deviceState)]]">
<div class="settings-box first">
<div class="primary-toggle start" on$="[[deviceIsEnabled_(deviceState)]]"
aria-hidden="true">
[[getOffOnString_(deviceState,
'$i18nPolymer{deviceOn}', '$i18nPolymer{deviceOff}')]]
</div>
<!-- The add button in this row is only shown for WiFi networks. -->
<cr-icon-button class="icon-add-wifi add-button" id="addWifiButton"
hidden$="[[!showAddWifiButton_(deviceState, globalPolicy)]]"
aria-label="$i18n{internetAddWiFi}" on-click="onAddWifiButtonClick_"
tabindex$="[[tabindex]]"
deep-link-focus-id$="[[Setting.kWifiAddNetwork]]">
</cr-icon-button>
<cr-toggle id="deviceEnabledButton"
aria-label$="[[getToggleA11yString_(deviceState)]]"
checked="[[deviceIsEnabled_(deviceState)]]"
disabled="[[!enableToggleIsEnabled_(deviceState,
deviceState.inhibitReason)]]"
on-change="onDeviceEnabledChange_"
deep-link-focus-id$="[[Setting.kWifiOnOff]]
[[Setting.kMobileOnOff]]">
</cr-toggle>
</div>
</template>
<template is="dom-if" if="[[knownNetworksIsVisible_(deviceState)]]">
<cr-link-row
id="knownNetworksSubpageButton"
class="hr"
label="$i18n{knownNetworksButton}"
on-click="onKnownNetworksClick_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
</template>
<template is="dom-if" if="[[shouldShowTetherNotificationControl_(deviceState)]]">
<settings-toggle-button
id="instant-tether-notifications-toggle"
label="$i18n{internetTetherNotificationControlTitle}"
sub-label="$i18n{internetTetherNotificationControlDescription}"
pref="{{prefs.tether.notifications_enabled}}">
</settings-toggle-button>
</template>
<template is="dom-if" if="[[deviceIsEnabled_(deviceState)]]">
<div id="networkListDiv" class="layout vertical flex">
<!-- VPN only header for built-in VPNs. -->
<template is="dom-if" if="[[isShowingVpn_]]">
<div class="vpn-header layout horizontal center">
<div class="flex settings-box-text">$i18n{networkVpnBuiltin}</div>
<template is="dom-if" if="[[isBuiltInVpnManagementBlocked]]">
<cr-policy-indicator indicator-type="devicePolicy">
</cr-policy-indicator>
</template>
<cr-icon-button class="icon-add-circle"
id="addBuiltInVpnButton"
disabled="[[isBuiltInVpnManagementBlocked]]"
aria-label="$i18n{internetAddVPN}"
on-click="onAddVpnButtonClick_"
tabindex$="[[tabindex]]">
</cr-icon-button>
</div>
</template>
<!-- List of networks (empty if no networks exist). -->
<template is="dom-if"
if="[[shouldShowNetworkList_(networkStateList_, deviceState)]]">
<template is="dom-if" if="[[shouldShowTetherDeviceListHeader_(deviceState)]]">
<div id="your-device-hotspots-title">$i18n{internetYourDeviceHotspots}</div>
</template>
<network-list id="networkList" show-buttons
class="layout horizontal center"
is-built-in-vpn-management-blocked="[[isBuiltInVpnManagementBlocked]]"
show-technology-badge="[[showTechnologyBadge_]]"
networks="[[networkStateList_]]"
global-policy="[[globalPolicy]]"
on-selected="onNetworkSelected_"
device-state="[[deviceState]]">
</network-list>
</template>
<!-- List of cellular and instant tethering networks -->
<template is="dom-if"
if="[[shouldShowCellularNetworkList_(networkStateList_,
deviceState)]]">
<cellular-networks-list id="cellularNetworkList"
networks="[[networkStateList_]]"
show-technology-badge="[[showTechnologyBadge_]]"
on-selected="onNetworkSelected_"
cellular-device-state="[[deviceState]]"
tether-device-state="[[tetherDeviceState]]"
global-policy="[[globalPolicy]]"
is-connected-to-non-cellular-network="[[isConnectedToNonCellularNetwork]]"
can-show-spinner="[[!isCellularSetupActive]]">
</cellular-networks-list>
</template>
<!-- Instructions for how to enable "Google Play Services" notifications
(needed for Instant Tethering). -->
<template is="dom-if" if="[[showGmsCoreNotificationsSection_(
notificationsDisabledDeviceNames_)]]">
<div id="gmscore-notifications-container"
no-networks-text-below$="[[!networkStateList_.length]]">
<div>$i18n{gmscoreNotificationsTitle}</div>
<div id="gmscore-notifications-device-string"
class="cr-secondary-text">
[[getGmsCoreNotificationsDevicesString_(
notificationsDisabledDeviceNames_)]]
</div>
<ol id="gmscore-notifications-instructions"
class="cr-secondary-text">
<li>$i18n{gmscoreNotificationsFirstStep}</li>
<li>$i18n{gmscoreNotificationsSecondStep}</li>
<li>$i18n{gmscoreNotificationsThirdStep}</li>
<li>$i18n{gmscoreNotificationsFourthStep}</li>
</ol>
</div>
</template>
<!-- Text shown if no networks exist. -->
<template is="dom-if" if="[[!hideNoNetworksMessage_(networkStateList_, deviceState)]]">
<div class="layout horizontal center no-networks">
<localized-link
localized-string="[[getNoNetworksInnerHtml_(deviceState, tetherDeviceState)]]">
</localized-link>
</div>
</template>
<template is="dom-if" if="[[isShowingVpn_]]">
<!-- Third party VPNs. -->
<template is="dom-repeat"
items="[[getVpnProviders_(vpnProviders, thirdPartyVpns_)]]">
<div id="[[item.providerName]]"
class="vpn-header layout horizontal center">
<div class="flex settings-box-text">[[item.providerName]]</div>
<cr-icon-button class="icon-external"
aria-label$="[[getAddThirdPartyVpnA11yString_(item)]]"
on-click="onAddThirdPartyVpnClick_" tabindex$="[[tabindex]]">
</cr-icon-button>
</div>
<network-list show-buttons
hidden$="[[!haveThirdPartyVpnNetwork_(thirdPartyVpns_, item)]]"
networks="[[getThirdPartyVpnNetworks_(thirdPartyVpns_, item)]]"
on-selected="onNetworkSelected_">
</network-list>
</template>
</template>
</div>
<template is="dom-if"
if="[[shouldShowVpnPreferences_(isManaged_, isShowingVpn_)]]">
<div class="settings-box first">
<h2>$i18n{networkVpnPreferences}</h2>
</div>
<div class="settings-box first">
<network-always-on-vpn id="alwaysOnVpnSelector"
networks="[[getAlwaysOnVpnNetworks_(deviceState,
networkStateList_, thirdPartyVpns_)]]"
mode="{{alwaysOnVpnMode_}}"
service="{{alwaysOnVpnService_}}">
</network-always-on-vpn>
</div>
</template>
</template>
Codebase Browser
chromium