Fix profile list display issues by using a tree instead b=120410 r=varga sr=jag

profile/resources/content/profileManager.js

@@ -56,13 +56,10 @@ function CreateProfileWizard()
 // update the display to show the additional profile
 function CreateProfile( aProfName, aProfDir )
 {
-  var profile = new Profile( aProfName, aProfDir, "yes" );
+  AddItem(aProfName, "yes");
-  var item = AddItem( "profiles", profile );
   var profileList = document.getElementById( "profiles" );
-  if( item ) {
+  profileList.view.selection.select(profileList.view.rowCount - 1);
-    profileList.selectItem( item );
+  profileList.treeBoxObject.ensureRowIsVisible(profileList.currentIndex);
-    profileList.ensureElementIsVisible( item );
-  }
 }
 
 // rename the selected profile
@@ -73,7 +70,7 @@ function RenameProfile()
   if (renameButton.getAttribute("disabled") == "true" )
     return false;
   var profileList = document.getElementById( "profiles" );
-  var selected = profileList.selectedItems[0];
+  var selected = profileList.view.getItemAtIndex(profileList.currentIndex);
   var profilename = selected.getAttribute("profile_name");
   if( selected.getAttribute("rowMigrate") == "no" ) {
     // migrate if the user wants to
@@ -100,7 +97,7 @@ function RenameProfile()
       return false;
   }
   else {
-    oldName = selected.getAttribute("rowName");
+    oldName = selected.getAttribute("profile_name");
     newName = {value:oldName};
     var dialogTitle = gProfileManagerBundle.getString("renameprofiletitle");
     var msg = gProfileManagerBundle.getString("renameProfilePrompt");
@@ -124,8 +121,7 @@ function RenameProfile()
         var migrate = selected.getAttribute("rowMigrate");
         try {
           profile.renameProfile(oldName, newName);
-          selected.setAttribute( "label", newName );
+          selected.firstChild.firstChild.setAttribute( "label", newName );
-          selected.setAttribute( "rowName", newName );
           selected.setAttribute( "profile_name", newName );
         }
         catch(e) {
@@ -151,8 +147,8 @@ function ConfirmDelete()
     return;
   var profileList = document.getElementById( "profiles" );
 
-  var selected = profileList.selectedItems[0];
+  var selected = profileList.view.getItemAtIndex(profileList.currentIndex);
-  var name = selected.getAttribute("rowName");
+  var name = selected.getAttribute("profile_name");
   
   var dialogTitle = gProfileManagerBundle.getString("deletetitle");
   var dialogText;
@@ -199,18 +195,18 @@ function ConfirmDelete()
 function DeleteProfile(deleteFiles)
 {
   var profileList = document.getElementById("profiles");
-  if (profileList.selectedItems && profileList.selectedItems.length) {
+  if (profileList.view.selection.count) {
-    var selected = profileList.selectedItems[0];
+    var selected = profileList.view.getItemAtIndex(profileList.currentIndex);
-    var name = selected.getAttribute("rowName");
+    var name = selected.getAttribute("profile_name");
-    var previous = profileList.getPreviousItem(selected, 1);
+    var previous = profileList.currentIndex - 1;
 
     try {
       profile.deleteProfile(name, deleteFiles);
-      profileList.removeChild(selected);
+      profileList.lastChild.removeChild(selected);
 
       if (previous) {
-        profileList.selectItem(previous);
+        profileList.view.selection.select(previous);
-        profileList.ensureElementIsVisible(previous);
+        profileList.treeBoxObject.ensureRowIsVisible(previous);
       }
 
       // set the button state
@@ -282,7 +278,7 @@ function ChangeCaption( aCaption )
   window.title = aCaption;
 }
 
-// do button enabling based on listbox selection
+// do button enabling based on tree selection
 function DoEnabling()
 {
   var renbutton = document.getElementById( "renbutton" );
@@ -290,8 +286,7 @@ function DoEnabling()
   var start     = document.getElementById( "ok" );
   
   var profileList = document.getElementById( "profiles" );
-  var items = profileList.selectedItems;
+  if (profileList.view.selection.count == 0)
-  if( items.length != 1 )
   {
     renbutton.setAttribute( "disabled", "true" );
     delbutton.setAttribute( "disabled", "true" );
@@ -305,7 +300,7 @@ function DoEnabling()
     
     var canDelete = true;
     if (!gStartupMode) {  
-      var selected = profileList.selectedItems[0];
+      var selected = profileList.view.getItemAtIndex(profileList.currentIndex);
       var profileName = selected.getAttribute("profile_name");
       var currentProfile = profile.currentProfile;
       if (currentProfile && (profileName == currentProfile))
@@ -321,7 +316,7 @@ function DoEnabling()
   }
 }
 
-// handle key event on listboxes
+// handle key event on tree
 function HandleKeyEvent( aEvent )
 {
   switch( aEvent.keyCode ) 
@@ -341,7 +336,7 @@ function HandleKeyEvent( aEvent )
 
 function HandleClickEvent( aEvent )
 {
-  if( aEvent.detail == 2 && aEvent.button == 0 && aEvent.target.localName == "listitem") {
+  if (aEvent.button == 0 && event.target.parentNode.view.selection.count) {
     if (!onStart())
       return false;
     window.close();

profile/resources/content/profileSelection.js

@@ -128,11 +128,12 @@ function highlightCurrentProfile()
     var currentProfile = profile.currentProfile;
     if( !currentProfile )
       return;
-    var currentProfileItem = document.getElementById( ( "profileName_" + currentProfile ) );
     var profileList = document.getElementById( "profiles" );
+    var currentProfileItem = profileList.getElementsByAttribute("profile_name", currentProfile).item(0);
     if( currentProfileItem ) {
-      profileList.selectItem( currentProfileItem );
+      var currentProfileIndex = profileList.view.getIndexOfItem(currentProfileItem);
-      profileList.ensureElementIsVisible( currentProfileItem );
+      profileList.view.selection.select( currentProfileIndex );
+      profileList.treeBoxObject.ensureRowIsVisible( currentProfileIndex );
     }
   }
   catch(e) {
@@ -141,32 +142,24 @@ function highlightCurrentProfile()
 }
 
 // function : <profileSelection.js>::AddItem();
-// purpose  : utility function for adding items to a listbox.
+// purpose  : utility function for adding items to a tree.
-function AddItem( aChildren, aProfileObject )
+function AddItem(aName, aMigrated)
 {
-  var kids    = document.getElementById(aChildren);
+  var tree = document.getElementById("profiles");
-  var listitem = document.createElement("listitem");
+  var treeitem = document.createElement("treeitem");
-  listitem.setAttribute("label", aProfileObject.mName );
+  var treerow = document.createElement("treerow");
-  listitem.setAttribute("rowMigrate",  aProfileObject.mMigrated );
+  var treecell = document.createElement("treecell");
-  listitem.setAttribute("class", "listitem-iconic");
+  treecell.setAttribute("label", aName);
-  listitem.setAttribute("profile_name", aProfileObject.mName );
+  treecell.setAttribute("properties", "rowMigrate-" + aMigrated);
-  listitem.setAttribute("rowName", aProfileObject.mName );
+  treeitem.setAttribute("profile_name", aName);
-  listitem.setAttribute("id", ( "profileName_" + aProfileObject.mName ) );
+  treeitem.setAttribute("rowMigrate", aMigrated);
-  // 23/10/99 - no roaming access yet!
+  treerow.appendChild(treecell);
-  //  var roaming = document.getElementById("roamingitem");
+  treeitem.appendChild(treerow);
-  //  kids.insertBefore(item,roaming);
+  tree.lastChild.appendChild(treeitem);
-  kids.appendChild(listitem);
-  return listitem;
-}
-
-function Profile ( aName, aMigrated )
-{
-  this.mName       = aName ? aName : null;
-  this.mMigrated   = aMigrated ? aMigrated : null;
 }
 
 // function : <profileSelection.js>::loadElements();
-// purpose  : load profiles into listbox
+// purpose  : load profiles into tree
 function loadElements()
 {
   try {
@@ -187,7 +180,7 @@ function loadElements()
 
       var migrated = Registry.getString( node.key, "migrated" );
 
-      AddItem( "profiles", new Profile( node.name, migrated ) );
+      AddItem(node.name, migrated);
 
       regEnum.next();
     }
@@ -201,7 +194,7 @@ function loadElements()
 function onStart()
 {
   var profileList = document.getElementById("profiles");
-  var selected = profileList.selectedItems[0];
+  var selected = profileList.view.getItemAtIndex(profileList.currentIndex);
   var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"].
     getService(Components.interfaces.nsIPromptService);
 

profile/resources/content/profileSelection.xul

@@ -98,14 +98,15 @@
     <separator class="thin" orient="vertical"/>
     
     <vbox flex="1">
-      <listbox id="profiles" flex="1" style="height: 0px;" seltype="single"
+      <tree id="profiles" flex="1" style="height: 0px;" seltype="single"
-            onclick="HandleClickEvent( event );"
+            hidecolumnpicker="true"
             onselect="DoEnabling();"
             onkeypress="HandleKeyEvent( event );">
-        <listhead>
+        <treecols>
-          <listheader label="&availprofiles.label;"/>
+          <treecol label="&availprofiles.label;" flex="1"/>
-        </listhead>
+        </treecols>
-      </listbox>
+        <treechildren ondblclick="HandleClickEvent(event);"/>
+      </tree>
       <vbox>
         <checkbox id="offlineState" label="&offlineState.label;" accesskey="&offlineState.accesskey;"/> 
         <checkbox id="autoSelectLastProfile" label="&autoSelectLastProfile.label;" accesskey="&autoSelectLastProfile.accesskey;"/> 

themes/classic/communicator/profile/profile.css

@@ -47,11 +47,12 @@ window.dialog {
   padding: 0;
 }
 
-#profiles > listitem {
+treechildren::-moz-tree-image {
+  margin-right: 2px;
   list-style-image: url("chrome://communicator/skin/profile/profileicon-large.gif");
 }
 
-#profiles > listitem[rowMigrate="no"] {
+treechildren::-moz-tree-image(rowMigrate-no) {
   list-style-image: url("chrome://communicator/skin/profile/migrate.gif");
 }
 

themes/modern/communicator/profile/profile.css

@@ -47,11 +47,12 @@
 
 /* ::::: Profile Selection dialog ::::: */
 
-#profiles > listitem {
+treechildren::-moz-tree-image {
+  margin-right: 2px;
   list-style-image: url("chrome://communicator/skin/profile/profile.gif");
 }
 
-#profiles > listitem[rowMigrate="no"] {
+treechildren::-moz-tree-image(rowMigrate-no) {
   list-style-image: url("chrome://communicator/skin/profile/migrate.gif");
 }