MD Settings: Intenet: Fix network list

This CL:
* Fixes animation when using dom-if + iron-collapse.
* Uses CrScrollableBehavior to get keyboard focus and top/botom
  separators.

BUG=609156
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2260613003
Cr-Commit-Position: refs/heads/master@{#413465}

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

 <link rel="import" href="chrome://resources/html/polymer.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">
@@ -18,7 +19,6 @@
 
       .button-row {
         align-items: center;
-        border-top: var(--settings-separator-line);
         display: flex;
         min-height: var(--settings-row-min-height);
       }
@@ -60,18 +60,21 @@
         </div>
       </div>
     </div>
-    <template is="dom-if" if="[[expanded]]">
-      <div class="list-frame">
-        <cr-network-list id="networkList" max-height="[[maxHeight]]"
-            networks="[[networkStateList]]" opened="{{expanded}}" show-buttons>
-        </cr-network-list>
-        <template is="dom-if"
-            if="[[knownNetworksIsVisible_(activeNetworkState)]]">
-          <div class="button-row" actionable on-tap="onKnownNetworksTap_">
-            <a is="action-link">$i18n{knownNetworksButton}</a>
-          </div>
-        </template>
-      </div>
+    <template is="dom-if" if="[[networksDomIfIsTrue_(expanded, wasExpanded)]]">
+      <iron-collapse
+          opened="[[networksIronCollapseIsOpened_(expanded, wasExpanded)]]">
+        <div class="list-frame">
+          <cr-network-list id="networkList" max-height="[[maxHeight]]"
+              networks="[[networkStateList]]" show-buttons>
+          </cr-network-list>
+          <template is="dom-if"
+              if="[[knownNetworksIsVisible_(activeNetworkState)]]">
+            <div class="button-row" actionable on-tap="onKnownNetworksTap_">
+              <a is="action-link">$i18n{knownNetworksButton}</a>
+            </div>
+          </template>
+        </div>
+      </iron-collapse>
     </template>
   </template>
   <script src="network_summary_item.js"></script>

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

@@ -14,15 +14,22 @@ Polymer({
   is: 'network-summary-item',
 
   properties: {
-    /**
-     * True if the list is expanded.
-     */
+    /** The expanded state of the list of networks. */
     expanded: {
       type: Boolean,
       value: false,
       observer: 'expandedChanged_',
     },
 
+    /**
+     * Whether the list has been expanded. This is used to ensure the
+     * iron-collapse section animates correctly.
+     */
+    wasExpanded: {
+      type: Boolean,
+      value: false,
+    },
+
     /**
      * The maximum height in pixels for the list of networks.
      */
@@ -100,6 +107,33 @@ Polymer({
     return !!deviceState && deviceState.State == 'Enabled';
   },
 
+  /**
+   * @return {boolean} Whether the dom-if for the network list should be true.
+   *   The logic here is designed to allow the enclosed content to be stamped
+   *   before it is expanded.
+   * @private
+   */
+  networksDomIfIsTrue_() {
+    if (this.expanded == this.wasExpanded)
+      return this.expanded;
+    if (this.expanded) {
+      Polymer.RenderStatus.afterNextRender(this, function() {
+        this.wasExpanded = true;
+      }.bind(this));
+      return true;
+    }
+    return this.wasExpanded;
+  },
+
+  /**
+   * @return {boolean} Whether the iron-collapse for the network list should
+   *   be opened.
+   * @private
+   */
+  networksIronCollapseIsOpened_() {
+    return this.expanded && this.wasExpanded;
+  },
+
   /**
    * @param {DeviceStateProperties} deviceState
    * @return {boolean}

ui/webui/resources/cr_elements/network/compiled_resources2.gyp

@@ -17,6 +17,7 @@
     {
       'target_name': 'cr_network_list',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/compiled_resources2.gyp:cr_scrollable_behavior',
         'cr_network_list_types',
         'cr_onc_types',
       ],

ui/webui/resources/cr_elements/network/cr_network_list.html

 <link rel="import" href="chrome://resources/html/polymer.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-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.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_onc_types.html">
 
@@ -16,16 +17,18 @@
         border-top: var(--cr-separator-line);
       }
     </style>
-    <iron-collapse opened="{{opened}}">
-      <div id="container" class="layout vertical flex">
-        <template is="dom-repeat" items="[[getItems_(networks, customItems)]]">
+    <div id="container" class="layout vertical" scrollable>
+      <iron-list items="[[getItems_(networks, customItems)]]"
+          scroll-target="container" selection-enabled
+          selected-item="{{selectedItem}}">
+        <template>
           <cr-network-list-item item="[[item]]" is-list-item
-              on-tap="onTap_" show-buttons="[[showButtons]]"
+              show-buttons="[[showButtons]]" tabindex$="[[tabIndex]]"
               show-separator$="[[showSeparators]]">
           </cr-network-list-item>
         </template>
-      </div>
-    </iron-collapse>
+      </iron-list>
+    </div>
   </template>
   <script src="cr_network_list.js"></script>
 </dom-module>

ui/webui/resources/cr_elements/network/cr_network_list.js

@@ -8,7 +8,6 @@
 
 /**
  * Polymer class definition for 'cr-network-list'.
- * TODO(stevenjb): Update with iron-list(?) once implemented in Polymer 1.0.
  */
 Polymer({
   is: 'cr-network-list',
@@ -45,12 +44,6 @@ Polymer({
       }
     },
 
-    /** True if the list is opened. */
-    opened: {
-      type: Boolean,
-      value: true,
-    },
-
     /** True if action buttons should be shown for the itmes. */
     showButtons: {
       type: Boolean,
@@ -64,8 +57,19 @@ Polymer({
       value: false,
       reflectToAttribute: true,
     },
+
+    /**
+     * Reflects the iron-list selecteditem property.
+     * @type {!CrNetworkList.CrNetworkListItemType}
+     */
+    selectedItem: {
+      type: Object,
+      observer: 'selectedItemChanged_',
+    }
   },
 
+  behaviors: [CrScrollableBehavior],
+
   /** @private */
   maxHeightChanged_: function() {
     this.$.container.style.maxHeight = this.maxHeight + 'px';
@@ -85,15 +89,23 @@ Polymer({
   },
 
   /**
-   * Event triggered when a list item is tapped.
-   * @param {!{model: {item: !CrNetworkList.CrNetworkListItemType}}} event
+   * Use iron-list selection (which is not the same as focus) to trigger
+   * tap (requires selection-enabled) or keyboard selection.
+   * @private
+   */
+  selectedItemChanged_: function() {
+    if (this.selectedItem)
+      this.onItemAction_(this.selectedItem);
+  },
+
+  /**
+   * @param {!CrNetworkList.CrNetworkListItemType} item
    * @private
    */
-  onTap_: function(event) {
-    let item = event.model.item;
+  onItemAction_: function(item) {
     if (item.hasOwnProperty('customItemName'))
-      this.fire('custom-item-selected', event.model.item);
+      this.fire('custom-item-selected', item);
     else
-      this.fire('selected', event.model.item);
+      this.fire('selected', item);
   },
 });

ui/webui/resources/cr_elements/network/cr_network_list_item.html

@@ -12,6 +12,7 @@
     <style include="cr-shared-style">
       :host {
         display: inline-block;
+        outline: none;
       }
 
       #divButtons {
@@ -105,7 +106,8 @@
       <template is="dom-if"
           if="[[isSettingsButtonVisible_(networkState, showButtons)]]">
         <div id="divButtons">
-          <paper-icon-button icon="cr:settings" on-tap="fireShowDetails_">
+          <paper-icon-button icon="cr:settings" on-tap="fireShowDetails_"
+              tabindex$="[[tabindex]]">
           </paper-icon-button>
         </div>
       </template>

ui/webui/resources/cr_elements/network/cr_network_list_item.js

@@ -44,6 +44,17 @@ Polymer({
       type: Boolean,
       reflectToAttribute: true,
     },
+
+    /**
+     * Reflect the element's tabindex attribute to a property so that embedded
+     * elements (e.g. the settings button) can become keyboard focusable when
+     * this element has keyboard focus.
+     */
+    tabindex: {
+      type: Number,
+      value: -1,
+      reflectToAttribute: true,
+    },
   },
 
   behaviors: [I18nBehavior],

ui/webui/resources/cr_elements/network/cr_network_select.html

 <link rel="import" href="chrome://resources/html/polymer.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-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list.html">
@@ -21,11 +22,13 @@
             expanded="{{networkListOpened}}">
         </cr-expand-button>
       </div>
-      <cr-network-list opened="[[networkListOpened]]" max-height="[[maxHeight]]"
-          networks="[[networkStateList]]" custom-items="[[customItems]]"
-          on-selected="onNetworkListItemSelected_" show-buttons=[[showButtons]]
-          show-separators="[[showSeparators]]">
-      </cr-network-list>
+      <iron-collapse opened="[[networkListOpened]]">
+        <cr-network-list on-selected="onNetworkListItemSelected_"
+            max-height="[[maxHeight]]" networks="[[networkStateList]]"
+            custom-items="[[customItems]]" show-buttons=[[showButtons]]
+            show-separators="[[showSeparators]]">
+        </cr-network-list>
+      </iron-collapse>
     </div>
   </template>
   <script src="cr_network_select.js"></script>