89495, 121160 - redesign select addresses dialog and add search, add search to addressbook sidebar. r=bhuvan,sr=sspitzer,a=asa

mailnews/addrbook/resources/content/abCommon.js

@@ -40,6 +40,7 @@
 
 var gResultsOutliner = 0;
 var dirTree = 0;
+var abList = 0;
 var gAbView = null;
 
 var rdf = Components.classes["@mozilla.org/rdf/rdf-service;1"].getService(Components.interfaces.nsIRDFService);
@@ -226,6 +227,7 @@ function AbEditSelectedDirectory()
 function InitCommonJS()
 {
   dirTree = document.getElementById("dirTree");
+  abList = document.getElementById("addressbookList");
   gResultsOutliner = document.getElementById("abResultsOutliner");
 }
 

mailnews/addrbook/resources/content/abDirTreeOverlay.xul

@@ -39,7 +39,7 @@ Contributors:
       ref="moz-abdirectory://"
       datasources="rdf:addressdirectory"
       containment="http://home.netscape.com/NC-rdf#child"
-      onselect="DirPaneSelectionChange(); document.commandDispatcher.updateCommands('tree-select');"
+      onselect="DirPaneSelectionChange(); document.commandDispatcher.updateCommands('addrbook-select');"
       onclick="DirPaneClick(event);"
       ondblclick="DirPaneDoubleClick();"
       onblur="goOnEvent(this,'blur')"

mailnews/addrbook/resources/content/abSelectAddressesDialog.js

@@ -30,6 +30,10 @@ var editCardCallback = 0;
 
 var gAddressBookBundle;
 
+var gSearchInput;
+var gSearchTimer = null;
+var gQueryURIFormat = null;
+
 // localization strings
 var prefixTo;
 var prefixCc;
@@ -90,9 +94,20 @@ function OnLoadSelectAddress()
     AddAddressFromComposeWindow(bccAddress, prefixBcc);
   }
 
-  SelectFirstAddressBook();
+  gSearchInput = document.getElementById("searchInput");
+  SearchInputChanged();
+
+  SelectFirstAddressBookMenulist();
 
   DialogBucketPaneSelectionChanged();
+  
+  var workPhoneCol = document.getElementById("WorkPhone");
+  workPhoneCol.setAttribute("hidden", "true");
+  
+  var companyCol = document.getElementById("Company");
+  companyCol.setAttribute("hidden", "true");
+
+  document.documentElement.addEventListener("keypress", OnReturnHit, true);
 }
 
 function OnUnloadSelectAddress()
@@ -358,3 +373,86 @@ function DropOnBucketPane(event)
     AddAddressIntoBucket(prefixTo + address, address);
   }
 }
+
+function OnReturnHit(event)
+{
+  if (event.keyCode == 13 && (document.commandDispatcher.focusedElement == gSearchInput.inputField))
+	event.preventBubble();
+}
+
+function onEnterInSearchBar()
+{
+  var selectedNode = abList.selectedItem;
+ 
+  if (!selectedNode)
+    return;
+
+  if (!gQueryURIFormat) {
+    gQueryURIFormat = gPrefs.getCharPref("mail.addr_book.quicksearchquery.format");
+  }
+  
+  var sortColumn = selectedNode.getAttribute("sortColumn");
+  var sortDirection = selectedNode.getAttribute("sortDirection");
+  var searchURI = selectedNode.getAttribute("id");
+
+  if (gSearchInput.value != "") {
+    searchURI += gQueryURIFormat.replace(/@V/g, escape(gSearchInput.value));
+  }
+
+  SetAbView(searchURI, sortColumn, sortDirection);
+  
+  SelectFirstCard();
+}
+
+function onAbSearchInputMenulist(event)
+{
+  SearchInputChanged();
+
+  if (gSearchTimer) {
+    clearTimeout(gSearchTimer);
+    gSearchTimer = null;
+  }
+
+  if (event && event.keyCode == 13) {
+    onEnterInSearchBar();
+  }
+  else {
+    gSearchTimer = setTimeout("onEnterInSearchBar();", 800);
+  }
+}
+
+function onAbSearchReset(event) 
+{
+  gSearchInput.value = "";
+  ChangeDirectoryByDOMNode(abList.selectedItem);
+  
+  SearchInputChanged();
+
+  onReset(event);
+}
+
+function SearchInputChanged() {
+  var clearButton = document.getElementById("clear");
+  if (clearButton) {
+    if (gSearchInput.value && (gSearchInput.value != ""))
+      clearButton.removeAttribute("disabled");
+    else
+      clearButton.setAttribute("disabled", "true");
+  }
+}
+
+function SelectFirstAddressBookMenulist()
+{
+  ChangeDirectoryByDOMNode(abList.selectedItem);
+  return;
+}
+
+function DirPaneSelectionChangeMenulist()
+{
+  if (abList && abList.selectedItem) {
+    if (gSearchInput.value && (gSearchInput.value != "")) 
+      onEnterInSearchBar();
+    else
+      ChangeDirectoryByDOMNode(abList.selectedItem);
+  }
+}

mailnews/addrbook/resources/content/abSelectAddressesDialog.xul

@@ -40,6 +40,7 @@ Contributor(s):
 
 <window xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+		xmlns:nc="http://home.netscape.com/NC-rdf#"
         title="&selectAddressWindow.title;"
         class="dialog"
         width="680" height="480"
@@ -56,75 +57,73 @@ Contributor(s):
 
   <keyset id="dialogKeys"/>
 
-  <!-- Main box, 3 pane and majority of buttons -->
+  <vbox flex="1">
-  <hbox flex="1">
+  
-    <!-- 3 Pane box -->
+    <hbox id="topBox" align="center">
-    <hbox id="3PaneBox" flex="1">
+      <label value="&lookIn.label;"/>
-      
+      <menulist id="addressbookList" 
-      <!-- dir tree -->
+	            ref="moz-abdirectory://" 
-      <hbox id="dirTreeBox">
+                datasources="rdf:addressdirectory"
-        <tree id="dirTree" type="dialog" flex="1"/>
+                containment="http://home.netscape.com/NC-rdf#child"
-      </hbox>
+				oncommand="DirPaneSelectionChangeMenulist(); document.commandDispatcher.updateCommands('addrbook-select');">
-        
+        <template>
-      <splitter id="vertical-splitter" collapse="before"  persist="state"/>
+          <rule nc:IsMailList="false">
-
+            <menupopup>
-      <!-- Box that holds results pane, (to,cc,bcc buttons), and address bucket -->
+              <menuitem label="rdf:http://home.netscape.com/NC-rdf#DirName" uri="..."
-      <vbox id="results-bucket-tree-box" flex="1">
+                        IsMailList="rdf:http://home.netscape.com/NC-rdf#IsMailList"
-        <!-- Box that holds results pane and (to,cc,bcc buttons) -->
+                        IsRemote="rdf:http://home.netscape.com/NC-rdf#IsRemote"/>
-        <vbox flex="1">
+            </menupopup>
-          <!-- results pane -->
+          </rule>
-          <vbox id="results_box" flex="1">
+        </template>
-            <outliner id="abResultsOutliner" flex="1" persist="height" />
+      </menulist>  
-          </vbox>
+	  <label value="&for.label;"/> 
-          
+	  <textbox id="searchInput" flex="1" oninput="onAbSearchInputMenulist(event);"/>    
-          <!-- Box that holds (to,cc,bcc buttons) -->
+	  <button id="clear" label="&clearButton.label;" oncommand="onAbSearchReset(event);"/>
-          <hbox id="addToBucketButtonBox">
-            <spacer flex="1"/>
-            <button id="toButton" label="&toButton.label;" oncommand="SelectAddressToButton()"/> 
-            <spacer class="middle-button-spacer"/>
-            <button id="ccButton" label="&ccButton.label;" oncommand="SelectAddressCcButton()"/> 
-            <spacer class="middle-button-spacer"/>
-            <button id="bccButton" label="&bccButton.label;" oncommand="SelectAddressBccButton()"/>  
-            <spacer flex="1"/>
-          </hbox>
-        </vbox>
-        
-        <splitter id="bucket-splitter" collapse="before" persist="state"/>
-        
-        <!-- Address bucket -->
-        <vbox id="bucketBox">
-          <tree id="addressBucket" flex="1" seltype="multiple"
-              ondragover="DragOverBucketPane(event);"
-              ondragdrop="DropOnBucketPane(event);"
-              onselect="DialogBucketPaneSelectionChanged();">
-                        <treecolgroup>
-              <treecol flex="1"/>
-                        </treecolgroup>
-            <treechildren id="bucketBody" flex="1"/>
-          </tree>
-        </vbox>
-        
-      </vbox>
     </hbox>
     
-    <!-- Box with buttons on right edge of window -->
+    <hbox flex="1">    
-    <vbox id="rightColumnButtonBox">
+
-      <vbox flex="1">
+       <vbox id="resultsBox" flex="4">
-        <spacer class="third-column-spacer"/>
+         <outliner id="abResultsOutliner" flex="1" persist="height" />
-        <button id="new" label="&newButton.label;" tooltiptext="&addressPickerNewButton.tooltip;" oncommand="AbNewCard('dirTree')"/> 
+       </vbox>
-        <spacer class="third-column-spacer"/>
+        
-        <button id="edit" label="&editButton.label;" tooltiptext="&addressPickerEditButton.tooltip;" oncommand="AbEditSelectedCard()"/> 
+      <!--<splitter id="vertical-splitter" collapse="before"  persist="state"/>-->
+      
+      <vbox id="addToBucketButtonBox">
+        <spacer flex="1"/>
+        <button id="toButton" label="&toButton.label;" oncommand="SelectAddressToButton()"/> 
+        <spacer class="middle-button-spacer"/>
+        <button id="ccButton" label="&ccButton.label;" oncommand="SelectAddressCcButton()"/> 
+        <spacer class="middle-button-spacer"/>
+        <button id="bccButton" label="&bccButton.label;" oncommand="SelectAddressBccButton()"/>  
+        <spacer class="above-remove-spacer"/>
+        <button id="remove" label="&removeButton.label;" class="dialog" oncommand="RemoveSelectedFromBucket()"/> 
         <spacer flex="1"/>
       </vbox>
-      <vbox flex="1">
+        
-        <spacer flex="1"/>
+     <!--<splitter id="bucket-splitter" collapse="before" persist="state"/>-->
-        <button id="remove" label="&removeButton.label;" class="dialog" oncommand="RemoveSelectedFromBucket()"/>  
+        
-        <spacer flex="1"/>
+      <vbox id="bucketBox" flex="1">
+        <label value="&addressMessageTo.label;"/>
+        <tree id="addressBucket" flex="1" seltype="multiple"
+            ondragover="DragOverBucketPane(event);"
+            ondragdrop="DropOnBucketPane(event);"
+            onselect="DialogBucketPaneSelectionChanged();">
+          <treecolgroup>
+            <treecol flex="1"/>
+          </treecolgroup>
+          <treechildren id="bucketBody" flex="1"/>
+        </tree>
       </vbox>
-    </vbox>
+        
-  </hbox>
+    </hbox>
 
-  <!-- OK & Cancel buttons -->
+    <hbox id="newEditButtonBox">
-  <hbox id="okCancelButtons"/>
+      <button id="new" label="&newButton.label;" tooltiptext="&addressPickerNewButton.tooltip;" oncommand="AbNewCard('dirTree')"/> 
+      <button id="edit" label="&editButton.label;" tooltiptext="&addressPickerEditButton.tooltip;" oncommand="AbEditSelectedCard()"/> 
+    </hbox>
 
+    <hbox id="okCancelButtonsRight"/>
+  </vbox>
+  
 </window>

mailnews/addrbook/resources/content/addressbook-panel.js

@@ -108,14 +108,14 @@ function AbPanelLoad()
   var addrbookSession = Components.classes["@mozilla.org/addressbook/services/session;1"].getService().QueryInterface(Components.interfaces.nsIAddrBookSession);
   // this listener only cares when a directory is removed
   addrbookSession.addAddressBookListener(gAddressBookPanelAbListener, Components.interfaces.nsIAbListener.directoryRemoved);
+
+  gSearchInput = document.getElementById("searchInput");
 }
 
 
 function AbPanelOnChange(event)
 {
-  ChangeDirectoryByDOMNode(event.target);
+  abList.setAttribute("selectedAB", abList.value);
-  var abPopup = document.getElementById('addressbookList');
-  abPopup.setAttribute("selectedAB", abPopup.value);
 }
 
 function AbPanelUnload()
@@ -128,13 +128,11 @@ function AbPanelUnload()
 
 function AbPanelNewCard() 
 {
-  var abList = document.getElementById('addressbookList');
   goNewCardDialog(abList.selectedItem.getAttribute('id'));
 }
 
 function AbPanelNewList() 
 {
-  var abList = document.getElementById('addressbookList');
   goNewListDialog(abList.selectedItem.getAttribute('id'));
 }
 

mailnews/addrbook/resources/content/addressbook-panel.xul

@@ -29,7 +29,14 @@
 <?xml-stylesheet href="chrome://messenger/skin/addressbook/abResultsPane.css" type="text/css"?>
 
 <?xul-overlay href="chrome://messenger/content/addressbook/abDirTreeOverlay.xul"?>
-<!DOCTYPE window SYSTEM "chrome://messenger/locale/addressbook/abResultsPaneOverlay.dtd" >
+
+<!DOCTYPE window [
+<!ENTITY % abSelectAddressesDialogDTD SYSTEM "chrome://messenger/locale/addressbook/abSelectAddressesDialog.dtd" >
+%abSelectAddressesDialogDTD;
+<!ENTITY % abResultsPaneOverlayDTD SYSTEM "chrome://messenger/locale/addressbook/abResultsPaneOverlay.dtd" >
+%abResultsPaneOverlayDTD;
+]>
+
 <page id="addressbook-panel"
       xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       onload="AbPanelLoad();"
@@ -41,6 +48,7 @@
   <script type="application/x-javascript" src="chrome://messenger/content/addressbook/abCommon.js"/>
   <script type="application/x-javascript" src="chrome://messenger/content/addressbook/abResultsPane.js"/>
   <script type="application/x-javascript" src="chrome://messenger/content/addressbook/addressbook-panel.js"/>
+  <script type="application/x-javascript" src="chrome://messenger/content/addressbook/abSelectAddressesDialog.js"/>
     
   <popup id="composeMail">
     <menuitem label="&composeEmail.label;" accesskey="&composeEmail.accesskey;" oncommand="AbNewMessage();" default="true"/>
@@ -52,8 +60,9 @@
     <menuitem label="&addrBookCardProperties.label;" accesskey="&addrBookCardProperties.accesskey;" oncommand="AbEditSelectedCard();"/>
   </popup>
   <vbox id="results_box" flex="1">
-    <hbox id="panel-bar" class="toolbar">
+    <hbox id="panel-bar" class="toolbar" align="center">
-      <menulist id="addressbookList" persist="selectedAB" oncommand="AbPanelOnChange(event)" flex="1">
+	  <label value="&lookIn.label;"/>
+      <menulist id="addressbookList" oncommand="DirPaneSelectionChangeMenulist(); AbPanelOnChange(event)" flex="1">
         <menupopup id="addressbookList-menupopup" 
           datasources="rdf:addressdirectory" 
           ref="moz-abdirectory://">
@@ -67,6 +76,10 @@
         </menupopup>
       </menulist>
     </hbox>
+	<hbox align="center">
+	  <label value="&for.label;"/> 
+	  <textbox id="searchInput" flex="1" oninput="onAbSearchInputMenulist(event);"/> 
+	</hbox>
 
 <outliner id="abResultsOutliner" flex="1" context="composeMail" onclick="AbResultsPaneOnClick(event);" class="plain">
   <outlinercols>

mailnews/addrbook/resources/content/addressbook.xul

@@ -69,7 +69,7 @@ Contributor(s):
 <commandset id="addressBook">
   <commandset id="CommandUpdate_AddressBook"
         commandupdater="true"
-        events="focus,tree-select"
+        events="focus,addrbook-select"
         oncommandupdate="CommandUpdate_AddressBook()"/>
   
   <commandset id="globalEditMenuItems"/>

mailnews/addrbook/resources/locale/en-US/abSelectAddressesDialog.dtd

@@ -20,12 +20,17 @@ Rights Reserved.
 <!-- Title -->
 	<!ENTITY selectAddressWindow.title "Select Addresses">
 <!-- Buttons -->
-	<!ENTITY toButton.label		"To:"> 
+	<!ENTITY toButton.label		"To->"> 
-	<!ENTITY ccButton.label		"Cc:"> 
+	<!ENTITY ccButton.label		"Cc->"> 
-	<!ENTITY bccButton.label	"Bcc:">  
+	<!ENTITY bccButton.label	"Bcc->">  
 	<!ENTITY newButton.label	"New..."> 
 	<!ENTITY editButton.label	"Edit..."> 
 	<!ENTITY removeButton.label	"Remove"> 
+	<!ENTITY lookIn.label	    "Look in:"> 
+	<!ENTITY for.label	        "for:"> 
+	<!ENTITY clearButton.label	"Clear">
+	<!ENTITY stopButton.label	"Stop"> 	
+	<!ENTITY addressMessageTo.label	"Address message to:"> 
 <!-- Tooltips items -->  
 <!ENTITY addressPickerSearchButton.tooltip "Search the selected address book"> 
 <!ENTITY addressPickerNewButton.tooltip "Create a new address book card"> 

themes/classic/messenger/addressbook/selectAddressesDialog.css

@@ -30,48 +30,45 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: Select Addresses dialog ::::: */
+#topBox {
+  padding: 0.5em 0 1.0em 0;
+}
 
-#dirTreeBox {
+#resultsTree, #dirTree
-  width: 180px;
+#resultsTree > .tree-container-treerows,
+#dirTree > .tree-container-treerows {
+  border: none;
 }
 
 #resultsTree {
-  border-left: 1px solid ThreeDShadow;
+  min-width: 10px;
 }
- 
+
-#vertical-splitter {
+#resultsBox {
-  min-width     : 4px;
+  border: 1px solid #000000;
 }
 
 #addToBucketButtonBox {
-  padding      : 0.3em; 
+  min-width: 10px;
-  min-width    : 10px;
+  padding: 0.3em; 
-}
-
-#bucketBox {
-  height      : 170px;
 }
 
 #addressBucket {
-  height      : 100px; 
+  min-width: 10px;
-  min-width    : 10px;
 }
 
-#rightColumnButtonBox { /* Column with "New", "Edit" and "Remove" buttons */
+#newEditButtonBox {
-  padding      : .5em; 
+  padding-top: 0.5em; 
-  padding-right  : 0px;
+  padding-right: 0px;
+  margin-left: 0px;
 }
 
-.third-column-spacer {  /* Vertical Spacers between 3rd column buttons */
+.middle-button-spacer {
-  height      : 10px;
+  width: 10px;
 }
 
-.middle-button-spacer { /* Spacers between To, CC, and BCC buttons */
+.above-remove-spacer {
-  width      : 10px;
+  width: 10px;
-}
+  height: 15px;
-
-#bucket-splitter {
-  border: none;
-  min-height: 4px;
 }
 

themes/modern/messenger/addressbook/selectAddressesDialog.css

@@ -46,20 +46,8 @@
 
 /* ::::: Select Addresses dialog ::::: */
 
-#3PaneBox {
+#topBox {
-  border: 1px solid #000000; 
+  padding: 0.5em 0 1.0em 0;
-}
-
-#dirTreeBox {
-  width: 180px;
-}
-
-#dirTree {
-  min-width: 10px;
-}
-
-#resultsTreeBox {
-  border-bottom: 1px solid #000000;
 }
 
 #resultsTree, #dirTree
@@ -72,6 +60,10 @@
   min-width: 10px;
 }
 
+#resultsBox {
+  border: 1px solid #000000;
+}
+
 #addToBucketButtonBox {
   min-width: 10px;
   padding: 0.3em; 
@@ -79,22 +71,19 @@
 
 #addressBucket {
   min-width: 10px;
-  height: 100px; 
 }
 
-#bucketBox {
+#newEditButtonBox {
-  height: 170px;
+  padding-top: 0.5em; 
-}
-
-#rightColumnButtonBox {
-  padding: .5em; 
   padding-right: 0px;
-}
+  margin-left: 0px;
-
-.third-column-spacer {
-  height: 10px;
 }
 
 .middle-button-spacer {
   width: 10px;
 }
+
+.above-remove-spacer {
+  width: 10px;
+  height: 15px;
+}