From 6b7b00a9d97cccc2e72b60981baba75582f9a127 Mon Sep 17 00:00:00 2001 From: "jhawkins@chromium.org" Date: Fri, 21 Jan 2011 00:38:31 +0000 Subject: DOMUI: Use a styled button instead of an image for the password list show/hide button. BUG=69145 TEST=none Review URL: http://codereview.chromium.org/6241010 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@72057 0039d316-1c4b-4281-b951-d872f2087c98 --- chrome/browser/resources/options/options.html | 1 - chrome/browser/resources/options/options_page.css | 5 ++- .../browser/resources/options/password_manager.css | 38 ---------------- .../resources/options/password_manager_list.css | 51 ++++++++++++++++++++-- .../resources/options/password_manager_list.js | 35 +++++++++------ .../resources/options/search_engine_manager.css | 14 +----- 6 files changed, 73 insertions(+), 71 deletions(-) delete mode 100644 chrome/browser/resources/options/password_manager.css (limited to 'chrome/browser/resources') diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html index 2eaa434..cd7f21d 100644 --- a/chrome/browser/resources/options/options.html +++ b/chrome/browser/resources/options/options.html @@ -25,7 +25,6 @@ - diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css index bec1c2d..15ef685 100644 --- a/chrome/browser/resources/options/options_page.css +++ b/chrome/browser/resources/options/options_page.css @@ -389,13 +389,13 @@ list [lead][selected][editing] { list:focus > [lead]:nth-child(2), list:focus > [lead][selected]:nth-child(2), list [lead][selected][editing]:nth-child(2) { - border-top: 1px transparent; + border-top: 1px solid transparent; } list:focus > [lead]:nth-last-child(2), list:focus > [lead][selected]:nth-last-child(2), list [lead][selected][editing]:nth-last-child(2) { - border-bottom: 1px transparent; + border-bottom: 1px solid transparent; } list[disabled] > [lead][selected], @@ -533,6 +533,7 @@ select:focus { } /* TEXT */ +input[type='password], input[type='text'] { -webkit-border-radius: 2px; border: 1px solid #aaa; diff --git a/chrome/browser/resources/options/password_manager.css b/chrome/browser/resources/options/password_manager.css deleted file mode 100644 index 48ac0d9..0000000 --- a/chrome/browser/resources/options/password_manager.css +++ /dev/null @@ -1,38 +0,0 @@ -#saved-passwords-list .url { - box-sizing: border-box; - width: 40%; -} - -#saved-passwords-list .name { - -webkit-box-flex: 1; - width: 20%; -} - -#saved-passwords-list .password { - -webkit-box-flex: 1; - position: relative; -} - -#saved-passwords-list .password > span { - background: url('show_password.png'); - cursor: pointer; - height: 18px; - position: absolute; - top: 5px; - width: 40px; -} - -html[dir='ltr'] #saved-passwords-list .password > span { - right: 50px; -} - -html[dir='rtl'] #saved-passwords-list .password > span { - left: 50px; -} - -#saved-passwords-list .url, -#saved-passwords-list .name, -#password-exceptions-list .url { - overflow: hidden; - text-overflow: ellipsis; -} diff --git a/chrome/browser/resources/options/password_manager_list.css b/chrome/browser/resources/options/password_manager_list.css index 40201e9..62dd756 100644 --- a/chrome/browser/resources/options/password_manager_list.css +++ b/chrome/browser/resources/options/password_manager_list.css @@ -1,10 +1,53 @@ /* -Copyright (c) 2010 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. -*/ + * Copyright (c) 2011 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. + */ + +button.password-button { + background: #8aaaed; + color: #fff; + display: inline; + font-size: 90%; + font-weight: bold; + height: 18px; + padding: 0 2px; + position: absolute; + top: 5px; + width: 50px; +} + +html[dir='ltr'] button.password-button { + right: 50px; +} + +html[dir='rtl'] button.password-button { + left: 50px; +} .inactive-password { background: transparent; border: none; } + +#saved-passwords-list .url { + box-sizing: border-box; + width: 40%; +} + +#saved-passwords-list .name { + -webkit-box-flex: 1; + width: 20%; +} + +#saved-passwords-list .password { + -webkit-box-flex: 1; + position: relative; +} + +#saved-passwords-list .url, +#saved-passwords-list .name, +#password-exceptions-list .url { + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/chrome/browser/resources/options/password_manager_list.js b/chrome/browser/resources/options/password_manager_list.js index 505384c..b286e8e 100644 --- a/chrome/browser/resources/options/password_manager_list.js +++ b/chrome/browser/resources/options/password_manager_list.js @@ -32,8 +32,8 @@ cr.define('options.passwordManager', function() { // The URL of the site. var urlLabel = this.ownerDocument.createElement('div'); - urlLabel.className = 'url'; urlLabel.classList.add('favicon-cell'); + urlLabel.classList.add('url'); urlLabel.textContent = this.url; urlLabel.style.backgroundImage = url('chrome://favicon/' + this.url); this.contentElement.appendChild(urlLabel); @@ -50,17 +50,19 @@ cr.define('options.passwordManager', function() { // The password input field. var passwordInput = this.ownerDocument.createElement('input'); + passwordInput.type = 'password'; passwordInput.className = 'inactive-password'; passwordInput.readOnly = true; - passwordInput.type = 'password'; passwordInput.value = this.password; passwordInputDiv.appendChild(passwordInput); // The show/hide button. - var buttonSpan = this.ownerDocument.createElement('span'); - buttonSpan.className = 'hidden'; - buttonSpan.addEventListener('click', this.onClick_, true); - passwordInputDiv.appendChild(buttonSpan); + var button = this.ownerDocument.createElement('button'); + button.classList.add('hidden'); + button.classList.add('password-button'); + button.textContent = localStrings.getString('passwordShowButton'); + button.addEventListener('click', this.onClick_, true); + passwordInputDiv.appendChild(button); this.contentElement.appendChild(passwordInputDiv); }, @@ -70,13 +72,13 @@ cr.define('options.passwordManager', function() { var passwordInput = this.querySelector('input[type=password]'); var textInput = this.querySelector('input[type=text]'); var input = passwordInput || textInput; - var buttonSpan = input.nextSibling; + var button = input.nextSibling; if (this.selected) { input.classList.remove('inactive-password'); - buttonSpan.classList.remove('hidden'); + button.classList.remove('hidden'); } else { input.classList.add('inactive-password'); - buttonSpan.classList.add('hidden'); + button.classList.add('hidden'); } }, @@ -86,11 +88,16 @@ cr.define('options.passwordManager', function() { * @private */ onClick_: function(event) { - // The password is the input element previous to the button span. - var buttonSpan = event.currentTarget; - var passwordInput = buttonSpan.previousSibling; - var type = passwordInput.type; - passwordInput.type = type == 'password' ? 'text' : 'password'; + // The password is the input element previous to the button. + var button = event.currentTarget; + var passwordInput = button.previousSibling; + if (passwordInput.type == 'password') { + passwordInput.type = 'text'; + button.textContent = localStrings.getString('passwordHideButton'); + } else { + passwordInput.type = 'password'; + button.textContent = localStrings.getString('passwordShowButton'); + } }, /** diff --git a/chrome/browser/resources/options/search_engine_manager.css b/chrome/browser/resources/options/search_engine_manager.css index 72ef92e..68e3f9b5 100644 --- a/chrome/browser/resources/options/search_engine_manager.css +++ b/chrome/browser/resources/options/search_engine_manager.css @@ -89,21 +89,11 @@ } #searchEngineList .url-column button { - background-color: #aab6e1; - border: none; - border-radius: 3px; - color: white; + background: #8aaaed; + color: #fff; -webkit-margin-start: 3px; } -#searchEngineList .url-column button:hover { - background-color: #9aa6d1; -} - -#searchEngineList .url-column button:active { - background-color: #8a96c1; -} - #searchEngineList > :not(:hover):not([editing]) .url-column button { display: none; } -- cgit v1.1