erved);

var equal = v1.length == v2.length;

if (equal) {
for (var i = 0; i < v1.length; i++) {
if (v1[i] !== v2[i]) {
equal = false;
break;
}
}
}
if (!equal) {
var message =
['Assertion Failed', 'Observed: ' + v2, 'Expected: ' + v1].join('\n ');
throw new Error(message);
}
}

/**
* Verifies that the expected and observed result have the same content.
* @param {*} expected The expected result.
* @param {*} observed The actual result.
*/
function assertDeepEquals(expected, observed, opt_message) {
if (typeof expected == 'object' && expected != null) {
assertNotEqual(null, observed);
for (var key in expected) {
assertTrue(key in observed, opt_message);
assertDeepEquals(expected[key], observed[key], opt_message);
}
for (var key in observed) {
assertTrue(key in expected, opt_message);
}
} else {
assertEquals(expected, observed, opt_message);
}
}

/**
* Defines runTests.
*/
(function(exports) {
/**
* List of test cases.
* @type {Array<string>} List of function names for tests to run.
*/
var testCases = [];

/**
* Indicates if all tests have run successfully.
* @type {boolean}
*/
var cleanTestRun = true;

/**
* Armed during setup of a test to call the matching tear down code.
* @type {Function}
*/
var pendingTearDown = null;
/**
* Runs all functions starting with test and reports success or
* failure of the test suite.
*/
function runTests() {
for (var name in window) {
// To avoid unnecessary getting properties, test name first.
if (/^test/.test(name) && typeof window[name] == 'function')
testCases.push(name);
}
if (!testCases.length) {
console.error('Failed to find test cases.');
cleanTestRun = false;
}
try {
if (window.setUpPage)
window.setUpPage();
} catch(err) {
cleanTestRun = false;
}
continueTesting();
}

/**
* Runs the next test in the queue. Reports the test results if the queue is
* empty.
* @param {boolean=} opt_asyncTestFailure Optional parameter indicated if the
* last asynchronous test failed.
*/
function continueTesting(opt_asyncTestFailure) {
if (opt_asyncTestFailure)
cleanTestRun = false;
var done = false;
if (pendingTearDown) {
pendingTearDown();
pendingTearDown = null;
}
if (testCases.length > 0) {
var fn = testCases.pop();
var isAsyncTest = window[fn].length;
try {
if (window.setUp)
window.setUp();
pendingTearDown = window.tearDown;
window[fn](continueTesting);
} catch(err) {
console.error('Failure in test ' + fn + '\n' + err);
console.log(err.stack);
cleanTestRun = false;
}
// Asynchronous tests must manually call continueTesting when complete.
if (!isAsyncTest)
continueTesting();
} else {
done = true;
endTests(cleanTestRun);
}
if (!done) {
domAutomationController.setAutomationId(1);
 domAutomationController.send('PENDING');
}
};

exports.runTests = runTests;
})(this);

/**
* Signals completion of a test.
* @param {boolean} success Indicates if the test completed successfully.
*/
function endTests(success) {
domAutomationController.setAutomationId(1);
domAutomationController.send(success ? 'SUCCESS' : 'FAILURE');
}

window.onerror = function() {
endTests(false);
};
/* Copyright 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */

span.heading {
font-size: 18px;
font-weight: bold;
}

#wifi {
height: 32px;
width: 32px;
}

#cellular {
height: 16px;
width: 16px;
}
<link rel="import" href="chrome://resources/html/polymer.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/paper-button/paper-
button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-
checkbox.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_icon.html">

<dom-module id="cr-demo-element">
<link rel="import" type="css" href="demo_element.css">
<template>
<cr-expand-button toggles expanded="{{networkOpened}}">
<span class="heading">cr-network-*</span>
</cr-expand-button>
<iron-collapse opened="[[networkOpened]]">
<div class="layout vertical">
<h3>cr-network-icon</h3>
<div class="layout vertical">
 <div class="layout horizontal center">
<cr-network-icon id="ethernet" network-type="Ethernet">
</cr-network-icon>
<span>Ethernet</span>
</div>
<div class="layout horizontal center">
<cr-network-icon id="wifi" network-type="WiFi"></cr-network-icon>
<span>WiFi (32px)</span>
</div>
<div class="layout horizontal center">
<cr-network-icon id="cellular" network-type="Cellular">
</cr-network-icon>
<span>Cellular (16px)</span>
</div>
</div>
</div>
</iron-collapse>

</template>
<script src="demo_element.js"></script>
</dom-module>
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
* @fileoverview Polymer element for UI wrapping a list of cr- elements.
*/
Polymer({
is: 'cr-demo-element',

properties: {
checkboxChecked: {
type: Boolean,
value: false,
observer: 'checkboxCheckedChanged_'
},

collapseOpened: {
type: Boolean,
value: false,
observer: 'collapseOpenedChanged_'
},

inputValues: {
type: Array,
value: function() { return ["", "input1", "input2", "", "input4"]; },
observer: 'inputValuesChanged_'
},

checkboxLabel: {
type: String,
value: 'CheckboxLabel',
},

subLabel: {
type: String,
value: 'sub-label',
},
 },

checkboxCheckedChanged_: function() {
console.log('checkboxCheckedChanged=' + this.checkboxChecked);
},

collapseOpenedChanged_: function() {
console.log('collapseOpened=' + this.collapseOpened);
},

inputValuesChanged_: function() {
console.log('inputValues=' + this.inputValues);
}
});
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

Polymer = {dom: 'shadow'};<!doctype html>

<!-- Demo page for cr-elements. Add new elements to demo_elements.html to -->
<!-- view them and test their interactions with other elements. -->
<!-- To view this page, navigate to: -->
<!-- chrome://resources/cr_elements/demo_page.html -->

<html>

<head>
<script src="demo_config.js"></script>
<link href="demo_element.html" rel="import" >
</head>

<body>
<h1>cr-elements</h1>
<cr-demo-element></cr-demo-element>
</body>

</html>
<link rel="import" href="chrome://resources/html/polymer.html">

<dom-module id="cr-events">
<script src="cr_events.js"></script>
</dom-module>
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
* @fileoverview
* `cr-events` provides helpers for handling events in Chrome Polymer elements.
*
* Example:
*
* <cr-events id="events"></cr-events>
*
* Usage:
*
* this.$.events.forward(this.$.element, ['change']);
*/
Polymer({
is: 'cr-events',

/**
* Sets up an element to forward events across the shadow boundary, for events
* which normally stop at the root node (see http://goo.gl/WGMO9x).
* @param {!HTMLElement} element The element to forward events from.
* @param {!Array<string>} events The events to forward.
*/
forward: function(element, events) {
for (var i = 0; i < events.length; i++)
element.addEventListener(events[i], this.forwardEvent_);
},

/**
* Forwards events that don't automatically cross the shadow boundary
* if the event should bubble.
* @param {!Event} e The event to forward.
* @param {*} detail Data passed when initializing the event.
* @param {Node=} opt_sender Node that declared the handler.
* @private
*/
forwardEvent_: function(e, detail, opt_sender) {
if (!e.bubbles)
return;

var node = e.path[e.path.length - 1];

if (node instanceof ShadowRoot) {
// Forward the event to the shadow host.
e.stopPropagation();
node.host.fire(e.type, detail, node.host, true, e.cancelable);
}
},
});
/* Copyright 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */

:host {
display: inline-block;
}
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-
icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-
icon-button.html">

<dom-module id="cr-expand-button">
<link rel="import" type="css" href="chrome://resources/cr_elements/shared.css">
<link rel="import" type="css" href="cr_expand_button.css">
<template>
<content></content>
<paper-icon-button toggles active="{{expanded}}" disabled="[[disabled]]"
icon="[[iconName_(expanded)]]">
</paper-icon-button>
</template>
<script src="cr_expand_button.js"></script>
</dom-module>
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
* @fileoverview
* 'cr-expand-button' is a chrome-specific wrapper around paper-icon-button that
* toggles between an opened (expanded) and closed state.
*
* Example:
*
* <cr-expand-button expanded="{{sectionIsExpanded}}"></cr-expand-button>
*/
Polymer({
is: 'cr-expand-button',

properties: {
/**
* If true, the button is in the expanded state and will show the
* 'expand-less' icon. If false, the button shows the 'expand-more' icon.
*/
expanded: {
type: Boolean,
value: false,
notify: true
},

/**
* If true, the button will be disabled and greyed out.
*/
disabled: {
type: Boolean,
value: false,
reflectToAttribute: true
},
},

iconName_: function(expanded) {
return expanded ? 'expand-less' : 'expand-more';
}
});
/* Copyright 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */

/* Note: we use display: block here to avoid positioning issues related to

the use of overflow: hidden. */
:host {
display: block;
height: 50px;
overflow: hidden;
position: relative;
width: 50px;
}

#icon {
height: 100%;
position: absolute;
width: 100%;
}
#icon.multi-level {
height: 500%;
}

#icon.level0 {
top: 0px;
}

#icon.level1 {
top: -100%;
}

#icon.level2 {
top: -200%;
}

#icon.level3 {
top: -300%;
}

#icon.level4 {
top: -400%;
}

/* Connecting animation */

#icon.connecting {
-webkit-animation: levels 1s infinite;
-webkit-animation-timing-function: steps(4, start);
}

@-webkit-keyframes levels {
from {
top: 0%;
}
to {
top: -400%;
}
}

/* Badges. */
/* Note: These use left/right because we do not reverse the badges for RTL. */

/* Upper-left corner */
#technology {
height: 40%;
left: 0px;
position: absolute;
top: 0px;
}

/* Lower-right corner */
#roaming,
#secure {
height: 40%;
left: 60%;
position: absolute;
top: 60%;
 width: 40%;
}
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">

<dom-module id="cr-network-icon">
<link rel="import" type="css" href="cr_network_icon.css">
<template>
<img id="icon" src$="[[toImageSrc_(iconType_)]]" alt="">
<img id="technology" alt="" src$="[[toBadgeImageSrc_(technology_)]]"
hidden$="[[!technology_]]">
<img id="roaming" alt=""
src="chrome://resources/cr_elements/network/badge_roaming.png"
hidden$="[[!roaming_]]">
<img id="secure" alt=""
src="chrome://resources/cr_elements/network/badge_secure.png"
hidden$="[[!secure_]]">
</template>
<script src="cr_network_icon.js"></script>
</dom-module>
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
* @fileoverview Polymer element for rendering network icons based on ONC
* state properties.
*/

/**
* @typedef {{
* showBadges: boolean,
* showDisconnected: boolean,
* strength: number
* }}
*/
var NetworkIconParamType;

(function() {
/** @const {string} */ var RESOURCE_IMAGE_BASE =
'chrome://resources/cr_elements/network/';

/** @const {string} */ var RESOURCE_IMAGE_EXT = '.png';

/**
* Gets the icon type from the network type. This allows multiple types
* (i.e. Cellular, WiMAX) to map to the same icon type (i.e. mobile).
* @param {chrome.networkingPrivate.NetworkType} networkType
* @return {string} The icon type: ethernet, wifi, mobile, or vpn.
*/
function getIconTypeFromNetworkType(networkType) {
if (!networkType || networkType == CrOnc.Type.ETHERNET)
return 'ethernet';
else if (networkType == CrOnc.Type.WI_FI)
return 'wifi';
else if (networkType == CrOnc.Type.CELLULAR)
return 'mobile';
else if (networkType == CrOnc.Type.WI_MAX)
return 'mobile';
 else if (networkType == CrOnc.Type.VPN)
return 'vpn';

console.error('Unrecognized network type for icon: ' + networkType);

return 'ethernet';
}

/**
* Polymer class definition for 'cr-network-icon'.
*/
Polymer({
is: 'cr-network-icon',

properties: {
/**
* If set, the ONC properties will be used to display the icon. This may
* either be the complete set of NetworkProperties or the subset of
* NetworkStateProperties.
* @type {!CrOnc.NetworkProperties|!CrOnc.NetworkStateProperties|undefined}
*/
networkState: {
type: Object,
observer: 'networkStateChanged_'
},

/**
* If set, the ONC network type will be used to display the icon.
* @type {?chrome.networkingPrivate.NetworkType}
*/
networkType: {
type: String,
value: null,
observer: 'networkTypeChanged_'
},

/**
* If true, the icon is part of a list of networks and may be displayed
* differently, e.g. the disconnected image will never be shown for
* list items.
*/
isListItem: {
type: Boolean,
value: false,
observer: 'isListItemChanged_'
},

/** The icon type to use for the base image of the icon. */
iconType_: {
type: String,
value: 'ethernet'
},

/** Set to true to show a badge for roaming networks. */

roaming_: {
type: Boolean,
value: false
},

/** Set to true to show a badge for secure networks. */

 secure_: {
type: Boolean,
value: false
},

/** Set to the name of a technology to show show a badge. */

technology_: {
type: String,
value: ''
},
},

/**
* Polymer networkState changed method. Updates the icon based on the
* network state.
* @private
*/
networkStateChanged_: function() {
if (!this.networkState)
return;

this.networkType = null;
this.iconType_ = getIconTypeFromNetworkType(this.networkState.Type);
var strength = CrOnc.getSignalStrength(this.networkState);
var params = /** @type {NetworkIconParamType} */ {
showBadges: true,
showDisconnected: !this.isListItem,
strength: strength
};
this.setIcon_(params);
},

/**
* Polymer networkType changed method. Updates the icon based on the type
* of network, showing a disconnected icon where appropriate and no badges.
* @private
*/
networkTypeChanged_: function() {
if (!this.networkType)
return;

this.networkState = undefined;
this.iconType_ = getIconTypeFromNetworkType(this.networkType);
var params = /** @type {NetworkIconParamType} */ {
showBadges: false,
showDisconnected: true,
strength: 0,
};
this.setIcon_(params);
},

/**
* Polymer isListItem changed method.
* @private
*/
isListItemChanged_: function() {
if (this.networkState)
this.networkStateChanged_();
else if (this.networkType)
 this.networkTypeChanged_();
},

/**
* Returns the url for an image based on identifier |id|.
* @param {string} id The identifier describing the image.
* @return {string} The url to use for the image 'src' property.
* @private
*/
toImageSrc_: function(id) {
return id ? RESOURCE_IMAGE_BASE + id + RESOURCE_IMAGE_EXT : '';
},

/**
* Returns the url for a badge image based on identifier |id|.
* @param {string} id The identifier describing the badge.
* @return {string} The url to use for the badge image 'src' property.
* @private
*/
toBadgeImageSrc_: function(id) {
return id ? this.toImageSrc_('badge_' + id) : '';
},

/**
* Sets the icon and badge based on the current state and |strength|.
* @param {!NetworkIconParamType} params Set of params describing the icon.
* @private
*/
setIcon_: function(params) {
var icon = this.$.icon;

var multiLevel = (this.iconType_ == 'wifi' || this.iconType_ == 'mobile');

if (this.networkState && multiLevel) {

this.setMultiLevelIcon_(params);
} else {
icon.classList.toggle('multi-level', multiLevel);
icon.classList.toggle('level0', multiLevel);
}

this.setIconBadges_(params);
},

/**
* Toggles icon classes based on strength and connecting properties.
* |this.networkState| is expected to be specified.
* @param {!NetworkIconParamType} params Set of params describing the icon.
* @private
*/
setMultiLevelIcon_: function(params) {
// Set the strength or connecting properties.
var networkState = this.networkState;

var connectionState = networkState.ConnectionState;

var connecting = false;
var strength = -1;
if (connectionState == CrOnc.ConnectionState.CONNECTING) {
strength = 0;
connecting = true;
 } else if (connectionState == CrOnc.ConnectionState.CONNECTED ||
!params.showDisconnected) {
strength = params.strength || 0;
}

var icon = this.$.icon;

icon.classList.toggle('multi-level', true);
icon.classList.toggle('connecting', connecting);
icon.classList.toggle('level0', strength < 0);
icon.classList.toggle('level1', strength >= 0 && strength <= 25);
icon.classList.toggle('level2', strength > 25 && strength <= 50);
icon.classList.toggle('level3', strength > 50 && strength <= 75);
icon.classList.toggle('level4', strength > 75);
},

/**
* Sets the icon badge visibility properties: roaming, secure, technology.
* @param {!NetworkIconParamType} params Set of params describing the icon.
* @private
*/
setIconBadges_: function(params) {
var networkState = this.networkState;

var type =
(params.showBadges && networkState) ? networkState.Type : '';
if (type == CrOnc.Type.WI_FI) {
this.roaming_ = false;
var security = networkState.WiFi ? networkState.WiFi.Security : '';
this.secure_ = !!security && security != 'None';
this.technology_ = '';
} else if (type == CrOnc.Type.WI_MAX) {
this.roaming_ = false;
this.secure_ = false;
this.technology_ = '4g';
} else if (type == CrOnc.Type.CELLULAR && networkState.Cellular) {
this.roaming_ =
networkState.Cellular.RoamingState == CrOnc.RoamingState.ROAMING;
this.secure_ = false;
var oncTechnology = networkState.Cellular.NetworkTechnology;
switch (oncTechnology) {
case CrOnc.NetworkTechnology.CDMA1XRTT:
this.technology_ = '1x';
break;
case CrOnc.NetworkTechnology.EDGE:
this.technology_ = 'edge';
break;
case CrOnc.NetworkTechnology.EVDO:
this.technology_ = 'evdo';
break;
case CrOnc.NetworkTechnology.GPRS:
case CrOnc.NetworkTechnology.GSM:
this.technology_ = 'gsm';
break;
case CrOnc.NetworkTechnology.HSPA:
this.technology_ = 'hspa';
break;
case CrOnc.NetworkTechnology.HSPA_PLUS:
this.technology_ = 'hspa_plus';
break;
 case CrOnc.NetworkTechnology.LTE:
this.technology_ = 'lte';
break;
case CrOnc.NetworkTechnology.LTE_ADVANCED:
this.technology_ = 'lte_advanced';
break;
case CrOnc.NetworkTechnology.UMTS:
this.technology_ = '3g';
break;
}
} else {
this.roaming_ = false;
this.secure_ = false;
this.technology_ = '';
}
},
});
})();
/* Copyright 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */

#container {
max-height: 1000px;
min-height: 50px;
overflow-y: auto;
}

/* Note: the 'flex' attribute on core-list doesn't work as expected. */

#networkList {
flex: 1;
}

cr-network-list-item:not(:last-of-type) {
border-bottom: 1px solid lightgrey;
}
<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/network/cr_network_list_item.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">

<dom-module id="cr-network-list">
<link rel="import" type="css" href="cr_network_list.css">
<template>
<iron-collapse opened="{{opened}}">
<div id="container" class="layout vertical flex">
<template is="dom-repeat" items="[[networks]]">
<cr-network-list-item network-state="[[item]]"
list-item-type="[[listType]]" on-tap="onTap_">
</cr-network-list-item>
</template>
</div>
</iron-collapse>
</template>
<script src="cr_network_list.js"></script>
</dom-module>
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
* @fileoverview Polymer element for displaying a collapsable list of networks.
*/

(function() {

/**
* Polymer class definition for 'cr-network-list'.
* TODO(stevenjb): Update with iron-list(?) once implemented in Polymer 1.0.
*/
Polymer({
is: 'cr-network-list',

properties: {
/**
* The maximum height in pixels for the list.
*/
maxHeight: {
type: Number,
value: 1000,
observer: 'maxHeightChanged_'
},

/**
* Determines how the list item will be displayed:
* 'visible' - displays the network icon (with strength) and name
* 'known' - displays the visible info along with a toggle icon for the
* preferred status and a remove button.
*/
listType: {
type: String,
value: 'visible'
},

/**
* The list of network state properties for the items to display.
*
* @type {!Array<!CrOnc.NetworkStateProperties>}
*/
networks: {
type: Array,
value: function() { return []; }
},

/**
* True if the list is opened.
*/
opened: {
type: Boolean,
value: true
}
},

/**
 * Polymer maxHeight changed method.
*/
maxHeightChanged_: function() {
this.$.container.style.maxHeight = this.maxHeight + 'px';
},

/**
* Event triggered when a list item is tapped.
* @param {!{model: {item: !CrOnc.NetworkStateProperties}}} event
* @private
*/
onTap_: function(event) {
this.fire('selected', event.model.item);
},
});
})();
/* Copyright 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */

:host {
display: inline-block;
}

span {
cursor: pointer;
}

#divOuter {
border-style: none;
display: flex;
flex-direction: row;
margin: 0;
padding: 4px;
}

#divOuter[is-list-item]:hover {
background-color: lightgrey;
}

#divIcon {
display: flex;
flex: 0 0 auto;
flex-direction: column;
justify-content: center;
}

#icon {
height: 32px;
width: 32px;
}

#divDetail {
display: flex;
flex: 1 0 auto;
flex-direction: row;
}

#divText {
 display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: center;
}

#networkName {
-webkit-margin-start: 8px;
font-size: 16px;
}

#networkStateText {
-webkit-margin-start: 8px;
color: grey;
font-size: 14px;
}

.buttons {
align-items: center;
display: flex;
flex-direction: row;
}

.buttons paper-icon-button {
text-align: center;
}

.known paper-icon-button {
width: 60px;
}

.connected {
font-weight: bold;
}
<link rel="import" href="chrome://resources/html/polymer.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-icons/iron-
icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-
icon-button.html">
<link rel="import"
href="chrome://resources/cr_elements/network/cr_network_icon.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">

<dom-module id="cr-network-list-item">
<link rel="import" type="css" href="cr_network_list_item.css">
<template>
<div id="divOuter" is-list-item$="[[isListItem_(listItemType)]]">
<div id="divIcon">
<cr-network-icon id="icon" is-list-item="[[isListItem_(listItemType)]]"
network-state="[[networkState]]">
</cr-network-icon>
</div>
<div id="divText" class="layout horizontal flex">
<span id="networkName"></span>
<span id="networkStateText" hidden$="[[isListItem_(listItemType)]]">
</span>
</div>
 <div class="buttons"
hidden$="[[!isListItemType_(listItemType, 'visible')]]">
<paper-icon-button icon="settings" on-tap="fireShowDetails_">
</paper-icon-button>
</div>
<div class="known buttons"
hidden$="[[!isListItemType_(listItemType, 'known')]]">
<paper-icon-button icon="[[sharedIcon_(networkState)]]" disabled>
</paper-icon-button>
<paper-icon-button icon="[[preferredIcon_(networkState)]]"
disabled$="[[isPolicyManaged_(networkState)]]"
on-tap="fireTogglePreferred_">
</paper-icon-button>
<paper-icon-button icon="clear"
disabled$="[[isPolicyManaged_(networkState)]]"
on-tap="fireRemove_">
</paper-icon-button>
</div>
</div>
</template>
<script src="cr_network_list_item.js"></script>
</dom-module>
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
* @fileoverview Polymer element for displaying information about a network
* in a list or summary based on ONC state properties.
*/
(function() {
'use strict';

/**
* TODO(stevenjb): Replace getText with a proper localization function that
* handles string substitution.
* Performs argument substitution, replacing $1, $2, etc in 'text' with
* corresponding entries in |args|.
* @param {string} text The string to perform the substitution on.
* @param {?Array<string>=} opt_args The arguments to replace $1, $2, etc with.
*/
function getText(text, opt_args) {
var res;
if (loadTimeData && loadTimeData.data_)
res = loadTimeData.getString(text) || text;
else
res = text;
if (!opt_args)
return res;
for (let i = 0; i < opt_args.length; ++i) {
let key = '$' + (i + 1);
res = res.replace(key, opt_args[i]);
}
return res;
}

/**
* Returns the appropriate connection state text.
* @param {string} state The connection state.
 * @param {string} name The name of the network.
*/
function getConnectionStateText(state, name) {
if (state == CrOnc.ConnectionState.CONNECTED)
return getText('networkConnected', [name]);
if (state == CrOnc.ConnectionState.CONNECTING)
return getText('networkConnecting', [name]);
if (state == CrOnc.ConnectionState.NOT_CONNECTED)
return getText('networkNotConnected');
return getText(state);
};

/**
* Returns the name to display for |network|.
* @param {?CrOnc.NetworkStateProperties} network
*/
function getNetworkName(network) {
var name = network.Name;
if (!name)
return getText('OncType' + network.Type);
if (network.Type == 'VPN' && network.VPN &&
network.VPN.Type == 'ThirdPartyVPN' && network.VPN.ThirdPartyVPN) {
var providerName = network.VPN.ThirdPartyVPN.ProviderName;
if (providerName)
return getText('vpnNameTemplate', [providerName, name]);
}
return name;
}

/**
* Polymer class definition for 'cr-network-list-item'.
*/
Polymer({
is: 'cr-network-list-item',

properties: {
/**
* The ONC data properties used to display the list item.
*
* @type {?CrOnc.NetworkStateProperties}
*/
networkState: {
type: Object,
value: null,
observer: 'networkStateChanged_'
},

/**
* Determines how the list item will be displayed:
* 'visible' - displays the network icon (with strength) and name
* 'known' - displays the visible info along with a toggle icon for the
* preferred status and a remove button.
* 'none' - The element is a stand-alone item (e.g. part of a summary)
* and displays the name of the network type plus the network name
* and connection state.
*/
listItemType: {
type: String,
value: 'none',
 observer: 'networkStateChanged_'
},
},

/**
* Polymer networkState changed method. Updates the element based on the
* network state.
*/
networkStateChanged_: function() {
if (!this.networkState)
return;

var network = this.networkState;

var isDisconnected =
network.ConnectionState == CrOnc.ConnectionState.NOT_CONNECTED;
var name = getNetworkName(network);
if (this.isListItem_(this.listItemType)) {
this.$.networkName.textContent = name;
this.$.networkName.classList.toggle('connected', !isDisconnected);
return;
}
if (network.Name && network.ConnectionState) {
this.$.networkName.textContent = getText('OncType' + network.Type);
this.$.networkName.classList.toggle('connected', false);
this.$.networkStateText.textContent =
getConnectionStateText(network.ConnectionState, name);
this.$.networkStateText.classList.toggle('connected', !isDisconnected);
return;
}
this.$.networkName.textContent = getText('OncType' + network.Type);
this.$.networkName.classList.toggle('connected', false);
this.$.networkStateText.textContent = getText('networkDisabled');
this.$.networkStateText.classList.toggle('connected', false);

if (network.Type == CrOnc.Type.CELLULAR) {
if (!network.GUID)
this.$.networkStateText.textContent = getText('networkDisabled');
}
},

/**
* @param {?CrOnc.NetworkStateProperties} networkState
* @return {string} The icon to use for the shared button indicator.
* @private
*/
sharedIcon_: function(networkState) {
var source = (networkState && networkState.Source) || '';
var isShared = (source == CrOnc.Source.DEVICE ||
source == CrOnc.Source.DEVICE_POLICY);
return isShared ? 'check' : '';
},

/**
* @param {?CrOnc.NetworkStateProperties} networkState
* @return {string} The icon to use for the preferred button.
* @private
*/
preferredIcon_: function(networkState) {
var isPreferred = networkState && networkState.Priority > 0;
 return isPreferred ? 'star' : 'star-border';
},

/**
* Fires a 'show-details' event with |this.networkState| as the details.
* @param {Event} event
* @private
*/
fireShowDetails_: function(event) {
this.fire('show-detail', this.networkState);
event.stopPropagation();
},

/**
* Fires the 'toggle-preferred' event with |this.networkState| as the details.
* @param {Event} event
* @private
*/
fireTogglePreferred_: function(event) {
this.fire('toggle-preferred', this.networkState);
event.stopPropagation();
},

/**
* Fires the 'remove' event with |this.networkState| as the details.
* @param {Event} event
* @private
*/
fireRemove_: function(event) {
this.fire('remove', this.networkState);
event.stopPropagation();
},

/**
* @param {?CrOnc.NetworkStateProperties} networkState
* @return {boolean} True if the network is managed by a policy.
* @private
*/
isPolicyManaged_: function(networkState) {
var source = (networkState && networkState.Source) || '';
var isPolicyManaged = source == CrOnc.Source.USER_POLICY ||
source == CrOnc.Source.DEVICE_POLICY;
return isPolicyManaged;
},

/**
* @param {string} listItemType The list item type.
* @return {boolean} True if the the list item type is not 'none'.
* @private
*/
isListItem_: function(listItemType) {
return listItemType != 'none';
},

/**
* @param {string} listItemType The list item type.
* @param {string} type The type to match against.
* @return {boolean} True if the the list item type matches |type|.
* @private
 */
isListItemType_: function(listItemType, type) {
return listItemType == type;
},
});
})();
/* Copyright 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */

:host {
display: inline-block;
}
<link rel="import" href="chrome://resources/html/polymer.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">
<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">

<dom-module id="cr-network-select">
<link rel="import" type="css" href="cr_network_select.css">
<template>
<div class="layout vertical">
<div class="layout horizontal center">
<cr-network-list-item class="flex" hidden$="[[!showActive]]"
network-state="[[activeNetworkState]]">
</cr-network-list-item>
<cr-expand-button toggles hidden$="[[!expandable]]"
expanded="{{networkListOpened}}">
</cr-expand-button>
</div>
<cr-network-list opened="[[networkListOpened]]" max-height="[[maxHeight]]"
networks="[[networkStateList]]"
on-selected="onNetworkListItemSelected_">
</cr-network-list>
</div>
</template>
<script src="cr_network_select.js"></script>
</dom-module>
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
* @fileoverview Polymer element wrapping cr-network-list including the
* networkingPrivate calls to populate it.
*/

Polymer({
is: 'cr-network-select',

properties: {
/**
* Network state for the active network.
 * @type {?CrOnc.NetworkStateProperties}
*/
activeNetworkState: {
type: Object,
value: null
},

/**
* If true, the element includes an 'expand' button that toggles the
* expanded state of the network list.
*/
expandable: {
type: Boolean,
value: false
},

/**
* The maximum height in pixels for the list.
*/
maxHeight: {
type: Number,
value: 1000
},

/**
* If true, expand the network list.
*/
networkListOpened: {
type: Boolean,
value: true,
observer: "networkListOpenedChanged_"
},

/**
* If true, show the active network state.
*/
showActive: {
type: Boolean,
value: false
},

/**
* List of all network state data for all visible networks.
* @type {!Array<!CrOnc.NetworkStateProperties>}
*/
networkStateList: {
type: Array,
value: function() { return []; }
}
},

/**
* Listener function for chrome.networkingPrivate.onNetworkListChanged event.
* @type {function(!Array<string>)}
* @private
*/
networkListChangedListener_: function() {},

/**
 * Listener function for chrome.networkingPrivate.onDeviceStateListChanged
* event.
* @type {function(!Array<string>)}
* @private
*/
deviceStateListChangedListener_: function() {},

/** @override */
attached: function() {
this.networkListChangedListener_ = this.refreshNetworks_.bind(this);
chrome.networkingPrivate.onNetworkListChanged.addListener(
this.networkListChangedListener_);

this.deviceStateListChangedListener_ = this.refreshNetworks_.bind(this);
chrome.networkingPrivate.onDeviceStateListChanged.addListener(
this.deviceStateListChangedListener_);

this.refreshNetworks_();
chrome.networkingPrivate.requestNetworkScan();
},

/** @override */
detached: function() {
chrome.networkingPrivate.onNetworkListChanged.removeListener(
this.networkListChangedListener_);
chrome.networkingPrivate.onDeviceStateListChanged.removeListener(
this.deviceStateListChangedListener_);
},

/**
* Polymer chnaged function.
* @private
*/
networkListOpenedChanged_: function() {
if (this.networkListOpened)
chrome.networkingPrivate.requestNetworkScan();
},

/**
* Request the list of visible networks.
* @private
*/
refreshNetworks_: function() {
var filter = {
networkType: chrome.networkingPrivate.NetworkType.ALL,
visible: true,
configured: false
};
chrome.networkingPrivate.getNetworks(
filter, this.getNetworksCallback_.bind(this));
},

/**
* @param {!Array<!CrOnc.NetworkStateProperties>} states
* @private
*/
getNetworksCallback_: function(states) {
this.activeNetworkState = states[0] || null;
this.networkStateList = states;
 },

/**
* Event triggered when a cr-network-list-item is selected.
* @param {!{detail: !CrOnc.NetworkStateProperties}} event
* @private
*/
onNetworkListItemSelected_: function(event) {
var state = event.detail;
if (state.ConnectionState != CrOnc.ConnectionState.NOT_CONNECTED)
return;
chrome.networkingPrivate.startConnect(state.GUID, function() {
var lastError = chrome.runtime.lastError;
if (lastError && lastError != 'connecting')
console.error('networkingPrivate.startConnect error: ' + lastError);
});
},
});
<script src="cr_onc_types.js"></script>
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
* @fileoverview This file has two parts:
*
* 1. Typedefs for network properties. Note: These 'types' define a subset of
* ONC properties in the ONC data dictionary. The first letter is capitalized to
* match the ONC spec and avoid an extra layer of translation.
* See components/onc/docs/onc_spec.html for the complete spec.
* TODO(stevenjb): Replace with chrome.networkingPrivate.NetworkStateProperties
* once that is fully defined.
*
* 2. Helper functions to facilitate extracting and setting ONC properties.
*/

var CrOnc = {};

/** @typedef {chrome.networkingPrivate.NetworkStateProperties} */

CrOnc.NetworkStateProperties;

/** @typedef {chrome.networkingPrivate.ManagedProperties} */

CrOnc.NetworkProperties;

/** @typedef {string|number|boolean|Object|Array<Object>} */

CrOnc.NetworkPropertyType;

/**
* Generic managed property type. This should match any of the basic managed
* types in chrome.networkingPrivate, e.g. networkingPrivate.ManagedBoolean.
* @typedef {{
* Active: (!CrOnc.NetworkPropertyType|undefined),
* Effective: (string|undefined),
* UserPolicy: (!CrOnc.NetworkPropertyType|undefined),
* DevicePolicy: (!CrOnc.NetworkPropertyType|undefined),
* UserSetting: (!CrOnc.NetworkPropertyType|undefined),
* SharedSetting: (!CrOnc.NetworkPropertyType|undefined),
* UserEditable: (boolean|undefined),
* DeviceEditable: (boolean|undefined)
 * }}
*/
CrOnc.ManagedProperty;

/** @typedef {chrome.networkingPrivate.SIMLockStatus} */

CrOnc.SIMLockStatus;

/** @typedef {chrome.networkingPrivate.APNProperties} */

CrOnc.APNProperties;

/** @typedef {chrome.networkingPrivate.CellularSimState} */

CrOnc.CellularSimState;

/** @typedef {chrome.networkingPrivate.IPConfigProperties} */

CrOnc.IPConfigProperties;

/** @typedef {chrome.networkingPrivate.ManualProxySettings} */

CrOnc.ManualProxySettings;

/** @typedef {chrome.networkingPrivate.ProxyLocation} */

CrOnc.ProxyLocation;

/** @typedef {chrome.networkingPrivate.ProxySettings} */

CrOnc.ProxySettings;

// Modified version of IPConfigProperties to store RoutingPrefix as a

// human-readable string instead of as a number.
/**
* @typedef {{
* Gateway: (string|undefined),
* IPAddress: (string|undefined),
* NameServers: (!Array<string>|undefined),
* RoutingPrefix: (string|undefined),
* Type: (string|undefined),
* WebProxyAutoDiscoveryUrl: (string|undefined)
* }}
*/
CrOnc.IPConfigUIProperties;

/** @typedef {chrome.networkingPrivate.PaymentPortal} */

CrOnc.PaymentPortal;

CrOnc.ActivationState = chrome.networkingPrivate.ActivationStateType;
CrOnc.ConnectionState = chrome.networkingPrivate.ConnectionStateType;
CrOnc.IPConfigType = chrome.networkingPrivate.IPConfigType;
CrOnc.ProxySettingsType = chrome.networkingPrivate.ProxySettingsType;
CrOnc.Type = chrome.networkingPrivate.NetworkType;

/** @enum {string} */

CrOnc.IPType = {
IPV4: 'IPv4',
IPV6: 'IPv6',
};

/** @enum {string} */

CrOnc.LockType = {
NONE: '',
PIN: 'sim-pin',
PUK: 'sim-puk',
};

/** @enum {string} */

CrOnc.NetworkTechnology = {
CDMA1XRTT: 'CDMA1XRTT',
EDGE: 'EDGE',
EVDO: 'EVDO',
GPRS: 'GPRS',
GSM: 'GSM',
HSPA: 'HSPA',
HSPA_PLUS: 'HSPAPlus',
LTE: 'LTE',
LTE_ADVANCED: 'LTEAdvanced',
UMTS: 'UMTS',
UNKNOWN: 'Unknown',
};

/** @enum {string} */

CrOnc.RoamingState = {
HOME: 'Home',
REQUIRED: 'Required',
ROAMING: 'Roaming',
UNKNOWN: 'Unknown',
};

/** @enum {string} */

CrOnc.Security = {
NONE: 'None',
WEP_8021X: 'WEP-8021X',
WEP_PSK: 'WEP-PSK',
WPA_EAP: 'WPA-EAP',
WPA_PSK: 'WPA-PSK',
};

/** @enum {string} */

CrOnc.Source = {
NONE: 'None',
DEVICE: 'Device',
DEVICE_POLICY: 'DevicePolicy',
USER: 'User',
USER_POLICY: 'UserPolicy',
};

/**
* Helper function to retrieve the active ONC property value from a managed
* dictionary.
* @param {!CrOnc.ManagedProperty|undefined} property The managed dictionary
* for the property if it exists or undefined.
* @return {!CrOnc.NetworkPropertyType|undefined} The active property value
* if it exists, otherwise undefined.
*/
CrOnc.getActiveValue = function(property) {
if (property == undefined)
return undefined;

if (typeof property != 'object') {

console.error('getActiveValue called on non object: ' +
JSON.stringify(property));
return undefined;
 }

// Return the Active value if it exists.

if ('Active' in property)
return property['Active'];

// If no Active value is defined, return the effective value.

if ('Effective' in property) {
var effective = property.Effective;
if (effective in property)
return property[effective];
}

console.error('getActiveValue called on invalid ONC object: ' +

JSON.stringify(property));
return undefined;
};

/**
* Converts a managed ONC dictionary into an unmanaged dictionary (i.e. a
* dictionary of active values).
* NOTE: This is not intended to be used with dictionaries that contain
* nested dictionaries. This will fail and return undefined in that case.
* @param {!Object|undefined} properties A managed ONC dictionary
* @return {!Object|undefined} An unmanaged version of |properties|.
*/
CrOnc.getSimpleActiveProperties = function(properties) {
'use strict';
if (!properties)
return undefined;
var result = {};
var keys = Object.keys(properties);
for (let k of keys) {
var prop = CrOnc.getActiveValue(properties[k]);
if (prop == undefined) {
console.error('getSimpleActiveProperties called on invalid ONC object: ' +
JSON.stringify(properties));
return undefined;
}
result[k] = prop;
}
return result;
};

/**
* Returns an IPConfigProperties object for |type|. For IPV4, these will be the
* static properties if IPAddressConfigType is Static and StaticIPConfig is set.
* @param {!CrOnc.NetworkPropert