Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * @fileoverview Polymer element for displaying the network state for a specific | 6 * @fileoverview Polymer element for displaying the network state for a specific |
| 7 * type and a list of networks for that type. | 7 * type and a list of networks for that type. |
| 8 */ | 8 */ |
| 9 | 9 |
| 10 /** @typedef {chrome.networkingPrivate.DeviceStateProperties} */ | 10 /** @typedef {chrome.networkingPrivate.DeviceStateProperties} */ |
| 11 var DeviceStateProperties; | 11 var DeviceStateProperties; |
| 12 | 12 |
| 13 Polymer({ | 13 Polymer({ |
| 14 is: 'network-summary-item', | 14 is: 'network-summary-item', |
| 15 | 15 |
| 16 properties: { | 16 properties: { |
| 17 /** The expanded state of the list of networks. */ | |
| 18 expanded: { | |
| 19 type: Boolean, | |
| 20 value: false, | |
| 21 observer: 'expandedChanged_', | |
| 22 }, | |
| 23 | |
| 24 /** | |
| 25 * Whether the list has been expanded. This is used to ensure the | |
| 26 * iron-collapse section animates correctly. | |
| 27 */ | |
| 28 wasExpanded: { | |
| 29 type: Boolean, | |
| 30 value: false, | |
| 31 }, | |
| 32 | |
| 33 /** | |
| 34 * The maximum height in pixels for the list of networks. | |
| 35 */ | |
| 36 maxHeight: { | |
| 37 type: Number, | |
| 38 value: 200, | |
| 39 }, | |
| 40 | |
| 41 /** | 17 /** |
| 42 * Device state for the network type. | 18 * Device state for the network type. |
| 43 * @type {DeviceStateProperties|undefined} | 19 * @type {DeviceStateProperties|undefined} |
| 44 */ | 20 */ |
| 45 deviceState: { | 21 deviceState: { |
| 46 type: Object, | 22 type: Object, |
| 47 observer: 'deviceStateChanged_', | 23 observer: 'deviceStateChanged_', |
| 48 }, | 24 }, |
| 49 | 25 |
| 50 /** | 26 /** |
| 51 * Network state for the active network. | 27 * Network state for the active network. |
| 52 * @type {!CrOnc.NetworkStateProperties|undefined} | 28 * @type {!CrOnc.NetworkStateProperties|undefined} |
| 53 */ | 29 */ |
| 54 activeNetworkState: { | 30 activeNetworkState: { |
| 55 type: Object, | 31 type: Object, |
| 56 observer: 'activeNetworkStateChanged_', | 32 observer: 'activeNetworkStateChanged_', |
| 57 }, | 33 }, |
| 58 | 34 |
| 59 /** | 35 /** |
| 60 * List of all network state data for the network type. | 36 * List of all network state data for the network type. |
| 61 * @type {!Array<!CrOnc.NetworkStateProperties>} | 37 * @type {!Array<!CrOnc.NetworkStateProperties>} |
| 62 */ | 38 */ |
| 63 networkStateList: { | 39 networkStateList: { |
| 64 type: Array, | 40 type: Array, |
| 65 value: function() { return []; }, | 41 value: function() { |
| 42 return []; | |
| 43 }, | |
| 66 observer: 'networkStateListChanged_', | 44 observer: 'networkStateListChanged_', |
| 67 } | 45 }, |
| 46 | |
| 47 /** The maximum height in pixels for the list of networks. */ | |
| 48 maxHeight: { | |
| 49 type: Number, | |
| 50 value: 200, | |
| 51 }, | |
| 52 | |
| 53 /** | |
| 54 * The expanded state of the list of networks. | |
| 55 * @private | |
| 56 */ | |
| 57 expanded_: { | |
| 58 type: Boolean, | |
| 59 value: false, | |
| 60 observer: 'expandedChanged_', | |
| 61 }, | |
| 62 | |
| 63 /** | |
| 64 * Whether the list has been expanded. This is used to ensure the | |
| 65 * iron-collapse section animates correctly. | |
| 66 * @private | |
| 67 */ | |
| 68 wasExpanded_: { | |
| 69 type: Boolean, | |
| 70 value: false, | |
| 71 }, | |
| 68 }, | 72 }, |
| 69 | 73 |
| 70 /** @private */ | 74 /** @private */ |
| 71 expandedChanged_: function() { | 75 expandedChanged_: function() { |
| 72 var type = this.deviceState ? this.deviceState.Type : ''; | 76 var type = this.deviceState ? this.deviceState.Type : ''; |
| 73 this.fire('expanded', {expanded: this.expanded, type: type}); | 77 this.fire('expanded', {expanded: this.expanded_, type: type}); |
| 74 }, | 78 }, |
| 75 | 79 |
| 76 /** @private */ | 80 /** @private */ |
| 77 deviceStateChanged_: function() { | 81 deviceStateChanged_: function() { |
| 78 this.updateSelectable_(); | 82 this.updateSelectable_(); |
| 79 if (this.expanded && !this.deviceIsEnabled_(this.deviceState)) | 83 if (this.expanded_ && !this.deviceIsEnabled_()) |
| 80 this.expanded = false; | 84 this.expanded_ = false; |
| 81 }, | 85 }, |
| 82 | 86 |
| 83 /** @private */ | 87 /** @private */ |
| 84 activeNetworkStateChanged_: function() { | 88 activeNetworkStateChanged_: function() { |
| 85 this.updateSelectable_(); | 89 this.updateSelectable_(); |
| 86 }, | 90 }, |
| 87 | 91 |
| 88 /** @private */ | 92 /** @private */ |
| 89 networkStateListChanged_: function() { this.updateSelectable_(); }, | 93 networkStateListChanged_: function() { |
| 94 this.updateSelectable_(); | |
| 95 }, | |
| 90 | 96 |
| 91 /** | 97 /** |
| 92 * @param {DeviceStateProperties} deviceState | |
| 93 * @param {boolean} expanded The expanded state. | |
| 94 * @return {boolean} Whether or not the scanning spinner should be shown. | 98 * @return {boolean} Whether or not the scanning spinner should be shown. |
| 95 * @private | 99 * @private |
| 96 */ | 100 */ |
| 97 showScanning_: function(deviceState, expanded) { | 101 showScanning_: function() { |
| 98 return !!expanded && !!deviceState.Scanning; | 102 return !!this.expanded_ && !!this.deviceState.Scanning; |
| 99 }, | 103 }, |
| 100 | 104 |
| 101 /** | 105 /** |
| 102 * @param {DeviceStateProperties|undefined} deviceState | |
| 103 * @return {boolean} Whether or not the device state is enabled. | 106 * @return {boolean} Whether or not the device state is enabled. |
| 104 * @private | 107 * @private |
| 105 */ | 108 */ |
| 106 deviceIsEnabled_: function(deviceState) { | 109 deviceIsEnabled_: function() { |
| 107 return !!deviceState && deviceState.State == 'Enabled'; | 110 return !!this.deviceState && |
| 111 this.deviceState.State == | |
| 112 chrome.networkingPrivate.DeviceStateType.ENABLED; | |
| 108 }, | 113 }, |
| 109 | 114 |
| 110 /** | 115 /** |
| 111 * @return {boolean} Whether the dom-if for the network list should be true. | 116 * @return {boolean} Whether the dom-if for the network list should be true. |
| 112 * The logic here is designed to allow the enclosed content to be stamped | 117 * The logic here is designed to allow the enclosed content to be stamped |
| 113 * before it is expanded. | 118 * before it is expanded. |
| 114 * @private | 119 * @private |
| 115 */ | 120 */ |
| 116 networksDomIfIsTrue_() { | 121 networksDomIfIsTrue_() { |
| 117 if (this.expanded == this.wasExpanded) | 122 if (this.expanded_ == this.wasExpanded_) |
| 118 return this.expanded; | 123 return this.expanded_; |
| 119 if (this.expanded) { | 124 if (this.expanded_) { |
| 120 Polymer.RenderStatus.afterNextRender(this, function() { | 125 Polymer.RenderStatus.afterNextRender(this, function() { |
| 121 this.wasExpanded = true; | 126 this.wasExpanded_ = true; |
| 122 }.bind(this)); | 127 }.bind(this)); |
| 123 return true; | 128 return true; |
| 124 } | 129 } |
| 125 return this.wasExpanded; | 130 return this.wasExpanded_; |
| 126 }, | 131 }, |
| 127 | 132 |
| 128 /** | 133 /** |
| 129 * @return {boolean} Whether the iron-collapse for the network list should | 134 * @return {boolean} Whether the iron-collapse for the network list should |
| 130 * be opened. | 135 * be opened. |
| 131 * @private | 136 * @private |
| 132 */ | 137 */ |
| 133 networksIronCollapseIsOpened_() { | 138 networksIronCollapseIsOpened_() { |
| 134 return this.expanded && this.wasExpanded; | 139 return this.expanded_ && this.wasExpanded_; |
| 135 }, | 140 }, |
| 136 | 141 |
| 137 /** | 142 /** |
| 138 * @param {DeviceStateProperties} deviceState | |
| 139 * @return {boolean} | 143 * @return {boolean} |
| 140 * @private | 144 * @private |
| 141 */ | 145 */ |
| 142 enableIsVisible_: function(deviceState) { | 146 enableIsVisible_: function() { |
| 143 return !!deviceState && deviceState.Type != CrOnc.Type.ETHERNET && | 147 return !!this.deviceState && this.deviceState.Type != CrOnc.Type.ETHERNET && |
| 144 deviceState.Type != CrOnc.Type.VPN; | 148 this.deviceState.Type != CrOnc.Type.VPN; |
| 145 }, | 149 }, |
| 146 | 150 |
| 147 /** | 151 /** |
| 148 * @param {DeviceStateProperties|undefined} deviceState | |
| 149 * @param {!Array<!CrOnc.NetworkStateProperties>} networkStateList | |
| 150 * @return {boolean} Whether or not to show the UI to expand the list. | 152 * @return {boolean} Whether or not to show the UI to expand the list. |
| 151 * @private | 153 * @private |
| 152 */ | 154 */ |
| 153 expandIsVisible_: function(deviceState, networkStateList) { | 155 expandIsVisible_: function() { |
| 154 if (!this.deviceIsEnabled_(deviceState)) | 156 if (!this.deviceIsEnabled_()) |
| 155 return false; | 157 return false; |
| 156 var minLength = (this.deviceState.Type == CrOnc.Type.WI_FI) ? 1 : 2; | 158 var minLength = (this.deviceState.Type == CrOnc.Type.WI_FI) ? 1 : 2; |
| 157 return networkStateList.length >= minLength; | 159 return this.networkStateList.length >= minLength; |
| 158 }, | 160 }, |
| 159 | 161 |
| 160 /** | 162 /** |
| 161 * @param {!CrOnc.NetworkStateProperties} state | |
| 162 * @return {boolean} True if the known networks button should be shown. | 163 * @return {boolean} True if the known networks button should be shown. |
| 163 * @private | 164 * @private |
| 164 */ | 165 */ |
| 165 knownNetworksIsVisible_: function(state) { | 166 knownNetworksIsVisible_: function() { |
|
dschuyler
2016/09/01 21:15:57
optional:
var networkState = this.activeNetworkSt
| |
| 166 return !!state && state.Type == CrOnc.Type.WI_FI; | 167 return !!this.activeNetworkState && |
| 168 this.activeNetworkState.Type == CrOnc.Type.WI_FI; | |
| 167 }, | 169 }, |
| 168 | 170 |
| 169 /** | 171 /** |
| 170 * Event triggered when the details div is tapped. | 172 * Event triggered when the details div is tapped. |
| 171 * @param {Event} event The enable button event. | 173 * @param {Event} event The enable button event. |
| 172 * @private | 174 * @private |
| 173 */ | 175 */ |
| 174 onDetailsTap_: function(event) { | 176 onDetailsTap_: function(event) { |
| 175 if ((event.target.id == 'expandListButton') || | 177 if ((event.target.id == 'expandListButton') || |
| 176 (this.deviceState && !this.deviceIsEnabled_(this.deviceState))) { | 178 (this.deviceState && !this.deviceIsEnabled_())) { |
| 177 // Already handled or disabled, do nothing. | 179 // Already handled or disabled, do nothing. |
| 178 return; | 180 return; |
| 179 } | 181 } |
| 180 if (this.expandIsVisible_(this.deviceState, this.networkStateList)) { | 182 if (this.expandIsVisible_()) { |
| 181 // Expandable, toggle expand. | 183 // Expandable, toggle expand. |
| 182 this.expanded = !this.expanded; | 184 this.expanded_ = !this.expanded_; |
| 183 return; | 185 return; |
| 184 } | 186 } |
| 185 // Not expandable, fire 'selected' with |activeNetworkState|. | 187 // Not expandable, fire 'selected' with |activeNetworkState|. |
| 186 this.fire('selected', this.activeNetworkState); | 188 this.fire('selected', this.activeNetworkState); |
| 187 }, | 189 }, |
| 188 | 190 |
| 189 /** | 191 /** |
| 190 * Event triggered when the known networks button is tapped. | 192 * Event triggered when the known networks button is tapped. |
| 191 * @private | 193 * @private |
| 192 */ | 194 */ |
| 193 onKnownNetworksTap_: function() { | 195 onKnownNetworksTap_: function() { |
| 194 this.fire('show-known-networks', {type: CrOnc.Type.WI_FI}); | 196 this.fire('show-known-networks', {type: CrOnc.Type.WI_FI}); |
| 195 }, | 197 }, |
| 196 | 198 |
| 197 /** | 199 /** |
| 198 * Event triggered when the enable button is toggled. | 200 * Event triggered when the enable button is toggled. |
| 199 * @param {!Event} event | 201 * @param {!Event} event |
| 200 * @private | 202 * @private |
| 201 */ | 203 */ |
| 202 onDeviceEnabledTap_: function(event) { | 204 onDeviceEnabledTap_: function(event) { |
| 203 var deviceIsEnabled = this.deviceIsEnabled_(this.deviceState); | 205 var deviceIsEnabled = this.deviceIsEnabled_(); |
| 204 var type = this.deviceState ? this.deviceState.Type : ''; | 206 var type = this.deviceState ? this.deviceState.Type : ''; |
| 205 this.fire( | 207 this.fire( |
| 206 'device-enabled-toggled', {enabled: !deviceIsEnabled, type: type}); | 208 'device-enabled-toggled', {enabled: !deviceIsEnabled, type: type}); |
| 207 // Make sure this does not propagate to onDetailsTap_. | 209 // Make sure this does not propagate to onDetailsTap_. |
| 208 event.stopPropagation(); | 210 event.stopPropagation(); |
| 209 }, | 211 }, |
| 210 | 212 |
| 211 /** | 213 /** |
| 212 * Called whenever the 'selectable' state might change. | 214 * Called whenever the 'selectable' state might change. |
| 213 * @private | 215 * @private |
| 214 */ | 216 */ |
| 215 updateSelectable_: function() { | 217 updateSelectable_: function() { |
| 216 var selectable = this.deviceIsEnabled_(this.deviceState); | 218 var selectable = this.deviceIsEnabled_(); |
| 217 this.$.details.classList.toggle('selectable', selectable); | 219 this.$.details.classList.toggle('selectable', selectable); |
| 218 }, | 220 }, |
| 219 }); | 221 }); |
| OLD | NEW |