diff options
Diffstat (limited to 'chrome/browser/resources/settings')
11 files changed, 388 insertions, 80 deletions
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.html b/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.html new file mode 100644 index 0000000..23adb12 --- /dev/null +++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.html @@ -0,0 +1,35 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://md-settings/certificate_manager_page/certificates_browser_proxy.html"> +<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> +<link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_subentry.html"> + +<dom-module id="settings-certificate-entry"> + <template> + <style include="settings-shared"> + iron-collapse { + margin: 0 20px; + } + </style> + + <div class="settings-box"> + <div class="start">[[model.id]]</div> + <cr-expand-button expanded="{{expanded_}}"></cr-expand-button> + </div> + <iron-collapse opened="[[expanded_]]" no-animation> + <template is="dom-if" if="[[expanded_]]"> + <template is="dom-repeat" items="[[model.subnodes]]"> + <settings-certificate-subentry model="[[item]]" + certificate-type="[[certificateType]]"> + </settings-certificate-subentry> + </template> + </template> + <iron-collapse> + </template> + <script src="certificate_entry.js"></script> +</dom-module> diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.js b/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.js new file mode 100644 index 0000000..c2441ac --- /dev/null +++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.js @@ -0,0 +1,18 @@ +// Copyright 2016 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 An element that represents an SSL certificate entry. + */ +Polymer({ + is: 'settings-certificate-entry', + + properties: { + /** @type {!Certificate} */ + model: Object, + + /** @type {!settings.CertificateType} */ + certificateType: String, + }, +}); diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_list.html b/chrome/browser/resources/settings/certificate_manager_page/certificate_list.html new file mode 100644 index 0000000..39ce67b --- /dev/null +++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_list.html @@ -0,0 +1,17 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_entry.html"> + +<dom-module id="settings-certificate-list"> + <template> + <template is="dom-repeat" items="[[certificates]]"> + <settings-certificate-entry model="[[item]]" + certificate-type="[[certificateType]]"> + </settings-certificate-entry> + </template> + <template is="dom-if" if="[[!certificates.length]]"> + <!-- TODO(dpapad): Localize string --> + You have no certificates + </template> + </template> + <script src="certificate_list.js"></script> +</dom-module> diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_list.js b/chrome/browser/resources/settings/certificate_manager_page/certificate_list.js new file mode 100644 index 0000000..913ba18 --- /dev/null +++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_list.js @@ -0,0 +1,22 @@ +// Copyright 2016 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 'settings-certificate-list' is an element that displays a list + * of certificates. + */ +Polymer({ + is: 'settings-certificate-list', + + properties: { + /** @type {!Array<!Certificate>} */ + certificates: { + type: Array, + value: function() { return []; }, + }, + + /** @type {!settings.CertificateType} */ + certificateType: String, + }, +}); diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.css b/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.css deleted file mode 100644 index 24b0ceb..0000000 --- a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.css +++ /dev/null @@ -1,7 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -.privacy-buttons { - margin-top: 25px; -} diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html b/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html index afc18a9..8fe34c4 100644 --- a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html +++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html @@ -1,77 +1,58 @@ <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> +<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html"> <link rel="import" href="chrome://md-settings/certificate_manager_page/ca_trust_edit_dialog.html"> <link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_delete_confirmation_dialog.html"> -<link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_password_encryption_dialog.html"> +<link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_list.html"> <link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_password_decryption_dialog.html"> +<link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_password_encryption_dialog.html"> +<link rel="import" href="chrome://md-settings/certificate_manager_page/certificates_browser_proxy.html"> <dom-module id="settings-certificate-manager-page"> - <link rel="import" type="css" href="certificate_manager_page.css"> <template> + <style> + /* TODO(dpapad): Find exact color value to use. */ + :host { + --paper-tabs-selection-bar-color: blue; + } + </style> <paper-tabs selected="{{selected}}"> - <paper-tab i18n-content="certificateManagerYourCertificates"></paper-tab> - <paper-tab i18n-content="certificateManagerServers"></paper-tab> - <paper-tab i18n-content="certificateManagerAuthorities"></paper-tab> - <paper-tab i18n-content="certificateManagerOthers"></paper-tab> + <paper-tab>$i18n{certificateManagerYourCertificates}</paper-tab> + <paper-tab>$i18n{certificateManagerServers}</paper-tab> + <paper-tab>$i18n{certificateManagerAuthorities}</paper-tab> + <paper-tab>$i18n{certificateManagerOthers}</paper-tab> </paper-tabs> - - <iron-pages selected="{{selected}}"> + <iron-pages selected="[[selected]]"> <div> - <div i18n-content="certificateManagerYourCertificatesSubtitle"></div> - <div class="privacy-buttons layout horizontal end-justified"> - <paper-button i18n-content="certificateManagerView"></paper-button> - <paper-button i18n-content="certificateManagerImport"></paper-button> - <paper-button i18n-content="certificateManagerImportAndBind"> - </paper-button> - <paper-button i18n-content="certificateManagerExport"></paper-button> - <paper-button i18n-content="certificateManagerDelete"></paper-button> - <span class="flex"></span> - <paper-button raised i18n-content="certificateManagerDone"> - </paper-button> - </div> + <settings-certificate-list id="personalCerts" + certificates="[[personalCerts]]" + certificate-type="[[certificateTypeEnum_.PERSONAL]]"> + </settings-certificate-list> </div> <div> - <div i18n-content="certificateManagerServersSubtitle"></div> - <div class="privacy-buttons layout horizontal end-justified"> - <paper-button disabled i18n-content="certificateManagerView"> - </paper-button> - <paper-button i18n-content="certificateManagerImport"></paper-button> - <paper-button disabled i18n-content="certificateManagerExport"> - </paper-button> - <paper-button disabled i18n-content="certificateManagerDelete"> - </paper-button> - <span class="flex"></span> - <paper-button raised i18n-content="certificateManagerDone"> - </paper-button> - </div> + <template is="dom-if" if="[[isTabSelected_(selected, 1)]]"> + <settings-certificate-list id="serverCerts" + certificates="[[serverCerts]]" + certificate-type="[[certificateTypeEnum_.SERVER]]"> + </settings-certificate-list> + </template> </div> <div> - <div i18n-content="certificateManagerAuthoritiesSubtitle"></div> - <div class="privacy-buttons layout horizontal end-justified"> - <paper-button i18n-content="certificateManagerView"></paper-button> - <paper-button i18n-content="certificateManagerImport"></paper-button> - <paper-button i18n-content="certificateManagerExport"></paper-button> - <paper-button i18n-content="certificateManagerDelete"></paper-button> - <span class="flex"></span> - <paper-button raised i18n-content="certificateManagerDone"> - </paper-button> - </div> + <template is="dom-if" if="[[isTabSelected_(selected, 2)]]"> + <settings-certificate-list id="caCerts" + certificates="[[caCerts]]" + certificate-type="[[certificateTypeEnum_.CA]]"> + </settings-certificate-list> + </template> </div> <div> - <div i18n-content="certificateManagerOthersSubtitle"></div> - <div class="privacy-buttons layout horizontal end-justified"> - <paper-button disabled i18n-content="certificateManagerView"> - </paper-button> - <paper-button disabled i18n-content="certificateManagerExport"> - </paper-button> - <paper-button disabled i18n-content="certificateManagerDelete"> - </paper-button> - <span class="flex"></span> - <paper-button raised i18n-content="certificateManagerDone"> - </paper-button> - </div> + <template is="dom-if" if="[[isTabSelected_(selected, 3)]]"> + <settings-certificate-list id="otherCerts" + certificates="[[otherCerts]]" + certificate-type="[[certificateTypeEnum_.OTHER]]"> + </settings-certificate-list> + </template> </div> </iron-pages> </template> diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js b/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js index 14979a3..14fb032f 100644 --- a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js +++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js @@ -3,18 +3,66 @@ // found in the LICENSE file. /** - * @fileoverview - * 'settings-certificate-manager-page' is the settings page containing SSL - * certificate settings. - * - * Example: - * - * <iron-animated-pages> - * <settings-certificate-manager-page prefs="{{prefs}}"> - * </settings-certificate-manager-page> - * ... other pages ... - * </iron-animated-pages> + * @fileoverview 'settings-certificate-manager-page' is the settings page + * containing SSL certificate settings. */ Polymer({ is: 'settings-certificate-manager-page', + + behaviors: [WebUIListenerBehavior], + + properties: { + /** @type {number} */ + selected: { + type: Number, + value: 0, + }, + + /** @type {!Array<!Certificate>} */ + personalCerts: { + type: Array, + value: function() { return []; }, + }, + + /** @type {!Array<!Certificate>} */ + serverCerts: { + type: Array, + value: function() { return []; }, + }, + + /** @type {!Array<!Certificate>} */ + caCerts: { + type: Array, + value: function() { return []; }, + }, + + /** @type {!Array<!Certificate>} */ + otherCerts: { + type: Array, + value: function() { return []; }, + }, + + /** @private */ + certificateTypeEnum_: { + type: Object, + value: settings.CertificateType, + readonly: true, + }, + }, + + /** @override */ + attached: function() { + this.addWebUIListener('certificates-changed', this.set.bind(this)); + settings.CertificatesBrowserProxyImpl.getInstance().refreshCertificates(); + }, + + /** + * @param {number} selectedIndex + * @param {number} tabIndex + * @return {boolean} Whether to show tab at |tabIndex|. + * @private + */ + isTabSelected_: function(selectedIndex, tabIndex) { + return selectedIndex == tabIndex; + }, }); diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html b/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html new file mode 100644 index 0000000..94805c7 --- /dev/null +++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html @@ -0,0 +1,68 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://md-settings/certificate_manager_page/certificates_browser_proxy.html"> +<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> + +<dom-module id="settings-certificate-subentry"> + <template> + <style include="settings-shared"> + .dropdown-content { + background: white; + /* TODO(dpapad): Use a CSS variable for box-shadow and unify with other + * such menus (like in search engines section) */ + box-shadow: 0 2px 6px grey; + } + + .container { + display: flex; + line-height: 30px; + } + + .name { + flex: auto; + margin: auto; + } + + paper-item:hover { + background-color: var(--google-grey-300); + } + </style> + <div class="container"> + <paper-icon-button icon="image:brightness-1"></paper-icon-button> + <div class="name">[[model.name]]</div> + <paper-icon-button icon="more-vert" toggles active="{{menuOpened}}"> + </paper-icon-button> + <!-- TODO(dpapad): Figure out RTL for this menu --> + <template is="dom-if" if="[[menuOpened]]"> + <iron-dropdown vertical-align="top" horizontal-align="right" + opened="{{menuOpened}}"> + <div class="dropdown-content"> + <paper-item on-tap="onViewTap_"> + $i18n{certificateManagerView} + </paper-item> + <paper-item hidden$="[[!canEdit_(certificateType)]]" + on-tap="onEditTap_"> + $i18n{certificateManagerEdit} + </paper-item> + <paper-item on-tap="onExportTap_"> + $i18n{certificateManagerExport} + </paper-item> + <paper-item hidden$="[[!canImport_(certificateType)]]" + on-tap="onImportTap_"> + $i18n{certificateManagerImport} + </paper-item> + <paper-item hidden$="[[model.readonly]]" + on-tap="onDeleteTap_"> + $i18n{certificateManagerDelete} + </paper-item> + </div> + </iron-dropdown> + </template> + <div> + </template> + <script src="certificate_subentry.js"></script> +</dom-module> diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.js b/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.js new file mode 100644 index 0000000..b750ebb --- /dev/null +++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.js @@ -0,0 +1,111 @@ +// Copyright 2016 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 settings-certificate-subentry represents an SSL certificate + * sub-entry. + */ +Polymer({ + is: 'settings-certificate-subentry', + + properties: { + /** @type {!CertificateSubnode>} */ + model: Object, + + /** @type {!settings.CertificateType} */ + certificateType: String, + }, + + /** @private {!settings.CertificatesManagerBrowserProxy} */ + browserProxy_: null, + + /** @override */ + ready: function() { + this.browserProxy_ = settings.CertificatesBrowserProxyImpl.getInstance(); + }, + + /** + * @param {!Event} event + * @private + */ + onViewTap_: function(event) { + this.closePopupMenu_(); + this.browserProxy_.viewCertificate(this.model.id); + }, + + /** + * @param {!Event} event + * @private + */ + onEditTap_: function(event) { + this.closePopupMenu_(); + // TODO(dpapad): Open edit dialog. + }, + + /** + * @param {!Event} event + * @private + */ + onDeleteTap_: function(event) { + this.closePopupMenu_(); + // TODO(dpapad): Open delete confirmation dialog. + }, + + /** + * @param {!Event} event + * @private + */ + onExportTap_: function(event) { + this.closePopupMenu_(); + if (this.certificateType == settings.CertificateType.PERSONAL) { + // TODO(dpapad): Open password encryption dialog. + } else { + this.browserProxy_.exportCertificate(this.model.id); + } + }, + + /** @private */ + onImportTap_: function() { + this.closePopupMenu_(); + if (this.certificateType == settings.CertificateType.PERSONAL) { + // TODO(dpapad): Figure out when to pass true (ChromeOS?). + this.browserProxy_.importPersonalCertificate(false).then( + function(showPasswordPrompt) { + if (showPasswordPrompt) { + // TODO(dpapad): Show password decryption dialog. + } + }.bind(this)); + } else if (this.certificateType == settings.CertificateType.CA) { + this.browserProxy_.importCaCertificate().then( + function(certificateName) { + // TODO(dpapad): Show import dialog. + }.bind(this)); + } else if (this.certificateType == settings.CertificateType.SERVER) { + this.browserProxy_.importServerCertificate(); + } + }, + + /** + * @param {string} certificateType The type of this certificate. + * @return {boolean} Whether the certificate can be edited. + * @private + */ + canEdit_: function(certificateType) { + return this.certificateType == settings.CertificateType.CA; + }, + + /** + * @param {string} certificateType The type of this certificate. + * @return {boolean} Whether a certificate can be imported. + * @private + */ + canImport_: function(certificateType) { + return this.certificateType != settings.CertificateType.OTHER; + }, + + /** @private */ + closePopupMenu_: function() { + this.$$('iron-dropdown').close(); + }, +}); diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js b/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js index cf2cbe4..3554426 100644 --- a/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js +++ b/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js @@ -80,9 +80,9 @@ cr.define('settings', function() { CertificatesBrowserProxy.prototype = { /** - * Triggers two events in the following order - * 1) 'certificates-model-ready' event. - * 2) 'certificates-changed' event. + * Triggers 5 events in the following order + * 1x 'certificates-model-ready' event. + * 4x 'certificates-changed' event, one for each certificate category. */ refreshCertificates: function() {}, diff --git a/chrome/browser/resources/settings/settings_resources.grd b/chrome/browser/resources/settings/settings_resources.grd index 4cf76ed..262dfc3 100644 --- a/chrome/browser/resources/settings/settings_resources.grd +++ b/chrome/browser/resources/settings/settings_resources.grd @@ -163,15 +163,30 @@ file="settings_ui/settings_ui.js" type="chrome_html" /> <if expr="use_nss_certs"> - <structure name="IDR_SETTINGS_CERTIFICATE_MANAGER_PAGE_CSS" - file="certificate_manager_page/certificate_manager_page.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_CERTIFICATE_MANAGER_PAGE_HTML" file="certificate_manager_page/certificate_manager_page.html" type="chrome_html" /> <structure name="IDR_SETTINGS_CERTIFICATE_MANAGER_PAGE_JS" file="certificate_manager_page/certificate_manager_page.js" type="chrome_html" /> + <structure name="IDR_SETTINGS_CERTIFICATE_LIST_HTML" + file="certificate_manager_page/certificate_list.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_CERTIFICATE_LIST_JS" + file="certificate_manager_page/certificate_list.js" + type="chrome_html" /> + <structure name="IDR_SETTINGS_CERTIFICATE_ENTRY_HTML" + file="certificate_manager_page/certificate_entry.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_CERTIFICATE_ENTRY_JS" + file="certificate_manager_page/certificate_entry.js" + type="chrome_html" /> + <structure name="IDR_SETTINGS_CERTIFICATE_SUBENTRY_HTML" + file="certificate_manager_page/certificate_subentry.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_CERTIFICATE_SUBENTRY_JS" + file="certificate_manager_page/certificate_subentry.js" + type="chrome_html" /> <structure name="IDR_SETTINGS_CERTIFICATES_BROWSER_PROXY_HTML" file="certificate_manager_page/certificates_browser_proxy.html" type="chrome_html" /> |