Skip to content

GitLab

T
tangled
Commit 18f57643 authored by stevenjb's avatar stevenjb Committed by Commit bot
Browse files
Options

Settings/Oobe: Simplify cr-network-select and use flex 

This CL:
* Removes unused / unneeded code from cr-network-select
* Updates cr-network-select and cr-network-list to use flex layout
* Re-factors network_ui.html to use flex

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

Review-Url: https://codereview.chromium.org/2627353003
Cr-Commit-Position: refs/heads/master@{#443466}
parent feda9ca7
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 205 deletions
chrome/app/settings_strings.grdp
View file @ 18f57643
......@@ -1256,9 +1256,6 @@
<message name="IDS_NETWORK_LIST_DISABLED" desc="Settings > Internet, text in network summary when the network type is connected">
Disabled
</message>
<message name="IDS_NETWORK_LIST_EXPAND_ACCESSIBILITY_LABEL" desc="Label for the button that toggles showing the list of available network connections. Only visible by screen reader software.">
Show available network connections
</message>
<message name="IDS_NETWORK_LIST_NOT_CONNECTED" desc="Settings > Internet, text in network summary when there is no network for the type.">
No network
</message>
......
chrome/browser/resources/chromeos/login/oobe_welcome.css
View file @ 18f57643
......@@ -37,6 +37,11 @@
}
/************* Network Selection Screen **************/
#networkSelectionScreen .footer {
margin-bottom: 10px;
max-height: 297px;
}
#networkSelectionScreen .bottom-buttons {
padding: 0 6px; /* = 8px - 2px back button border */
}
......
chrome/browser/resources/chromeos/login/oobe_welcome.html
View file @ 18f57643
......@@ -187,8 +187,7 @@
on-network-connected="onNetworkConnected_"
on-network-item-selected="onNetworkListNetworkItemSelected_"
on-custom-item-selected="onNetworkListCustomItemSelected_"
custom-items="[[_getNetworkCustomItems()]]"
max-height="307">
custom-items="[[_getNetworkCustomItems()]]">
</cr-network-select>
</div>
<div class="bottom-buttons layout horizontal start-justified">
......
chrome/browser/resources/chromeos/login/oobe_welcome.js
View file @ 18f57643
......@@ -72,6 +72,7 @@ Polymer({
networkSelectionScreenShown: {
type: Boolean,
value: false,
observer: 'networkSelectionScreenShownChanged_',
},
/**
......@@ -133,6 +134,18 @@ Polymer({
this.$.welcomeNextButton.focus();
},
/** @private */
networkSelectionScreenShownChanged_: function() {
if (this.networkSelectionScreenShown) {
// After #networkSelect is stamped, trigger a refresh so that the list
// will be updated with the currently visible networks and sized
// appropriately.
this.async(function() {
this.$.networkSelect.refreshNetworks();
}.bind(this));
}
},
/**
* Handles "visible" event.
* @private
......
chrome/browser/resources/chromeos/network_ui/network_ui.css
View file @ 18f57643
......@@ -2,29 +2,20 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
div {
margin: 10px 0;
}
paper-button[raised].colored {
background: rgb(66, 133, 244);
color: white;
}
#header {
margin: 5px;
}
#header a {
padding: 0 4px;
}
cr-network-select {
padding: 5px;
#select-div {
height: 100px;
width: 500px;
}
#refresh {
margin-top: 10px;
padding: 5px;
}
.state-table {
border-collapse: collapse;
}
......@@ -60,8 +51,3 @@ cr-network-select {
height: 32px;
width: 32px;
}
#advanced-options {
margin-top: 10px;
text-align: center;
}
chrome/browser/resources/chromeos/network_ui/network_ui.html
View file @ 18f57643
......@@ -9,6 +9,7 @@
<link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_network_select.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.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">
<script src="chrome://resources/js/load_time_data.js"></script>
......@@ -18,11 +19,27 @@
</head>
<body>
<div id="header">
<p i18n-content="autoRefreshText"></p>
<div class="layout vertical">
<div i18n-content="autoRefreshText"></div>
<span i18n-values=".innerHTML:deviceLogLinkText"></span>
<div id="advanced-options">
<span i18n-content="clickToExpandText"></span>
<h3 i18n-content="globalPolicyLabel"></h3>
<div id="global-policy"></div>
<h3>CrNetworkSelect</h3>
<div id="select-div" class="layout vertical">
<cr-network-select class="flex" handle-network-item-selected>
</cr-network-select>
</div>
<div>
<paper-button raised class="colored" id="refresh"
i18n-content="networkRefreshText">
</paper-button>
</div>
<h3 i18n-content="visibleNetworksLabel"></h3>
<div i18n-content="clickToExpandText"></div>
<div>
<span i18n-content="propertyFormatText"></span>
<select id="get-property-format">
<option value="normal" i18n-content="normalFormatOption"></option>
......@@ -32,56 +49,42 @@
</select>
</div>
<cr-network-select expandable show-active max-height="100"
handle-network-item-selected>
</cr-network-select>
<table id="network-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>GUID</td>
<td>Path</td>
<td>Name</td>
<td>Type</td>
<td>State</td>
<td>Connect?</td>
<td>Error</td>
<td>Security</td>
<td>Tech</td>
<td>Activation</td>
<td>Roam</td>
<td>Frequency</td>
<td>Strength</td>
</tr>
</table>
<div>
<paper-button raised class="colored" id="refresh"
i18n-content="networkRefreshText">
</paper-button>
</div>
<h3 i18n-content="favoriteNetworksLabel"></h3>
<table id="favorite-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>GUID</td>
<td>Path</td>
<td>Name</td>
<td>Type</td>
<td>Profile</td>
<td>Visible</td>
<td>ONC Source</td>
</tr>
</table>
</div>
<h3 i18n-content="globalPolicyLabel"></h3>
<div id="global-policy"></div>
<h3 i18n-content="visibleNetworksLabel"></h3>
<table id="network-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>GUID</td>
<td>Path</td>
<td>Name</td>
<td>Type</td>
<td>State</td>
<td>Connect?</td>
<td>Error</td>
<td>Security</td>
<td>Tech</td>
<td>Activation</td>
<td>Roam</td>
<td>Frequency</td>
<td>Strength</td>
</tr>
</table>
<h3 i18n-content="favoriteNetworksLabel"></h3>
<table id="favorite-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>GUID</td>
<td>Path</td>
<td>Name</td>
<td>Type</td>
<td>Profile</td>
<td>Visible</td>
<td>ONC Source</td>
</tr>
</table>
<script src="chrome://resources/js/i18n_template.js"></script>
</body>
</html>
chrome/browser/resources/chromeos/network_ui/network_ui.js
View file @ 18f57643
......@@ -319,7 +319,7 @@ var NetworkUI = (function() {
var requestGlobalPolicy = function() {
chrome.networkingPrivate.getGlobalPolicy(function(policy) {
document.querySelector('#global-policy').textContent =
JSON.stringify(policy);
JSON.stringify(policy, null, '\t');
});
};
......
chrome/browser/resources/settings/internet_page/internet_known_networks_page.js
View file @ 18f57643
......@@ -20,14 +20,6 @@ Polymer({
observer: 'networkTypeChanged_',
},
/**
* The maximum height in pixels for the list of networks.
*/
maxHeight: {
type: Number,
value: 500,
},
/**
* Interface for networkingPrivate calls, passed from internet_page.
* @type {NetworkingPrivate}
......
chrome/browser/resources/settings/internet_page/network_summary_item.html
View file @ 18f57643
......@@ -29,6 +29,10 @@
min-height: var(--settings-row-min-height);
}
.padded {
@apply(--settings-list-frame-padding);
}
#buttons {
align-items: center;
}
......@@ -49,7 +53,8 @@
#networkList {
margin: 5px 0 10px;
max-height: 400px;
max-height: 200px;
min-height: 50px;
}
</style>
<div class="settings-box two-line" actionable on-tap="onDetailsTap_">
......@@ -98,9 +103,9 @@
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>
<div class="layout vertical padded">
<cr-network-list id="networkList" networks="[[networkStateList]]"
show-buttons>
</cr-network-list>
<template is="dom-if"
if="[[knownNetworksIsVisible_(activeNetworkState)]]">
......
chrome/browser/resources/settings/internet_page/network_summary_item.js
View file @ 18f57643
......@@ -42,12 +42,6 @@ Polymer({
},
},
/** The maximum height in pixels for the list of networks. */
maxHeight: {
type: Number,
value: 200,
},
/**
* Interface for networkingPrivate calls, passed from internet_page.
* @type {!NetworkingPrivate}
......
chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc
View file @ 18f57643
......@@ -1746,7 +1746,6 @@ void AddWebContentStrings(content::WebUIDataSource* html_source) {
void AddCrNetworkStrings(content::WebUIDataSource* html_source) {
LocalizedString localized_strings[] = {
{"networkDisabled", IDS_NETWORK_LIST_DISABLED},
{"networkExpandA11yLabel", IDS_NETWORK_LIST_EXPAND_ACCESSIBILITY_LABEL},
{"networkListItemConnected", IDS_NETWORK_LIST_CONNECTED},
{"networkListItemConnecting", IDS_NETWORK_LIST_CONNECTING},
{"networkListItemNotConnected", IDS_NETWORK_LIST_NOT_CONNECTED},
......
ui/webui/resources/cr_elements/network/cr_network_list.html
View file @ 18f57643
......@@ -8,13 +8,16 @@
<dom-module id="cr-network-list">
<template>
<style include="cr-shared-style">
:host {
display: inline-flex;
}
#container {
max-height: 1000px;
min-height: 50px;
overflow-y: auto;
}
</style>
<div id="container" class="layout vertical" scrollable>
<div id="container" class="layout vertical flex" scrollable>
<iron-list items="[[getItems_(networks, customItems)]]"
scroll-target="container" selection-enabled
selected-item="{{selectedItem}}">
......
ui/webui/resources/cr_elements/network/cr_network_list.js
View file @ 18f57643
......@@ -13,15 +13,6 @@ Polymer({
is: 'cr-network-list',
properties: {
/**
* The maximum height in pixels for the list.
*/
maxHeight: {
type: Number,
value: 1000,
observer: 'maxHeightChanged_',
},
/**
* The list of network state properties for the items to display.
* @type {!Array<!CrOnc.NetworkStateProperties>}
......@@ -65,11 +56,6 @@ Polymer({
observers: ['listChanged_(networks, customItems)'],
/** @private */
maxHeightChanged_: function() {
this.$.container.style.maxHeight = this.maxHeight + 'px';
},
/** @private */
listChanged_: function() {
this.updateScrollableContents();
......
ui/webui/resources/cr_elements/network/cr_network_select.html
View file @ 18f57643
<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">
<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">
<template>
<style>
:host {
display: inline-block;
display: inline-flex;
}
</style>
<div class="layout vertical">
<div class="layout horizontal center">
<cr-network-list-item class="flex" hidden$="[[!showActive]]"
item="[[activeNetworkState]]">
</cr-network-list-item>
<cr-expand-button toggles hidden$="[[!expandable]]"
alt="[[getExpandA11yText_()]]"
expanded="{{networkListOpened}}">
</cr-expand-button>
</div>
<iron-collapse opened="[[networkListOpened]]">
<cr-network-list on-selected="onNetworkListItemSelected_"
max-height="[[maxHeight]]" networks="[[networkStateList]]"
custom-items="[[customItems]]" show-buttons="[[showButtons]]">
</cr-network-list>
</iron-collapse>
</div>
<cr-network-list class ="flex" on-selected="onNetworkListItemSelected_"
networks="[[networkStateList_]]" custom-items="[[customItems]]"
show-buttons="[[showButtons]]">
</cr-network-list>
</template>
<script src="cr_network_select.js"></script>
</dom-module>
ui/webui/resources/cr_elements/network/cr_network_select.js
View file @ 18f57643
......@@ -13,47 +13,6 @@ Polymer({
behaviors: [I18nBehavior],
properties: {
/**
* Network state for the active network.
* @type {?CrOnc.NetworkStateProperties}
*/
activeNetworkState: Object,
/**
* 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,
reflectToAttribute: true,
},
/**
* Show all buttons in list items.
*/
......@@ -63,17 +22,6 @@ Polymer({
reflectToAttribute: true,
},
/**
* List of all network state data for all visible networks.
* @type {!Array<!CrOnc.NetworkStateProperties>}
*/
networkStateList: {
type: Array,
value: function() {
return [];
}
},
/**
* The list of custom items to display after the list of networks.
* See CrNetworkList for details.
......@@ -90,7 +38,6 @@ Polymer({
* Whether to handle "item-selected" for network items.
* If this property is false, "network-item-selected" event is fired
* carrying CrOnc.NetworkStateProperties as event detail.
*
* @type {Function}
*/
handleNetworkItemSelected: {
......@@ -98,6 +45,18 @@ Polymer({
value: false,
reflectToAttribute: true,
},
/**
* List of all network state data for all visible networks.
* @private {!Array<!CrOnc.NetworkStateProperties>}
*/
networkStateList_: {
type: Array,
value: function() {
return [];
}
},
},
/**
......@@ -117,15 +76,15 @@ Polymer({
/** @override */
attached: function() {
this.networkListChangedListener_ = this.refreshNetworks_.bind(this);
this.networkListChangedListener_ = this.refreshNetworks.bind(this);
chrome.networkingPrivate.onNetworkListChanged.addListener(
this.networkListChangedListener_);
this.deviceStateListChangedListener_ = this.refreshNetworks_.bind(this);
this.deviceStateListChangedListener_ = this.refreshNetworks.bind(this);
chrome.networkingPrivate.onDeviceStateListChanged.addListener(
this.deviceStateListChangedListener_);
this.refreshNetworks_();
this.refreshNetworks();
chrome.networkingPrivate.requestNetworkScan();
},
......@@ -138,19 +97,11 @@ Polymer({
},
/**
* Polymer changed function.
* @private
*/
networkListOpenedChanged_: function() {
if (this.networkListOpened)
chrome.networkingPrivate.requestNetworkScan();
},
/**
* Request the list of visible networks.
* Request the list of visible networks. May be called externally to force a
* refresh and list update (e.g. when the element is shown).
* @private
*/
refreshNetworks_: function() {
refreshNetworks: function() {
var filter = {
networkType: chrome.networkingPrivate.NetworkType.ALL,
visible: true,
......@@ -165,8 +116,7 @@ Polymer({
* @private
*/
getNetworksCallback_: function(states) {
this.activeNetworkState = states[0] || undefined;
this.networkStateList = states;
this.networkStateList_ = states;
},
/**
......@@ -191,8 +141,4 @@ Polymer({
console.error('networkingPrivate.startConnect error: ' + lastError);
});
},
getExpandA11yText_: function() {
return this.i18n('networkExpandA11yLabel');
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment