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

   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
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview
   7  * 'cr-settings-internet-detail' is the settings subpage containing details
   8  * for a network.
   9  *
  10  * @group Chrome Settings Elements
  11  * @element cr-settings-internet-detail
  12  */
  13
  14 Polymer({
  15   is: 'cr-settings-internet-detail-page',
  16
  17   properties: {
  18     /**
  19      * ID of the page.
  20      * @attribute PAGE_ID
  21      * @const {string}
  22      */
  23     PAGE_ID: {
  24       type: String,
  25       value: 'internet-detail',
  26       readOnly: true
  27     },
  28
  29     /**
  30      * Route for the page.
  31      */
  32     route: {
  33       type: String,
  34       value: ''
  35     },
  36
  37     /**
  38      * Whether the page is a subpage.
  39      */
  40     subpage: {
  41       type: Boolean,
  42       value: false
  43     },
  44
  45     /**
  46      * Title for the page header and navigation menu.
  47      */
  48     pageTitle: {
  49       type: String,
  50       value: function() {
  51         return loadTimeData.getString('internetDetailPageTitle');
  52       }
  53     },
  54
  55     /**
  56      * Reflects the selected settings page. We use this to extract guid from
  57      * window.location.href when this page is navigated to. This is a
  58      * workaround for a bug in the 1.0 version of more-routing where
  59      * selected-params='{{params}}' is not correctly setting params in
  60      * settings_main.html. TODO(stevenjb): Remove once more-routing is fixed.
  61      */
  62     selectedPage: {
  63       type: String,
  64       value: '',
  65       observer: 'selectedPageChanged_'
  66     },
  67
  68     /**
  69      * Name of the 'core-icon' to show. TODO(stevenjb): Update this with the
  70      * icon for the active internet connection.
  71      */
  72     icon: {
  73       type: String,
  74       value: 'settings-ethernet',
  75       readOnly: true
  76     },
  77
  78     /**
  79      * The network GUID to display details for.
  80      */
  81     guid: {
  82       type: String,
  83       value: '',
  84       observer: 'guidChanged_',
  85     },
  86
  87     /**
  88      * The current state for the network matching |guid|.
  89      * @type {?CrOnc.NetworkStateProperties}
  90      */
  91     networkState: {
  92       type: Object,
  93       value: null,
  94       observer: 'networkStateChanged_'
  95     },
  96
  97     /**
  98      * The network AutoConnect state.
  99      */
 100     autoConnect: {
 101       type: Boolean,
 102       value: false,
 103       observer: 'autoConnectChanged_'
 104     },
 105
 106     /**
 107      * The network preferred state.
 108      */
 109     preferNetwork: {
 110       type: Boolean,
 111       value: false,
 112       observer: 'preferNetworkChanged_'
 113     },
 114
 115     /**
 116      * The network IP Address.
 117      */
 118     IPAddress: {
 119       type: String,
 120       value: ''
 121     },
 122   },
 123
 124   /**
 125    * Listener function for chrome.networkingPrivate.onNetworksChanged event.
 126    * @type {?function(!Array<string>)}
 127    * @private
 128    */
 129   networksChangedListener_: null,
 130
 131   /** @override */
 132   attached: function() {
 133     this.networksChangedListener_ = this.onNetworksChangedEvent_.bind(this);
 134     chrome.networkingPrivate.onNetworksChanged.addListener(
 135         this.networksChangedListener_);
 136   },
 137
 138   /** @override */
 139   detached: function() {
 140     chrome.networkingPrivate.onNetworksChanged.removeListener(
 141         this.networksChangedListener_);
 142   },
 143
 144   /**
 145    * Polymer guid changed method.
 146    */
 147   guidChanged_: function() {
 148     if (!this.guid)
 149       return;
 150     this.getNetworkDetails_();
 151   },
 152
 153   /**
 154    * Polymer guid changed method. TODO(stevenjb): Remove, see TODO above.
 155    */
 156   selectedPageChanged_: function() {
 157     if ((this.selectedPage && this.selectedPage.PAGE_ID) != this.PAGE_ID)
 158       return;
 159     var href = window.location.href;
 160     var idx = href.lastIndexOf('/');
 161     var guid = href.slice(idx + 1);
 162     this.guid = guid;
 163   },
 164
 165   /**
 166    * Polymer networkState changed method.
 167    */
 168   networkStateChanged_: function() {
 169     if (!this.networkState)
 170       return;
 171
 172     // Update autoConnect if it has changed. Default value is false.
 173     var autoConnect =
 174         CrOnc.getActiveTypeValue(this.networkState, 'AutoConnect') || false;
 175     if (autoConnect != this.autoConnect)
 176       this.autoConnect = autoConnect;
 177
 178     // Update preferNetwork if it has changed. Default value is false.
 179     var preferNetwork = this.networkState.Priority > 0;
 180     if (preferNetwork != this.preferNetwork)
 181       this.preferNetwork = preferNetwork;
 182
 183     // Set the IPAddress property to the IPV4 Address.
 184     var ipv4 = CrOnc.getIPConfigForType(this.networkState, CrOnc.IPType.IPV4);
 185     this.IPAddress = (ipv4 && ipv4.IPAddress) || '';
 186   },
 187
 188   /**
 189    * Polymer autoConnect changed method.
 190    */
 191   autoConnectChanged_: function() {
 192     if (!this.networkState || !this.guid)
 193       return;
 194     var onc = {Type: this.networkState.Type};
 195     CrOnc.setTypeProperty(onc, 'AutoConnect', this.autoConnect);
 196     this.setNetworkProperties_(onc);
 197   },
 198
 199   /**
 200    * Polymer preferNetwork changed method.
 201    */
 202   preferNetworkChanged_: function() {
 203     if (!this.networkState || !this.guid)
 204       return;
 205     var priority = this.preferNetwork ? 1 : 0;
 206     this.setNetworkProperties_(
 207         {Type: this.networkState.Type, Priority: priority});
 208   },
 209
 210   /**
 211    * networkingPrivate.onNetworksChanged event callback.
 212    * @param {!Array<string>} networkIds The list of changed network GUIDs.
 213    * @private
 214    */
 215   onNetworksChangedEvent_: function(networkIds) {
 216     if (networkIds.indexOf(this.guid) != -1)
 217       this.getNetworkDetails_();
 218   },
 219
 220   /**
 221    * Calls networkingPrivate.getState for this.guid.
 222    * @private
 223    */
 224   getNetworkDetails_: function() {
 225     if (!this.guid)
 226       return;
 227     chrome.networkingPrivate.getProperties(
 228         this.guid, this.getPropertiesCallback_.bind(this));
 229   },
 230
 231   /**
 232    * networkingPrivate.getProperties callback.
 233    * @param {!CrOnc.NetworkStateProperties} state The network state properties.
 234    * @private
 235    */
 236   getPropertiesCallback_: function(state) {
 237     this.networkState = state;
 238   },
 239
 240   /**
 241    * @param {!chrome.networkingPrivate.NetworkConfigProperties} onc The ONC
 242    *     network properties.
 243    * @private
 244    */
 245   setNetworkProperties_: function(onc) {
 246     if (!this.guid)
 247       return;
 248     chrome.networkingPrivate.setProperties(this.guid, onc, function() {
 249       if (chrome.runtime.lastError) {
 250         // An error typically indicates invalid input; request the properties
 251         // to update any invalid fields.
 252         this.getNetworkDetails_();
 253       }
 254     }.bind(this));
 255   },
 256
 257   /**
 258    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 259    * @return {string} The text to display for the network name.
 260    * @private
 261    */
 262   getStateName_: function(state) {
 263     return (state && state.Name) || '';
 264   },
 265
 266   /**
 267    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 268    * @return {string} The text to display for the network name.
 269    * @private
 270    */
 271   getStateClass_: function(state) {
 272     return this.isConnectedState_(state) ? 'connected' : '';
 273   },
 274
 275   /**
 276    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 277    * @return {string} The text to display for the network connection state.
 278    * @private
 279    */
 280   getStateText_: function(state) {
 281     // TODO(stevenjb): Localize.
 282     return (state && state.ConnectionState) || '';
 283   },
 284
 285   /**
 286    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 287    * @return {boolean} True if the state is connected.
 288    * @private
 289    */
 290   isConnectedState_: function(state) {
 291     return state && state.ConnectionState == CrOnc.ConnectionState.CONNECTED;
 292   },
 293
 294   /**
 295    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 296    * @return {boolean} Whether or not the network can be connected.
 297    * @private
 298    */
 299   canConnect_: function(state) {
 300     return state && state.Type != 'Ethernet' &&
 301            state.ConnectionState == CrOnc.ConnectionState.NOT_CONNECTED;
 302   },
 303
 304   /**
 305    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 306    * @return {boolean} Whether or not the network can be disconnected.
 307    * @private
 308    */
 309   canDisconnect_: function(state) {
 310     return state && state.Type != 'Ethernet' &&
 311            state.ConnectionState != CrOnc.ConnectionState.NOT_CONNECTED;
 312   },
 313
 314   /**
 315    * Callback when the Connect button is clicked.
 316    * @private
 317    */
 318   onConnectClicked_: function() {
 319     chrome.networkingPrivate.startConnect(this.guid);
 320   },
 321
 322   /**
 323    * Callback when the Disconnect button is clicked.
 324    * @private
 325    */
 326   onDisconnectClicked_: function() {
 327     chrome.networkingPrivate.startDisconnect(this.guid);
 328   },
 329
 330   /**
 331    * Event triggered when the apnlist element changes.
 332    * @param {!{detail: { field: string, value: CrOnc.APNProperties}}} event
 333    *     The network-apnlist change event.
 334    * @private
 335    */
 336   onApnChange_: function(event) {
 337     if (event.detail.field != 'APN')
 338       return;
 339     this.setNetworkProperties_({Cellular: {APN: event.detail.value}});
 340   },
 341
 342   /**
 343    * Event triggered when the IP Config or NameServers element changes.
 344    * @param {!{detail: {field: string,
 345    *                    value: string|CrOnc.IPConfigProperties}}} event
 346    *     The network-ip-config or network-nameservers change event.
 347    * @private
 348    */
 349   onIPConfigChange_: function(event) {
 350     if (!this.networkState)
 351       return;
 352
 353     var field = event.detail.field;
 354     var value = event.detail.value;
 355
 356     // Set just the IP Config properties that need to change.
 357     var onc = {};
 358     if (field == 'IPAddressConfigType') {
 359       if (onc.IPAddressConfigType == value)
 360         return;
 361       onc.IPAddressConfigType = value;
 362     } else if (field == 'NameServersConfigType') {
 363       if (onc.NameServersConfigType == value)
 364         return;
 365       onc.NameServersConfigType = value;
 366     } else if (field == 'StaticIPConfig') {
 367       if (onc.IPAddressConfigType == 'Static' && onc.StaticIPConfig) {
 368         var matches = true;
 369         for (var key in value) {
 370           if (onc.StaticIPConfig[key] != value[key]) {
 371             matches = false;
 372             break;
 373           }
 374         }
 375         if (matches)
 376           return;
 377       }
 378       onc.IPAddressConfigType = 'Static';
 379       onc.StaticIPConfig = onc.StaticIPConfig || {};
 380       for (key in value)
 381         onc.StaticIPConfig[key] = value[key];
 382     } else if (field == 'NameServers') {
 383       if (onc.NameServersConfigType == 'Static' && onc.StaticIPConfig &&
 384           onc.StaticIPConfig.NameServers == value) {
 385         return;
 386       }
 387       onc.NameServersConfigType = 'Static';
 388       onc.StaticIPConfig = onc.StaticIPConfig || {};
 389       onc.StaticIPConfig.NameServers = value;
 390     } else {
 391       console.error('Unexpected change field: ' + field);
 392       return;
 393     }
 394     // setValidStaticIPConfig will fill in any other properties from
 395     // networkState. This is necessary since we update IP Address and
 396     // NameServers independently.
 397     CrOnc.setValidStaticIPConfig(onc, this.networkState);
 398     this.setNetworkProperties_(onc);
 399   },
 400
 401   /**
 402    * Event triggered when the Proxy configuration element changes.
 403    * @param {!{detail: {field: string, value: CrOnc.ProxySettings}}} event
 404    *     The network-proxy change event.
 405    * @private
 406    */
 407   onProxyChange_: function(event) {
 408     var field = event.detail.field;
 409     var value = event.detail.value;
 410     if (field != 'ProxySettings')
 411       return;
 412     this.setNetworkProperties_({ProxySettings: value});
 413   },
 414
 415   /**
 416    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 417    * @return {boolean} True if the shared message should be shown.
 418    * @private
 419    */
 420   showShared_: function(state) {
 421     return state &&
 422            (state.Source == 'Device' || state.Source == 'DevicePolicy');
 423   },
 424
 425   /**
 426    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 427    * @return {boolean} True if the AutoConnect checkbox should be shown.
 428    * @private
 429    */
 430   showAutoConnect_: function(state) {
 431     return state && state.Type != 'Ethernet';
 432   },
 433
 434   /**
 435    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 436    * @return {boolean} True if the prefer network checkbox should be shown.
 437    * @private
 438    */
 439   showPreferNetwork_: function(state) {
 440     return state && state.Type != 'Ethernet';
 441   },
 442
 443   /**
 444    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 445    * @return {!Array<string>} The fields to display in the info section.
 446    * @private
 447    */
 448   getInfoFields_: function(state) {
 449     /** @type {!Array<string>} */ var fields = [];
 450     if (!state)
 451       return fields;
 452
 453     if (state.Type == 'Cellular') {
 454       fields.push('Cellular.ActivationState',
 455                   'Cellular.RoamingState',
 456                   'RestrictedConnectivity',
 457                   'Cellular.ServingOperator.Name');
 458     }
 459     if (state.Type == 'VPN') {
 460       fields.push('VPN.Host', 'VPN.Type');
 461       if (state.VPN.Type == 'OpenVPN')
 462         fields.push('VPN.OpenVPN.Username');
 463       else if (state.VPN.Type == 'L2TP-IPsec')
 464         fields.push('VPN.L2TP.Username');
 465       // TODO(stevenjb): ThirdPartyVPN
 466     }
 467     if (state.Type == 'WiFi')
 468       fields.push('RestrictedConnectivity');
 469     if (state.Type == 'WiMAX') {
 470       fields.push('RestrictedConnectivity', 'WiMAX.EAP.Identity');
 471     }
 472     return fields;
 473   },
 474
 475   /**
 476    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 477    * @return {!Array<string>} The fields to display in the Advanced section.
 478    * @private
 479    */
 480   getAdvancedFields_: function(state) {
 481     /** @type {!Array<string>} */ var fields = [];
 482     if (!state)
 483       return fields;
 484     fields.push('MacAddress');
 485     if (state.Type == 'Cellular') {
 486       fields.push('Cellular.Carrier',
 487                   'Cellular.Family',
 488                   'Cellular.NetworkTechnology',
 489                   'Cellular.ServingOperator.Code');
 490     }
 491     if (state.Type == 'WiFi') {
 492       fields.push('WiFi.SSID',
 493                   'WiFi.BSSID',
 494                   'WiFi.Security',
 495                   'WiFi.SignalStrength',
 496                   'WiFi.Frequency');
 497     }
 498     if (state.Type == 'WiMAX')
 499       fields.push('WiFi.SignalStrength');
 500     return fields;
 501   },
 502
 503   /**
 504    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 505    * @return {!Array<string>} The fields to display in the device section.
 506    * @private
 507    */
 508   getDeviceFields_: function(state) {
 509     /** @type {!Array<string>} */ var fields = [];
 510     if (!state)
 511       return fields;
 512     if (state.Type == 'Cellular') {
 513       fields.push('Cellular.HomeProvider.Name',
 514                   'Cellular.HomeProvider.Country',
 515                   'Cellular.HomeProvider.Code',
 516                   'Cellular.Manufacturer',
 517                   'Cellular.ModelID',
 518                   'Cellular.FirmwareRevision',
 519                   'Cellular.HardwareRevision',
 520                   'Cellular.ESN',
 521                   'Cellular.ICCID',
 522                   'Cellular.IMEI',
 523                   'Cellular.IMSI',
 524                   'Cellular.MDN',
 525                   'Cellular.MEID',
 526                   'Cellular.MIN',
 527                   'Cellular.PRLVersion');
 528     }
 529     return fields;
 530   },
 531
 532   /**
 533    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 534    * @return {boolean} True if there are any advanced fields to display.
 535    * @private
 536    */
 537   hasAdvancedOrDeviceFields_: function(state) {
 538     return this.getAdvancedFields_(state).length > 0 || this.hasDeviceFields_();
 539   },
 540
 541   /**
 542    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 543    * @return {boolean} True if there are any device fields to display.
 544    * @private
 545    */
 546   hasDeviceFields_: function(state) {
 547     var fields = this.getDeviceFields_(state);
 548     return fields.length > 0;
 549   },
 550
 551   /**
 552    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 553    * @return {boolean} True if the network section should be shown.
 554    * @private
 555    */
 556   hasNetworkSection_: function(state) {
 557     return state && state.Type != 'VPN';
 558   },
 559
 560   /**
 561    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 562    * @param {string} type The network type.
 563    * @return {boolean} True if the network type matches 'type'.
 564    * @private
 565    */
 566   isType_: function(state, type) {
 567     return state && (state.Type == type);
 568   }
 569 });