diff options
Diffstat (limited to 'chromium/ui/webui/resources')
102 files changed, 2417 insertions, 1186 deletions
diff --git a/chromium/ui/webui/resources/PRESUBMIT.py b/chromium/ui/webui/resources/PRESUBMIT.py index d1933521c36..5252e6b819e 100644 --- a/chromium/ui/webui/resources/PRESUBMIT.py +++ b/chromium/ui/webui/resources/PRESUBMIT.py @@ -61,8 +61,7 @@ def _CommonChecks(input_api, output_api): cwd = input_api.PresubmitLocalPath() sys.path += [input_api.os_path.join(cwd, '..', '..', '..', 'tools')] from web_dev_style import presubmit_support - BLACKLIST = ['ui/webui/resources/js/analytics.js', - 'ui/webui/resources/js/jstemplate_compiled.js'] + BLACKLIST = ['ui/webui/resources/js/jstemplate_compiled.js'] file_filter = lambda f: f.LocalPath() not in BLACKLIST results += presubmit_support.CheckStyle(input_api, output_api, file_filter) finally: diff --git a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/.eslintrc.js b/chromium/ui/webui/resources/cr_components/.eslintrc.js index 25e21f992eb..25e21f992eb 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/.eslintrc.js +++ b/chromium/ui/webui/resources/cr_components/.eslintrc.js diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_delete_confirmation_dialog.html b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_delete_confirmation_dialog.html index 73d8209664f..6e41d2c0e1d 100644 --- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_delete_confirmation_dialog.html +++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_delete_confirmation_dialog.html @@ -1,6 +1,7 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html"> +<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html"> <link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="certificate_shared_css.html"> @@ -8,7 +9,7 @@ <dom-module id="certificate-delete-confirmation-dialog"> <template> - <style include="certificate-shared"></style> + <style include="certificate-shared paper-button-style"></style> <cr-dialog id="dialog" close-text="[[i18n('close')]]"> <div slot="title"> [[getTitleText_(model, certificateType)]] diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_decryption_dialog.html b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_decryption_dialog.html index f5dedd662cb..b559ee76fdf 100644 --- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_decryption_dialog.html +++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_decryption_dialog.html @@ -2,6 +2,7 @@ <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html"> <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> +<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html"> <link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="certificate_shared_css.html"> @@ -9,7 +10,7 @@ <dom-module id="certificate-password-decryption-dialog"> <template> - <style include="certificate-shared"> + <style include="certificate-shared paper-button-style"> cr-input { --cr-input-error-display: none; } @@ -21,7 +22,7 @@ <div slot="body"> <cr-input type="password" id="password" label="[[i18n('certificateManagerPassword')]]" - value="{{password_}}"> + value="{{password_}}" autofocus> </cr-input> </div> <div slot="button-container"> diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_encryption_dialog.html b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_encryption_dialog.html index 6541eeaadc5..c971f287553 100644 --- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_encryption_dialog.html +++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_encryption_dialog.html @@ -2,6 +2,7 @@ <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html"> <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> +<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html"> <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> <link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> @@ -10,7 +11,7 @@ <dom-module id="certificate-password-encryption-dialog"> <template> - <style include="certificate-shared"> + <style include="certificate-shared paper-button-style"> cr-input { --cr-input-error-display: none; margin-top: var(--cr-form-field-bottom-spacing); @@ -29,7 +30,7 @@ <div class="password-buttons"> <cr-input type="password" value="{{password_}}" id="password" label="[[i18n('certificateManagerPassword')]]" - on-input="validate_"></cr-input> + on-input="validate_" autofocus></cr-input> <cr-input type="password" value="{{confirmPassword_}}" id="confirmPassword" label="[[i18n('certificateManagerConfirmPassword')]]" diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificates_error_dialog.html b/chromium/ui/webui/resources/cr_components/certificate_manager/certificates_error_dialog.html index ae1d5c587a9..0ef4dc1b48b 100644 --- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificates_error_dialog.html +++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificates_error_dialog.html @@ -1,13 +1,14 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html"> +<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html"> <link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="certificate_shared_css.html"> <dom-module id="certificates-error-dialog"> <template> - <style include="certificate-shared"></style> + <style include="certificate-shared paper-button-style"></style> <cr-dialog id="dialog" close-text="[[i18n('close')]]"> <div slot="title">[[model.title]]</div> <div slot="body"> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.html b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.html index a75218ee419..660f1ac657f 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.html @@ -33,7 +33,7 @@ } </style> <iron-pages attr-for-selected="is" - selected="[[visiblePageName_]]" + selected="[[visiblePageName]]" selected-item="{{visiblePage_}}"> <template is="dom-if" if="[[shouldPasswordPageBeIncluded_(delegate)]]" restamp> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.js b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.js index 3dc0dd457d8..9be02cb2a60 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.js @@ -41,7 +41,7 @@ cr.define('multidevice_setup', function() { forwardButtonDisabled: { type: Boolean, computed: 'shouldForwardButtonBeDisabled_(' + - 'passwordPageForwardButtonDisabled_, visiblePageName_)', + 'passwordPageForwardButtonDisabled_, visiblePageName)', notify: true }, @@ -68,12 +68,12 @@ cr.define('multidevice_setup', function() { /** * Element name of the currently visible page. * - * @private {!multidevice_setup.PageName} + * @type {!multidevice_setup.PageName} */ - visiblePageName_: { + visiblePageName: { type: String, value: PageName.START, - notify: true, // For testing purposes only. + notify: true, }, /** @@ -161,16 +161,16 @@ cr.define('multidevice_setup', function() { /** @private */ onCancelRequested_: function() { - this.exitSetupFlow_(); + this.exitSetupFlow_(false /* didUserCompleteSetup */); }, /** @private */ onBackwardNavigationRequested_: function() { // The back button is only visible on the password page. - assert(this.visiblePageName_ == PageName.PASSWORD); + assert(this.visiblePageName == PageName.PASSWORD); this.$$('password-page').clearPasswordTextInput(); - this.visiblePageName_ = PageName.START; + this.visiblePageName = PageName.START; }, /** @private */ @@ -187,20 +187,20 @@ cr.define('multidevice_setup', function() { /** @private */ navigateForward_: function() { - switch (this.visiblePageName_) { + switch (this.visiblePageName) { case PageName.FAILURE: - this.visiblePageName_ = PageName.START; + this.visiblePageName = PageName.START; return; case PageName.PASSWORD: this.$$('password-page').clearPasswordTextInput(); this.setHostDevice_(); return; case PageName.SUCCESS: - this.exitSetupFlow_(); + this.exitSetupFlow_(true /* didUserCompleteSetup */); return; case PageName.START: if (this.delegate.isPasswordRequiredToSetHost()) - this.visiblePageName_ = PageName.PASSWORD; + this.visiblePageName = PageName.PASSWORD; else this.setHostDevice_(); return; @@ -221,11 +221,11 @@ cr.define('multidevice_setup', function() { } if (this.delegate.shouldExitSetupFlowAfterSettingHost()) { - this.exitSetupFlow_(); + this.exitSetupFlow_(true /* didUserCompleteSetup */); return; } - this.visiblePageName_ = PageName.SUCCESS; + this.visiblePageName = PageName.SUCCESS; this.fire('forward-button-focus-requested'); }) .catch((error) => { @@ -254,7 +254,7 @@ cr.define('multidevice_setup', function() { * @private */ shouldForwardButtonBeDisabled_: function() { - return (this.visiblePageName_ == PageName.PASSWORD) && + return (this.visiblePageName == PageName.PASSWORD) && this.passwordPageForwardButtonDisabled_; }, @@ -298,11 +298,11 @@ cr.define('multidevice_setup', function() { /** * Notifies observers that the setup flow has completed. - * + * @param {boolean} didUserCompleteSetup * @private */ - exitSetupFlow_: function() { - this.fire('setup-exited'); + exitSetupFlow_: function(didUserCompleteSetup) { + this.fire('setup-exited', {didUserCompleteSetup: didUserCompleteSetup}); }, }); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn b/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn index ae1eab83c96..484f8a8f537 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn @@ -9,7 +9,9 @@ js_type_check("closure_compile") { ":network_apnlist", ":network_choose_mobile", ":network_config", + ":network_config_input", ":network_config_select", + ":network_config_toggle", ":network_ip_config", ":network_nameservers", ":network_password_input", @@ -48,8 +50,25 @@ js_library("network_config") { extra_sources = [ "$interfaces_path/networking_private_interface.js" ] } +js_library("network_config_element_behavior") { + deps = [ + "//ui/webui/resources/cr_elements/chromeos/network:cr_onc_types", + ] +} + +js_library("network_config_input") { + deps = [ + ":network_config_element_behavior", + "//ui/webui/resources/cr_elements/policy:cr_policy_network_behavior", + ] + externs_list = [ "$externs_path/networking_private.js" ] + extra_sources = [ "$interfaces_path/networking_private_interface.js" ] +} + js_library("network_config_select") { deps = [ + ":network_config_element_behavior", + "//ui/webui/resources/cr_elements/policy:cr_policy_network_behavior", "//ui/webui/resources/js:assert", "//ui/webui/resources/js:i18n_behavior", ] @@ -57,6 +76,15 @@ js_library("network_config_select") { extra_sources = [ "$interfaces_path/networking_private_interface.js" ] } +js_library("network_config_toggle") { + deps = [ + ":network_config_element_behavior", + "//ui/webui/resources/cr_elements/policy:cr_policy_network_behavior", + ] + externs_list = [ "$externs_path/networking_private.js" ] + extra_sources = [ "$interfaces_path/networking_private_interface.js" ] +} + js_library("network_ip_config") { deps = [ "//ui/webui/resources/cr_elements/chromeos/network:cr_onc_types", @@ -73,8 +101,12 @@ js_library("network_nameservers") { js_library("network_password_input") { deps = [ + ":network_config_element_behavior", + "//ui/webui/resources/cr_elements/policy:cr_policy_network_behavior", "//ui/webui/resources/js:i18n_behavior", ] + externs_list = [ "$externs_path/networking_private.js" ] + extra_sources = [ "$interfaces_path/networking_private_interface.js" ] } js_library("network_property_list") { diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.js index eb882f59f78..538ab5b2865 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.js @@ -91,13 +91,13 @@ Polymer({ if (!this.networkProperties || !this.networkProperties.Cellular) return; - /** @type {!CrOnc.APNProperties|undefined} */ var activeApn; - var cellular = this.networkProperties.Cellular; - /** @type {!chrome.networkingPrivate.ManagedAPNProperties|undefined} */ var - apn = cellular.APN; + /** @type {!CrOnc.APNProperties|undefined} */ let activeApn; + const cellular = this.networkProperties.Cellular; + /** @type {!chrome.networkingPrivate.ManagedAPNProperties|undefined} */ + const apn = cellular.APN; if (apn && apn.AccessPointName) { activeApn = /** @type {!CrOnc.APNProperties|undefined} */ ( - CrOnc.getSimpleActiveProperties(apn)); + CrOnc.getActiveProperties(apn)); } else if (cellular.LastGoodAPN && cellular.LastGoodAPN.AccessPointName) { activeApn = cellular.LastGoodAPN; } @@ -113,18 +113,18 @@ Polymer({ */ setApnSelectList_: function(activeApn) { // Copy the list of APNs from this.networkProperties. - var result = this.getApnList_().slice(); + const result = this.getApnList_().slice(); // Test whether |activeApn| is in the current APN list in networkProperties. - var activeApnInList = activeApn && result.some(function(a) { + const activeApnInList = activeApn && result.some(function(a) { return a.AccessPointName == activeApn.AccessPointName; }); // If |activeApn| is specified and not in the list, use the active // properties for 'other'. Otherwise use any existing 'other' properties. - var otherApnProperties = + const otherApnProperties = (activeApn && !activeApnInList) ? activeApn : this.otherApn_; - var otherApn = this.createApnObject_(otherApnProperties); + const otherApn = this.createApnObject_(otherApnProperties); // Always use 'Other' for the name of custom APN entries (the name does // not get saved). @@ -155,7 +155,7 @@ Polymer({ * @private */ createApnObject_: function(apnProperties) { - var newApn = {AccessPointName: ''}; + const newApn = {AccessPointName: ''}; if (apnProperties) Object.assign(newApn, apnProperties); return newApn; @@ -169,8 +169,8 @@ Polymer({ getApnList_: function() { if (!this.networkProperties || !this.networkProperties.Cellular) return []; - /** @type {!chrome.networkingPrivate.ManagedAPNList|undefined} */ var - apnlist = this.networkProperties.Cellular.APNList; + /** @type {!chrome.networkingPrivate.ManagedAPNList|undefined} */ + const apnlist = this.networkProperties.Cellular.APNList; if (!apnlist) return []; return /** @type {!Array<!CrOnc.APNProperties>} */ ( @@ -183,8 +183,8 @@ Polymer({ * @private */ onSelectApnChange_: function(event) { - var target = /** @type {!HTMLSelectElement} */ (event.target); - var accessPointName = target.value; + const target = /** @type {!HTMLSelectElement} */ (event.target); + const accessPointName = target.value; // When selecting 'Other', don't set a change event unless a valid // non-default value has been set for Other. if (this.isOtherSelected_(accessPointName) && @@ -204,7 +204,7 @@ Polymer({ onOtherApnChange_: function(event) { // TODO(benchan/stevenjb): Move this to shill or // onc_translator_onc_to_shill.cc. - var value = (event.detail.field == 'AccessPointName') ? + const value = (event.detail.field == 'AccessPointName') ? event.detail.value.toUpperCase() : event.detail.value; this.set('otherApn_.' + event.detail.field, value); @@ -226,8 +226,8 @@ Polymer({ * @private */ sendApnChange_: function(accessPointName) { - var apnList = this.getApnList_(); - var apn = this.findApnInList(apnList, accessPointName); + const apnList = this.getApnList_(); + let apn = this.findApnInList(apnList, accessPointName); if (apn == undefined) { apn = this.createApnObject_(); if (this.otherApn_) { @@ -247,8 +247,8 @@ Polymer({ isOtherSelected_: function(accessPointName) { if (!this.networkProperties || !this.networkProperties.Cellular) return false; - var apnList = this.getApnList_(); - var apn = this.findApnInList(apnList, accessPointName); + const apnList = this.getApnList_(); + const apn = this.findApnInList(apnList, accessPointName); return apn == undefined; }, diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_choose_mobile.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_choose_mobile.js index b5b50b12fb1..b6126963195 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_choose_mobile.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_choose_mobile.js @@ -66,13 +66,13 @@ Polymer({ networkPropertiesChanged_: function() { if (!this.networkProperties || !this.networkProperties.Cellular) return; - var cellular = this.networkProperties.Cellular; + const cellular = this.networkProperties.Cellular; this.mobileNetworkList_ = cellular.FoundNetworks || [{NetworkId: 'none', LongName: this.i18n('networkCellularNoNetworks')}]; // Set selectedMobileNetworkId_ after the dom-repeat has been stamped. this.async(() => { - var selected = this.mobileNetworkList_.find(function(mobileNetwork) { + let selected = this.mobileNetworkList_.find(function(mobileNetwork) { return mobileNetwork.Status == 'current'; }); if (!selected) @@ -110,7 +110,7 @@ Polymer({ properties.ConnectionState != CrOnc.ConnectionState.NOT_CONNECTED) { return false; } - var found = this.get('Cellular.FoundNetworks', properties); + const found = this.get('Cellular.FoundNetworks', properties); return !!found && found.length > 0; }, @@ -122,7 +122,7 @@ Polymer({ getSecondaryText_: function(properties) { if (!properties || !properties.Cellular) return ''; - var cellular = properties.Cellular; + const cellular = properties.Cellular; if (cellular.Scanning) return this.i18n('networkCellularScanning'); else if (this.scanRequested_) @@ -157,7 +157,7 @@ Polymer({ * @private */ onChange_: function(event) { - var target = /** @type {!HTMLSelectElement} */ (event.target); + const target = /** @type {!HTMLSelectElement} */ (event.target); if (!target.value || target.value == 'none') return; this.networkingPrivate.selectCellularMobileNetwork( diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.html index f6053ce9367..aea5e4d05ac 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.html @@ -1,13 +1,14 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html"> -<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html"> <link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> -<link rel="import" href="network_shared_css.html"> -<link rel="import" href="network_password_input.html"> +<link rel="import" href="network_config_input.html"> <link rel="import" href="network_config_select.html"> +<link rel="import" href="network_config_toggle.html"> +<link rel="import" href="network_password_input.html"> +<link rel="import" href="network_shared_css.html"> <dom-module id="network-config"> <template> @@ -16,9 +17,9 @@ <!-- SSID (WiFi) --> <template is="dom-if" if="[[isType_(NetworkType_.WI_FI, type)]]" restamp> - <cr-input id="ssid" label="[[i18n('OncWiFi-SSID')]]" + <network-config-input id="ssid" label="[[i18n('OncWiFi-SSID')]]" value="{{configProperties_.WiFi.SSID}}" readonly="[[hasGuid_(guid)]]"> - </cr-input> + </network-config-input> </template> <!-- Security (WiFi and Ethernet) --> @@ -27,7 +28,8 @@ value="{{security_}}" disabled="[[!securityIsEnabled_(guid, type)]]" items="[[getSecurityItems_(type)]]" - onc-prefix="WiFi.Security"> + onc-prefix="WiFi.Security" + property="[[getManagedSecurity_(managedProperties)]]"> </network-config-select> </template> @@ -36,119 +38,130 @@ restamp> <network-password-input label="[[i18n('OncWiFi-Passphrase')]]" value="{{configProperties_.WiFi.Passphrase}}" - on-enter="connectIfConfigured_"> + on-enter="connectIfConfigured_" + property="[[managedProperties.WiFi.Passphrase]]"> </network-password-input> </template> <!-- VPN --> <template is="dom-if" if="[[showVpn_]]" restamp> - <cr-input label="[[i18n('OncVPN-Host')]]" - value="{{configProperties_.VPN.Host}}"> - </cr-input> - <cr-input label="[[i18n('OncName')]]" - value="{{configProperties_.Name}}" readonly="[[hasGuid_(guid)]]"> - </cr-input> + <network-config-input label="[[i18n('OncVPN-Host')]]" + value="{{configProperties_.VPN.Host}}" + property="[[managedProperties.VPN.Host]]"> + </network-config-input> + <network-config-input label="[[i18n('OncName')]]" + value="{{configProperties_.Name}}" + readonly="[[hasGuid_(guid)]]"> + </network-config-input> <network-config-select id="outer" label="[[i18n('OncVPN-Type')]]" value="{{vpnType_}}" items="[[vpnTypeItems_]]" - onc-prefix="VPN.Type" disabled="[[hasGuid_(guid)]]"> + onc-prefix="VPN.Type" disabled="[[hasGuid_(guid)]]" + property="[[managedProperties.VPN.Type]]"> </network-config-select> <template is="dom-if" if="[[!showVpn_.OpenVPN]]"> - <cr-input label="[[i18n('OncVPN-L2TP-Username')]]" - value="{{configProperties_.VPN.L2TP.Username}}"> - </cr-input> + <network-config-input label="[[i18n('OncVPN-L2TP-Username')]]" + value="{{configProperties_.VPN.L2TP.Username}}" + property="[[managedProperties.VPN.L2TP.Username]]"> + </network-config-input> <network-password-input label="[[i18n('OncVPN-L2TP-Password')]]" - value="{{configProperties_.VPN.L2TP.Password}}"> + value="{{configProperties_.VPN.L2TP.Password}}" + property="[[managedProperties.VPN.L2TP.Password]]"> </network-password-input> - <cr-input label="[[i18n('OncVPN-IPsec-Group')]]" - value="{{configProperties_.VPN.IPsec.Group}}"> - </cr-input> + <network-config-input label="[[i18n('OncVPN-IPsec-Group')]]" + value="{{configProperties_.VPN.IPsec.Group}}" + property="[[managedProperties.VPN.IPsec.Group]]"> + </network-config-input> <template is="dom-if" if="[[!showVpn_.Cert]]"> <network-password-input label="[[i18n('OncVPN-IPsec-PSK')]]" value="{{configProperties_.VPN.IPsec.PSK}}" - on-focus="onPskFocus_" on-blur="onPskBlur_" - on-input="onPskInput_"> + property="[[managedProperties.VPN.IPsec.PSK]]"> </network-password-input> </template> </template> <template is="dom-if" if="[[showVpn_.OpenVPN]]"> - <cr-input label="[[i18n('OncVPN-OpenVPN-Username')]]" - value="{{configProperties_.VPN.OpenVPN.Username}}"> - </cr-input> + <network-config-input label="[[i18n('OncVPN-OpenVPN-Username')]]" + value="{{configProperties_.VPN.OpenVPN.Username}}" + property="[[managedProperties.VPN.OpenVPN.Username]]"> + </network-config-input> <network-password-input label="[[i18n('OncVPN-OpenVPN-Password')]]" - value="{{configProperties_.VPN.OpenVPN.Password}}"> + value="{{configProperties_.VPN.OpenVPN.Password}}" + property="[[managedProperties.VPN.OpenVPN.Password]]"> </network-password-input> - <cr-input label="[[i18n('OncVPN-OpenVPN-OTP')]]" - value="{{configProperties_.VPN.OpenVPN.OTP}}"> - </cr-input> + <network-config-input label="[[i18n('OncVPN-OpenVPN-OTP')]]" + value="{{configProperties_.VPN.OpenVPN.OTP}}" + property="[[managedProperties.VPN.OpenVPN.OTP]]"> + </network-config-input> </template> <template is="dom-if" if="[[showVpn_.Cert]]"> <network-config-select id="vpnServerCa" label="[[i18n('OncEAP-ServerCA')]]" value="{{selectedServerCaHash_}}" items="[[serverCaCerts_]]" - cert-list> + cert-list + property="[[getManagedVpnServerCaRefs_(managedProperties)]]"> </network-config-select> <network-config-select id="vpnUserCert" label="[[i18n('OncEAP-UserCert')]]" value="{{selectedUserCertHash_}}" items="[[userCerts_]]" - cert-list> + cert-list + property="[[getManagedVpnClientCertType_(managedProperties)]]"> </network-config-select> </template> - <div class="property-box"> - <div id="vpnSaveCredentialsLabel" class="start"> - [[i18n('networkConfigSaveCredentials')]] - </div> - <cr-toggle checked="{{vpnSaveCredentials_}}" - aria-labelledby="vpnSaveCredentialsLabel"> - </cr-toggle> - </div> + <network-config-toggle label="[[i18n('networkConfigSaveCredentials')]]" + checked="{{vpnSaveCredentials_}}" + property="[[getManagedVpnSaveCredentials_(managedProperties)]]"> + </network-config-toggle> </template> <!-- EAP (WiFi, WiMAX, Ethernet) --> <template is="dom-if" if="[[showEap_]]" restamp> <network-config-select id="outer" label="[[i18n('OncEAP-Outer')]]" value="{{eapProperties_.Outer}}" items="[[eapOuterItems_]]" - onc-prefix="EAP.Outer" hidden="[[!showEap_.Outer]]"> + onc-prefix="EAP.Outer" hidden="[[!showEap_.Outer]]" + property="[[managedEapProperties_.Outer]]"> </network-config-select> <network-config-select id="inner" label="[[i18n('OncEAP-Inner')]]" value="{{eapProperties_.Inner}}" items="[[getEapInnerItems_(eapProperties_.Outer)]]" - onc-prefix="EAP.Inner" hidden="[[!showEap_.Inner]]"> + onc-prefix="EAP.Inner" hidden="[[!showEap_.Inner]]" + property="[[managedEapProperties_.Inner]]"> </network-config-select> <network-config-select id="serverCa" label="[[i18n('OncEAP-ServerCA')]]" value="{{selectedServerCaHash_}}" items="[[serverCaCerts_]]" - hidden="[[!showEap_.ServerCA]]" cert-list> + hidden="[[!showEap_.ServerCA]]" cert-list + property="[[managedEapProperties_.UseSystemCAs]]"> </network-config-select> - <cr-input label="[[i18n('OncEAP-SubjectMatch')]]" + <network-config-input label="[[i18n('OncEAP-SubjectMatch')]]" value="{{eapProperties_.SubjectMatch}}" - hidden="[[!showEap_.SubjectMatch]]"> - </cr-input> + hidden="[[!showEap_.SubjectMatch]]" + property="[[managedEapProperties_.SubjectMatch]]"> + </network-config-input> <network-config-select id="userCert" label="[[i18n('OncEAP-UserCert')]]" value="{{selectedUserCertHash_}}" items="[[userCerts_]]" - hidden="[[!showEap_.UserCert]]" cert-list> + hidden="[[!showEap_.UserCert]]" cert-list + property="[[managedEapProperties_.ClientCertType]]"> </network-config-select> - <cr-input label="[[i18n('OncEAP-Identity')]]" - value="{{eapProperties_.Identity}}" hidden="[[!showEap_.Identity]]"> - </cr-input> + <network-config-input label="[[i18n('OncEAP-Identity')]]" + value="{{eapProperties_.Identity}}" hidden="[[!showEap_.Identity]]" + property="[[managedEapProperties_.Identity]]"> + </network-config-input> <network-password-input label="[[i18n('OncEAP-Password')]]" - value="{{eapProperties_.Password}}" hidden="[[!showEap_.Password]]"> + value="{{eapProperties_.Password}}" hidden="[[!showEap_.Password]]" + property="[[managedEapProperties_.Password]]"> </network-password-input> - <cr-input label="[[i18n('OncEAP-AnonymousIdentity')]]" + <network-config-input label="[[i18n('OncEAP-AnonymousIdentity')]]" value="{{eapProperties_.AnonymousIdentity}}" - hidden="[[!showEap_.AnonymousIdentity]]"> - </cr-input> - <div class="property-box"> - <div id="eapSaveCredentialsLabel" class="start"> - [[i18n('networkConfigSaveCredentials')]] - </div> - <cr-toggle checked="{{eapProperties_.SaveCredentials}}" - aria-labelledby="eapSaveCredentialsLabel"> - </cr-toggle> - </div> + hidden="[[!showEap_.AnonymousIdentity]]" + property="[[managedEapProperties_.AnonymousIdentity]]"> + </network-config-input> + <network-config-toggle label="[[i18n('networkConfigSaveCredentials')]]" + checked="{{eapProperties_.SaveCredentials}}" + property="[[managedEapProperties_.SaveCredentials]]"> + </network-config-toggle> </template> <!-- Share (WiFi and WiMAX) --> <template is="dom-if" - if="[[shareIsVisible_(guid, type, networkProperties)]]" restamp> + if="[[shareIsVisible_(guid, type, managedProperties)]]" restamp> <div class="property-box"> <div id="shareLabel" class="start">[[i18n('networkConfigShare')]]</div> <cr-toggle id="share" checked="{{shareNetwork_}}" diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js index ef0f00c2489..78ca586d781 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js @@ -13,7 +13,7 @@ * Note: closure does not always recognize this if inside function() {}. * @enum {string} */ -var VPNConfigType = { +const VPNConfigType = { L2TP_IPSEC_PSK: 'L2TP_IPsec_PSK', L2TP_IPSEC_CERT: 'L2TP_IPsec_Cert', OPEN_VPN: 'OpenVPN', @@ -22,14 +22,11 @@ var VPNConfigType = { (function() { 'use strict'; -/** @const */ var DEFAULT_HASH = 'default'; -/** @const */ var DO_NOT_CHECK_HASH = 'do-not-check'; -/** @const */ var NO_CERTS_HASH = 'no-certs'; -/** @const */ var NO_USER_CERT_HASH = 'no-user-cert'; +/** @type {string} */ const DEFAULT_HASH = 'default'; +/** @type {string} */ const DO_NOT_CHECK_HASH = 'do-not-check'; +/** @type {string} */ const NO_CERTS_HASH = 'no-certs'; +/** @type {string} */ const NO_USER_CERT_HASH = 'no-user-cert'; -// Used to indicate a saved but unknown PSK value. Will appear as *'s in the -// PSK field by default. -/** @const */ var UNKNOWN_PSK = ' '; Polymer({ is: 'network-config', @@ -79,26 +76,36 @@ Polymer({ value: false, }, + /** Set to any error from the last configuration result. */ + error: { + type: String, + notify: true, + }, + /** - * The current properties if an existing network being configured. + * The managed properties of an existing network. + * This is used for determination of managed fields. * This will be undefined when configuring a new network. - * @private {!chrome.networkingPrivate.NetworkProperties|undefined} + * @private {!chrome.networkingPrivate.ManagedProperties|undefined} */ - networkProperties: { + managedProperties: { type: Object, notify: true, }, - /** Set to any error from the last configuration result. */ - error: { - type: String, - notify: true, + /** + * Managed EAP properties used for determination of managed EAP fields. + * @private {?chrome.networkingPrivate.ManagedEAPProperties} + */ + managedEapProperties_: { + type: Object, + value: null, }, - /** Set if |guid| is not empty once networkProperties are received. */ + /** Set if |guid| is not empty once managedProperties are received. */ propertiesReceived_: Boolean, - /** Set once properties have been sent; prevents multiple saves. */ + /** Set once managedProperties have been sent; prevents multiple saves. */ propertiesSent_: Boolean, /** @@ -150,15 +157,6 @@ Polymer({ selectedUserCertHash_: String, /** - * Set to true when the PSK is saved but the value is unknown. - * @private - */ - pskSavedUnknown_: { - type: Boolean, - value: false, - }, - - /** * Whether all required properties have been set. * @private */ @@ -312,7 +310,7 @@ Polymer({ observers: [ 'setEnableConnect_(isConfigured_, propertiesSent_)', 'setEnableSave_(isConfigured_, propertiesReceived_)', - 'updateConfigProperties_(networkProperties)', + 'updateConfigProperties_(managedProperties)', 'updateSecurity_(configProperties_, security_)', 'updateEapOuter_(eapProperties_.Outer)', 'updateEapCerts_(eapProperties_.*, serverCaCerts_, userCerts_)', @@ -358,13 +356,14 @@ Polymer({ this.propertiesSent_ = false; this.selectedServerCaHash_ = undefined; this.selectedUserCertHash_ = undefined; - this.guid = this.networkProperties.GUID; - this.type = this.networkProperties.Type; + this.guid = this.managedProperties.GUID; + this.type = this.managedProperties.Type; if (this.guid) { - this.networkingPrivate.getProperties(this.guid, (properties) => { - this.getPropertiesCallback_(properties); - this.focusFirstInput_(); - }); + this.networkingPrivate.getManagedProperties( + this.guid, (managedProperties) => { + this.getManagedPropertiesCallback_(managedProperties); + this.focusFirstInput_(); + }); } else { this.async(() => { this.focusFirstInput_(); @@ -393,7 +392,7 @@ Polymer({ this.propertiesSent_ = true; this.error = ''; - var propertiesToSet = this.getPropertiesToSet_(); + const propertiesToSet = this.getPropertiesToSet_(); if (this.getSource_() == CrOnc.Source.NONE) { // Set 'AutoConnect' to false for VPN or if prohibited by policy. // Note: Do not set AutoConnect to true, the connection manager will do @@ -417,8 +416,8 @@ Polymer({ /** @private */ focusFirstInput_: function() { Polymer.dom.flush(); - var e = this.$$( - 'cr-input:not([readonly]),' + + const e = this.$$( + 'network-config-input:not([readonly]),' + 'network-password-input:not([disabled]),' + 'network-config-select:not([disabled])'); if (e) @@ -453,18 +452,18 @@ Polymer({ getSource_: function() { if (!this.guid) return CrOnc.Source.NONE; - var source = this.networkProperties.Source; + const source = this.managedProperties.Source; return source ? /** @type {!CrOnc.Source} */ (source) : CrOnc.Source.NONE; }, /** @private */ onCertificateListsChanged_: function() { this.networkingPrivate.getCertificateLists(function(certificateLists) { - var isOpenVpn = this.type == CrOnc.Type.VPN && + const isOpenVpn = this.type == CrOnc.Type.VPN && this.get('VPN.Type', this.configProperties_) == CrOnc.VPNType.OPEN_VPN; - var caCerts = certificateLists.serverCaCertificates.slice(); + const caCerts = certificateLists.serverCaCertificates.slice(); if (!isOpenVpn) { // 'Default' is the same as 'Do not check' except it sets // eap.UseSystemCAs (which does not apply to OpenVPN). @@ -475,7 +474,7 @@ Polymer({ this.i18n('networkCADoNotCheck'), DO_NOT_CHECK_HASH)); this.set('serverCaCerts_', caCerts); - var userCerts = certificateLists.userCertificates.slice(); + let userCerts = certificateLists.userCertificates.slice(); // Only hardware backed user certs are supported. userCerts.forEach(function(cert) { if (!cert.hardwareBacked) @@ -508,94 +507,56 @@ Polymer({ }, /** - * networkingPrivate.getProperties callback. - * @param {!chrome.networkingPrivate.NetworkProperties} properties + * networkingPrivate.getManagedProperties callback. + * @param {!chrome.networkingPrivate.ManagedProperties} managedProperties * @private */ - getPropertiesCallback_: function(properties) { - if (!properties) { - // If |properties| is null, the network no longer exists; close the page. + getManagedPropertiesCallback_: function(managedProperties) { + if (!managedProperties) { + // If |managedProperties| is null, + // the network no longer exists; close the page. console.error('Network no longer exists: ' + this.guid); this.close_(); return; } - if (properties.Type == CrOnc.Type.ETHERNET && - this.get('Ethernet.Authentication', properties) != + if (managedProperties.Type == CrOnc.Type.ETHERNET && + CrOnc.getActiveValue( + /** @type {chrome.networkingPrivate.ManagedDOMString|undefined} */ + (this.get('Ethernet.Authentication', managedProperties))) != CrOnc.Authentication.WEP_8021X) { // Ethernet may have EAP properties set in a separate EthernetEap - // configuration. Request that before calling |setNetworkProperties_|. + // configuration. Request that before calling |setManagedProperties_|. this.networkingPrivate.getNetworks( {networkType: CrOnc.Type.ETHERNET, visible: false, configured: true}, - this.getEthernetEap_.bind(this, properties)); + this.getEthernetEap_.bind(this, managedProperties)); return; } - if (properties.Type == CrOnc.Type.VPN) { + if (managedProperties.Type == CrOnc.Type.VPN) { this.vpnSaveCredentials_ = - !!this.get('VPN.OpenVPN.SaveCredentials', properties) || - !!this.get('VPN.IPsec.SaveCredentials', properties) || - !!this.get('VPN.L2TP.SaveCredentials', properties); - if (this.get('VPN.IPsec.PSK', properties) === '') { - // If an empty PSK is provided, show a blank value in the UI to indicate - // that the PSK has a saved value. - this.pskSavedUnknown_ = true; - this.set('VPN.IPsec.PSK', UNKNOWN_PSK, properties); - } else { - this.pskSavedUnknown_ = false; - } - } - - this.setNetworkProperties_(properties); - }, - - /** - * If the IPsec.PSK field is focused and the PSK value is saved but unknown, - * clear the pseudo value set in getPropertiesCallback_. - * @param {!InputEvent} e - * @private - */ - onPskFocus_: function(e) { - if (this.pskSavedUnknown_) { - // We can not rely on data binding to update the target value when a - // field is focused. - e.target.value = ''; - this.set('VPN.IPsec.PSK', '', this.configProperties_); - } - }, - - /** - * If the IPsec.PSK field is in the saved-but-unknown state, restore the - * pseudo value when the field is unfocused. - * @param {!InputEvent} e - * @private - */ - onPskBlur_: function(e) { - if (this.pskSavedUnknown_) { - // The target is still focused so we can not rely on data binding to - // update the target value. - e.target.value = UNKNOWN_PSK; - this.set('VPN.IPsec.PSK', UNKNOWN_PSK, this.configProperties_); + !!CrOnc.getActiveValue( + /** @type {chrome.networkingPrivate.ManagedBoolean|undefined} */ + (this.get('VPN.OpenVPN.SaveCredentials', managedProperties))) || + !!CrOnc.getActiveValue( + /** @type {chrome.networkingPrivate.ManagedBoolean|undefined} */ + (this.get('VPN.IPsec.SaveCredentials', managedProperties))) || + !!CrOnc.getActiveValue( + /** @type {chrome.networkingPrivate.ManagedBoolean|undefined} */ + (this.get('VPN.L2TP.SaveCredentials', managedProperties))); } - }, - /** - * When the IPsec.PSK field is changed, clear pskSavedUnknown_. - * @param {!InputEvent} e - * @private - */ - onPskInput_: function(e) { - this.pskSavedUnknown_ = false; + this.setManagedProperties_(managedProperties); }, - /** - * @param {!chrome.networkingPrivate.NetworkProperties} properties + * @param {!chrome.networkingPrivate.ManagedProperties} managedProperties * @private */ - setNetworkProperties_: function(properties) { + setManagedProperties_: function(managedProperties) { this.propertiesReceived_ = true; - this.networkProperties = properties; - this.setError_(properties.ErrorState); + this.managedProperties = managedProperties; + this.managedEapProperties_ = this.getManagedEap_(managedProperties); + this.setError_(managedProperties.ErrorState); this.updateCertError_(); // Set the current shareNetwork_ value when properties are received. @@ -605,36 +566,37 @@ Polymer({ /** * networkingPrivate.getNetworks callback. Expects an array of Ethernet * networks and looks for an EAP configuration to apply. - * @param {!chrome.networkingPrivate.NetworkProperties} properties + * @param {!chrome.networkingPrivate.ManagedProperties} managedProperties * @param {!Array<chrome.networkingPrivate.NetworkStateProperties>} networks * @private */ - getEthernetEap_: function(properties, networks) { + getEthernetEap_: function(managedProperties, networks) { if (this.getRuntimeError_()) { - this.setNetworkProperties_(properties); + this.setManagedProperties_(managedProperties); return; } // Look for an existing EAP configuration. This may be stored in a // separate 'Ethernet EAP Parameters' configuration. - var ethernetEap = networks.find(function(network) { + const ethernetEap = networks.find(function(network) { return !!network.Ethernet && network.Ethernet.Authentication == CrOnc.Authentication.WEP_8021X; }); if (!ethernetEap) { - this.setNetworkProperties_(properties); + this.setManagedProperties_(managedProperties); return; } - this.networkingPrivate.getProperties(ethernetEap.GUID, (eapProperties) => { - if (!this.getRuntimeError_() && eapProperties.Ethernet.EAP) { - this.guid = eapProperties.GUID; - this.security_ = CrOnc.Security.WPA_EAP; - properties.GUID = eapProperties.GUID; - properties.Ethernet.EAP = eapProperties.Ethernet.EAP; - } - this.setNetworkProperties_(properties); - }); + this.networkingPrivate.getManagedProperties( + ethernetEap.GUID, (eapProperties) => { + if (!this.getRuntimeError_() && eapProperties.Ethernet.EAP) { + this.guid = eapProperties.GUID; + this.security_ = CrOnc.Security.WPA_EAP; + managedProperties.GUID = eapProperties.GUID; + managedProperties.Ethernet.EAP = eapProperties.Ethernet.EAP; + } + this.setManagedProperties_(managedProperties); + }); }, /** @@ -642,7 +604,7 @@ Polymer({ * @private */ getSecurityItems_() { - if (this.networkProperties.Type == CrOnc.Type.WI_FI) { + if (this.managedProperties.Type == CrOnc.Type.WI_FI) { return [ CrOnc.Security.NONE, CrOnc.Security.WEP_PSK, CrOnc.Security.WPA_PSK, CrOnc.Security.WPA_EAP @@ -653,7 +615,7 @@ Polymer({ /** @private */ setShareNetwork_: function() { - var source = this.getSource_(); + const source = this.getSource_(); if (source != CrOnc.Source.NONE) { // Configured networks can not change whether they are shared. this.shareNetwork_ = @@ -666,13 +628,13 @@ Polymer({ } if (this.shareAllowEnable) { // New insecure WiFi networks are always shared. - if (this.networkProperties.Type == CrOnc.Type.WI_FI && + if (this.managedProperties.Type == CrOnc.Type.WI_FI && this.security_ == CrOnc.Security.NONE) { this.shareNetwork_ = true; return; } // Networks requiring a user certificate cannot be shared. - var eap = this.eapProperties_; + const eap = this.eapProperties_; if (eap && eap.Outer == CrOnc.EAPType.EAP_TLS) { this.shareNetwork_ = false; return; @@ -682,7 +644,7 @@ Polymer({ }, /** - * Updates the config properties when |this.networkProperties| changes. + * Updates the config properties when |this.managedProperties| changes. * This gets called once when navigating to the page when default properties * are set, and again for existing networks when the properties are received. * @private @@ -692,21 +654,27 @@ Polymer({ this.showVpn_ = null; this.vpnType_ = undefined; - var properties = this.networkProperties; - var configProperties = + const managedProperties = this.managedProperties; + const configProperties = /** @type {chrome.networkingPrivate.NetworkConfigProperties} */ ({ - Name: properties.Name || '', - Type: properties.Type, + Name: CrOnc.getActiveValue(managedProperties.Name) || '', + Type: managedProperties.Type, }); - switch (properties.Type) { + switch (managedProperties.Type) { case CrOnc.Type.WI_FI: - if (properties.WiFi) { + if (managedProperties.WiFi) { configProperties.WiFi = { - AutoConnect: properties.WiFi.AutoConnect, - EAP: Object.assign({}, properties.WiFi.EAP), - Passphrase: properties.WiFi.Passphrase, - SSID: properties.WiFi.SSID, - Security: properties.WiFi.Security + AutoConnect: + /** @type {boolean|undefined} */ ( + CrOnc.getActiveValue(managedProperties.WiFi.AutoConnect)), + EAP: Object.assign( + {}, CrOnc.getActiveProperties(managedProperties.WiFi.EAP)), + Passphrase: /** @type {string|undefined} */ ( + CrOnc.getActiveValue(managedProperties.WiFi.Passphrase)), + SSID: /** @type {string|undefined} */ ( + CrOnc.getActiveValue(managedProperties.WiFi.SSID)), + Security: /** @type {string|undefined} */ ( + CrOnc.getActiveValue(managedProperties.WiFi.Security)) }; } else { configProperties.WiFi = { @@ -720,11 +688,13 @@ Polymer({ break; case CrOnc.Type.ETHERNET: configProperties.Ethernet = { - AutoConnect: !!this.get('Ethernet.AutoConnect', properties) + AutoConnect: !!CrOnc.getActiveValue( + /** @type {chrome.networkingPrivate.ManagedBoolean|undefined} */ ( + this.get('Ethernet.AutoConnect', managedProperties))) }; - if (properties.Ethernet && properties.Ethernet.EAP) { - configProperties.Ethernet.EAP = - Object.assign({}, properties.Ethernet.EAP), + if (managedProperties.Ethernet && managedProperties.Ethernet.EAP) { + configProperties.Ethernet.EAP = Object.assign( + {}, CrOnc.getActiveProperties(managedProperties.Ethernet.EAP)), configProperties.Ethernet.EAP.Outer = configProperties.Ethernet.EAP.Outer || CrOnc.EAPType.LEAP; } @@ -733,10 +703,13 @@ Polymer({ CrOnc.Security.NONE; break; case CrOnc.Type.WI_MAX: - if (properties.WiMAX) { + if (managedProperties.WiMAX) { configProperties.WiMAX = { - AutoConnect: properties.WiMAX.AutoConnect, - EAP: Object.assign({}, properties.WiMAX.EAP), + AutoConnect: + /** @type {boolean|undefined} */ ( + CrOnc.getActiveValue(managedProperties.WiMAX.AutoConnect)), + EAP: Object.assign( + {}, CrOnc.getActiveProperties(managedProperties.WiMAX.EAP)), }; // WiMAX has no EAP.Outer property, only Identity and Password. } else { @@ -747,21 +720,27 @@ Polymer({ this.security_ = CrOnc.Security.WPA_EAP; break; case CrOnc.Type.VPN: - if (properties.VPN) { - var vpn = { - Host: properties.VPN.Host, - Type: properties.VPN.Type, + if (managedProperties.VPN) { + const vpn = { + Host: /** @type {string|undefined} */ ( + CrOnc.getActiveValue(managedProperties.VPN.Host)), + Type: /** @type {string|undefined} */ ( + CrOnc.getActiveValue(managedProperties.VPN.Type)), }; if (vpn.Type == CrOnc.VPNType.L2TP_IPSEC) { vpn.IPsec = /** @type {chrome.networkingPrivate.IPSecProperties} */ ( Object.assign( {AuthenticationType: CrOnc.IPsecAuthenticationType.PSK}, - properties.VPN.IPsec)); - vpn.L2TP = Object.assign({Username: ''}, properties.VPN.L2TP); + CrOnc.getActiveProperties( + managedProperties.VPN.IPsec))); + vpn.L2TP = Object.assign( + {Username: ''}, + CrOnc.getActiveProperties(managedProperties.VPN.L2TP)); } else { assert(vpn.Type == CrOnc.VPNType.OPEN_VPN); - vpn.OpenVPN = Object.assign({}, properties.VPN.OpenVPN); + vpn.OpenVPN = Object.assign( + {}, CrOnc.getActiveProperties(managedProperties.VPN.OpenVPN)); } configProperties.VPN = vpn; } else { @@ -778,7 +757,7 @@ Polymer({ this.set('eapProperties_', this.getEap_(this.configProperties_)); if (!this.eapProperties_) this.showEap_ = null; - if (properties.Type == CrOnc.Type.VPN) + if (managedProperties.Type == CrOnc.Type.VPN) this.vpnType_ = this.getVpnTypeFromProperties_(this.configProperties_); }, @@ -793,13 +772,13 @@ Polymer({ // Set the share value to its default when the security type changes. this.setShareNetwork_(); } else if (this.type == CrOnc.Type.ETHERNET) { - var auth = this.security_ == CrOnc.Security.WPA_EAP ? + const auth = this.security_ == CrOnc.Security.WPA_EAP ? CrOnc.Authentication.WEP_8021X : CrOnc.Authentication.NONE; this.set('Ethernet.Authentication', auth, this.configProperties_); } if (this.security_ == CrOnc.Security.WPA_EAP) { - var eap = this.getEap_(this.configProperties_, true); + const eap = this.getEap_(this.configProperties_, true); eap.Outer = eap.Outer || CrOnc.EAPType.LEAP; this.setEap_(eap); } else { @@ -813,10 +792,10 @@ Polymer({ * @private */ updateEapOuter_: function() { - var eap = this.eapProperties_; + const eap = this.eapProperties_; if (!eap || !eap.Outer) return; - var innerItems = this.getEapInnerItems_(eap.Outer); + const innerItems = this.getEapInnerItems_(eap.Outer); if (innerItems.length > 0) { if (!eap.Inner || innerItems.indexOf(eap.Inner) < 0) this.set('eapProperties_.Inner', innerItems[0]); @@ -832,9 +811,9 @@ Polymer({ // EAP is used for all configurable types except VPN. if (this.type == CrOnc.Type.VPN) return; - var eap = this.eapProperties_; - var pem = eap && eap.ServerCAPEMs ? eap.ServerCAPEMs[0] : ''; - var certId = + const eap = this.eapProperties_; + const pem = eap && eap.ServerCAPEMs ? eap.ServerCAPEMs[0] : ''; + const certId = eap && eap.ClientCertType == 'PKCS11Id' ? eap.ClientCertPKCS11Id : ''; this.setSelectedCerts_(pem, certId); }, @@ -846,7 +825,7 @@ Polymer({ this.updateCertError_(); return; } - var outer = this.eapProperties_.Outer; + const outer = this.eapProperties_.Outer; switch (this.type) { case CrOnc.Type.WI_MAX: this.showEap_ = { @@ -879,7 +858,7 @@ Polymer({ * @private */ getEap_: function(properties, opt_create) { - var eap; + let eap; switch (properties.Type) { case CrOnc.Type.WI_FI: eap = properties.WiFi && properties.WiFi.EAP; @@ -918,11 +897,33 @@ Polymer({ }, /** + * @param {!chrome.networkingPrivate.ManagedProperties} managedProperties + * @return {?chrome.networkingPrivate.ManagedEAPProperties} + * @private + */ + getManagedEap_: function(managedProperties) { + let managedEap; + switch (managedProperties.Type) { + case CrOnc.Type.WI_FI: + managedEap = managedProperties.WiFi && managedProperties.WiFi.EAP; + break; + case CrOnc.Type.ETHERNET: + managedEap = + managedProperties.Ethernet && managedProperties.Ethernet.EAP; + break; + case CrOnc.Type.WI_MAX: + managedEap = managedProperties.WiMAX && managedProperties.WiMAX.EAP; + break; + } + return managedEap || null; + }, + + /** * @param {!chrome.networkingPrivate.NetworkConfigProperties} properties * @private */ getVpnTypeFromProperties_: function(properties) { - var vpn = properties.VPN; + const vpn = properties.VPN; assert(vpn); if (vpn.Type == CrOnc.VPNType.L2TP_IPSEC) { return vpn.IPsec.AuthenticationType == @@ -938,7 +939,7 @@ Polymer({ if (this.configProperties_ === undefined) return; - var vpn = this.configProperties_.VPN; + const vpn = this.configProperties_.VPN; if (!vpn) { this.showVpn_ = null; this.updateCertError_(); @@ -975,8 +976,8 @@ Polymer({ updateVpnIPsecCerts_: function() { if (this.vpnType_ != VPNConfigType.L2TP_IPSEC_CERT) return; - var pem, certId; - var ipsec = /** @type {chrome.networkingPrivate.IPSecProperties} */ ( + let pem, certId; + const ipsec = /** @type {chrome.networkingPrivate.IPSecProperties} */ ( this.get('VPN.IPsec', this.configProperties_)); if (ipsec) { pem = ipsec.ServerCAPEMs && ipsec.ServerCAPEMs[0]; @@ -990,8 +991,8 @@ Polymer({ updateOpenVPNCerts_: function() { if (this.vpnType_ != VPNConfigType.OPEN_VPN) return; - var pem, certId; - var openvpn = /** @type {chrome.networkingPrivate.OpenVPNProperties} */ ( + let pem, certId; + const openvpn = /** @type {chrome.networkingPrivate.OpenVPNProperties} */ ( this.get('VPN.OpenVPN', this.configProperties_)); if (openvpn) { pem = openvpn.ServerCAPEMs && openvpn.ServerCAPEMs[0]; @@ -1006,14 +1007,14 @@ Polymer({ updateCertError_: function() { // If |this.error| was set to something other than a cert error, do not // change it. - /** @const */ var noCertsError = 'networkErrorNoUserCertificate'; - /** @const */ var noValidCertsError = 'networkErrorNotHardwareBacked'; + /** @const */ const noCertsError = 'networkErrorNoUserCertificate'; + /** @const */ const noValidCertsError = 'networkErrorNotHardwareBacked'; if (this.error && this.error != noCertsError && this.error != noValidCertsError) { return; } - var requireCerts = (this.showEap_ && this.showEap_.UserCert) || + const requireCerts = (this.showEap_ && this.showEap_.UserCert) || (this.showVpn_ && this.showVpn_.UserCert); if (!requireCerts) { this.setError_(''); @@ -1023,7 +1024,7 @@ Polymer({ this.setError_(noCertsError); return; } - var validUserCert = this.userCerts_.find(function(cert) { + const validUserCert = this.userCerts_.find(function(cert) { return !!cert.hash; }); if (!validUserCert) { @@ -1043,7 +1044,7 @@ Polymer({ */ setSelectedCerts_: function(pem, certId) { if (pem) { - var serverCa = this.serverCaCerts_.find(function(cert) { + const serverCa = this.serverCaCerts_.find(function(cert) { return cert.pem == pem; }); if (serverCa) @@ -1051,7 +1052,7 @@ Polymer({ } if (certId) { - var userCert = this.userCerts_.find(function(cert) { + const userCert = this.userCerts_.find(function(cert) { return cert.PKCS11Id == certId; }); if (userCert) @@ -1086,7 +1087,7 @@ Polymer({ this.selectedServerCaHash_ = undefined; if (!this.selectedServerCaHash_ || this.selectedServerCaHash_ == DEFAULT_HASH) { - var eap = this.eapProperties_; + const eap = this.eapProperties_; if (eap && eap.UseSystemCAs === false) this.selectedServerCaHash_ = DO_NOT_CHECK_HASH; } @@ -1114,7 +1115,7 @@ Polymer({ if (!this.get('WiFi.SSID', this.configProperties_)) return false; if (this.configRequiresPassphrase_()) { - var passphrase = this.get('WiFi.Passphrase', this.configProperties_); + const passphrase = this.get('WiFi.Passphrase', this.configProperties_); if (!passphrase || passphrase.length < this.MIN_PASSPHRASE_LENGTH) return false; } @@ -1208,7 +1209,7 @@ Polymer({ return false; if (this.security_ == CrOnc.Security.WPA_EAP) { - var eap = this.getEap_(this.configProperties_); + const eap = this.getEap_(this.configProperties_); if (eap && eap.Outer == CrOnc.EAPType.EAP_TLS) return false; } @@ -1235,7 +1236,7 @@ Polymer({ * @private */ eapIsConfigured_: function() { - var eap = this.getEap_(this.configProperties_); + const eap = this.getEap_(this.configProperties_); if (!eap) return false; if (eap.Outer != CrOnc.EAPType.EAP_TLS) @@ -1248,14 +1249,13 @@ Polymer({ * @private */ vpnIsConfigured_: function() { - var vpn = this.configProperties_.VPN; + const vpn = this.configProperties_.VPN; if (!this.configProperties_.Name || !vpn || !vpn.Host) return false; switch (this.vpnType_) { case VPNConfigType.L2TP_IPSEC_PSK: - return !!this.get('L2TP.Username', vpn) && - (this.pskSavedUnknown_ || !!this.get('IPsec.PSK', vpn)); + return !!this.get('L2TP.Username', vpn) && !!this.get('IPsec.PSK', vpn); case VPNConfigType.L2TP_IPSEC_CERT: return !!this.get('L2TP.Username', vpn) && this.selectedUserCertHashIsValid_(); @@ -1270,13 +1270,13 @@ Polymer({ /** @private */ getPropertiesToSet_: function() { - var propertiesToSet = Object.assign({}, this.configProperties_); + const propertiesToSet = Object.assign({}, this.configProperties_); // Do not set AutoConnect by default, the connection manager will set // it to true on a successful connection. CrOnc.setTypeProperty(propertiesToSet, 'AutoConnect', undefined); if (this.guid) propertiesToSet.GUID = this.guid; - var eap = this.getEap_(propertiesToSet); + const eap = this.getEap_(propertiesToSet); if (eap) this.setEapProperties_(eap); if (this.configProperties_.Type == CrOnc.Type.VPN) { @@ -1293,10 +1293,10 @@ Polymer({ * @private */ getServerCaPems_: function() { - var caHash = this.selectedServerCaHash_ || ''; + const caHash = this.selectedServerCaHash_ || ''; if (!caHash || caHash == DO_NOT_CHECK_HASH || caHash == DEFAULT_HASH) return []; - var serverCa = this.findCert_(this.serverCaCerts_, caHash); + const serverCa = this.findCert_(this.serverCaCerts_, caHash); return serverCa && serverCa.pem ? [serverCa.pem] : []; }, @@ -1305,12 +1305,12 @@ Polymer({ * @private */ getUserCertPkcs11Id_: function() { - var userCertHash = this.selectedUserCertHash_ || ''; + const userCertHash = this.selectedUserCertHash_ || ''; if (!this.selectedUserCertHashIsValid_() || userCertHash == NO_USER_CERT_HASH) { return ''; } - var userCert = this.findCert_(this.userCerts_, userCertHash); + const userCert = this.findCert_(this.userCerts_, userCertHash); return (userCert && userCert.PKCS11Id) || ''; }, @@ -1323,7 +1323,7 @@ Polymer({ eap.ServerCAPEMs = this.getServerCaPems_(); - var pkcs11Id = this.getUserCertPkcs11Id_(); + const pkcs11Id = this.getUserCertPkcs11Id_(); eap.ClientCertType = pkcs11Id ? 'PKCS11Id' : 'None'; eap.ClientCertPKCS11Id = pkcs11Id || ''; }, @@ -1333,11 +1333,11 @@ Polymer({ * @private */ setOpenVPNProperties_: function(propertiesToSet) { - var openvpn = propertiesToSet.VPN.OpenVPN || {}; + const openvpn = propertiesToSet.VPN.OpenVPN || {}; openvpn.ServerCAPEMs = this.getServerCaPems_(); - var pkcs11Id = this.getUserCertPkcs11Id_(); + const pkcs11Id = this.getUserCertPkcs11Id_(); openvpn.ClientCertType = pkcs11Id ? 'PKCS11Id' : 'None'; openvpn.ClientCertPKCS11Id = pkcs11Id || ''; @@ -1352,7 +1352,6 @@ Polymer({ } openvpn.SaveCredentials = this.vpnSaveCredentials_; - propertiesToSet.VPN.OpenVPN = openvpn; }, @@ -1361,7 +1360,7 @@ Polymer({ * @private */ setVpnIPsecProperties_: function(propertiesToSet) { - var vpn = propertiesToSet.VPN; + const vpn = propertiesToSet.VPN; assert(vpn.IPsec); if (vpn.IPsec.AuthenticationType == CrOnc.IPsecAuthenticationType.CERT) { vpn.IPsec.ClientCertType = 'PKCS11Id'; @@ -1371,8 +1370,6 @@ Polymer({ vpn.IPsec.IKEVersion = 1; vpn.IPsec.SaveCredentials = this.vpnSaveCredentials_; vpn.L2TP.SaveCredentials = this.vpnSaveCredentials_; - if (this.pskSavedUnknown_) - delete vpn.IPsec.PSK; }, /** @@ -1394,7 +1391,7 @@ Polymer({ this.propertiesSent_ = false; return; } - var connectState = this.networkProperties.ConnectionState; + const connectState = this.managedProperties.ConnectionState; if (connect && (!connectState || connectState == CrOnc.ConnectionState.NOT_CONNECTED)) { @@ -1413,7 +1410,7 @@ Polymer({ this.setError_(this.getRuntimeError_()); if (this.error) { console.error( - 'createNetworkError, type: ' + this.networkProperties.Type + ': ' + + 'createNetworkError, type: ' + this.managedProperties.Type + ': ' + 'error: ' + this.error); this.propertiesSent_ = false; return; @@ -1428,7 +1425,7 @@ Polymer({ */ startConnect_: function(guid) { this.networkingPrivate.startConnect(guid, () => { - var error = this.getRuntimeError_(); + const error = this.getRuntimeError_(); if (!error || error == 'connected' || error == 'connect-canceled' || error == 'connecting') { // Connect is in progress, completed or canceled, close the dialog. @@ -1473,5 +1470,59 @@ Polymer({ setError_: function(error) { this.error = error || ''; }, + + /** + * @param {!chrome.networkingPrivate.ManagedProperties} managedProperties + * @return {chrome.networkingPrivate.ManagedDOMString|undefined} + * @private + */ + getManagedSecurity_: function(managedProperties) { + let managedSecurity = undefined; + switch (managedProperties.Type) { + case CrOnc.Type.WI_FI: + managedSecurity = + managedProperties.WiFi && managedProperties.WiFi.Security; + break; + case CrOnc.Type.ETHERNET: + managedSecurity = managedProperties.Ethernet && + managedProperties.Ethernet.Authentication; + break; + } + return managedSecurity; + }, + + /** + * @param {!chrome.networkingPrivate.ManagedProperties} managedProperties + * @return {!chrome.networkingPrivate.ManagedBoolean|undefined} + * @private + */ + getManagedVpnSaveCredentials_: function(managedProperties) { + return /** @type {chrome.networkingPrivate.ManagedBoolean|undefined} */ ( + this.get('VPN.OpenVPN.SaveCredentials', managedProperties) || + this.get('VPN.IPsec.SaveCredentials', managedProperties) || + this.get('VPN.L2TP.SaveCredentials', managedProperties)); + }, + + /** + * @param {!chrome.networkingPrivate.ManagedProperties} managedProperties + * @return {!chrome.networkingPrivate.ManagedDOMStringList|undefined} + * @private + */ + getManagedVpnServerCaRefs_: function(managedProperties) { + return /** @type {chrome.networkingPrivate.ManagedDOMStringList|undefined} */ ( + this.get('VPN.OpenVPN.ServerCARefs', managedProperties) || + this.get('VPN.IPsec.ServerCARefs', managedProperties)); + }, + + /** + * @param {!chrome.networkingPrivate.ManagedProperties} managedProperties + * @return {!chrome.networkingPrivate.ManagedDOMString|undefined} + * @private + */ + getManagedVpnClientCertType_: function(managedProperties) { + return /** @type {chrome.networkingPrivate.ManagedDOMString|undefined} */ ( + this.get('VPN.OpenVPN.ClientCertType', managedProperties) || + this.get('VPN.IPsec.ClientCertType', managedProperties)); + }, }); })(); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_element_behavior.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_element_behavior.html new file mode 100644 index 00000000000..1adda9a34ce --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_element_behavior.html @@ -0,0 +1,2 @@ +<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html"> +<script src="network_config_element_behavior.js"></script> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_element_behavior.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_element_behavior.js new file mode 100644 index 00000000000..c99c004adb9 --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_element_behavior.js @@ -0,0 +1,37 @@ +// Copyright 2018 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 Behavior for network config elements. + */ + +/** @polymerBehavior */ +const NetworkConfigElementBehavior = { + properties: { + disabled: { + type: Boolean, + value: false, + reflectToAttribute: true, + }, + + /** + * Network managed property associated with the config element. + * @type {?CrOnc.ManagedProperty} + */ + property: { + type: Object, + value: null, + }, + }, + + /** + * @param {boolean} disabled + * @param {?CrOnc.ManagedProperty} property + * @return {boolean} True if the element should be disabled. + * @private + */ + getDisabled_: function(disabled, property) { + return disabled || (!!property && this.isNetworkPolicyEnforced(property)); + }, +}; diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_input.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_input.html new file mode 100644 index 00000000000..5f66677bcdd --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_input.html @@ -0,0 +1,40 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> + +<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> +<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html"> +<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html"> +<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> +<link rel="import" href="network_config_element_behavior.html"> +<link rel="import" href="network_shared_css.html"> + +<dom-module id="network-config-input"> + <template> + <style include="network-shared"> + #container { + align-items: center; + display: flex; + flex-direction: row; + } + + cr-input { + width: 100%; + } + + cr-policy-network-indicator { + --cr-tooltip-icon-margin-start: var(--cr-controlled-by-spacing); + } + </style> + + <div id="container"> + <cr-input label="[[label]]" value="{{value}}" + hidden="[[hidden]]" readonly="[[readonly]]" + disabled="[[getDisabled_(disabled, property)]]"> + </cr-input> + <cr-policy-network-indicator + property="[[property]]" tooltip-position="left"> + </cr-policy-network-indicator> + </div> + + </template> + <script src="network_config_input.js"></script> +</dom-module> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_input.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_input.js new file mode 100644 index 00000000000..e5281f2cce2 --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_input.js @@ -0,0 +1,35 @@ +// Copyright 2018 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 network configuration input fields. + */ +Polymer({ + is: 'network-config-input', + + behaviors: [CrPolicyNetworkBehavior, NetworkConfigElementBehavior], + + properties: { + label: String, + + hidden: { + type: Boolean, + reflectToAttribute: true, + }, + + readonly: { + type: Boolean, + reflectToAttribute: true, + }, + + value: { + type: String, + notify: true, + }, + }, + + focus: function() { + this.$$('cr-input').focus(); + }, +}); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_select.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_select.html index 0fb698c7f07..9cde37d474f 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_select.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_select.html @@ -1,7 +1,11 @@ <link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html"> +<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html"> +<link rel="import" href="chrome://resources/cr_elements/policy/cr_tooltip_icon.html"> <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> <link rel="import" href="chrome://resources/html/md_select_css.html"> +<link rel="import" href="network_config_element_behavior.html"> <link rel="import" href="network_shared_css.html"> <dom-module id="network-config-select"> @@ -24,19 +28,35 @@ margin-bottom: var(--cr-form-field-bottom-spacing); padding: 0; } + + #inner { + align-items: center; + display: flex; + flex-direction: row; + } + + cr-policy-network-indicator { + --cr-tooltip-icon-margin-start: var(--cr-controlled-by-spacing); + } </style> <div id="outer"> <div id="label">[[label]]</div> - <select class="md-select" disabled="[[disabled]]" - value="{{value::change}}" aria-label$="[[label]]"> - <template is="dom-repeat" items="[[items]]"> - <option value="[[getItemValue_(item)]]" - disabled="[[!getItemEnabled_(item)]]"> - [[getItemLabel_(item, oncPrefix)]] - </option> - </template> - </select> + <div id="inner"> + <select class="md-select" + disabled="[[getDisabled_(disabled, property)]]" + value="{{value::change}}" aria-label$="[[label]]"> + <template is="dom-repeat" items="[[items]]"> + <option value="[[getItemValue_(item)]]" + disabled="[[!getItemEnabled_(item)]]"> + [[getItemLabel_(item, oncPrefix)]] + </option> + </template> + </select> + <cr-policy-network-indicator + property="[[property]]" tooltip-position="left"> + </cr-policy-network-indicator> + </div> </div> </template> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_select.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_select.js index fa7e9672cbc..6bf3e829c95 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_select.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_select.js @@ -8,16 +8,15 @@ Polymer({ is: 'network-config-select', - behaviors: [I18nBehavior], + behaviors: [ + I18nBehavior, + CrPolicyNetworkBehavior, + NetworkConfigElementBehavior, + ], properties: { label: String, - disabled: { - type: Boolean, - reflectToAttribute: true, - }, - /** Set to true if |items| is a list of certificates. */ certList: Boolean, @@ -53,7 +52,7 @@ Polymer({ updateSelected_: function() { // Wait for the dom-repeat to populate the <option> entries. this.async(function() { - var select = this.$$('select'); + const select = this.$$('select'); if (select.value != this.value) select.value = this.value; }); @@ -70,8 +69,8 @@ Polymer({ return this.getCertificateName_( /** @type {chrome.networkingPrivate.Certificate}*/ (item)); } - var key = /** @type {string} */ (item); - var oncKey = 'Onc' + prefix.replace(/\./g, '-') + '_' + key; + const key = /** @type {string} */ (item); + const oncKey = 'Onc' + prefix.replace(/\./g, '-') + '_' + key; if (this.i18nExists(oncKey)) return this.i18n(oncKey); assertNotReached('ONC Key not found: ' + oncKey); @@ -96,7 +95,7 @@ Polymer({ */ getItemEnabled_: function(item) { if (this.certList) { - var cert = /** @type {chrome.networkingPrivate.Certificate}*/ (item); + const cert = /** @type {chrome.networkingPrivate.Certificate}*/ (item); return !!cert.hash; } return true; diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_toggle.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_toggle.html new file mode 100644 index 00000000000..6e2ad80a3eb --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_toggle.html @@ -0,0 +1,32 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> + +<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html"> +<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html"> +<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html"> +<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> +<link rel="import" href="network_config_element_behavior.html"> +<link rel="import" href="network_shared_css.html"> + +<dom-module id="network-config-toggle"> + <template> + <style include="network-shared"> + cr-policy-network-indicator { + --cr-tooltip-icon-margin-start: var(--cr-controlled-by-spacing); + } + </style> + + <div class="property-box"> + <div class="start"> + [[label]] + </div> + <cr-toggle checked="{{checked}}" + disabled="[[getDisabled_(disabled, property)]]" + aria-label$="[[label]]"> + </cr-toggle> + <cr-policy-network-indicator + property="[[property]]" tooltip-position="left"> + </cr-policy-network-indicator> + </div> + </template> + <script src="network_config_toggle.js"></script> +</dom-module> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_toggle.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_toggle.js new file mode 100644 index 00000000000..d4535bbe253 --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config_toggle.js @@ -0,0 +1,23 @@ +// Copyright 2018 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 network configuration toggle. + */ +Polymer({ + is: 'network-config-toggle', + + behaviors: [CrPolicyNetworkBehavior, NetworkConfigElementBehavior], + + properties: { + label: String, + + checked: { + type: Boolean, + value: false, + reflectToAttribute: true, + notify: true, + }, + }, +}); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.js index b7e07cc1c72..7f3cb3dd6ec 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.js @@ -81,21 +81,21 @@ Polymer({ if (!this.networkProperties) return; - var properties = this.networkProperties; + const properties = this.networkProperties; if (newValue.GUID != (oldValue && oldValue.GUID)) this.savedStaticIp_ = undefined; // Update the 'automatic' property. if (properties.IPAddressConfigType) { - var ipConfigType = CrOnc.getActiveValue(properties.IPAddressConfigType); + const ipConfigType = CrOnc.getActiveValue(properties.IPAddressConfigType); this.automatic_ = (ipConfigType != CrOnc.IPConfigType.STATIC); } if (properties.IPConfigs || properties.StaticIPConfig) { // Update the 'ipConfig' property. - var ipv4 = this.getIPConfigUIProperties_( + const ipv4 = this.getIPConfigUIProperties_( CrOnc.getIPConfigForType(properties, CrOnc.IPType.IPV4)); - var ipv6 = this.getIPConfigUIProperties_( + let ipv6 = this.getIPConfigUIProperties_( CrOnc.getIPConfigForType(properties, CrOnc.IPType.IPV6)); if (properties.ConnectionState == CrOnc.ConnectionState.CONNECTED && ipv4 && ipv4.IPAddress) { @@ -111,7 +111,7 @@ Polymer({ /** @private */ onAutomaticChange_: function() { if (!this.automatic_) { - var defaultIpv4 = { + const defaultIpv4 = { Gateway: '192.168.1.1', IPAddress: '192.168.1.1', RoutingPrefix: '255.255.255.0', @@ -147,9 +147,9 @@ Polymer({ getIPConfigUIProperties_: function(ipconfig) { if (!ipconfig) return undefined; - var result = {}; - for (var key in ipconfig) { - var value = ipconfig[key]; + const result = {}; + for (const key in ipconfig) { + const value = ipconfig[key]; if (key == 'RoutingPrefix') result.RoutingPrefix = CrOnc.getRoutingPrefixAsNetmask(value); else @@ -165,9 +165,9 @@ Polymer({ * @private */ getIPConfigProperties_: function(ipconfig) { - var result = {}; - for (var key in ipconfig) { - var value = ipconfig[key]; + const result = {}; + for (const key in ipconfig) { + const value = ipconfig[key]; if (key == 'RoutingPrefix') result.RoutingPrefix = CrOnc.getRoutingPrefixAsLength(value); else @@ -183,7 +183,7 @@ Polymer({ hasIpConfigFields_: function() { if (!this.ipConfigFields_) return false; - for (var i = 0; i < this.ipConfigFields_.length; ++i) { + for (let i = 0; i < this.ipConfigFields_.length; ++i) { if (this.get(this.ipConfigFields_[i], this.ipConfig_) != undefined) return true; } @@ -213,8 +213,8 @@ Polymer({ onIPChange_: function(event) { if (!this.ipConfig_) return; - var field = event.detail.field; - var value = event.detail.value; + const field = event.detail.field; + const value = event.detail.value; // Note: |field| includes the 'ipv4.' prefix. this.set('ipConfig_.' + field, value); this.sendStaticIpConfig_(); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_nameservers.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_nameservers.html index 7cb2f0fd87b..a38f89212e4 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_nameservers.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_nameservers.html @@ -3,10 +3,10 @@ <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html"> <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html"> +<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html"> <link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/md_select_css.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html"> <link rel="import" href="network_shared_css.html"> <dom-module id="network-nameservers"> @@ -22,8 +22,8 @@ margin-inline-start: 38px; } - paper-radio-group { - --paper-radio-group-item-padding: 12px; + cr-radio-group { + --cr-radio-group-item-padding: 12px; width: 100%; } @@ -46,10 +46,9 @@ </div> <div id="radioGroupDiv"> - <paper-radio-group id="nameserverType" class="layout vertical" + <cr-radio-group id="nameserverType" class="layout vertical" selected="[[nameserversType_]]" - selectable="cr-radio-button" - on-paper-radio-group-changed="onTypeChange_" + on-selected-changed="onTypeChange_" aria-label="[[i18n('networkNameservers')]]"> <!-- Automatic nameservers --> <cr-radio-button name="automatic"> @@ -91,7 +90,7 @@ </template> </div> </template> - </paper-radio-group> + </cr-radio-group> </div> </template> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_nameservers.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_nameservers.js index c59320d6aaa..e1cf0a478a0 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_nameservers.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_nameservers.js @@ -81,16 +81,16 @@ Polymer({ this.savedNameservers_ = []; // Update the 'nameservers' property. - var nameservers = []; - var ipv4 = + let nameservers = []; + const ipv4 = CrOnc.getIPConfigForType(this.networkProperties, CrOnc.IPType.IPV4); if (ipv4 && ipv4.NameServers) nameservers = ipv4.NameServers; // Update the 'nameserversType' property. - var configType = + const configType = CrOnc.getActiveValue(this.networkProperties.NameServersConfigType); - var type; + let type; if (configType == CrOnc.IPConfigType.STATIC) { if (nameservers.join(',') == this.GOOGLE_NAMESERVERS.join(',')) { type = 'google'; @@ -114,7 +114,7 @@ Polymer({ setNameservers_: function(nameserversType, nameservers, sendNameservers) { if (nameserversType == 'custom') { // Add empty entries for unset custom nameservers. - for (var i = nameservers.length; i < this.MAX_NAMESERVERS; ++i) + for (let i = nameservers.length; i < this.MAX_NAMESERVERS; ++i) nameservers[i] = ''; this.savedNameservers_ = nameservers.slice(); } @@ -162,11 +162,10 @@ Polymer({ /** * Event triggered when the selected type changes. Updates nameservers and * sends the change value if necessary. - * @param {!Event} event * @private */ - onTypeChange_: function(event) { - var type = this.$$('#nameserverType').selected; + onTypeChange_: function() { + const type = this.$$('#nameserverType').selected; this.nameserversType_ = type; if (type == 'custom') { // Restore the saved nameservers. @@ -194,12 +193,12 @@ Polymer({ * @private */ sendNameServers_: function() { - var type = this.nameserversType_; + const type = this.nameserversType_; if (type == 'custom') { - var nameservers = new Array(this.MAX_NAMESERVERS); - for (var i = 0; i < this.MAX_NAMESERVERS; ++i) { - var nameserverInput = this.$$('#nameserver' + i); + const nameservers = new Array(this.MAX_NAMESERVERS); + for (let i = 0; i < this.MAX_NAMESERVERS; ++i) { + const nameserverInput = this.$$('#nameserver' + i); nameservers[i] = nameserverInput ? nameserverInput.value : ''; } this.nameservers_ = nameservers; diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.html index f43fe575bad..d84c2c86688 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.html @@ -1,33 +1,54 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html"> <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> +<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html"> +<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html"> +<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> <link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> +<link rel="import" href="network_config_element_behavior.html"> <link rel="import" href="network_shared_css.html"> <dom-module id="network-password-input"> <template> <style include="network-shared"> + #container { + align-items: center; + display: flex; + flex-direction: row; + } + cr-input { width: 100%; } - paper-icon-button-light { - margin: 0; - width: var(--network-control-margin); + cr-policy-network-indicator { + --cr-tooltip-icon-margin-start: var(--cr-controlled-by-spacing); } </style> - <cr-input id="input" label="[[label]]" value="{{value}}" - disabled="[[disabled]]" type="[[getInputType_(showPassword)]]" - on-keypress="onInputKeypress_"> - <paper-icon-button-light id="icon" slot="suffix" - class$="[[getIconClass_(showPassword)]]"> - <button on-tap="onShowPasswordTap_" - title="[[getShowPasswordTitle_(showPassword)]]"> - </button> - </paper-icon-button-light> - </cr-input> + <div id="container"> + <cr-input id="input" label="[[label]]" value="{{value}}" + disabled="[[getDisabled_(disabled, property)]]" + type="[[getInputType_(showPassword)]]" + on-focus="onFocus_" on-blur="onBlur_" on-input="onInput_" + on-keypress="onKeypress_"> + </cr-input> + <template is="dom-if" if="[[!showPolicyIndicator_]]" restamp> + <paper-icon-button-light id="icon" slot="suffix" + class$="[[getIconClass_(showPassword)]]"> + <button on-tap="onShowPasswordTap_" + disabled="[[getButtonDisabled_(value)]]" + title="[[getShowPasswordTitle_(showPassword)]]"> + </button> + </paper-icon-button-light> + </template> + <template is="dom-if" if="[[showPolicyIndicator_]]" restamp> + <cr-policy-network-indicator + property="[[property]]" tooltip-position="left"> + </cr-policy-network-indicator> + </template> + </div> </template> <script src="network_password_input.js"></script> </dom-module> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.js index 806dbcc4716..fda9d28de7a 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.js @@ -5,10 +5,20 @@ /** * @fileoverview Polymer element for network password input fields. */ + +// Used to indicate a saved but unknown credential value. Will appear as *'s in +// the credential (passphrase, password, etc.) field by default. +// See |kFakeCredential| in chromeos/network/policy_util.h. +/** @type {string} */ const FAKE_CREDENTIAL = 'FAKE_CREDENTIAL_VPaJDV9x'; + Polymer({ is: 'network-password-input', - behaviors: [I18nBehavior], + behaviors: [ + I18nBehavior, + CrPolicyNetworkBehavior, + NetworkConfigElementBehavior, + ], properties: { label: { @@ -16,11 +26,6 @@ Polymer({ reflectToAttribute: true, }, - disabled: { - type: Boolean, - reflectToAttribute: true, - }, - value: { type: String, notify: true, @@ -30,6 +35,28 @@ Polymer({ type: Boolean, value: false, }, + + showPolicyIndicator_: { + type: Boolean, + value: false, + computed: 'getDisabled_(disabled, property)', + }, + + /** @private */ + restoreUnknown_: { + type: Boolean, + value: false, + }, + }, + + observers: [ + 'updateShowPassword_(value)', + ], + + /** @private */ + updateShowPassword_: function() { + if (this.value == FAKE_CREDENTIAL) + this.showPassword = false; }, focus: function() { @@ -62,6 +89,17 @@ Polymer({ }, /** + * @param {string} value + * @return {boolean} True if the value equals |FAKE_CREDENTIAL| to + * prevent users from seeing this fake credential, but they should be able to + * see their custom input. + * @private + */ + getButtonDisabled_: function(value) { + return value == FAKE_CREDENTIAL; + }, + + /** * @param {!Event} event * @private */ @@ -74,10 +112,54 @@ Polymer({ * @param {!Event} event * @private */ - onInputKeypress_: function(event) { + onKeypress_: function(event) { if (event.target.id != 'input' || event.key != 'Enter') return; event.stopPropagation(); this.fire('enter'); }, + + /** + * If the input field is focused and the value is |FAKE_CREDENTIAL|, + * clear the value. + * @param {!InputEvent} e + * @private + */ + onFocus_: function(e) { + if (this.value != FAKE_CREDENTIAL) + return; + // We can not rely on data binding to update the target value when a + // field is focused. + e.target.value = ''; + this.value = ''; + // Remember to restore |FAKE_CREDENTIAL| if the user doesn't change + // the input value. + this.restoreUnknown_ = true; + }, + + /** + * If the input field should be restored, restore the |FAKE_CREDENTIAL| + * value when the field is unfocused. + * @param {!InputEvent} e + * @private + */ + onBlur_: function(e) { + if (!this.restoreUnknown_) + return; + // The target is still focused so we can not rely on data binding to + // update the target value. + e.target.value = FAKE_CREDENTIAL; + this.value = FAKE_CREDENTIAL; + }, + + /** + * When the input field is changed, clear |restoreUnknown_|. + * @param {!InputEvent} e + * @private + */ + onInput_: function(e) { + this.restoreUnknown_ = false; + }, + + }); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_property_list.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_property_list.js index 547f81f6ebe..42629e96f16 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_property_list.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_property_list.js @@ -75,14 +75,14 @@ Polymer({ onValueChange_: function(event) { if (!this.propertyDict) return; - var key = event.target.id; - var curValue = this.get(key, this.propertyDict); + const key = event.target.id; + let curValue = this.get(key, this.propertyDict); if (typeof curValue == 'object' && !Array.isArray(curValue)) { // Extract the property from an ONC managed dictionary. curValue = CrOnc.getActiveValue( /** @type {!CrOnc.ManagedProperty} */ (curValue)); } - var newValue = this.getValueFromEditField_(key, event.target.value); + const newValue = this.getValueFromEditField_(key, event.target.value); if (newValue == curValue) return; this.fire('property-change', {field: key, value: newValue}); @@ -95,15 +95,15 @@ Polymer({ * @private */ getPropertyLabel_: function(key, prefix) { - var oncKey = 'Onc' + prefix + key; + let oncKey = 'Onc' + prefix + key; oncKey = oncKey.replace(/\./g, '-'); if (this.i18nExists(oncKey)) return this.i18n(oncKey); // We do not provide translations for every possible network property key. // For keys specific to a type, strip the type prefix. - var result = prefix + key; - for (var entry in chrome.networkingPrivate.NetworkType) { - var type = chrome.networkingPrivate.NetworkType[entry]; + let result = prefix + key; + for (const entry in chrome.networkingPrivate.NetworkType) { + const type = chrome.networkingPrivate.NetworkType[entry]; if (result.startsWith(type + '.')) { result = result.substr(type.length + 1); break; @@ -123,7 +123,7 @@ Polymer({ return key => { if (editFieldTypes.hasOwnProperty(key)) return true; - var value = this.getPropertyValue_(key, prefix, propertyDict); + const value = this.getPropertyValue_(key, prefix, propertyDict); return value !== undefined && value !== ''; }; }, @@ -135,12 +135,12 @@ Polymer({ * @private */ isPropertyEditable_: function(key, propertyDict) { - var property = /** @type {!CrOnc.ManagedProperty|undefined} */ ( + const property = /** @type {!CrOnc.ManagedProperty|undefined} */ ( this.get(key, propertyDict)); if (property === undefined) { // Unspecified properties in policy configurations are not user // modifiable. https://crbug.com/819837. - var source = propertyDict.Source; + const source = propertyDict.Source; return source != 'UserPolicy' && source != 'DevicePolicy'; } return !this.isNetworkPolicyEnforced(property); @@ -153,7 +153,7 @@ Polymer({ * @private */ isEditType_: function(key, editFieldTypes) { - var editType = editFieldTypes[key]; + const editType = editFieldTypes[key]; return editType == 'String' || editType == 'StringArray' || editType == 'Password'; }, @@ -198,7 +198,7 @@ Polymer({ * @private */ getProperty_: function(key, propertyDict) { - var property = this.get(key, propertyDict); + const property = this.get(key, propertyDict); if (property === undefined && propertyDict.Source) { // Provide an empty property object with the network policy source. // See https://crbug.com/819837 for more info. @@ -215,7 +215,7 @@ Polymer({ * @private */ getPropertyValue_: function(key, prefix, propertyDict) { - var value = this.get(key, propertyDict); + let value = this.get(key, propertyDict); if (value === undefined) return ''; if (typeof value == 'object' && !Array.isArray(value)) { @@ -226,15 +226,15 @@ Polymer({ if (Array.isArray(value)) return value.join(', '); - var customValue = this.getCustomPropertyValue_(key, value); + const customValue = this.getCustomPropertyValue_(key, value); if (customValue) return customValue; if (typeof value == 'number' || typeof value == 'boolean') return value.toString(); assert(typeof value == 'string'); - var valueStr = /** @type {string} */ (value); - var oncKey = 'Onc' + prefix + key; + const valueStr = /** @type {string} */ (value); + let oncKey = 'Onc' + prefix + key; oncKey = oncKey.replace(/\./g, '-'); oncKey += '_' + valueStr; if (this.i18nExists(oncKey)) @@ -250,7 +250,7 @@ Polymer({ * @private */ getValueFromEditField_(key, fieldValue) { - var editType = this.editFieldTypes[key]; + const editType = this.editFieldTypes[key]; if (editType == 'StringArray') return fieldValue.toString().split(/, */); return fieldValue; diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy.js index c827a0ddfe5..f5ca74c1d59 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy.js @@ -150,12 +150,12 @@ Polymer({ return; /** @type {!CrOnc.ProxySettings} */ - var proxy = this.createDefaultProxySettings_(); + const proxy = this.createDefaultProxySettings_(); // For shared networks with unmanaged proxy settings, ignore any saved // proxy settings (use the default values). if (this.isShared_()) { - var property = this.getProxySettingsTypeProperty_(); + const property = this.getProxySettingsTypeProperty_(); if (!this.isControlled(property) && !this.useSharedProxies) { this.setProxyAsync_(proxy); return; // Proxy settings will be ignored. @@ -163,30 +163,29 @@ Polymer({ } /** @type {!chrome.networkingPrivate.ManagedProxySettings|undefined} */ - var proxySettings = this.networkProperties.ProxySettings; + const proxySettings = this.networkProperties.ProxySettings; if (proxySettings) { proxy.Type = /** @type {!CrOnc.ProxySettingsType} */ ( CrOnc.getActiveValue(proxySettings.Type)); if (proxySettings.Manual) { - proxy.Manual.HTTPProxy = /** @type {!CrOnc.ProxyLocation|undefined} */ ( - CrOnc.getSimpleActiveProperties( - proxySettings.Manual.HTTPProxy)) || + proxy.Manual.HTTPProxy = + /** @type {!CrOnc.ProxyLocation|undefined} */ ( + CrOnc.getActiveProperties(proxySettings.Manual.HTTPProxy)) || {Host: '', Port: 80}; proxy.Manual.SecureHTTPProxy = /** @type {!CrOnc.ProxyLocation|undefined} */ ( - CrOnc.getSimpleActiveProperties( + CrOnc.getActiveProperties( proxySettings.Manual.SecureHTTPProxy)) || {Host: '', Port: 80}; proxy.Manual.FTPProxy = /** @type {!CrOnc.ProxyLocation|undefined} */ ( - CrOnc.getSimpleActiveProperties( - proxySettings.Manual.FTPProxy)) || + CrOnc.getActiveProperties(proxySettings.Manual.FTPProxy)) || {Host: '', Port: 80}; proxy.Manual.SOCKS = /** @type {!CrOnc.ProxyLocation|undefined} */ ( - CrOnc.getSimpleActiveProperties(proxySettings.Manual.SOCKS)) || + CrOnc.getActiveProperties(proxySettings.Manual.SOCKS)) || {Host: '', Port: 80}; - var jsonHttp = proxy.Manual.HTTPProxy; + const jsonHttp = proxy.Manual.HTTPProxy; this.useSameProxy_ = (CrOnc.proxyMatches(jsonHttp, proxy.Manual.SecureHTTPProxy) && CrOnc.proxyMatches(jsonHttp, proxy.Manual.FTPProxy) && @@ -207,7 +206,7 @@ Polymer({ proxy.Manual = proxy.Manual || this.savedManual_; // Set the Web Proxy Auto Discovery URL. - var ipv4 = + const ipv4 = CrOnc.getIPConfigForType(this.networkProperties, CrOnc.IPType.IPV4); this.WPAD_ = (ipv4 && ipv4.WebProxyAutoDiscoveryUrl) || this.i18n('networkProxyWpadNone'); @@ -255,11 +254,11 @@ Polymer({ * @private */ sendProxyChange_: function() { - var proxy = + const proxy = /** @type {!CrOnc.ProxySettings} */ (Object.assign({}, this.proxy_)); if (proxy.Type == CrOnc.ProxySettingsType.MANUAL) { - var manual = proxy.Manual; - var defaultProxy = manual.HTTPProxy || {Host: '', Port: 80}; + const manual = proxy.Manual; + const defaultProxy = manual.HTTPProxy || {Host: '', Port: 80}; if (this.useSameProxy_) { proxy.Manual.SecureHTTPProxy = /** @type {!CrOnc.ProxyLocation} */ ( Object.assign({}, defaultProxy)); @@ -294,12 +293,12 @@ Polymer({ * @private */ onTypeChange_: function(event) { - var target = /** @type {!HTMLSelectElement} */ (event.target); - var type = /** @type {chrome.networkingPrivate.ProxySettingsType} */ ( + const target = /** @type {!HTMLSelectElement} */ (event.target); + const type = /** @type {chrome.networkingPrivate.ProxySettingsType} */ ( target.value); this.set('proxy_.Type', type); - var proxyTypeChangeIsReady; - var elementToFocus; + let proxyTypeChangeIsReady; + let elementToFocus; switch (type) { case CrOnc.ProxySettingsType.DIRECT: case CrOnc.ProxySettingsType.WPAD: @@ -347,7 +346,7 @@ Polymer({ /** @private */ onAddProxyExclusionTap_: function() { - var value = this.$.proxyExclusion.value; + const value = this.$.proxyExclusion.value; if (!value) return; this.push('proxy_.ExcludeDomains', value); @@ -415,7 +414,7 @@ Polymer({ return false; if (!this.networkProperties.hasOwnProperty('ProxySettings')) return true; // No proxy settings defined, so not enforced. - var property = /** @type {!CrOnc.ManagedProperty|undefined} */ ( + const property = /** @type {!CrOnc.ManagedProperty|undefined} */ ( this.get('ProxySettings.' + propertyName, this.networkProperties)); if (!property) return true; @@ -448,8 +447,8 @@ Polymer({ isSaveManualProxyEnabled_: function() { if (!this.proxyIsUserModified_) return false; - var manual = this.proxy_.Manual; - var httpHost = this.get('HTTPProxy.Host', manual); + const manual = this.proxy_.Manual; + const httpHost = this.get('HTTPProxy.Host', manual); if (this.useSameProxy_) return !!httpHost; return !!httpHost || !!this.get('SecureHTTPProxy.Host', manual) || diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy_exclusions.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy_exclusions.js index 347b22980d3..fe55fb38fec 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy_exclusions.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy_exclusions.js @@ -38,7 +38,7 @@ Polymer({ * @private */ onRemoveTap_: function(event) { - var index = event.model.index; + const index = event.model.index; this.splice('exclusions', index, 1); this.fire('proxy-change'); } diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy_input.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy_input.js index 4f22091bdd6..6dc6323608e 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy_input.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_proxy_input.js @@ -52,7 +52,7 @@ Polymer({ * @private */ onValueChange_: function() { - var port = parseInt(this.value.Port, 10); + let port = parseInt(this.value.Port, 10); if (isNaN(port)) port = 80; this.value.Port = port; diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html index 9b8016669f5..01be1577af9 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html @@ -95,7 +95,8 @@ <div slot="title">[[i18n('networkSimEnterPinTitle')]]</div> <div slot="body"> <network-password-input id="enterPin" value="{{pin_}}" - label="[[i18n('networkSimEnterPin')]]" on-enter="sendEnterPin_"> + label="[[i18n('networkSimEnterPin')]]" on-enter="sendEnterPin_" + disabled="[[inProgress_]]"> </network-password-input> <div class="dialog-error"> [[getErrorMsg_(error_, networkProperties)]] @@ -118,14 +119,16 @@ <div slot="title">[[i18n('networkSimChangePinTitle')]]</div> <div slot="body"> <network-password-input id="changePinOld" value="{{pin_}}" - label="[[i18n('networkSimEnterOldPin')]]"> + label="[[i18n('networkSimEnterOldPin')]]" + disabled="[[inProgress_]]"> </network-password-input> <network-password-input id="changePinNew1" value="{{pin_new1_}}" - label="[[i18n('networkSimEnterNewPin')]]"> + label="[[i18n('networkSimEnterNewPin')]]" + disabled="[[inProgress_]]"> </network-password-input> <network-password-input id="changePinNew2" value="{{pin_new2_}}" label="[[i18n('networkSimReEnterNewPin')]]" - on-enter="sendChangePin_"> + on-enter="sendChangePin_" disabled="[[inProgress_]]"> </network-password-input> <div class="dialog-error"> [[getErrorMsg_(error_, networkProperties)]] @@ -148,7 +151,8 @@ <div slot="title">[[i18n('networkSimLockedTitle')]]</div> <div slot="body"> <network-password-input id="unlockPin" value="{{pin_}}" - label="[[i18n('networkSimEnterPin')]]" on-enter="sendUnlockPin_"> + label="[[i18n('networkSimEnterPin')]]" on-enter="sendUnlockPin_" + disabled="[[inProgress_]]"> </network-password-input> <div class="dialog-error"> [[getErrorMsg_(error_, networkProperties)]] @@ -174,14 +178,16 @@ Enter the 8-digit PIN Unblocking Key provided by your carrier </div> <network-password-input id="unlockPuk" value="{{puk_}}" - label="[[i18n('networkSimEnterPuk')]]"> + label="[[i18n('networkSimEnterPuk')]]" + disabled="[[inProgress_]]"> </network-password-input> <network-password-input id="unlockPin1" value="{{pin_new1_}}" - label="[[i18n('networkSimEnterNewPin')]]"> + label="[[i18n('networkSimEnterNewPin')]]" + disabled="[[inProgress_]]"> </network-password-input> <network-password-input id="unlockPin2" value="{{pin_new2_}}" label="[[i18n('networkSimReEnterNewPin')]]" - on-enter="sendUnlockPuk_"> + on-enter="sendUnlockPuk_" disabled="[[inProgress_]]"> </network-password-input> <div class="dialog-error"> [[i18n('networkSimLockedWarning')]] diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.js index 5962b8c49eb..4bc791255de 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.js @@ -7,7 +7,7 @@ */ /** @enum {string} */ -var ErrorType = { +const ErrorType = { NONE: 'none', INCORRECT_PIN: 'incorrect-pin', INCORRECT_PUK: 'incorrect-puk', @@ -18,9 +18,9 @@ var ErrorType = { (function() { -var PIN_MIN_LENGTH = 4; -var PUK_MIN_LENGTH = 8; -var TOGGLE_DEBOUNCE_MS = 500; +const PIN_MIN_LENGTH = 4; +const PUK_MIN_LENGTH = 8; +const TOGGLE_DEBOUNCE_MS = 500; Polymer({ is: 'network-siminfo', @@ -161,10 +161,10 @@ Polymer({ networkPropertiesChanged_: function() { if (!this.networkProperties || !this.networkProperties.Cellular) return; - var simLockStatus = this.networkProperties.Cellular.SIMLockStatus; + const simLockStatus = this.networkProperties.Cellular.SIMLockStatus; this.pukRequired_ = !!simLockStatus && simLockStatus.LockType == CrOnc.LockType.PUK; - var lockEnabled = !!simLockStatus && simLockStatus.LockEnabled; + const lockEnabled = !!simLockStatus && simLockStatus.LockEnabled; if (lockEnabled != this.lockEnabled_) { this.setLockEnabled_ = lockEnabled; this.updateLockEnabled_(); @@ -223,7 +223,7 @@ Polymer({ // If the PUK was activated while attempting to enter or change a pin, // close the dialog and open the unlock PUK dialog. - var showUnlockPuk = false; + let showUnlockPuk = false; if (this.$.enterPinDialog.open) { this.$.enterPinDialog.close(); showUnlockPuk = true; @@ -271,7 +271,7 @@ Polymer({ * @private */ setCellularSimState_: function(simState) { - var guid = (this.networkProperties && this.networkProperties.GUID) || ''; + const guid = (this.networkProperties && this.networkProperties.GUID) || ''; this.setInProgress_(); this.networkingPrivate.setCellularSimState(guid, simState, () => { this.inProgress_ = false; @@ -292,7 +292,7 @@ Polymer({ * @private */ unlockCellularSim_: function(pin, puk) { - var guid = (this.networkProperties && this.networkProperties.GUID) || ''; + const guid = (this.networkProperties && this.networkProperties.GUID) || ''; this.setInProgress_(); this.networkingPrivate.unlockCellularSim(guid, pin, puk, () => { this.inProgress_ = false; @@ -316,10 +316,10 @@ Polymer({ event.stopPropagation(); if (!this.enterPinEnabled_) return; - var pin = this.$.enterPin.value; + const pin = this.$.enterPin.value; if (!this.validatePin_(pin)) return; - var simState = /** @type {!CrOnc.CellularSimState} */ ({ + const simState = /** @type {!CrOnc.CellularSimState} */ ({ currentPin: pin, requirePin: this.sendSimLockEnabled_, }); @@ -352,10 +352,10 @@ Polymer({ */ sendChangePin_: function(event) { event.stopPropagation(); - var newPin = this.$.changePinNew1.value; + const newPin = this.$.changePinNew1.value; if (!this.validatePin_(newPin, this.$.changePinNew2.value)) return; - var simState = /** @type {!CrOnc.CellularSimState} */ ({ + const simState = /** @type {!CrOnc.CellularSimState} */ ({ requirePin: true, currentPin: this.$.changePinOld.value, newPin: newPin @@ -384,7 +384,7 @@ Polymer({ */ sendUnlockPin_: function(event) { event.stopPropagation(); - var pin = this.$.unlockPin.value; + const pin = this.$.unlockPin.value; if (!this.validatePin_(pin)) return; this.unlockCellularSim_(pin, ''); @@ -419,10 +419,10 @@ Polymer({ */ sendUnlockPuk_: function(event) { event.stopPropagation(); - var puk = this.$.unlockPuk.value; + const puk = this.$.unlockPuk.value; if (!this.validatePuk_(puk)) return; - var pin = this.$.unlockPin1.value; + const pin = this.$.unlockPin1.value; if (!this.validatePin_(pin, this.$.unlockPin2.value)) return; this.unlockCellularSim_(pin, puk); @@ -457,7 +457,7 @@ Polymer({ if (this.error_ == ErrorType.NONE) return ''; // TODO(stevenjb): Translate - var msg; + let msg; if (this.error_ == ErrorType.INCORRECT_PIN) msg = 'Incorrect PIN.'; else if (this.error_ == ErrorType.INCORRECT_PUK) @@ -470,7 +470,7 @@ Polymer({ msg = 'Invalid PUK.'; else return 'UNKNOWN ERROR'; - var retriesLeft = this.simUnlockSent_ && + const retriesLeft = this.simUnlockSent_ && this.get('Cellular.SIMLockStatus.RetriesLeft', this.networkProperties); if (retriesLeft) { msg += ' Retries left: ' + retriesLeft.toString(); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/OWNERS b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/OWNERS new file mode 100644 index 00000000000..eb15f51e9ca --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/OWNERS @@ -0,0 +1,5 @@ +alemate@chromium.org +jdufault@chromium.org +stevenjb@chromium.org + +# COMPONENT: UI>Settings diff --git a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html index 080f3cc0328..f4e00640a40 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html @@ -160,7 +160,7 @@ --cr-input-error-display: none; --cr-input-input: { font-size: 28px; - letter-spacing: 28px; + letter-spacing: 18px; }; --cr-input-padding-bottom: 1px; --cr-input-padding-end: 0; @@ -282,13 +282,15 @@ <paper-icon-button id="backspaceButton" class="digit-button" disabled$="[[!hasInput_(value)]]" icon="pin-keyboard:backspace" + on-tap="onBackspaceTap_" on-pointerdown="onBackspacePointerDown_" on-pointerout="clearAndReset_" on-pointerup="onBackspacePointerUp_" title="[[i18n('pinKeyboardDeleteAccessibleName')]]" noink> </paper-icon-button> - <paper-ripple class="circle" center></paper-ripple> + <paper-ripple class="circle" center hidden="[[!hasInput_(value)]]"> + </paper-ripple> </div> </div> </div> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js index ceaaae8adca..b208704a59f 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js @@ -220,11 +220,11 @@ Polymer({ * @private */ onNumberTap_: function(event) { - let numberValue = event.target.getAttribute('value'); + const numberValue = event.target.getAttribute('value'); // Add the number where the caret is, then update the selection range of the // input element. - let selectionStart = this.selectionStart_; + const selectionStart = this.selectionStart_; this.value = this.value.substring(0, this.selectionStart_) + numberValue + this.value.substring(this.selectionEnd_); @@ -277,6 +277,24 @@ Polymer({ }, /** + * Called when user taps the backspace the button. Only does something when + * the tap comes from the keyboard. onBackspacePointerDown_ and + * onBackspacePointerUp_ will handle the events if they come from mouse or + * touch. Note: This does not support repeatedly backspacing by holding down + * the space or enter key like touch or mouse does. + * @param {Event} event The event object. + * @private + */ + onBackspaceTap_: function(event) { + if (!event.target.receivedFocusFromKeyboard) + return; + + this.onPinClear_(); + this.clearAndReset_(); + event.stopImmediatePropagation(); + }, + + /** * Called when the user presses or touches the backspace button. Starts a * timer which starts an interval to repeatedly backspace the pin value until * the interval is cleared. diff --git a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.html b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.html index 71e9a15fd8e..742a5c8d283 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.html @@ -45,26 +45,30 @@ Where: <dom-module id="setup-pin-keyboard"> <template> <style include="settings-shared"> + #errorIcon { + --iron-icon-height: 20px; + --iron-icon-width: 20px; + display: none; + } + .error { color: var(--google-red-600); } - .error > iron-icon { + .error #errorIcon { --iron-icon-fill-color: var(--google-red-600); + display: inline-block; } .warning { color: var(--cr-secondary-text-color); } - .warning > iron-icon { - --iron-icon-fill-color: var(--google-grey-refresh-700); - } - #problemDiv { align-items: center; display: flex; flex-direction: row; + font-size: 10px; height: 32px; min-height: 0; } @@ -74,10 +78,6 @@ Where: #problemDiv[invisible] { visibility: hidden; } - - #problemMessage { - font-size: 10px; - } </style> <pin-keyboard id="pinKeyboard" on-pin-change="onPinChange_" on-submit="onPinSubmit_" value="{{pinKeyboardValue_}}" @@ -87,13 +87,11 @@ Where: <!-- Warning/error; only shown if title is hidden. --> <div id="problemDiv" class$="[[problemClass_]]" invisible$="[[!problemMessageId_]]" problem> - <div> - <iron-icon icon="cr:error-outline"></iron-icon> - <span id="problemMessage"> - [[formatProblemMessage_(locale, problemMessageId_, - problemMessageParameters_)]] - </span> - </div> + <iron-icon id="errorIcon" icon="cr:error-outline"></iron-icon> + <span> + [[formatProblemMessage_(locale, problemMessageId_, + problemMessageParameters_)]] + </span> </div> </pin-keyboard> </template> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.js b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.js index 9dde5f4717f..12eaf15b7b2 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.js @@ -170,7 +170,8 @@ Polymer({ this.enableSubmit = false; this.isConfirmStep = false; this.hideProblem_(); - this.onPinChange_(); + this.onPinChange_( + new CustomEvent('pin-change', {detail: {pin: this.pinKeyboardValue_}})); }, /** @@ -281,13 +282,16 @@ Polymer({ } }, - /** @private */ - onPinChange_: function() { + /** + * @param {!CustomEvent} e Custom event containing the new pin. + * @private */ + onPinChange_: function(e) { + const newPin = /** @type {{pin: string}} */ (e.detail).pin; if (!this.isConfirmStep) { - if (this.pinKeyboardValue_) { + if (newPin) { this.quickUnlockPrivate.checkCredential( - chrome.quickUnlockPrivate.QuickUnlockMode.PIN, - this.pinKeyboardValue_, this.processPinProblems_.bind(this)); + chrome.quickUnlockPrivate.QuickUnlockMode.PIN, newPin, + this.processPinProblems_.bind(this)); } else { this.enableSubmit = false; } @@ -295,7 +299,7 @@ Polymer({ } this.hideProblem_(); - this.enableSubmit = this.pinKeyboardValue_.length > 0; + this.enableSubmit = newPin.length > 0; }, /** @private */ @@ -328,7 +332,8 @@ Polymer({ this.initialPin_ = this.pinKeyboardValue_; this.pinKeyboardValue_ = ''; this.isConfirmStep = true; - this.onPinChange_(); + this.onPinChange_(new CustomEvent( + 'pin-change', {detail: {pin: this.pinKeyboardValue_}})); this.$.pinKeyboard.focus(); this.writeUma(LockScreenProgress.ENTER_PIN); return; diff --git a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/BUILD.gn b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/BUILD.gn new file mode 100644 index 00000000000..f8fdd29d7e7 --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/BUILD.gn @@ -0,0 +1,30 @@ +# Copyright 2018 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. + +import("//third_party/closure_compiler/compile_js.gni") + +assert(is_chromeos, "SMB Shares is Chrome OS only.") + +js_type_check("closure_compile") { + deps = [ + ":add_smb_share_dialog", + ":smb_browser_proxy", + ] +} + +js_library("smb_browser_proxy") { + deps = [ + "//ui/webui/resources/js:cr", + ] +} + +js_library("add_smb_share_dialog") { + deps = [ + "//ui/webui/resources/cr_components/chromeos/smb_shares:smb_browser_proxy", + "//ui/webui/resources/cr_elements/cr_input:cr_input", + "//ui/webui/resources/js:cr", + "//ui/webui/resources/js:i18n_behavior", + "//ui/webui/resources/js:web_ui_listener_behavior", + ] +} diff --git a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/OWNERS b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/OWNERS new file mode 100644 index 00000000000..704b95c8e4b --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/OWNERS @@ -0,0 +1 @@ +khorimoto@chromium.org
\ No newline at end of file diff --git a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.html b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.html new file mode 100644 index 00000000000..7342022f0a8 --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.html @@ -0,0 +1,132 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> + +<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html"> +<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> +<link rel="import" href="chrome://resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html"> +<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html"> +<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html"> +<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> +<link rel="import" href="chrome://resources/html/i18n_behavior.html"> +<link rel="import" href="chrome://resources/html/md_select_css.html"> +<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> +<link rel="import" href="smb_browser_proxy.html"> + +<dom-module id="add-smb-share-dialog"> + <template> + <style include="md-select paper-button-style"> + #dialog [slot=body] { + height: 350px; + } + + .md-select { + width: 100%; + } + + .label { + @apply --cr-form-field-label; + } + + cr-input { + --cr-input-error-display: none; + } + + cr-searchable-drop-down { + display: block; + --cr-searchable-drop-down-width: 472px; + } + + .md-select, + cr-input:not(:last-child), + cr-searchable-drop-down { + margin-bottom: var(--cr-form-field-bottom-spacing); + } + + cr-toast { + left: 0; + max-height: 78px; + max-width: 300px; + position: absolute; + right: 0; + } + + paper-button { + position: relative; + top: 38px; + } + + .error-message { + color: white; + font: 13px; + padding-bottom: 15px; + padding-top: 15px; + text-align: center; + white-space: normal; + } + + [slot='button-container'] { + height: 78px; + justify-content: space-between; + } + </style> + + <cr-dialog id="dialog"> + <div slot="title">[[i18n('addSmbShare')]]</div> + <div slot="body" spellcheck="false"> + <cr-searchable-drop-down id="address" label="[[i18n('smbShareUrl')]]" + value="{{mountUrl_}}" items="[[discoveredShares_]]" + placeholder="\\server\share" on-change="onURLChanged_" + update-value-on-input autofocus> + </cr-searchable-drop-down> + <cr-input id="name" label="[[i18n('smbShareName')]]" + value="{{mountName_}}" maxlength="64"> + </cr-input> + <div id="authentication-method" hidden="[[!isActiveDirectory_]]"> + <div id="authentication-label" class="label"> + [[i18n('smbShareAuthenticationMethod')]] + </div> + <select class="md-select" aria-labelledby="authentication-label" + value="{{authenticationMethod_::change}}"> + <option value="kerberos"> + [[i18n('smbShareKerberosAuthentication')]] + </option> + <option value="credentials"> + [[i18n('smbShareStandardAuthentication')]] + </option> + </select> + </div> + <div id="credentials" + hidden="[[!shouldShowCredentialUI_(authenticationMethod_)]]"> + <cr-input id="username" label="[[i18n('smbShareUsername')]]" + value="{{username_}}"> + </cr-input> + <cr-input id="password" type="password" + label="[[i18n('smbSharePassword')]]" value="{{password_}}"> + </cr-input> + </div> + </div> + <div slot="button-container"> + <!-- Error toast --> + <div> + <cr-toast id="errorToast" duration="3000"> + <div class="error-message"> + [[addShareResultText_]] + </div> + </cr-toast> + </div> + <!-- Buttons --> + <div> + <paper-button class="cancel-button" on-click="cancel_" id="cancel"> + [[i18n('cancel')]] + </paper-button> + <paper-button class="action-button" on-click="onAddButtonTap_" + disabled="[[!canAddShare_(mountUrl_, inProgress_)]]"> + [[i18n('add')]] + </paper-button> + </div> + </div> + </cr-dialog> + </template> + <script src="add_smb_share_dialog.js"></script> +</dom-module> + diff --git a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.js b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.js new file mode 100644 index 00000000000..a309717b357 --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.js @@ -0,0 +1,180 @@ +// Copyright 2018 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 'add-smb-share-dialog' is a component for adding an SMB Share. + */ + +Polymer({ + is: 'add-smb-share-dialog', + + behaviors: [I18nBehavior, WebUIListenerBehavior], + + properties: { + lastUrl: { + type: String, + value: '', + }, + + /** @private {string} */ + mountUrl_: { + type: String, + value: '', + }, + + /** @private {string} */ + mountName_: { + type: String, + value: '', + }, + + /** @private {string} */ + username_: { + type: String, + value: '', + }, + + /** @private {string} */ + password_: { + type: String, + value: '', + }, + /** @private {!Array<string>}*/ + discoveredShares_: { + type: Array, + value: function() { + return []; + }, + }, + + /** @private */ + isActiveDirectory_: { + type: Boolean, + value: function() { + return loadTimeData.getBoolean('isActiveDirectoryUser'); + }, + }, + + /** @private */ + authenticationMethod_: { + type: String, + value: function() { + return loadTimeData.getBoolean('isActiveDirectoryUser') ? + SmbAuthMethod.KERBEROS : + SmbAuthMethod.CREDENTIALS; + }, + }, + + /** @private */ + addShareResultText_: String, + + /** @private */ + inProgress_: { + type: Boolean, + value: false, + } + }, + + /** @private {?smb_shares.SmbBrowserProxy} */ + browserProxy_: null, + + /** @override */ + created: function() { + this.browserProxy_ = smb_shares.SmbBrowserProxyImpl.getInstance(); + }, + + /** @override */ + attached: function() { + this.browserProxy_.startDiscovery(); + this.$.dialog.showModal(); + + this.addWebUIListener('on-shares-found', this.onSharesFound_.bind(this)); + this.mountUrl_ = this.lastUrl; + }, + + /** @private */ + cancel_: function() { + this.$.dialog.cancel(); + }, + + /** @private */ + onAddButtonTap_: function() { + this.inProgress_ = true; + this.browserProxy_ + .smbMount( + this.mountUrl_, this.mountName_.trim(), this.username_, + this.password_, this.authenticationMethod_) + .then(result => { + this.onAddShare_(result); + }); + }, + + /** @private */ + onURLChanged_: function() { + const parts = this.mountUrl_.split('\\'); + this.mountName_ = parts[parts.length - 1]; + }, + + /** + * @return {boolean} + * @private + */ + canAddShare_: function() { + return !!this.mountUrl_ && !this.inProgress_; + }, + + /** + * @param {!Array<string>} shares + * @private + */ + onSharesFound_: function(shares) { + this.discoveredShares_ = this.discoveredShares_.concat(shares); + }, + + /** + * @return {boolean} + * @private + */ + shouldShowCredentialUI_: function() { + return this.authenticationMethod_ == SmbAuthMethod.CREDENTIALS; + }, + + /** + * @param {SmbMountResult} result + * @private + */ + onAddShare_: function(result) { + this.inProgress_ = false; + switch (result) { + case SmbMountResult.SUCCESS: + this.$.dialog.close(); + break; + case SmbMountResult.AUTHENTICATION_FAILED: + this.addShareResultText_ = + loadTimeData.getString('smbShareAddedAuthFailedMessage'); + break; + case SmbMountResult.NOT_FOUND: + this.addShareResultText_ = + loadTimeData.getString('smbShareAddedNotFoundMessage'); + break; + case SmbMountResult.UNSUPPORTED_DEVICE: + this.addShareResultText_ = + loadTimeData.getString('smbShareAddedUnsupportedDeviceMessage'); + break; + case SmbMountResult.MOUNT_EXISTS: + this.addShareResultText_ = + loadTimeData.getString('smbShareAddedMountExistsMessage'); + break; + case SmbMountResult.INVALID_URL: + this.addShareResultText_ = + loadTimeData.getString('smbShareAddedInvalidURLMessage'); + break; + default: + this.addShareResultText_ = + loadTimeData.getString('smbShareAddedErrorMessage'); + } + this.$.errorToast.show(); + }, + +}); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/smb_browser_proxy.html b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/smb_browser_proxy.html new file mode 100644 index 00000000000..2d494727081 --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/smb_browser_proxy.html @@ -0,0 +1,2 @@ +<link rel="import" href="chrome://resources/html/cr.html"> +<script src="smb_browser_proxy.js"> </script>
\ No newline at end of file diff --git a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/smb_browser_proxy.js b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/smb_browser_proxy.js new file mode 100644 index 00000000000..7d345fbe013 --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/smb_browser_proxy.js @@ -0,0 +1,79 @@ +// Copyright 2018 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 A helper object used from the "add SMB share" dialog to + * interact with the browser. Used only on Chrome OS. + */ + +/** + * @enum {number} + * These values must be kept in sync with the SmbMountResult enum in + * chrome/browser/chromeos/smb_client/smb_service.h. + */ +const SmbMountResult = { + SUCCESS: 0, + UNKNOWN_FAILURE: 1, + AUTHENTICATION_FAILED: 2, + NOT_FOUND: 3, + UNSUPPORTED_DEVICE: 4, + MOUNT_EXISTS: 5, + INVALID_URL: 6, + INVALID_OPERATION: 7, + DBUS_PARSE_FAILED: 8, + OUT_OF_MEMORY: 9, + ABORTED: 10, + IO_ERROR: 11, + TOO_MANY_OPENED: 12, +}; + +/** @enum {string} */ +const SmbAuthMethod = { + KERBEROS: 'kerberos', + CREDENTIALS: 'credentials', +}; + +cr.define('smb_shares', function() { + /** @interface */ + class SmbBrowserProxy { + /** + * Attempts to mount an Smb filesystem with the provided url. + * @param {string} smbUrl File Share URL. + * @param {string} smbName Display name for the File Share. + * @param {string} username + * @param {string} password + * @param {string} authMethod + * @return {!Promise<SmbMountResult>} + */ + smbMount(smbUrl, smbName, username, password, authMethod) {} + + /** + * Starts the file share discovery process. + */ + startDiscovery() {} + } + + /** @implements {smb_shares.SmbBrowserProxy} */ + class SmbBrowserProxyImpl { + /** @override */ + smbMount(smbUrl, smbName, username, password, authMethod) { + return cr.sendWithPromise( + 'smbMount', smbUrl, smbName, username, password, + authMethod == SmbAuthMethod.KERBEROS); + } + + /** @override */ + startDiscovery() { + chrome.send('startDiscovery'); + } + } + + cr.addSingletonGetter(SmbBrowserProxyImpl); + + return { + SmbBrowserProxy: SmbBrowserProxy, + SmbBrowserProxyImpl: SmbBrowserProxyImpl, + }; + +}); diff --git a/chromium/ui/webui/resources/cr_components/cr_components_resources.grdp b/chromium/ui/webui/resources/cr_components/cr_components_resources.grdp index 3bf1f1cdd56..2c978f4adc1 100644 --- a/chromium/ui/webui/resources/cr_components/cr_components_resources.grdp +++ b/chromium/ui/webui/resources/cr_components/cr_components_resources.grdp @@ -131,6 +131,22 @@ file="cr_components/chromeos/network/network_config.js" type="chrome_html" compress="gzip" /> + <structure name="IDR_WEBUI_CHROMEOS_NETWORK_CONFIG_ELEMENT_BEHAVIOR_HTML" + file="cr_components/chromeos/network/network_config_element_behavior.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_WEBUI_CHROMEOS_NETWORK_CONFIG_ELEMENT_BEHAVIOR_JS" + file="cr_components/chromeos/network/network_config_element_behavior.js" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_WEBUI_CHROMEOS_NETWORK_CONFIG_INPUT_HTML" + file="cr_components/chromeos/network/network_config_input.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_WEBUI_CHROMEOS_NETWORK_CONFIG_INPUT_JS" + file="cr_components/chromeos/network/network_config_input.js" + type="chrome_html" + compress="gzip" /> <structure name="IDR_WEBUI_CHROMEOS_NETWORK_CONFIG_SELECT_HTML" file="cr_components/chromeos/network/network_config_select.html" type="chrome_html" @@ -139,6 +155,14 @@ file="cr_components/chromeos/network/network_config_select.js" type="chrome_html" compress="gzip" /> + <structure name="IDR_WEBUI_CHROMEOS_NETWORK_CONFIG_TOGGLE_HTML" + file="cr_components/chromeos/network/network_config_toggle.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_WEBUI_CHROMEOS_NETWORK_CONFIG_TOGGLE_JS" + file="cr_components/chromeos/network/network_config_toggle.js" + type="chrome_html" + compress="gzip" /> <structure name="IDR_WEBUI_CHROMEOS_NETWORK_IP_CONFIG_HTML" file="cr_components/chromeos/network/network_ip_config.html" type="chrome_html" @@ -340,5 +364,23 @@ file="cr_components/chromeos/multidevice_setup/ui_page.js" type="chrome_html" compress="gzip" /> + + <!-- Shared between settings and add new share flow. --> + <structure name="IDR_WEBUI_CHROMEOS_SMB_SHARES_SMB_BROWSER_PROXY_HTML" + file="cr_components/chromeos/smb_shares/smb_browser_proxy.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_WEBUI_CHROMEOS_SMB_SHARES_SMB_BROWSER_PROXY_JS" + file="cr_components/chromeos/smb_shares/smb_browser_proxy.js" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_WEBUI_CHROMEOS_SMB_SHARES_ADD_SMB_SHARE_DIALOG_HTML" + file="cr_components/chromeos/smb_shares/add_smb_share_dialog.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_WEBUI_CHROMEOS_SMB_SHARES_ADD_SMB_SHARE_DIALOG_JS" + file="cr_components/chromeos/smb_shares/add_smb_share_dialog.js" + type="chrome_html" + compress="gzip" /> </if> </grit-part> diff --git a/chromium/ui/webui/resources/cr_elements/.eslintrc.js b/chromium/ui/webui/resources/cr_elements/.eslintrc.js new file mode 100644 index 00000000000..25e21f992eb --- /dev/null +++ b/chromium/ui/webui/resources/cr_elements/.eslintrc.js @@ -0,0 +1,13 @@ +// Copyright 2018 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. + +module.exports = { + 'env': { + 'browser': true, + 'es6': true, + }, + 'rules': { + 'no-var': 'error', + }, +}; diff --git a/chromium/ui/webui/resources/cr_elements/BUILD.gn b/chromium/ui/webui/resources/cr_elements/BUILD.gn index 9927b6e60e8..5d09ab60ec3 100644 --- a/chromium/ui/webui/resources/cr_elements/BUILD.gn +++ b/chromium/ui/webui/resources/cr_elements/BUILD.gn @@ -18,6 +18,7 @@ group("closure_compile") { "cr_link_row:closure_compile", "cr_profile_avatar_selector:closure_compile", "cr_radio_button:closure_compile", + "cr_radio_group:closure_compile", "cr_searchable_drop_down:closure_compile", "cr_slider:closure_compile", "cr_toast:closure_compile", diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.js b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.js index 79a96c0b038..50e7eabd04b 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.js @@ -13,19 +13,22 @@ * Dimensions for camera capture. * @const */ -var CAPTURE_SIZE = {width: 576, height: 576}; +const CAPTURE_SIZE = { + width: 576, + height: 576 +}; /** * Interval between frames for camera capture (milliseconds). * @const */ -var CAPTURE_INTERVAL_MS = 1000 / 10; +const CAPTURE_INTERVAL_MS = 1000 / 10; /** * Duration of camera capture (milliseconds). * @const */ -var CAPTURE_DURATION_MS = 1000; +const CAPTURE_DURATION_MS = 1000; Polymer({ is: 'cr-camera', @@ -104,14 +107,14 @@ Polymer({ this.cameraCaptureInProgress_ = true; /** Pre-allocate all frames needed for capture. */ - var frames = []; + const frames = []; if (this.videomode) { /** Reduce capture size when in video mode. */ - var captureSize = { + const captureSize = { width: CAPTURE_SIZE.width / 2, height: CAPTURE_SIZE.height / 2 }; - var captureFrameCount = CAPTURE_DURATION_MS / CAPTURE_INTERVAL_MS; + const captureFrameCount = CAPTURE_DURATION_MS / CAPTURE_INTERVAL_MS; while (frames.length < captureFrameCount) frames.push(this.allocateFrame_(captureSize)); } else { @@ -119,10 +122,10 @@ Polymer({ } /** Start capturing frames at an interval. */ - var capturedFrames = []; + const capturedFrames = []; this.$.userImageStreamCrop.classList.remove('preview'); this.$.userImageStreamCrop.classList.add('capture'); - var interval = setInterval(() => { + const interval = setInterval(() => { /** Stop capturing frames when all allocated frames have been consumed. */ if (frames.length) { capturedFrames.push( @@ -143,7 +146,7 @@ Polymer({ this.stopCamera(); this.cameraStartInProgress_ = true; - var successCallback = function(stream) { + const successCallback = function(stream) { if (this.cameraStartInProgress_) { this.$.cameraVideo.srcObject = stream; this.cameraStream_ = stream; @@ -153,12 +156,12 @@ Polymer({ this.cameraStartInProgress_ = false; }.bind(this); - var errorCallback = function() { + const errorCallback = function() { this.cameraOnline_ = false; this.cameraStartInProgress_ = false; }.bind(this); - var videoConstraints = { + const videoConstraints = { width: {ideal: CAPTURE_SIZE.width}, height: {ideal: CAPTURE_SIZE.height}, }; @@ -185,8 +188,8 @@ Polymer({ * @private */ stopVideoTracks_: function(stream) { - var tracks = stream.getVideoTracks(); - for (var i = 0; i < tracks.length; i++) + const tracks = stream.getVideoTracks(); + for (let i = 0; i < tracks.length; i++) tracks[i].stop(); }, @@ -206,11 +209,11 @@ Polymer({ * @private */ allocateFrame_: function(size) { - var canvas = + const canvas = /** @type {!HTMLCanvasElement} */ (document.createElement('canvas')); canvas.width = size.width; canvas.height = size.height; - var ctx = /** @type {!CanvasRenderingContext2D} */ ( + const ctx = /** @type {!CanvasRenderingContext2D} */ ( canvas.getContext('2d', {alpha: false})); // Flip frame horizontally. ctx.translate(size.width, 0); @@ -227,16 +230,16 @@ Polymer({ * @private */ captureFrame_: function(video, canvas) { - var ctx = + const ctx = /** @type {!CanvasRenderingContext2D} */ ( canvas.getContext('2d', {alpha: false})); - var width = video.videoWidth; - var height = video.videoHeight; + const width = video.videoWidth; + const height = video.videoHeight; if (width < canvas.width || height < canvas.height) { console.error( 'Video capture size too small: ' + width + 'x' + height + '!'); } - var src = {}; + const src = {}; if (width / canvas.width > height / canvas.height) { // Full height, crop left/right. src.height = height; @@ -262,7 +265,7 @@ Polymer({ */ convertFramesToPng_: function(frames) { /** Encode captured frames. */ - var encodedImages = frames.map(function(frame) { + const encodedImages = frames.map(function(frame) { return frame.toDataURL('image/png'); }); @@ -271,7 +274,7 @@ Polymer({ return encodedImages[0]; /** Create forward/backward image sequence. */ - var forwardBackwardImageSequence = + const forwardBackwardImageSequence = encodedImages.concat(encodedImages.slice(1, -1).reverse()); /** Convert image sequence to animated PNG. */ diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_list.js b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_list.js index 174a48a25c8..2187d436ead 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_list.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_list.js @@ -128,7 +128,7 @@ Polymer({ * @param {string} imageUrl */ setSelectedImageUrl(imageUrl) { - var image = this.$.selector.items.find(function(image) { + const image = this.$.selector.items.find(function(image) { return image.dataset.url == imageUrl; }); if (image) { @@ -193,9 +193,9 @@ Polymer({ if (!this.selectedItem) return; - var selector = /** @type {IronSelectorElement} */ (this.$.selector); - var prevSelected = this.selectedItem; - var activate = false; + const selector = /** @type {IronSelectorElement} */ (this.$.selector); + const prevSelected = this.selectedItem; + let activate = false; switch (e.detail.key) { case 'enter': case 'space': @@ -244,9 +244,9 @@ Polymer({ * @private */ onIronActivate_: function(event) { - var type = event.detail.item.dataset.type; + const type = event.detail.item.dataset.type; // Don't change focus when activating the camera via mouse. - var activate = type != CrPicture.SelectionTypes.CAMERA; + const activate = type != CrPicture.SelectionTypes.CAMERA; this.selectImage_(event.detail.item, activate); }, diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.js b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.js index c7a869d8f2c..37b3f654ac4 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.js @@ -63,7 +63,7 @@ Polymer({ * event when the photo is completed. */ takePhoto: function() { - var camera = /** @type {?CrCameraElement} */ (this.$$('#camera')); + const camera = /** @type {?CrCameraElement} */ (this.$$('#camera')); if (camera) camera.takePhoto(); }, @@ -87,7 +87,7 @@ Polymer({ /** @private */ cameraActiveChanged_: function() { - var camera = /** @type {?CrCameraElement} */ (this.$$('#camera')); + const camera = /** @type {?CrCameraElement} */ (this.$$('#camera')); if (!camera) return; // Camera will be started when attached. if (this.cameraActive_) @@ -109,13 +109,13 @@ Polymer({ * Data URLs for PNG images can be large. Create an object URL to avoid * URL length limits. */ - var image = /** @type {!HTMLImageElement} */ (this.$$('#image')); + const image = /** @type {!HTMLImageElement} */ (this.$$('#image')); if (this.imageSrc.startsWith('data:image/png')) { - var byteString = atob(this.imageSrc.split(',')[1]); - var bytes = new Uint8Array(byteString.length); - for (var i = 0; i < byteString.length; i++) + const byteString = atob(this.imageSrc.split(',')[1]); + const bytes = new Uint8Array(byteString.length); + for (let i = 0; i < byteString.length; i++) bytes[i] = byteString.charCodeAt(i); - var blob = new Blob([bytes], {'type': 'image/png'}); + const blob = new Blob([bytes], {'type': 'image/png'}); // Use first frame as placeholder while rest of image loads. image.style.backgroundImage = 'url(' + CrPngBehavior.convertImageSequenceToPng([this.imageSrc]) + ')'; diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_types.js b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_types.js index b86039895dc..8afb666d23e 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_types.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_types.js @@ -2,7 +2,7 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -var CrPicture = {}; +const CrPicture = {}; /** * Contains the possible types for picture list image elements. diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_png_behavior.js b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_png_behavior.js index 7f2d9ae303b..d57600ebfb1 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_png_behavior.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_png_behavior.js @@ -12,44 +12,44 @@ * PNG frame delay fraction numerator. * @const */ -var PNG_FRAME_DELAY_NUMERATOR = 1; +const PNG_FRAME_DELAY_NUMERATOR = 1; /** * PNG frame delay fraction denominator. * @const */ -var PNG_FRAME_DELAY_DENOMINATOR = 20; +const PNG_FRAME_DELAY_DENOMINATOR = 20; /** * PNG signature. * @const */ -var PNG_SIGNATURE = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]; +const PNG_SIGNATURE = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]; /** * PNG bit depth (8 = 32bpp). * @const */ -var PNG_BIT_DEPTH = 8; +const PNG_BIT_DEPTH = 8; /** * PNG compression method (0 = deflate/inflate compression with a sliding * window PNG compression). * @const */ -var PNG_COMPRESSION_METHOD = 0; +const PNG_COMPRESSION_METHOD = 0; /** * PNG filter method (0 = adaptive filtering with five basic filter types). * @const */ -var PNG_FILTER_METHOD = 0; +const PNG_FILTER_METHOD = 0; /** * PNG interlace method (0 = no interlace). * @const */ -var PNG_INTERLACE_METHOD = 0; +const PNG_INTERLACE_METHOD = 0; /** * CRC table for PNG encode. @@ -69,7 +69,7 @@ var PNG_INTERLACE_METHOD = 0; * * @const */ -var PNG_CRC_TABLE = [ +const PNG_CRC_TABLE = [ 0x0, 0x77073096, 0xEE0E612C, 0x990951BA, 0x76DC419, 0x706AF48F, 0xE963A535, 0x9E6495A3, 0xEDB8832, 0x79DCB8A4, 0xE0D5E91E, 0x97D2D988, 0x9B64C2B, 0x7EB17CBD, 0xE7B82D07, 0x90BF1D91, 0x1DB71064, 0x6AB020F2, @@ -126,10 +126,10 @@ var PNG_CRC_TABLE = [ * chunks: !Array<Uint8Array> * }} */ -var CrPngState; +let CrPngState; /** @polymerBehavior */ -var CrPngBehavior = { +const CrPngBehavior = { /** * Returns a data URL for an animated PNG image that is created * from a sequence of images. @@ -137,7 +137,7 @@ var CrPngBehavior = { * @return {string} A data URL for an animated PNG image. */ convertImageSequenceToPng: function(images) { - var png = + const png = /** @type {!CrPngState} */ ({frames: 0, sequences: 0, chunks: []}); /** Append signature. */ @@ -154,7 +154,7 @@ var CrPngBehavior = { * Filter method 1 byte * Interlace method 1 byte */ - var IHDR = new Uint8Array(12 + 13); + const IHDR = new Uint8Array(12 + 13); this.writeUInt32_(IHDR, 13, 0); this.writeFourCC_(IHDR, 'IHDR', 4); /** Write size at the end when known. */ @@ -172,7 +172,7 @@ var CrPngBehavior = { * Number of frames 4 bytes * Number of times to loop 4 bytes */ - var acTL = new Uint8Array(12 + 8); + const acTL = new Uint8Array(12 + 8); this.writeUInt32_(acTL, 8, 0); this.writeFourCC_(acTL, 'acTL', 4); this.writeUInt32_(acTL, images.length, 8); @@ -181,7 +181,7 @@ var CrPngBehavior = { png.chunks.push(acTL); /** Append each image as a PNG frame. */ - for (var i = 0; i < images.length; ++i) + for (let i = 0; i < images.length; ++i) this.appendFrameFromDataURL_(images[i], png); /** Update IHDR now that size and colour is known. */ @@ -193,7 +193,7 @@ var CrPngBehavior = { /** * http://www.w3.org/TR/2003/REC-PNG-20031110/#11IEND */ - var IEND = new Uint8Array(12); + const IEND = new Uint8Array(12); this.writeUInt32_(IEND, 0, 0); this.writeFourCC_(IEND, 'IEND', 4); this.writeUInt32_(IEND, this.getCRC_(IEND, 4, 8), 8); @@ -228,8 +228,8 @@ var CrPngBehavior = { * @private */ readString_: function(buffer, offset, length) { - var str = ''; - for (var i = 0; i < length; i++) { + let str = ''; + for (let i = 0; i < length; i++) { str += String.fromCharCode(buffer[offset + i]); } return str; @@ -243,7 +243,7 @@ var CrPngBehavior = { * @private */ writeBytes_: function(buffer, bytes, offset) { - for (var i = 0; i < bytes.length; i++) { + for (let i = 0; i < bytes.length; i++) { buffer[offset + i] = bytes[i] & 0xFF; } }, @@ -293,7 +293,7 @@ var CrPngBehavior = { * @private */ writeString_: function(buffer, string, offset) { - for (var i = 0; i < string.length; i++) { + for (let i = 0; i < string.length; i++) { buffer[offset + i] = string.charCodeAt(i); } }, @@ -321,9 +321,9 @@ var CrPngBehavior = { * @private */ getCRC_: function(buffer, start, end) { - var crc = 0xFFFFFFFF; - for (var i = start; i < end; i++) { - var crcTableIndex = (crc ^ (buffer[i])) & 0xFF; + let crc = 0xFFFFFFFF; + for (let i = start; i < end; i++) { + const crcTableIndex = (crc ^ (buffer[i])) & 0xFF; crc = PNG_CRC_TABLE[crcTableIndex] ^ (crc >>> 8); } return crc ^ 0xFFFFFFFF; @@ -337,12 +337,12 @@ var CrPngBehavior = { */ appendFrameFromDataURL_: function(dataURL, png) { /** Convert data URL to Uint8Array. */ - var byteString = atob(dataURL.split(',')[1]); - var bytes = new Uint8Array(byteString.length); + const byteString = atob(dataURL.split(',')[1]); + const bytes = new Uint8Array(byteString.length); this.writeString_(bytes, byteString, 0); /** Check signature. */ - var signature = bytes.subarray(0, PNG_SIGNATURE.length); + const signature = bytes.subarray(0, PNG_SIGNATURE.length); if (signature.toString() != PNG_SIGNATURE.toString()) { console.error('Bad PNG signature'); } @@ -360,7 +360,7 @@ var CrPngBehavior = { * Dispose op 1 bytes * Blend op 1 bytes */ - var fcTL = new Uint8Array(12 + 26); + const fcTL = new Uint8Array(12 + 26); this.writeUInt32_(fcTL, 26, 0); this.writeFourCC_(fcTL, 'fcTL', 4); this.writeUInt32_(fcTL, png.sequences, 8); @@ -376,7 +376,7 @@ var CrPngBehavior = { png.chunks.push(fcTL); /** Append data chunks for frame. */ - var i = PNG_SIGNATURE.length; + let i = PNG_SIGNATURE.length; while ((i + 12) <= bytes.length) { /** * http://www.w3.org/TR/2003/REC-PNG-20031110/#5Chunk-layout @@ -386,9 +386,9 @@ var CrPngBehavior = { * chunk = length bytes * crc = 4 bytes */ - var length = this.readUInt32_(bytes, i); - var type = this.readString_(bytes, i + 4, 4); - var chunk = bytes.subarray(i + 8, i + 8 + length); + const length = this.readUInt32_(bytes, i); + const type = this.readString_(bytes, i + 4, 4); + const chunk = bytes.subarray(i + 8, i + 8 + length); /** We should have enough bytes left for length. */ if (length != chunk.length) { @@ -408,13 +408,13 @@ var CrPngBehavior = { * Filter method 1 byte * Interlace method 1 byte */ - var width = this.readUInt32_(chunk, 0); - var height = this.readUInt32_(chunk, 4); - var depth = chunk[8]; - var colour = chunk[9]; - var compression = chunk[10]; - var filter = chunk[11]; - var interlace = chunk[12]; + const width = this.readUInt32_(chunk, 0); + const height = this.readUInt32_(chunk, 4); + const depth = chunk[8]; + const colour = chunk[9]; + const compression = chunk[10]; + const filter = chunk[11]; + const interlace = chunk[12]; /** Initialize size and colour if this is the first frame. */ if (png.frames == 0) { @@ -447,7 +447,7 @@ var CrPngBehavior = { * * Data X bytes */ - var IDAT = new Uint8Array(12 + length); + const IDAT = new Uint8Array(12 + length); this.writeUInt32_(IDAT, length, 0); this.writeFourCC_(IDAT, 'IDAT', 4); this.writeBytes_(IDAT, chunk, 8); @@ -461,7 +461,7 @@ var CrPngBehavior = { * Sequence number 4 bytes * Frame data X bytes */ - var fdAT = new Uint8Array(12 + 4 + length); + const fdAT = new Uint8Array(12 + 4 + length); this.writeUInt32_(fdAT, 4 + length, 0); this.writeFourCC_(fdAT, 'fdAT', 4); this.writeUInt32_(fdAT, png.sequences, 8); @@ -478,7 +478,7 @@ var CrPngBehavior = { * * Palette data X bytes */ - var PLTE = new Uint8Array(12 + length); + const PLTE = new Uint8Array(12 + length); this.writeUInt32_(PLTE, length, 0); this.writeFourCC_(PLTE, 'PLTE', 4); this.writeBytes_(PLTE, chunk, 8); diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_icon.js b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_icon.js index b6d205e7900..723ed41d021 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_icon.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_icon.js @@ -47,17 +47,17 @@ Polymer({ getIconClass_: function() { if (!this.networkState) return ''; - var type = this.networkState.Type; + const type = this.networkState.Type; if (type == CrOnc.Type.ETHERNET) return 'ethernet'; if (type == CrOnc.Type.VPN) return 'vpn'; - var prefix = (type == CrOnc.Type.CELLULAR || type == CrOnc.Type.TETHER) ? + const prefix = (type == CrOnc.Type.CELLULAR || type == CrOnc.Type.TETHER) ? 'cellular-' : 'wifi-'; if (!this.isListItem && !this.networkState.GUID) { - var deviceState = this.deviceState; + const deviceState = this.deviceState; if (!deviceState || deviceState.State == 'Enabled' || deviceState.State == 'Enabling') { return prefix + 'no-network'; @@ -65,7 +65,7 @@ Polymer({ return prefix + 'off'; } - var connectionState = this.networkState.ConnectionState; + const connectionState = this.networkState.ConnectionState; if (connectionState == CrOnc.ConnectionState.CONNECTING) return prefix + 'connecting'; @@ -75,7 +75,7 @@ Polymer({ return prefix + 'not-connected'; } - var strength = CrOnc.getSignalStrength(this.networkState); + const strength = CrOnc.getSignalStrength(this.networkState); return prefix + this.strengthToIndex_(strength).toString(10); }, @@ -103,14 +103,14 @@ Polymer({ * @private */ getTechnology_: function() { - var networkState = this.networkState; + const networkState = this.networkState; if (!networkState) return ''; - var type = networkState.Type; + const type = networkState.Type; if (type == CrOnc.Type.WI_MAX) return 'network:4g'; if (type == CrOnc.Type.CELLULAR && networkState.Cellular) { - var technology = + const technology = this.getTechnologyId_(networkState.Cellular.NetworkTechnology); if (technology != '') return 'network:' + technology; @@ -153,7 +153,7 @@ Polymer({ * @private */ showSecure_: function() { - var networkState = this.networkState; + const networkState = this.networkState; if (!this.networkState) return false; if (networkState.Type != CrOnc.Type.WI_FI || !networkState.WiFi) @@ -162,7 +162,7 @@ Polymer({ networkState.ConnectionState == CrOnc.ConnectionState.NOT_CONNECTED) { return false; } - var security = CrOnc.getStateOrActiveString(networkState.WiFi.Security); + const security = CrOnc.getStateOrActiveString(networkState.WiFi.Security); return !!security && security != 'None'; }, }); diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list.js b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list.js index 0942eb367b9..8d68577901c 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list.js @@ -78,10 +78,10 @@ Polymer({ /** @private */ updateListItems_: function() { this.saveScroll(this.$.networkList); - var beforeNetworks = this.customItems.filter(function(item) { + const beforeNetworks = this.customItems.filter(function(item) { return item.showBeforeNetworksList == true; }); - var afterNetworks = this.customItems.filter(function(item) { + const afterNetworks = this.customItems.filter(function(item) { return item.showBeforeNetworksList == false; }); this.listItems_ = beforeNetworks.concat(this.networks, afterNetworks); @@ -97,7 +97,7 @@ Polymer({ /** @private */ focusFirstItem_: function() { // Select the first cr-network-list-item if there is one. - var item = this.$$('cr-network-list-item'); + const item = this.$$('cr-network-list-item'); if (!item) return; item.focus(); diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.js b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.js index 2b878fd620d..b3fff16a2d3 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.js @@ -74,7 +74,7 @@ Polymer({ networkStateChanged_: function() { if (!this.networkState) return; - var connectionState = this.networkState.ConnectionState; + const connectionState = this.networkState.ConnectionState; if (connectionState == this.connectionState_) return; this.connectionState_ = connectionState; @@ -88,13 +88,13 @@ Polymer({ */ getItemName_: function() { if (this.item.hasOwnProperty('customItemName')) { - var item = /** @type {!CrNetworkList.CustomItemState} */ (this.item); - var name = item.customItemName || ''; + const item = /** @type {!CrNetworkList.CustomItemState} */ (this.item); + let name = item.customItemName || ''; if (CrOncStrings.hasOwnProperty(item.customItemName)) name = CrOncStrings[item.customItemName]; return name; } - var network = /** @type {!CrOnc.NetworkStateProperties} */ (this.item); + const network = /** @type {!CrOnc.NetworkStateProperties} */ (this.item); return CrOnc.getNetworkName(network); }, @@ -114,7 +114,7 @@ Polymer({ getNetworkStateText_: function() { if (!this.networkState) return ''; - var connectionState = this.networkState.ConnectionState; + const connectionState = this.networkState.ConnectionState; if (this.networkState.Type == CrOnc.Type.CELLULAR) { // For Cellular, an empty ConnectionState indicates that the device is // still initializing. diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_types.js b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_types.js index 55e2f4ac443..93d258c61f4 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_types.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_types.js @@ -8,7 +8,7 @@ * CrNetworkListItem. */ -var CrNetworkList = {}; +const CrNetworkList = {}; /** * Generic managed property type. This should match any of the basic managed diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_listener_behavior.js b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_listener_behavior.js index 026500d90ee..c467b9aa093 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_listener_behavior.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_listener_behavior.js @@ -8,7 +8,7 @@ */ /** @polymerBehavior */ -var CrNetworkListenerBehavior = { +const CrNetworkListenerBehavior = { properties: { /** * Array of selectors specifying all children to alert of changes to the @@ -63,8 +63,8 @@ var CrNetworkListenerBehavior = { * @private */ onNetworkListChanged_: function(networkIds) { - var event = new CustomEvent('network-list-changed', {detail: networkIds}); - for (var i = 0; i < this.networkListChangeSubscriberSelectors_.length; + const event = new CustomEvent('network-list-changed', {detail: networkIds}); + for (let i = 0; i < this.networkListChangeSubscriberSelectors_.length; i++) { this.maybeDispatchEvent_( this.networkListChangeSubscriberSelectors_[i], event); @@ -79,8 +79,8 @@ var CrNetworkListenerBehavior = { * @private */ onNetworksChanged_: function(networkIds) { - var event = new CustomEvent('networks-changed', {detail: networkIds}); - for (var i = 0; i < this.networksChangeSubscriberSelectors_.length; i++) { + const event = new CustomEvent('networks-changed', {detail: networkIds}); + for (let i = 0; i < this.networksChangeSubscriberSelectors_.length; i++) { this.maybeDispatchEvent_( this.networksChangeSubscriberSelectors_[i], event); } @@ -91,7 +91,7 @@ var CrNetworkListenerBehavior = { * @private */ maybeDispatchEvent_: function(selectors, event) { - var element = this.$$(selectors); + const element = this.$$(selectors); if (!element) return; element.dispatchEvent(event); diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_select.js b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_select.js index 66036c7283d..ee42242945c 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_select.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_network_select.js @@ -106,7 +106,7 @@ Polymer({ this.refreshNetworks(); - /** @const */ var INTERVAL_MS = 10 * 1000; + /** @const */ const INTERVAL_MS = 10 * 1000; chrome.networkingPrivate.requestNetworkScan(); this.scanIntervalId_ = window.setInterval(function() { chrome.networkingPrivate.requestNetworkScan(); @@ -133,11 +133,46 @@ Polymer({ }, /** + * Returns default network if it is present. + * @return {!CrOnc.NetworkStateProperties|undefined} + */ + getDefaultNetwork: function() { + let defaultNetwork; + for (let i = 0; i < this.networkStateList_.length; ++i) { + const state = this.networkStateList_[i]; + if (state.ConnectionState == CrOnc.ConnectionState.CONNECTED) { + defaultNetwork = state; + break; + } + if (state.ConnectionState == CrOnc.ConnectionState.CONNECTING && + !defaultNetwork) { + defaultNetwork = state; + // Do not break here in case a non WiFi network is connecting but a + // WiFi network is connected. + } else if (state.Type == CrOnc.Type.WI_FI) { + break; // Non connecting or connected WiFI networks are always last. + } + } + return defaultNetwork; + }, + + /** + * Returns network with specified GUID if it is available. + * @param {string} guid of network. + * @return {!CrOnc.NetworkStateProperties|undefined} + */ + getNetwork: function(guid) { + return this.networkStateList_.find(function(network) { + return network.GUID == guid; + }); + }, + + /** * @param {!Array<!CrOnc.DeviceStateProperties>} deviceStates * @private */ getDeviceStatesCallback_: function(deviceStates) { - var filter = { + const filter = { networkType: chrome.networkingPrivate.NetworkType.ALL, visible: true, configured: false @@ -161,22 +196,8 @@ Polymer({ this.networkStateList_ = networkStates; this.fire('network-list-changed', networkStates); - var defaultNetwork; - for (var i = 0; i < networkStates.length; ++i) { - var state = networkStates[i]; - if (state.ConnectionState == CrOnc.ConnectionState.CONNECTED) { - defaultNetwork = state; - break; - } - if (state.ConnectionState == CrOnc.ConnectionState.CONNECTING && - !defaultNetwork) { - defaultNetwork = state; - // Do not break here in case a non WiFi network is connecting but a - // WiFi network is connected. - } else if (state.Type == CrOnc.Type.WI_FI) { - break; // Non connecting or connected WiFI networks are always last. - } - } + const defaultNetwork = this.getDefaultNetwork(); + if ((!defaultNetwork && !this.defaultNetworkState_) || (defaultNetwork && this.defaultNetworkState_ && defaultNetwork.GUID == this.defaultNetworkState_.GUID && @@ -203,11 +224,11 @@ Polymer({ return; } // Add a Cellular network after the Ethernet network if it exists. - var idx = networkStates.length > 0 && + const idx = networkStates.length > 0 && networkStates[0].Type == CrOnc.Type.ETHERNET ? 1 : 0; - var cellular = { + const cellular = { GUID: '', Type: CrOnc.Type.CELLULAR, Cellular: {Scanning: this.cellularDeviceState_.Scanning} @@ -221,7 +242,7 @@ Polymer({ * @private */ onNetworkListItemSelected_: function(e) { - var state = e.detail; + const state = e.detail; e.target.blur(); if (!this.handleNetworkItemSelected) { @@ -232,7 +253,7 @@ Polymer({ // NOTE: This isn't used by OOBE (no handle-network-item-selected). // TODO(stevenjb): Remove custom OOBE handling. if (state.Type == CrOnc.Type.CELLULAR && this.cellularDeviceState_) { - var cellularDevice = this.cellularDeviceState_; + const cellularDevice = this.cellularDeviceState_; // If Cellular is not enabled and not SIM locked, enable Cellular. if (cellularDevice.State != CrOnc.DeviceState.ENABLED && (!cellularDevice.SIMLockStatus || @@ -245,7 +266,7 @@ Polymer({ return; chrome.networkingPrivate.startConnect(state.GUID, function() { - var lastError = chrome.runtime.lastError; + const lastError = chrome.runtime.lastError; if (lastError && lastError != 'connecting') console.error('networkingPrivate.startConnect error: ' + lastError); }); diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_onc_types.js b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_onc_types.js index bab6ac84837..f5664dda588 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_onc_types.js +++ b/chromium/ui/webui/resources/cr_elements/chromeos/network/cr_onc_types.js @@ -36,9 +36,9 @@ * vpnNameTemplate: string, * }} */ -var CrOncStrings; +let CrOncStrings; -var CrOnc = {}; +const CrOnc = {}; /** @typedef {chrome.networkingPrivate.NetworkStateProperties} */ CrOnc.NetworkStateProperties; @@ -239,16 +239,23 @@ CrOnc.getActiveValue = function(property) { // If no Active value is defined, return the effective value. if ('Effective' in property) { - var effective = property.Effective; + const effective = property.Effective; if (effective in property) return property[effective]; } - // If no Effective value, return the UserSetting or DeviceSetting. + // If no Effective value, return the UserSetting or SharedSetting. if ('UserSetting' in property) return property['UserSetting']; - if ('DeviceSetting' in property) - return property['DeviceSetting']; + if ('SharedSetting' in property) + return property['SharedSetting']; + + // Effective, UserEditable or DeviceEditable properties may not have a value + // set. + if ('Effective' in property || 'UserEditable' in property || + 'DeviceEditable' in property) { + return undefined; + } console.error( 'getActiveValue called on invalid ONC object: ' + @@ -270,29 +277,48 @@ CrOnc.getStateOrActiveString = function(property) { }; /** + * Return if the property is simple, i.e. doesn't contain any nested + * dictionaries. + * @param property {!Object|undefined} + * @return {boolean} + */ +CrOnc.isSimpleProperty = function(property) { + const requiredProperties = [ + 'Active', 'Effective', 'UserSetting', 'SharedSetting', 'UserEditable', + 'DeviceEditable' + ]; + for (const prop of requiredProperties) { + if (prop in property) + return true; + } + return false; +}; + +/** * 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) { +CrOnc.getActiveProperties = function(properties) { 'use strict'; if (!properties) return undefined; - var result = {}; - var keys = Object.keys(properties); - for (var i = 0; i < keys.length; ++i) { - var k = keys[i]; - var prop = CrOnc.getActiveValue(properties[k]); - if (prop == undefined) { - console.error( - 'getSimpleActiveProperties called on invalid ONC object: ' + - JSON.stringify(properties)); - return undefined; + const result = {}; + const keys = Object.keys(properties); + for (let i = 0; i < keys.length; ++i) { + const k = keys[i]; + const property = properties[k]; + let propertyValue; + if (typeof property === 'object') { + if (CrOnc.isSimpleProperty(property)) + propertyValue = CrOnc.getActiveValue(property); + else + propertyValue = CrOnc.getActiveProperties(property); + } else { + propertyValue = property; } - result[k] = prop; + result[k] = propertyValue; } return result; }; @@ -307,11 +333,11 @@ CrOnc.getSimpleActiveProperties = function(properties) { */ CrOnc.getIPConfigForType = function(properties, type) { 'use strict'; - /** @type {!CrOnc.IPConfigProperties|undefined} */ var ipConfig = undefined; - /** @type {!CrOnc.IPType|undefined} */ var ipType = undefined; - var ipConfigs = properties.IPConfigs; + /** @type {!CrOnc.IPConfigProperties|undefined} */ let ipConfig = undefined; + /** @type {!CrOnc.IPType|undefined} */ let ipType = undefined; + const ipConfigs = properties.IPConfigs; if (ipConfigs) { - for (var i = 0; i < ipConfigs.length; ++i) { + for (let i = 0; i < ipConfigs.length; ++i) { ipConfig = ipConfigs[i]; ipType = ipConfig.Type ? /** @type {CrOnc.IPType} */ (ipConfig.Type) : undefined; @@ -322,9 +348,9 @@ CrOnc.getIPConfigForType = function(properties, type) { if (type != CrOnc.IPType.IPV4) return type == ipType ? ipConfig : undefined; - var staticIpConfig = + const staticIpConfig = /** @type {!CrOnc.IPConfigProperties|undefined} */ ( - CrOnc.getSimpleActiveProperties(properties.StaticIPConfig)); + CrOnc.getActiveProperties(properties.StaticIPConfig)); if (!staticIpConfig) return ipConfig; @@ -354,7 +380,7 @@ CrOnc.getIPConfigForType = function(properties, type) { * @return {number} The signal strength value if it exists or 0. */ CrOnc.getSignalStrength = function(properties) { - var type = properties.Type; + const type = properties.Type; if (type == CrOnc.Type.CELLULAR && properties.Cellular) return properties.Cellular.SignalStrength || 0; if (type == CrOnc.Type.TETHER && properties.Tether) @@ -375,7 +401,7 @@ CrOnc.getSignalStrength = function(properties) { * managed dictionary or undefined. */ CrOnc.getManagedAutoConnect = function(properties) { - var type = properties.Type; + const type = properties.Type; if (type == CrOnc.Type.CELLULAR && properties.Cellular) return properties.Cellular.AutoConnect; if (type == CrOnc.Type.VPN && properties.VPN) @@ -394,7 +420,7 @@ CrOnc.getManagedAutoConnect = function(properties) { * @return {boolean} The AutoConnect value if it exists or false. */ CrOnc.getAutoConnect = function(properties) { - var autoconnect = CrOnc.getManagedAutoConnect(properties); + const autoconnect = CrOnc.getManagedAutoConnect(properties); return !!CrOnc.getActiveValue(autoconnect); }; @@ -406,14 +432,14 @@ CrOnc.getAutoConnect = function(properties) { CrOnc.getNetworkName = function(properties) { if (!properties) return ''; - var name = CrOnc.getStateOrActiveString(properties.Name); - var type = CrOnc.getStateOrActiveString(properties.Type); + const name = CrOnc.getStateOrActiveString(properties.Name); + const type = CrOnc.getStateOrActiveString(properties.Type); if (!name) return CrOncStrings['OncType' + type]; if (type == 'VPN' && properties.VPN) { - var vpnType = CrOnc.getStateOrActiveString(properties.VPN.Type); + const vpnType = CrOnc.getStateOrActiveString(properties.VPN.Type); if (vpnType == 'ThirdPartyVPN' && properties.VPN.ThirdPartyVPN) { - var providerName = properties.VPN.ThirdPartyVPN.ProviderName; + const providerName = properties.VPN.ThirdPartyVPN.ProviderName; if (providerName) { return CrOncStrings.vpnNameTemplate.replace('$1', providerName) .replace('$2', name); @@ -441,7 +467,7 @@ CrOnc.getEscapedNetworkName = function(properties) { CrOnc.isSimLocked = function(properties) { if (!properties.Cellular) return false; - var simLockStatus = properties.Cellular.SIMLockStatus; + const simLockStatus = properties.Cellular.SIMLockStatus; if (simLockStatus == undefined) return false; return simLockStatus.LockType == CrOnc.LockType.PIN || @@ -458,12 +484,12 @@ CrOnc.isSimLocked = function(properties) { */ CrOnc.setValidStaticIPConfig = function(config, properties) { if (!config.IPAddressConfigType) { - var ipConfigType = /** @type {chrome.networkingPrivate.IPConfigType} */ ( + const ipConfigType = /** @type {chrome.networkingPrivate.IPConfigType} */ ( CrOnc.getActiveValue(properties.IPAddressConfigType)); config.IPAddressConfigType = ipConfigType || CrOnc.IPConfigType.DHCP; } if (!config.NameServersConfigType) { - var nsConfigType = /** @type {chrome.networkingPrivate.IPConfigType} */ ( + const nsConfigType = /** @type {chrome.networkingPrivate.IPConfigType} */ ( CrOnc.getActiveValue(properties.NameServersConfigType)); config.NameServersConfigType = nsConfigType || CrOnc.IPConfigType.DHCP; } @@ -478,8 +504,8 @@ CrOnc.setValidStaticIPConfig = function(config, properties) { config.StaticIPConfig = /** @type {chrome.networkingPrivate.IPConfigProperties} */ ({}); } - var staticIP = config.StaticIPConfig; - var stateIPConfig = CrOnc.getIPConfigForType(properties, CrOnc.IPType.IPV4); + const staticIP = config.StaticIPConfig; + const stateIPConfig = CrOnc.getIPConfigForType(properties, CrOnc.IPType.IPV4); if (config.IPAddressConfigType == 'Static') { staticIP.Gateway = staticIP.Gateway || stateIPConfig.Gateway || ''; staticIP.IPAddress = staticIP.IPAddress || stateIPConfig.IPAddress || ''; @@ -504,10 +530,10 @@ CrOnc.setValidStaticIPConfig = function(config, properties) { */ CrOnc.setProperty = function(properties, key, value) { while (true) { - var index = key.indexOf('.'); + const index = key.indexOf('.'); if (index < 0) break; - var keyComponent = key.substr(0, index); + const keyComponent = key.substr(0, index); if (!properties.hasOwnProperty(keyComponent)) properties[keyComponent] = {}; properties = properties[keyComponent]; @@ -533,7 +559,7 @@ CrOnc.setTypeProperty = function(properties, key, value) { 'Type not defined in properties: ' + JSON.stringify(properties)); return; } - var typeKey = properties.Type + '.' + key; + const typeKey = properties.Type + '.' + key; CrOnc.setProperty(properties, typeKey, value); }; @@ -547,9 +573,9 @@ CrOnc.getRoutingPrefixAsNetmask = function(prefixLength) { // Return the empty string for invalid inputs. if (prefixLength < 0 || prefixLength > 32) return ''; - var netmask = ''; - for (var i = 0; i < 4; ++i) { - var remainder = 8; + let netmask = ''; + for (let i = 0; i < 4; ++i) { + let remainder = 8; if (prefixLength >= 8) { prefixLength -= 8; } else { @@ -558,7 +584,7 @@ CrOnc.getRoutingPrefixAsNetmask = function(prefixLength) { } if (i > 0) netmask += '.'; - var value = 0; + let value = 0; if (remainder != 0) value = ((2 << (remainder - 1)) - 1) << (8 - remainder); netmask += value.toString(); @@ -573,12 +599,12 @@ CrOnc.getRoutingPrefixAsNetmask = function(prefixLength) { */ CrOnc.getRoutingPrefixAsLength = function(netmask) { 'use strict'; - var prefixLength = 0; - var tokens = netmask.split('.'); + let prefixLength = 0; + const tokens = netmask.split('.'); if (tokens.length != 4) return -1; - for (var i = 0; i < tokens.length; ++i) { - var token = tokens[i]; + for (let i = 0; i < tokens.length; ++i) { + const token = tokens[i]; // If we already found the last mask and the current one is not // '0' then the netmask is invalid. For example, 255.224.255.0 if (prefixLength / 8 != i) { diff --git a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html index 3c87967d159..4b59b25bc40 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html +++ b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html @@ -60,8 +60,9 @@ outline: none; } </style> - <dialog id="dialog" tabindex="0" on-close="onNativeDialogClose_"> - <div class="item-wrapper" tabindex="-1" role="menu"> + <dialog id="dialog" tabindex="0" on-close="onNativeDialogClose_" role="menu" + aria-label$="[[ariaLabel]]"> + <div class="item-wrapper" tabindex="-1"> <slot name="item" id="contentNode"></slot> </div> </dialog> diff --git a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js index 9c70ecede80..477e0ed7456 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js +++ b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js @@ -16,7 +16,7 @@ * maxY: (number|undefined), * }} */ -var ShowAtConfig; +let ShowAtConfig; /** * @typedef {{ @@ -32,13 +32,13 @@ var ShowAtConfig; * maxY: (number|undefined), * }} */ -var ShowAtPositionConfig; +let ShowAtPositionConfig; /** * @enum {number} * @const */ -var AnchorAlignment = { +const AnchorAlignment = { BEFORE_START: -2, AFTER_START: -1, CENTER: 0, @@ -47,7 +47,7 @@ var AnchorAlignment = { }; /** @const {string} */ -var DROPDOWN_ITEM_CLASS = 'dropdown-item'; +const DROPDOWN_ITEM_CLASS = 'dropdown-item'; (function() { /** @@ -66,7 +66,7 @@ var DROPDOWN_ITEM_CLASS = 'dropdown-item'; */ function getStartPointWithAnchor( start, end, menuLength, anchorAlignment, min, max) { - var startPoint = 0; + let startPoint = 0; switch (anchorAlignment) { case AnchorAlignment.BEFORE_START: startPoint = -menuLength; @@ -100,7 +100,7 @@ function getStartPointWithAnchor( * @return {!ShowAtPositionConfig} */ function getDefaultShowConfig() { - var doc = document.scrollingElement; + const doc = document.scrollingElement; return { top: 0, left: 0, @@ -157,6 +157,8 @@ Polymer({ type: Boolean, value: false, }, + + ariaLabel: String, }, listeners: { @@ -238,7 +240,7 @@ Polymer({ if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return; - var nextOption = this.getNextOption_(e.key == 'ArrowDown' ? 1 : -1); + const nextOption = this.getNextOption_(e.key == 'ArrowDown' ? 1 : -1); if (nextOption) { if (!this.hasMousemoveListener_) { this.hasMousemoveListener_ = true; @@ -260,9 +262,10 @@ Polymer({ onMouseover_: function(e) { // TODO(scottchen): Using "focus" to determine selected item might mess // with screen readers in some edge cases. - var i = 0; + let i = 0; + let target; do { - var target = e.path[i++]; + target = e.path[i++]; if (target.classList && target.classList.contains('dropdown-item') && !target.disabled) { target.focus(); @@ -284,11 +287,11 @@ Polymer({ getNextOption_: function(step) { // Using a counter to ensure no infinite loop occurs if all elements are // hidden/disabled. - var counter = 0; - var nextOption = null; - var options = this.querySelectorAll('.dropdown-item'); - var numOptions = options.length; - var focusedIndex = + let counter = 0; + let nextOption = null; + const options = this.querySelectorAll('.dropdown-item'); + const numOptions = options.length; + let focusedIndex = Array.prototype.indexOf.call(options, getDeepActiveElement()); // Handle case where nothing is focused and up is pressed. @@ -331,7 +334,7 @@ Polymer({ // accurate for where the menu should be shown. this.anchorElement_.scrollIntoViewIfNeeded(); - var rect = this.anchorElement_.getBoundingClientRect(); + const rect = this.anchorElement_.getBoundingClientRect(); this.showAtPosition(/** @type {ShowAtPositionConfig} */ (Object.assign( { top: rect.top, @@ -373,9 +376,9 @@ Polymer({ */ showAtPosition: function(config) { // Save the scroll position of the viewport. - var doc = document.scrollingElement; - var scrollLeft = doc.scrollLeft; - var scrollTop = doc.scrollTop; + const doc = document.scrollingElement; + const scrollLeft = doc.scrollLeft; + const scrollTop = doc.scrollTop; // Reset position so that layout isn't affected by the previous position, // and so that the dialog is positioned at the top-start corner of the @@ -417,31 +420,31 @@ Polymer({ */ positionDialog_: function(config) { this.lastConfig_ = config; - var c = Object.assign(getDefaultShowConfig(), config); + const c = Object.assign(getDefaultShowConfig(), config); - var top = c.top; - var left = c.left; - var bottom = top + c.height; - var right = left + c.width; + const top = c.top; + const left = c.left; + const bottom = top + c.height; + const right = left + c.width; // Flip the X anchor in RTL. - var rtl = getComputedStyle(this).direction == 'rtl'; + const rtl = getComputedStyle(this).direction == 'rtl'; if (rtl) c.anchorAlignmentX *= -1; const offsetWidth = this.$.dialog.offsetWidth; - var menuLeft = getStartPointWithAnchor( + const menuLeft = getStartPointWithAnchor( left, right, offsetWidth, c.anchorAlignmentX, c.minX, c.maxX); if (rtl) { - var menuRight = + const menuRight = document.scrollingElement.clientWidth - menuLeft - offsetWidth; this.$.dialog.style.right = menuRight + 'px'; } else { this.$.dialog.style.left = menuLeft + 'px'; } - var menuTop = getStartPointWithAnchor( + const menuTop = getStartPointWithAnchor( top, bottom, this.$.dialog.offsetHeight, c.anchorAlignmentY, c.minY, c.maxY); this.$.dialog.style.top = menuTop + 'px'; diff --git a/chromium/ui/webui/resources/cr_elements/cr_container_shadow_behavior.js b/chromium/ui/webui/resources/cr_elements/cr_container_shadow_behavior.js index 3eb059ebfcf..1c6789f9956 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_container_shadow_behavior.js +++ b/chromium/ui/webui/resources/cr_elements/cr_container_shadow_behavior.js @@ -19,24 +19,24 @@ */ /** @polymerBehavior */ -var CrContainerShadowBehavior = { +const CrContainerShadowBehavior = { /** @private {?IntersectionObserver} */ intersectionObserver_: null, /** @override */ attached: function() { // The element holding the drop shadow effect to be shown. - var dropShadow = document.createElement('div'); + const dropShadow = document.createElement('div'); // This ID should match the CSS rules in shared_styles_css.html. dropShadow.id = 'cr-container-shadow'; this.$.container.parentNode.insertBefore(dropShadow, this.$.container); // Dummy element used to detect scrolling. Has a 0px height intentionally. - var intersectionProbe = document.createElement('div'); + const intersectionProbe = document.createElement('div'); this.$.container.prepend(intersectionProbe); // Setup drop shadow logic. - var callback = entries => { + const callback = entries => { dropShadow.classList.toggle( 'has-shadow', entries[entries.length - 1].intersectionRatio == 0); }; diff --git a/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js b/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js index ebf0ad52afa..9d71e19854f 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js +++ b/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js @@ -74,6 +74,11 @@ Polymer({ type: Boolean, value: false, }, + + showOnAttach: { + type: Boolean, + value: false, + }, }, listeners: { @@ -104,7 +109,7 @@ Polymer({ /** @override */ attached: function() { - var mutationObserverCallback = function() { + const mutationObserverCallback = function() { if (this.$.dialog.open) { this.addIntersectionObserver_(); this.addKeydownListener_(); @@ -123,6 +128,8 @@ Polymer({ // In some cases dialog already has the 'open' attribute by this point. mutationObserverCallback(); + if (this.showOnAttach) + this.showModal(); }, /** @override */ @@ -140,19 +147,19 @@ Polymer({ if (this.intersectionObserver_) return; - var bodyContainer = this.$$('.body-container'); + const bodyContainer = this.$$('.body-container'); - var bottomMarker = this.$.bodyBottomMarker; - var topMarker = this.$.bodyTopMarker; + const bottomMarker = this.$.bodyBottomMarker; + const topMarker = this.$.bodyTopMarker; - var callback = function(entries) { + const callback = function(entries) { // In some rare cases, there could be more than one entry per observed // element, in which case the last entry's result stands. - for (var i = 0; i < entries.length; i++) { - var target = entries[i].target; + for (let i = 0; i < entries.length; i++) { + const target = entries[i].target; assert(target == bottomMarker || target == topMarker); - var classToToggle = + const classToToggle = target == bottomMarker ? 'bottom-scrollable' : 'top-scrollable'; bodyContainer.classList.toggle( @@ -302,7 +309,7 @@ Polymer({ if (e.target != this && e.target.tagName != 'CR-INPUT') return; - var actionButton = + const actionButton = this.querySelector('.action-button:not([disabled]):not([hidden])'); if (actionButton) { actionButton.click(); diff --git a/chromium/ui/webui/resources/cr_elements/cr_drawer/BUILD.gn b/chromium/ui/webui/resources/cr_elements/cr_drawer/BUILD.gn index 5ca559e9de2..f085891431b 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_drawer/BUILD.gn +++ b/chromium/ui/webui/resources/cr_elements/cr_drawer/BUILD.gn @@ -11,4 +11,8 @@ js_type_check("closure_compile") { } js_library("cr_drawer") { + deps = [ + "//ui/webui/resources/js:assert", + "//ui/webui/resources/js:util", + ] } diff --git a/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html b/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html index a904f7fbff9..eae9c1c22ff 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html +++ b/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html @@ -1,5 +1,7 @@ <link rel="import" href="../../html/polymer.html"> +<link rel="import" href="../../html/assert.html"> +<link rel="import" href="../../html/util.html"> <link rel="import" href="../shared_vars_css.html"> <dom-module id="cr-drawer"> @@ -27,7 +29,7 @@ word-break: break-word; } - :host(.opening) dialog { + :host([show_]) dialog { left: 0; } @@ -37,7 +39,7 @@ transition: right var(--transition-timing); } - :host(.opening[align=rtl]) dialog { + :host([show_][align=rtl]) dialog { right: 0; } @@ -52,7 +54,7 @@ transition: opacity var(--transition-timing); } - :host(.opening) dialog::backdrop { + :host([show_]) dialog::backdrop { opacity: 1; } @@ -72,7 +74,7 @@ } </style> <dialog id="dialog" on-cancel="onDialogCancel_" on-tap="onDialogTap_" - on-transitionend="onDialogTransitionEnd_" on-close="onDialogClose_"> + on-close="onDialogClose_"> <div id="container" on-tap="onContainerTap_"> <div class="drawer-header" tabindex="-1">[[heading]]</div> <slot></slot> diff --git a/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.js b/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.js index 6e5227b3179..5ba1e551929 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.js +++ b/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.js @@ -8,10 +8,10 @@ Polymer({ properties: { heading: String, - open: { + /** @private */ + show_: { type: Boolean, - // Enables 'open-changed' events. - notify: true, + reflectToAttribute: true, }, /** The alignment of the drawer on the screen ('ltr' or 'rtl'). */ @@ -22,29 +22,61 @@ Polymer({ }, }, + /** @type {boolean} */ + get open() { + return this.$.dialog.open; + }, + + set open(value) { + assertNotReached('Cannot set |open|.'); + }, + /** Toggles the drawer open and close. */ toggle: function() { - if (this.$.dialog.open) - this.closeDrawer(); + if (this.open) + this.cancel(); else this.openDrawer(); }, /** Shows drawer and slides it into view. */ openDrawer: function() { - if (!this.$.dialog.open) { - this.$.dialog.showModal(); - this.open = true; - this.classList.add('opening'); - } + if (this.open) + return; + this.$.dialog.showModal(); + this.show_ = true; + this.fire('cr-drawer-opening'); + listenOnce(this.$.dialog, 'transitionend', () => { + this.fire('cr-drawer-opened'); + }); + }, + + /** + * Slides the drawer away, then closes it after the transition has ended. It + * is up to the owner of this component to differentiate between close and + * cancel. + * @param {boolean} cancel + */ + dismiss_: function(cancel) { + if (!this.open) + return; + this.show_ = false; + listenOnce(this.$.dialog, 'transitionend', () => { + this.$.dialog.close(cancel ? 'canceled' : 'closed'); + }); }, - /** Slides the drawer away, then closes it after the transition has ended. */ - closeDrawer: function() { - if (this.$.dialog.open) { - this.classList.remove('opening'); - this.classList.add('closing'); - } + cancel: function() { + this.dismiss_(true); + }, + + close: function() { + this.dismiss_(false); + }, + + /** @return {boolean} */ + wasCanceled: function() { + return !this.open && this.$.dialog.returnValue == 'canceled'; }, /** @@ -62,7 +94,7 @@ Polymer({ * @private */ onDialogTap_: function() { - this.closeDrawer(); + this.cancel(); }, /** @@ -72,7 +104,7 @@ Polymer({ */ onDialogCancel_: function(event) { event.preventDefault(); - this.closeDrawer(); + this.cancel(); }, /** @@ -88,18 +120,4 @@ Polymer({ // DOM v1. this.fire('close'); }, - - /** - * Closes the dialog when the closing animation is over. - * @private - */ - onDialogTransitionEnd_: function() { - if (this.classList.contains('closing')) { - this.classList.remove('closing'); - this.$.dialog.close(); - this.open = false; - } else if (this.classList.contains('opening')) { - this.fire('cr-drawer-opened'); - } - }, }); diff --git a/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html b/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html index 37a0ca53b6c..bee36844e23 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html +++ b/chromium/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html @@ -25,8 +25,8 @@ flex: 1; } </style> - <div id="outer" actionable> - <div id="label"><slot></slot></div> + <div id="outer"> + <div id="label" actionable><slot></slot></div> <paper-icon-button-light class$="[[iconName_(expanded)]]"> <button disabled="[[disabled]]" aria-label$="[[alt]]" aria-pressed$="[[getAriaPressed_(expanded)]]" diff --git a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html index b328ee4b72e..f66e06127a2 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html +++ b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html @@ -40,7 +40,7 @@ /* Margin between <input> and <paper-button> in the 'suffix' slot */ :host ::slotted(paper-button[slot=suffix]) { - margin-inline-start: var(--cr-button-edge-spacing); + margin-inline-start: var(--cr-button-edge-spacing) !important; } :host([invalid]) #label { diff --git a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js index 67b9484a99b..a14a8ba95e1 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js +++ b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js @@ -284,8 +284,14 @@ Polymer({ this.focus(); }, - /** @private */ - onValueChanged_: function() { + /** + * @param {string} newValue + * @param {string} oldValue + * @private + */ + onValueChanged_: function(newValue, oldValue) { + if (!newValue && !oldValue) + return; if (this.autoValidate) this.validate(); }, diff --git a/chromium/ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.js b/chromium/ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.js index 19b3d920a5b..43db9123f86 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.js +++ b/chromium/ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.js @@ -50,10 +50,10 @@ Polymer({ /** @private */ render_: function() { - var template = this.getContentChildren()[0]; + const template = this.getContentChildren()[0]; if (!this.ctor) this.templatize(template); - var parentNode = this.parentNode; + const parentNode = this.parentNode; if (parentNode && !this.child_) { this.instance_ = this.stamp({}); this.child_ = this.instance_.root.firstElementChild; diff --git a/chromium/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.js b/chromium/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.js index 4267639b0b9..2ccbc9ad1a3 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.js +++ b/chromium/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.js @@ -62,7 +62,7 @@ Polymer({ _createRipple: function() { this._rippleContainer = this.$.icon; - var ripple = Polymer.PaperRippleBehavior._createRipple(); + const ripple = Polymer.PaperRippleBehavior._createRipple(); ripple.id = 'ink'; ripple.setAttribute('recenters', ''); ripple.classList.add('circle'); diff --git a/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.js b/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.js index b0c4fdfd483..444e458585f 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.js +++ b/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.js @@ -26,7 +26,7 @@ Polymer({ * @private */ onKeyDown_: function(e) { - var items = this.querySelectorAll('.avatar'); + const items = this.querySelectorAll('.avatar'); switch (e.key) { case 'ArrowDown': case 'ArrowUp': @@ -54,24 +54,24 @@ Polymer({ * @private */ moveFocusRow_: function(items, direction) { - var offset = + let offset = (direction == 'ArrowDown' || direction == 'ArrowRight') ? 1 : -1; - var style = getComputedStyle(this); - var avatarSpacing = + const style = getComputedStyle(this); + const avatarSpacing = parseInt(style.getPropertyValue('--avatar-spacing'), 10); - var avatarSize = parseInt(style.getPropertyValue('--avatar-size'), 10); - var rowSize = Math.floor(this.clientWidth / (avatarSpacing + avatarSize)); - var rows = Math.ceil(items.length / rowSize); - var gridSize = rows * rowSize; + const avatarSize = parseInt(style.getPropertyValue('--avatar-size'), 10); + const rowSize = Math.floor(this.clientWidth / (avatarSpacing + avatarSize)); + const rows = Math.ceil(items.length / rowSize); + const gridSize = rows * rowSize; - var focusIndex = + const focusIndex = Array.prototype.slice.call(items).findIndex(function(item) { return Polymer.dom(item).getOwnerRoot().activeElement == item; }); - var nextItem = null; + let nextItem = null; if (direction == 'ArrowDown' || direction == 'ArrowUp') { - for (var i = offset; Math.abs(i) <= rows; i += offset) { + for (let i = offset; Math.abs(i) <= rows; i += offset) { nextItem = items[(focusIndex + i * rowSize + gridSize) % gridSize]; if (nextItem) break; @@ -82,7 +82,7 @@ Polymer({ } else { if (style.direction == 'rtl') offset *= -1; - var nextIndex = (focusIndex + offset) % items.length; + let nextIndex = (focusIndex + offset) % items.length; if (nextIndex < 0) nextIndex = items.length - 1; nextItem = items[nextIndex]; diff --git a/chromium/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.js b/chromium/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.js index 864e016a96f..c08463e25ae 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.js +++ b/chromium/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.js @@ -7,7 +7,7 @@ */ /** @polymerBehavior */ -var CrRadioButtonBehaviorImpl = { +const CrRadioButtonBehaviorImpl = { properties: { checked: { type: Boolean, @@ -20,6 +20,7 @@ var CrRadioButtonBehaviorImpl = { type: Boolean, value: false, reflectToAttribute: true, + notify: true, observer: 'disabledChanged_', }, @@ -27,21 +28,24 @@ var CrRadioButtonBehaviorImpl = { type: String, value: '', // Allows the hidden$= binding to run without being set. }, + + name: { + type: String, + notify: true, + reflectToAttribute: true, + }, }, listeners: { - 'blur': 'cancelRipple_', - 'click': 'onClick_', - 'focus': 'onFocus_', - 'keyup': 'onKeyUp_', - 'pointerup': 'cancelRipple_', + blur: 'cancelRipple_', + focus: 'onFocus_', + pointerup: 'cancelRipple_', }, hostAttributes: { 'aria-disabled': 'false', 'aria-checked': 'false', role: 'radio', - tabindex: 0, }, /** @private */ @@ -58,7 +62,6 @@ var CrRadioButtonBehaviorImpl = { if (previous === undefined && !this.disabled) return; - this.setAttribute('tabindex', this.disabled ? -1 : 0); this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false'); }, @@ -68,30 +71,6 @@ var CrRadioButtonBehaviorImpl = { this.$$('paper-ripple').holdDown = true; }, - /** - * @param {!Event} e - * @private - */ - onClick_: function(e) { - // If this element is disabled, or event fired on a link, don't propagate - // to the parent paper-radio-group to avoid incorrect selection. - if (this.disabled || e.target.tagName == 'A') - e.stopPropagation(); - }, - - /** - * @param {!Event} e - * @private - */ - onKeyUp_: function(e) { - if (e.key != ' ' && e.key != 'Enter') - return; - - // Simulating click on the key-up target, and let onClick decide if it - // should be propagated to the parent paper-radio-group. - e.target.click(); - }, - /** @private */ cancelRipple_: function() { this.ensureRipple(); diff --git a/chromium/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html b/chromium/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html index 3da38f4789c..4ff9b856567 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html +++ b/chromium/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html @@ -10,6 +10,7 @@ :host { --cr-radio-button-ink-size: 40px; --cr-radio-button-size: 16px; + --cr-radio-button-unchecked-color: var(--google-grey-refresh-700); --cr-radio-button-checked-color: var(--google-blue-600); --ink-to-circle: calc((var(--cr-radio-button-ink-size) - @@ -65,7 +66,7 @@ } .disc-border { - border: 2px solid var(--google-grey-refresh-700); + border: 2px solid var(--cr-radio-button-unchecked-color); } :host([checked]) .disc-border { diff --git a/chromium/ui/webui/resources/cr_elements/cr_radio_group/BUILD.gn b/chromium/ui/webui/resources/cr_elements/cr_radio_group/BUILD.gn new file mode 100644 index 00000000000..9d50b536d20 --- /dev/null +++ b/chromium/ui/webui/resources/cr_elements/cr_radio_group/BUILD.gn @@ -0,0 +1,18 @@ +# Copyright 2018 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. + +import("//third_party/closure_compiler/compile_js.gni") + +js_type_check("closure_compile") { + deps = [ + ":cr_radio_group", + ] +} + +js_library("cr_radio_group") { + deps = [ + "//ui/webui/resources/js:event_tracker", + ] + externs_list = [ "$externs_path/pending.js" ] +} diff --git a/chromium/ui/webui/resources/cr_elements/cr_radio_group/cr_radio_group.html b/chromium/ui/webui/resources/cr_elements/cr_radio_group/cr_radio_group.html new file mode 100644 index 00000000000..28215247498 --- /dev/null +++ b/chromium/ui/webui/resources/cr_elements/cr_radio_group/cr_radio_group.html @@ -0,0 +1,30 @@ +<link rel="import" href="../../html/polymer.html"> + +<link rel="import" href="../../html/event_tracker.html"> +<link rel="import" href="../shared_vars_css.html"> + +<dom-module id="cr-radio-group"> + <template> + <style> + :host { + display: inline-block; + } + + :host ::slotted(*) { + padding: var(--cr-radio-group-item-padding, 12px); + } + + :host([disabled]) { + cursor: initial; + pointer-events: none; + user-select: none; + } + + :host([disabled]) ::slotted(*) { + opacity: var(--cr-disabled-opacity); + } + </style> + <slot></slot> + </template> + <script src="cr_radio_group.js"></script> +</dom-module> diff --git a/chromium/ui/webui/resources/cr_elements/cr_radio_group/cr_radio_group.js b/chromium/ui/webui/resources/cr_elements/cr_radio_group/cr_radio_group.js new file mode 100644 index 00000000000..328f071d894 --- /dev/null +++ b/chromium/ui/webui/resources/cr_elements/cr_radio_group/cr_radio_group.js @@ -0,0 +1,250 @@ +// Copyright 2018 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. + +(() => { + + /** + * @param {!Element} radio + * @return {boolean} + */ + function isEnabled(radio) { + return radio.matches(':not([disabled]):not([hidden])') && + radio.style.display != 'none' && radio.style.visibility != 'hidden'; + } + + Polymer({ + is: 'cr-radio-group', + + properties: { + disabled: { + type: Boolean, + value: false, + reflectToAttribute: true, + }, + + selected: { + type: String, + notify: true, + }, + + selectable: { + type: String, + value: 'cr-radio-button, controlled-radio-button', + }, + + /** + * @type {!RegExp} + * @private + */ + selectableRegExp_: { + value: Object, + computed: 'computeSelectableRegExp_(selectable)', + }, + }, + + listeners: { + keydown: 'onKeyDown_', + click: 'onClick_', + }, + + observers: [ + 'update_(disabled, selected)', + ], + + hostAttributes: { + role: 'radiogroup', + }, + + /** @private {Array<!Element>} */ + buttons_: null, + + /** @private {EventTracker} */ + buttonEventTracker_: null, + + /** @private {Map<string, number>} */ + deltaKeyMap_: null, + + /** @private {boolean} */ + isRtl_: false, + + /** @private {PolymerDomApi.ObserveHandle} */ + observer_: null, + + /** @private {Function} */ + populateBound_: null, + + /** @override */ + attached: function() { + this.isRtl_ = this.matches(':host-context([dir=rtl]) cr-slider'); + this.deltaKeyMap_ = new Map([ + ['ArrowDown', 1], + ['ArrowLeft', this.isRtl_ ? 1 : -1], + ['ArrowRight', this.isRtl_ ? -1 : 1], + ['ArrowUp', -1], + ['PageDown', 1], + ['PageUp', -1], + ]); + this.buttonEventTracker_ = new EventTracker(); + + this.populateBound_ = () => this.populate_(); + // Needed for when the radio buttons change when using dom-repeat or + // dom-if. + // TODO(crbug.com/738611): After migration to Polymer 2, remove Polymer 1 + // references. + if (Polymer.DomIf) + this.$$('slot').addEventListener('slotchange', this.populateBound_); + else + this.observer_ = Polymer.dom(this).observeNodes(this.populateBound_); + + this.populate_(); + }, + + /** @override */ + detached: function() { + if (Polymer.DomIf) + this.$$('slot').removeEventListener('slotchange', this.populateBound_); + else if (this.observer_) { + Polymer.dom(this).unobserveNodes( + /** @type {!PolymerDomApi.ObserveHandle} */ (this.observer_)); + } + this.buttonEventTracker_.removeAll(); + }, + + /** @override */ + focus: function() { + if (this.disabled || !this.buttons_) + return; + + const radio = + this.buttons_.find(radio => radio.getAttribute('tabindex') == '0'); + if (radio) + radio.focus(); + }, + + /** + * @param {!KeyboardEvent} event + * @private + */ + onKeyDown_: function(event) { + if (this.disabled) + return; + + if (event.ctrlKey || event.shiftKey || event.metaKey || event.altKey) + return; + + const targetElement = /** @type {!Element} */ (event.target); + if (!this.buttons_.includes(targetElement)) + return; + + if (event.key == ' ' || event.key == 'Enter') { + event.preventDefault(); + this.select_(/** @type {!Element} */ (event.target)); + return; + } + + const enabledRadios = this.buttons_.filter(isEnabled); + if (enabledRadios.length == 0) + return; + + let selectedIndex; + const max = enabledRadios.length - 1; + if (event.key == 'Home') { + selectedIndex = 0; + } else if (event.key == 'End') { + selectedIndex = max; + } else if (this.deltaKeyMap_.has(event.key)) { + const delta = this.deltaKeyMap_.get(event.key); + // If nothing selected, start from the first radio then add |delta|. + const lastSelection = enabledRadios.findIndex(radio => radio.checked); + selectedIndex = Math.max(0, lastSelection) + delta; + selectedIndex = Math.min(max, Math.max(0, selectedIndex)); + } else { + return; + } + + const radio = enabledRadios[selectedIndex]; + const name = `${radio.name}`; + if (this.selected != name) { + event.preventDefault(); + this.selected = name; + radio.focus(); + } + }, + + /** + * @return {!RegExp} + * @private + */ + computeSelectableRegExp_: function() { + const tags = this.selectable.split(', ').join('|'); + return new RegExp(`^(${tags})$`, 'i'); + }, + + /** + * @param {!Event} event + * @private + */ + onClick_: function(event) { + const path = event.composedPath(); + if (path.some(target => /^a$/i.test(target.tagName))) + return; + const target = /** @type {!Element} */ ( + path.find(n => this.selectableRegExp_.test(n.tagName))); + if (target && this.buttons_.includes(target)) + this.select_(/** @type {!Element} */ (target)); + }, + + /** @private */ + populate_: function() { + // TODO(crbug.com/738611): After migration to Polymer 2, remove + // Polymer 1 references. + this.buttons_ = Polymer.DomIf ? + this.$$('slot') + .assignedNodes({flatten: true}) + .filter(n => this.selectableRegExp_.test(n.tagName)) : + this.queryAllEffectiveChildren(this.selectable); + this.buttonEventTracker_.removeAll(); + this.buttons_.forEach(el => { + this.buttonEventTracker_.add( + el, 'disabled-changed', () => this.populate_()); + this.buttonEventTracker_.add( + el, 'name-changed', () => this.populate_()); + }); + this.update_(); + }, + + /** + * @param {!Element} button + * @private + */ + select_: function(button) { + if (!isEnabled(button)) + return; + + const name = `${button.name}`; + if (this.selected != name) + this.selected = name; + }, + + /** @private */ + update_: function() { + if (!this.buttons_) + return; + let noneMadeFocusable = true; + this.buttons_.forEach(radio => { + radio.checked = this.selected != undefined && + radio.name == this.selected; + const canBeFocused = + radio.checked && !this.disabled && isEnabled(radio); + noneMadeFocusable &= !canBeFocused; + radio.setAttribute('tabindex', canBeFocused ? '0' : '-1'); + }); + if (noneMadeFocusable && !this.disabled) { + const focusable = this.buttons_.find(isEnabled); + if (focusable) + focusable.setAttribute('tabindex', '0'); + } + }, + }); +})(); diff --git a/chromium/ui/webui/resources/cr_elements/cr_scrollable_behavior.js b/chromium/ui/webui/resources/cr_elements/cr_scrollable_behavior.js index 9535c1a9b40..b27a0f80b54 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_scrollable_behavior.js +++ b/chromium/ui/webui/resources/cr_elements/cr_scrollable_behavior.js @@ -35,20 +35,30 @@ */ /** @polymerBehavior */ -var CrScrollableBehavior = { +const CrScrollableBehavior = { /** @private {number|null} */ intervalId_: null, ready: function() { - this.requestUpdateScroll(); + const readyAsync = () => { + this.requestUpdateScroll(); + + // Listen to the 'scroll' event for each scrollable container. + const scrollableElements = this.root.querySelectorAll('[scrollable]'); + for (let i = 0; i < scrollableElements.length; i++) { + scrollableElements[i].addEventListener( + 'scroll', this.updateScrollEvent_.bind(this)); + } + }; - // Listen to the 'scroll' event for each scrollable container. - var scrollableElements = this.root.querySelectorAll('[scrollable]'); - for (var i = 0; i < scrollableElements.length; i++) { - scrollableElements[i].addEventListener( - 'scroll', this.updateScrollEvent_.bind(this)); + // TODO(dpapad): Remove Polymer 1 codepath when Polymer 2 migration has + // completed. + if (Polymer.DomIf) { + Polymer.RenderStatus.beforeNextRender(this, readyAsync); + return; } + readyAsync(); }, detached: function() { @@ -67,20 +77,20 @@ var CrScrollableBehavior = { this.requestUpdateScroll(); - var nodeList = this.root.querySelectorAll('[scrollable] iron-list'); + let nodeList = this.root.querySelectorAll('[scrollable] iron-list'); if (!nodeList.length) return; // Use setInterval to avoid initial render / sizing issues. this.intervalId_ = window.setInterval(function() { - var unreadyNodes = []; - for (var i = 0; i < nodeList.length; i++) { - var node = nodeList[i]; + const unreadyNodes = []; + for (let i = 0; i < nodeList.length; i++) { + const node = nodeList[i]; if (node.parentNode.scrollHeight == 0) { unreadyNodes.push(node); continue; } - var ironList = /** @type {!IronListElement} */ (node); + const ironList = /** @type {!IronListElement} */ (node); ironList.notifyResize(); } if (unreadyNodes.length == 0) { @@ -99,8 +109,8 @@ var CrScrollableBehavior = { */ requestUpdateScroll: function() { requestAnimationFrame(function() { - var scrollableElements = this.root.querySelectorAll('[scrollable]'); - for (var i = 0; i < scrollableElements.length; i++) + const scrollableElements = this.root.querySelectorAll('[scrollable]'); + for (let i = 0; i < scrollableElements.length; i++) this.updateScroll_(/** @type {!HTMLElement} */ (scrollableElements[i])); }.bind(this)); }, @@ -117,7 +127,7 @@ var CrScrollableBehavior = { /** @param {!IronListElement} list */ restoreScroll: function(list) { this.async(function() { - var scrollTop = list.savedScrollTops.shift(); + const scrollTop = list.savedScrollTops.shift(); // Ignore scrollTop of 0 in case it was intermittent (we do not need to // explicitly scroll to 0). if (scrollTop != 0) @@ -131,7 +141,7 @@ var CrScrollableBehavior = { * @private */ updateScrollEvent_: function(event) { - var scrollable = /** @type {!HTMLElement} */ (event.target); + const scrollable = /** @type {!HTMLElement} */ (event.target); this.updateScroll_(scrollable); }, diff --git a/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.js b/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.js index 179a09753c2..929058b4344 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.js +++ b/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.js @@ -7,7 +7,7 @@ * <settings-subpage-search> for a simple implementation. * @polymerBehavior */ -var CrSearchFieldBehavior = { +const CrSearchFieldBehavior = { properties: { label: { type: String, @@ -55,7 +55,7 @@ var CrSearchFieldBehavior = { * firing for this change. */ setValue: function(value, opt_noEvent) { - var searchInput = this.getSearchInput(); + const searchInput = this.getSearchInput(); searchInput.value = value; this.onSearchTermInput(); @@ -73,8 +73,8 @@ var CrSearchFieldBehavior = { // 300ms if the value length is 3 // 200ms if the value length is 4 or greater. // The logic here was copied from WebKit's native 'search' event. - var length = this.getValue().length; - var timeoutMs = length > 0 ? (500 - 100 * (Math.min(length, 4) - 1)) : 0; + const length = this.getValue().length; + const timeoutMs = length > 0 ? (500 - 100 * (Math.min(length, 4) - 1)) : 0; this.searchDelayTimer_ = setTimeout(() => { this.getSearchInput().dispatchEvent( new CustomEvent('search', {composed: true, detail: this.getValue()})); diff --git a/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.html b/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.html index f6203a2f110..7f6bcd2d7bd 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.html +++ b/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.html @@ -11,6 +11,7 @@ <template> <style include="cr-hidden-style"> :host { + --cr-slider-bar-height: 2px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: default; user-select: none; @@ -25,27 +26,37 @@ position: relative; } + #barContainer, + #bar { + /* Using border instead of background-color to address pixel rounding + at low zoom levels (e.g. 33%). The browser will round border widths + to a minimum of 1px.*/ + border-top-style: solid; + border-top-width: 2px; + } + #barContainer { - background-color: var(--google-blue-600-opacity-24); - border-radius: 1px; - height: 2px; + border-top-color: var(--google-blue-600-opacity-24); + height: var(--cr-slider-bar-height); margin: 0 16px; position: absolute; top: 15px; width: calc(100% - 32px); } + #barContainer div { + top: calc(-1 * var(--cr-slider-bar-height)); + } + #bar { - background-color: var(--google-blue-600); - border-radius: 1px; - height: 2px; + border-top-color: var(--cr-slider-active-color, var(--google-blue-600)); left: 0; position: absolute; transition: width 80ms ease; width: 0; } - :host-context([dir=rtl]) #bar { + :host([is-rtl_]) #bar { left: initial; right: 0; } @@ -58,7 +69,7 @@ } #knob { - background-color: var(--google-blue-600); + background-color: var(--cr-slider-knob-color, var(--google-blue-600)); border: 0; border-radius: 50%; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); @@ -80,7 +91,7 @@ width: 32px; } - :host-context([dir=rtl]) paper-ripple { + :host([is-rtl_]) paper-ripple { left: auto; right: -11px; } @@ -90,7 +101,6 @@ pointer-events: none; position: absolute; right: 0; - top: 0; @apply --layout-horizontal; } @@ -148,28 +158,28 @@ white-space: nowrap; } - :host([disabled]) { + :host([disabled_]) { pointer-events: none; } - :host([disabled]) #barContainer { - background-color: var(--google-grey-600-opacity-24); + :host([disabled_]) #barContainer { + border-top-color: var(--google-grey-600-opacity-24); } - :host([disabled]) #bar { - background-color: var(--google-grey-600); + :host([disabled_]) #bar { + border-top-color: var(--google-grey-600); } - :host([disabled]) inactive-marker::after, - :host([disabled]) #markers::after { - background-color: rgba(255, 255, 255, 0.54); + :host([disabled_]) .inactive-marker::after, + :host([disabled_]) #markers::after { + background-color: rgba(128, 134, 139, 0.54); } - :host([disabled]) #knobContainer { - margin-inline-start: 9px; + :host([disabled_]) #knobContainer { + margin-inline-start: 10px; top: 9px; } - :host([disabled]) #knob { + :host([disabled_]) #knob { background-color: var(--google-grey-600); border: 2px solid white; box-shadow: unset; diff --git a/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.js b/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.js index 97033f5ade8..c2671d9b700 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.js +++ b/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.js @@ -45,12 +45,24 @@ cr_slider.SliderTick; disabled: { type: Boolean, value: false, + }, + + /** + * Internal representation of disabled depending on |disabled| and + * |ticks|. + * @private + */ + disabled_: { + type: Boolean, + computed: 'computeDisabled_(disabled, ticks.*)', reflectToAttribute: true, + observer: 'onDisabledChanged_', }, dragging: { type: Boolean, value: false, + notify: true, reflectToAttribute: true, }, @@ -69,6 +81,16 @@ cr_slider.SliderTick; value: 0, }, + /** + * When set to false, the keybindings are not handled by this component, + * for example when the owner of the component wants to set up its own + * keybindings. + */ + noKeybindings: { + type: Boolean, + value: false, + }, + snaps: { type: Boolean, value: false, @@ -82,7 +104,6 @@ cr_slider.SliderTick; ticks: { type: Array, value: () => [], - observer: 'onTicksChanged_', }, value: { @@ -125,6 +146,13 @@ cr_slider.SliderTick; type: String, value: '', }, + + /** @private */ + isRtl_: { + type: Boolean, + value: false, + reflectToAttribute: true, + }, }, hostAttributes: { @@ -132,6 +160,7 @@ cr_slider.SliderTick; }, observers: [ + 'onTicksChanged_(ticks.*)', 'updateLabelAndAria_(immediateValue_, min, max)', 'updateKnobAndBar_(immediateValue_, min, max)', ], @@ -146,15 +175,13 @@ cr_slider.SliderTick; /** @private {Map<string, number>} */ deltaKeyMap_: null, - /** @private {boolean} */ - isRtl_: false, /** @private {EventTracker} */ draggingEventTracker_: null, /** @override */ attached: function() { - this.isRtl_ = this.matches(':host-context([dir=rtl]) cr-slider'); + this.isRtl_ = window.getComputedStyle(this)['direction'] === 'rtl'; this.deltaKeyMap_ = new Map([ ['ArrowDown', -1], ['ArrowUp', 1], @@ -166,6 +193,11 @@ cr_slider.SliderTick; this.draggingEventTracker_ = new EventTracker(); }, + /** @private */ + computeDisabled_: function() { + return this.disabled || this.ticks.length == 1; + }, + /** * When markers are displayed on the slider, they are evenly spaced across * the entire slider bar container and are rendered on top of the bar and @@ -218,15 +250,17 @@ cr_slider.SliderTick; * @private */ stopDragging_: function(pointerId) { - this.dragging = false; - this.draggingEventTracker_.removeAll(); + // Update |value| before updating |dragging| so dragging-changed event + // handlers will have access to the updated |value|. this.value = this.immediateValue_; + this.draggingEventTracker_.removeAll(); + this.releasePointerCapture(pointerId); + this.dragging = false; // If there is a ripple animation in progress, setTimeout will hold off // on updating |holdDown_|. setTimeout(() => { this.holdDown_ = false; }); - this.releasePointerCapture(pointerId); }, /** @private */ @@ -235,6 +269,12 @@ cr_slider.SliderTick; }, /** @private */ + onDisabledChanged_: function() { + this.$.knob.setAttribute('tabindex', this.disabled_ ? '-1' : '0'); + this.blur(); + }, + + /** @private */ onFocus_: function() { this.holdDown_ = true; }, @@ -249,25 +289,28 @@ cr_slider.SliderTick; * @private */ onKeyDown_: function(event) { - if (this.disabled) + if (this.disabled_ || this.noKeybindings) return; if (event.metaKey || event.shiftKey || event.altKey || event.ctrlKey) return; let handled = true; - if (event.key == 'Home') - this.value = this.min; - else if (event.key == 'End') - this.value = this.max; - else if (this.deltaKeyMap_.has(event.key)) { + if (event.key == 'Home') { + this.immediateValue_ = this.min; + } else if (event.key == 'End') { + this.immediateValue_ = this.max; + } else if (this.deltaKeyMap_.has(event.key)) { const newValue = this.value + this.deltaKeyMap_.get(event.key); - this.value = clamp(this.min, this.max, newValue); - } else + this.immediateValue_ = clamp(this.min, this.max, newValue); + } else { handled = false; + } if (handled) { + this.value = this.immediateValue_; event.preventDefault(); + event.stopPropagation(); setTimeout(() => { this.holdDown_ = true; }); @@ -281,17 +324,17 @@ cr_slider.SliderTick; * @private */ onPointerDown_: function(event) { - if (this.disabled || event.buttons != 1 && event.pointerType == 'mouse') + if (this.disabled_ || event.buttons != 1 && event.pointerType == 'mouse') return; this.dragging = true; + this.updateValueFromClientX_(event.clientX); // If there is a ripple animation in progress, setTimeout will hold off on // updating |holdDown_|. setTimeout(() => { this.$.knob.focus(); this.holdDown_ = true; }); - this.updateValueFromClientX_(event.clientX); this.setPointerCapture(event.pointerId); const stopDragging = this.stopDragging_.bind(this, event.pointerId); @@ -318,12 +361,8 @@ cr_slider.SliderTick; /** @private */ onTicksChanged_: function() { if (this.ticks.length == 0) { - this.disabled = false; this.snaps = false; - } else if (this.ticks.length == 1) { - this.disabled = true; - } else { - this.disabled = false; + } else if (this.ticks.length > 1) { this.snaps = true; this.max = this.ticks.length - 1; this.min = 0; diff --git a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.html b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.html index 0f5bcbfe904..722567559d7 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.html +++ b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.html @@ -23,7 +23,6 @@ transform: translateY(100px); transition: opacity 300ms, transform 300ms, visibility 300ms; visibility: hidden; - white-space: nowrap; z-index: 1; } @@ -34,16 +33,16 @@ } :host ::slotted(paper-button) { - background-color: transparent; - border: none; - color: var(--google-blue-300); - margin-inline-start: 32px; - min-width: 52px; - padding: 8px; + background-color: transparent !important; + border: none !important; + color: var(--google-blue-300) !important; + margin-inline-start: 32px !important; + min-width: 52px !important; + padding: 8px !important; } :host ::slotted(paper-button:hover) { - background-color: transparent; + background-color: transparent !important; } </style> <slot></slot> diff --git a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js index 0f4f1a58275..7d8e04fc56a 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js +++ b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js @@ -94,7 +94,7 @@ Polymer({ * @private */ computeIsSpinnerShown_: function() { - var showSpinner = this.spinnerActive && this.showingSearch; + const showSpinner = this.spinnerActive && this.showingSearch; if (showSpinner) this.$.spinnerTemplate.if = true; return showSpinner; diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_indicator_behavior.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_indicator_behavior.js index 9a0f93e7644..7e4e460d6c9 100644 --- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_indicator_behavior.js +++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_indicator_behavior.js @@ -21,10 +21,11 @@ * controlledSettingOwner: (string|undefined), * }} */ +// eslint-disable-next-line no-var var CrPolicyStrings; /** @enum {string} */ -var CrPolicyIndicatorType = { +const CrPolicyIndicatorType = { DEVICE_POLICY: 'devicePolicy', EXTENSION: 'extension', NONE: 'none', @@ -35,7 +36,7 @@ var CrPolicyIndicatorType = { }; /** @polymerBehavior */ -var CrPolicyIndicatorBehavior = { +const CrPolicyIndicatorBehavior = { // Properties exposed to all policy indicators. properties: { /** diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior.js index c20b1ca4ec6..e1a2bad50fe 100644 --- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior.js +++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior.js @@ -7,7 +7,7 @@ */ /** @polymerBehavior */ -var CrPolicyNetworkBehavior = { +const CrPolicyNetworkBehavior = { /** * @param {!CrOnc.ManagedProperty|undefined} property * @return {boolean} True if the network property is controlled by a policy @@ -19,7 +19,7 @@ var CrPolicyNetworkBehavior = { if (typeof property != 'object' || !property.Effective) return false; // Enforced - var effective = property.Effective; + const effective = property.Effective; if (effective == 'UserPolicy' || effective == 'DevicePolicy') return true; // Recommended diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.html b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.html index 94247f53552..52a50e3c9fa 100644 --- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.html +++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.html @@ -7,9 +7,23 @@ <dom-module id="cr-policy-network-indicator"> <template> - <style include="cr-hidden-style"></style> + <style include="cr-hidden-style"> + /* This field is used for controlling margin of icon outside the indicator + * element (i.e. in the element which uses indicator itself). It's useful + * when we don't want to add margin to indicator if it's hidden and also + * don't want to move/duplicate logic about showing indicator and margin + * outside of indicator element. */ + :host { + --cr-tooltip-icon-margin-start: 0; + } + + cr-tooltip-icon { + margin-inline-start: var(--cr-tooltip-icon-margin-start); + } + </style> <cr-tooltip-icon hidden$="[[!indicatorVisible]]" - tooltip-text="[[indicatorTooltip_]]" icon-class="[[indicatorIcon]]"> + tooltip-text="[[indicatorTooltip_]]" icon-class="[[indicatorIcon]]" + tooltip-position="[[tooltipPosition]]"> </cr-tooltip-icon> </template> <script src="cr_policy_network_indicator.js"></script> diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.js index b499ed4dd03..3d139581290 100644 --- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.js +++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.js @@ -15,10 +15,13 @@ Polymer({ properties: { /** * Network property associated with the indicator. - * @type {!CrOnc.ManagedProperty|undefined} + * @type {?CrOnc.ManagedProperty|undefined} */ property: Object, + /** Position of tooltip popup related to the policy indicator. */ + tooltipPosition: String, + /** * Recommended value for non enforced properties. * @private {!CrOnc.NetworkPropertyType|undefined} @@ -36,13 +39,13 @@ Polymer({ /** @private */ propertyChanged_: function() { - var property = this.property; - if (!this.isControlled(property)) { + const property = this.property; + if (property == null || !this.isControlled(property)) { this.indicatorType = CrPolicyIndicatorType.NONE; return; } - var effective = property.Effective; - var active = property.Active; + const effective = property.Effective; + let active = property.Active; if (active == undefined) active = property[effective]; @@ -78,10 +81,10 @@ Polymer({ if (this.property === undefined) return ''; - var matches; + let matches; if (this.indicatorType == CrPolicyIndicatorType.RECOMMENDED && this.property) { - var value = this.property.Active; + let value = this.property.Active; if (value == undefined && this.property.Effective) value = this.property[this.property.Effective]; matches = value == this.recommended_; diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_behavior.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_behavior.js index 974bb293213..2acb61d6fa5 100644 --- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_behavior.js +++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_behavior.js @@ -7,7 +7,7 @@ */ /** @polymerBehavior */ -var CrPolicyPrefBehavior = { +const CrPolicyPrefBehavior = { properties: { /** * Showing that an extension is controlling a pref is sometimes done with a @@ -32,6 +32,9 @@ var CrPolicyPrefBehavior = { * @return {boolean} True if |this.pref| has a recommended or enforced policy. */ hasPrefPolicyIndicator: function() { + if (!this.pref) { + return false; + } if (this.noExtensionIndicator && this.pref.controlledBy == chrome.settingsPrivate.ControlledBy.EXTENSION) { diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js index b83f94971b0..2898061a3ed 100644 --- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js +++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js @@ -71,10 +71,10 @@ Polymer({ * @private */ getIndicatorTooltipForPref_: function(indicatorType) { - if (this.pref === undefined) + if (!this.pref) return ''; - var matches = this.pref && this.pref.value == this.pref.recommendedValue; + const matches = this.pref && this.pref.value == this.pref.recommendedValue; return this.getIndicatorTooltip( indicatorType, this.pref.controlledByName || '', matches); }, diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_tooltip_icon.html b/chromium/ui/webui/resources/cr_elements/policy/cr_tooltip_icon.html index c080e10f7d6..9be843aa737 100644 --- a/chromium/ui/webui/resources/cr_elements/policy/cr_tooltip_icon.html +++ b/chromium/ui/webui/resources/cr_elements/policy/cr_tooltip_icon.html @@ -23,7 +23,7 @@ </style> <iron-icon id="indicator" tabindex="0" aria-label$="[[iconAriaLabel]]" aria-describedby="tooltip" icon="[[iconClass]]"></iron-icon> - <paper-tooltip id="tooltip" for="indicator" position="top" + <paper-tooltip id="tooltip" for="indicator" position="[[tooltipPosition]]" fit-to-visible-bounds> [[tooltipText]] </paper-tooltip> diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_tooltip_icon.js b/chromium/ui/webui/resources/cr_elements/policy/cr_tooltip_icon.js index cd8cd9cc2ab..d0dda6ebde5 100644 --- a/chromium/ui/webui/resources/cr_elements/policy/cr_tooltip_icon.js +++ b/chromium/ui/webui/resources/cr_elements/policy/cr_tooltip_icon.js @@ -4,10 +4,19 @@ Polymer({ is: 'cr-tooltip-icon', + properties: { iconAriaLabel: String, + iconClass: String, + tooltipText: String, + + /** Position of tooltip popup related to the icon. */ + tooltipPosition: { + type: String, + value: 'top', + } }, /** @return {!Element} */ diff --git a/chromium/ui/webui/resources/cr_elements/shared_style_css.html b/chromium/ui/webui/resources/cr_elements/shared_style_css.html index 6b0631c4a79..f0a0b5de7bc 100644 --- a/chromium/ui/webui/resources/cr_elements/shared_style_css.html +++ b/chromium/ui/webui/resources/cr_elements/shared_style_css.html @@ -55,11 +55,11 @@ min-height: 1px; } - [selectable]:not(paper-radio-group):focus, - [selectable]:not(paper-radio-group) > :focus { + [selectable]:not(cr-radio-group):focus, + [selectable]:not(cr-radio-group) > :focus { @apply --cr-selectable-focus; } - [selectable]:not(paper-radio-group) > * { + [selectable]:not(cr-radio-group) > * { @apply --cr-actionable; } diff --git a/chromium/ui/webui/resources/cr_elements_resources.grdp b/chromium/ui/webui/resources/cr_elements_resources.grdp index 040b089fbef..a5ee1112548 100644 --- a/chromium/ui/webui/resources/cr_elements_resources.grdp +++ b/chromium/ui/webui/resources/cr_elements_resources.grdp @@ -110,6 +110,14 @@ file="cr_elements/cr_radio_button/cr_radio_button_style_css.html" type="chrome_html" compress="gzip" /> + <structure name="IDR_CR_ELEMENTS_CR_RADIO_GROUP_HTML" + file="cr_elements/cr_radio_group/cr_radio_group.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_CR_ELEMENTS_CR_RADIO_GROUP_JS" + file="cr_elements/cr_radio_group/cr_radio_group.js" + type="chrome_html" + compress="gzip" /> <structure name="IDR_CR_ELEMENTS_CR_SLIDER_HTML" file="cr_elements/cr_slider/cr_slider.html" type="chrome_html" diff --git a/chromium/ui/webui/resources/js/action_link.js b/chromium/ui/webui/resources/js/action_link.js index ac67d320ebe..99dc0fdf3df 100644 --- a/chromium/ui/webui/resources/js/action_link.js +++ b/chromium/ui/webui/resources/js/action_link.js @@ -27,90 +27,78 @@ // // NOTE: <action-link> and document.createElement('action-link') don't work. -/** - * See crbug.com/837381 - * @suppress {deprecated} - * - * @constructor - * @extends {HTMLAnchorElement} - */ -var ActionLink = document.registerElement('action-link', { - prototype: { - __proto__: HTMLAnchorElement.prototype, +class ActionLink extends HTMLAnchorElement { + connectedCallback() { + // Action links can start disabled (e.g. <a is="action-link" disabled>). + this.tabIndex = this.disabled ? -1 : 0; - /** @this {ActionLink} */ - createdCallback: function() { - // Action links can start disabled (e.g. <a is="action-link" disabled>). - this.tabIndex = this.disabled ? -1 : 0; + if (!this.hasAttribute('role')) + this.setAttribute('role', 'link'); - if (!this.hasAttribute('role')) - this.setAttribute('role', 'link'); - - this.addEventListener('keydown', function(e) { - if (!this.disabled && e.key == 'Enter' && !this.href) { - // Schedule a click asynchronously because other 'keydown' handlers - // may still run later (e.g. document.addEventListener('keydown')). - // Specifically options dialogs break when this timeout isn't here. - // NOTE: this affects the "trusted" state of the ensuing click. I - // haven't found anything that breaks because of this (yet). - window.setTimeout(this.click.bind(this), 0); - } - }); - - function preventDefault(e) { - e.preventDefault(); + this.addEventListener('keydown', function(e) { + if (!this.disabled && e.key == 'Enter' && !this.href) { + // Schedule a click asynchronously because other 'keydown' handlers + // may still run later (e.g. document.addEventListener('keydown')). + // Specifically options dialogs break when this timeout isn't here. + // NOTE: this affects the "trusted" state of the ensuing click. I + // haven't found anything that breaks because of this (yet). + window.setTimeout(this.click.bind(this), 0); } + }); - function removePreventDefault() { - document.removeEventListener('selectstart', preventDefault); - document.removeEventListener('mouseup', removePreventDefault); - } + function preventDefault(e) { + e.preventDefault(); + } + + function removePreventDefault() { + document.removeEventListener('selectstart', preventDefault); + document.removeEventListener('mouseup', removePreventDefault); + } - this.addEventListener('mousedown', function() { - // This handlers strives to match the behavior of <a href="...">. + this.addEventListener('mousedown', function() { + // This handlers strives to match the behavior of <a href="...">. - // While the mouse is down, prevent text selection from dragging. - document.addEventListener('selectstart', preventDefault); - document.addEventListener('mouseup', removePreventDefault); + // While the mouse is down, prevent text selection from dragging. + document.addEventListener('selectstart', preventDefault); + document.addEventListener('mouseup', removePreventDefault); - // If focus started via mouse press, don't show an outline. - if (document.activeElement != this) - this.classList.add('no-outline'); - }); + // If focus started via mouse press, don't show an outline. + if (document.activeElement != this) + this.classList.add('no-outline'); + }); - this.addEventListener('blur', function() { - this.classList.remove('no-outline'); - }); - }, + this.addEventListener('blur', function() { + this.classList.remove('no-outline'); + }); + } - /** @type {boolean} */ - set disabled(disabled) { - if (disabled) - HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', ''); - else - HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled'); - this.tabIndex = disabled ? -1 : 0; - }, - get disabled() { - return this.hasAttribute('disabled'); - }, + /** @param {boolean} disabled */ + set disabled(disabled) { + if (disabled) + HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', ''); + else + HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled'); + this.tabIndex = disabled ? -1 : 0; + } - /** @override */ - setAttribute: function(attr, val) { - if (attr.toLowerCase() == 'disabled') - this.disabled = true; - else - HTMLAnchorElement.prototype.setAttribute.apply(this, arguments); - }, + get disabled() { + return this.hasAttribute('disabled'); + } - /** @override */ - removeAttribute: function(attr) { - if (attr.toLowerCase() == 'disabled') - this.disabled = false; - else - HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments); - }, - }, + /** @override */ + setAttribute(attr, val) { + if (attr.toLowerCase() == 'disabled') + this.disabled = true; + else + HTMLAnchorElement.prototype.setAttribute.apply(this, arguments); + } - extends: 'a', -}); + /** @override */ + removeAttribute(attr) { + if (attr.toLowerCase() == 'disabled') + this.disabled = false; + else + HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments); + } +} +customElements.define('action-link', ActionLink, {extends: 'a'}); diff --git a/chromium/ui/webui/resources/js/analytics.js b/chromium/ui/webui/resources/js/analytics.js deleted file mode 100644 index b0893a6f98c..00000000000 --- a/chromium/ui/webui/resources/js/analytics.js +++ /dev/null @@ -1,13 +0,0 @@ -// Copyright (c) 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. - -// This file serves as a proxy to bring the included js file from /third_party -// into its correct location under the resources directory tree, whence it is -// delivered via a chrome://resources URL. See ../webui_resources.grd. - -// Note: this <include> is not behind a single-line comment because the first -// line of the file is source code (so the first line would be skipped) instead -// of a licence header. -// clang-format off -<include src="../../../../third_party/analytics/google-analytics-bundle.js"> diff --git a/chromium/ui/webui/resources/js/cr/ui/command.js b/chromium/ui/webui/resources/js/cr/ui/command.js index f42f3ef0b4f..e2bd5193b33 100644 --- a/chromium/ui/webui/resources/js/cr/ui/command.js +++ b/chromium/ui/webui/resources/js/cr/ui/command.js @@ -24,26 +24,30 @@ cr.define('cr.ui', function() { * @constructor */ function KeyboardShortcut(shortcut) { - var mods = {}; - var ident = ''; - shortcut.split('|').forEach(function(part) { + this.useKeyCode_ = false; + this.mods_ = {}; + shortcut.split('|').forEach((part) => { var partLc = part.toLowerCase(); switch (partLc) { case 'alt': case 'ctrl': case 'meta': case 'shift': - mods[partLc + 'Key'] = true; + this.mods_[partLc + 'Key'] = true; break; default: - if (ident) + if (this.key_) throw Error('Invalid shortcut'); - ident = part; + this.key_ = part; + // For single key alpha shortcuts use event.keyCode rather than + // event.key to match how chrome handles shortcuts and allow + // non-english language input to work. + if (part.match(/^[a-z]$/)) { + this.useKeyCode_ = true; + this.keyCode_ = part.toUpperCase().charCodeAt(0); + } } }); - - this.ident_ = ident; - this.mods_ = mods; } KeyboardShortcut.prototype = { @@ -53,8 +57,9 @@ cr.define('cr.ui', function() { * @return {boolean} Whether we found a match or not. */ matchesEvent: function(e) { - if (e.key == this.ident_) { - // All keyboard modifiers needs to match. + if ((this.useKeyCode_ && e.keyCode == this.keyCode_) || + e.key == this.key_) { + // All keyboard modifiers need to match. var mods = this.mods_; return ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'].every(function(k) { return e[k] == !!mods[k]; diff --git a/chromium/ui/webui/resources/js/cr/ui/dialogs.js b/chromium/ui/webui/resources/js/cr/ui/dialogs.js index a2aff076194..086560391fc 100644 --- a/chromium/ui/webui/resources/js/cr/ui/dialogs.js +++ b/chromium/ui/webui/resources/js/cr/ui/dialogs.js @@ -112,7 +112,7 @@ cr.define('cr.ui.dialogs', function() { /** @private */ BaseDialog.prototype.onContainerMouseDown_ = function(event) { if (event.target == this.container_) { - var classList = this.frame_.classList; + var classList = this.container_.classList; // Start 'pulse' animation. classList.remove('pulse'); setTimeout(classList.add.bind(classList, 'pulse'), 0); diff --git a/chromium/ui/webui/resources/js/cr/ui/list_selection_model.js b/chromium/ui/webui/resources/js/cr/ui/list_selection_model.js index a51f2ac9bff..9f293041a02 100644 --- a/chromium/ui/webui/resources/js/cr/ui/list_selection_model.js +++ b/chromium/ui/webui/resources/js/cr/ui/list_selection_model.js @@ -105,8 +105,14 @@ cr.define('cr.ui', function() { * @private */ getNearestSelectedIndex_: function(index) { - if (index == -1) + if (index == -1) { + // If no index is provided, pick the first selected index if there is + // one. + if (this.selectedIndexes.length) { + return this.selectedIndexes[0]; + } return -1; + } var result = Infinity; for (var i in this.selectedIndexes_) { @@ -348,8 +354,15 @@ cr.define('cr.ui', function() { if (oldSelectedItemsCount && !this.selectedIndexes.length && this.length_ && oldLeadIndex != -1) { // All selected items are deleted. We move selection to next item of - // last selected item. - this.selectedIndexes = [Math.min(oldLeadIndex, this.length_ - 1)]; + // last selected item, following it to its new position. + let newSelectedIndex = Math.min(oldLeadIndex, this.length_ - 1); + for (let i = oldLeadIndex + 1; i < permutation.length; ++i) { + if (permutation[i] != -1) { + newSelectedIndex = permutation[i]; + break; + } + } + this.selectedIndexes = [newSelectedIndex]; } this.endChange(); diff --git a/chromium/ui/webui/resources/js/cr/ui/menu.js b/chromium/ui/webui/resources/js/cr/ui/menu.js index ed00ed84f6a..7560a63fb4f 100644 --- a/chromium/ui/webui/resources/js/cr/ui/menu.js +++ b/chromium/ui/webui/resources/js/cr/ui/menu.js @@ -202,14 +202,16 @@ cr.define('cr.ui', function() { }, /** - * Returns if the menu has any visible item. + * Returns whether the menu has any visible items. * @return {boolean} True if the menu has visible item. Otherwise, false. */ hasVisibleItems: function() { - var menuItems = this.menuItems; // Cache. - for (var i = 0, menuItem; menuItem = menuItems[i]; i++) { - if (!menuItem.isSeparator() && this.isItemVisible_(menuItem)) + // Inspect items in reverse order to determine if the separator above each + // set of items is required. + for (let menuItem of this.menuItems) { + if (this.isItemVisible_(menuItem)) { return true; + } } return false; }, @@ -310,6 +312,27 @@ cr.define('cr.ui', function() { if (!menuItem.isSeparator()) menuItem.updateCommand(node); } + + let separatorRequired = false; + let lastSeparator = null; + // Hide any separators without a visible item between them and the next + // separator or the end of the menu. + for (let menuItem of menuItems) { + if (menuItem.isSeparator()) { + if (separatorRequired) { + lastSeparator = menuItem; + } + menuItem.hidden = true; + separatorRequired = false; + continue; + } + if (this.isItemVisible_(menuItem)) { + if (lastSeparator) { + lastSeparator.hidden = false; + } + separatorRequired = true; + } + } } }; diff --git a/chromium/ui/webui/resources/js/cr/ui/menu_test.html b/chromium/ui/webui/resources/js/cr/ui/menu_test.html deleted file mode 100644 index 05b601edf6c..00000000000 --- a/chromium/ui/webui/resources/js/cr/ui/menu_test.html +++ /dev/null @@ -1,67 +0,0 @@ -<!doctype html> -<html> -<head> -<script src="https://cdn.rawgit.com/google/closure-library/master/closure/goog/base.js"></script> -<script src="../../cr.js"></script> -<script src="../event_target.js"></script> -<script src="../ui.js"></script> -<script src="command.js"></script> -<script src="menu.js"></script> -<script src="menu_item.js"></script> -<script> - -goog.require('goog.testing.jsunit'); - -</script> - -</head> -<body> - -<script> - -/** - * Tests that if the command attributes are spacified, they are copied to the - * corresponding menuitem. - */ -function testCommandMenuItem() { - // Test 1: The case that the command label is set and other attributes copied. - var command = new cr.ui.Command(); - command.id = 'the-command'; - command.label = 'CommandLabel'; - command.disabled = true; - command.hidden = true; - command.checked = true; - document.body.appendChild(command); - - var menuItem = new cr.ui.MenuItem(); - menuItem.command = '#the-command'; - - // Confirms the label is copied from the command. - assertEquals('CommandLabel', menuItem.label); - // Confirms the attributes are copied from the command. - assertEquals(true, menuItem.disabled); - assertEquals(true, menuItem.hidden); - assertEquals(true, menuItem.checked); - - // Test 2: The case that the command label is not set, and other attributes - // have default values. - var command2 = new cr.ui.Command(); - command2.id = 'the-command2'; - document.body.appendChild(command2); - - var menuItem2 = new cr.ui.MenuItem(); - menuItem2.label = 'MenuLabel'; - menuItem2.command = '#the-command2'; - - // Confirms the label is not copied, keeping the original label. - assertEquals('MenuLabel', menuItem2.label); - // Confirms the attributes are copied from the command. - assertEquals(false, menuItem2.disabled); - assertEquals(false, menuItem2.hidden); - assertEquals(false, menuItem2.checked); -} - -</script> - -</body> -</html> diff --git a/chromium/ui/webui/resources/js/polymer_config.js b/chromium/ui/webui/resources/js/polymer_config.js index 5ceafb2ee7e..119d9479024 100644 --- a/chromium/ui/webui/resources/js/polymer_config.js +++ b/chromium/ui/webui/resources/js/polymer_config.js @@ -6,6 +6,7 @@ if (typeof Polymer == 'undefined') { Polymer = { dom: 'shadow', lazyRegister: true, + legacyOptimizations: true, preserveStyleIncludes: true, // Only matters when using polymer-css-build. suppressBindingNotifications: true, suppressTemplateNotifications: true, diff --git a/chromium/ui/webui/resources/polymer_resources.grdp b/chromium/ui/webui/resources/polymer_resources.grdp index 4327022a41f..dd29898881a 100644 --- a/chromium/ui/webui/resources/polymer_resources.grdp +++ b/chromium/ui/webui/resources/polymer_resources.grdp @@ -48,14 +48,6 @@ file="../../../third_party/polymer/v1_0/components-chromium/iron-a11y-keys/iron-a11y-keys.html" type="chrome_html" compress="gzip" /> - <structure name="IDR_POLYMER_1_0_IRON_AUTOGROW_TEXTAREA_IRON_AUTOGROW_TEXTAREA_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/iron-autogrow-textarea/iron-autogrow-textarea-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_IRON_AUTOGROW_TEXTAREA_IRON_AUTOGROW_TEXTAREA_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/iron-autogrow-textarea/iron-autogrow-textarea.html" - type="chrome_html" - compress="gzip" /> <structure name="IDR_POLYMER_1_0_IRON_BEHAVIORS_IRON_BUTTON_STATE_EXTRACTED_JS" file="../../../third_party/polymer/v1_0/components-chromium/iron-behaviors/iron-button-state-extracted.js" type="chrome_html" @@ -72,14 +64,6 @@ file="../../../third_party/polymer/v1_0/components-chromium/iron-behaviors/iron-control-state.html" type="chrome_html" compress="gzip" /> - <structure name="IDR_POLYMER_1_0_IRON_CHECKED_ELEMENT_BEHAVIOR_IRON_CHECKED_ELEMENT_BEHAVIOR_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/iron-checked-element-behavior/iron-checked-element-behavior-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_IRON_CHECKED_ELEMENT_BEHAVIOR_IRON_CHECKED_ELEMENT_BEHAVIOR_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/iron-checked-element-behavior/iron-checked-element-behavior.html" - type="chrome_html" - compress="gzip" /> <structure name="IDR_POLYMER_1_0_IRON_COLLAPSE_IRON_COLLAPSE_EXTRACTED_JS" file="../../../third_party/polymer/v1_0/components-chromium/iron-collapse/iron-collapse-extracted.js" type="chrome_html" @@ -144,14 +128,16 @@ file="../../../third_party/polymer/v1_0/components-chromium/iron-iconset-svg/iron-iconset-svg.html" type="chrome_html" compress="gzip" /> - <structure name="IDR_POLYMER_1_0_IRON_INPUT_IRON_INPUT_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/iron-input/iron-input-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_IRON_INPUT_IRON_INPUT_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/iron-input/iron-input.html" - type="chrome_html" - compress="gzip" /> + <if expr="chromeos"> + <structure name="IDR_POLYMER_1_0_IRON_INPUT_IRON_INPUT_EXTRACTED_JS" + file="../../../third_party/polymer/v1_0/components-chromium/iron-input/iron-input-extracted.js" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_IRON_INPUT_IRON_INPUT_HTML" + file="../../../third_party/polymer/v1_0/components-chromium/iron-input/iron-input.html" + type="chrome_html" + compress="gzip" /> + </if> <structure name="IDR_POLYMER_1_0_IRON_LIST_IRON_LIST_EXTRACTED_JS" file="../../../third_party/polymer/v1_0/components-chromium/iron-list/iron-list-extracted.js" type="chrome_html" @@ -508,14 +494,6 @@ file="../../../third_party/polymer/v1_0/components-chromium/paper-behaviors/paper-button-behavior.html" type="chrome_html" compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_BEHAVIORS_PAPER_CHECKED_ELEMENT_BEHAVIOR_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-behaviors/paper-checked-element-behavior-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_BEHAVIORS_PAPER_CHECKED_ELEMENT_BEHAVIOR_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-behaviors/paper-checked-element-behavior.html" - type="chrome_html" - compress="gzip" /> <structure name="IDR_POLYMER_1_0_PAPER_BEHAVIORS_PAPER_INKY_FOCUS_BEHAVIOR_EXTRACTED_JS" file="../../../third_party/polymer/v1_0/components-chromium/paper-behaviors/paper-inky-focus-behavior-extracted.js" type="chrome_html" @@ -564,106 +542,52 @@ file="../../../third_party/polymer/v1_0/components-chromium/paper-icon-button/paper-icon-button.html" type="chrome_html" compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_ADDON_BEHAVIOR_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-addon-behavior-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_ADDON_BEHAVIOR_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-addon-behavior.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_BEHAVIOR_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-behavior-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_BEHAVIOR_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-behavior.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_CHAR_COUNTER_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-char-counter-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_CHAR_COUNTER_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-char-counter.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_CONTAINER_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_CONTAINER_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_ERROR_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-error-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_ERROR_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-error.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_TEXTAREA_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-textarea-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_TEXTAREA_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-textarea.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ICON_ITEM_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-icon-item-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ICON_ITEM_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-icon-item.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_BEHAVIOR_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item-behavior-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_BEHAVIOR_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item-behavior.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_BODY_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item-body-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_BODY_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item-body.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_SHARED_STYLES_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item-shared-styles.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item.html" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_LISTBOX_PAPER_LISTBOX_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-listbox/paper-listbox-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_LISTBOX_PAPER_LISTBOX_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-listbox/paper-listbox.html" - type="chrome_html" - compress="gzip" /> + <if expr="chromeos"> + <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_ADDON_BEHAVIOR_EXTRACTED_JS" + file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-addon-behavior-extracted.js" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_ADDON_BEHAVIOR_HTML" + file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-addon-behavior.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_CONTAINER_EXTRACTED_JS" + file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container-extracted.js" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_CONTAINER_HTML" + file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_ERROR_EXTRACTED_JS" + file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-error-extracted.js" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_PAPER_INPUT_PAPER_INPUT_ERROR_HTML" + file="../../../third_party/polymer/v1_0/components-chromium/paper-input/paper-input-error.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ICON_ITEM_EXTRACTED_JS" + file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-icon-item-extracted.js" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ICON_ITEM_HTML" + file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-icon-item.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_BEHAVIOR_EXTRACTED_JS" + file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item-behavior-extracted.js" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_BEHAVIOR_HTML" + file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item-behavior.html" + type="chrome_html" + compress="gzip" /> + <structure name="IDR_POLYMER_1_0_PAPER_ITEM_PAPER_ITEM_SHARED_STYLES_HTML" + file="../../../third_party/polymer/v1_0/components-chromium/paper-item/paper-item-shared-styles.html" + type="chrome_html" + compress="gzip" /> + </if> <structure name="IDR_POLYMER_1_0_PAPER_PROGRESS_PAPER_PROGRESS_EXTRACTED_JS" file="../../../third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress-extracted.js" type="chrome_html" @@ -672,14 +596,6 @@ file="../../../third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html" type="chrome_html" compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_RADIO_GROUP_PAPER_RADIO_GROUP_EXTRACTED_JS" - file="../../../third_party/polymer/v1_0/components-chromium/paper-radio-group/paper-radio-group-extracted.js" - type="chrome_html" - compress="gzip" /> - <structure name="IDR_POLYMER_1_0_PAPER_RADIO_GROUP_PAPER_RADIO_GROUP_HTML" - file="../../../third_party/polymer/v1_0/components-chromium/paper-radio-group/paper-radio-group.html" - type="chrome_html" - compress="gzip" /> <structure name="IDR_POLYMER_1_0_PAPER_RIPPLE_PAPER_RIPPLE_EXTRACTED_JS" file="../../../third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js" type="chrome_html" diff --git a/chromium/ui/webui/resources/webui_resources.grd b/chromium/ui/webui/resources/webui_resources.grd index a2b2e2d14bc..46c8b372f96 100644 --- a/chromium/ui/webui/resources/webui_resources.grd +++ b/chromium/ui/webui/resources/webui_resources.grd @@ -15,7 +15,6 @@ without changes to the corresponding grd file. --> <includes> <include name="IDR_WEBUI_I18N_TEMPLATE_JS" file="js/i18n_template.js" flattenhtml="true" type="BINDATA" /> <include name="IDR_WEBUI_JSTEMPLATE_JS" file="js/jstemplate_compiled.js" flattenhtml="true" type="BINDATA" /> - <include name="IDR_WEBUI_ANALYTICS_JS" file="js/analytics.js" flattenhtml="true" type="BINDATA" compress="gzip" /> <!-- Roboto Font. Roboto-Regular and Roboto-Light is already available on Android, and Roboto-Medium is not used on Android. All 6 weights of Roboto are available on Chrome OS.--> |