Bug #262008 --> add a close icon inside the quick search box. This button shows up

when you have text inside the quick search box. Otherwise it is hidden.

mail/base/content/commandglue.js

@@ -331,9 +331,6 @@ function RerootFolder(uri, newFolder, viewType, viewFlags, sortType, sortOrder)
   CreateDBView(newFolder, viewType, viewFlags, sortType, sortOrder);
   if (oldFolder)
   {
-    /*disable quick search clear button if we were in the search view on folder switching*/
-    disableQuickSearchClearButton();
-
      /*we don't null out the db reference for inbox because inbox is like the "main" folder
        and performance outweighs footprint */
     if (!IsSpecialFolder(oldFolder, MSG_FOLDER_FLAG_INBOX, false))

mail/base/content/mailWindowOverlay.xul

@@ -1872,9 +1872,6 @@
       </menupopup>
     </button>
   </textbox>
-
-  <button id="clearButton" label="&clearButton.label;" disabled="true" tooltiptext="&clearButton.tooltip;" oncommand="onClearSearch();" 
-          accesskey="&clearButton.accesskey;" hidden="true"/>
 </hbox>
 
 <hbox id="junkBar" collapsed="true" align="center">

mail/base/content/messenger.css

@@ -96,6 +96,11 @@ dummy.usesMailWidgets {
   -moz-user-focus: none;
 }
 
+.quick-search-clearbutton{
+  cursor: default;
+  -moz-user-focus: none;
+}
+
 #statusbar-updates {
   -moz-binding: url("chrome://mozapps/content/update/updates.xml#updateStatusbarNotification");
 }

mail/base/content/search.xml

@@ -51,6 +51,7 @@
         <html:input class="textbox-input" flex="1" anonid="input" allowevents="true"
                     xbl:inherits="onfocus,onblur,value,type,maxlength,disabled,size,readonly,tabindex,accesskey"/>
       </xul:hbox>
+      <xul:toolbarbutton id="quick-search-clearbutton" xbl:inherits="" disabled="true" class="quick-search-clearbutton" onclick="onClearSearch(); return false;"/>
     </content>
 
     <implementation>
@@ -65,6 +66,9 @@
       <property name="showingSearchCriteria" onget="return this.getAttribute('searchCriteria') == 'true';"
                 onset="this.setAttribute('searchCriteria', val); return val;"/>
 
+      <property name="clearButtonHidden" onget="return document.getElementById('quick-search-clearbutton').getAttribute('searchCriteria') == 'true';"
+                onset="document.getElementById('quick-search-clearbutton').setAttribute('clearButtonHidden', val); return val;"/>
+
       <field name="mQuickSearchMode">0</field>
 
       <property name="searchMode" onget="return this.mQuickSearchMode;"
@@ -76,9 +80,20 @@
          // extract the label value from the menu item
          var menuItems = document.getElementById('quick-search-menupopup').getElementsByAttribute('value', this.searchMode);
          this.inputField.value = menuItems[0].getAttribute('label');
+         this.clearButtonHidden = true;
         ]]></body>
       </method>
     </implementation>
+
+    <handlers>
+      <handler event="input">
+        <![CDATA[ 
+          if (!this.value) 
+            this.clearButtonHidden = true;
+          else 
+            this.clearButtonHidden = false;
+        ]]></handler>
+    </handlers>
   </binding>
   
   <binding id="searchBarDropMarker">

mail/base/content/searchBar.js

@@ -47,7 +47,6 @@ var gSearchBundle;
 var gStatusBar = null;
 var gSearchInProgress = false;
 var gSearchInput = null;
-var gClearButton = null;
 var gDefaultSearchViewTerms = null;
 var gQSViewIsDirty = false;
 var gHighlightedMessageText = false; 
@@ -136,7 +135,6 @@ function getDocumentElements()
 {
   gSearchBundle = document.getElementById("bundle_search");  
   gStatusBar = document.getElementById('statusbar-icon');
-  gClearButton = document.getElementById('clearButton');
   GetSearchInput();
 }
 
@@ -216,7 +214,6 @@ function onEnterInSearchBar()
         || gDBView.viewType == nsMsgViewType.eShowVirtualFolderResults)
      {
        statusFeedback.showStatusString("");
-       disableQuickSearchClearButton();
 
        viewDebug ("onEnterInSearchBar gDefaultSearchViewTerms = " + gDefaultSearchViewTerms + "gVirtualFolderTerms = " 
         + gVirtualFolderTerms + "gXFVirtualFolderTerms = " + gXFVirtualFolderTerms + "\n");
@@ -245,9 +242,6 @@ function onEnterInSearchBar()
    {
      initializeSearchBar();
 
-     if (gClearButton)
-      gClearButton.setAttribute("disabled", false); //coming into search enable clear button   
-
      ClearThreadPaneSelection();
      ClearMessagePane();
 
@@ -560,6 +554,9 @@ function onSearchInputFocus(event)
 
 function onSearchInputBlur(event)
 { 
+  if (gQuickSearchFocusEl && gQuickSearchFocusEl.id == 'searchInput') // ignore the blur if we are in the middle of processing the clear button
+    return;
+
   if (!gSearchInput.value)
     gSearchInput.showingSearchCriteria = true;
     
@@ -588,17 +585,26 @@ function onSearchInput(returnKeyHit)
   }
 }
 
+// temporary global used to make sure we restore focus to the correct element after clearing the quick search box
+// because clearing quick search means stealing focus.
+var gQuickSearchFocusEl = null; 
+
 function onClearSearch()
 {
-  var focusedElement = gLastFocusedElement;  //save of the last focused element so that focus can be restored
+  if (!gSearchInput.showingSearchCriteria) // ignore the text box value if it's just showing the search criteria string
+  {
+    gQuickSearchFocusEl = gLastFocusedElement;  //save of the last focused element so that focus can be restored
   Search("");
-  focusedElement.focus();
+    // this needs to be on a timer otherwise we end up messing up the focus while the Search("") is still happening
+    setTimeout("restoreSearchFocusAfterClear();", 0); 
+  }
 }
 
-function disableQuickSearchClearButton()
+function restoreSearchFocusAfterClear()
 {
- if (gClearButton)
-   gClearButton.setAttribute("disabled", true); //going out of search disable clear button
+  gQuickSearchFocusEl.focus();
+  gSearchInput.clearButtonHidden = 'true';
+  gQuickSearchFocusEl = null;
 }
 
 function ClearQSIfNecessary()
@@ -608,7 +614,6 @@ function ClearQSIfNecessary()
   if (gSearchInput.value == "")
     return;
 
-  viewDebug("clearing QS as Necessary\n");
   Search("");
 }
 
@@ -654,13 +659,22 @@ function changeQuickSearchMode(aMenuItem)
   var oldSearchMode = gSearchInput.searchMode;
   gSearchInput.searchMode = aMenuItem.value;
 
-  if (gSearchInput.value == "")
+  if (gSearchInput.value == "" || gSearchInput.showingSearchCriteria)
+  {
     gSearchInput.showingSearchCriteria = true;
+    if (gSearchInput.value) // 
+      gSearchInput.setSearchCriteriaText();
+  }
+  
+  // if the search box is empty, set showing search criteria to true so it shows up when focus moves out of the box
+  if (!gSearchInput.value)   
+    gSearchInput.showingSearchCriteria = true;
+  else if (gSearchInput.showingSearchCriteria) // if we are showing criteria text and the box isn't empty, change the criteria text
+    gSearchInput.setSearchCriteriaText();     
   else if (oldSearchMode != gSearchInput.searchMode) // the search mode just changed so we need to redo the quick search
   {
     if (gHighlightedMessageText)
       removeHighlighting(); // remove any existing highlighting in the message before switching gears
-      
     onEnterInSearchBar();
   }
 }

mail/base/skin/jar.mn

@@ -69,6 +69,7 @@ classic.jar:
     skin/classic/messenger/icons/unreadmail.png            (icons/unreadmail.png)
     skin/classic/messenger/icons/Search-bar.png            (icons/Search-bar.png)
     skin/classic/messenger/icons/search-arrow.gif          (icons/search-arrow.gif)
+    skin/classic/messenger/icons/quick-search-clear.png    (icons/quick-search-clear.png)
     skin/classic/communicator/icons/smileys/smiley-smile.png       (icons/smileys/smiley-smile.png)
     skin/classic/communicator/icons/smileys/smiley-frown.png       (icons/smileys/smiley-frown.png)
     skin/classic/communicator/icons/smileys/smiley-wink.png        (icons/smileys/smiley-wink.png)

mail/base/skin/mailWindow1.css

@@ -1006,12 +1006,35 @@ treechildren::-moz-tree-cell-text(lc-black, selected) {
   list-style-image: url("chrome://messenger/skin/icons/Search-bar.png");
 }
 
+.quick-search-clearbutton[clearButtonHidden="true"] {
+  visibility: hidden;
+}
+
 .quick-search-button-dropmarker {
   margin-left: 12px;
   margin-top: 8px;
   list-style-image: url("chrome://messenger/skin/icons/search-arrow.gif");
 }
 
+.quick-search-clearbutton {
+  list-style-image: url("chrome://messenger/skin/icons/quick-search-clear.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+  -moz-appearance: none;
+  padding: 0px !important;
+  border: none !important;
+  margin-right: -1px;
+}
+
+.quick-search-clearbutton:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+  padding: 0px !important;
+}
+
+.quick-search-clearbutton:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+  padding: 0px !important;
+}
+
 /* ..... message pane adjustments ..... */
 
 #messagepanebox {