Commit 230c1b48 authored by stevenjb's avatar stevenjb Committed by Commit bot

MD Settings: Internet: Enable SIM unlock with no cellular network

This also fixes the keyboard navigation for network summary items.

BUG=609156
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
For trivial comment changes to extensions/common/api
TBR=rdevlin.cronin@chromium.org,

Review-Url: https://codereview.chromium.org/2303093003
Cr-Commit-Position: refs/heads/master@{#419088}
parent 66987714
...@@ -111,7 +111,10 @@ ...@@ -111,7 +111,10 @@
{ {
'target_name': 'network_summary_item', 'target_name': 'network_summary_item',
'dependencies': [ 'dependencies': [
'<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-a11y-keys-behavior/compiled_resources2.gyp:iron-a11y-keys-behavior-extracted',
'<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types', '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types',
'<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
'<(INTERFACES_GYP):networking_private_interface',
], ],
'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
}, },
......
...@@ -39,25 +39,30 @@ ...@@ -39,25 +39,30 @@
} }
iron-collapse { iron-collapse {
margin: 10px; margin: 10px 0;
} }
.settings-box.embedded { /* Use <span> for subtitles so as not to interfere with
-webkit-margin-start: 0; * settings-box:first-of-type. */
align-items: stretch; span.subtitle {
flex-direction: column; font-weight: 700;
justify-content: center; padding: 20px;
padding: 0; }
.advanced {
font-weight: 700;
}
.indented {
-webkit-margin-start: var(--settings-box-row-padding);
} }
.settings-box.stretch { .settings-box.stretch {
align-items: stretch; align-items: stretch;
} }
.subtitle { .settings-box:first-of-type {
-webkit-margin-start: 20px; border-top: none;
font-weight: 500;
padding: 20px 0;
} }
#buttonDiv paper-button { #buttonDiv paper-button {
...@@ -123,20 +128,23 @@ ...@@ -123,20 +128,23 @@
$i18n{networkShared} $i18n{networkShared}
</div> </div>
<!-- Top level properties --> <!-- Top level properties -->
<div class="settings-box continuation embedded"> <div class="layout vertical">
<!-- Prefer this network. --> <!-- Prefer this network. -->
<div class="settings-box" <template is="dom-if" if="[[showPreferNetwork_(networkProperties))]]">
hidden$="[[!showPreferNetwork_(networkProperties)]]"> <div class="settings-box">
<paper-checkbox checked="{{preferNetwork_}}" <paper-checkbox checked="{{preferNetwork_}}"
disabled="[[isNetworkPolicyEnforced(networkProperties.Priority)]]"> disabled="[[isNetworkPolicyEnforced(
networkProperties.Priority)]]">
$i18n{networkPrefer} $i18n{networkPrefer}
</paper-checkbox> </paper-checkbox>
<cr-policy-network-indicator property="[[networkProperties.Priority]]"> <cr-policy-network-indicator
property="[[networkProperties.Priority]]">
</cr-policy-network-indicator> </cr-policy-network-indicator>
</div> </div>
</template>
<!-- Autoconnect. --> <!-- Autoconnect. -->
<div class="settings-box" <template is="dom-if" if="[[showAutoConnect_(networkProperties)]]">
hidden$="[[!showAutoConnect_(networkProperties)]]"> <div class="settings-box">
<paper-checkbox checked="{{autoConnect_}}"> <paper-checkbox checked="{{autoConnect_}}">
$i18n{networkAutoConnect} $i18n{networkAutoConnect}
</paper-checkbox> </paper-checkbox>
...@@ -144,32 +152,38 @@ ...@@ -144,32 +152,38 @@
property="[[getManagedAutoConnect_(networkProperties)]]"> property="[[getManagedAutoConnect_(networkProperties)]]">
</cr-policy-network-indicator> </cr-policy-network-indicator>
</div> </div>
</template>
<!-- SIM Info (Cellular only). --> <!-- SIM Info (Cellular only). -->
<template is="dom-if" if="[[showCellularSim_(networkProperties)]]">
<div class="settings-box single-column stretch"> <div class="settings-box single-column stretch">
<network-siminfo <network-siminfo
editable on-siminfo-change="onNetworkPropertyChange_" editable on-siminfo-change="onNetworkPropertyChange_"
hidden$="[[!showCellularSim_(networkProperties)]]"
network-properties="[[networkProperties]]" network-properties="[[networkProperties]]"
networking-private="[[networkingPrivate]]"> networking-private="[[networkingPrivate]]">
</network-siminfo> </network-siminfo>
</div> </div>
</template>
<!-- IP Address. --> <!-- IP Address. -->
<div class="settings-box two-line single-column stretch" <template is="dom-if" if="[[IPAddress_]]">
hidden$="[[!IPAddress_]]"> <div class="settings-box two-line single-column stretch">
<div>$i18n{networkIPAddress}</div> <div>$i18n{networkIPAddress}</div>
<div class="secondary">[[IPAddress_]]</div> <div class="secondary">[[IPAddress_]]</div>
</div> </div>
</template>
<!-- Properties to always show if present. --> <!-- Properties to always show if present. -->
<network-property-list hidden$="[[!hasInfoFields_(networkProperties)]]" <template is="dom-if" if="[[hasInfoFields_(networkProperties)]]">
fields="[[getInfoFields_(networkProperties)]]" <div class="settings-box single-column stretch">
<network-property-list fields="[[getInfoFields_(networkProperties)]]"
property-dict="[[networkProperties]]"> property-dict="[[networkProperties]]">
</network-property-list> </network-property-list>
</div> </div>
</template>
</div>
<!-- Advanced toggle. --> <!-- Advanced toggle. -->
<div class="settings-box" actionable on-tap="toggleAdvancedExpanded_" <div class="settings-box" actionable on-tap="toggleAdvancedExpanded_"
hidden$="[[!hasAdvancedOrDeviceFields_(networkProperties)]]"> hidden$="[[!showAdvanced_(networkProperties)]]">
<div class="start">$i18n{networkSectionAdvanced}</div> <div class="advanced flex">$i18n{networkSectionAdvanced}</div>
<cr-expand-button id="expandButton" expanded="{{advancedExpanded_}}"> <cr-expand-button id="expandButton" expanded="{{advancedExpanded_}}">
</cr-expand-button> </cr-expand-button>
</div> </div>
...@@ -177,51 +191,50 @@ ...@@ -177,51 +191,50 @@
<!-- Advanced section --> <!-- Advanced section -->
<iron-collapse opened="[[advancedExpanded_]]"> <iron-collapse opened="[[advancedExpanded_]]">
<div class="layout vertical indented"> <div class="layout vertical indented">
<div class="settings-box single-column stretch">
<!-- Advanced properties --> <!-- Advanced properties -->
<network-property-list <network-property-list
hidden$="[[!hasAdvancedFields_(networkProperties)]]" hidden$="[[!hasAdvancedFields_(networkProperties)]]"
fields="[[getAdvancedFields_(networkProperties)]]" fields="[[getAdvancedFields_(networkProperties)]]"
property-dict="[[networkProperties]]"> property-dict="[[networkProperties]]">
</network-property-list> </network-property-list>
<!-- Device properties --> <!-- Device properties -->
<network-property-list <network-property-list
hidden$="[[!hasDeviceFields_(networkProperties)]]" hidden$="[[!hasDeviceFields_(networkProperties)]]"
fields="[[getDeviceFields_(networkProperties)]]" fields="[[getDeviceFields_(networkProperties)]]"
property-dict="[[networkProperties]]"> property-dict="[[networkProperties]]">
</network-property-list> </network-property-list>
</div>
<!-- network --> <!-- Network sub-section title -->
<div class="layout vertical" <div class="layout vertical"
hidden$="[[!hasNetworkSection_(networkProperties)]]"> hidden$="[[!hasNetworkSection_(networkProperties)]]">
<span class="subtitle">$i18n{networkSectionNetwork}</span>
</div>
<div class="subtitle">$i18n{networkSectionNetwork}</div>
<!-- APN --> <!-- APN -->
<template is="dom-if"
if="[[isType_(NetworkType_.CELLULAR, networkProperties)]]">
<network-apnlist editable on-apn-change="onNetworkPropertyChange_" <network-apnlist editable on-apn-change="onNetworkPropertyChange_"
hidden$="[[!isType_(NetworkType_.CELLULAR, networkProperties)]]"
network-properties="[[networkProperties]]"> network-properties="[[networkProperties]]">
</network-apnlist> </network-apnlist>
<!-- IP Config --> </template>
<!-- IP Config, Nameservers, Proxy -->
<template is="dom-if"
if="[[isRememberedOrConnected_(networkProperties)]]">
<network-ip-config editable on-ip-change="onIPConfigChange_" <network-ip-config editable on-ip-change="onIPConfigChange_"
hidden$="[[!isRememberedOrConnected_(networkProperties)]]"
network-properties="[[networkProperties]]"> network-properties="[[networkProperties]]">
</network-ip-config> </network-ip-config>
<!-- Nameservers -->
<network-nameservers editable <network-nameservers editable
on-nameservers-change="onIPConfigChange_" on-nameservers-change="onIPConfigChange_"
hidden$="[[!isRememberedOrConnected_(networkProperties)]]"
network-properties="[[networkProperties]]"> network-properties="[[networkProperties]]">
</network-nameservers> </network-nameservers>
</div> <span class="subtitle">$i18n{networkSectionProxy}</span>
<!-- Proxy -->
<div hidden$="[[!isRememberedOrConnected_(networkProperties)]]">
<div class="subtitle">$i18n{networkSectionProxy}</div>
<network-proxy editable on-proxy-change="onProxyChange_" <network-proxy editable on-proxy-change="onProxyChange_"
network-properties="[[networkProperties]]"> network-properties="[[networkProperties]]">
</network-proxy> </network-proxy>
</div> </template>
</div> </div>
</iron-collapse> </iron-collapse>
</template> </template>
......
...@@ -404,6 +404,9 @@ Polymer({ ...@@ -404,6 +404,9 @@ Polymer({
/** @private */ /** @private */
onForgetTap_: function() { onForgetTap_: function() {
this.networkingPrivate.forgetNetwork(this.guid); this.networkingPrivate.forgetNetwork(this.guid);
// A forgotten WiFi network can still be configured, but not other types.
if (this.networkProperties.Type != CrOnc.Type.WI_FI)
this.close_();
}, },
/** @private */ /** @private */
...@@ -678,8 +681,9 @@ Polymer({ ...@@ -678,8 +681,9 @@ Polymer({
* @return {boolean} * @return {boolean}
* @private * @private
*/ */
hasAdvancedOrDeviceFields_: function() { showAdvanced_: function() {
return this.hasAdvancedFields_() || this.hasDeviceFields_(); return this.hasAdvancedFields_() || this.hasDeviceFields_() ||
this.isRememberedOrConnected_();
}, },
/** /**
......
...@@ -13,10 +13,6 @@ ...@@ -13,10 +13,6 @@
margin-bottom: 0; margin-bottom: 0;
margin-top: -9px; margin-top: -9px;
} }
.indented {
-webkit-margin-start: 20px;
}
</style> </style>
</template> </template>
</dom-module> </dom-module>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<template> <template>
<style include="internet-shared"> <style include="internet-shared">
</style> </style>
<div class="settings-box"> <div class="settings-box first">
<div class="start">$i18n{networkSectionAccessPoint}</div> <div class="start">$i18n{networkSectionAccessPoint}</div>
<paper-dropdown-menu-light vertical-align="auto" no-label-float> <paper-dropdown-menu-light vertical-align="auto" no-label-float>
<paper-listbox id="selectApn" <paper-listbox id="selectApn"
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
edit-field-types="[[otherApnEditTypes_]]" prefix="Cellular.APN."> edit-field-types="[[otherApnEditTypes_]]" prefix="Cellular.APN.">
</network-property-list> </network-property-list>
<paper-button on-tap="onSaveOtherTap_"> <paper-button on-tap="onSaveOtherTap_">
${networkButtonSaveApn} $i18n{networkButtonSaveApn}
</paper-button> </paper-button>
</div> </div>
</template> </template>
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<template> <template>
<style include="internet-shared"> <style include="internet-shared">
</style> </style>
<div class="settings-box"> <div class="settings-box first">
<paper-checkbox checked="{{automatic_}}" disabled="[[!editable]]"> <paper-checkbox checked="{{automatic_}}" disabled="[[!editable]]">
$i18n{networkIPConfigAuto} $i18n{networkIPConfigAuto}
</paper-checkbox> </paper-checkbox>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<template> <template>
<style include="internet-shared"> <style include="internet-shared">
</style> </style>
<div class="settings-box"> <div class="settings-box first">
<div class="start">$i18n{networkSectionNameservers}</div> <div class="start">$i18n{networkSectionNameservers}</div>
<paper-dropdown-menu-light vertical-align="auto" no-label-float> <paper-dropdown-menu-light vertical-align="auto" no-label-float>
<paper-listbox class="dropdown-content" on-iron-activate="onTypeChange_" <paper-listbox class="dropdown-content" on-iron-activate="onTypeChange_"
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</paper-dropdown-menu-light> </paper-dropdown-menu-light>
</div> </div>
<div class="settings-box continuation single-column indented" <div class="settings-box continuation single-column"
hidden$="[[!nameservers_.length]]"> hidden$="[[!nameservers_.length]]">
<template is="dom-repeat" items="[[nameservers_]]"> <template is="dom-repeat" items="[[nameservers_]]">
<paper-input-container no-label-float> <paper-input-container no-label-float>
......
...@@ -13,10 +13,20 @@ ...@@ -13,10 +13,20 @@
margin-bottom: -12px; margin-bottom: -12px;
margin-top: -8px; margin-top: -8px;
} }
/* Property lists are embedded; stretch the box and remove the padding. */
.settings-box {
align-items: stretch;
padding: 0;
}
.settings-box:first-of-type {
border-top: none;
}
</style> </style>
<template is="dom-repeat" items="[[fields]]" <template is="dom-repeat" items="[[fields]]"
filter="[[computeFilter_(propertyDict, editFieldTypes)]]"> filter="[[computeFilter_(propertyDict, editFieldTypes)]]">
<div class="settings-box single-column"> <div class="settings-box single-column two-line">
<!-- Propety label --> <!-- Propety label -->
<div>[[getPropertyLabel_(item, prefix)]]</div> <div>[[getPropertyLabel_(item, prefix)]]</div>
<!-- Uneditable property value --> <!-- Uneditable property value -->
......
...@@ -23,6 +23,11 @@ ...@@ -23,6 +23,11 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
/* Use .middle spacing but no flex. */
.settings-box .middle {
flex: none;
}
#exceptionsDiv { #exceptionsDiv {
padding: 10px 0; padding: 10px 0;
} }
...@@ -63,10 +68,10 @@ ...@@ -63,10 +68,10 @@
</div> </div>
<!-- Autoconfiguration (PAC) --> <!-- Autoconfiguration (PAC) -->
<div class="settings-box continuation indented" <div class="settings-box continuation"
hidden$="[[!matches_(proxy.Type, ProxySettingsType_.PAC)]]"> hidden$="[[!matches_(proxy.Type, ProxySettingsType_.PAC)]]">
<div class="start">$i18n{networkProxyAutoConfig}</div> <div>$i18n{networkProxyAutoConfig}</div>
<paper-input no-label-float class="flex" value="{{proxy.PAC}}" <paper-input no-label-float class="middle" value="{{proxy.PAC}}"
disabled="[[isNetworkPolicyEnforced( disabled="[[isNetworkPolicyEnforced(
networkProperties.ProxySettings.PAC)]]" networkProperties.ProxySettings.PAC)]]"
on-blur="onProxyInputChange_"> on-blur="onProxyInputChange_">
...@@ -74,14 +79,14 @@ ...@@ -74,14 +79,14 @@
</div> </div>
<!-- Web Proxy Auto Discovery (WPAD) --> <!-- Web Proxy Auto Discovery (WPAD) -->
<div class="settings-box continuation indented" <div class="settings-box continuation"
hidden$="[[!matches_(proxy.Type, ProxySettingsType_.WPAD)]]"> hidden$="[[!matches_(proxy.Type, ProxySettingsType_.WPAD)]]">
<div class="start">$i18n{networkSectionWpad}</div> <div>$i18n{networkSectionWpad}</div>
<div>[[WPAD]]</div> <div class="middle">[[WPAD]]</div>
</div> </div>
<!-- Manual --> <!-- Manual -->
<div id="proxyDiv" class="settings-box continuation single-column indented" <div id="proxyDiv" class="settings-box continuation single-column"
hidden$="[[!matches_(proxy.Type, ProxySettingsType_.MANUAL)]]"> hidden$="[[!matches_(proxy.Type, ProxySettingsType_.MANUAL)]]">
<paper-checkbox checked="{{useSameProxy_}}"> <paper-checkbox checked="{{useSameProxy_}}">
$i18n{networkProxyUseSame} $i18n{networkProxyUseSame}
......
...@@ -13,8 +13,6 @@ ...@@ -13,8 +13,6 @@
#container { #container {
align-self: stretch; align-self: stretch;
border: 1px solid lightgrey; border: 1px solid lightgrey;
display: flex;
flex-direction: column;
height: 100px; height: 100px;
margin-top: 10px; margin-top: 10px;
overflow-y: auto; overflow-y: auto;
...@@ -23,10 +21,11 @@ ...@@ -23,10 +21,11 @@
</style> </style>
<div id="container"> <div id="container">
<template is="dom-repeat" items="[[exclusions]]"> <template is="dom-repeat" items="[[exclusions]]">
<div class="layout horizontal center"> <div class="layout horizontal center" tabindex="0" >
<div class="flex">[[item]]</div> <div class="flex">[[item]]</div>
<iron-icon class="favicon-image" icon="cr:clear" <iron-icon class="favicon-image" icon="cr:clear"
on-tap="onRemoveTap_"></iron-icon> on-tap="onRemoveTap_" tabindex="0">
</iron-icon>
</div> </div>
</template> </template>
</div> </div>
......
...@@ -35,10 +35,19 @@ ...@@ -35,10 +35,19 @@
.puk { .puk {
min-width: 200px; min-width: 200px;
} }
/* Siminfo is embedded; remove the padding. */
.settings-box {
padding: 0;
}
.settings-box:first-of-type {
border-top: none;
}
</style> </style>
<!-- SIM missing UI --> <!-- SIM missing UI -->
<div class="settings-box" <div class="settings-box two-line"
hidden$="[[networkProperties.Cellular.SIMPresent]]"> hidden$="[[networkProperties.Cellular.SIMPresent]]">
<div class="start layout horizontal center"> <div class="start layout horizontal center">
<iron-icon icon="settings:sim-card-alert"></iron-icon> <iron-icon icon="settings:sim-card-alert"></iron-icon>
...@@ -47,7 +56,8 @@ ...@@ -47,7 +56,8 @@
</div> </div>
<!-- SIM locked --> <!-- SIM locked -->
<div class="settings-box" hidden$="[[!showSimLocked_(networkProperties)]]"> <div class="settings-box two-line"
hidden$="[[!showSimLocked_(networkProperties)]]">
<div class="start layout horizontal center"> <div class="start layout horizontal center">
<iron-icon icon="settings:lock"></iron-icon> <iron-icon icon="settings:lock"></iron-icon>
<div class="error">$i18n{networkSimCardLocked}</div> <div class="error">$i18n{networkSimCardLocked}</div>
...@@ -60,7 +70,7 @@ ...@@ -60,7 +70,7 @@
</div> </div>
<!-- SIM unlocked --> <!-- SIM unlocked -->
<div class="settings-box" <div class="settings-box two-line"
hidden$="[[!showSimUnlocked_(networkProperties)]]"> hidden$="[[!showSimUnlocked_(networkProperties)]]">
<paper-checkbox class="start" on-change="onSimLockEnabledChange_" <paper-checkbox class="start" on-change="onSimLockEnabledChange_"
checked="[[networkProperties.Cellular.SIMLockStatus.LockEnabled]]"> checked="[[networkProperties.Cellular.SIMLockStatus.LockEnabled]]">
......
...@@ -123,10 +123,7 @@ Polymer({ ...@@ -123,10 +123,7 @@ Polymer({
* @private * @private
*/ */
sendEnterPin_: function(event) { sendEnterPin_: function(event) {
var guid = this.networkProperties && this.networkProperties.GUID; var guid = (this.networkProperties && this.networkProperties.GUID) || '';
if (!guid)
return;
var pin = this.$.enterPin.value; var pin = this.$.enterPin.value;
if (!this.validatePin_(pin)) if (!this.validatePin_(pin))
return; return;
...@@ -167,10 +164,7 @@ Polymer({ ...@@ -167,10 +164,7 @@ Polymer({
* @private * @private
*/ */
sendChangePin_: function(event) { sendChangePin_: function(event) {
var guid = this.networkProperties && this.networkProperties.GUID; var guid = (this.networkProperties && this.networkProperties.GUID) || '';
if (!guid)
return;
var newPin = this.$.changePinNew1.value; var newPin = this.$.changePinNew1.value;
if (!this.validatePin_(newPin, this.$.changePinNew2.value)) if (!this.validatePin_(newPin, this.$.changePinNew2.value))
return; return;
...@@ -208,9 +202,7 @@ Polymer({ ...@@ -208,9 +202,7 @@ Polymer({
* @private * @private
*/ */
sendUnlockPin_: function(event) { sendUnlockPin_: function(event) {
var guid = this.networkProperties && this.networkProperties.GUID; var guid = (this.networkProperties && this.networkProperties.GUID) || '';
if (!guid)
return;
var pin = this.$.unlockPin.value; var pin = this.$.unlockPin.value;
if (!this.validatePin_(pin)) if (!this.validatePin_(pin))
return; return;
...@@ -245,10 +237,7 @@ Polymer({ ...@@ -245,10 +237,7 @@ Polymer({
* @private * @private
*/ */
sendUnlockPuk_: function(event) { sendUnlockPuk_: function(event) {
var guid = this.networkProperties && this.networkProperties.GUID; var guid = (this.networkProperties && this.networkProperties.GUID) || '';
if (!guid)
return;
var puk = this.$.unlockPuk.value; var puk = this.$.unlockPuk.value;
if (!this.validatePuk_(puk)) if (!this.validatePuk_(puk))
return; return;
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
active-network-state="[[item]]" active-network-state="[[item]]"
device-state="[[get(item.Type, deviceStates_)]]" device-state="[[get(item.Type, deviceStates_)]]"
network-state-list="[[get(item.Type, networkStateLists_)]]" network-state-list="[[get(item.Type, networkStateLists_)]]"
networking-private="[[networkingPrivate]]"
on-expanded="onExpanded_" on-expanded="onExpanded_"
on-selected="onSelected_" on-selected="onSelected_"
on-device-enabled-toggled="onDeviceEnabledToggled_"> on-device-enabled-toggled="onDeviceEnabledToggled_">
......
<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_network_list.html"> <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_network_list_item.html"> <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list_item.html">
<link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="/settings_shared_css.html"> <link rel="import" href="/settings_shared_css.html">
<link rel="import" href="network_siminfo.html">
<dom-module name="network-summary-item"> <dom-module name="network-summary-item">
<template> <template>
<style include="settings-shared"> <style include="settings-shared">
paper-spinner { paper-spinner {
height: 20px; height: 20px;
margin: 0 20px; margin: 0 var(--settings-box-row-padding);
width: 20px; width: 20px;
} }
network-siminfo {
padding: 0 var(--settings-box-row-padding);
}
.button-row { .button-row {
align-items: center; align-items: center;
display: flex; display: flex;
...@@ -27,6 +34,16 @@ ...@@ -27,6 +34,16 @@
align-items: center; align-items: center;
} }
#details {
align-items: center;
display: flex;
flex: auto;
}
#details[no-flex] {
flex: none;
}
#deviceEnabledButton { #deviceEnabledButton {
-webkit-margin-start: 10px; -webkit-margin-start: 10px;
} }
...@@ -37,15 +54,30 @@ ...@@ -37,15 +54,30 @@
} }
</style> </style>
<div class="settings-box two-line"> <div class="settings-box two-line">
<div id="details" actionable class="start layout horizontal center" <div id="details" selectable
on-tap="onDetailsTap_"> no-flex$="[[showSimInfo_(deviceState)]]"
<cr-network-list-item class="flex" item="[[activeNetworkState]]"> on-tap="onDetailsTap_" tabindex$="[[getTabIndex_(deviceState)]]">
<cr-network-list-item item="[[activeNetworkState]]">
</cr-network-list-item> </cr-network-list-item>
<paper-spinner active="[[showScanning_(deviceState, expanded_)]]"> <paper-spinner active="[[scanningIsActive_(deviceState, expanded_)]]"
hidden$="[[!scanningIsVisible_(deviceState)]]">
</paper-spinner> </paper-spinner>
</div> </div>
<template is="dom-if" if="[[showSimInfo_(deviceState)]]">
<network-siminfo editable class="flex"
network-properties="[[getCellularState_(deviceState)]]"
networking-private="[[networkingPrivate]]">
</network-siminfo>
</template>
<div> <div>
<div id="buttons" class="layout horizontal"> <div id="buttons" class="layout horizontal">
<template is="dom-if"
if="[[showDetailsIsVisible_(deviceState, networkStateList)]]">
<paper-icon-button icon="cr:settings" on-tap="onShowDetailsTap_">
</paper-icon-button>
</template>
<template is="dom-if" <template is="dom-if"
if="[[expandIsVisible_(deviceState, networkStateList)]]"> if="[[expandIsVisible_(deviceState, networkStateList)]]">
<cr-expand-button id="expandListButton" expanded="{{expanded_}}"> <cr-expand-button id="expandListButton" expanded="{{expanded_}}">
......
...@@ -13,6 +13,8 @@ var DeviceStateProperties; ...@@ -13,6 +13,8 @@ var DeviceStateProperties;
Polymer({ Polymer({
is: 'network-summary-item', is: 'network-summary-item',
behaviors: [Polymer.IronA11yKeysBehavior],
properties: { properties: {
/** /**
* Device state for the network type. * Device state for the network type.
...@@ -27,10 +29,7 @@ Polymer({ ...@@ -27,10 +29,7 @@ Polymer({
* Network state for the active network. * Network state for the active network.
* @type {!CrOnc.NetworkStateProperties|undefined} * @type {!CrOnc.NetworkStateProperties|undefined}
*/ */
activeNetworkState: { activeNetworkState: Object,
type: Object,
observer: 'activeNetworkStateChanged_',
},
/** /**
* List of all network state data for the network type. * List of all network state data for the network type.
...@@ -41,7 +40,6 @@ Polymer({ ...@@ -41,7 +40,6 @@ Polymer({
value: function() { value: function() {
return []; return [];
}, },
observer: 'networkStateListChanged_',
}, },
/** The maximum height in pixels for the list of networks. */ /** The maximum height in pixels for the list of networks. */
...@@ -50,6 +48,12 @@ Polymer({ ...@@ -50,6 +48,12 @@ Polymer({
value: 200, value: 200,
}, },
/**
* Interface for networkingPrivate calls, passed from internet_page.
* @type {!NetworkingPrivate}
*/
networkingPrivate: Object,
/** /**
* The expanded state of the list of networks. * The expanded state of the list of networks.
* @private * @private
...@@ -71,6 +75,10 @@ Polymer({ ...@@ -71,6 +75,10 @@ Polymer({
}, },
}, },
keyBindings: {
'enter': 'onDetailsTap_',
},
/** @private */ /** @private */
expandedChanged_: function() { expandedChanged_: function() {
var type = this.deviceState ? this.deviceState.Type : ''; var type = this.deviceState ? this.deviceState.Type : '';
...@@ -79,27 +87,60 @@ Polymer({ ...@@ -79,27 +87,60 @@ Polymer({
/** @private */ /** @private */
deviceStateChanged_: function() { deviceStateChanged_: function() {
this.updateSelectable_();
if (this.expanded_ && !this.deviceIsEnabled_()) if (this.expanded_ && !this.deviceIsEnabled_())
this.expanded_ = false; this.expanded_ = false;
}, },
/** @private */ /**
activeNetworkStateChanged_: function() { * @return {boolean} Whether or not the scanning spinner should be visible.
this.updateSelectable_(); * @private
*/
scanningIsVisible_: function() {
return this.deviceState.Type == CrOnc.Type.WI_FI;
}, },
/** @private */ /**
networkStateListChanged_: function() { * @return {boolean} Whether or not the scanning spinner should be active.
this.updateSelectable_(); * @private
*/
scanningIsActive_: function() {
return !!this.expanded_ && !!this.deviceState.Scanning;
}, },
/** /**
* @return {boolean} Whether or not the scanning spinner should be shown. * Show the <network-siminfo> element if this is a disabled and locked
* cellular device.
* @return {boolean}
* @private * @private
*/ */
showScanning_: function() { showSimInfo_: function() {
return !!this.expanded_ && !!this.deviceState.Scanning; let device = this.deviceState;
if (device.Type != CrOnc.Type.CELLULAR || this.deviceIsEnabled_())
return false;
return device.SimPresent === false ||
device.SimLockType == CrOnc.LockType.PIN ||
device.SimLockType == CrOnc.LockType.PUK;
},
/**
* Returns a NetworkProperties object for <network-siminfo> built from
* the device properties (since there will be no active network).
* @return {!CrOnc.NetworkProperties}
* @private
*/
getCellularState_: function() {
let device = this.deviceState;
return {
GUID: '',
Type: CrOnc.Type.CELLULAR,
Cellular: {
SIMLockStatus: {
LockType: device.SimLockType || '',
LockEnabled: device.SimLockType != CrOnc.LockType.NONE,
},
SIMPresent: device.SimPresent,
},
};
}, },
/** /**
...@@ -144,10 +185,19 @@ Polymer({ ...@@ -144,10 +185,19 @@ Polymer({
* @private * @private
*/ */
enableIsVisible_: function() { enableIsVisible_: function() {
return !!this.deviceState && this.deviceState.Type != CrOnc.Type.ETHERNET && return this.deviceState.Type != CrOnc.Type.ETHERNET &&
this.deviceState.Type != CrOnc.Type.VPN; this.deviceState.Type != CrOnc.Type.VPN;
}, },
/**
* @return {boolean}
* @private
*/
showDetailsIsVisible_: function() {
return this.deviceState.Type == CrOnc.Type.CELLULAR &&
this.networkStateList.length == 1;
},
/** /**
* @return {boolean} Whether or not to show the UI to expand the list. * @return {boolean} Whether or not to show the UI to expand the list.
* @private * @private
...@@ -155,7 +205,9 @@ Polymer({ ...@@ -155,7 +205,9 @@ Polymer({
expandIsVisible_: function() { expandIsVisible_: function() {
if (!this.deviceIsEnabled_()) if (!this.deviceIsEnabled_())
return false; return false;
var minLength = (this.deviceState.Type == CrOnc.Type.WI_FI) ? 1 : 2; let type = this.deviceState.Type;
var minLength =
(type == CrOnc.Type.WI_FI || type == CrOnc.Type.VPN) ? 1 : 2;
return this.networkStateList.length >= minLength; return this.networkStateList.length >= minLength;
}, },
...@@ -169,12 +221,12 @@ Polymer({ ...@@ -169,12 +221,12 @@ Polymer({
}, },
/** /**
* Event triggered when the details div is tapped. * Event triggered when the details div is tapped or Enter is pressed.
* @param {Event} event The enable button event. * @param {!Event} event The enable button event.
* @private * @private
*/ */
onDetailsTap_: function(event) { onDetailsTap_: function(event) {
if ((event.target.id == 'expandListButton') || if ((event.target && event.target.id == 'expandListButton') ||
(this.deviceState && !this.deviceIsEnabled_())) { (this.deviceState && !this.deviceIsEnabled_())) {
// Already handled or disabled, do nothing. // Already handled or disabled, do nothing.
return; return;
...@@ -188,6 +240,17 @@ Polymer({ ...@@ -188,6 +240,17 @@ Polymer({
this.fire('selected', this.activeNetworkState); this.fire('selected', this.activeNetworkState);
}, },
/**
* @param {!Event} event The enable button event.
* @private
*/
onShowDetailsTap_: function(event) {
if (!this.activeNetworkState.GUID)
return;
this.fire('show-detail', this.activeNetworkState);
event.stopPropagation();
},
/** /**
* Event triggered when the known networks button is tapped. * Event triggered when the known networks button is tapped.
* @private * @private
...@@ -211,11 +274,10 @@ Polymer({ ...@@ -211,11 +274,10 @@ Polymer({
}, },
/** /**
* Called whenever the 'selectable' state might change. * @return {string}
* @private * @private
*/ */
updateSelectable_: function() { getTabIndex_: function() {
var selectable = this.deviceIsEnabled_(); return this.deviceIsEnabled_() ? '0' : '-1';
this.$.details.classList.toggle('selectable', selectable);
}, },
}); });
...@@ -262,7 +262,7 @@ ...@@ -262,7 +262,7 @@
border-top: var(--settings-separator-line); border-top: var(--settings-separator-line);
display: flex; display: flex;
min-height: var(--settings-row-min-height); min-height: var(--settings-row-min-height);
padding: 0 20px; padding: 0 var(--settings-box-row-padding);
} }
/* We use an explicit tag to remove the top border, rather than a /* We use an explicit tag to remove the top border, rather than a
......
...@@ -14,11 +14,12 @@ ...@@ -14,11 +14,12 @@
--settings-actionable: var(--cr-actionable); --settings-actionable: var(--cr-actionable);
--settings-background-color: rgb(241, 241, 241); --settings-background-color: rgb(241, 241, 241);
--settings-box-row-padding: 20px;
--settings-disabled-opacity: .65; --settings-disabled-opacity: .65;
--settings-error-color: var(--paper-red-700); --settings-error-color: var(--paper-red-700);
--settings-list-frame-padding: { --settings-list-frame-padding: {
-webkit-padding-end: 20px; -webkit-padding-end: var(--settings-box-row-padding);
-webkit-padding-start: 56px; -webkit-padding-start: 56px;
padding-bottom: 0; padding-bottom: 0;
padding-top: 0; padding-top: 0;
......
...@@ -36,7 +36,6 @@ ...@@ -36,7 +36,6 @@
#include "extensions/common/permissions/permissions_data.h" #include "extensions/common/permissions/permissions_data.h"
#include "third_party/cros_system_api/dbus/service_constants.h" #include "third_party/cros_system_api/dbus/service_constants.h"
using chromeos::DeviceState;
using chromeos::NetworkHandler; using chromeos::NetworkHandler;
using chromeos::NetworkStateHandler; using chromeos::NetworkStateHandler;
using chromeos::NetworkTypePattern; using chromeos::NetworkTypePattern;
...@@ -93,7 +92,7 @@ bool GetPrimaryUserIdHash(content::BrowserContext* browser_context, ...@@ -93,7 +92,7 @@ bool GetPrimaryUserIdHash(content::BrowserContext* browser_context,
void AppendDeviceState( void AppendDeviceState(
const std::string& type, const std::string& type,
const DeviceState* device, const chromeos::DeviceState* device,
NetworkingPrivateDelegate::DeviceStateList* device_state_list) { NetworkingPrivateDelegate::DeviceStateList* device_state_list) {
DCHECK(!type.empty()); DCHECK(!type.empty());
NetworkTypePattern pattern = NetworkTypePattern pattern =
...@@ -199,6 +198,22 @@ base::DictionaryValue* GetThirdPartyVPNDictionary( ...@@ -199,6 +198,22 @@ base::DictionaryValue* GetThirdPartyVPNDictionary(
return third_party_vpn; return third_party_vpn;
} }
const chromeos::DeviceState* GetCellularDeviceState(const std::string& guid) {
const chromeos::NetworkState* network_state = nullptr;
if (!guid.empty())
network_state = GetStateHandler()->GetNetworkStateFromGuid(guid);
const chromeos::DeviceState* device_state = nullptr;
if (network_state) {
device_state =
GetStateHandler()->GetDeviceState(network_state->device_path());
}
if (!device_state) {
device_state =
GetStateHandler()->GetDeviceStateByType(NetworkTypePattern::Cellular());
}
return device_state;
}
} // namespace } // namespace
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
...@@ -484,14 +499,7 @@ void NetworkingPrivateChromeOS::UnlockCellularSim( ...@@ -484,14 +499,7 @@ void NetworkingPrivateChromeOS::UnlockCellularSim(
const std::string& puk, const std::string& puk,
const VoidCallback& success_callback, const VoidCallback& success_callback,
const FailureCallback& failure_callback) { const FailureCallback& failure_callback) {
const chromeos::NetworkState* network_state = const chromeos::DeviceState* device_state = GetCellularDeviceState(guid);
GetStateHandler()->GetNetworkStateFromGuid(guid);
if (!network_state) {
failure_callback.Run(networking_private::kErrorNetworkUnavailable);
return;
}
const chromeos::DeviceState* device_state =
GetStateHandler()->GetDeviceState(network_state->device_path());
if (!device_state) { if (!device_state) {
failure_callback.Run(networking_private::kErrorNetworkUnavailable); failure_callback.Run(networking_private::kErrorNetworkUnavailable);
return; return;
...@@ -522,14 +530,7 @@ void NetworkingPrivateChromeOS::SetCellularSimState( ...@@ -522,14 +530,7 @@ void NetworkingPrivateChromeOS::SetCellularSimState(
const std::string& new_pin, const std::string& new_pin,
const VoidCallback& success_callback, const VoidCallback& success_callback,
const FailureCallback& failure_callback) { const FailureCallback& failure_callback) {
const chromeos::NetworkState* network_state = const chromeos::DeviceState* device_state = GetCellularDeviceState(guid);
GetStateHandler()->GetNetworkStateFromGuid(guid);
if (!network_state) {
failure_callback.Run(networking_private::kErrorNetworkUnavailable);
return;
}
const chromeos::DeviceState* device_state =
GetStateHandler()->GetDeviceState(network_state->device_path());
if (!device_state) { if (!device_state) {
failure_callback.Run(networking_private::kErrorNetworkUnavailable); failure_callback.Run(networking_private::kErrorNetworkUnavailable);
return; return;
...@@ -574,7 +575,7 @@ NetworkingPrivateChromeOS::GetDeviceStateList() { ...@@ -574,7 +575,7 @@ NetworkingPrivateChromeOS::GetDeviceStateList() {
NetworkHandler::Get()->network_state_handler()->GetDeviceList(&devices); NetworkHandler::Get()->network_state_handler()->GetDeviceList(&devices);
std::unique_ptr<DeviceStateList> device_state_list(new DeviceStateList); std::unique_ptr<DeviceStateList> device_state_list(new DeviceStateList);
for (const DeviceState* device : devices) { for (const chromeos::DeviceState* device : devices) {
std::string onc_type = std::string onc_type =
chromeos::network_util::TranslateShillTypeToONC(device->type()); chromeos::network_util::TranslateShillTypeToONC(device->type());
AppendDeviceState(onc_type, device, device_state_list.get()); AppendDeviceState(onc_type, device, device_state_list.get());
......
...@@ -1009,6 +1009,7 @@ namespace networkingPrivate { ...@@ -1009,6 +1009,7 @@ namespace networkingPrivate {
// operation succeeds (|puk| is valid), the PIN will be set to |pin|. // operation succeeds (|puk| is valid), the PIN will be set to |pin|.
// (If |pin| is empty or invalid the operation will fail). // (If |pin| is empty or invalid the operation will fail).
// |networkGuid|: The GUID of the cellular network to unlock. // |networkGuid|: The GUID of the cellular network to unlock.
// If empty, the default cellular device will be used.
// |pin|: The current SIM PIN, or the new PIN if PUK is provided. // |pin|: The current SIM PIN, or the new PIN if PUK is provided.
// |puk|: The operator provided PUK for unblocking a blocked SIM. // |puk|: The operator provided PUK for unblocking a blocked SIM.
// |callback|: Called when the operation has completed. // |callback|: Called when the operation has completed.
...@@ -1025,6 +1026,7 @@ namespace networkingPrivate { ...@@ -1025,6 +1026,7 @@ namespace networkingPrivate {
// unlocked with unlockCellularSim() before this can be called (otherwise it // unlocked with unlockCellularSim() before this can be called (otherwise it
// will fail and chrome.runtime.lastError will be set to Error.SimLocked). // will fail and chrome.runtime.lastError will be set to Error.SimLocked).
// |networkGuid|: The GUID of the cellular network to set the SIM state of. // |networkGuid|: The GUID of the cellular network to set the SIM state of.
// If empty, the default cellular device will be used.
// |simState|: The SIM state to set. // |simState|: The SIM state to set.
// |callback|: Called when the operation has completed. // |callback|: Called when the operation has completed.
static void setCellularSimState(DOMString networkGuid, static void setCellularSimState(DOMString networkGuid,
......
...@@ -61,7 +61,8 @@ ...@@ -61,7 +61,8 @@
@apply(--cr-actionable); @apply(--cr-actionable);
} }
[selectable] :focus { [selectable]:focus,
[selectable] > :focus {
@apply(--cr-selectable-focus); @apply(--cr-selectable-focus);
} }
[selectable] > * { [selectable] > * {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment