Bug 479197: The mini_login Bugzilla_password box does not convert to text type or clear itself in IE

Patch By Max Kanat-Alexander <mkanat@bugzilla.org> r=glob, a=mkanat

3 files changed, 62 insertions, 28 deletions

diff --git a/js/global.js b/js/global.js
index 2efa698b6..de3d7915d 100644
--- a/js/global.js
+++ b/js/global.js
@@ -19,38 +19,41 @@ var mini_login_constants;
 function init_mini_login_form( suffix ) {
     var mini_login = document.getElementById('Bugzilla_login' +  suffix );
     var mini_password = document.getElementById('Bugzilla_password' +  suffix );
-    // check if the login and password are blank and if they are
-    //    put in the text login and password and make them slightly greyed out
-    if( mini_login.value == "" && mini_password.value == "" ) {
+    var mini_dummy = document.getElementById(
+        'Bugzilla_password_dummy' + suffix);
+    // If the login and password are blank when the page loads, we display
+    // "login" and "password" in the boxes
+    if (mini_login.value == "" && mini_password.value == "") {
         mini_login.value = mini_login_constants.login;
-        mini_password.value = mini_login_constants.password;
-        mini_password.type = "text";
-
         YAHOO.util.Dom.addClass(mini_login, "bz_mini_login_help");
-        YAHOO.util.Dom.addClass(mini_password, "bz_mini_login_help");        
+        YAHOO.util.Dom.addClass(mini_password, 'bz_default_hidden');
+        YAHOO.util.Dom.removeClass(mini_dummy, 'bz_default_hidden');
     }
 }
 
-function mini_login_on_focus( el ) {
-    if( el.name == "Bugzilla_password" ){
-        if( el.type != "password" ) {
-            el.value = "";
-            el.type = "password";
-        }
-    } else if ( el.value == mini_login_constants.login ) {
-        if( el.value == mini_login_constants.login ) {
-            el.value = "";
-        }  
+// Clear the words "login" and "password" from the form when you click
+// in one of the boxes. We clear them both when you click in either box
+// so that the browser's password-autocomplete can work.
+function mini_login_on_focus( suffix ) {
+    var mini_login = document.getElementById('Bugzilla_login' +  suffix );
+    var mini_password = document.getElementById('Bugzilla_password' +  suffix );
+    var mini_dummy = document.getElementById(
+        'Bugzilla_password_dummy' + suffix);
+
+    YAHOO.util.Dom.removeClass(mini_login, "bz_mini_login_help");
+    if (mini_login.value == mini_login_constants.login) {
+        mini_login.value = '';
     }
-    YAHOO.util.Dom.removeClass(el, "bz_mini_login_help");
+    YAHOO.util.Dom.removeClass(mini_password, 'bz_default_hidden');
+    YAHOO.util.Dom.addClass(mini_dummy, 'bz_default_hidden');
 }
 
 function check_mini_login_fields( suffix ) {
     var mini_login = document.getElementById('Bugzilla_login' +  suffix );
     var mini_password = document.getElementById('Bugzilla_password' +  suffix );
-    if(( mini_login.value != "" && mini_password.value != "" ) && 
-       (  mini_login.value != mini_login_constants.login  && 
-          mini_password.value != mini_login_constants.password )) {
+    if( ( mini_login.value != "" && mini_password.value != "" ) && 
+         mini_login.value != mini_login_constants.login) 
+    {
       return true;
     }
     window.alert( mini_login_constants.warning );
diff --git a/skins/standard/global.css b/skins/standard/global.css
index aa3b9d758..75dc437d3 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -320,7 +320,10 @@ div#docslinks {
 /** End Comments **/
 
 .bz_default_hidden, .bz_tui_hidden {
-    display: none;
+    /* We have !important because we want elements with these classes to always
+     * be hidden, even if there is some CSS that overrides it (we use these
+     * classes inside JavaScript to hide things). */
+    display: none !important;
 }
 
 span.quote {
diff --git a/template/en/default/account/auth/login-small.html.tmpl b/template/en/default/account/auth/login-small.html.tmpl
index 821244cb8..ba1d671fa 100644
--- a/template/en/default/account/auth/login-small.html.tmpl
+++ b/template/en/default/account/auth/login-small.html.tmpl
@@ -39,13 +39,16 @@
     <input id="Bugzilla_login[% qs_suffix FILTER html %]" 
            class="bz_login"
            name="Bugzilla_login"
-           onfocus="mini_login_on_focus( this )"
+           onfocus="mini_login_on_focus('[% qs_suffix FILTER js %]')"
     >
     <input class="bz_password" 
            id="Bugzilla_password[% qs_suffix FILTER html %]" 
            name="Bugzilla_password"
            type="password"
-           onfocus="mini_login_on_focus( this )"
+    >
+    <input class="bz_password bz_default_hidden bz_mini_login_help" type="text" 
+           id="Bugzilla_password_dummy[% qs_suffix %]" value="password"
+           onfocus="mini_login_on_focus('[% qs_suffix FILTER js %]')"
     >
     [% IF Param('rememberlogin') == 'defaulton' ||
           Param('rememberlogin') == 'defaultoff' 
@@ -63,12 +66,37 @@
     <script type="text/javascript">
       mini_login_constants = {
           "login" : "login",
-          "password" : "password",
           "warning" : "You must set the login and password before logging in."
+      };
+      [%# We need this event to fire after autocomplete, because it does
+        # something different depending on whether or not there's already
+        # data in the login and password box.
+        # However, autocomplete happens at all sorts of different times in
+        # different browsers (before or after onDOMReady, before or after
+        # window.onload, in almost all combinations you can imagine).
+        # The only good solution I found is to time the event 200 
+        # milliseconds after window.onload for WebKit (doing it immediately 
+        # at onload works in Chrome but not in Safari, but I can't detect 
+        # them separately using YUI), and right after onDOMReady in Gecko. 
+        # The WebKit solution is also fairly guaranteed to work on any 
+        # browser (it's just strange, since the fields only populate 200 ms
+        # after the page loads), so it's the default. IE doesn't even
+        # recognize our forms as login forms, so I made it use the Gecko
+        # method also (since it's nicer visually). Opera never autocompletes
+        # forms without user interaction, so it also uses the Gecko method.
+        #%]
+      if (YAHOO.env.ua.gecko || YAHOO.env.ua.ie || YAHOO.env.ua.opera) {
+          YAHOO.util.Event.onDOMReady(function() {
+              init_mini_login_form('[% qs_suffix FILTER html %]');
+          });
       }
-      YAHOO.util.Event.onDOMReady(function() {
-        init_mini_login_form('[% qs_suffix FILTER html %]');
-      } );
+      else {
+          YAHOO.util.Event.on(window, 'load', function () {
+              window.setTimeout(function() {
+                  init_mini_login_form('[% qs_suffix FILTER html %]');
+              }, 200);
+          });
+    }
     </script>    
   </form>
 </li>