selectDialog.xul needs to be skinnable

VERIFIED FIXED in M17

Status

SeaMonkey
Passwords & Permissions
P3
normal
VERIFIED FIXED
18 years ago
14 years ago

People

(Reporter: Stephen P. Morse, Assigned: Stephen P. Morse)

Tracking

Trunk
x86
Windows NT

Firefox Tracking Flags

(Not tracked)

Details

(Assignee)

Description

18 years ago
The file xpfe/global/resources/content/selectDialog.xul contains two references 
to html tags that need to be removed.  One is html:div and that one is easy to 
fix up.  In fact the patch is shown below.  The other is to html:select and that 
one takes a bit more work.  Will probably involve some changes in the associated 
selectDialog.js file.

cmanske has unsolicitedly offered to help with this work.  So I'm copying him on 
this in case he wants to make the fix for html:select (I started looking into it 
but got sidetracked).

Here are the steps to cause this dialog to appear:

1. Go to any page that requires you to enter a password.  An example that I use 
is http://people.netscape.com/morse/password.htm

2. Enter username and password and click submit

3. Indicate that you want to save the login

4. Repeat with a different user name and again save the login

5. Go to the page for a third time.  This time single-signon does not know what 
username to prefill for you, so it pops up selectDialog.xul to ask you to 
choses.


*** selectDialog.xul	Wed May 24 23:57:29 2000
--- \selectDialog.xul.spm	
Thu May 18 14:02:53 2000
***************
*** 15,28 ****
  	    <keyset 
id="keyset"/>
  
  	    <box align="vertical" style="width: 24em;margin: 5px;">
! 				<html:div id="info.txt" style="margin-left:2em; 
margin-right:2em; margin-top:5px;" flex="100%">
! 				</html:div>
! 	
! 	
! 
! 		<html:select  size="8" id ="list" style=" 
margin-top:5px;margin-left:2em; margin-right:2em;" >
! 		 	
! 		 </html:select>
  	</box>
  	
  	
--- 15,22 ----
  	    <keyset id="keyset"/>
  
  	    <box align="vertical" style="width: 24em;margin: 5px;">
!               <div id="info.txt" style="margin-left:2em; margin-right:2em; 
margin-top:5px;" flex="100%"/>
! 		<html:select  size="8" id ="list" style=" 
margin-top:5px;margin-left:2em; margin-right:2em;"/>
  	</box>
(Assignee)

Updated

18 years ago
Status: NEW → ASSIGNED
Target Milestone: --- → M17

Comment 1

18 years ago
Here's how to conver from select to menulist:
In selectDialog.xul, replace this:
<html:select  size="8" id ="list" style=" margin-top:5px;margin-left:2em; 
margin-right:2em;" >
</html:select>
with:
<menulist id="list"/>

You shouldn't need any CSS -- the default should be fine.
In selectDialog.js, change this:
for ( i = 2; i <= numItems+1; i++ )
{
  var newString = param.GetString( i );
  dump("setting string "+newString+"\n");
  var newOption = new Option( newString );
  listBox.options[listBox.options.length] = newOption;	
}
with:
for ( i = 2; i <= numItems+1; i++ )
{
  var newString = param.GetString( i );
  dump("setting string "+newString+"\n");
  AppendStringToMenulist(newString);
}
(Note: you shouldn't have tabs in your source code! 
 Use 2 spaces per indent level)

These are the JS utilities that Composer uses (from EdDialogCommon.js -- 
we should move them to something like "utilities.js" in the global directory)

function AppendStringToMenulist(menulist, string)
{
  if (menulist)
  {
    var menupopup = menulist.firstChild;
    // May not have any popup yet -- so create one
    if (!menupopup)
    {
      menupopup = 
document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.o
nly.xul", "menupopup");
      if (menupopup)
        menulist.appendChild(menupopup);
      else
      {
        dump("Failed to create menupoup\n");
        return null;
      }
    }
    menuItem = 
document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.o
nly.xul", "menuitem");
    if (menuItem)
    {
      menuItem.setAttribute("value", string);
      menupopup.appendChild(menuItem);
      return menuItem;
    }
  }
  return null;
}
// You don't need these, but it's another example of a useful global utilities:
function AppendValueAndDataToMenulist(menulist, valueStr, dataStr)
{
  if (menulist)
  {
    var menupopup = menulist.firstChild;
    // May not have any popup yet -- so create one
    if (!menupopup)
    {
      menupopup = 
document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.o
nly.xul", "menupopup");
      if (menupopup)
        menulist.appendChild(menupopup);
      else
      {
        dump("Failed to create menupoup\n");
        return null;
      }
    }
    menuItem = 
document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.o
nly.xul", "menuitem");
    if (menuItem)
    {
      menuItem.setAttribute("value", valueStr);
      menuItem.setAttribute("data", dataStr);
      menupopup.appendChild(menuItem);
      return menuItem;
    }
  }
  return null;
}

function ClearMenulist(menulist)
{
  // There is usually not more than 1 menupopup under a menulist,
  //  but look for > 1 children anyway.
  // Note -- this doesn't remove menuitems from the menupopop -- SHOULD WE?
  if (menulist) {
    menulist.selectedItem = null;
    while (menulist.firstChild)
      menulist.removeChild(menulist.firstChild);
  }
}

I've sent mail to appropriate people concerning moving these to a global 
file.
One last thing - your JS and XUL files don't have the appropriate NPL license
statements at the top -- they aren't open-source files?
(Assignee)

Comment 2

18 years ago
Of course you meant:

  AppendStringToMenulist(listBox, newString);

instead of:

  AppendStringToMenulist(newString);

for the change in selectDialog.js you described above.

Made the changes and there's one problem with them.  The menulist comes up 
collapsed and the user has to click on it to see the entries other than the 
first.  Is there a way to have the menulist display some prespecified number of 
entries, equivalent to the "size=" attribute of html:select?
(Assignee)

Comment 3

18 years ago
Nominating for nsbeta2.  Current dialog is ugly (besides not being skinable) and 
inconsistent with all the other single-signon dialogs.  Fix is straightforward 
and very safe besides (no way it could break anything outside of the dialog 
itself because the changes are in xul and js files).
Keywords: nsbeta2

Comment 4

18 years ago
Sorry! You want a "listbox" not a "combobox" (menulist).
This currently requires a <tree> until hyatt makes a simplified version in XBL.
So intead of the menulist, use this:
<tree rows="8" class="list" id="list" flex="1"/>
and use this to append the strings:
AppendStringToTreelist(list, string);
where this is the method (again, should be in global!)
function AppendStringToTreelist(tree, string)
{
  if (tree)
  {
    var treechildren = tree.firstChild;
    if (!treechildren)
    {
      treechildren = 
document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.o
nly.xul", "treechildren");
      if (treechildren)
        tree.appendChild(treechildren);
      else
      {
        dump("Failed to create <treechildren>\n");
        return null;
      }
    }
    var treeitem = 
document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.o
nly.xul", "treeitem");
    var treerow = 
document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.o
nly.xul", "treerow");
    var treecell = 
document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.o
nly.xul", "treecell");
    if (treeitem && treerow && treecell)
    {
      treerow.appendChild(treecell);
      treeitem.appendChild(treerow);
      treechildren.appendChild(treeitem)
      treecell.setAttribute("value", string);
      var len = Number(tree.getAttribute("length"));
      if (!len) len = -1;
      tree.setAttribute("length",len+1);
      return treeitem;
    }
  }
  return null;
}

Note that a tree might have problems displaying -- I put them inside a box
like this:
  <box orient="vertical">
    <tree rows="8" class="list" id="list" flex="1"/>
  </box>
to force it to display correctly.
This is the css I use for class="list" gives it a border:
tree.list {
  border: 1px inset #CCCCCC;
  /* same as in menulist.css */
  margin: 1px 5px 2px 5px;
  width: 10em;
  height: 3em;
  /* use rows="#" in XUL to define height */
}
This CSS must be in your css file in appropriate \theme directories for each
skin. The need for this should go away with the new <list> XBL and style by 
hyatt.
(Assignee)

Comment 5

18 years ago
Fix in hand, r=cmanske
(Assignee)

Comment 6

18 years ago
Fixed.  Change files are:

   xpfe/global/resources/content/selectDialog.xul
   xpfe/global/resources/content/selectDialog.js
Status: ASSIGNED → RESOLVED
Last Resolved: 18 years ago
Resolution: --- → FIXED
the fix for this might've caused bug 41114.
verif (in spite of the probable cause of bug 41114).
Status: RESOLVED → VERIFIED
(Assignee)

Comment 9

18 years ago
*** Bug 39803 has been marked as a duplicate of this bug. ***
Product: Browser → Seamonkey
You need to log in before you can comment on or make changes to this bug.