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}

chrome/browser/resources/settings/internet_page/compiled_resources2.gyp

@@ -111,7 +111,10 @@
     {
       'target_name': 'network_summary_item',
       '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/js/compiled_resources2.gyp:assert',
+        '<(INTERFACES_GYP):networking_private_interface',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },

chrome/browser/resources/settings/internet_page/internet_detail_page.html

@@ -39,25 +39,30 @@
       }
 
       iron-collapse {
-        margin: 10px;
+        margin: 10px 0;
       }
 
-      .settings-box.embedded {
-        -webkit-margin-start: 0;
-        align-items: stretch;
-        flex-direction: column;
-        justify-content: center;
-        padding: 0;
+      /* Use <span> for subtitles so as not to interfere with
+       * settings-box:first-of-type. */
+      span.subtitle {
+        font-weight: 700;
+        padding: 20px;
+      }
+
+      .advanced {
+        font-weight: 700;
+      }
+
+      .indented {
+        -webkit-margin-start: var(--settings-box-row-padding);
       }
 
       .settings-box.stretch {
         align-items: stretch;
       }
 
-      .subtitle {
-        -webkit-margin-start: 20px;
-        font-weight: 500;
-        padding: 20px 0;
+      .settings-box:first-of-type {
+        border-top: none;
       }
 
       #buttonDiv paper-button {
@@ -123,20 +128,23 @@
       $i18n{networkShared}
     </div>
     <!-- Top level properties -->
-    <div class="settings-box continuation embedded">
+    <div class="layout vertical">
       <!-- Prefer this network. -->
-      <div class="settings-box"
-          hidden$="[[!showPreferNetwork_(networkProperties)]]">
+      <template is="dom-if" if="[[showPreferNetwork_(networkProperties))]]">
+        <div class="settings-box">
           <paper-checkbox checked="{{preferNetwork_}}"
-            disabled="[[isNetworkPolicyEnforced(networkProperties.Priority)]]">
+              disabled="[[isNetworkPolicyEnforced(
+                  networkProperties.Priority)]]">
             $i18n{networkPrefer}
           </paper-checkbox>
-        <cr-policy-network-indicator property="[[networkProperties.Priority]]">
+          <cr-policy-network-indicator
+              property="[[networkProperties.Priority]]">
           </cr-policy-network-indicator>
         </div>
+      </template>
       <!-- Autoconnect. -->
-      <div class="settings-box"
-          hidden$="[[!showAutoConnect_(networkProperties)]]">
+      <template is="dom-if" if="[[showAutoConnect_(networkProperties)]]">
+        <div class="settings-box">
           <paper-checkbox checked="{{autoConnect_}}">
             $i18n{networkAutoConnect}
           </paper-checkbox>
@@ -144,32 +152,38 @@
               property="[[getManagedAutoConnect_(networkProperties)]]">
           </cr-policy-network-indicator>
         </div>
+      </template>
       <!-- SIM Info (Cellular only). -->
+      <template is="dom-if" if="[[showCellularSim_(networkProperties)]]">
         <div class="settings-box single-column stretch">
           <network-siminfo
               editable on-siminfo-change="onNetworkPropertyChange_"
-            hidden$="[[!showCellularSim_(networkProperties)]]"
               network-properties="[[networkProperties]]"
               networking-private="[[networkingPrivate]]">
           </network-siminfo>
         </div>
+      </template>
       <!-- IP Address. -->
-      <div class="settings-box two-line single-column stretch"
-           hidden$="[[!IPAddress_]]">
+      <template is="dom-if" if="[[IPAddress_]]">
+        <div class="settings-box two-line single-column stretch">
           <div>$i18n{networkIPAddress}</div>
           <div class="secondary">[[IPAddress_]]</div>
         </div>
+      </template>
       <!-- Properties to always show if present. -->
-      <network-property-list hidden$="[[!hasInfoFields_(networkProperties)]]"
-          fields="[[getInfoFields_(networkProperties)]]"
+      <template is="dom-if" if="[[hasInfoFields_(networkProperties)]]">
+        <div class="settings-box single-column stretch">
+          <network-property-list fields="[[getInfoFields_(networkProperties)]]"
               property-dict="[[networkProperties]]">
           </network-property-list>
         </div>
+      </template>
+    </div>
 
     <!-- Advanced toggle. -->
     <div class="settings-box" actionable on-tap="toggleAdvancedExpanded_"
-        hidden$="[[!hasAdvancedOrDeviceFields_(networkProperties)]]">
-      <div class="start">$i18n{networkSectionAdvanced}</div>
+        hidden$="[[!showAdvanced_(networkProperties)]]">
+      <div class="advanced flex">$i18n{networkSectionAdvanced}</div>
       <cr-expand-button id="expandButton" expanded="{{advancedExpanded_}}">
       </cr-expand-button>
     </div>
@@ -177,51 +191,50 @@
     <!-- Advanced section -->
     <iron-collapse opened="[[advancedExpanded_]]">
       <div class="layout vertical indented">
+        <div class="settings-box single-column stretch">
           <!-- Advanced properties -->
           <network-property-list
               hidden$="[[!hasAdvancedFields_(networkProperties)]]"
               fields="[[getAdvancedFields_(networkProperties)]]"
               property-dict="[[networkProperties]]">
           </network-property-list>
-
           <!-- Device properties -->
           <network-property-list
               hidden$="[[!hasDeviceFields_(networkProperties)]]"
               fields="[[getDeviceFields_(networkProperties)]]"
               property-dict="[[networkProperties]]">
           </network-property-list>
+        </div>
 
-        <!-- network -->
+        <!-- Network sub-section title -->
         <div class="layout vertical"
             hidden$="[[!hasNetworkSection_(networkProperties)]]">
+          <span class="subtitle">$i18n{networkSectionNetwork}</span>
+        </div>
 
-          <div class="subtitle">$i18n{networkSectionNetwork}</div>
         <!-- APN -->
+        <template is="dom-if"
+            if="[[isType_(NetworkType_.CELLULAR, networkProperties)]]">
           <network-apnlist editable on-apn-change="onNetworkPropertyChange_"
-              hidden$="[[!isType_(NetworkType_.CELLULAR, networkProperties)]]"
               network-properties="[[networkProperties]]">
           </network-apnlist>
-          <!-- IP Config -->
+        </template>
+          
+        <!-- IP Config, Nameservers, Proxy -->
+        <template is="dom-if"
+            if="[[isRememberedOrConnected_(networkProperties)]]">
           <network-ip-config editable on-ip-change="onIPConfigChange_"
-              hidden$="[[!isRememberedOrConnected_(networkProperties)]]"
               network-properties="[[networkProperties]]">
           </network-ip-config>
-
-          <!-- Nameservers -->
           <network-nameservers editable
               on-nameservers-change="onIPConfigChange_"
-              hidden$="[[!isRememberedOrConnected_(networkProperties)]]"
               network-properties="[[networkProperties]]">
           </network-nameservers>
-        </div>
-
-        <!-- Proxy -->
-        <div hidden$="[[!isRememberedOrConnected_(networkProperties)]]">
-          <div class="subtitle">$i18n{networkSectionProxy}</div>
+          <span class="subtitle">$i18n{networkSectionProxy}</span>
           <network-proxy editable on-proxy-change="onProxyChange_"
               network-properties="[[networkProperties]]">
           </network-proxy>
-        </div>
+        </template>
       </div>
     </iron-collapse>
   </template>

chrome/browser/resources/settings/internet_page/internet_detail_page.js

@@ -404,6 +404,9 @@ Polymer({
   /** @private */
   onForgetTap_: function() {
     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 */
@@ -678,8 +681,9 @@ Polymer({
    * @return {boolean}
    * @private
    */
-  hasAdvancedOrDeviceFields_: function() {
-    return this.hasAdvancedFields_() || this.hasDeviceFields_();
+  showAdvanced_: function() {
+    return this.hasAdvancedFields_() || this.hasDeviceFields_() ||
+        this.isRememberedOrConnected_();
   },
 
   /**

chrome/browser/resources/settings/internet_page/internet_shared_css.html

@@ -13,10 +13,6 @@
         margin-bottom: 0;
         margin-top: -9px;
       }
-
-      .indented {
-       -webkit-margin-start: 20px;
-      }
     </style>
   </template>
 </dom-module>

chrome/browser/resources/settings/internet_page/network_apnlist.html

@@ -9,7 +9,7 @@
   <template>
     <style include="internet-shared">
     </style>
-    <div class="settings-box">
+    <div class="settings-box first">
       <div class="start">$i18n{networkSectionAccessPoint}</div>
       <paper-dropdown-menu-light vertical-align="auto" no-label-float>
         <paper-listbox id="selectApn"
@@ -32,7 +32,7 @@
           edit-field-types="[[otherApnEditTypes_]]" prefix="Cellular.APN.">
       </network-property-list>
       <paper-button on-tap="onSaveOtherTap_">
-        ${networkButtonSaveApn}
+        $i18n{networkButtonSaveApn}
       </paper-button>
     </div>
   </template>

chrome/browser/resources/settings/internet_page/network_ip_config.html

@@ -8,7 +8,7 @@
   <template>
     <style include="internet-shared">
     </style>
-    <div class="settings-box">
+    <div class="settings-box first">
       <paper-checkbox checked="{{automatic_}}" disabled="[[!editable]]">
         $i18n{networkIPConfigAuto}
       </paper-checkbox>

chrome/browser/resources/settings/internet_page/network_nameservers.html

@@ -9,7 +9,7 @@
   <template>
     <style include="internet-shared">
     </style>
-    <div class="settings-box">
+    <div class="settings-box first">
       <div class="start">$i18n{networkSectionNameservers}</div>
       <paper-dropdown-menu-light vertical-align="auto" no-label-float>
         <paper-listbox class="dropdown-content" on-iron-activate="onTypeChange_"
@@ -23,7 +23,7 @@
       </paper-dropdown-menu-light>
     </div>
 
-    <div class="settings-box continuation single-column indented"
+    <div class="settings-box continuation single-column"
         hidden$="[[!nameservers_.length]]">
       <template is="dom-repeat" items="[[nameservers_]]">
         <paper-input-container no-label-float>

chrome/browser/resources/settings/internet_page/network_property_list.html

@@ -13,10 +13,20 @@
         margin-bottom: -12px;
         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>
     <template is="dom-repeat" items="[[fields]]"
         filter="[[computeFilter_(propertyDict, editFieldTypes)]]">
-      <div class="settings-box single-column">
+      <div class="settings-box single-column two-line">
         <!-- Propety label -->
         <div>[[getPropertyLabel_(item, prefix)]]</div>
         <!-- Uneditable property value -->

chrome/browser/resources/settings/internet_page/network_proxy.html

@@ -23,6 +23,11 @@
         margin-bottom: 10px;
       }
 
+      /* Use .middle spacing but no flex. */
+      .settings-box .middle {
+        flex: none;
+      }
+
       #exceptionsDiv {
         padding: 10px 0;
       }
@@ -63,10 +68,10 @@
     </div>
 
     <!-- Autoconfiguration (PAC) -->
-    <div class="settings-box continuation indented"
+    <div class="settings-box continuation"
         hidden$="[[!matches_(proxy.Type, ProxySettingsType_.PAC)]]">
-      <div class="start">$i18n{networkProxyAutoConfig}</div>
-      <paper-input  no-label-float class="flex" value="{{proxy.PAC}}"
+      <div>$i18n{networkProxyAutoConfig}</div>
+      <paper-input no-label-float class="middle" value="{{proxy.PAC}}"
           disabled="[[isNetworkPolicyEnforced(
                     networkProperties.ProxySettings.PAC)]]"
           on-blur="onProxyInputChange_">
@@ -74,14 +79,14 @@
     </div>
 
     <!-- Web Proxy Auto Discovery (WPAD) -->
-    <div class="settings-box continuation indented"
+    <div class="settings-box continuation"
         hidden$="[[!matches_(proxy.Type, ProxySettingsType_.WPAD)]]">
-      <div class="start">$i18n{networkSectionWpad}</div>
-      <div>[[WPAD]]</div>
+      <div>$i18n{networkSectionWpad}</div>
+      <div class="middle">[[WPAD]]</div>
     </div>
 
     <!-- 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)]]">
       <paper-checkbox checked="{{useSameProxy_}}">
         $i18n{networkProxyUseSame}

chrome/browser/resources/settings/internet_page/network_proxy_exclusions.html

@@ -13,8 +13,6 @@
       #container {
         align-self: stretch;
         border: 1px solid lightgrey;
-        display: flex;
-        flex-direction: column;
         height: 100px;
         margin-top: 10px;
         overflow-y: auto;
@@ -23,10 +21,11 @@
     </style>
     <div id="container">
       <template is="dom-repeat" items="[[exclusions]]">
-        <div class="layout horizontal center">
+        <div class="layout horizontal center" tabindex="0" >
           <div class="flex">[[item]]</div>
           <iron-icon class="favicon-image" icon="cr:clear"
-              on-tap="onRemoveTap_"></iron-icon>
+              on-tap="onRemoveTap_" tabindex="0">
+          </iron-icon>
         </div>
       </template>
     </div>

chrome/browser/resources/settings/internet_page/network_siminfo.html

@@ -35,10 +35,19 @@
       .puk {
         min-width: 200px;
       }
+
+      /* Siminfo is embedded; remove the padding. */
+      .settings-box {
+        padding: 0;
+      }
+
+      .settings-box:first-of-type {
+        border-top: none;
+      }
     </style>
 
     <!-- SIM missing UI -->
-    <div class="settings-box"
+    <div class="settings-box two-line"
         hidden$="[[networkProperties.Cellular.SIMPresent]]">
       <div class="start layout horizontal center">
         <iron-icon icon="settings:sim-card-alert"></iron-icon>
@@ -47,7 +56,8 @@
     </div>
 
     <!-- SIM locked -->
-    <div class="settings-box" hidden$="[[!showSimLocked_(networkProperties)]]">
+    <div class="settings-box two-line"
+        hidden$="[[!showSimLocked_(networkProperties)]]">
       <div class="start layout horizontal center">
         <iron-icon icon="settings:lock"></iron-icon>
         <div class="error">$i18n{networkSimCardLocked}</div>
@@ -60,7 +70,7 @@
     </div>
 
     <!-- SIM unlocked -->
-    <div class="settings-box"
+    <div class="settings-box two-line"
         hidden$="[[!showSimUnlocked_(networkProperties)]]">
       <paper-checkbox class="start" on-change="onSimLockEnabledChange_"
           checked="[[networkProperties.Cellular.SIMLockStatus.LockEnabled]]">

chrome/browser/resources/settings/internet_page/network_siminfo.js

@@ -123,10 +123,7 @@ Polymer({
    * @private
    */
   sendEnterPin_: function(event) {
-    var guid = this.networkProperties && this.networkProperties.GUID;
-    if (!guid)
-      return;
-
+    var guid = (this.networkProperties && this.networkProperties.GUID) || '';
     var pin = this.$.enterPin.value;
     if (!this.validatePin_(pin))
       return;
@@ -167,10 +164,7 @@ Polymer({
    * @private
    */
   sendChangePin_: function(event) {
-    var guid = this.networkProperties && this.networkProperties.GUID;
-    if (!guid)
-      return;
-
+    var guid = (this.networkProperties && this.networkProperties.GUID) || '';
     var newPin = this.$.changePinNew1.value;
     if (!this.validatePin_(newPin, this.$.changePinNew2.value))
       return;
@@ -208,9 +202,7 @@ Polymer({
    * @private
    */
   sendUnlockPin_: function(event) {
-    var guid = this.networkProperties && this.networkProperties.GUID;
-    if (!guid)
-      return;
+    var guid = (this.networkProperties && this.networkProperties.GUID) || '';
     var pin = this.$.unlockPin.value;
     if (!this.validatePin_(pin))
       return;
@@ -245,10 +237,7 @@ Polymer({
    * @private
    */
   sendUnlockPuk_: function(event) {
-    var guid = this.networkProperties && this.networkProperties.GUID;
-    if (!guid)
-      return;
-
+    var guid = (this.networkProperties && this.networkProperties.GUID) || '';
     var puk = this.$.unlockPuk.value;
     if (!this.validatePuk_(puk))
       return;

chrome/browser/resources/settings/internet_page/network_summary.html

@@ -10,6 +10,7 @@
             active-network-state="[[item]]"
             device-state="[[get(item.Type, deviceStates_)]]"
             network-state-list="[[get(item.Type, networkStateLists_)]]"
+            networking-private="[[networkingPrivate]]"
             on-expanded="onExpanded_"
             on-selected="onSelected_"
             on-device-enabled-toggled="onDeviceEnabledToggled_">

chrome/browser/resources/settings/internet_page/network_summary_item.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_item.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/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-toggle-button/paper-toggle-button.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="network_siminfo.html">
 
 <dom-module name="network-summary-item">
   <template>
     <style include="settings-shared">
       paper-spinner {
         height: 20px;
-        margin: 0 20px;
+        margin: 0 var(--settings-box-row-padding);
         width: 20px;
       }
 
+      network-siminfo {
+        padding: 0 var(--settings-box-row-padding);
+      }
+      
       .button-row {
         align-items: center;
         display: flex;
@@ -27,6 +34,16 @@
         align-items: center;
       }
 
+      #details {
+        align-items: center;
+        display: flex;
+        flex: auto;
+      }
+
+      #details[no-flex] {
+        flex: none;
+      }
+
       #deviceEnabledButton {
         -webkit-margin-start: 10px;
       }
@@ -37,15 +54,30 @@
       }
     </style>
     <div class="settings-box two-line">
-      <div id="details" actionable class="start layout horizontal center"
-          on-tap="onDetailsTap_">
-        <cr-network-list-item class="flex" item="[[activeNetworkState]]">
+      <div id="details" selectable
+          no-flex$="[[showSimInfo_(deviceState)]]"
+          on-tap="onDetailsTap_" tabindex$="[[getTabIndex_(deviceState)]]">
+        <cr-network-list-item item="[[activeNetworkState]]">
         </cr-network-list-item>
-        <paper-spinner active="[[showScanning_(deviceState, expanded_)]]">
+        <paper-spinner active="[[scanningIsActive_(deviceState, expanded_)]]"
+            hidden$="[[!scanningIsVisible_(deviceState)]]">
         </paper-spinner>
       </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 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"
               if="[[expandIsVisible_(deviceState, networkStateList)]]">
             <cr-expand-button id="expandListButton" expanded="{{expanded_}}">

chrome/browser/resources/settings/internet_page/network_summary_item.js

@@ -13,6 +13,8 @@ var DeviceStateProperties;
 Polymer({
   is: 'network-summary-item',
 
+  behaviors: [Polymer.IronA11yKeysBehavior],
+
   properties: {
     /**
      * Device state for the network type.
@@ -27,10 +29,7 @@ Polymer({
      * Network state for the active network.
      * @type {!CrOnc.NetworkStateProperties|undefined}
      */
-    activeNetworkState: {
-      type: Object,
-      observer: 'activeNetworkStateChanged_',
-    },
+    activeNetworkState: Object,
 
     /**
      * List of all network state data for the network type.
@@ -41,7 +40,6 @@ Polymer({
       value: function() {
         return [];
       },
-      observer: 'networkStateListChanged_',
     },
 
     /** The maximum height in pixels for the list of networks. */
@@ -50,6 +48,12 @@ Polymer({
       value: 200,
     },
 
+    /**
+     * Interface for networkingPrivate calls, passed from internet_page.
+     * @type {!NetworkingPrivate}
+     */
+    networkingPrivate: Object,
+
     /**
      * The expanded state of the list of networks.
      * @private
@@ -71,6 +75,10 @@ Polymer({
     },
   },
 
+  keyBindings: {
+    'enter': 'onDetailsTap_',
+  },
+
   /** @private */
   expandedChanged_: function() {
     var type = this.deviceState ? this.deviceState.Type : '';
@@ -79,27 +87,60 @@ Polymer({
 
   /** @private */
   deviceStateChanged_: function() {
-    this.updateSelectable_();
     if (this.expanded_ && !this.deviceIsEnabled_())
       this.expanded_ = false;
   },
 
-  /** @private */
-  activeNetworkStateChanged_: function() {
-    this.updateSelectable_();
+  /**
+   * @return {boolean} Whether or not the scanning spinner should be visible.
+   * @private
+   */
+  scanningIsVisible_: function() {
+    return this.deviceState.Type == CrOnc.Type.WI_FI;
   },
 
-  /** @private */
-  networkStateListChanged_: function() {
-    this.updateSelectable_();
+  /**
+   * @return {boolean} Whether or not the scanning spinner should be active.
+   * @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
    */
-  showScanning_: function() {
-    return !!this.expanded_ && !!this.deviceState.Scanning;
+  showSimInfo_: function() {
+    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({
    * @private
    */
   enableIsVisible_: function() {
-    return !!this.deviceState && this.deviceState.Type != CrOnc.Type.ETHERNET &&
+    return this.deviceState.Type != CrOnc.Type.ETHERNET &&
         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.
    * @private
@@ -155,7 +205,9 @@ Polymer({
   expandIsVisible_: function() {
     if (!this.deviceIsEnabled_())
       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;
   },
 
@@ -169,12 +221,12 @@ Polymer({
   },
 
   /**
-   * Event triggered when the details div is tapped.
-   * @param {Event} event The enable button event.
+   * Event triggered when the details div is tapped or Enter is pressed.
+   * @param {!Event} event The enable button event.
    * @private
    */
   onDetailsTap_: function(event) {
-    if ((event.target.id == 'expandListButton') ||
+    if ((event.target && event.target.id == 'expandListButton') ||
         (this.deviceState && !this.deviceIsEnabled_())) {
       // Already handled or disabled, do nothing.
       return;
@@ -188,6 +240,17 @@ Polymer({
     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.
    * @private
@@ -211,11 +274,10 @@ Polymer({
   },
 
   /**
-   * Called whenever the 'selectable' state might change.
+   * @return {string}
    * @private
    */
-  updateSelectable_: function() {
-    var selectable = this.deviceIsEnabled_();
-    this.$.details.classList.toggle('selectable', selectable);
+  getTabIndex_: function() {
+    return this.deviceIsEnabled_() ? '0' : '-1';
   },
 });

chrome/browser/resources/settings/settings_shared_css.html

@@ -262,7 +262,7 @@
         border-top: var(--settings-separator-line);
         display: flex;
         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

chrome/browser/resources/settings/settings_vars_css.html

@@ -14,11 +14,12 @@
     --settings-actionable: var(--cr-actionable);
 
     --settings-background-color: rgb(241, 241, 241);
+    --settings-box-row-padding: 20px;
     --settings-disabled-opacity: .65;
     --settings-error-color: var(--paper-red-700);
 
     --settings-list-frame-padding: {
-      -webkit-padding-end: 20px;
+      -webkit-padding-end: var(--settings-box-row-padding);
       -webkit-padding-start: 56px;
       padding-bottom: 0;
       padding-top: 0;

extensions/browser/api/networking_private/networking_private_chromeos.cc

@@ -36,7 +36,6 @@
 #include "extensions/common/permissions/permissions_data.h"
 #include "third_party/cros_system_api/dbus/service_constants.h"
 
-using chromeos::DeviceState;
 using chromeos::NetworkHandler;
 using chromeos::NetworkStateHandler;
 using chromeos::NetworkTypePattern;
@@ -93,7 +92,7 @@ bool GetPrimaryUserIdHash(content::BrowserContext* browser_context,
 
 void AppendDeviceState(
     const std::string& type,
-    const DeviceState* device,
+    const chromeos::DeviceState* device,
     NetworkingPrivateDelegate::DeviceStateList* device_state_list) {
   DCHECK(!type.empty());
   NetworkTypePattern pattern =
@@ -199,6 +198,22 @@ base::DictionaryValue* GetThirdPartyVPNDictionary(
   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
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -484,14 +499,7 @@ void NetworkingPrivateChromeOS::UnlockCellularSim(
     const std::string& puk,
     const VoidCallback& success_callback,
     const FailureCallback& failure_callback) {
-  const chromeos::NetworkState* network_state =
-      GetStateHandler()->GetNetworkStateFromGuid(guid);
-  if (!network_state) {
-    failure_callback.Run(networking_private::kErrorNetworkUnavailable);
-    return;
-  }
-  const chromeos::DeviceState* device_state =
-      GetStateHandler()->GetDeviceState(network_state->device_path());
+  const chromeos::DeviceState* device_state = GetCellularDeviceState(guid);
   if (!device_state) {
     failure_callback.Run(networking_private::kErrorNetworkUnavailable);
     return;
@@ -522,14 +530,7 @@ void NetworkingPrivateChromeOS::SetCellularSimState(
     const std::string& new_pin,
     const VoidCallback& success_callback,
     const FailureCallback& failure_callback) {
-  const chromeos::NetworkState* network_state =
-      GetStateHandler()->GetNetworkStateFromGuid(guid);
-  if (!network_state) {
-    failure_callback.Run(networking_private::kErrorNetworkUnavailable);
-    return;
-  }
-  const chromeos::DeviceState* device_state =
-      GetStateHandler()->GetDeviceState(network_state->device_path());
+  const chromeos::DeviceState* device_state = GetCellularDeviceState(guid);
   if (!device_state) {
     failure_callback.Run(networking_private::kErrorNetworkUnavailable);
     return;
@@ -574,7 +575,7 @@ NetworkingPrivateChromeOS::GetDeviceStateList() {
   NetworkHandler::Get()->network_state_handler()->GetDeviceList(&devices);
 
   std::unique_ptr<DeviceStateList> device_state_list(new DeviceStateList);
-  for (const DeviceState* device : devices) {
+  for (const chromeos::DeviceState* device : devices) {
     std::string onc_type =
         chromeos::network_util::TranslateShillTypeToONC(device->type());
     AppendDeviceState(onc_type, device, device_state_list.get());

extensions/common/api/networking_private.idl

@@ -1009,6 +1009,7 @@ namespace networkingPrivate {
     //   operation succeeds (|puk| is valid), the PIN will be set to |pin|.
     //   (If |pin| is empty or invalid the operation will fail).
     // |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.
     // |puk|: The operator provided PUK for unblocking a blocked SIM.
     // |callback|: Called when the operation has completed.
@@ -1025,6 +1026,7 @@ namespace networkingPrivate {
     // unlocked with unlockCellularSim() before this can be called (otherwise it
     // 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.
+    //     If empty, the default cellular device will be used.
     // |simState|: The SIM state to set.
     // |callback|: Called when the operation has completed.
     static void setCellularSimState(DOMString networkGuid,

ui/webui/resources/cr_elements/shared_style_css.html

@@ -61,7 +61,8 @@
         @apply(--cr-actionable);
       }
 
-      [selectable] :focus {
+      [selectable]:focus,
+      [selectable] > :focus {
         @apply(--cr-selectable-focus);
       }
       [selectable] > * {