Styling a XUL combo/dropdown

Talk about code development, features, specific bugs, enhancements, patches, and similar things.
Forum rules
Please keep everything here strictly on-topic.
This board is meant for Pale Moon source code development related subjects only like code snippets, patches, specific bugs, git, the repositories, etc.

This is not for tech support! Please do not post tech support questions in the "Development" board!
Please make sure not to use this board for support questions. Please post issues with specific websites, extensions, etc. in the relevant boards for those topics.

Please keep things on-topic as this forum will be used for reference for Pale Moon development. Expect topics that aren't relevant as such to be moved or deleted.
User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Styling a XUL combo/dropdown

Unread post by moonbat » 2021-02-09, 14:44

I have a combo box (menulist in XUL) that is dynamically populated with a list of names of colors and I want to set the background color of each cell to its corresponding RGB value.

I have a JSON object like so (simplified for brevity)-

Code: Select all

colors = {
 "red" : "rgb(255,0,0)",
 "green" : "rgb(0.255.0)", 
 "blue" : "rgb(0,0,255)"
}
Now I do the equivalent while looping through the colors object -

Code: Select all

for(let i in colors){
    combocell = combobox.appendItem(i);
    combocell.setAttribute("style","background-color:"+colors[i]);
}
but this doesn't work. Is it possible to do, or is there some other element to be styled?
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

vannilla
Moon Magic practitioner
Moon Magic practitioner
Posts: 2183
Joined: 2018-05-05, 13:29

Re: Styling a XUL combo/dropdown

Unread post by vannilla » 2021-02-09, 14:58

Shouldn't you try styling the menuitem element?
Unless the second block of code is just pseudocode, but then I'm not sure what you are trying to do.

New Tobin Paradigm

Re: Styling a XUL combo/dropdown

Unread post by New Tobin Paradigm » 2021-02-09, 15:09

I am not sure but shouldn't you be creating the menuitem xul element first and assigning shit to it then appending as a child to the menupopup element contained in your menulist element?

Programmatic xul element construction is bullshit though unless you have no other choice.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35478
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Styling a XUL combo/dropdown

Unread post by Moonchild » 2021-02-09, 15:25

You can only style default/os styled widgets by setting the appearance to none with -moz-appearance: none;
See e.g. what I did in this commit.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

New Tobin Paradigm

Re: Styling a XUL combo/dropdown

Unread post by New Tobin Paradigm » 2021-02-09, 16:33

Oh you are wanting to style em? Not make each color a choice?

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Styling a XUL combo/dropdown

Unread post by moonbat » 2021-02-10, 01:48

vannilla wrote:
2021-02-09, 14:58
Shouldn't you try styling the menuitem element?
Unless the second block of code is just pseudocode, but then I'm not sure what you are trying to do.
That's what I'm trying to do. In all my code, I assign a variable to each UI element instead of having to do document.getElementbyId() everywhere. So the combocell being returned by the appendItem call is a menuitem, I confirmed it by examining an existing combobox in DOM inspector. I did something similar to style the individual items in a listbox and that worked fine.
New Tobin Paradigm wrote:
2021-02-09, 16:33
Oh you are wanting to style em? Not make each color a choice?
Both actually, I'm trying to convert a bootstrap extension to overlay. The original one displays a webpage in a tab for configuration instead of a proper dialog box and has a combo with a list of about 50 different colors defined as RGB values and the background color of each item in the combo matches the color. It's easy to style an HTML <options> tag and I have successfully done the same with a XUL listbox but the same technique doesn't work with a menuitem.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

New Tobin Paradigm

Re: Styling a XUL combo/dropdown

Unread post by New Tobin Paradigm » 2021-02-10, 05:24

Why don't you just use the standard xul color picker and a text box that can accept a hex color for custom?

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Styling a XUL combo/dropdown

Unread post by moonbat » 2021-02-10, 05:58

That's an idea, but named colors where you can immediately see what it will look like seems more user friendly.
This is what I'm trying to achieve in XUL -
priv8-colorcombo.png
priv8-colorcombo.png (21.23 KiB) Viewed 697 times
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Styling a XUL combo/dropdown

Unread post by moonbat » 2021-02-10, 06:02

I'm able to implement this with a listbox -


Image
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

New Tobin Paradigm

Re: Styling a XUL combo/dropdown

Unread post by New Tobin Paradigm » 2021-02-10, 06:28

Well list boxes are easier to style. Still, I think the colorpicker would be best.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35478
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Styling a XUL combo/dropdown

Unread post by Moonchild » 2021-02-10, 09:20

You can't, nor shouldn't, style system menus that way. So no, <menuitem> won't get the same treatment. That would be totally breaking with every standard UI convention there is about menus.

When letting the user choose colors, unless you explicitly need the color names to be represented, a standard color picker would be best.
You can use a full RGB color picker if you want, even. ;-)
(we have input type=color in html5, and you can use html elements if you want in XUL if you properly namespace it)
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Styling a XUL combo/dropdown

Unread post by moonbat » 2021-03-12, 07:22

Minor update - I got the basic functionality of Priv8 reborn as Straitjacket working :mrgreen:

Now what remains is the fun part - integrating it well with the UI in ways that extensions for Firefox can't now dream of. I've gone with Tobin's idea of a colorpicker instead of named colors so people can choose whatever hue they want.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

Locked