Bug #109109 --> usability improvements to the custom header dialog

r=naving
sr=sspitzer

mailnews/base/search/resources/content/CustomHeaders.js

@@ -20,8 +20,9 @@
  */
 
 var gPrefs;
-var addButton;
-var removeButton;
+var gAddButton;
+var gOKButton;
+var gRemoveButton;
 var gHeaderInputElement;
 var gArrayHdrs;
 var gHdrsList;
@@ -40,16 +41,21 @@ function onLoad()
       hdrs =null;
     }
     gHeaderInputElement = document.getElementById("headerInput");
+    gHeaderInputElement.focus();
+
     gHdrsList = document.getElementById("headerList");
     gArrayHdrs = new Array();
-    addButton = document.getElementById("addButton");
-    removeButton = document.getElementById("removeButton");
+    gAddButton = document.getElementById("addButton");
+    gRemoveButton = document.getElementById("removeButton");
+    gOKButton = document.getElementById("ok");
 
     initializeDialog(hdrs);
 
     doSetOKCancel(onOk, null);
 
-    updateButtons();
+    updateAddButton(true);
+    updateRemoveButton();
+
     moveToAlertPosition();
 }
 
@@ -68,8 +74,29 @@ function initializeRows()
     addRow(TrimString(gArrayHdrs[i]));
 }
 
+function onTextInput()
+{
+  // enable the add button if the user has started to type text
+  updateAddButton( (gHeaderInputElement.value == "") );
+}
+
+function enterKeyPressed()
+{
+   // if the add button is currently the default action then add the text
+  if (gHeaderInputElement.value != "" && !gAddButton.disable)
+  {
+    onAddHeader();
+  } 
+  else
+  {
+    // otherwise, the default action for the dialog is the OK button
+    if (! gOKButton.disabled) 
+      doOKButton();
+  }
+}
+
 function onOk()
-{ 
+{  
   if (gArrayHdrs.length)
   {
     var hdrs = gArrayHdrs.join(": ");
@@ -97,7 +124,11 @@ function onAddHeader()
   if (!duplicateHdrExists(newHdr))
   {
     gArrayHdrs[gArrayHdrs.length] = newHdr;
-    addRow(newHdr);
+    var newItem = addRow(newHdr);
+    gHdrsList.selectItem (newItem); // make sure the new entry is selected in the tree
+    // now disable the add button
+    updateAddButton(true);
+    gHeaderInputElement.focus(); // refocus the input field for the next custom header
   }
 }
 
@@ -110,7 +141,7 @@ function duplicateHdrExists(hdr)
   }
   return false;
 }
-  
+ 
 function onRemoveHeader()
 {
   var listitem = gHdrsList.selectedItems[0]
@@ -140,18 +171,38 @@ function addRow(newHdr)
 {
   var listitem = document.createElement("listitem");
   listitem.setAttribute("label", newHdr);
-  gHdrsList.appendChild(listitem);  
+  gHdrsList.appendChild(listitem); 
+  return listitem;  
 }
 
-function updateButtons()
+function updateAddButton(aDisable)
 {
-    var headerSelected = (gHdrsList.selectedItems.length > 0);
-    removeButton.disabled = !headerSelected;
+  // only update the button if we absolutely have to...
+  if (aDisable != gAddButton.disabled)
+  {
+    gAddButton.disabled = aDisable;
+    if (aDisable)
+    {
+      gOKButton.setAttribute('default', true); 
+      gAddButton.removeAttribute('default');
+    }
+    else
+    {
+      gOKButton.removeAttribute('default');
+      gAddButton.setAttribute('default', true); 
+    }
+  }
+}
+
+function updateRemoveButton()
+{
+  var headerSelected = (gHdrsList.selectedItems.length > 0);
+  gRemoveButton.disabled = !headerSelected;
 }
 
 //Remove whitespace from both ends of a string
 function TrimString(string)
 {
-   if (!string) return "";
-   return string.replace(/(^\s+)|(\s+$)/g, '')
+  if (!string) return "";
+  return string.replace(/(^\s+)|(\s+$)/g, '')
 }

mailnews/base/search/resources/content/CustomHeaders.xul

@@ -37,7 +37,14 @@ Original Contributor(s): Navin Gupta <naving@netscape.com>
   <script type="application/x-javascript" src="chrome://messenger/content/CustomHeaders.js"/>
   <script src="chrome://messenger/content/searchTermOverlay.js"/>
 
-  <keyset id="dialogKeys"/>
+  <!-- we need to override the dialogs default key behavior so we can re-route enter/return
+       to the add button if the add button is suddenly the default action
+  -->
+  <keyset id="customHeaderDialogKeys">
+    <key keycode="VK_ENTER" oncommand="enterKeyPressed();"/>
+    <key keycode="VK_RETURN" oncommand="enterKeyPressed();"/>
+    <key keycode="VK_ESCAPE" oncommand="doCancelButton();"/>
+ </keyset>
 
   <grid flex="1">
     <columns>
@@ -49,12 +56,12 @@ Original Contributor(s): Navin Gupta <naving@netscape.com>
         <description>&newMsgHeader.label;</description>
       </row>
       <row>
-        <textbox id="headerInput"/>
+        <textbox id="headerInput" onfocus="this.select();" oninput="onTextInput();"/>
       </row>
 
       <row flex="1">
         <vbox>
-          <listbox id="headerList" flex="1" onselect="updateButtons();"/>
+          <listbox id="headerList" flex="1" onselect="updateRemoveButton();" />
         </vbox>
 
         <vbox>